xto-fronted 0.4.84 → 0.4.86

package/src/assets/styles/_root.scss

@@ -1,126 +1,99 @@
 // ==============================================
-// CSS Variables - 企业级配色方案
-// 参考：阿里 Ant Design Pro、腾讯云控制台
+// CSS Variables - 主题变量
 // ==============================================
 
 :root {
-  // 主色调 - 科技蓝系（深邃、专业）
-  --color-primary: #1677ff;
-  --color-primary-light-1: #4096ff;
-  --color-primary-light-2: #69b1ff;
-  --color-primary-light-3: #91caff;
-  --color-primary-light-4: #bae0ff;
-  --color-primary-light-5: #e6f4ff;
-  --color-primary-light-6: #f0f8ff;
-  --color-primary-dark-1: #0958d9;
-  --color-primary-dark-2: #003eb3;
-  --color-primary-dark-3: #002c8c;
-
-  // 功能色 - 精致调和
-  --color-success: #52c41a;
-  --color-success-light: #b7eb8f;
-  --color-success-lighter: #f6ffed;
-  --color-success-dark: #389e0d;
-
-  --color-warning: #faad14;
-  --color-warning-light: #ffe58f;
-  --color-warning-lighter: #fffbe6;
-  --color-warning-dark: #d48806;
-
-  --color-danger: #ff4d4f;
-  --color-danger-light: #ffa39e;
-  --color-danger-lighter: #fff2f0;
-  --color-danger-dark: #cf1322;
-
-  --color-info: #1677ff;
-  --color-info-light: #91caff;
-  --color-info-lighter: #e6f4ff;
-  --color-info-dark: #0958d9;
-
-  // 文字颜色 - 层次分明
-  --color-text-primary: #1f1f1f;
-  --color-text-regular: #424242;
-  --color-text-secondary: #757575;
-  --color-text-placeholder: #9e9e9e;
-  --color-text-disabled: #bdbdbd;
-
-  // 边框颜色 - 克制淡雅
-  --color-border: #d9d9d9;
-  --color-border-light: #e8e8e8;
-  --color-border-lighter: #f0f0f0;
-  --color-border-extra-light: #f5f5f5;
-  --color-border-dark: #bfbfbf;
-
-  // 填充颜色 - 背景层次
-  --color-fill: #f5f5f5;
+  // 主题色
+  --color-primary: #409eff;
+  --color-primary-light-3: #79bbff;
+  --color-primary-light-5: #a0cfff;
+  --color-primary-light-7: #c6e2ff;
+  --color-primary-light-8: #d9ecff;
+  --color-primary-light-9: #ecf5ff;
+  --color-primary-dark-2: #337ecc;
+
+  // 功能色
+  --color-success: #67c23a;
+  --color-success-light: #e1f3d8;
+  --color-success-dark: #529b2e;
+
+  --color-warning: #e6a23c;
+  --color-warning-light: #fdf6ec;
+  --color-warning-dark: #b88230;
+
+  --color-danger: #f56c6c;
+  --color-danger-light: #fde2e2;
+  --color-danger-dark: #c45656;
+
+  --color-info: #909399;
+  --color-info-light: #f4f4f5;
+  --color-info-dark: #73767a;
+
+  // 文字颜色
+  --color-text-primary: #303133;
+  --color-text-regular: #606266;
+  --color-text-secondary: #909399;
+  --color-text-placeholder: #a8abb2;
+  --color-text-disabled: #c0c4cc;
+
+  // 边框颜色
+  --color-border: #dcdfe6;
+  --color-border-light: #e4e7ed;
+  --color-border-lighter: #ebeef5;
+  --color-border-extra-light: #f2f6fc;
+  --color-border-dark: #d4d7de;
+
+  // 填充颜色
+  --color-fill: #f5f7fa;
   --color-fill-light: #fafafa;
-  --color-fill-lighter: #ffffff;
+  --color-fill-lighter: #fafcff;
   --color-fill-blank: #ffffff;
-  --color-fill-dark: #e8e8e8;
 
-  // 背景颜色 - 页面层级
+  // 背景颜色
   --bg-color: #ffffff;
-  --bg-color-page: #f0f2f5;
-  --bg-color-component: #ffffff;
+  --bg-color-page: #f2f3f5;
   --bg-color-overlay: #ffffff;
-  --bg-color-spotlight: #e6f4ff;
-
-  // 盒子阴影 - 精致层次
-  --box-shadow: 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);
-  --box-shadow-light: 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);
-  --box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.04);
-  --box-shadow-dark: 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);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
-
-  // 字体 - 企业级字体栈
-  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
-    Consolas, 'Courier New', monospace;
+
+  // 盒子阴影
+  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+  --box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+
+  // 字体
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
   --font-size-base: 14px;
   --font-size-small: 12px;
   --font-size-large: 16px;
-  --font-size-extra-large: 20px;
-  --font-size-title: 24px;
-  --font-size-hero: 38px;
-  --font-line-height: 1.5714285714285714;
-
-  // 圆角 - 精致圆润
-  --border-radius-base: 6px;
-  --border-radius-small: 4px;
+  --font-size-extra-large: 18px;
+
+  // 圆角
+  --border-radius-base: 4px;
+  --border-radius-small: 2px;
   --border-radius-large: 8px;
-  --border-radius-extra-large: 12px;
-  --border-radius-round: 24px;
+  --border-radius-round: 20px;
   --border-radius-circle: 50%;
 
-  // 间距 - 8px 基础网格
+  // 间距
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
-  --spacing-xxl: 48px;
 
-  // 尺寸 - 组件规格
+  // 尺寸
   --component-size-large: 40px;
   --component-size-default: 32px;
   --component-size-small: 24px;
 
