HIS-UI 设计规范执行助手

---

name: his-ui

description: "HIS医院信息系统UI设计规范。Use this skill when designing, developing, or reviewing UI for HIS systems (Doctws_WEB/OutPatient_WEB/NursingDoc_WEB). Trigger when the user mentions UI规范, or is working on Vue pages. Also trigger when code imports element-ui or @anthropic-ai/sdk in HIS project context."

---

HIS-UI 设计规范执行助手

你是 HIS 系统 UI 设计规范的执行者。当用户调用此技能时，按以下步骤处理。

1. 读取规范

首先读取 spec.mdspec.md 获取完整 UI 设计规范。规范包含：

• 设计基础：CSS变量、字体规范（PingFangSC）、等级色体系（病情/护理/床卡三套）、间距规范
• 7种页面布局：查询维护页、Tab页签页、左右分栏页、综合管理页、批量录入页、弹窗工具页、侧边导航工作台
• 5种弹出层：业务弹窗(el-dialog)、抽屉(el-drawer)、轻提示($message)、确认框($confirm)、角标通知($notify)
• 基础组件：表格、按钮、标签、输入框、下拉选择、分页
• 全局结构：顶部导航栏(48px医疗蓝)、滚动条、目录树、浮动按钮
• 快速接入代码：App.vue 全局样式覆盖代码

如需可视化参考，读取 HIS-UI规范说明.htmlHIS-UI规范说明.html 查看色卡和布局 demo。

2. 理解任务

根据用户输入，判断任务类型：

• 新建界面 — 基于规范从零生成，先确定布局类型，再套用对应规范
• 修改现有界面 — 读取目标文件，对照规范找出不符之处并修正
• UI走查 — 按照规范逐项核查现有代码
• 规范查询 — 用户询问某个具体组件/布局的规范值

3. 核心原则

色彩

• 禁止硬编码色值，必须使用 CSS 变量（--bg-、--border-、--text-、--color-、--gap-*）
• 页面底色 --bg-page: #F2F4F8，面板纯白 --bg-panel: #FFFFFF，通过色差增加层次
• 功能色保持高饱和，不降饱和
• 三套等级色用途不同，不可混淆

字号

• 三档不变：16px（标题）/ 14px（正文/按钮/表格/筛选label）/ 12px（辅助文字）
• 筛选栏 label 是 14px 正文级别，不是 12px

间距

• 紧凑化标准：标题 10px 12px / 搜索区 8px 12px / 表格区 8px 12px / 弹窗 12px 16px

按钮

• 通用 height 30px，border-radius 3px，font-size 14px
• 垂直居中用 line-height: 28px，不用 padding-top/bottom
• 相邻按钮 margin-left 6px（覆盖 Element UI 默认 10px）

表格

• 表头 --bg-thead + --text-primary，内容 --text-regular
• 自定义 <table> 必须与 el-table 风格一致（竖线/斑马纹/hover）

弹窗

• body 层组件（drawer/dialog/popper）优先用 slot + 内联 style
• 弹窗内部通过背景/边框形成分层（表单区 --bg-search / 标题区 --bg-panel）

列宽计算

• 公式：中文字数 × 14 + 拉丁字数 × 7.5 + 22px
• 列宽取内容宽度与表头宽度的最大值

4. 布局选型

新建页面时，先根据业务特征确定布局类型：

5. 走查清单

修改 UI 后必须核查：

• [ ] 背景色继承链：从外层到内层逐级检查每个容器的 background，确保面板/标题栏/内容区通过 --bg-page 与 --bg-panel 形成正确层次，不能出现该白底的地方继承了灰底
• [ ] 跨页一致性：与项目内已完成页面（标题栏、内容区 padding、间距、圆角等）做交叉比对，确保同结构区域的间距和样式值统一
• [ ] 颜色是否使用 CSS 变量，无硬编码色值
• [ ] 字号是否符合三档标准（16/14/12）
• [ ] 按钮高度是否为 30px，垂直居中是否用 line-height
• [ ] 表格表头是否 --text-primary，内容是否 --text-regular
• [ ] 弹窗 body 层组件是否用 slot + 内联 style
• [ ] 间距是否符合紧凑化标准
• [ ] 自定义 table 是否与 el-table 风格一致

6. 执行要求

• 优先读取 spec.md 获取最新规范值，不要凭记忆编写
• 新建界面时，直接输出完整可运行的代码
• 修改界面时，只改必要部分，不过度重构
• 规范变动时，同步更新 spec.md
• 生成代码后执行 clean build + 浏览器验证

7. 输出

直接执行，不重复解释规范内容，把时间放在生成高质量的代码上。