使用设计系统

StackRivet 保留 Element Plus 的工程效率，但用一套有意为之的设计系统替换它的默认观感，让管理端像一个资深工程师会尊重的工具——密集、可扫读、不张扬——而不是套壳模板。当你构建新页面时，下面这些约定让它们保持一致。

在 http://127.0.0.1:5173/design-system 浏览实时组件展示页。

设计语言

方面	规则
主色	#5E63E0（深薰衣草靛蓝）——唯一的彩色主色。没有第二个主色。
画布	管理端用浅色（#FFFFFF + #FAFAFA 交替带）；深色只用于营销页
立体感	hairline 与表面阶梯承载层级；投影只留给浮层（弹窗、popover、下拉）
圆角	按钮和输入 6px、卡片 8px、弹窗 12px——按钮绝不胶囊形（9999px）
字体	UI/展示用 Inter，代码用 JetBrains Mono；字距默认保持 0，除非组件有明确 token
数字	每个货币 / 计数 / 时间戳值用 tabular-nums，让数字对齐

token 是事实源

所有颜色、间距、圆角、字体都在 src/styles/tokens.scss。引用 token——绝不在 .vue 文件里硬编码 hex 或像素值。需要一个不存在的值时，加一个 token，而不是内联。

token 分组：

• 品牌——$color-brand-primary（#5E63E0）加 hover / active / soft 浅色调。
• 表面阶梯——$color-canvas / -soft / -sunken、$color-surface-1 / -2。
• 墨色——$color-ink / -strong / -mute / -faint / -disabled。
• hairline——$color-hairline / -strong / -faint。
• 语义色——$color-success / -warning / -danger / -info（各带 -soft 填充）。
• 间距——4px 基本单位（$space-1…$space-9），无半单位。
• 字号阶——$type-display-*、$type-heading-*、$type-body*、$type-caption、$type-button。
• 圆角——$radius-sm 4px、$radius-md 6px（按钮/输入）、$radius-lg 8px（卡片）、$radius-xl 12px（弹窗）。

组件约定

Element Plus 组件通过 CSS 变量映射拿到主题，所以多数时候你直接用即可。当你构建自己的组件时：

• 主按钮——每页一个填充的 #5E63E0 CTA；用 StackRivet 的 primary 样式，而非 Element Plus 默认蓝。
• 次操作——ghost / text 按钮，尤其在表格和表单里。
• 表格——StackRivet 的 ElTable 样式：1px hairline 网格、大写字距表头、无斑马纹、数字列用 tabular-nums。
• 卡片——1px hairline 边框 + 8px 圆角，无默认投影。
• 侧边栏菜单——激活项用 brand-soft 背景 + 2px 主色竖条。

Do / Don’t

Do

• 每页单个填充 primary CTA 用品牌 #5E63E0。
• 用 hairline 和表面阶梯表达层级。
• 每个数字 / 货币 / 时间戳列都加 tabular-nums。
• 管理端保持浅色画布；深色只用于营销页。

Don’t

• 别用 Element Plus 默认 primary 蓝（#409EFF）或它的默认 4px 按钮圆角。
• 别把按钮做成胶囊形。
• 别默认给卡片加投影。
• 别引入第二个彩色主色——配色是灰阶 + 靛蓝。
• 别在 .vue 文件里硬编码颜色、间距、圆角——一律用 token。

让你的组件保持一致

提交 UI 改动前的快速自检：

# tokens.scss 之外不应有硬编码 hex
grep -rnE "#[0-9a-fA-F]{3,8}" src --include='*.vue'
# tokens.scss 之外不应有硬编码圆角
grep -rnE "border-radius: [0-9]+px" src --include='*.vue'

两者都应为空——颜色和圆角都归 tokens.scss。代码生成器产出的组件已遵循这些规则；需要精确数值时，项目自带深度 token + 覆盖参考。