xto-fronted 0.5.2 → 0.6.0

package/src/assets/styles/_root.scss

@@ -1,23 +1,23 @@
 // ==============================================
 // CSS Variables - XTO UI Design Token System
-// Indigo palette with --xto-* namespace
+// Gauss Admin 风格：品牌深蓝 + slate 蓝灰中性色（与 @xto/core 令牌对齐）
 // ==============================================
 
 :root {
-  // 主色调 - Indigo 系（深邃、专业）
-  --xto-color-primary: #4F46E5;
-  --xto-color-primary-light-1: #5B54E8;
-  --xto-color-primary-light-2: #6B63EB;
-  --xto-color-primary-light-3: #7C73EE;
-  --xto-color-primary-light-4: #8B83F1;
-  --xto-color-primary-light-5: #A5A4F4;
-  --xto-color-primary-light-6: #BFBDF7;
-  --xto-color-primary-light-7: #D4D3F9;
-  --xto-color-primary-light-8: #E0DFFB;
-  --xto-color-primary-light-9: #EEF2FF;
-  --xto-color-primary-dark-1: #4338CA;
-  --xto-color-primary-dark-2: #3730A3;
-  --xto-color-primary-dark-3: #312E81;
+  // 主色调 - Gauss 品牌深蓝
+  --xto-color-primary: #1D4ED8;
+  --xto-color-primary-light-1: #2563EB;
+  --xto-color-primary-light-2: #3B82F6;
+  --xto-color-primary-light-3: #60A5FA;
+  --xto-color-primary-light-4: #82B4FB;
+  --xto-color-primary-light-5: #93C5FD;
+  --xto-color-primary-light-6: #BFDBFE;
+  --xto-color-primary-light-7: #D0E1FE;
+  --xto-color-primary-light-8: #DBEAFE;
+  --xto-color-primary-light-9: #EFF6FF;
+  --xto-color-primary-dark-1: #1E40AF;
+  --xto-color-primary-dark-2: #1E3A8A;
+  --xto-color-primary-dark-3: #172E6E;
 
   // 功能色 - 精致调和
   --xto-color-success: #10B981;
@@ -35,56 +35,52 @@
   --xto-color-danger-lighter: #FEF2F2;
   --xto-color-danger-dark: #DC2626;
 
-  --xto-color-info: #6B7280;
-  --xto-color-info-light: #9CA3AF;
-  --xto-color-info-lighter: #F3F4F6;
-  --xto-color-info-dark: #4B5563;
-
-  // 文字颜色 - 层次分明
-  --xto-color-text-primary: #1F2937;
-  --xto-color-text-regular: #4B5563;
-  --xto-color-text-secondary: #6B7280;
-  --xto-color-text-placeholder: #9CA3AF;
-  --xto-color-text-disabled: #D1D5DB;
-
-  // 边框颜色 - 克制淡雅
-  --xto-border-color: #D1D5DB;
-  --xto-border-color-light: #E5E7EB;
-  --xto-border-color-lighter: #F3F4F6;
-  --xto-border-color-extra-light: #F9FAFB;
-  --xto-border-color-dark: #9CA3AF;
+  --xto-color-info: #64748B;
+  --xto-color-info-light: #94A3B8;
+  --xto-color-info-lighter: #F1F5F9;
+  --xto-color-info-dark: #475569;
+
+  // 文字颜色 - slate 蓝灰体系
+  --xto-color-text-primary: #0F172A;
+  --xto-color-text-regular: #334155;
+  --xto-color-text-secondary: #64748B;
+  --xto-color-text-placeholder: #94A3B8;
+  --xto-color-text-disabled: #CBD5E1;
+
+  // 边框颜色 - 蓝灰边框
+  --xto-border-color: #CBD5E1;
+  --xto-border-color-light: #E2E8F0;
+  --xto-border-color-lighter: #EDF2F7;
+  --xto-border-color-extra-light: #F8FAFC;
+  --xto-border-color-dark: #94A3B8;
 
   // 填充颜色 - 背景层次
-  --xto-fill-color: #F3F4F6;
-  --xto-fill-color-light: #F9FAFB;
+  --xto-fill-color: #F1F5F9;
+  --xto-fill-color-light: #F8FAFC;
   --xto-fill-color-lighter: #FFFFFF;
   --xto-fill-color-blank: #FFFFFF;
-  --xto-fill-color-dark: #E5E7EB;
+  --xto-fill-color-dark: #E2E8F0;
 
-  // 背景颜色 - 页面层级
+  // 背景颜色 - 页面层级（浅灰蓝页面底）
   --xto-bg-color: #FFFFFF;
-  --xto-bg-color-page: #F9FAFB;
+  --xto-bg-color-page: #F5F7FA;
   --xto-bg-color-component: #FFFFFF;
   --xto-bg-color-overlay: #FFFFFF;
-  --xto-bg-color-spotlight: #EEF2FF;
-
-  // 盒子阴影 - 精致层次
-  --xto-shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
-                        0 1px 6px -1px rgba(0, 0, 0, 0.02),
-                        0 2px 4px 0 rgba(0, 0, 0, 0.02);
-  --xto-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.04);
-  --xto-shadow-elevated: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-                          0 3px 6px -4px rgba(0, 0, 0, 0.12),
-                          0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --xto-shadow-prominent: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
-                           0 9px 28px 8px rgba(0, 0, 0, 0.05),
-                           0 12px 48px 16px rgba(0, 0, 0, 0.03);
-  --xto-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-  --xto-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+  --xto-bg-color-spotlight: #EFF6FF;
+
+  // 盒子阴影 - slate 基调多层柔和阴影
+  --xto-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --xto-shadow-base: 0 1px 2px rgba(15, 23, 42, 0.04),
+                      0 2px 8px rgba(15, 23, 42, 0.06);
+  --xto-shadow-elevated: 0 2px 6px rgba(15, 23, 42, 0.05),
+                          0 8px 24px rgba(15, 23, 42, 0.08);
+  --xto-shadow-prominent: 0 4px 12px rgba(15, 23, 42, 0.06),
+                           0 16px 48px rgba(15, 23, 42, 0.12);
+  --xto-shadow-card: var(--xto-shadow-base);
+  --xto-shadow-card-hover: var(--xto-shadow-elevated);
 
   // 字体 - 企业级字体栈
