xto-fronted 0.6.3 → 0.8.0

package/src/views/dashboard/index.vue

@@ -3,10 +3,38 @@ import { ref } from 'vue'
 import { Progress } from '@xto/data'
 
 const stats = ref([
-  { title: '用户总数', value: 1234, icon: '👥', color: '#1677ff', trend: '+12.5%', trendUp: true },
-  { title: '今日访问', value: 567, icon: '👀', color: '#52c41a', trend: '+8.2%', trendUp: true },
-  { title: '订单数量', value: 890, icon: '📦', color: '#faad14', trend: '-3.1%', trendUp: false },
-  { title: '销售金额', value: 123456, icon: '💰', color: '#ff4d4f', trend: '+15.8%', trendUp: true }
+  {
+    title: '用户总数',
+    value: 1234,
+    icon: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0',
+    color: 'var(--xto-color-primary, #4F46E5)',
+    trend: '+12.5%',
+    trendUp: true
+  },
+  {
+    title: '今日访问',
+    value: 567,
+    icon: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Zm10 2.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
+    color: 'var(--xto-color-success, #00A870)',
+    trend: '+8.2%',
+    trendUp: true
+  },
+  {
+    title: '订单数量',
+    value: 890,
+    icon: 'M21 8l-9-5-9 5v8l9 5 9-5V8Zm-9-2.7L18.6 8 12 11.7 5.4 8 12 5.3Z',
+    color: 'var(--xto-color-warning, #FF7D00)',
+    trend: '-3.1%',
+    trendUp: false
+  },
+  {
+    title: '销售金额',
+    value: 123456,
+    icon: 'M3 7h18v10H3V7Zm9 5a2.5 2.5 0 1 0 0 .01M6.5 12h.01M17.5 12h.01',
+    color: 'var(--xto-color-danger, #F53F3F)',
+    trend: '+15.8%',
+    trendUp: true
+  }
 ])
 
 const activities = ref([
@@ -18,10 +46,30 @@ const activities = ref([
 ])
 
 const quickLinks = ref([
-  { title: '用户管理', path: '/system/user', icon: '👤', desc: '管理系统用户' },
-  { title: '角色管理', path: '/system/role', icon: '👥', desc: '角色权限配置' },
-  { title: '菜单管理', path: '/system/menu', icon: '📋', desc: '菜单路由管理' },
-  { title: '系统设置', path: '/system', icon: '⚙️', desc: '系统参数配置' }
+  {
+    title: '用户管理',
+    path: '/system/user',
+    icon: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0',
+    desc: '管理系统用户'
+  },
+  {
+    title: '角色管理',
+    path: '/system/role',
+    icon: 'M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 19a6 6 0 0 1 12 0m2-6a6 6 0 0 1 6 6',
+    desc: '角色权限配置'
+  },
+  {
+    title: '菜单管理',
+    path: '/system/menu',
+    icon: 'M4 6h16M4 12h16M4 18h10',
+    desc: '菜单路由管理'
+  },
+  {
+    title: '系统设置',
+    path: '/system',
+    icon: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3a7.4 7.4 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7.6 7.6 0 0 0-2-1.2L14.5 3h-5l-.4 2.6a7.6 7.6 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7.4 7.4 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7.6 7.6 0 0 0 2 1.2l.4 2.6h5l.4-2.6a7.6 7.6 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2Z',
+    desc: '系统参数配置'
+  }
 ])
 
 const systemInfo = ref([
@@ -37,14 +85,14 @@ const systemInfo = ref([
     <!-- 统计卡片 -->
     <div class="stats-section">
       <div v-for="stat in stats" :key="stat.title" class="stat-card">
-        <div class="stat-icon" :style="{ background: `linear-gradient(135deg, ${stat.color}20 0%, ${stat.color}10 100%)` }">
-          <span>{{ stat.icon }}</span>
+        <div class="stat-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" :style="{ color: stat.color }">
+            <path :d="stat.icon" />
+          </svg>
         </div>
         <div class="stat-content">
           <div class="stat-title">{{ stat.title }}</div>
-          <div class="stat-value" :style="{ color: stat.color }">
-            {{ stat.value.toLocaleString() }}
-          </div>
+          <div class="stat-value">{{ stat.value.toLocaleString() }}</div>
           <div class="stat-trend" :class="{ up: stat.trendUp, down: !stat.trendUp }">
             <svg v-if="stat.trendUp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M7 17l5-5 5 5M7 7l5 5 5-5"/>
@@ -55,7 +103,6 @@ const systemInfo = ref([
             <span>{{ stat.trend }}</span>
           </div>
         </div>
-        <div class="stat-decoration" :style="{ background: `linear-gradient(135deg, ${stat.color}08 0%, transparent 100%)` }"></div>
       </div>
     </div>
 
@@ -74,7 +121,11 @@ const systemInfo = ref([
             :to="link.path"
             class="quick-card"
           >
-            <div class="quick-icon">{{ link.icon }}</div>
+            <div class="quick-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path :d="link.icon" />
+              </svg>
+            </div>
             <div class="quick-info">
               <div class="quick-title">{{ link.title }}</div>
               <div class="quick-desc">{{ link.desc }}</div>
@@ -106,7 +157,6 @@ const systemInfo = ref([
               </div>
               <div class="activity-time">{{ activity.time }}</div>
             </div>
-            <div class="activity-dot" :class="activity.type"></div>
           </div>
         </div>
       </div>
@@ -155,7 +205,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%;
 }
 
@@ -176,24 +226,17 @@ const systemInfo = ref([
 }
 
 .stat-card {
-  position: relative;
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 20px;
   background: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
-  transition: all 0.3s ease;
-  overflow: hidden;
+  border-radius: var(--xto-border-radius-large, 12px);
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(31, 35, 41, 0.06));
+  transition: box-shadow 0.2s ease;
 
   &:hover {
-    box-shadow: var(--xto-shadow-elevated, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1));
-    transform: translateY(-4px);
-
-    .stat-decoration {
-      opacity: 1;
-    }
+    box-shadow: var(--xto-shadow-base, 0 1px 3px rgba(31, 35, 41, 0.08), 0 4px 12px rgba(31, 35, 41, 0.06));
   }
 
   .stat-icon {
@@ -202,11 +245,13 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--xto-border-radius-large, 8px);
+    background: var(--xto-fill-color, #F2F3F5);
+    border-radius: var(--xto-border-radius-large, 12px);
     flex-shrink: 0;
 
-    span {
-      font-size: 26px;
+    svg {
+      width: 24px;
+      height: 24px;
     }
   }
 
@@ -217,7 +262,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;
   }
 
@@ -226,6 +271,8 @@ const systemInfo = ref([
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 8px;
+    color: var(--xto-color-text-primary, #1F2329);
+    font-variant-numeric: tabular-nums;
   }
 
   .stat-trend {
@@ -234,7 +281,7 @@ const systemInfo = ref([
     gap: 4px;
     font-size: 12px;
     padding: 2px 8px;
-    border-radius: 12px;
+    border-radius: var(--xto-border-radius-small, 4px);
 
     svg {
       width: 14px;
@@ -242,26 +289,15 @@ const systemInfo = ref([
     }
 
     &.up {
-      color: var(--xto-color-success, #10B981);
-      background: var(--xto-color-success-lighter, #D1FAE5);
+      color: var(--xto-color-success, #00A870);
+      background: var(--xto-color-success-lighter, #EAFBF3);
     }
 
     &.down {
-      color: var(--xto-color-danger, #EF4444);
-      background: var(--xto-color-danger-lighter, #FEE2E2);
+      color: var(--xto-color-danger, #F53F3F);
+      background: var(--xto-color-danger-lighter, #FEF2F2);
     }
   }
-
-  .stat-decoration {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
 }
 
 // 主体内容
@@ -285,15 +321,15 @@ 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;
+    border-radius: var(--xto-border-radius-small, 4px);
   }
 
   .section-link {
@@ -311,9 +347,9 @@ const systemInfo = ref([
 // 快捷入口
 .quick-section {
   background: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
+  border-radius: var(--xto-border-radius-large, 12px);
   padding: 20px;
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(31, 35, 41, 0.06));
 }
 
 .quick-grid {
@@ -327,18 +363,16 @@ const systemInfo = ref([
   align-items: center;
   gap: 16px;
   padding: 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
-  border-radius: var(--xto-border-radius-base, 6px);
+  background: var(--xto-fill-color-light, #F7F8FA);
+  border-radius: var(--xto-border-radius-base, 8px);
   text-decoration: none;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
 
   &:hover {
-    background: var(--xto-color-primary-light-6, #C7D2FE);
-    transform: translateX(4px);
+    background: var(--xto-color-primary-light-9, #EDEDFC);
 
     .quick-arrow {
       color: var(--xto-color-primary, #4F46E5);
-      transform: translateX(4px);
     }
   }
 
@@ -349,9 +383,14 @@ const systemInfo = ref([
     align-items: center;
     justify-content: center;
     background: var(--xto-bg-color, #FFFFFF);
-    border-radius: var(--xto-border-radius-base, 6px);
-    font-size: 22px;
+    border-radius: var(--xto-border-radius-base, 8px);
+    color: var(--xto-color-primary, #4F46E5);
     flex-shrink: 0;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .quick-info {
@@ -362,13 +401,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,8 +416,8 @@ const systemInfo = ref([
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--xto-color-text-placeholder, #9CA3AF);
-    transition: all 0.2s ease;
+    color: var(--xto-color-text-placeholder, #A9AEB8);
+    transition: color 0.2s ease;
 
     svg {
       width: 16px;
@@ -390,9 +429,9 @@ const systemInfo = ref([
 // 最近活动
 .activity-section {
   background: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
+  border-radius: var(--xto-border-radius-large, 12px);
   padding: 20px;
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(31, 35, 41, 0.06));
 }
 
 .activity-list {
@@ -405,8 +444,7 @@ const systemInfo = ref([
   align-items: flex-start;
   gap: 12px;
   padding: 14px 0;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
-  position: relative;
+  border-bottom: 1px solid var(--xto-border-color-lighter, #EDEEF1);
 
   &:last-child {
     border-bottom: none;
@@ -424,11 +462,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, #EAFBF3); color: var(--xto-color-success, #00A870); }
+  &.warning { background: var(--xto-color-warning-lighter, #FFF3E8); color: var(--xto-color-warning, #FF7D00); }
+  &.info { background: var(--xto-color-info-lighter, #F2F3F5); color: var(--xto-color-info, #86909C); }
+  &.danger { background: var(--xto-color-danger-lighter, #FEF2F2); color: var(--xto-color-danger, #F53F3F); }
+  &.primary { background: var(--xto-color-primary-light-9, #EDEDFC); color: var(--xto-color-primary, #4F46E5); }
 }
 
 .activity-content {
@@ -443,43 +481,26 @@ 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);
-}
-
-.activity-dot {
-  position: absolute;
-  left: -20px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 8px;
-  height: 8px;
-  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); }
+  color: var(--xto-color-text-placeholder, #A9AEB8);
 }
 
 // 系统信息
 .system-section {
   background: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
+  border-radius: var(--xto-border-radius-large, 12px);
   padding: 20px;
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px 0 rgba(0,0,0,0.05));
+  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(31, 35, 41, 0.06));
 }
 
 .system-grid {
@@ -503,18 +524,18 @@ const systemInfo = ref([
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  background: var(--xto-fill-color-light, #F9FAFB);
-  border-radius: var(--xto-border-radius-base, 6px);
+  background: var(--xto-fill-color-light, #F7F8FA);
+  border-radius: var(--xto-border-radius-base, 8px);
 
   .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 +555,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>
+</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,11 +32,11 @@ 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>
             <!-- 搜索图标 -->
@@ -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;
 }
@@ -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, #847DEC);
     }
   }
 }
@@ -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, #4F46E5) 0%, var(--xto-color-primary-light-1, #6158E7) 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;