HIS-UI设计规范

---

name: HIS-UI设计规范

description: HIS医院信息系统完整UI设计规范：设计基础、页面布局、弹出层、基础组件、全局结构

type: reference

---

HIS-UI设计规范

覆盖系统：住院医生站(Doctws_WEB)、门诊医生站(OutPatient_WEB)、护理文书(NursingDoc_WEB)、住院护士站(NurseStation)

目标分辨率：1080p (1920x1080) 医院标准配置

---

1. 设计基础

1.1 字体规范

字体族

// 标题/强调
font-family: PingFangSC-Medium, PingFang SC;
// 正文
font-family: PingFangSC-Regular, PingFang SC;
// 打印（门诊诊断证明等）
font-family: 宋体;

字号三档

注意：筛选栏 label（如"药房"、"科室"）属于正文级别 14px/400，不是辅助文字。

1.2 CSS变量

背景色

边框色

文字色

功能色

间距变量

1.3 等级色体系

本系统存在三套等级色，用途不同，不可混淆。

病情等级色

用于病情/危重程度标签、状态标记等通用场景：

护理等级色（skin 系列）

用于护理文书、护士站等模块的护理等级标签：

床卡色带

用于病房管理/护士站床卡的左边框+背景色：

注意：三套色值各不相同，分别用于不同场景，不可替换。

1.4 间距规范

区域间距

组件间距

---

2. 页面布局

类型一：查询维护页（最高频）

• 场景：字典维护、模板管理、规则配置 — "搜索+表格+弹窗编辑"的CRUD
• 结构：标题栏 → 搜索区 → 间隔条 → 表格 → 分页
• 标题栏：padding 10px 12px, 16px bold, border-bottom 1px solid --border-light
• 搜索区：background --bg-search, padding 8px 12px, border-bottom 6px solid --bg-gap
• 搜索区背景色规则：
• 上下布局（搜索区贯穿宽度）→ --bg-search 微灰底
• 左右布局（搜索区居左）→ --bg-panel 白底，避免左右底色割裂
• 表格：使用 spec-table 统一样式
• 分页：padding 6px 12px 10px, justify-content flex-end

类型二：Tab页签页

• 场景：多功能并列切换
• Tab栏：高度 51px, 字号 16px/500, 选中色 #1890FF, 非选中色 --text-secondary
• 激活条：全宽 border-bottom 2px solid --color-primary（非居中短条）
• Tab内容区：padding 12px 16px, background --bg-panel
• 表格满铺场景：内容区 padding 可置 0，表格撑满宽度
• 右侧操作区：Tab 栏右侧可放置操作按钮（诊毕/打印/费用补录等），与 Tab 同行 flex 右对齐
• 面板内筛选栏：位于白面板内部，无需 --bg-search 分层，使用 --bg-panel 白底

类型三：左右分栏页

• 场景：左侧选择+右侧详情
• 分隔方式：grid gap 8px，面板间由 --bg-page 底色自然露出形成柔和分隔
• 宽度方案：
• 固定宽度：左 260-380px fixed, 右 calc(100%-左宽)
• 百分比：左 23%, 右 flex:1

类型四：综合管理页（床卡三视图）