-  --xto-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --xto-font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --xto-font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
     Consolas, 'Courier New', monospace;
   --xto-font-size-base: 14px;
@@ -95,11 +91,12 @@
   --xto-font-size-hero: 38px;
   --xto-font-line-height: 1.5714285714285714;
 
-  // 圆角 - 精致圆润
+  // 圆角 - 精致圆润（卡片与弹层更圆润）
   --xto-border-radius-base: 6px;
   --xto-border-radius-small: 4px;
-  --xto-border-radius-large: 8px;
-  --xto-border-radius-extra-large: 12px;
+  --xto-border-radius-large: 10px;
+  --xto-border-radius-extra-large: 16px;
+  --xto-border-radius-xl: 16px;
   --xto-border-radius-round: 24px;
   --xto-border-radius-circle: 50%;
 
@@ -140,66 +137,63 @@
   --footer-height: 32px;
 
   // 特殊效果
-  --xto-gradient-primary: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #312E81 0%, #4F46E5 50%, #6366F1 100%);
+  --xto-gradient-primary: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #172E6E 0%, #1D4ED8 50%, #3B82F6 100%);
   --xto-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-  --xto-gradient-mask: linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  --xto-gradient-mask: linear-gradient(180deg, rgba(29, 78, 216, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
 }
 
-// 暗色主题 - 深邃科技感
+// 暗色主题 - 深蓝黑科技感（与 @xto/core 暗色令牌对齐）
 html.dark {
-  --xto-color-primary: #818CF8;
-  --xto-color-primary-light-1: #9BA3FA;
-  --xto-color-primary-light-2: #B5BAFB;
-  --xto-color-primary-light-3: #C7CAFC;
-  --xto-color-primary-light-4: #D5D7FD;
-  --xto-color-primary-light-5: #E0E2FE;
-  --xto-color-primary-light-6: #EBECFE;
-  --xto-color-primary-light-7: #F0F1FE;
-  --xto-color-primary-light-8: #F5F5FE;
-  --xto-color-primary-light-9: #FAFAFF;
-  --xto-color-primary-dark-1: #6366F1;
-  --xto-color-primary-dark-2: #4F46E5;
-  --xto-color-primary-dark-3: #4338CA;
-
-  --xto-color-text-primary: #F9FAFB;
-  --xto-color-text-regular: #E5E7EB;
-  --xto-color-text-secondary: #9CA3AF;
-  --xto-color-text-placeholder: #6B7280;
-  --xto-color-text-disabled: #4B5563;
-
-  --xto-border-color: #374151;
-  --xto-border-color-light: #1F2937;
-  --xto-border-color-lighter: #111827;
-  --xto-border-color-extra-light: #030712;
-  --xto-border-color-dark: #4B5563;
-
-  --xto-fill-color: #1F2937;
-  --xto-fill-color-light: #111827;
-  --xto-fill-color-lighter: #030712;
-  --xto-fill-color-blank: #030712;
-  --xto-fill-color-dark: #374151;
-
-  --xto-bg-color: #111827;
-  --xto-bg-color-page: #030712;
-  --xto-bg-color-component: #1F2937;
-  --xto-bg-color-overlay: #1F2937;
-  --xto-bg-color-spotlight: #1E1B4B;
-
-  --xto-shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
-                        0 1px 6px -1px rgba(0, 0, 0, 0.12),
-                        0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  --xto-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.2);
-  --xto-shadow-elevated: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
-                          0 3px 6px -4px rgba(0, 0, 0, 0.48),
-                          0 9px 28px 8px rgba(0, 0, 0, 0.2);
-  --xto-shadow-prominent: 0 6px 16px -8px rgba(0, 0, 0, 0.32),
-                           0 9px 28px 8px rgba(0, 0, 0, 0.2),
-                           0 12px 48px 16px rgba(0, 0, 0, 0.12);
-  --xto-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
-  --xto-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
-
-  --xto-gradient-primary: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #4338CA 0%, #4F46E5 50%, #818CF8 100%);
-  --xto-gradient-card: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.8) 100%);
+  --xto-color-primary: #4C8DFF;
+  --xto-color-primary-light-1: #3B82F6;
+  --xto-color-primary-light-2: #2F6FE4;
+  --xto-color-primary-light-3: #2563EB;
+  --xto-color-primary-light-4: #1D4ED8;
+  --xto-color-primary-light-5: #1E40AF;
+  --xto-color-primary-light-6: #1E3A8A;
+  --xto-color-primary-light-7: #172E6E;
+  --xto-color-primary-light-8: #122554;
+  --xto-color-primary-light-9: #0D1B3E;
+  --xto-color-primary-dark-1: #60A5FA;
+  --xto-color-primary-dark-2: #82B4FB;
+  --xto-color-primary-dark-3: #93C5FD;
+
+  --xto-color-text-primary: #F1F5F9;
+  --xto-color-text-regular: #CBD5E1;
+  --xto-color-text-secondary: #94A3B8;
+  --xto-color-text-placeholder: #64748B;
+  --xto-color-text-disabled: #475569;
+
+  --xto-border-color: #334155;
+  --xto-border-color-light: #1E293B;
+  --xto-border-color-lighter: #16213B;
+  --xto-border-color-extra-light: #0F172A;
+  --xto-border-color-dark: #475569;
+
+  --xto-fill-color: #1E293B;
+  --xto-fill-color-light: #16213B;
+  --xto-fill-color-lighter: #0F172A;
+  --xto-fill-color-blank: #111A2C;
+  --xto-fill-color-dark: #334155;
+
+  --xto-bg-color: #111A2C;
+  --xto-bg-color-page: #0B1220;
+  --xto-bg-color-component: #1E293B;
+  --xto-bg-color-overlay: #182338;
+  --xto-bg-color-spotlight: #0D1B3E;
+
+  --xto-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --xto-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3),
+                      0 2px 8px rgba(0, 0, 0, 0.35);
+  --xto-shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.35),
+                          0 8px 24px rgba(0, 0, 0, 0.4);
+  --xto-shadow-prominent: 0 4px 12px rgba(0, 0, 0, 0.4),
+                           0 16px 48px rgba(0, 0, 0, 0.5);
+  --xto-shadow-card: var(--xto-shadow-base);
+  --xto-shadow-card-hover: var(--xto-shadow-elevated);
+
+  --xto-gradient-primary: linear-gradient(135deg, #4C8DFF 0%, #2563EB 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #4C8DFF 100%);
+  --xto-gradient-card: linear-gradient(180deg, rgba(17, 26, 44, 0) 0%, rgba(17, 26, 44, 0.8) 100%);
 }

