From 83bf3b5fd6b0a3a314932e66323bf6264bda6ce1 Mon Sep 17 00:00:00 2001
From: cuijiawang <cuijiawang@aizerobyte.com>
Date: Sat, 27 Sep 2025 14:44:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E5=99=A8=20=E6=A8=A1=E6=9D=BF=E4=BB=93=E5=BA=93ui=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TemplateRepositoryDialog.vue   | 224 +++++++++++++-----
 1 file changed, 167 insertions(+), 57 deletions(-)

diff --git a/src/views/system/codegen/components/TemplateRepositoryDialog.vue b/src/views/system/codegen/components/TemplateRepositoryDialog.vue
index d9ce7e7..2d50146 100644
--- a/src/views/system/codegen/components/TemplateRepositoryDialog.vue
+++ b/src/views/system/codegen/components/TemplateRepositoryDialog.vue
@@ -215,37 +215,42 @@ watch(
               >
                 <div class="template-content">
                   <div class="template-header">
-                    <h4 class="template-name">{{ template.templateName }}</h4>
-                    <div class="template-badges">
-                      <el-tag
-                        :type="
-                          template.templateSource === 'system'
-                            ? 'success'
-                            : 'info'
-                        "
-                        size="small"
-                      >
-                        {{
-                          template.templateSource === "system" ? "系统" : "用户"
-                        }}
-                      </el-tag>
-                      <el-tag
-                        :type="template.isEnabled === 1 ? 'success' : 'info'"
-                        size="small"
-                      >
-                        {{ template.isEnabled === 1 ? "显示中" : "已隐藏" }}
-                      </el-tag>
+                    <div class="template-info">
+                      <h4 class="template-name" :title="template.templateName">
+                        {{ template.templateName }}
+                      </h4>
+                      <div class="template-badges">
+                        <el-tag
+                          :type="
+                            template.templateSource === 'system'
+                              ? 'success'
+                              : 'info'
+                          "
+                          size="small"
+                        >
+                          {{
+                            template.templateSource === "system"
+                              ? "系统"
+                              : "用户"
+                          }}
+                        </el-tag>
+                        <el-tag
+                          :type="template.isEnabled === 1 ? 'success' : 'info'"
+                          size="small"
+                        >
+                          {{ template.isEnabled === 1 ? "显示中" : "已隐藏" }}
+                        </el-tag>
+                      </div>
+                    </div>
+                    <div class="template-actions">
+                      <el-button
+                        :type="template.isEnabled === 1 ? 'warning' : 'primary'"
+                        size="small"
+                        @click="toggleTemplate(template)"
+                      >
+                        {{ template.isEnabled === 1 ? "隐藏" : "显示" }}
+                      </el-button>
                     </div>
-                  </div>
-
-                  <div class="template-actions">
-                    <el-button
-                      :type="template.isEnabled === 1 ? 'warning' : 'primary'"
-                      size="small"
-                      @click="toggleTemplate(template)"
-                    >
-                      {{ template.isEnabled === 1 ? "隐藏" : "显示" }}
-                    </el-button>
                   </div>
                 </div>
               </div>
@@ -270,70 +275,142 @@ watch(
 </template>
 
 <style scoped lang="scss">
+// 响应式设计
+@media (width <= 768px) {
+  .repository-dialog {
+    .template-groups {
+      .template-group {
+        .template-grid {
+          grid-template-columns: 1fr;
+          gap: 10px;
+        }
+      }
+    }
+  }
+}
+
 .repository-dialog {
   .search-bar {
     display: flex;
     justify-content: flex-start;
+    margin-bottom: 20px;
   }
 
   .template-groups {
     .template-group {
+      margin-bottom: 24px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
       .group-header {
         display: flex;
         align-items: center;
-        margin-bottom: 16px;
+        padding: 0 4px;
+        margin-bottom: 12px;
+
+        h3 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+        }
       }
 
       .template-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 16px;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 12px;
 
         .template-item {
-          padding: 16px;
+          padding: 12px;
+          cursor: pointer;
           background: var(--el-bg-color);
           border: 1px solid var(--el-border-color-light);
-          border-radius: 8px;
-          transition: all 0.3s ease;
+          border-radius: 6px;
+          transition: all 0.2s ease;
 
           &:hover {
             border-color: var(--el-color-primary-light-5);
-            box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+            box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+            transform: translateY(-1px);
           }
 
           &.enabled {
             background: var(--el-color-primary-light-9);
-            border-color: var(--el-color-primary-light-7);
+            border-color: var(--el-color-primary-light-6);
           }
 
           .template-content {
             .template-header {
               display: flex;
+              gap: 8px;
               align-items: flex-start;
               justify-content: space-between;
-              margin-bottom: 16px;
 
-              .template-name {
+              .template-info {
                 flex: 1;
-                margin: 0;
-                margin-right: 12px;
-                font-size: 14px;
-                font-weight: 600;
-                color: var(--el-text-color-primary);
+                min-width: 0; // 允许内容收缩
+
+                .template-name {
+                  margin: 0 0 6px;
+                  overflow: hidden;
+                  font-size: 14px;
+                  font-weight: 500;
+                  line-height: 1.4;
+                  color: var(--el-text-color-primary);
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+
+                .template-badges {
+                  display: flex;
+                  flex-wrap: wrap;
+                  gap: 4px;
+
+                  .el-tag {
+                    height: 18px;
+                    padding: 0 5px;
+                    font-size: 11px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    border-radius: 3px;
+                  }
+                }
               }
 
-              .template-badges {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                align-items: flex-end;
-              }
-            }
+              .template-actions {
+                flex-shrink: 0;
 
-            .template-actions {
-              display: flex;
-              gap: 8px;
-              justify-content: flex-end;
+                .el-button {
+                  height: 26px;
+                  padding: 0 10px;
+                  font-size: 12px;
+                  font-weight: 500;
+                  border-radius: 4px;
+
+                  &.el-button--primary {
+                    background-color: var(--el-color-primary);
+                    border-color: var(--el-color-primary);
+
+                    &:hover {
+                      background-color: var(--el-color-primary-light-3);
+                      border-color: var(--el-color-primary-light-3);
+                    }
+                  }
+
+                  &.el-button--warning {
+                    background-color: var(--el-color-warning);
+                    border-color: var(--el-color-warning);
+
+                    &:hover {
+                      background-color: var(--el-color-warning-light-3);
+                      border-color: var(--el-color-warning-light-3);
+                    }
+                  }
+                }
+              }
             }
           }
         }
@@ -345,7 +422,8 @@ watch(
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 200px;
+    min-height: 160px;
+    color: var(--el-text-color-secondary);
   }
 }
 
@@ -353,5 +431,37 @@ watch(
   display: flex;
   gap: 12px;
   justify-content: flex-end;
+  padding-top: 16px;
+  margin-top: 16px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+// 优化对话框整体样式
+:deep(.el-dialog) {
+  .el-dialog__header {
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  .el-dialog__body {
+    max-height: 70vh;
+    padding: 20px;
+    overflow-y: auto;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 20px 16px;
+    border-top: none;
+  }
+}
+
+// 优化加载状态
+.el-loading-mask {
+  border-radius: 6px;
 }
 </style>