• 场景：病房管理 — 多患者状态概览
• 三种视图：大卡(grid 4列)、小卡(grid 7列)、列表(sticky表头)
• 大卡结构：border-left 4px solid(等级色) → 头部(床号+姓名+性别+年龄+等级标签) → 诊断 → 底部标签图标行
• 床位状态：
• 空床：虚线 1px dashed #C0CAD8, 背景 #F4F6F9
• 占床：橙色渐变 linear-gradient(175deg, #FDF5E8, #FFFDF7), 边框 #FFA726
• 包床：绿色渐变 linear-gradient(175deg, #EDFAED, #F8FFF8), 边框 #66BB6A
• 筛选标签：pill形, border-radius 12px, padding 3px 10px, 13px
• 文字筛选标签（filter-tag）：用于查询区多选一筛选项（如全部/门诊/住院、全部/未登记/已登记/已审核），区别于 radio-button 蓝色填充样式，避免与查询按钮撞色
• 默认态：color --text-secondary，border 1px solid --border-normal，无背景填充
• 悬停态：color --text-primary，border-color --border-normal
• 选中态：color --color-primary，background --color-primary-light，border-color --color-primary，font-weight 600，border-radius 3px
• 组间分隔：竖线 width:1px; height:16px; background:--border-normal
• 组内间距：gap 0，紧贴排列，margin-left:-1px 合并相邻边框，首尾圆角 border-radius 3px，中间 0
• 视图切换：按钮组, border 1px solid --border-normal, border-radius 4px
• 床卡护理等级色带：参见 1.3 等级色体系 → 床卡色带

类型五：批量录入页（左树+右表）

• 场景：批量操作 — 左侧选择多患者，右侧集中录入
• 布局：el-col :span="4"(患者树) / el-col :span="20"(录入表格)
• 表格行高：42-54px（使用 el-table，不受 vxe-table 全局 35px 影响；若使用 vxe-table 则需通过 row-config.height 或更高优先级选择器覆盖全局 35px）
• 分隔：border-right 4px solid --bg-gap
• 选中患者行：background --bg-selected

类型六：弹窗工具页 / 打印预览页

• 场景：独立小功能弹窗(二维码/签名确认) 或 打印预览(iframe)
• 弹窗工具页：宽 228-480px, 居中, destroy-on-close
• 打印预览页：左侧类型列表 211px / 右侧 850px / 底部按钮居中

类型七：侧边导航工作台（固定图标栏）

• 场景：多功能工作台 — 需频繁切换多个功能模块

布局选型决策表

---

3. 弹出层

3.1 业务弹窗 (el-dialog)

• 用途：复杂表单或详情展示
• 可拖拽：v-dialogDrag
• header：16px bold, padding 12px 16px, border-bottom 1px solid --border-light
• body：padding 12-16px
• footer：主按钮 --color-primary 白字, padding 10px 16px, border-top, justify-content flex-end, gap 8px
• 宽：默认480px，按场景可调

弹窗内部布局规范

• 整体层级：Header → Body → Footer，禁止无层次堆叠
• Header：背景 --bg-panel, 标题 16px/700/--text-primary
• Body：12-16px 内边距，内部区域通过背景/边框/留白分层
• Footer：按钮右对齐，主按钮 --color-primary，次按钮白底描边

弹窗内容分层

1. 顶部表单区 — 背景 --bg-search, padding 10px 16px, 底边 1px solid --border-light
2. 列表标题区 — 背景 --bg-panel, padding 8px 12px, min-height 40px, 底边 1px solid --border-light, 标题 14px/600
3. 搜索操作区 — 背景 --bg-search, padding 8px 12px, 输入框高度 28px

弹窗内下拉面板

• 层级：必须浮于弹窗正文之上，不得被裁切
• 面板样式：背景 --bg-panel, 边框 1px solid --border-normal, 圆角 4px
• 表头：背景 --bg-thead, 12-14px/600/--text-primary
• 数据行：14px/--text-regular, 斑马纹 --bg-stripe, hover --bg-hover
• 列宽：表头与数据列宽一致，长文本省略

弹窗内双选组件

• 结构：左列表 + 中间移动按钮 + 右列表
• 列表框：边框 1px solid --border-normal, 圆角 4px, 字号 12px
• 选中态：浅蓝背景，禁止浏览器默认黑底
• 交互：点击箭头移动，双击也可移动，不允许重复加入

弹窗核查清单

• [ ] 标题栏 16px/700/12px 16px/底部分隔线
• [ ] body 12-16px 内边距
• [ ] 内容区按背景和边框形成层次
• [ ] 正文/标签/按钮统一 14px，辅助文字 12px
• [ ] 下拉面板无遮挡/裁切
• [ ] 下拉表头/数据行/hover/斑马纹统一
• [ ] 双选组件无溢出/错位/默认黑框
• [ ] checkbox/radio 组与 label 同行高

3.2 抽屉面板

• el-drawer（字典维护型）：患者列表、导航菜单、模板引用
• header：50px高, 16px bold, border-bottom 1px solid --border-light
• 侧边阴影：box-shadow: 2px 0 12px rgba(0,0,0,0.08)
• 宽度：依场景 300-760px
• 自定义侧边栏（业务列表型）：历史处方、请药记录、药典查询
• 使用自定义 div + CSS transition 实现（非 el-drawer）
• header：50px高, 16px bold, border-bottom 1px solid --border-light
• 侧边阴影：box-shadow: 2px 0 12px rgba(0,0,0,0.08)
• 宽度：依场景 300-1480px
• 遮罩层：position fixed, background rgba(0,0,0,0.1), transition opacity 0.22s

选型：字典维护型用 el-drawer，业务列表型用自定义侧边栏。参见 4.1 组件选型。

3.3 轻提示 ($message)

• 显示时间：3秒自动关闭，可手动关闭
• z-index：低于 dialog，不遮挡弹窗
• 四种类型：

3.4 确认框 ($confirm / $alert)

• $confirm：确认型操作，有"确定"和"取消"
• $alert：纯信息告知，只有"确定"
• 宽：380px
• 按钮：confirmButtonText="确定", cancelButtonText="取消"
• header：padding 14px 16px, 含警告图标
• body：padding 0 16px 14px

3.5 角标通知 ($notify)

• 位置：top-right（默认）
• 持续时间：4500ms，可手动关闭
• 结构：title + message
• 左边框色：success #52C41A / error #F5222D / warning #FAAD14 / info #1890FF

---

4. 基础组件

4.1 表格

组件选型

禁止使用原生 <table>。所有数据表格必须使用 el-table 或 vxe-table。

spec-table（el-table 场景）

• thead：background --bg-thead, padding 6-8px, font-weight 600, color --text-primary
• td：padding 5-8px, border 1px solid --border-light, color --text-regular
• 斑马纹：偶数行 background --bg-stripe
• hover：background --bg-hover
• th border：1px solid --border-light

重要：表头用 --text-primary(0.85)，内容用 --text-regular(0.65)。两种表格组件已通过全局 CSS 自动设置，无需手动指定。

表格分组行

• 背景：--bg-group（与表头 --bg-thead、隔行 --bg-stripe 均有差距）
• 文字色：--color-primary（蓝色，与表头黑色、数据行灰色形成三层）
• 字重：500（比表头 600 轻，比数据行 400 重）
• 字号：14px
• hover：分组行不响应，仅数据行响应
• 辅助信息：<small>, 12px/--text-secondary/400
• 操作按钮：margin-left 12px, 文本按钮样式（无边框、主题色/危险色文字）

vxe-table（业务列表场景）

版本：vxe-table@3.7.9（Vue 2 兼容），配合 xe-utils

全局主题覆盖（App.vue 非 scoped）：

/* 统一行高：表头与数据行均为 35px，用 height + line-height 控制，padding 上下归零 */
.vxe-table--render-default .vxe-header--column,
.vxe-table--render-default .vxe-body--column {
  height: 35px !important;
  line-height: 35px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  vertical-align: middle !important;
}
.vxe-table .vxe-header--column { background: var(--bg-thead); color: var(--text-primary); font-weight: 600; font-size: 14px; }
.vxe-table .vxe-body--column { font-size: 14px; color: var(--text-regular); }
.vxe-table .vxe-body--row.row--stripe .vxe-body--column { background: var(--bg-stripe); }
.vxe-table .vxe-body--row.row--hover .vxe-body--column { background: var(--bg-hover); }
.vxe-table--border-line { border-color: var(--border-light); }
/* .vxe-cell 统一 flex 布局，消除 show-overflow 导致的表头/数据行布局模型不一致 */
.vxe-table .vxe-cell { display: flex; align-items: center; line-height: 35px !important; padding: 0 8px !important; }
.vxe-table .vxe-cell--checkbox { overflow: visible; }
.vxe-table .vxe-empty-text { color: var(--text-placeholder); padding: 18px 10px; }
.vxe-table .row--group .vxe-body--column { background: var(--bg-group) !important; color: var(--color-primary); font-weight: 500; font-size: 14px; }

基础配置：

<vxe-table border="inner" stripe :row-config="{ isHover: true }" :data="tableData"
  empty-text="暂无数据" show-overflow auto-resize>

分组行：

• 在数据数组前插入 { _isGroup: true, _groupLabel: '...' } 虚拟行
• 通过 :row-class-name 回调返回 'row--group' 类名
• 列通过 #default slot 判断 _isGroup 渲染分组标签
• 样式已包含在上方全局 CSS 块中（.row--group 规则）

Checkbox 列：

<vxe-column type="checkbox" width="34" align="center"></vxe-column>

• 通过 checkbox-config.checkMethod 排除分组行
• 通过 @checkbox-change / @checkbox-all 事件同步状态

Checkbox 主题覆盖（与 vxe-table 默认皮肤同优先级）：

.vxe-table--render-default .vxe-cell--checkbox .vxe-checkbox--icon { font-size: 1.1em; color: var(--text-secondary); }
.vxe-table--render-default .vxe-header--column .vxe-cell--checkbox .vxe-checkbox--icon { color: var(--text-primary); }
.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon { color: var(--color-primary); }
.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon { color: var(--color-primary); }

表格内嵌 el-select：

<vxe-column field="pharmacy" title="药房切换" width="124">
  <template #default="{ row }">
    <el-select size="mini" :value="row.pharmacy" @change="onChange(row.id, $event)">
      <el-option v-for="p in list" :key="p" :label="p" :value="p"></el-option>
    </el-select>
  </template>
</vxe-column>

4.2 按钮

• 通用：height 30px, border-radius 3px, font-size 14px
• primary：background --color-primary, color #fff, hover #1171D6
• default：background #fff, color --text-regular, border --border-normal
• danger：transparent, color --color-danger, border --color-danger, hover bg --color-danger color #fff

垂直居中

用 line-height 控制垂直居中，不用 padding-top/bottom（中文汉字渲染偏上问题）。

.el-button { font-size: 14px; line-height: 28px; padding: 0 15px; }
.el-button--mini, .el-button--small { font-size: 14px; line-height: 28px; padding: 0 15px; }
.el-button--mini.is-circle, .el-button--small.is-circle { padding: 0; }
.el-button--text { padding: 0; line-height: 28px; }
.el-table .el-button--text { font-size: 13px; padding: 0; line-height: 24px; }

按钮间距

4.3 标签 (tag)

• 通用：padding 1-6px, border-radius 3px, font-size 11-12px, font-weight 500

4.4 输入框 (demo-input)

• height 30px, border-radius 3px, border 1px solid --border-normal, padding 0 8px, font-size 14px
• focus: border-color --color-primary

4.5 下拉选择 (demo-select)

• height 30px, border-radius 3px, border 1px solid --border-normal, padding 0 24px 0 8px
• appearance none + 自定义SVG箭头图标

4.6 分页 (demo-pagination)

• page-btn: min-width 28px, height 28px, border-radius 3px
• active: background --color-primary, color #fff
• page-info: color --text-secondary, margin-right 8px

---

5. 全局结构

5.1 顶部导航栏 (Header)

布局结构

.header (48px flex容器)
├── .header-left (flex:1, 左对齐)
│   ├── .header-left-img — logo 30×30px
│   ├── .header-left-name — 系统名称
│   └── BannerSmall — 患者/通知横幅
└── .header-right (右对齐)
    └── .header-user-con (flex行内排列)
        ├── "欢迎您，" 文字
        ├── el-dropdown — 用户名(修改密码/退出)
        ├── el-select — 科室切换下拉
        ├── .btn-fullscreen — 全屏切换
        └── .backIndex — 返回首页

色彩与尺寸

组件样式

• 用户名：右边框 1px solid #e9e9e9, padding-right 16px
• 科室下拉：背景透明、无边框、白色文字, 动态宽度 (14×字数+10)px
• 全屏按钮：鼠标手型, 图标垂直居中
• 下拉菜单项：opacity 0.65

5.2 滚动条 (Scrollbar)

标准滚动条

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(80,79,79,0.2); }

• 适用：页面主区域、表格、弹窗内列表、侧边栏
• 轨道：透明（与容器背景融合）

大滚动条

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #d6d6d6; border-radius: 2px; }
::-webkit-scrollbar-thumb { background: #bfbfbf; border-radius: 10px; }
::-webkit-scrollbar-corner { background: #efefef; }

• 适用：目录树、文书编辑区（需要更明显的拖拽手柄）

特殊处理

• 报表查询页：隐藏滚动条
• 打印区域：5px 宽或隐藏

5.3 目录树 (Tree)

• 目录树占左侧 23% 或固定 260-380px
• 树容器高度跟随内容区，内部使用大滚动条
• 选中节点后右侧内容区联动切换

5.4 浮动按钮（侧边）

左侧浮动按钮（门诊）

• 文字竖排（writing-mode: vertical-rl）
• 靠左贴边，hover 展开为抽屉面板

右侧浮动按钮（护理引用）

• 主按钮：39×39px, 圆形(50%), 背景 #43D381, fixed right:8px bottom:100px
• 子按钮：39-46px, 圆形, hover --color-primary 白字
• 展开区域：164×164px, 右侧向上展开

---

6. 医生站布局规范

覆盖门诊医生站(OutPatient_WEB)、住院医生站(Doctws_WEB)

布局结构：顶部导航 → Tab页签栏 → 患者信息栏 → 间隔条 → 内容区（筛选栏+医嘱列表+录入区）

6.1 患者信息栏

位于 Tab 栏下方、内容区上方，固定不滚动。

左侧头像

第一行：姓名+基本信息

• 布局：line-height 26px, display flex, align-items center
• 姓名：16px / 700 / --text-primary，右边距 8px
• 身份证图标：cursor pointer，margin-top -3px
• 性别/ID：14px / 400 / --text-secondary
• ID 标签：font-weight 700, color --text-primary
• 过敏标签：过敏: font-weight 700, color --text-primary；过敏值 --color-success

第二行：标签区

• 布局：display flex, align-items center
• 标签样式：padding 1px 6px, border-radius 3px, font-size 14px, font-weight 500
• GCP 标签：background #F6FFED, color --color-success
• 医保标签：background --color-primary-light, color --color-primary
• 慢特标签：background #FFFBE6, color --color-warning, cursor pointer
• 费别/身份文字：font-weight 700 / color --text-primary（标签名），值紧跟其后
• 标签间右边距：10px

6.2 间隔条

位于患者信息栏与内容区之间，明确分隔上下区域。

6.3 筛选栏

位于内容区顶部，面板内白底，无搜索区分层背景。

门诊版筛选栏

住院版筛选栏

6.4 医嘱列表

表格结构

• 表头表体分离：表头独立 table（不滚动），表体独立 div（overflow-y:auto 滚动）
• 列宽同步：通过 colgroup + table-layout:fixed 保证表头与表体列宽一致
• 表头固定：表头始终可见，滚动条仅出现在表体区域

表格尺寸

适用范围：以下尺寸仅限自定义表头表体分离表格（表头独立 <table>，表体独立滚动 <div>）。vxe-table 统一使用 35px 行高，见 4.1 节。

表格样式

门诊医嘱列表列结构

住院医嘱列表列结构

医嘱内容列子列布局（门诊药品行）

药品行在单个单元格内以 flex 行内嵌套多个子列：

<div style="display:flex; align-items:center;">
  <span style="flex:auto; font-weight:700; color:#000;">药名</span>
  <span style="width:120px; color:var(--text-secondary); padding-right:8px;">规格</span>
  <span style="width:45px; text-align:center;">剂量</span>
  <span style="width:65px; text-align:center;">频次</span>
  <span style="width:65px; text-align:center;">用法</span>
  <span style="width:52px; text-align:center;">天数</span>
</div>

非药品行仅显示名称加粗：

<span style="font-weight:700; color:#000;">检查/检验名称</span>

特殊标签（药品名后内嵌）

标签样式：display:inline-block, padding 0 4px, border-radius 3px, font-size 11px, font-weight 500

状态展示

状态列使用文字色标，不使用背景标签：

操作按钮

操作按钮随状态变化，使用文本链接样式（el-button type="text"）：

按钮样式：font-size 14px, color --color-primary（主操作）/ --color-danger（危险操作），无背景无边框

行背景样式

6.5 医嘱录入区

位于医嘱列表下方，固定不滚动。

门诊录入区

住院录入区

• 更复杂的录入面板，含药品搜索、用法用量、频次等表单
• 录入区高度可变，通常 60-120px

---

7. 快速接入

最小可用模板。表格组件详细规范见 第 4.1 节#41-表格。

/* App.vue style (非scoped) — CSS 变量 + el-table 最小覆盖 */
:root {
  --bg-page: #F2F4F8;
  --bg-search: #F0F3F8;
  --bg-thead: #D8DEE9;
  --bg-group: #E8ECF4;
  --bg-stripe: #F5F7FA;
  --bg-hover: #D0E2F5;
  --bg-selected: #C9DCF2;
  --bg-gap: #D8DEE9;
  --border-light: #E2E6EC;
  --border-normal: #C8CDD6;
}
body { background: var(--bg-page); }

/* el-table（字典维护型页面，完整规范见 4.1 spec-table） */
.el-table th.el-table__cell { background: var(--bg-thead) !important; }
.el-table--striped .el-table__body tr.el-table__row--striped td { background: var(--bg-stripe) !important; }

/* vxe-table（业务列表型页面，完整规范见 4.1 vxe-table） */
/* 注意：行高统一 35px + .vxe-cell 统一 flex 布局，不要用 padding 撑高 */
.vxe-table--render-default .vxe-header--column,
.vxe-table--render-default .vxe-body--column {
  height: 35px !important;
  line-height: 35px !important;
  padding: 0 8px !important;
  vertical-align: middle !important;
}
.vxe-table .vxe-cell { display: flex; align-items: center; line-height: 35px !important; padding: 0 8px !important; }
.vxe-table .vxe-header--column { background: var(--bg-thead); color: var(--text-primary); font-weight: 600; font-size: 14px; }
.vxe-table .vxe-body--column { font-size: 14px; color: var(--text-regular); }
.vxe-table .vxe-body--row.row--stripe .vxe-body--column { background: var(--bg-stripe); }
.vxe-table .vxe-body--row.row--hover .vxe-body--column { background: var(--bg-hover); }
.vxe-table--border-line { border-color: var(--border-light); }
.vxe-table .vxe-cell--checkbox { overflow: visible; }
.vxe-table .row--group .vxe-body--column { background: var(--bg-group) !important; color: var(--color-primary); font-weight: 500; font-size: 14px; }

---

8. 附录

8.1 不需要改的部分

• 顶部导航：#005CAB 医疗蓝品牌色不变
• 功能色：红/绿/蓝/橙保持高饱和
• 字号：16/14/12 三档不变
• 打印样式：通过 @media print 单独控制

8.2 常见错误

• [ ] 业务列表型页面使用原生 <table> — 应使用 vxe-table
• [ ] 字典维护型页面使用 vxe-table — 应使用 el-table（过度设计）
• [ ] 自定义侧边栏使用 el-drawer — 业务列表型应使用自定义 div 侧边栏
• [ ] 在 scoped CSS 中覆盖 el-dialog / el-drawer 样式 — 这些组件 append-to-body，scoped 无效，应放 App.vue 非 scoped
• [ ] 原生 <table> 未显式设置 td color — 会导致内容文字过深（已禁止原生 table，此条仅限规范文档 HTML demo）
• [ ] CSS 硬编码色值 — 应使用 CSS 变量（--bg-、--border-、--text-、--color-）
• [ ] 按钮用 padding-top/bottom 撑高 — 中文汉字渲染偏上，应用 line-height 控制居中
• [ ] 增量构建 --no-clean 跳过 — 旧 CSS 缓存残留导致样式不生效，应 clean build

8.3 组件选型速查