From b61798d143cc6d12b936cc7cc45482644af122d8 Mon Sep 17 00:00:00 2001
From: cuijiawang <cuijiawang@aizerobyte.com>
Date: Mon, 29 Sep 2025 15:42:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=A1=E6=9D=BF=E4=BB=93=E5=BA=93?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TemplateRepositoryDialog.vue   | 279 +++++++++++++++++-
 1 file changed, 268 insertions(+), 11 deletions(-)

diff --git a/src/views/system/codegen/components/TemplateRepositoryDialog.vue b/src/views/system/codegen/components/TemplateRepositoryDialog.vue
index fce3061..193373d 100644
--- a/src/views/system/codegen/components/TemplateRepositoryDialog.vue
+++ b/src/views/system/codegen/components/TemplateRepositoryDialog.vue
@@ -2,6 +2,7 @@
 import { ref, watch, onMounted, computed } from "vue";
 import { ElMessage } from "element-plus";
 import { Search, ArrowRight } from "@element-plus/icons-vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import {
   getAvailableTemplatesApi,
   getUserRepositoryListApi,
@@ -28,6 +29,7 @@ const loading = ref(false);
 const availableTemplates = ref<TemplateRepository[]>([]);
 const userTemplates = ref<TemplateRepository[]>([]);
 const searchKeyword = ref("");
+const activeTab = ref("all"); // 新增：当前选中的标签页
 const collapsedGroups = ref<Record<string, boolean>>({});
 const previewVisible = ref(false);
 const previewLoading = ref(false);
@@ -43,18 +45,59 @@ const dialogVisible = computed({
   set: val => emits("update:visible", val)
 });
 
+// 计算各类型模板的启用数量
+const templateCounts = computed(() => {
+  const allTemplates = availableTemplates.value;
+  const systemTemplates = allTemplates.filter(
+    t => t.templateSource === "system"
+  );
+  const userTemplates = allTemplates.filter(t => t.templateSource === "user");
+
+  return {
+    all: {
+      enabled: allTemplates.filter(t => t.isEnabled === 1).length,
+      total: allTemplates.length
+    },
+    system: {
+      enabled: systemTemplates.filter(t => t.isEnabled === 1).length,
+      total: systemTemplates.length
+    },
+    user: {
+      enabled: userTemplates.filter(t => t.isEnabled === 1).length,
+      total: userTemplates.length
+    }
+  };
+});
+
 // 过滤后的可用模板
 const filteredAvailableTemplates = computed(() => {
-  if (!searchKeyword.value) return availableTemplates.value;
-  return availableTemplates.value.filter(
-    template =>
-      template.templateName
-        .toLowerCase()
-        .includes(searchKeyword.value.toLowerCase()) ||
-      template.templateGroup
-        .toLowerCase()
-        .includes(searchKeyword.value.toLowerCase())
-  );
+  let templates = availableTemplates.value;
+
+  // 按标签页过滤
+  if (activeTab.value === "system") {
+    templates = templates.filter(
+      template => template.templateSource === "system"
+    );
+  } else if (activeTab.value === "user") {
+    templates = templates.filter(
+      template => template.templateSource === "user"
+    );
+  }
+
+  // 按搜索关键词过滤
+  if (searchKeyword.value) {
+    templates = templates.filter(
+      template =>
+        template.templateName
+          .toLowerCase()
+          .includes(searchKeyword.value.toLowerCase()) ||
+        template.templateGroup
+          .toLowerCase()
+          .includes(searchKeyword.value.toLowerCase())
+    );
+  }
+
+  return templates;
 });
 
 // 按分组组织模板
