diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 5e23e88..d410da3 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,169 +1,28 @@
 <template>
   <page class="home-page workbench-page">
+    <!-- 固定标题栏 -->
     <div class="workbench-header">
       <h1>Qdintc - 统一工作平台</h1>
     </div>
     
+    <!-- 主内容区 -->
     <div class="workbench-container">
       <div class="tools-container">
-        <!-- 代码管理 -->
-        <div class="tool-category" v-if="codeTools.length > 0">
-          <h2 class="category-title">代码管理</h2>
+        <!-- 工具分类循环渲染 -->
+        <div 
+          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 class="tool-card" v-for="tool in codeTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 持续集成 -->
-        <div class="tool-category" v-if="ciTools.length > 0">
-          <h2 class="category-title">持续集成</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in ciTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 项目管理 -->
-        <div class="tool-category" v-if="projectTools.length > 0">
-          <h2 class="category-title">项目管理</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in projectTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 数据库 -->
-        <div class="tool-category" v-if="databaseTools.length > 0">
-          <h2 class="category-title">数据库</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in databaseTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 监控告警 -->
-        <div class="tool-category" v-if="monitorTools.length > 0">
-          <h2 class="category-title">监控告警</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in monitorTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 文档知识 -->
-        <div class="tool-category" v-if="docTools.length > 0">
-          <h2 class="category-title">文档知识</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in docTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 测试工具 -->
-        <div class="tool-category" v-if="testTools.length > 0">
-          <h2 class="category-title">测试工具</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in testTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 安全扫描 -->
-        <div class="tool-category" v-if="securityTools.length > 0">
-          <h2 class="category-title">安全扫描</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in securityTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 云平台 -->
-        <div class="tool-category" v-if="cloudTools.length > 0">
-          <h2 class="category-title">云平台</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in cloudTools" :key="tool.name" @click="openTool(tool.url)">
-              <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>
-        </div>
-
-        <!-- 其他工具 -->
-        <div class="tool-category" v-if="otherTools.length > 0">
-          <h2 class="category-title">其他工具</h2>
-          <div class="category-items">
-            <div class="tool-card" v-for="tool in otherTools" :key="tool.name" @click="openTool(tool.url)">
+            <div 
+              v-for="tool in category.tools" 
+              :key="tool.name" 
+              class="tool-card"
+              @click="openTool(tool.url)"
+            >
               <div class="tool-icon" :style="{background: tool.color}">
                 <span class="icon-text">{{ tool.icon }}</span>
               </div>
@@ -180,231 +39,379 @@
   </page>
 </template>
 <script>