package/src/assets/styles/_variables.scss

@@ -1,35 +1,35 @@
 // Design tokens aligned with @xto/core theme system
 // ==============================================
-// SCSS Variables - 用于样式计算
+// SCSS Variables - 用于样式计算（Gauss 品牌深蓝 + slate 蓝灰）
 // ==============================================
 
-// 主题色 - Indigo
-$color-primary: #4F46E5;
-$color-primary-light: #6366F1;
-$color-primary-lighter: #818CF8;
-$color-primary-dark: #4338CA;
-$color-primary-darker: #3730A3;
+// 主题色 - Gauss 品牌深蓝
+$color-primary: #1D4ED8;
+$color-primary-light: #3B82F6;
+$color-primary-lighter: #60A5FA;
+$color-primary-dark: #1E40AF;
+$color-primary-darker: #1E3A8A;
 
 // 功能色
 $color-success: #10B981;
 $color-warning: #F59E0B;
 $color-danger: #EF4444;
-$color-info: #6B7280;
+$color-info: #64748B;
 
-// 文字颜色
-$color-text-primary: #1F2937;
-$color-text-regular: #4B5563;
-$color-text-secondary: #6B7280;
-$color-text-placeholder: #9CA3AF;
+// 文字颜色 - slate 蓝灰体系
+$color-text-primary: #0F172A;
+$color-text-regular: #334155;
+$color-text-secondary: #64748B;
+$color-text-placeholder: #94A3B8;
 
