xto-fronted 0.4.101 → 0.4.103

package/src/assets/styles/_root.scss

@@ -1,184 +1,184 @@
-// ==============================================
-// 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%);
+// ==============================================
+// 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,70 +1,70 @@
-// ==============================================
-// 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);
+// ==============================================
+// 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);