样式统一

2026-08-24 14:48:08 +08:00
parent 215a48446d
commit 1a1b1ce66b
25 changed files with 479 additions and 395 deletions
@@ -0,0 +1,147 @@
+// ============================================================
+// 设计 Token 体系（Design Tokens）
+// 全站统一颜色 / 字体 / 间距 / 圆角 / 阴影 / 边框 / 层级 / 断点
+// 约定：
+//   1. 业务代码禁止散落魔法数字，一律引用下方 $token / --token
+//   2. SCSS 变量供样式内使用，:root 自定义属性供内联/动态样式使用
+// ============================================================
+@import './variables.scss';
+
+// ------------------------- 色彩 Token -------------------------
+// 主色：教育绿
+$token-color-primary: #00875a;            // 主色
+$token-color-primary-hover: #0b9e6c;      // hover
+$token-color-primary-active: #006b47;     // active
+$token-color-primary-light: #e6f4ea;      // 浅底（标签/选中背景）
+$token-color-primary-lighter: #f0f9f4;    // 更浅（hover 背景/斑马）
+$token-color-primary-ring: rgba(0, 135, 90, 0.35); // 聚焦外光晕
+
+// 语义色
+$token-color-danger: #ff4949;             // 危险
+$token-color-success: #13ce66;            // 成功
+$token-color-warning: #ffba00;            // 警告
+$token-color-info: #909399;               // 中性信息
+
+// 中性灰阶（对齐 Element 三级文字）
+$token-color-text-main: #303133;          // 主要文字
+$token-color-text-regular: #606266;       // 常规文字
+$token-color-text-secondary: #909399;     // 次要文字
+$token-color-text-placeholder: #c0c4cc;   // 占位
+$token-color-border: #dcdfe6;             // 边框
+$token-color-border-light: #e4e7ed;       // 浅边框
+$token-color-border-lighter: #ebeef5;     // 极浅边框（分割线）
+$token-color-fill: #f5f7fa;               // 填充/底灰
+$token-color-fill-light: #f0f2f5;         // 更浅填充
+
+// ------------------------- 字体 Token -------------------------
+$token-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
+  'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+$token-font-size-xs: 12px;
+$token-font-size-sm: 13px;
+$token-font-size-base: 14px;
+$token-font-size-lg: 16px;
+$token-font-size-xl: 20px;
+
+// ------------------------- 间距 Token -------------------------
+$token-space-xs: 4px;
+$token-space-sm: 8px;
+$token-space-md: 12px;
+$token-space-lg: 16px;
+$token-space-xl: 20px;
+$token-space-2xl: 24px;
+
+// ------------------------- 圆角 Token -------------------------
+$token-radius-sm: 2px;
+$token-radius-md: 4px;
+$token-radius-lg: 6px;
+$token-radius-xl: 8px;
+$token-radius-circle: 50%;
+
+// ------------------------- 阴影 Token -------------------------
+$token-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.08);
+$token-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
+$token-shadow-popup: 0 2px 12px rgba(0, 0, 0, 0.12);
+
+// ------------------------- 层级 Token -------------------------
+$token-z-index-dropdown: 2000;   // 下拉/气泡
+$token-z-index-mask: 2001;       // 遮罩
+$token-z-index-modal: 2002;      // 弹窗
+$token-z-index-toast: 3000;      // 消息/通知
+
+// ------------------------- 断点 Token -------------------------
+$token-breakpoint-xs: 480px;
+$token-breakpoint-sm: 768px;
+$token-breakpoint-md: 992px;
+$token-breakpoint-lg: 1200px;
+$token-breakpoint-xl: 1920px;
+
+// ------------------------- 暴露给运行时（CSS 变量） -------------------------
+:root {
+  --token-color-primary: #{$token-color-primary};
+  --token-color-primary-hover: #{$token-color-primary-hover};
+  --token-color-primary-active: #{$token-color-primary-active};
+  --token-color-primary-light: #{$token-color-primary-light};
+  --token-color-primary-lighter: #{$token-color-primary-lighter};
+  --token-color-primary-ring: #{$token-color-primary-ring};
+
+  --token-color-danger: #{$token-color-danger};
+  --token-color-success: #{$token-color-success};
+  --token-color-warning: #{$token-color-warning};
+  --token-color-info: #{$token-color-info};
+
+  --token-color-text-main: #{$token-color-text-main};
+  --token-color-text-regular: #{$token-color-text-regular};
+  --token-color-text-secondary: #{$token-color-text-secondary};
+  --token-color-text-placeholder: #{$token-color-text-placeholder};
+  --token-color-border: #{$token-color-border};
+  --token-color-border-light: #{$token-color-border-light};
+  --token-color-border-lighter: #{$token-color-border-lighter};
+  --token-color-fill: #{$token-color-fill};
+  --token-color-fill-light: #{$token-color-fill-light};
+
+  --token-font-family: #{$token-font-family};
+  --token-font-size-xs: #{$token-font-size-xs};
+  --token-font-size-sm: #{$token-font-size-sm};
+  --token-font-size-base: #{$token-font-size-base};
+  --token-font-size-lg: #{$token-font-size-lg};
+  --token-font-size-xl: #{$token-font-size-xl};
+
+  --token-space-xs: #{$token-space-xs};
+  --token-space-sm: #{$token-space-sm};
+  --token-space-md: #{$token-space-md};
+  --token-space-lg: #{$token-space-lg};
+  --token-space-xl: #{$token-space-xl};
+  --token-space-2xl: #{$token-space-2xl};
+
+  --token-radius-sm: #{$token-radius-sm};
+  --token-radius-md: #{$token-radius-md};
+  --token-radius-lg: #{$token-radius-lg};
+  --token-radius-xl: #{$token-radius-xl};
+
+  --token-shadow-light: #{$token-shadow-light};
+  --token-shadow-card: #{$token-shadow-card};
+  --token-shadow-popup: #{$token-shadow-popup};
+
+  --token-z-index-dropdown: #{$token-z-index-dropdown};
+  --token-z-index-mask: #{$token-z-index-mask};
+  --token-z-index-modal: #{$token-z-index-modal};
+  --token-z-index-toast: #{$token-z-index-toast};
+}
+
+// ------------------------- 暴露给 JS 模块 -------------------------
+:export {
+  colorPrimary: $token-color-primary;
+  colorPrimaryHover: $token-color-primary-hover;
+  colorPrimaryActive: $token-color-primary-active;
+  colorPrimaryLight: $token-color-primary-light;
+  colorPrimaryLighter: $token-color-primary-lighter;
+  colorDanger: $token-color-danger;
+  colorSuccess: $token-color-success;
+  colorWarning: $token-color-warning;
+  fontFamily: $token-font-family;
+  breakpointXs: $token-breakpoint-xs;
+  breakpointSm: $token-breakpoint-sm;
+  breakpointMd: $token-breakpoint-md;
+  breakpointLg: $token-breakpoint-lg;
+  breakpointXl: $token-breakpoint-xl;
+}