xto-fronted 0.4.86 → 0.4.87

package/src/assets/styles/_root.scss

@@ -1,140 +1,184 @@
-// ==============================================
-// CSS Variables - 主题变量
-// ==============================================
-
-:root {
-  // 主题色
-  --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: #fafcff;
-  --color-fill-blank: #ffffff;
-
-  // 背景颜色
-  --bg-color: #ffffff;
-  --bg-color-page: #f2f3f5;
-  --bg-color-overlay: #ffffff;
-
-  // 盒子阴影
-  --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: 18px;
-
-  // 圆角
-  --border-radius-base: 4px;
-  --border-radius-small: 2px;
-  --border-radius-large: 8px;
-  --border-radius-round: 20px;
-  --border-radius-circle: 50%;
-
-  // 间距
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-
-  // 尺寸
-  --component-size-large: 40px;
-  --component-size-default: 32px;
-  --component-size-small: 24px;
-
-  // 过渡时间
-  --transition-duration: 0.3s;
-  --transition-duration-fast: 0.2s;
-  --transition-duration-slow: 0.5s;
-
-  // z-index
-  --z-index-dropdown: 1000;
-  --z-index-sticky: 1020;
-  --z-index-fixed: 1030;
-  --z-index-modal-backdrop: 1040;
-  --z-index-modal: 1050;
-  --z-index-popover: 1060;
-  --z-index-tooltip: 1070;
-
-  // 布局
-  --sidebar-width: 210px;
-  --sidebar-collapsed-width: 64px;
-  --header-height: 50px;
-  --tabs-height: 40px;
-  --footer-height: 30px;
-}
-
-// 暗色主题
-.dark {
-  --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;
-
-  --bg-color: #1d1e1f;
-  --bg-color-page: #0a0a0a;
-  --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);
+// ==============================================
+// CSS Variables - 企业级配色方案
+// 参考：阿里 Ant Design Pro、腾讯云控制台
+// ==============================================
+
+: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-fill-light: #fafafa;
+  --color-fill-lighter: #ffffff;
+  --color-fill-blank: #ffffff;
+  --color-fill-dark: #e8e8e8;
+
+  // 背景颜色 - 页面层级
+  --bg-color: #ffffff;
+  --bg-color-page: #f0f2f5;
+  --bg-color-component: #ffffff;
+  --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;
+  --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;
+  --border-radius-large: 8px;
+  --border-radius-extra-large: 12px;
+  --border-radius-round: 24px;
+  --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);
+
+  // z-index - 层级管理
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+
+  // 布局 - 精确尺寸
+  --sidebar-width: 220px;
+  --sidebar-collapsed-width: 64px;
+  --header-height: 56px;
+  --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%);
+}
+
+// 暗色主题 - 深邃科技感
+.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-fill-blank: #141414;
+  --color-fill-dark: #363636;
+
+  --bg-color: #141414;
+  --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%);
 }

package/src/assets/styles/_variables.scss

@@ -1,45 +1,70 @@
-// ==============================================
-// SCSS Variables - 用于样式计算
-// ==============================================
-
-// 主题色
-$color-primary: #409eff;
-$color-success: #67c23a;
-$color-warning: #e6a23c;
-$color-danger: #f56c6c;
-$color-info: #909399;
-
-// 文字颜色
-$color-text-primary: #303133;
-$color-text-regular: #606266;
-$color-text-secondary: #909399;
-
-// 边框颜色
-$color-border: #dcdfe6;
-$color-border-light: #e4e7ed;
-$color-border-lighter: #ebeef5;
-
-// 背景颜色
-$bg-color: #ffffff;
-$bg-color-page: #f2f3f5;
-
-// 字体
-$font-size-base: 14px;
-$font-size-small: 12px;
-
-// 圆角
-$border-radius-base: 4px;
-$border-radius-large: 8px;
-
-// 间距
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$spacing-lg: 24px;
-
-// 布局
-$sidebar-width: 210px;
-$sidebar-collapsed-width: 64px;
-$header-height: 50px;
-$tabs-height: 40px;
-$footer-height: 30px;
+// ==============================================
+// 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-text-primary: #1f1f1f;
+$color-text-regular: #424242;
+$color-text-secondary: #757575;
+$color-text-placeholder: #9e9e9e;
+
+// 边框颜色
+$color-border: #d9d9d9;
+$color-border-light: #e8e8e8;
+$color-border-lighter: #f0f0f0;
+
+// 背景颜色
+$bg-color: #ffffff;
+$bg-color-page: #f0f2f5;
+$bg-color-component: #ffffff;
+
+// 字体
+$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-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-collapsed-width: 64px;
+$header-height: 56px;
+$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);