fix: 代码生成器 模板仓库ui优化

src/views/system/codegen/components/TemplateRepositoryDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, computed } from "vue";
 import { ElMessage } from "element-plus";
-import { Search } from "@element-plus/icons-vue";
+import { Search, ArrowRight } from "@element-plus/icons-vue";
 import {
   getAvailableTemplatesApi,
   getUserRepositoryListApi,
@@ -26,6 +26,7 @@ const loading = ref(false);
 const availableTemplates = ref<TemplateRepository[]>([]);
 const userTemplates = ref<TemplateRepository[]>([]);
 const searchKeyword = ref("");
+const collapsedGroups = ref<Record<string, boolean>>({});
 
 // 计算属性
 const dialogVisible = computed({
@@ -56,6 +57,14 @@ const groupedTemplates = computed(() => {
     }
     groups[template.templateGroup].push(template);
   });
+
+  // 初始化所有分组为折叠状态
+  Object.keys(groups).forEach(groupName => {
+    if (!(groupName in collapsedGroups.value)) {
+      collapsedGroups.value[groupName] = true; // 默认折叠
+    }
+  });
+
   return groups;
 });
 
@@ -139,6 +148,16 @@ const toggleTemplate = async (template: TemplateRepository) => {
   }
 };
 
+// 获取分组中启用的模板数量
+const getEnabledCount = (templates: TemplateRepository[]) => {
+  return templates.filter(template => template.isEnabled === 1).length;
+};
+
+// 切换分组折叠状态
+const toggleGroupCollapse = (groupName: string) => {
+  collapsedGroups.value[groupName] = !collapsedGroups.value[groupName];
+};
+
 // 对话框关闭时
 const handleClose = () => {
   dialogVisible.value = false;
@@ -197,16 +216,47 @@ watch(
             :key="groupName"
             class="template-group mb-6"
           >
-            <div class="group-header mb-3">
-              <el-tag type="primary" size="large" effect="dark">
-                {{ groupName }}
-              </el-tag>
-              <span class="ml-2 text-gray-500"
-                >{{ templates.length }} 个模板</span
-              >
+            <div
+              class="group-header mb-3"
+              @click="toggleGroupCollapse(groupName)"
+            >
+              <div class="group-info">
+                <el-icon
+                  class="collapse-icon"
+                  :class="{ expanded: !collapsedGroups[groupName] }"
+                >
+                  <ArrowRight />
+                </el-icon>
+                <el-tag
+                  type="primary"
+                  size="default"
+                  effect="dark"
+                  class="group-title-tag"
+                >
+                  {{ groupName }}
+                </el-tag>
+                <div class="group-stats">
+                  <span
+                    class="stats-text"
+                    :class="{
+                      'stats-complete':
+                        getEnabledCount(templates) === templates.length,
+                      'stats-partial':
+                        getEnabledCount(templates) > 0 &&
+                        getEnabledCount(templates) < templates.length,
+                      'stats-none': getEnabledCount(templates) === 0
+                    }"
+                  >
+                    显示 {{ getEnabledCount(templates) }}/{{ templates.length }}
+                  </span>
+                  <span class="template-count"
+                    >共 {{ templates.length }} 个模板</span
+                  >
+                </div>
+              </div>
             </div>
 
-            <div class="template-grid">
+            <div v-show="!collapsedGroups[groupName]" class="template-grid">
               <div
                 v-for="template in templates"
                 :key="`${template.templateSource}-${template.templateId}`"
@@ -307,14 +357,75 @@ watch(
       .group-header {
         display: flex;
         align-items: center;
-        padding: 0 4px;
+        padding: 8px 12px;
         margin-bottom: 12px;
+        cursor: pointer;
+        background: var(--el-bg-color-page);
+        border: 1px solid var(--el-border-color-lighter);
+        border-radius: 6px;
+        box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+        transition: all 0.2s ease;
 
-        h3 {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--el-text-color-primary);
+        &:hover {
+          background: var(--el-color-primary-light-9);
+          border-color: var(--el-color-primary-light-7);
+        }
+
+        .group-info {
+          display: flex;
+          flex: 1;
+          gap: 8px;
+          align-items: center;
+
+          .collapse-icon {
+            font-size: 12px;
+            color: var(--el-text-color-secondary);
+            transition: transform 0.2s ease;
+
+            &.expanded {
+              transform: rotate(90deg);
+            }
+          }
+
+          .group-title-tag {
+            font-size: 13px;
+            font-weight: 600;
+          }
+
+          .group-stats {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+
+            .stats-text {
+              padding: 2px 6px;
+              font-size: 11px;
+              font-weight: 600;
+              border-radius: 3px;
+              transition: all 0.2s ease;
+
+              &.stats-complete {
+                color: var(--el-color-success);
+                background-color: var(--el-color-success-light-9);
+              }
+
+              &.stats-partial {
+                color: var(--el-color-warning);
+                background-color: var(--el-color-warning-light-9);
+              }
+
+              &.stats-none {
+                color: var(--el-text-color-secondary);
+                background-color: var(--el-fill-color-light);
+              }
+            }
+
+            .template-count {
+              font-size: 11px;
+              font-weight: 400;
+              color: var(--el-text-color-secondary);
+            }
+          }
         }
       }