-  import './less/home-page.less'
-  import Page from '../components/Page'
-  export default{
-    components: {Page},
-    data () {
-      return {
+import './less/home-page.less'
+import Page from '../components/Page'
+
+export default {
+  name: 'HomePage',
+  components: { Page },
+  
+  data() {
+    return {
         // 代码管理工具
         codeTools: [
-          {
-            name: 'Gitea',
-            desc: 'Git代码仓库管理',
-            url: 'http://your-gitea-url.com',
-            displayUrl: 'gitea.company.com',
-            icon: 'Git',
-            color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-          },
-          {
-            name: 'GitLab',
-            desc: 'DevOps生命周期工具',
-            url: 'http://your-gitlab-url.com',
-            displayUrl: 'gitlab.company.com',
-            icon: 'GL',
-            color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
-          }
-        ],
-        // 持续集成工具
-        ciTools: [
-          {
-            name: 'Jenkins',
-            desc: '持续集成构建平台',
-            url: 'http://your-jenkins-url.com',
-            displayUrl: 'jenkins.company.com',
-            icon: 'JK',
-            color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
-          },
-          {
-            name: 'Harbor',
-            desc: 'Docker镜像仓库',
-            url: 'http://your-harbor-url.com',
-            displayUrl: 'harbor.company.com',
-            icon: 'HB',
-            color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
-          }
-        ],
-        // 项目管理工具
-        projectTools: [
-          {
+           {
             name: '禅道',
             desc: '项目管理与Bug追踪',
-            url: 'http://your-zentao-url.com',
-            displayUrl: 'zentao.company.com',
+            url: 'http://81.70.89.108:8088',
+            displayUrl: '81.70.89.108:8088',
             icon: '禅',
             color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
           },
           {
-            name: 'Jira',
-            desc: '敏捷项目管理工具',
-            url: 'http://your-jira-url.com',
-            displayUrl: 'jira.company.com',
-            icon: 'JR',
-            color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
+            name: 'Gitea',
+            desc: 'Gitea代码仓库管理',
+            url: 'http://81.70.89.108:81',
+            displayUrl: '81.70.89.108:81',
+            icon: 'Git',
+            color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+          },
+          {
+            name: 'Gitee',
+            desc: 'Gitee代码仓库管理',
+            url: 'https://gitee.com/qdintc',
+            displayUrl: 'gitee.com/qdintc',
+            icon: 'GL',
+            color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
+          },
+           {
+            name: 'Minio',
+            desc: 'Minio对象存储',
+            url: 'http://81.70.89.108:9009',
+            displayUrl: '81.70.89.108:9009',
+            icon: 'MI',
+            color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
+          },
+         
+          {
+            name: 'Harbor',
+            desc: 'Docker镜像仓库',
+            url: 'http://81.70.89.108:8081',
+            displayUrl: '81.70.89.108:8081',
+            icon: 'HB',
+            color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
           }
         ],
         // 数据库工具
         databaseTools: [
+          
+           {
+            name: 'Nocos',
+            desc: 'Nocos配置管理',
+            url: 'http://117.72.197.29:8088/',
+            displayUrl: '117.72.197.29:8088',
+            icon: 'NC',
+            color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
+          },
+          
+           {
+            name: 'Jenkins',
+            desc: '持续集成构建平台',
+            url: 'http://81.70.89.108:8080/login',
+            displayUrl: '81.70.89.108:8080',
+            icon: 'JK',
+            color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
+          },
+           {
+            name: 'Portainer',
+            desc: 'Docker容器管理',
+            url: 'https://8.140.22.151:9443',
+            displayUrl: '8.140.22.151:9443',
+            icon: 'PT',
+            color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
+          },
           {
-            name: 'MySQL',
-            desc: 'MySQL数据库管理',
-            url: 'http://your-mysql-url.com',
-            displayUrl: 'mysql.company.com',
-            icon: 'SQL',
+            name: 'NodeRed',
+            desc: 'NodeRed物联数据接入',
+            url: 'http://8.140.22.151:1880/',
+            displayUrl: '8.140.22.151:1880',
+            icon: 'NR',
             color: 'linear-gradient(135deg, #f8b500 0%, #fceabb 100%)'
           },
           {
-            name: 'Redis',
-            desc: '缓存数据库管理',
-            url: 'http://your-redis-url.com',
-            displayUrl: 'redis.company.com',
-            icon: 'RD',
+            name: 'EMQX',
+            desc: 'EMQX消息队列',
+            url: 'http://8.140.22.151:28083',
+            displayUrl: '8.140.22.151:28083',
+            icon: 'MQ',
             color: 'linear-gradient(135deg, #e43a15 0%, #e65245 100%)'
           }
         ],
-        // 监控告警工具
+        // 
         monitorTools: [
-          {
-            name: 'Grafana',
-            desc: '监控数据可视化',
-            url: 'http://your-grafana-url.com',
-            displayUrl: 'grafana.company.com',
-            icon: 'GF',
-            color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
-          },
-          {
-            name: 'Prometheus',
-            desc: '系统监控告警平台',
-            url: 'http://your-prometheus-url.com',
-            displayUrl: 'prometheus.company.com',
-            icon: 'PM',
-            color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
-          }
+          
         ],
         // 文档知识工具
         docTools: [
+         
           {
-            name: 'Confluence',
-            desc: '团队协作知识库',
-            url: 'http://your-confluence-url.com',
-            displayUrl: 'wiki.company.com',
-            icon: 'CF',
-            color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)'
+            name: '智聪官网',
+            desc: '智聪官网',
+            url: 'https://www.qdintc.com',
+            displayUrl: 'www.qdintc.com',
+            icon: '官',
+            color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
           },
           {
-            name: 'GitBook',
-            desc: '文档编写平台',
-            url: 'http://your-gitbook-url.com',
-            displayUrl: 'docs.company.com',
-            icon: 'GB',
-            color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)'
-          }
-        ],
-        // 测试工具
-        testTools: [
+            name: '智聪记账Web',
+            desc: '记账管理平台Web',
+            url: 'http://152.136.151.187:8080/intc/#/login',
+            displayUrl: '152.136.151.187:8080',
+            icon: 'A',
+            color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)'
+          },
           {
-            name: 'Selenium',
-            desc: '自动化测试平台',
-            url: 'http://your-selenium-url.com',
-            displayUrl: 'test.company.com',
-            icon: 'SE',
+            name: '智聪记账H5',
+            desc: '记账管理平台H5',
+            url: 'http://152.136.151.187:82/#/',
+            displayUrl: '152.136.151.187:82',
+            icon: 'A5',
+            color: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)'
+          },
+          {
+            name: '智聪健康Web',
+            desc: '健康档案平台Web',
+            url: 'http://152.136.151.187:81/hrms/login',
+            displayUrl: '152.136.151.187:81',
+            icon: 'H',
             color: 'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)'
           },
           {
-            name: 'Postman',
-            desc: 'API测试工具',
-            url: 'http://your-postman-url.com',
-            displayUrl: 'api-test.company.com',
-            icon: 'PM',
+            name: '智聪健康H5',
+            desc: '健康档案平台H5',
+            url: 'http://152.136.151.187:89/#/',
+            displayUrl: '152.136.151.187:89',
+            icon: 'H5',
             color: 'linear-gradient(135deg, #ff9966 0%, #ff5e62 100%)'
+          },
+          {
+            name: '智聪物联网',
+            desc: '智聪物联网平台',
+            url: 'http://152.136.151.187:8086/login',
+            displayUrl: '152.136.151.187:8086',
+            icon: '物联',
+            color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
+          },
+          {
+            name: '智聪物联网大屏',
+            desc: '智聪物联网大屏',
+            url: 'http://152.136.151.187:8088/login',
+            displayUrl: '152.136.151.187:8088',
+            icon: '大屏',
+            color: 'linear-gradient(135deg, #ff6b95 0%, #ffa44f 100%)'
+          },
+          // {
+          //   name: '智聪茅台Web',
+          //   desc: 'Imaotai预约平台Web',
+          //   url: 'http://152.136.151.187:8081/imaotai/login',
+          //   displayUrl: '152.136.151.187:8081',
+          //   icon: '茅',
+          //   color: 'linear-gradient(135deg, #fc6c85 0%, #f857a6 100%)'
+          // },
+          // {
+          //   name: '智聪茅台H5',
+          //   desc: 'Imaotai预约平台h5',
+          //   url: 'http://152.136.151.187:90/#/',
+          //   displayUrl: '152.136.151.187:90',
+          //   icon: '茅5',
+          //   color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
+          // }
+        ],
+        // 测试工具
+        testTools: [
+            {
+            name: '豆包',
+            desc: '豆包AI工具',
+            url: 'https://www.doubao.com/chat/',
+            displayUrl: 'www.doubao.com',
+            icon: '豆包',
+            color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
+          } ,
+          {
+            name: '微信公众号',
+            desc: '微信公众号',
+            url: 'https://mp.weixin.qq.com/cgi-bin/loginpage',
+            displayUrl: 'mp.weixin.qq.com',
+            icon: '微信',
+            color: 'linear-gradient(135deg, #38ef7d 0%, #11998e 100%)'
+          } ,
+           {
+            name: '腾讯云',
+            desc: '腾讯云',
+            url: 'https://cloud.tencent.com',
+            displayUrl: 'cloud.tencent.com',
+            icon: '腾讯',
+            color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
+          },
+          {
+            name: '阿里云',
+            desc: '阿里云',
+            url: 'https://www.aliyun.com',
+            displayUrl: 'www.aliyun.com',
+            icon: '阿里',
+            color: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)'
+          }
+          ,
+          {
+            name: '京东云',
+            desc: '京东云',
+            url: 'https://www.jdcloud.com',
+            displayUrl: 'www.jdcloud.com',
+            icon: '京东',
+            color: 'linear-gradient(135deg, #ee0979 0%, #ff6a00 100%)'
           }
         ],
         // 安全扫描工具
         securityTools: [
-          {
-            name: 'SonarQube',
-            desc: '代码质量检测平台',
-            url: 'http://your-sonar-url.com',
-            displayUrl: 'sonar.company.com',
-            icon: 'SQ',
-            color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
-          },
-          {
-            name: 'Trivy',
-            desc: '容器安全扫描',
-            url: 'http://your-trivy-url.com',
-            displayUrl: 'security.company.com',
-            icon: 'TV',
-            color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
-          }
-        ],
-        // 云平台工具
-        cloudTools: [
-          {
-            name: 'Kubernetes',
-            desc: '容器编排平台',
-            url: 'http://your-k8s-url.com',
-            displayUrl: 'k8s.company.com',
-            icon: 'K8s',
-            color: 'linear-gradient(135deg, #2af598 0%, #009efd 100%)'
-          },
-          {
-            name: 'Rancher',
-            desc: 'K8s集群管理',
-            url: 'http://your-rancher-url.com',
-            displayUrl: 'rancher.company.com',
-            icon: 'RC',
-            color: 'linear-gradient(135deg, #0ba360 0%, #3cba92 100%)'
-          }
+          
         ],
         // 其他工具
         otherTools: [
           {
-            name: 'Nexus',
-            desc: 'Maven私服仓库',
-            url: 'http://your-nexus-url.com',
-            displayUrl: 'nexus.company.com',
-            icon: 'NX',
+            name: '随机密码',
+            desc: '随机密码生成器',
+            url: 'https://suijimimashengcheng.bmcx.com',
+            displayUrl: 'bmcx.com',
+            icon: '密',
             color: 'linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)'
           },
           {
-            name: 'Portainer',
-            desc: 'Docker容器管理',
-            url: 'http://your-portainer-url.com',
-            displayUrl: 'portainer.company.com',
-            icon: 'PT',
-            color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)'
+            name: '翻墙工具',
+            desc: 'CordCloud',
+            url: 'https://cordc.xyz/auth/login',
+            displayUrl: 'cordc.xyz',
+            icon: 'COR',
+            color: 'linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%)'
+          },
+          {
+            name: '图片压缩',
+            desc: '图片压缩工具',
+            url: 'https://squoosh.app',
+            displayUrl: 'squoosh.app',
+            icon: 'SQ',
+            color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
+          },
+          {
+            name: '2925邮箱',
+            desc: '无限邮',
+            url: 'https://www.2925.com/login/',
+            displayUrl: 'www.2925.com',
+            icon: '邮',
+            color: 'linear-gradient(135deg, #ff9a56 0%, #ff5e62 100%)'
+          },
+          {
+            name: '青岛人社',
+            desc: '青岛市人力资源保障局',
+            url: 'https://hrss.qingdao.gov.cn',
+            displayUrl: 'hrss.qingdao.gov.cn',
+            icon: '人社',
+            color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)'
+          },
+          {
+            name: '青岛公积金',
+            desc: '青岛市住房公积金中心',
+            url: 'https://www.qdgjj.com/',
+            displayUrl: 'www.qdgjj.com',
+            icon: '住房',
+            color: 'linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%)'
+          },
+          {
+            name: '软著登记系统',
+            desc: '中国版权保护中心',
+            url: 'https://register.ccopyright.com.cn/login.html',
+            displayUrl: 'ccopyright.com.cn',
+            icon: '软著',
+            color: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)'
+          },
+          {
+            name: '开源软件镜像站',
+            desc: '清华大学开源软件镜像站',
+            url: 'https://mirrors.tuna.tsinghua.edu.cn',
+            displayUrl: 'tsinghua.edu.cn',
+            icon: '镜像',
+            color: 'linear-gradient(135deg, #96e6a1 0%, #d4fc79 100%)'
+          },
+          {
+            name: 'IP地址查询',
+            desc: 'iP地址归属地查询',
+            url: 'https://www.ip138.com/',
+            displayUrl: 'www.ip138.com',
+            icon: 'IP',
+            color: 'linear-gradient(135deg, #accbee 0%, #e7f0fd 100%)'
           }
