介绍
RUNDA Design System（RUNDA DS）是一套面向医疗软件与医疗信息系统的设计语言。它把色彩、排版、组件与交互规则收敛为可复用的 token 和模式，让门诊、住院、护理、检验检查等业务线在同一套规范下协作。
为什么医疗软件需要设计系统
医疗软件的界面不是展示页。医生在门诊几分钟内要完成问诊、开单、写病历；护士要在床旁反复核对；管理者要跨系统看指标。信息密度高、角色多、链路长，任何一次犹豫或误点都会被放大成时间成本，甚至医疗差错。
RUNDA DS 的目标是让这些高频操作可预测：同一个动作在所有页面出现在相同位置，同一种状态始终使用相同颜色与措辞，同一条业务规则不因项目不同而被重新发明。
降低认知负荷
统一的信息层级与控件位置，让医护把注意力留给患者，而不是界面。
减少操作差错
危险操作、身份核对、危急值等关键节点使用固定模式，避免各项目自由发挥。
缩短交付周期
组件、token 与代码示例可直接复用，新系统从规范开始，而不是从零画起。
支撑审计与合规
操作留痕、数据脱敏、状态可回溯在组件层统一实现，减少合规风险。
系统构成
RUNDA DS 由设计基础、组件库、数据展示模式与业务场景模板四层组成。所有视觉值来自 tokens/design-tokens.json，并通过 tokens/tailwind.config.js 暴露给前端。
| 层级 | 内容 | 典型使用场景 |
|---|---|---|
| 设计基础 | 色彩阶梯、字体与字号、间距、圆角、阴影、动效曲线 | 所有页面的底层视觉约束 |
| 通用组件 | 按钮、表单、表格、标签、卡片、弹层、导航、标签页、折叠面板、上传、日期选择等 | 门诊、住院、护理、后台管理的日常操作 |
| 数据展示 | KPI 数字、进度与状态、时间轴、溯源锚点 | 总览看板、检验检查报告、病程时间线 |
| 业务场景 | 页面结构、EMR 工作台、AI 对话系统 | 完整页面拼装与跨模块协作 |
适用范围
本设计系统面向医疗行业的信息系统。以下场景默认使用 RUNDA DS 的组件与规则：
- HIS 门诊与住院工作站：挂号、接诊、开单、收费、入出院。
- EMR 电子病历：病程记录、医嘱、护理记录、知情同意。
- 护理站与移动护理：床旁核对、给药、生命体征采集。
- LIS / PACS / 体检系统：检验检查申请、报告浏览、异常值提示。
- 患者管理与随访：患者档案、分组管理、随访计划。
- AI 辅助医疗：辅助问诊、病历生成、知识检索与引用溯源。
非医疗业务的后台（如运营、财务）可以复用通用组件，但不必强制执行第 6 节的医疗业务规则。
设计原则
01 · 信息清晰优先
先保证可读、可扫视、可核对，再考虑装饰。层级靠字号、字重与留白建立，不靠堆积颜色。
02 · 克制的色彩
90% 的界面交给 ink 灰阶，深青 cdx 只用于主操作、链接与关键数值，状态色只表达状态。
03 · 安全与可回溯
高风险操作必须二次确认并留痕；关键数据要能看到来源、时间与修改人。
04 · 一致的操作
同类动作使用同一组件、同一措辞、同一位置。不要让用户在相似页面里重新学习。
05 · 适配高密度
医疗界面天然信息密集。通过紧凑但稳定的间距与表格密度，在有限屏幕内呈现完整上下文。
06 · 无障碍与合规
对比度、键盘操作、触控尺寸、屏幕阅读器标签与隐私脱敏是默认要求，不是可选项。
如何开始
- 先阅读设计规范，确认色彩、排版、组件与医疗业务规则的强制级别。
- 运行
node bin/rundad.js init初始化样式与 token，再用add添加组件。 - 在左侧导航中选择组件，查看 Preview 与 Code 两个标签页，复制完整标记。
- 颜色、字号、圆角、阴影一律引用 token，不写入未定义的颜色值。
- 页面完成后按验收清单逐项核对。
<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>tokens/tailwind.config.js 中的颜色、字体与字号扩展，再引入组件样式，避免 token 被覆盖。版本与维护
RUNDA DS 目前处于 v2.7.4，组件与规范会随业务反馈持续更新。变更记录见 更新日志。
- 新增或修改组件时，必须同步更新
docs/DESIGN.md、docs/COMPONENT-AUDIT.md与tokens/design-tokens.json。 - 组件展示页必须覆盖默认、hover、active、focus、disabled、loading、empty、error 等状态。
- 涉及医疗业务规则的改动，需要在设计规范中补充对应的“必须 / 应当”条目。