name: ui-design-systemdescription: 项目 UI 统一设计规范。覆盖组件选用策略、颜色 token 体系、字体排印、间距布局、交互状态、表单搜索模式和可用性规则。适用场景新建项目时建立视觉基线UI 评审时作为一致性门禁组件库选型和定制一、组件选用策略UI 能力选择优先级1. 项目已有公共组件src/components/ ↓ 不满足2. Ant Design6内置组件 ↓ 不满足3. 页面内部自研组件不进入 src/components/ ↓ 确认 ≥2 页面长期复用4. 上提到 src/components/ 成为公共组件禁止Ant Design 已有的 Button、Modal、Table、Form、Tag、Empty、Spin 等不自研替代品。二、颜色 Token 体系设计原则所有颜色通过 CSS 变量表达禁止裸色值使用--app-*前缀命名空间每个颜色同时提供 RGB 版本用于rgba(var(--app-*-rgb), alpha)透明度叠加Token 分层--app-primary / --app-primary-rgb 主色 --app-primary-dim 主色弱化 --app-surface / --app-surface-rgb 表面/卡片背景 --app-surface-variant / --app-surface-variant-rgb 次级表面 --app-surface-low / --app-surface-low-rgb 更低层级表面 --app-on-surface 表面上的文字色 --app-on-surface-variant 表面上的次级文字 --app-outline / --app-outline-rgb 边框/分割线 --app-outline-variant / --app-outline-variant-rgb 次级边框 --app-error / --app-error-rgb 错误/危险色 --app-success 成功色 --app-warning 警告色 --app-radius-sm / --app-radius-md / --app-radius-lg 圆角 --app-font-size-sm / --app-font-size-base / --app-font-size-title 字号 --app-line-height-sm / --app-line-height-base / --app-line-height-title 行高亮/暗主题切换/* 亮色默认 */:root{--app-primary:#1677ff;--app-primary-rgb:22,119,255;--app-surface:#ffffff;--app-surface-rgb:255,255,255;--app-on-surface:#1a1a1a;}/* 暗色 */:root[data-themedark]{--app-primary:#4096ff;--app-primary-rgb:64,150,255;--app-surface:#141414;--app-surface-rgb:20,20,20;--app-on-surface:#e8e8e8;}主题切换只改document.documentElement.dataset.theme不操作 DOM class。使用示例// ✅ 正确 .my-card { color: var(--app-on-surface); background: rgba(var(--app-surface-variant-rgb), 0.2); border: 1px solid rgba(var(--app-outline-variant-rgb), 0.16); border-radius: var(--app-radius-md); } // ❌ 错误 .my-card { color: #333; background: #f5f5f5; }三、字体排印字号层级Token值用途--app-font-size-sm12px标签、辅助文字、badge--app-font-size-base14px正文、表格、表单--app-font-size-title16px区块标题行高规则正文1.514px 字号标题1.416px 字号标签1.4512px 字号letter-spacing默认0或normal字号禁止使用vw/vh单位字重标题600正文400标签600文字颜色主要文字var(--app-on-surface)次要文字/说明var(--app-on-surface-variant)链接/可点击文字var(--app-primary)四、间距与布局间距尺度尺寸值用途xs4px图标与文字间距sm8px同类元素间距md12-16px区块内边距、卡片间距lg20-24px大区块间距、section padding布局模式页面级padding: 20px 24px最大宽度 1440px卡片级padding: 20px圆角var(--app-radius-md)区块标题margin-bottom: 14pxpadding-left: 4px网格简单并排display: flex; gap: var(--app-gap-md)复杂布局display: grid; grid-template-columns: ...响应式media (max-width: 960px)时切换为单列五、交互状态每个交互入口必须覆盖以下状态状态表达方式默认正常渲染hover背景微变、颜色微调active/pressed按压缩放或颜色加深disabled灰色 cursor: not-allowedloadingSpin 或按钮内 loading 图标emptyEmpty组件有意义的描述文案errorAlert或Result展示错误信息状态过渡颜色/背景变化transition: all 0.15s ease展开/折叠transition: max-height 0.25s ease淡入opacitytransition删除/危险操作必须弹出确认modal.confirm({ title: 确认删除, okButtonProps: { danger: true } })删除按钮颜色danger属性或var(--app-error)六、表单与搜索搜索表单模式输入框onChange只更新草稿态回车 / 点击查询按钮 → 提交草稿发起请求回到第一页重置按钮 → 清空草稿 已提交条件回到第一页输入框必须支持回车触发搜索表单项必填项rules{[{ required: true }]}最大长度通过maxLength属性限制占位符placeholder请输入xxx中文提交按钮提交中loading属性同时禁用按钮防重复表单校验失败时不提交自动滚动到第一个错误字段七、数据展示状态映射后端状态码不直接展示必须映射为中文显示值constSTATUS_MAP:Recordstring,string{open:处理中,closed:已关闭,pending:待处理,};空值展示文本显示-或暂无列表使用Empty组件可选字段不显示空标签时间格式精确到分钟2024-07-10 14:30相对时间3 分钟前不超过 24 小时内的场景八、可用性图标按钮必须有title或aria-label可点击元素用 Button/Link/Menu 等语义组件不用div模拟弹窗必须有destroyOnClose避免状态残留页面标题使用h2/h3层级区块使用section aria-label...标注操作按钮文案表达具体动作创建工单而非提交、确认删除而非确定