-        ]
+        ],
+        // 空分类占位
+        ciTools: [],
+        projectTools: [],
+        monitorTools: [],
+        securityTools: [],
+        cloudTools: []
       }
     },
-    created() {
+  
+  computed: {
+    // 分类配置（统一管理）
+    categories: function() {
+      return [
+        { key: 'doc', title: '智聪科技', tools: this.docTools },
+        { key: 'code', title: '管理工具', tools: this.codeTools },
+        { key: 'database', title: '开发工具', tools: this.databaseTools },
+        { key: 'test', title: '第三方服务', tools: this.testTools },
+        { key: 'other', title: '其他工具', tools: this.otherTools }
+      ]
+    }
+  },
+  
+  created() {
     this.init()
   },
-    methods: {
-      openTool: function (url) {
-        if(url && url !== 'http://your-gitea-url.com') {
-          window.open(url, '_blank')
-        } else {
-          alert('请先配置该工具的访问地址')
-        }
+  
+  methods: {
+    /**
+     * 打开工具链接
+     * @param {string} url - 工具访问地址
+     */
+    openTool: function(url) {
+      if (url && url !== 'http://your-gitea-url.com') {
+        window.open(url, '_blank')
+      } else {
+        alert('请先配置该工具的访问地址')
       }
     }
-
-  };
+  }
+}
 </script>
 <style scoped lang="less">
+// 颜色变量
+@primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+@white-color: #fff;
+@text-primary: #333;
+@text-secondary: #666;
+@text-tertiary: #999;
+
+// 尺寸变量
+@header-height: 76px;
+@card-width: 240px;
+@icon-size: 60px;
+@border-radius-lg: 12px;
+@border-radius-md: 10px;
+
+// 间距变量
+@spacing-sm: 10px;
+@spacing-md: 20px;
+@spacing-lg: 30px;
+
+// 页面主体
 .workbench-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0;
-  padding-top: 76px;
+  background: @primary-gradient;
+  padding: @header-height 0 0;
 }
 
 .workbench-container {
   max-width: 1920px;
   margin: 0 auto;
-  padding: 30px 20px;
+  padding: 20px @spacing-md;
 }
 
 .workbench-header {
@@ -414,31 +421,23 @@
   right: 0;
   width: 100%;
   text-align: center;
-  padding: 20px 0;
-  background: rgba(255,255,255,0.08);
+  padding: @spacing-md 0;
+  background: @primary-gradient;
   z-index: 1000;
-  backdrop-filter: blur(15px);
-  border-bottom: 1px solid rgba(255,255,255,0.15);
   
   h1 {
     font-size: 32px;
     font-weight: 700;
-    color: #fff;
+    color: @white-color;
     margin: 0;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
-  }
-  
-  p {
-    font-size: 16px;
-    color: rgba(255,255,255,0.85);
-    margin: 8px 0 0 0;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }
 }
 
 .tools-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 25px 20px;
