fix:功能优化。

src/views/HomePage.vue

@@ -2,7 +2,7 @@
   <page class="home-page workbench-page">
     <!-- 固定标题栏 -->
     <div class="workbench-header">
-      <h1>Qdintc - 统一工作平台</h1>
+      <h1>海纳云 - 统一工作平台</h1>
     </div>
 
     <!-- 主内容区 -->
@@ -22,14 +22,10 @@
               :key="tool.name"
               class="tool-card"
               @click="openTool(tool.url)"
+              :title="tool.desc + ' - ' + tool.displayUrl"
             >
-              <div class="tool-icon" :style="{background: tool.color}">
-                <span class="icon-text">{{ tool.icon }}</span>
-              </div>
               <div class="tool-info">
                 <h4 class="tool-name">{{ tool.name }}</h4>
-                <p class="tool-desc">{{ tool.desc }}</p>
-                <p class="tool-url">{{ tool.displayUrl }}</p>
               </div>
             </div>
           </div>
@@ -390,16 +386,14 @@ export default {
 @text-tertiary: #999;
 
 // 尺寸变量
-@header-height: 76px;
+@header-height: 50px;
-@card-width: 240px;
+@card-width: 100px;
-@icon-size: 60px;
+@border-radius-md: 6px;
-@border-radius-lg: 12px;
-@border-radius-md: 10px;
 
 // 间距变量
-@spacing-sm: 10px;
+@spacing-sm: 6px;
-@spacing-md: 20px;
+@spacing-md: 12px;
-@spacing-lg: 30px;
+@spacing-lg: 16px;
 
 // 页面主体
 .workbench-page {
@@ -411,7 +405,7 @@ export default {
 .workbench-container {
   max-width: 1920px;
   margin: 0 auto;
-  padding: 20px @spacing-md;
+  padding: 10px @spacing-md;
 }
 
 .workbench-header {
@@ -421,13 +415,13 @@ export default {
   right: 0;
   width: 100%;
   text-align: center;
-  padding: @spacing-md 0;
+  padding: 8px 0;
   background: @primary-gradient;
   z-index: 1000;
 
   h1 {
-    font-size: 32px;
+    font-size: 20px;
-    font-weight: 700;
+    font-weight: 600;
     color: @white-color;
     margin: 0;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
@@ -437,7 +431,7 @@ export default {
 .tools-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px @spacing-md;
+  gap: 8px @spacing-md;
   align-items: flex-start;
 }
 
@@ -445,13 +439,13 @@ export default {
   flex: 0 1 auto;
 
   .category-title {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: 600;
     color: @white-color;
-    margin-bottom: @spacing-sm;
+    margin-bottom: 4px;
-    padding-left: 12px;
+    padding-left: 8px;
-    border-left: 4px solid rgba(255, 255, 255, 0.8);
+    border-left: 3px solid rgba(255, 255, 255, 0.8);
-    line-height: 1.5;
+    line-height: 1.3;
   }
 
   .category-items {
@@ -464,63 +458,35 @@ export default {
 .tool-card {
   display: flex;
   align-items: center;
-  padding: 10px 10px;
+  justify-content: center;
+  padding: 8px 6px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: @border-radius-md;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   width: @card-width;
+  min-height: 36px;
 
   &:hover {
-    transform: translateY(-4px);
+    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     background: @white-color;
   }
 }
 
-.tool-icon {
-  width: @icon-size;
-  height: @icon-size;
-  border-radius: @border-radius-lg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-right: 16px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  
-  .icon-text {
-    font-size: 24px;
-    font-weight: bold;
-    color: @white-color;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  }
-}
-
 .tool-info {
   flex: 1;
   min-width: 0;
+  text-align: center;
 }
 
 .tool-name {
-  font-size: 18px;
+  font-size: 13px;
   font-weight: 600;
   color: @text-primary;
-  margin: 0 0 4px;
-}
-
-.tool-desc {
-  font-size: 13px;
-  color: @text-secondary;
-  margin: 0 0 4px;
-}
-
-.tool-url {
-  font-size: 12px;
-  color: @text-tertiary;
-  font-family: 'Consolas', 'Monaco', monospace;
   margin: 0;
+  line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -529,7 +495,7 @@ export default {
 // 响应式布局 - 平板
 @media (max-width: 1024px) {
   .tools-container {
-    gap: 25px @spacing-lg;
+    gap: 8px @spacing-md;
   }
 
   .tool-category {
@@ -539,7 +505,8 @@ export default {
     .category-title {
       width: auto;
       text-align: left;
-      padding: 10px 12px;
+      padding: 6px 8px;
+      font-size: 13px;
     }
 
     .category-items {
@@ -548,59 +515,45 @@ export default {
   }
 
   .tool-card {
-    width: calc(50% - 8px);
+    width: calc(33.333% - 6px);
   }
 
   .workbench-header h1 {
-    font-size: 36px;
+    font-size: 18px;
   }
 }
 
 // 响应式布局 - 手机
 @media (max-width: 600px) {
   .workbench-container {
-    padding: @spacing-lg @spacing-sm;
+    padding: @spacing-md @spacing-sm;
   }
 
   .workbench-header {
-    margin-bottom: @spacing-lg;
+    margin-bottom: @spacing-sm;
 
     h1 {
-      font-size: 28px;
+      font-size: 16px;
     }
   }
 
   .tools-container {
-    gap: @spacing-md;
+    gap: @spacing-sm;
   }
 
   .tool-category {
     .category-title {
-      font-size: 16px;
+      font-size: 12px;
-      padding: 8px 10px;
+      padding: 4px 6px;
     }
   }
 
   .tool-card {
-    padding: 14px;
+    padding: 6px 8px;
-    width: 100%;
+    width: calc(50% - 4px);
-  }
-  
-  .tool-icon {
-    width: 50px;
-    height: 50px;
-    margin-right: 12px;
-    
-    .icon-text {
-      font-size: 20px;
-    }
   }
 
   .tool-name {
-    font-size: 16px;
-  }
-  
-  .tool-desc {
     font-size: 12px;
   }
 }