xto-fronted 0.6.2 → 0.7.0

package/src/views/dashboard/index.vue

@@ -155,7 +155,7 @@ const systemInfo = ref([
 <style lang="scss" scoped>
 .dashboard {
   padding: 24px;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   min-height: 100%;
 }
 
@@ -217,7 +217,7 @@ const systemInfo = ref([
 
   .stat-title {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
     margin-bottom: 8px;
   }
 
@@ -242,12 +242,12 @@ const systemInfo = ref([
     }
 
     &.up {
-      color: var(--xto-color-success, #10B981);
+      color: var(--xto-color-success, #2BC48A);
       background: var(--xto-color-success-lighter, #D1FAE5);
     }
 
     &.down {
-      color: var(--xto-color-danger, #EF4444);
+      color: var(--xto-color-danger, #F53F3F);
       background: var(--xto-color-danger-lighter, #FEE2E2);
     }
   }
@@ -285,20 +285,20 @@ const systemInfo = ref([
   h3 {
     font-size: 16px;
     font-weight: 600;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 
   .section-badge {
     font-size: 12px;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
-    background: var(--xto-fill-color, #F3F4F6);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
+    background: var(--xto-fill-color, #F2F3F5);
     padding: 4px 10px;
     border-radius: 12px;
   }
 
   .section-link {
     font-size: 14px;
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #12B6AF);
     text-decoration: none;
     transition: color 0.2s;
 
@@ -327,7 +327,7 @@ const systemInfo = ref([
   align-items: center;
   gap: 16px;
   padding: 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
   text-decoration: none;
   transition: all 0.2s ease;
@@ -337,7 +337,7 @@ const systemInfo = ref([
     transform: translateX(4px);
 
     .quick-arrow {
-      color: var(--xto-color-primary, #4F46E5);
+      color: var(--xto-color-primary, #12B6AF);
       transform: translateX(4px);
     }
   }
@@ -362,13 +362,13 @@ const systemInfo = ref([
   .quick-title {
     font-size: 15px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     margin-bottom: 4px;
   }
 
   .quick-desc {
     font-size: 13px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .quick-arrow {
@@ -377,7 +377,7 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
     transition: all 0.2s ease;
 
     svg {
@@ -405,7 +405,7 @@ const systemInfo = ref([
   align-items: flex-start;
   gap: 12px;
   padding: 14px 0;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
   position: relative;
 
   &:last-child {
@@ -424,11 +424,11 @@ const systemInfo = ref([
   font-weight: 500;
   flex-shrink: 0;
 
-  &.success { background: var(--xto-color-success-lighter, #D1FAE5); color: var(--xto-color-success, #10B981); }
-  &.warning { background: var(--xto-color-warning-lighter, #FEF3C7); color: var(--xto-color-warning, #F59E0B); }
-  &.info { background: var(--xto-color-info-lighter, #E5E7EB); color: var(--xto-color-info, #6B7280); }
-  &.danger { background: var(--xto-color-danger-lighter, #FEE2E2); color: var(--xto-color-danger, #EF4444); }
-  &.primary { background: var(--xto-color-primary-light-6, #C7D2FE); color: var(--xto-color-primary, #4F46E5); }
+  &.success { background: var(--xto-color-success-lighter, #D1FAE5); color: var(--xto-color-success, #2BC48A); }
+  &.warning { background: var(--xto-color-warning-lighter, #FEF3C7); color: var(--xto-color-warning, #FF7D00); }
+  &.info { background: var(--xto-color-info-lighter, #E5E6EB); color: var(--xto-color-info, #86909C); }
+  &.danger { background: var(--xto-color-danger-lighter, #FEE2E2); color: var(--xto-color-danger, #F53F3F); }
+  &.primary { background: var(--xto-color-primary-light-6, #C7D2FE); color: var(--xto-color-primary, #12B6AF); }
 }
 
 .activity-content {
@@ -443,18 +443,18 @@ const systemInfo = ref([
 .activity-user {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   margin-right: 8px;
 }
 
 .activity-action {
   font-size: 14px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .activity-time {
   font-size: 12px;
-  color: var(--xto-color-text-placeholder, #9CA3AF);
+  color: var(--xto-color-text-placeholder, #A9AEB8);
 }
 
 .activity-dot {
@@ -467,11 +467,11 @@ const systemInfo = ref([
   border-radius: 50%;
   opacity: 0.6;
 
-  &.success { background: var(--xto-color-success, #10B981); }
-  &.warning { background: var(--xto-color-warning, #F59E0B); }
-  &.info { background: var(--xto-color-info, #6B7280); }
-  &.danger { background: var(--xto-color-danger, #EF4444); }
-  &.primary { background: var(--xto-color-primary, #4F46E5); }
+  &.success { background: var(--xto-color-success, #2BC48A); }
+  &.warning { background: var(--xto-color-warning, #FF7D00); }
+  &.info { background: var(--xto-color-info, #86909C); }
+  &.danger { background: var(--xto-color-danger, #F53F3F); }
+  &.primary { background: var(--xto-color-primary, #12B6AF); }
 }
 
 // 系统信息
@@ -503,18 +503,18 @@ const systemInfo = ref([
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
 
   .info-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .info-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 }
 
@@ -534,13 +534,13 @@ const systemInfo = ref([
 
   .status-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 
   .status-value {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
   }
 }
 </style>

package/src/views/error/403.vue

@@ -33,10 +33,10 @@ const goBack = () => {
           <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
             <!-- 盾牌 -->
             <path d="M100 15 L150 35 L150 70 C150 95 100 110 100 110 C100 110 50 95 50 70 L50 35 Z"
-                  fill="var(--xto-color-warning-light-9, #FFFBEB)" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="2"/>
+                  fill="var(--xto-color-warning-light-9, #FFF3E8)" stroke="var(--xto-color-warning, #FF7D00)" stroke-width="2"/>
             <!-- 锁 -->
-            <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--xto-color-warning, #F59E0B)"/>
-            <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--xto-color-warning, #F59E0B)" stroke-width="3"/>
+            <rect x="85" y="55" width="30" height="25" rx="4" fill="var(--xto-color-warning, #FF7D00)"/>
+            <path d="M92 55 V48 A8 8 0 0 1 108 48 V55" fill="none" stroke="var(--xto-color-warning, #FF7D00)" stroke-width="3"/>
             <!-- 禁止符号 -->
             <circle cx="100" cy="67" r="6" fill="none" stroke="#fff" stroke-width="2"/>
             <line x1="96" y1="63" x2="104" y2="71" stroke="#fff" stroke-width="2"/>
@@ -87,7 +87,7 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   position: relative;
   overflow: hidden;
 }
@@ -115,7 +115,7 @@ const goBack = () => {
       height: 400px;
       top: -100px;
       right: -100px;
-      background: var(--xto-color-warning, #F59E0B);
+      background: var(--xto-color-warning, #FF7D00);
     }
 
     &.circle-2 {
@@ -123,7 +123,7 @@ const goBack = () => {
       height: 300px;
       bottom: -50px;
       left: -50px;
-      background: var(--xto-color-warning, #F59E0B);
+      background: var(--xto-color-warning, #FF7D00);
     }
 
     &.circle-3 {
@@ -151,7 +151,7 @@ const goBack = () => {
   .code-digit {
     font-size: 80px;
     font-weight: 700;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     line-height: 1;
   }
 
@@ -162,7 +162,7 @@ const goBack = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--xto-color-warning, #F59E0B) 0%, var(--xto-color-warning-light, #FDE68A) 100%);
+    background: linear-gradient(135deg, var(--xto-color-warning, #FF7D00) 0%, var(--xto-color-warning-light, #FDE68A) 100%);
     border-radius: 50%;
 
     .zero-inner {
@@ -182,13 +182,13 @@ const goBack = () => {
 .error-title {
   font-size: 24px;
   font-weight: 600;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   margin-bottom: 12px;
 }
 
 .error-desc {
   font-size: 14px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
   margin-bottom: 32px;
 }
 
@@ -218,7 +218,7 @@ const goBack = () => {
   p {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     margin-bottom: 12px;
   }
 
@@ -229,7 +229,7 @@ const goBack = () => {
 
     li {
       font-size: 13px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #86909C);
       padding: 4px 0;
       position: relative;
       padding-left: 16px;
@@ -242,7 +242,7 @@ const goBack = () => {
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
-        background: var(--xto-color-warning, #F59E0B);
+        background: var(--xto-color-warning, #FF7D00);
         border-radius: 50%;
         opacity: 0.6;
       }

package/src/views/error/404.vue

@@ -32,16 +32,16 @@ const goBack = () => {
         <div class="error-illustration">
           <svg viewBox="0 0 200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
             <!-- 页面图标 -->
-            <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--xto-fill-color, #F3F4F6)" stroke="var(--xto-border-color, #D1D5DB)" stroke-width="2"/>
+            <rect x="40" y="20" width="120" height="80" rx="8" fill="var(--xto-fill-color, #F2F3F5)" stroke="var(--xto-border-color, #D9DCE1)" stroke-width="2"/>
             <rect x="50" y="30" width="100" height="60" rx="4" fill="var(--xto-bg-color, #FFFFFF)"/>
-            <line x1="60" y1="45" x2="140" y2="45" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
-            <line x1="60" y1="55" x2="120" y2="55" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
-            <line x1="60" y1="65" x2="100" y2="65" stroke="var(--xto-border-color-light, #E5E7EB)" stroke-width="2"/>
+            <line x1="60" y1="45" x2="140" y2="45" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
+            <line x1="60" y1="55" x2="120" y2="55" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
+            <line x1="60" y1="65" x2="100" y2="65" stroke="var(--xto-border-color-light, #E5E6EB)" stroke-width="2"/>
             <!-- 问号 -->
-            <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #4F46E5)" font-size="24" font-weight="600">?</text>
+            <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #12B6AF)" font-size="24" font-weight="600">?</text>
             <!-- 搜索图标 -->
-            <circle cx="150" cy="35" r="12" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" fill="none"/>
-            <line x1="158" y1="43" x2="168" y2="53" stroke="var(--xto-color-primary, #4F46E5)" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="150" cy="35" r="12" stroke="var(--xto-color-primary, #12B6AF)" stroke-width="2" fill="none"/>
+            <line x1="158" y1="43" x2="168" y2="53" stroke="var(--xto-color-primary, #12B6AF)" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </div>
 
@@ -89,7 +89,7 @@ const goBack = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   position: relative;
   overflow: hidden;
 }
@@ -117,7 +117,7 @@ const goBack = () => {
       height: 400px;
       top: -100px;
       right: -100px;
-      background: var(--xto-color-primary, #4F46E5);
+      background: var(--xto-color-primary, #12B6AF);
     }
 
     &.circle-2 {
@@ -125,7 +125,7 @@ const goBack = () => {
       height: 300px;
       bottom: -50px;
       left: -50px;
-      background: var(--xto-color-info, #6B7280);
+      background: var(--xto-color-info, #86909C);
     }
 
     &.circle-3 {
@@ -134,7 +134,7 @@ const goBack = () => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: var(--xto-color-primary-light-3, #818CF8);
+      background: var(--xto-color-primary-light-3, #51DAD3);
     }
   }
 }
@@ -153,7 +153,7 @@ const goBack = () => {
   .code-digit {
     font-size: 80px;
     font-weight: 700;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     line-height: 1;
   }
 
@@ -164,7 +164,7 @@ const goBack = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5) 0%, var(--xto-color-primary-light-1, #5B54E8) 100%);
+    background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF) 0%, var(--xto-color-primary-light-1, #17C3BB) 100%);
     border-radius: 50%;
 
     .zero-inner {
@@ -184,13 +184,13 @@ const goBack = () => {
 .error-title {
   font-size: 24px;
   font-weight: 600;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   margin-bottom: 12px;
 }
 
 .error-desc {
   font-size: 14px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
   margin-bottom: 32px;
 }
 
@@ -214,13 +214,13 @@ const goBack = () => {
 
 .error-tip {
   padding: 20px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-large, 8px);
 
   p {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-primary, #1F2937);
+    color: var(--xto-color-text-primary, #1F2329);
     margin-bottom: 12px;
   }
 
@@ -231,7 +231,7 @@ const goBack = () => {
 
     li {
       font-size: 13px;
-      color: var(--xto-color-text-secondary, #6B7280);
+      color: var(--xto-color-text-secondary, #86909C);
       padding: 4px 0;
       position: relative;
       padding-left: 16px;
@@ -244,7 +244,7 @@ const goBack = () => {
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
-        background: var(--xto-color-primary, #4F46E5);
+        background: var(--xto-color-primary, #12B6AF);
         border-radius: 50%;
         opacity: 0.6;
       }

package/src/views/login/index.vue

@@ -252,7 +252,7 @@ const handleLogin = async () => {
   width: 100%;
   min-height: 100vh;
   display: flex;
-  background: var(--xto-bg-color-page, #F5F7FA);
+  background: var(--xto-bg-color-page, #F7F8FA);
 }
 
 // 左侧品牌区域（淡紫蓝渐变网格背景，纯 CSS 无图片资源）
@@ -262,7 +262,7 @@ const handleLogin = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #172E6E 0%, #1E3A8A 45%, #1D4ED8 100%);
+  background: linear-gradient(135deg, #095755 0%, #0B6B67 45%, #12B6AF 100%);
   overflow: hidden;
 
   @media (max-width: 992px) {
@@ -462,13 +462,13 @@ const handleLogin = async () => {
     h2 {
       font-size: 28px;
       font-weight: 600;
-      color: var(--xto-color-text-primary, #0F172A);
+      color: var(--xto-color-text-primary, #1F2329);
       margin-bottom: 8px;
     }
 
     p {
       font-size: 14px;
-      color: var(--xto-color-text-secondary, #64748B);
+      color: var(--xto-color-text-secondary, #86909C);
     }
   }
 
@@ -481,7 +481,7 @@ const handleLogin = async () => {
       display: block;
       font-size: 14px;
       font-weight: 500;
-      color: var(--xto-color-text-regular, #334155);
+      color: var(--xto-color-text-regular, #4E5566);
       margin-bottom: 8px;
     }
 
@@ -495,7 +495,7 @@ const handleLogin = async () => {
 
     :deep(.x-input__prefix) {
       margin-right: 12px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
     }
   }
 
@@ -507,12 +507,12 @@ const handleLogin = async () => {
 
     .forgot-link {
       font-size: 14px;
-      color: var(--xto-color-primary, #1D4ED8);
+      color: var(--xto-color-primary, #12B6AF);
       text-decoration: none;
       transition: color 0.2s;
 
       &:hover {
-        color: var(--xto-color-primary-dark-1, #1E40AF);
+        color: var(--xto-color-primary-dark-1, #0D7F7A);
       }
     }
   }
@@ -539,12 +539,12 @@ const handleLogin = async () => {
   .form-footer {
     margin-top: 32px;
     padding-top: 24px;
-    border-top: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+    border-top: 1px solid var(--xto-border-color-lighter, #EDEEF1);
     text-align: center;
 
     p {
       font-size: 13px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
       margin-bottom: 16px;
     }
 
@@ -560,12 +560,12 @@ const handleLogin = async () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--xto-fill-color, #F1F5F9);
+      background: var(--xto-fill-color, #F2F3F5);
       border: none;
       border-radius: 50%;
       cursor: pointer;
       transition: all 0.2s ease;
-      color: var(--xto-color-text-secondary, #64748B);
+      color: var(--xto-color-text-secondary, #86909C);
 
       svg {
         width: 20px;
@@ -573,8 +573,8 @@ const handleLogin = async () => {
       }
 
       &:hover {
-        background: var(--xto-color-primary-light-8, #DBEAFE);
-        color: var(--xto-color-primary, #1D4ED8);
+        background: var(--xto-color-primary-light-8, #DDF6F4);
+        color: var(--xto-color-primary, #12B6AF);
         transform: translateY(-2px);
       }
     }
@@ -586,7 +586,7 @@ const handleLogin = async () => {
 
     p {
       font-size: 12px;
-      color: var(--xto-color-text-placeholder, #94A3B8);
+      color: var(--xto-color-text-placeholder, #A9AEB8);
     }
   }
 }

package/src/views/system/menu/index.vue

@@ -275,9 +275,9 @@ onMounted(() => {
                   <svg viewBox="0 0 64 41" fill="none">
                     <g transform="translate(0 1)">
                       <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"/>
-                      <g stroke="var(--xto-color-text-placeholder, #9CA3AF)" stroke-width="2">
+                      <g stroke="var(--xto-color-text-placeholder, #A9AEB8)" stroke-width="2">
                         <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"/>
-                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F3F4F6)"/>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="var(--xto-fill-color, #F2F3F5)"/>
                       </g>
                     </g>
                   </svg>
@@ -446,7 +446,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .menu-page {
   padding: 24px;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F7F8FA);
   min-height: 100%;
 }
 
@@ -463,7 +463,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16px 24px;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 
   .toolbar-left {
     display: flex;
@@ -472,7 +472,7 @@ onMounted(() => {
 
   .table-count {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 
@@ -488,14 +488,14 @@ onMounted(() => {
   th, td {
     padding: 14px 16px;
     text-align: left;
-    border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+    border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
   }
 
   th {
     font-size: 14px;
     font-weight: 500;
-    color: var(--xto-color-text-secondary, #6B7280);
-    background: var(--xto-fill-color-light, #F9FAFB);
+    color: var(--xto-color-text-secondary, #86909C);
+    background: var(--xto-fill-color-light, #F7F8FA);
     white-space: nowrap;
   }
 
@@ -522,7 +522,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
+    color: var(--xto-color-text-placeholder, #A9AEB8);
 
     svg {
       width: 64px;
@@ -533,8 +533,8 @@ onMounted(() => {
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--xto-border-color-lighter, #F3F4F6);
-    border-top-color: var(--xto-color-primary, #4F46E5);
+    border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
+    border-top-color: var(--xto-color-primary, #12B6AF);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -561,7 +561,7 @@ onMounted(() => {
   display: inline-block;
   width: 16px;
   height: 1px;
-  background: var(--xto-border-color-light, #E5E7EB);
+  background: var(--xto-border-color-light, #E5E6EB);
   margin-right: 8px;
   vertical-align: middle;
 }
@@ -583,7 +583,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-base, 6px);
   font-size: 14px;
 }
@@ -591,12 +591,12 @@ onMounted(() => {
 .menu-title {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
   cursor: pointer;
   transition: color 0.2s;
 
   &:hover {
-    color: var(--xto-color-primary, #4F46E5);
+    color: var(--xto-color-primary, #12B6AF);
   }
 }
 
@@ -616,9 +616,9 @@ onMounted(() => {
   font-family: 'SF Mono', Monaco, Consolas, monospace;
   font-size: 12px;
   padding: 4px 8px;
-  background: var(--xto-fill-color-light, #F9FAFB);
+  background: var(--xto-fill-color-light, #F7F8FA);
   border-radius: var(--xto-border-radius-small, 4px);
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-type {
@@ -636,10 +636,10 @@ onMounted(() => {
   min-width: 24px;
   height: 24px;
   padding: 0 8px;
-  background: var(--xto-fill-color, #F3F4F6);
+  background: var(--xto-fill-color, #F2F3F5);
   border-radius: 12px;
   font-size: 12px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .col-status {
@@ -684,7 +684,7 @@ onMounted(() => {
 
   .status-label {
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 </style>