-// 边框颜色
-$color-border: #D1D5DB;
-$color-border-light: #E5E7EB;
-$color-border-lighter: #F3F4F6;
+// 边框颜色 - 蓝灰边框
+$color-border: #CBD5E1;
+$color-border-light: #E2E8F0;
+$color-border-lighter: #EDF2F7;
 
 // 背景颜色
 $bg-color: #FFFFFF;
-$bg-color-page: #F9FAFB;
+$bg-color-page: #F5F7FA;
 $bg-color-component: #FFFFFF;
 
 // 字体
@@ -43,8 +43,8 @@ $font-size-extra-large: 20px;
 // 圆角
 $border-radius-base: 6px;
 $border-radius-small: 4px;
-$border-radius-large: 8px;
-$border-radius-extra-large: 12px;
+$border-radius-large: 10px;
+$border-radius-extra-large: 16px;
 $border-radius-round: 24px;
 
 // 间距 - 8px 网格系统
@@ -66,6 +66,6 @@ $footer-height: 32px;
 $transition-duration: 0.2s;
 $transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
-// 阴影
-$box-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
-$box-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
+// 阴影 - slate 基调柔和阴影
+$box-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06);
+$box-shadow-card-hover: 0 2px 6px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08);

package/src/assets/styles/index.scss