+  gap: 15px @spacing-md;
   align-items: flex-start;
 }
 
@@ -448,54 +447,54 @@
   .category-title {
     font-size: 20px;
     font-weight: 600;
-    color: #fff;
-    margin-bottom: 15px;
+    color: @white-color;
+    margin-bottom: @spacing-sm;
     padding-left: 12px;
-    border-left: 4px solid rgba(255,255,255,0.8);
+    border-left: 4px solid rgba(255, 255, 255, 0.8);
     line-height: 1.5;
   }
   
   .category-items {
     display: flex;
     flex-wrap: wrap;
-    gap: 15px;
+    gap: @spacing-sm;
   }
 }
 
 .tool-card {
   display: flex;
   align-items: center;
-  padding: 14px 18px;
-  background: rgba(255,255,255,0.95);
-  border-radius: 10px;
+  padding: 10px 10px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: @border-radius-md;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  width: 260px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: @card-width;
   
   &:hover {
     transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-    background: #fff;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    background: @white-color;
   }
 }
 
 .tool-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 12px;
+  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);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   
   .icon-text {
     font-size: 24px;
     font-weight: bold;
-    color: #fff;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    color: @white-color;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -507,19 +506,19 @@
 .tool-name {
   font-size: 18px;
   font-weight: 600;
-  color: #333;
-  margin: 0 0 4px 0;
+  color: @text-primary;
+  margin: 0 0 4px;
 }
 
 .tool-desc {
   font-size: 13px;
-  color: #666;
-  margin: 0 0 4px 0;
+  color: @text-secondary;
+  margin: 0 0 4px;
 }
 
 .tool-url {
   font-size: 12px;
-  color: #999;
+  color: @text-tertiary;
   font-family: 'Consolas', 'Monaco', monospace;
   margin: 0;
   overflow: hidden;
@@ -527,9 +526,10 @@
   white-space: nowrap;
 }
 
+// 响应式布局 - 平板
 @media (max-width: 1024px) {
   .tools-container {
-    gap: 25px 30px;
+    gap: 25px @spacing-lg;
   }
   
   .tool-category {
@@ -556,25 +556,22 @@
   }
 }
 
+// 响应式布局 - 手机
 @media (max-width: 600px) {
   .workbench-container {
-    padding: 30px 15px;
+    padding: @spacing-lg @spacing-sm;
   }
   
   .workbench-header {
-    margin-bottom: 30px;
+    margin-bottom: @spacing-lg;
     
     h1 {
       font-size: 28px;
     }
-    
-    p {
-      font-size: 14px;
-    }
   }
   
   .tools-container {
-    gap: 20px;
+    gap: @spacing-md;
   }
   
   .tool-category {