Skip to content

规范化对照(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
语义色无成功、警告色新增 successwarningdestructive-foreground
天蓝色白底服务卡片对勾使用 text-sky(对比度 2.3)sky 只用于深蓝背景
最小字号多处 text-[11px]最小 text-xs(12px)
暗色模式声明了 @custom-variant dark,组件里残留 dark: 类名,但无暗色变量删除
样式来源输入框样式在 TextInput.vuekyc/classes.tscompany-registration/model.ts 各一份以设计系统类名为准,收敛为一处

按钮

项目v2 现状规范优先级
尺寸默认 32px,业务中覆盖为 36 / 40 / 44 / 48pxsm 36 / md 44(默认)/ lg 48px
主要按钮默认变体悬停不变色,每处手写 bg-navy hover:bg-navy-muted主要按钮自带悬停色
危险按钮只有弱样式增加实心样式用于最终确认

表单

项目v2 现状规范优先级
错误状态只有红色描边,无错误文案、无 aria-invalidaria-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
验证码EmailVerifyDialogResumeApplicationDialog 使用普通输入框验证码输入组件(分格显示、支持粘贴与自动填充)
禁用状态输入框无禁用样式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