规范化对照(v2 → 规范)
设计系统以 cbtis-homepage-v2 为基础提炼,下表汇总了规范与 v2 现状不一致的地方。v2 代码本次不修改,后续改造时可按优先级逐项处理。
优先级:高 = 影响可用性或无障碍;中 = 视觉不一致;低 = 代码整洁。
全局
| 项目 | v2 现状 | 规范 | 优先级 |
|---|---|---|---|
| 焦点样式 | 按钮 ring-3 ring-ring/50,输入框 ring-2 ring-ring/30,链接、卡片无焦点样式 | 交互元素 focus-visible:ring-3 ring-ring/40;表单控件 focus:ring-3 ring-ring/20 + 品牌蓝描边;深色背景 ring-sky/60 | 高 |
| 语义色 | 无成功、警告色 | 新增 success、warning、destructive-foreground | 中 |
| 天蓝色 | 白底服务卡片对勾使用 text-sky(对比度 2.3) | sky 只用于深蓝背景 | 高 |
| 最小字号 | 多处 text-[11px] | 最小 text-xs(12px) | 中 |
| 暗色模式 | 声明了 @custom-variant dark,组件里残留 dark: 类名,但无暗色变量 | 删除 | 低 |
| 样式来源 | 输入框样式在 TextInput.vue、kyc/classes.ts、company-registration/model.ts 各一份 | 以设计系统类名为准,收敛为一处 | 低 |
按钮
| 项目 | v2 现状 | 规范 | 优先级 |
|---|---|---|---|
| 尺寸 | 默认 32px,业务中覆盖为 36 / 40 / 44 / 48px | sm 36 / md 44(默认)/ lg 48px | 中 |
| 主要按钮 | 默认变体悬停不变色,每处手写 bg-navy hover:bg-navy-muted | 主要按钮自带悬停色 | 低 |
| 危险按钮 | 只有弱样式 | 增加实心样式用于最终确认 | 中 |
表单
| 项目 | v2 现状 | 规范 | 优先级 |
|---|---|---|---|
| 错误状态 | 只有红色描边,无错误文案、无 aria-invalid | aria-invalid 驱动样式 + 错误文案 + aria-describedby | 高 |
| 必填标记 | 星号会被读屏读出 | 星号 aria-hidden,控件 required | 中 |
| 选择卡片 | <button> + active prop,无法方向键切换、不参与表单提交 | <input type="radio"> + has-checked: | 高 |
| 下拉选择 | 单选用原生 <select>(各系统外观不一、不能搜索);多选 button 内嵌 span[role=button] | 单选 / 多选统一为带搜索的自定义下拉,值仍保存在原生 <select> 中 | 高 |
| 日期 | 公司注册 PersonModal 的出生日期、成立日期使用 type="date",外观与显示格式随浏览器和系统语言变化 | 日期选择 / 日期范围组件,统一 YYYY-MM-DD | 中 |
| 验证码 | EmailVerifyDialog、ResumeApplicationDialog 使用普通输入框 | 验证码输入组件(分格显示、支持粘贴与自动填充) | 中 |
| 禁用状态 | 输入框无禁用样式 | disabled:bg-muted | 中 |
反馈与导航
| 项目 | v2 现状 | 规范 | 优先级 |
|---|---|---|---|
| 对话框 | div[role=dialog],无焦点管理、背景可 Tab 聚焦、页面可滚动 | 原生 <dialog> + showModal(),滚动锁定 | 高 |
| 语言切换 | role=listbox,不支持方向键,关闭后焦点丢失 | Menu Button 模式 | 中 |
| 标签页 | 有 ARIA 属性但不支持方向键 | 完整键盘支持 | 中 |
| 步骤条 | 当前步骤无 aria-current;进度条无语义 | aria-current="step"、role="progressbar" | 中 |
| 提示 | 只有 InfoNote 与对话框内红色块 | 信息 / 成功 / 警告 / 错误四种语气 | 低 |
| Toast | 关闭按钮 aria-label="close" 写死英文 | 文案可传入 | 低 |
| 浮层样式 | 圆角 rounded-md / rounded-lg、阴影 shadow-lg / shadow-xl 混用 | 浮层 rounded-lg shadow-lg,对话框 shadow-xl | 低 |