fix:功能优化。

src/views/HomePage.vue

@@ -2,34 +2,30 @@
   <page class="home-page workbench-page">
     <!-- 固定标题栏 -->
     <div class="workbench-header">
-      <h1>Qdintc - 统一工作平台</h1>
+      <h1>海纳云 - 统一工作平台</h1>
     </div>
-    
+
     <!-- 主内容区 -->
     <div class="workbench-container">
       <div class="tools-container">
         <!-- 工具分类循环渲染 -->
-        <div 
+        <div
-          v-for="category in categories" 
+          v-for="category in categories"
           :key="category.key"
           v-show="category.tools.length > 0"
           class="tool-category"
         >
           <h2 class="category-title">{{ category.title }}</h2>
           <div class="category-items">
-            <div 
+            <div
-              v-for="tool in category.tools" 
+              v-for="tool in category.tools"
-              :key="tool.name" 
+              :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>
@@ -45,7 +41,7 @@ import Page from '../components/Page'
 export default {
   name: 'HomePage',
   components: { Page },
-  
+
   data() {
     return {
         // 代码管理工具
@@ -82,7 +78,7 @@ export default {
             icon: 'MI',
             color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
           },
-         
+
           {
             name: 'Harbor',
             desc: 'Docker镜像仓库',
@@ -94,7 +90,7 @@ export default {
         ],
         // 数据库工具
         databaseTools: [
-          
+
            {
             name: 'Nocos',
             desc: 'Nocos配置管理',
@@ -103,7 +99,7 @@ export default {
             icon: 'NC',
             color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
           },
-          
+
            {
             name: 'Jenkins',
             desc: '持续集成构建平台',
@@ -137,13 +133,13 @@ export default {
             color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
           }
         ],
-        // 
+        //
         monitorTools: [
-          
+
         ],
         // 文档知识工具
         docTools: [
-         
+
           {
             name: '智聪官网',
             desc: '智聪官网',
@@ -263,7 +259,7 @@ export default {
         ],
         // 安全扫描工具
         securityTools: [
-          
+
         ],
         // 其他工具
         otherTools: [
@@ -348,7 +344,7 @@ export default {
         cloudTools: []
       }
     },
-  
+
   computed: {
     // 分类配置（统一管理）
     categories: function() {
@@ -361,11 +357,11 @@ export default {
       ]
     }
   },
-  
+
   created() {
     this.init()
   },
-  
+
   methods: {
     /**
      * 打开工具链接
@@ -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,23 +431,23 @@ export default {
 .tools-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px @spacing-md;
+  gap: 8px @spacing-md;
   align-items: flex-start;
 }
 
 .tool-category {
   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 {
     display: flex;
     flex-wrap: wrap;
@@ -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);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    background: @white-color;
-  }
-}
 
-.tool-icon {
+  &:hover {
-  width: @icon-size;
+    transform: translateY(-2px);
-  height: @icon-size;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: @border-radius-lg;
+    background: @white-color;
-  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,78 +495,65 @@ export default {
 // 响应式布局 - 平板
 @media (max-width: 1024px) {
   .tools-container {
-    gap: 25px @spacing-lg;
+    gap: 8px @spacing-md;
   }
-  
+
   .tool-category {
     flex-direction: column;
     width: 100%;
-    
+
     .category-title {
       width: auto;
       text-align: left;
-      padding: 10px 12px;
+      padding: 6px 8px;
+      font-size: 13px;
     }
-    
+
     .category-items {
       width: 100%;
     }
   }
-  
+
   .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;
   }
 }