xto-fronted 0.7.0 → 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>
@@ -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;
     }
   }
 
@@ -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, #2BC48A);
-      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, #F53F3F);
-      background: var(--xto-color-danger-lighter, #FEE2E2);
+      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;
-  }
 }
 
 // 主体内容
@@ -293,12 +329,12 @@ const systemInfo = ref([
     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 {
     font-size: 14px;
-    color: var(--xto-color-primary, #12B6AF);
+    color: var(--xto-color-primary, #4F46E5);
     text-decoration: none;
     transition: color 0.2s;
 
@@ -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 {
@@ -328,17 +364,15 @@ const systemInfo = ref([
   gap: 16px;
   padding: 16px;
   background: var(--xto-fill-color-light, #F7F8FA);
-  border-radius: var(--xto-border-radius-base, 6px);
+  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, #12B6AF);
-      transform: translateX(4px);
+      color: var(--xto-color-primary, #4F46E5);
     }
   }
 
@@ -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 {
@@ -378,7 +417,7 @@ const systemInfo = ref([
     align-items: center;
     justify-content: center;
     color: var(--xto-color-text-placeholder, #A9AEB8);
-    transition: all 0.2s ease;
+    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, #F2F3F5);
-  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, #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); }
+  &.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 {
@@ -457,29 +495,12 @@ const systemInfo = ref([
   color: var(--xto-color-text-placeholder, #A9AEB8);
 }
 
-.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, #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); }
-}
-
 // 系统信息
 .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 {
@@ -504,7 +525,7 @@ const systemInfo = ref([
   align-items: center;
   padding: 12px 16px;
   background: var(--xto-fill-color-light, #F7F8FA);
-  border-radius: var(--xto-border-radius-base, 6px);
+  border-radius: var(--xto-border-radius-base, 8px);
 
   .info-label {
     font-size: 14px;
@@ -543,4 +564,4 @@ const systemInfo = ref([
     color: var(--xto-color-text-primary, #1F2329);
   }
 }
-</style>
+</style>

package/src/views/error/404.vue

@@ -38,10 +38,10 @@ const goBack = () => {
             <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, #12B6AF)" font-size="24" font-weight="600">?</text>
+            <text x="100" y="75" text-anchor="middle" fill="var(--xto-color-primary, #4F46E5)" font-size="24" font-weight="600">?</text>
             <!-- 搜索图标 -->
-            <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"/>
+            <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"/>
           </svg>
         </div>
 
@@ -117,7 +117,7 @@ const goBack = () => {
       height: 400px;
       top: -100px;
       right: -100px;
-      background: var(--xto-color-primary, #12B6AF);
+      background: var(--xto-color-primary, #4F46E5);
     }
 
     &.circle-2 {
@@ -134,7 +134,7 @@ const goBack = () => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background: var(--xto-color-primary-light-3, #51DAD3);
+      background: var(--xto-color-primary-light-3, #847DEC);
     }
   }
 }
@@ -164,7 +164,7 @@ const goBack = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF) 0%, var(--xto-color-primary-light-1, #17C3BB) 100%);
+    background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5) 0%, var(--xto-color-primary-light-1, #6158E7) 100%);
     border-radius: 50%;
 
     .zero-inner {
@@ -244,7 +244,7 @@ const goBack = () => {
         transform: translateY(-50%);
         width: 6px;
         height: 6px;
-        background: var(--xto-color-primary, #12B6AF);
+        background: var(--xto-color-primary, #4F46E5);
         border-radius: 50%;
         opacity: 0.6;
       }

package/src/views/login/index.vue

@@ -142,8 +142,6 @@ const handleLogin = async () => {
       <!-- 背景装饰 -->
       <div class="brand-bg">
         <div class="bg-grid"></div>
-        <div class="bg-glow"></div>
-        <div class="bg-pattern"></div>
       </div>
     </div>
 
@@ -255,14 +253,14 @@ const handleLogin = async () => {
   background: var(--xto-bg-color-page, #F7F8FA);
 }
 
-// 左侧品牌区域（淡紫蓝渐变网格背景，纯 CSS 无图片资源）
+// 左侧品牌区域（企业级纯色品牌底 + 细网格纹理）
 .login-brand {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #095755 0%, #0B6B67 45%, #12B6AF 100%);
+  background: var(--xto-color-primary-dark-1, #4338CA);
   overflow: hidden;
 
   @media (max-width: 992px) {
@@ -323,14 +321,12 @@ const handleLogin = async () => {
       align-items: flex-start;
       gap: 16px;
       padding: 16px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: var(--xto-border-radius-large, 8px);
-      backdrop-filter: blur(10px);
-      transition: all 0.3s ease;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: var(--xto-border-radius-large, 12px);
+      transition: background-color 0.2s ease;
 
       &:hover {
-        background: rgba(255, 255, 255, 0.15);
-        transform: translateX(8px);
+        background: rgba(255, 255, 255, 0.14);
       }
     }
 
@@ -408,33 +404,9 @@ const handleLogin = async () => {
         linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
       background-size: 28px 28px, 56px 56px, 56px 56px;
     }
-
-    .bg-glow {
-      position: absolute;
-      top: -20%;
-      right: -10%;
-      width: 60%;
-      height: 60%;
-      background: radial-gradient(circle, rgba(147, 197, 253, 0.35) 0%, transparent 70%);
-      animation: glow-pulse 8s ease-in-out infinite;
-    }
-
-    .bg-pattern {
-      position: absolute;
-      bottom: -10%;
-      left: -10%;
-      width: 40%;
-      height: 40%;
-      background: radial-gradient(circle, rgba(196, 181, 253, 0.28) 0%, transparent 60%);
-    }
   }
 }
 
-@keyframes glow-pulse {
-  0%, 100% { opacity: 0.6; transform: scale(1); }
-  50% { opacity: 1; transform: scale(1.1); }
-}
-
 // 右侧登录区域
 .login-form-section {
   width: 500px;
@@ -507,12 +479,12 @@ const handleLogin = async () => {
 
     .forgot-link {
       font-size: 14px;
-      color: var(--xto-color-primary, #12B6AF);
+      color: var(--xto-color-primary, #4F46E5);
       text-decoration: none;
       transition: color 0.2s;
 
       &:hover {
-        color: var(--xto-color-primary-dark-1, #0D7F7A);
+        color: var(--xto-color-primary-dark-1, #4338CA);
       }
     }
   }
@@ -527,12 +499,7 @@ const handleLogin = async () => {
     transition: all 0.3s ease;
 
     &:hover:not(:disabled) {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(0);
+      background-color: var(--xto-color-primary-light-1, #6158E7);
     }
   }
 
@@ -573,8 +540,8 @@ const handleLogin = async () => {
       }
 
       &:hover {
-        background: var(--xto-color-primary-light-8, #DDF6F4);
-        color: var(--xto-color-primary, #12B6AF);
+        background: var(--xto-color-primary-light-8, #DCDAFC);
+        color: var(--xto-color-primary, #4F46E5);
         transform: translateY(-2px);
       }
     }

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

@@ -191,14 +191,14 @@ const handleSubmit = async () => {
 // 菜单图标
 const getMenuIcon = (icon?: string) => {
   const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
+    dashboard: 'M4 5h16v11H4zM9 20h6M12 16v4',
+    system: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7.4-3c0-.4 0-.8-.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',
+    user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0',
+    role: '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',
+    menu: 'M4 6h16M4 12h16M4 18h10',
+    setting: 'M4 6h16M4 12h16M4 18h16'
   }
-  return iconMap[icon || ''] || '📄'
+  return iconMap[icon || ''] || 'M4 6h16M4 12h16M4 18h10'
 }
 
 // 获取类型标签类型
@@ -289,12 +289,12 @@ onMounted(() => {
               <tr class="data-row tree-row--level-0">
                 <td class="col-name">
                   <div class="menu-info">
-                    <span class="menu-icon-wrapper">{{ getMenuIcon(menu.icon) }}</span>
+                    <span class="menu-icon-wrapper"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(menu.icon)" /></svg></span>
                     <span class="menu-title" @click="handleEdit(menu)">{{ menu.title }}</span>
                   </div>
                 </td>
                 <td class="col-icon">
-                  <span class="icon-text">{{ getMenuIcon(menu.icon) }}</span>
+                  <span class="icon-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(menu.icon)" /></svg></span>
                 </td>
                 <td class="col-path">
                   <code class="path-code">{{ menu.path }}</code>
@@ -341,12 +341,12 @@ onMounted(() => {
                     <div class="menu-info">
                       <span class="tree-indent"></span>
                       <span class="tree-line"></span>
-                      <span class="menu-icon-wrapper">{{ getMenuIcon(child.icon) }}</span>
+                      <span class="menu-icon-wrapper"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(child.icon)" /></svg></span>
                       <span class="menu-title" @click="handleEdit(child)">{{ child.title }}</span>
                     </div>
                   </td>
                   <td class="col-icon">
-                    <span class="icon-text">{{ getMenuIcon(child.icon) }}</span>
+                    <span class="icon-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path :d="getMenuIcon(child.icon)" /></svg></span>
                   </td>
                   <td class="col-path">
                     <code class="path-code">{{ child.path }}</code>
@@ -503,7 +503,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--xto-color-primary-light-6, #C7D2FE);
+      background: var(--xto-color-primary-light-6, #CAC7F9);
     }
   }
 
@@ -534,7 +534,7 @@ onMounted(() => {
     width: 32px;
     height: 32px;
     border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
-    border-top-color: var(--xto-color-primary, #12B6AF);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -596,7 +596,7 @@ onMounted(() => {
   transition: color 0.2s;
 
   &:hover {
-    color: var(--xto-color-primary, #12B6AF);
+    color: var(--xto-color-primary, #4F46E5);
   }
 }
 

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

@@ -432,7 +432,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--xto-color-primary-light-6, #C7D2FE);
+      background: var(--xto-color-primary-light-6, #CAC7F9);
     }
   }
 
@@ -463,7 +463,7 @@ onMounted(() => {
     width: 32px;
     height: 32px;
     border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
-    border-top-color: var(--xto-color-primary, #12B6AF);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }

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

@@ -458,7 +458,7 @@ onMounted(() => {
     transition: background-color 0.2s;
 
     &:hover {
-      background: var(--xto-color-primary-light-6, #A5B4FC);
+      background: var(--xto-color-primary-light-6, #B9B5F5);
     }
   }
 
@@ -489,7 +489,7 @@ onMounted(() => {
     width: 32px;
     height: 32px;
     border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
-    border-top-color: var(--xto-color-primary, #12B6AF);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -532,7 +532,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, var(--xto-color-primary, #12B6AF) 0%, var(--xto-color-primary-light-1, #17C3BB) 100%);
+  background: linear-gradient(135deg, var(--xto-color-primary, #4F46E5) 0%, var(--xto-color-primary-light-1, #6158E7) 100%);
   border-radius: 50%;
   font-size: 16px;
   font-weight: 500;