管理后台 UI 规范（Element Plus + Vue 3 + TS）

面向政务、金融、企业管理、教务医疗等严肃业务系统的界面规约。风格基调：扁平、克制、庄重。信息架构沿用若依 / 芋道，视觉更收敛。

一、适用范围与非目标

| 适用 | 不适用 | |---|---| | 后台管理端（列表 / 表单 / 详情 / 审批 / 监控 / 工作台 / 登录） | C 端营销页、官网首页 | | 数据密集型表格、查询区、工具栏 | 数据大屏（另有 dark 驾驶舱规约） | | 1280–1920 桌面端为主 | 移动端优先的 H5 |

明确不做：渐变背景、玻璃拟态、大圆角（>8px）、重投影、插画式空状态、多主色拼贴、动效超过 200ms。

二、工作流（按序执行）

确认页面类型 → 查 references/05-page-patterns.md，选定布局模式。
取色与尺寸 → 查 references/01-design-tokens.md，所有取值必须来自令牌表，禁止自造色值。
搭骨架 → 查 references/03-layout.md，按三区结构落地，不另发明容器层级。
选组件与属性 → 查 references/04-components.md，使用规定好的组件与默认属性组合。
接入主题 → 查 references/02-element-plus-theme.md，复制 assets/ 中的样式文件。
写代码 → 查 references/06-code-examples.md，复用 useListPage、AppTag 等既有实现。
自检 → 跑下方检查清单，全部通过再交付。

三、硬性规则（MUST / MUST NOT）

视觉

MUST 主色全局唯一 #2563EB。不得引入第二个主色（紫、青、橙作为主色一律禁止）。
MUST 层级只用「1px 描边 #E4E8EE + 白底」，不用阴影表达层级；仅弹窗/下拉允许 0 4px 12px rgba(31,39,51,.08)。
MUST NOT 使用渐变填充、背景模糊、圆角 > 8px、装饰性投影。
MUST 圆角三档：控件 4 / 卡片 6 / 标签 4。不在三档内即为违规。
MUST 正文字号 13px；卡片标题 15/500；指标数值 26/700；辅助文字 12。
MUST 所有数字（编号、金额、时间、数量）使用 tabular-nums 等宽数字并右对齐。
MUST 金额带千分位与币种符号 ¥；金融场景涨用红 #D54941、跌用绿 #12A05C（中国惯例，禁止反色）。

交互

MUST 表格一页默认 10 条，可选 20/50/100；行高 52，表头 44。
MUST 操作列最多 3 个文字按钮，超出收进「更多」下拉。
MUST 删除必须二次确认（ElMessageBox.confirm），确认按钮文案「确认删除」。
MUST 所有异步操作有 loading 态；表格有空状态与错误态。
MUST NOT 出现超过 200ms 的过渡动画，或弹跳 / 旋转类效果。

工程

MUST 所有接口响应定义 interface，禁止 any 与 as any。
MUST 颜色只出现在 CSS 变量或令牌文件中，Vue 模板与 script 内不得出现十六进制色值。
MUST 列表页统一复用 useListPage composable，不重复实现分页 / 查询 / 重置逻辑。
MUST 图标统一 @element-plus/icons-vue，不混用第二套图标库。
MUST 表格列宽写成常量对象，不散落在模板里。
MUST 组件一律 <script setup lang="ts">，props 用 defineProps<Props>() 泛型声明。

四、令牌速查（完整版见 references/01）

| 类别 | 令牌 | 值 | |---|---|---| | 主色常规 / 深 / 浅底 | --app-color-primary / -dark / -light | #2563EB / #1D4ED8 / #EFF4FF | | 侧栏底 / Logo 条 | --app-sidebar-bg / --app-sidebar-logo-bg | #1D2B44 / #182339 | | 侧栏文字 / 分组 | --app-sidebar-text / --app-sidebar-group | #A6B2C4 / #5F6E85 | | 页面底 / 卡片 | --app-bg-page / --app-bg-card | #F2F4F7 / #FFFFFF | | 描边 / 行线 | --app-border / --app-border-row | #E4E8EE / #F2F4F7 | | 表头底 / 行悬浮 | --app-table-header-bg / --app-table-hover-bg | #F7F9FC / #F5F8FF | | 文字主/次/辅/弱 | --app-text-1/2/3/4 | #1F2733 / #3A414B / #5A6472 / #8A94A3 | | 成功 / 警告 / 危险 | --app-success / -warning / -danger | #12A05C / #C97A0E / #D54941 | | 圆角控件/卡片 | --app-radius-control / -card | 4px / 6px | | 尺寸侧栏/顶栏/页签 | — | 240px / 56px / 40px |

五、自检清单

交付前逐条核对，任一项不通过即整改：

[ ] 主色只有一个 #2563EB，无第二种彩色主色
[ ] 无渐变、无玻璃拟态、无 >8px 圆角、无装饰性阴影
[ ] 正文 13px，卡片标题 15/500，指标 26/700
[ ] 圆角只用了 4 / 6
[ ] 表格：行高 52、表头 44、一页 10 条、数字右对齐等宽
[ ] 状态色取自状态色表，未自造
[ ] 操作列不超过 3 个按钮，删除有二次确认
[ ] 查询区一行不超过 4 个字段，超出有展开/收起
[ ] 模板与 script 内无十六进制色值
[ ] 无 any，接口响应有 interface
[ ] 列表页复用 useListPage
[ ] 图标全部来自 @element-plus/icons-vue
[ ] 空状态 / 加载态 / 错误态齐全
[ ] Tab 顺序正确，按钮有 hover / active / disabled 态

六、参考文件索引

| 文件 | 用途 | |---|---| | references/01-design-tokens.md | 完整设计令牌、状态色表、字体与间距阶梯 | | references/02-element-plus-theme.md | 主题接入、CSS/SCSS 覆写清单、常见坑 | | references/03-layout.md | 三区骨架、尺寸、栅格、响应式降级 | | references/04-components.md | 按钮/表单/表格/标签/分页/弹窗/消息规约 | | references/05-page-patterns.md | 五类页面模式与组合方式 | | references/06-code-examples.md | 目录结构、类型、composable、SFC 示例 | | assets/tokens.css | 可直接引入的 CSS 变量 | | assets/element-theme.scss | Element Plus SCSS 构建期覆写 | | assets/element-override.scss | 尺寸兜底覆写 | | assets/useListPage.ts | 列表页通用 composable |

七、三步接入现有项目

cp assets/tokens.css            src/styles/tokens.css
cp assets/element-theme.scss    src/styles/element-theme.scss
cp assets/element-override.scss src/styles/element-override.scss
cp assets/useListPage.ts        src/composables/useListPage.ts

在 main.ts 中按序引入：tokens.css → element-theme.scss → element-override.scss → global.scss。 vite.config.ts 的按需引入与 SCSS 覆写配置见 references/02-element-plus-theme.md 第一节。