设计规范

规范级别

为避免“规范写了但没人执行”，每条规则都标注级别。代码评审与设计走查按级别判定问题。

色彩规范

必须：界面 90% 由 ink 灰阶构成，品牌深青 cdx 只用于需要被注意的元素。状态色只表达状态，不参与装饰。

必须：危急状态不得只靠颜色表达，需同时使用图标与文字（例如“危急 · 血钾 6.8 mmol/L”）。

应当：暗色模式下通过 token 覆盖背景与文字色，不在组件里写死十六进制值。

排版规范

必须：大数字统一使用 .font-num（Urbanist Medium）。不要对数字使用伪粗体，也不要用等宽字体展示看板大指标，否则位宽与字形会破坏视觉一致性。

必须：临床关键信息不得使用 12px 以下字号；不得用全大写英文代替中文标签。

间距、圆角与布局

• 间距：以 4px 为基准。控件内边距 8/12px，卡片内边距 20/24px，区块间距 24/32px。
• 圆角：输入框与按钮 6px，卡片 8–12px，文档与弹层 12–16px；同一页面不要混用超过两档。
• 阴影：仅用于浮层与悬停抬升，静态卡片使用 1px 边框，避免多层阴影叠加。
• 管理端布局：Header 56px，Sider 240px（收起 64px），Content 内边距 20px；移动端侧边栏自动收起。
• 密度：表格行高 40–44px；床旁与移动端触控目标不小于 44×44px。

组件使用规则

按钮

• 必须：同一区域只允许一个主按钮；其余操作使用次按钮或文字按钮。
• 必须：删除、作废、撤销签收等不可逆操作使用危险样式，并二次确认、记录原因。
• 应当：按钮文案使用“动词 + 对象”，如“保存病历”“提交医嘱”，避免“确定”“提交”这类无上下文措辞。
• 应当：禁用按钮必须就近说明原因（如“需先选择患者”），不能只变灰。

表单

• 必须：标签常驻，不得用 placeholder 代替标签；必填项标记 * 并在提交前校验。
• 必须：检验、剂量、生命体征等字段必须带单位；单位不可隐藏在 placeholder 中。
• 必须：错误提示显示在对应字段下方，说明“错在哪、怎么改”，不能只显示“输入有误”。
• 应当：不要用默认值覆盖真实数据；预填值需明确标识来源。

表格

• 应当：整行可点击时提供 hover 与焦点态；操作列不超过 3 个直接操作，其余收进“更多”。
• 必须：批量操作前显示已选数量与影响范围；分页、排序、筛选条件在操作后保留。
• 应当：长文本截断并提供查看完整内容的方式，不在表格单元格里堆放大段病历。

弹层与提示

• 应当：阻断式弹窗只用于确认、强制填写与高风险操作；普通编辑优先使用抽屉或页面。
• 必须：关闭弹窗不得丢失已填数据（除用户明确放弃）；ESC 可关闭非强制弹窗。
• 应当：成功提示 3 秒后自动消失；错误提示需手动关闭，并提供处理方式或重试入口。
• 必须：不得弹窗套弹窗；需要多步时改用分步页面或抽屉。

日期与时间

• 必须：日期使用选择器，不允许自由文本输入；时间使用 24 小时制，精确到分钟。
• 应当：列表同时提供相对时间与绝对时间，如“3 分钟前 · 14:22”，避免跨天误读。

医疗业务规则

本节规则优先于通用组件默认行为。任何医疗项目上线前必须逐条确认。

患者身份核对

• 必须：开医嘱、给药、采血、手术等关键操作前，展示至少两项身份信息（姓名 + 住院号 / 门诊号 / 身份证后四位）。
• 必须：同名患者必须在列表与详情中提供额外区分信息（性别、年龄、床号、住院号）。

危急值与异常

• 必须：危急值使用红色 + 图标 + 文本三重编码，并置于视野首位；确认签收后留痕。
• 必须：检验值展示单位与参考区间；异常值使用 ↑ / ↓ 标记，不能只靠颜色。
• 应当：临界值使用警告色并提示复查，不与危急值混用同一视觉级别。

记录与审计

• 必须：病历、医嘱、护理记录等修改需保留原始记录，展示修改人、修改时间与修改内容。
• 必须：签名、签收、作废等动作不可静默完成，必须有明确的确认与结果反馈。
• 应当：关键操作在界面中提供“操作记录 / 溯源”入口，能被快速查到。

隐私与数据

• 必须：列表默认脱敏（如“张*”“138****5678”“110***********1234”）；查看完整信息需再次授权并留痕。
• 必须：截图、导出、打印等外发操作需提示数据范围与责任。
• 应当：空状态说明“为什么为空 + 下一步做什么”，不使用空白页或仅一句“暂无数据”。
• 应当：加载超过 300ms 使用骨架屏，保持布局稳定，避免内容跳动导致误点。

交互与状态

• 必须：所有可交互元素覆盖 default、hover、active、focus-visible、disabled、loading 六种状态。
• 必须：键盘焦点环清晰可见（2px，cdx 色），不得用 outline: none 取消后不补替代样式。
• 必须：异步操作期间按钮进入 loading 且禁止重复提交；成功后给出明确结果。
• 应当：动画时长 150–300ms，使用标准缓动；尊重 prefers-reduced-motion。
• 应当：同一页面内导航不整页刷新；筛选、分页、排序保持滚动位置。

可访问性与合规

• 必须：正文文字对比度不低于 4.5:1，大字号不低于 3:1。
• 必须：信息不能只通过颜色传达；状态需同时提供文字或图标。
• 必须：所有图标按钮提供 aria-label；表单控件与标签正确关联。
• 必须：支持 200% 缩放而不丢失内容；触控目标不小于 44×44px。
• 应当：遵循电子病历、网络安全等级保护与医院信息互联互通相关要求，涉及患者数据的页面在评审时同步合规同事。

反模式（禁止）

• 用成功 / 警告 / 危险色做装饰或区分普通分类。
• 一个页面出现多个同等权重的主按钮。
• 用 placeholder 代替字段标签，或隐藏必填项。
• 仅用颜色表达危急值、异常值或选中状态。
• 在表格单元格里塞入大段病历文本。
• 自动跳转、自动刷新打断正在录入的病历。
• 弹窗套弹窗，或在弹窗中承载需要长时间填写的表单。
• 用等宽字体或伪粗体展示看板大数字。
• 关闭确认弹窗后丢失已填数据且无提示。
• 未经授权展示患者完整姓名、证件号或联系方式。

验收清单

页面交付前逐项勾选。任一项为“必须”且未通过，不得进入验收。

• 色彩：主色使用正确，状态色未滥用，对比度达标。
• 排版：字号来自规范阶梯，大数字使用 Urbanist Medium，关键信息不小于 12px。
• 组件：按钮层级清晰，表单标签常驻，表格操作不超过 3 个，弹层无嵌套。
• 状态：hover / active / focus / disabled / loading / empty / error 均已覆盖。
• 医疗规则：身份核对、危急值三重编码、单位与参考区间、审计留痕、隐私脱敏均已落实。
• 键盘：全流程可仅用键盘完成，焦点顺序合理。
• 响应式：1440px、1024px、500px 三档无横向滚动与内容裁切。
• 文档：组件变更已同步 DESIGN.md、COMPONENT-AUDIT.md 与 tokens。