@@ -296,6 +339,89 @@ watch(
     destroy-on-close
   >
     <div class="repository-dialog">
+      <!-- 模板类型标签页 -->
+      <div class="template-tabs mb-4">
+        <el-tabs v-model="activeTab" class="custom-tabs">
+          <el-tab-pane label="全部模板" name="all">
+            <template #label>
+              <span class="tab-label">
+                <el-icon class="mr-1"
+                  ><component :is="useRenderIcon('ep:grid')"
+                /></el-icon>
+                全部模板
+                <span
+                  class="badge-text"
+                  :class="{
+                    'badge-success':
+                      templateCounts.all.enabled === templateCounts.all.total,
+                    'badge-warning':
+                      templateCounts.all.enabled > 0 &&
+                      templateCounts.all.enabled < templateCounts.all.total,
+                    'badge-info': templateCounts.all.enabled === 0
+                  }"
+                >
+                  {{ templateCounts.all.enabled }}/{{
+                    templateCounts.all.total
+                  }}
+                </span>
+              </span>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="系统模板" name="system">
+            <template #label>
+              <span class="tab-label">
+                <el-icon class="mr-1"
+                  ><component :is="useRenderIcon('ep:cpu')"
+                /></el-icon>
+                系统模板
+                <span
+                  class="badge-text"
+                  :class="{
+                    'badge-success':
+                      templateCounts.system.enabled ===
+                      templateCounts.system.total,
+                    'badge-warning':
+                      templateCounts.system.enabled > 0 &&
+                      templateCounts.system.enabled <
+                        templateCounts.system.total,
+                    'badge-info': templateCounts.system.enabled === 0
+                  }"
+                >
+                  {{ templateCounts.system.enabled }}/{{
+                    templateCounts.system.total
+                  }}
+                </span>
+              </span>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="用户模板" name="user">
+            <template #label>
+              <span class="tab-label">
+                <el-icon class="mr-1"
+                  ><component :is="useRenderIcon('ep:user')"
+                /></el-icon>
+                用户模板
+                <span
+                  class="badge-text"
+                  :class="{
+                    'badge-success':
+                      templateCounts.user.enabled === templateCounts.user.total,
+                    'badge-warning':
+                      templateCounts.user.enabled > 0 &&
+                      templateCounts.user.enabled < templateCounts.user.total,
+                    'badge-info': templateCounts.user.enabled === 0
+                  }"
+                >
+                  {{ templateCounts.user.enabled }}/{{
+                    templateCounts.user.total
+                  }}
+                </span>
+              </span>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
       <!-- 搜索栏 -->
       <div class="search-bar mb-4">
         <el-input
@@ -367,7 +493,11 @@ watch(
                 v-for="template in templates"
                 :key="`${template.templateSource}-${template.templateId}`"
                 class="template-item"
-                :class="{ enabled: template.isEnabled === 1 }"
+                :class="{
+                  enabled: template.isEnabled === 1,
+                  'system-template': template.templateSource === 'system',
+                  'user-template': template.templateSource === 'user'
+                }"
               >
                 <div class="template-content">
                   <div class="template-header">
@@ -563,6 +693,85 @@ watch(
 }
 
 .repository-dialog {
+  .template-tabs {
+    margin-bottom: 24px;
+
+    .custom-tabs {
+      :deep(.el-tabs__header) {
+        margin-bottom: 0;
+        border-bottom: 2px solid var(--el-border-color-light);
+      }
+
+      :deep(.el-tabs__nav-wrap) {
+        padding: 0 4px;
+      }
+
+      :deep(.el-tabs__item) {
+        padding: 12px 20px;
+        font-weight: 500;
+        color: var(--el-text-color-secondary);
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+
+        &.is-active {
+          font-weight: 600;
+          color: var(--el-color-primary);
+        }
+      }
+
+      :deep(.el-tabs__active-bar) {
+        height: 3px;
+        background: linear-gradient(
+          90deg,
+          var(--el-color-primary),
+          var(--el-color-primary-light-3)
+        );
+      }
+
+      .tab-label {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+
+        .el-icon {
+          font-size: 14px;
+        }
+
+        .badge-text {
+          min-width: 30px;
+          padding: 2px 6px;
+          font-size: 11px;
+          font-weight: 600;
+          line-height: 1.2;
+          text-align: center;
+          border-radius: 10px;
+          transition: all 0.2s ease;
+
+          &.badge-success {
+            color: var(--el-color-success);
+            background-color: var(--el-color-success-light-9);
+            border: 1px solid var(--el-color-success-light-7);
+          }
+
+          &.badge-warning {
+            color: var(--el-color-warning-dark-2);
+            background-color: var(--el-color-warning-light-9);
+            border: 1px solid var(--el-color-warning-light-7);
+          }
+
+          &.badge-info {
+            color: var(--el-text-color-secondary);
+            background-color: var(--el-fill-color-light);
+            border: 1px solid var(--el-border-color-lighter);
+          }
+        }
+      }
+    }
+  }
+
   .search-bar {
     display: flex;
     justify-content: flex-start;
@@ -676,6 +885,54 @@ watch(
             border-color: var(--el-color-primary-light-6);
           }
 
+          // 系统模板特殊样式
+          &.system-template {
+            position: relative;
+
+            &::before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 4px;
+              height: 100%;
+              content: "";
+              background: linear-gradient(
+                180deg,
+                var(--el-color-success),
+                var(--el-color-success-light-3)
+              );
+              border-radius: 6px 0 0 6px;
+            }
+
+            .template-content {
+              padding-left: 16px;
+            }
+          }
+
+          // 用户模板特殊样式
+          &.user-template {
+            position: relative;
+
+            &::before {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 4px;
+              height: 100%;
+              content: "";
+              background: linear-gradient(
+                180deg,
+                var(--el-color-primary),
+                var(--el-color-primary-light-3)
+              );
+              border-radius: 6px 0 0 6px;
+            }
+
+            .template-content {
+              padding-left: 16px;
+            }
+          }
+
           .template-content {
             .template-header {
               display: flex;