@@ -117,7 +117,7 @@
 
 // 颜色
 .text-primary {
-  color: var(--xto-color-primary, #4F46E5);
+  color: var(--xto-color-primary, #1D4ED8);
 }
 
 .text-success {
@@ -133,20 +133,20 @@
 }
 
 .text-info {
-  color: var(--xto-color-info, #6B7280);
+  color: var(--xto-color-info, #64748B);
 }
 
 .text-secondary {
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #64748B);
 }
 
 .text-placeholder {
-  color: var(--xto-color-text-placeholder, #9CA3AF);
+  color: var(--xto-color-text-placeholder, #94A3B8);
 }
 
 // 背景
 .bg-primary {
-  background-color: var(--xto-color-primary, #4F46E5);
+  background-color: var(--xto-color-primary, #1D4ED8);
 }
 
 .bg-success {
@@ -162,7 +162,7 @@
 }
 
 .bg-page {
-  background-color: var(--xto-bg-color-page, #F9FAFB);
+  background-color: var(--xto-bg-color-page, #F5F7FA);
 }
 
 .bg-card {
@@ -219,28 +219,28 @@
 // 卡片容器（企业级）
 .card {
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border-radius: var(--xto-border-radius-large, 10px);
+  box-shadow: var(--xto-shadow-base, 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06));
   padding: var(--xto-spacing-lg, 24px);
   transition: box-shadow 0.3s ease;
 
   &:hover {
-    box-shadow: var(--xto-shadow-elevated, 0 4px 12px rgba(0, 0, 0, 0.1));
+    box-shadow: var(--xto-shadow-elevated, 0 2px 6px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08));
   }
 }
 
 .card-flat {
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
+  border-radius: var(--xto-border-radius-large, 10px);
   padding: var(--xto-spacing-lg, 24px);
-  border: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border: 1px solid var(--xto-border-color-lighter, #EDF2F7);
 }
 
-// 页面容器
+// 页面容器（浅灰蓝底 + 统一 16px 页边距）
 .page-container {
-  padding: 12px;
+  padding: 16px;
   min-height: 100%;
-  background: var(--xto-bg-color-page, #F9FAFB);
+  background: var(--xto-bg-color-page, #F5F7FA);
 }
 
 // 搜索栏（企业级）
@@ -248,11 +248,11 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--xto-spacing-md, 12px);
-  margin-bottom: 12px;
-  padding: 12px;
+  margin-bottom: 16px;
+  padding: 16px;
   background: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border-radius: var(--xto-border-radius-large, 10px);
+  box-shadow: var(--xto-shadow-base, 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06));
 }
 
 // 工具栏（企业级）
@@ -261,7 +261,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F1F5F9);
 }
 
 .toolbar-left {
@@ -279,8 +279,8 @@
 // 表格容器（企业级）
 .table-container {
   background-color: var(--xto-bg-color, #FFFFFF);
-  border-radius: var(--xto-border-radius-large, 8px);
-  box-shadow: var(--xto-shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border-radius: var(--xto-border-radius-large, 10px);
+  box-shadow: var(--xto-shadow-base, 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06));
   overflow: hidden;
 }
 
@@ -289,7 +289,7 @@
   display: flex;
   justify-content: flex-end;
   padding: 12px;
-  border-top: 1px solid var(--xto-border-color-lighter, #F3F4F6);
+  border-top: 1px solid var(--xto-border-color-lighter, #F1F5F9);
 }
 
 // 标签徽章
@@ -303,13 +303,13 @@
   font-size: 12px;
   font-weight: 500;
   border-radius: 10px;
-  background: var(--xto-fill-color, #F3F4F6);
-  color: var(--xto-color-text-secondary, #6B7280);
+  background: var(--xto-fill-color, #F1F5F9);
+  color: var(--xto-color-text-secondary, #64748B);
 }
 
 .badge-primary {
-  background: var(--xto-color-primary-light-6, #A5B4FC);
-  color: var(--xto-color-primary, #4F46E5);
+  background: var(--xto-color-primary-light-6, #BFDBFE);
+  color: var(--xto-color-primary, #1D4ED8);
 }
 
 .badge-success {
@@ -330,14 +330,14 @@
 // 分隔线
 .divider {
   height: 1px;
-  background: var(--xto-border-color-lighter, #F3F4F6);
+  background: var(--xto-border-color-lighter, #F1F5F9);
   margin: var(--xto-spacing-md, 12px) 0;
 }
 
 .divider-vertical {
   width: 1px;
   height: 100%;
-  background: var(--xto-border-color-lighter, #F3F4F6);
+  background: var(--xto-border-color-lighter, #F1F5F9);
   margin: 0 var(--xto-spacing-md, 12px);
 }
 
@@ -348,7 +348,7 @@
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: var(--xto-color-text-placeholder, #9CA3AF);
+  color: var(--xto-color-text-placeholder, #94A3B8);
 
   .empty-icon {
     width: 64px;
@@ -373,8 +373,8 @@
   .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, #F1F5F9);
+    border-top-color: var(--xto-color-primary, #1D4ED8);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -382,7 +382,7 @@
   .loading-text {
     margin-top: 16px;
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #6B7280);
+    color: var(--xto-color-text-secondary, #64748B);
   }
 }
 
@@ -392,64 +392,42 @@
 
 // 链接样式
 .link {
-  color: var(--xto-color-primary, #4F46E5);
+  color: var(--xto-color-primary, #1D4ED8);
   text-decoration: none;
   transition: color 0.2s ease;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #5B54E8);
+    color: var(--xto-color-primary-light-1, #2563EB);
   }
 }
 
 .link-underline {
-  color: var(--xto-color-primary, #4F46E5);
+  color: var(--xto-color-primary, #1D4ED8);
   text-decoration: underline;
   text-underline-offset: 2px;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #5B54E8);
+    color: var(--xto-color-primary-light-1, #2563EB);
   }
 }
 
 // ==============================================
 // 菜单高亮样式（全局样式，不能在 scoped 中）
+// 参考 Gauss Admin：纯浅蓝底 + 深蓝字 + 圆角项（无左侧指示条）
 // ==============================================
 .x-menu-item {
   &.is-active {
-    color: var(--xto-color-primary, #4F46E5) !important;
-    background-color: var(--xto-color-primary-light-9, #EEF2FF) !important;
-    position: relative;
-
-    // 左侧高亮条
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: var(--xto-color-primary, #4F46E5);
-      border-radius: 0 2px 2px 0;
-    }
+    color: var(--xto-color-primary, #1D4ED8) !important;
+    background-color: var(--xto-color-primary-light-9, #EFF6FF) !important;
+    font-weight: 600;
   }
 }
 
 // SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
 .x-sub-menu__menu .x-menu-item.is-active {
-  color: var(--xto-color-primary, #4F46E5) !important;
-  background-color: var(--xto-color-primary-light-9, #EEF2FF) !important;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background-color: var(--xto-color-primary, #4F46E5);
-    border-radius: 0 2px 2px 0;
-  }
+  color: var(--xto-color-primary, #1D4ED8) !important;
+  background-color: var(--xto-color-primary-light-9, #EFF6FF) !important;
+  font-weight: 600;
 }
 
 // ==============================================