-  // 过渡 - 流畅动效
-  --transition-duration: 0.2s;
-  --transition-duration-fast: 0.1s;
-  --transition-duration-slow: 0.3s;
-  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  // 过渡时间
+  --transition-duration: 0.3s;
+  --transition-duration-fast: 0.2s;
+  --transition-duration-slow: 0.5s;
 
-  // z-index - 层级管理
+  // z-index
   --z-index-dropdown: 1000;
   --z-index-sticky: 1020;
   --z-index-fixed: 1030;
@@ -129,56 +102,39 @@
   --z-index-popover: 1060;
   --z-index-tooltip: 1070;
 
-  // 布局 - 精确尺寸
-  --sidebar-width: 220px;
+  // 布局
+  --sidebar-width: 210px;
   --sidebar-collapsed-width: 64px;
-  --header-height: 56px;
+  --header-height: 50px;
   --tabs-height: 40px;
-  --footer-height: 32px;
-
-  // 特殊效果
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #1677ff 50%, #4096ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-  --gradient-mask: linear-gradient(180deg, rgba(0, 44, 140, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  --footer-height: 30px;
 }
 
-// 暗色主题 - 深邃科技感
+// 暗色主题
 .dark {
-  --color-text-primary: #ffffff;
-  --color-text-regular: #e0e0e0;
-  --color-text-secondary: #a6a6a6;
-  --color-text-placeholder: #737373;
-  --color-text-disabled: #5c5c5c;
-
-  --color-border: #434343;
-  --color-border-light: #363636;
-  --color-border-lighter: #2a2a2a;
-  --color-border-extra-light: #1f1f1f;
-  --color-border-dark: #5c5c5c;
-
-  --color-fill: #262626;
-  --color-fill-light: #1f1f1f;
-  --color-fill-lighter: #141414;
+  --color-text-primary: #e5eaf3;
+  --color-text-regular: #cfd3dc;
+  --color-text-secondary: #a3a6ad;
+  --color-text-placeholder: #8d9095;
+  --color-text-disabled: #6c6e72;
+
+  --color-border: #4c4d4f;
+  --color-border-light: #414243;
+  --color-border-lighter: #363637;
+  --color-border-extra-light: #2b2b2c;
+  --color-border-dark: #58585b;
+
+  --color-fill: #303030;
+  --color-fill-light: #262727;
+  --color-fill-lighter: #1d1d1d;
   --color-fill-blank: #141414;
-  --color-fill-dark: #363636;
 
-  --bg-color: #141414;
+  --bg-color: #1d1e1f;
   --bg-color-page: #0a0a0a;
-  --bg-color-component: #1f1f1f;
-  --bg-color-overlay: #1f1f1f;
-  --bg-color-spotlight: #111d2c;
-
-  --box-shadow: 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);
-  --box-shadow-light: 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);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
-
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
+  --bg-color-overlay: #1d1e1f;
+
+  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.24);
+  --box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+  --box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.36);
 }

package/src/assets/styles/_variables.scss

@@ -2,69 +2,44 @@
 // SCSS Variables - 用于样式计算
 // ==============================================
 
-// 主题色 - 科技蓝
-$color-primary: #1677ff;
-$color-primary-light: #4096ff;
-$color-primary-lighter: #91caff;
-$color-primary-dark: #0958d9;
-$color-primary-darker: #003eb3;
-
-// 功能色
-$color-success: #52c41a;
-$color-warning: #faad14;
-$color-danger: #ff4d4f;
-$color-info: #1677ff;
+// 主题色
+$color-primary: #409eff;
+$color-success: #67c23a;
+$color-warning: #e6a23c;
+$color-danger: #f56c6c;
+$color-info: #909399;
 
 // 文字颜色
-$color-text-primary: #1f1f1f;
-$color-text-regular: #424242;
-$color-text-secondary: #757575;
-$color-text-placeholder: #9e9e9e;
+$color-text-primary: #303133;
+$color-text-regular: #606266;
+$color-text-secondary: #909399;
 
 // 边框颜色
-$color-border: #d9d9d9;
-$color-border-light: #e8e8e8;
-$color-border-lighter: #f0f0f0;
+$color-border: #dcdfe6;
+$color-border-light: #e4e7ed;
+$color-border-lighter: #ebeef5;
 
 // 背景颜色
 $bg-color: #ffffff;
-$bg-color-page: #f0f2f5;
-$bg-color-component: #ffffff;
+$bg-color-page: #f2f3f5;
 
 // 字体
-$font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-$font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
 $font-size-base: 14px;
 $font-size-small: 12px;
-$font-size-large: 16px;
-$font-size-extra-large: 20px;
 
 // 圆角
-$border-radius-base: 6px;
-$border-radius-small: 4px;
+$border-radius-base: 4px;
 $border-radius-large: 8px;
-$border-radius-extra-large: 12px;
-$border-radius-round: 24px;
 
-// 间距 - 8px 网格系统
+// 间距
 $spacing-xs: 4px;
 $spacing-sm: 8px;
 $spacing-md: 16px;
 $spacing-lg: 24px;
-$spacing-xl: 32px;
-$spacing-xxl: 48px;
 
-// 布局尺寸
-$sidebar-width: 220px;
+// 布局
+$sidebar-width: 210px;
 $sidebar-collapsed-width: 64px;
-$header-height: 56px;
+$header-height: 50px;
 $tabs-height: 40px;
-$footer-height: 32px;
-
-// 过渡
-$transition-duration: 0.2s;
-$transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-
-// 阴影
-$box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-$box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+$footer-height: 30px;