fix:样式优化完善，修复。

src/views/HomePage.vue

@@ -46,7 +46,7 @@
               @click="openTool(tool.url)"
             >
               <div class="tool-icon" :style="{background: tool.color}">
-                <span class="icon-text">{{ tool.icon }}</span>
+                <span class="icon-text" :class="getIconSizeClass(tool.icon)">{{ tool.icon }}</span>
               </div>
               <div class="tool-info">
                 <h4 class="tool-name">{{ tool.name }}</h4>
@@ -109,6 +109,16 @@ export default {
   },
 
   methods: {
+    // 根据图标文字长度返回字体大小class
+    getIconSizeClass(icon) {
+      if (!icon) return 'icon-size-default'
+      const length = icon.length
+      if (length === 1) return 'icon-size-1'
+      if (length === 2) return 'icon-size-2'
+      if (length === 3) return 'icon-size-3'
+      return 'icon-size-4' // 4个字或更多
+    },
+
     // 辅助方法
     getCategoriesInSuper(superCategoryId) {
       return this.categories.filter(c => c.superCategoryId === superCategoryId)
@@ -716,12 +726,53 @@ export default {
   flex-shrink: 0;
   margin-right: 16px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  padding: 4px;
 
   .icon-text {
-    font-size: 24px;
     font-weight: bold;
     color: @white-color;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    line-height: 1.3;
+    text-align: center;
+    word-wrap: break-word;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    max-width: 100%;
+    padding: 0 2px;
+
+    // 1个字：大字体
+    &.icon-size-1 {
+      font-size: 28px;
+      line-height: 1;
+    }
+
+    // 2个字：中等字体
+    &.icon-size-2 {
+      font-size: 24px;
+      line-height: 1.2;
+    }
+
+    // 3个字：较小字体
+    &.icon-size-3 {
+      font-size: 20px;
+      line-height: 1.2;
+    }
+
+    // 4个字或更多：小字体，2行显示
+    &.icon-size-4 {
+      font-size: 18px;
+      line-height: 1.3;
+    }
+
+    // 默认大小
+    &.icon-size-default {
+      font-size: 22px;
+      line-height: 1.3;
+    }
   }
 }
 

src/views/ManagePage.vue

@@ -227,7 +227,7 @@
               :title="colorOption.name"
             >
               <span v-if="toolForm.color === colorOption.value && !toolForm.icon" class="check-icon">✓</span>
-              <span v-if="toolForm.icon" class="icon-preview">{{ toolForm.icon }}</span>
+              <span v-if="toolForm.icon" class="icon-preview" :class="getIconSizeClass(toolForm.icon)">{{ toolForm.icon }}</span>
             </div>
           </div>
         </div>
@@ -381,6 +381,16 @@ export default {
   },
 
   methods: {
+    // 根据图标文字长度返回字体大小class
+    getIconSizeClass(icon) {
+      if (!icon) return 'icon-size-default'
+      const length = icon.length
+      if (length === 1) return 'icon-size-1'
+      if (length === 2) return 'icon-size-2'
+      if (length === 3) return 'icon-size-3'
+      return 'icon-size-4' // 4个字或更多
+    },
+
     // 消息提示
     showMessage(text, type = 'success') {
       this.message = { show: true, text, type }
@@ -1509,12 +1519,18 @@ export default {
           display: flex;
           align-items: center;
           justify-content: center;
-          font-size: 16px;
+          font-size: 14px;
           color: white;
           font-weight: bold;
           flex-shrink: 0;
           cursor: pointer;
           transition: all 0.2s ease;
+          line-height: 1; // 设置行高为1，确保垂直居中
+
+          span {
+            display: block;
+            text-align: center;
+          }
 
           &:hover {
             transform: scale(1.1);
@@ -1738,13 +1754,53 @@ button {
           font-size: 20px;
           font-weight: bold;
           text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+          line-height: 1;
         }
 
         .icon-preview {
           color: white;
-          font-size: 24px;
           font-weight: bold;
           text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+          line-height: 1.3;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-align: center;
+          word-wrap: break-word;
+          word-break: break-all;
+          max-width: 100%;
+          padding: 0 2px;
+
+          // 1个字：大字体
+          &.icon-size-1 {
+            font-size: 28px;
+            line-height: 1;
+          }
+
+          // 2个字：中等字体
+          &.icon-size-2 {
+            font-size: 24px;
+            line-height: 1.2;
+          }
+
+          // 3个字：较小字体
+          &.icon-size-3 {
+            font-size: 20px;
+            line-height: 1.3;
+          }
+
+          // 4个字或更多：最小字体，2行显示
+          &.icon-size-4 {
+            font-size: 18px;
+            line-height: 1.3;
+          }
+
+          // 默认
+          &.icon-size-default {
+            font-size: 22px;
+            line-height: 1.2;
+          }
         }
       }
     }