一、设计基础

1.1 技术栈

Vue 2 + Element UI + SCSS | 目标分辨率：1080p (1920×1080)

1.2 字体规范

字体族：标题 PingFangSC-Medium / 正文 PingFangSC-Regular / 打印 宋体

注意：筛选栏 label 属于正文级别 14px，不是辅助文字 12px。

1.3 CSS 变量 — 背景色

1.4 CSS 变量 — 功能色

1.5 等级色体系

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

病情等级色（通用标签）

护理等级色（skin 系列）

床卡色带（综合管理页专用）

1.6 间距规范

二、页面布局 — 七种布局类型

三大系统（住院/门诊/护理）共归纳出 7 种页面布局类型，新开发界面应先确定属于哪种类型，再套用对应规范。

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

场景：字典维护、模板管理、规则配置 — "搜索+表格+弹窗编辑"的CRUD

类型二：Tab页签页

场景：多功能并列切换

Tab高度 51px / 字号 16px 500 / 选中色 #1890FF / 激活条 全宽 border-bottom 2px solid

类型三：左右分栏页

场景：左侧选择+右侧详情

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

场景：病房管理 — 多患者状态概览

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

场景：批量操作 — 左侧选择多患者，右侧集中录入

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

场景：独立小功能弹窗(二维码/签名) 或 打印预览(iframe)

类型七：侧边导航工作台

场景：多功能工作台 — 护士站、病房管理等需要频繁切换功能模块

导航栏 60px / 背景 --bg-search / 激活态 --color-primary 白字 / 点击切换，禁止hover滑出

布局选型决策表

三、弹出层 — 五种弹出类型

3.1 业务弹窗 (el-dialog)

header 16px bold / body padding 12-16px / footer 主按钮 --color-primary / 可拖拽(v-dialogDrag)

3.2 抽屉面板 (el-drawer)

header 50px高 / 16px bold / 阴影 2px 12px rgba(0,0,0,0.08) / 宽度 300-760px

3.3 轻提示 ($message)

3.4 确认框 ($confirm / $alert)

3.5 角标通知 ($notify)

四、基础组件

4.1 表格

组件选型：字典维护型 → el-table / 业务列表型 → vxe-table@3.7.9 / 禁止原生 <table>

el-table（字典维护型）

表头 --bg-thead + --text-primary / 内容 --text-regular / 斑马纹 --bg-stripe / hover --bg-hover / 边框 --border-light

vxe-table（业务列表型）

全局主题覆盖使 vxe-table 与 HIS-UI 视觉风格一致。统一行高 35px，表头与数据行一致，用 height + line-height 控制，padding 上下归零；.vxe-cell 统一 display:flex; align-items:center 消除表头/数据行布局模型差异。基础配置：border="inner" + stripe + isHover + show-overflow + auto-resize

vxe-table 分组行

通过虚拟行 { _isGroup: true } + :row-class-name 回调实现。分组行样式：背景 --bg-group，文字色 --color-primary，字重 500。

分组行：背景 --bg-group / 文字 --color-primary / 字重 500 — 与表头(--bg-thead/600)和数据行(400)形成三层视觉层次

vxe-table Checkbox 列

<vxe-column type="checkbox" width="34" align="center">，通过 checkbox-config.checkMethod 排除分组行。

vxe-table 内嵌 el-select

表格内编辑组件（如药房切换）使用 #default slot 嵌入 el-select size="mini"。

4.2 按钮

height 30px / border-radius 3px / font-size 14px / 垂直居中用 line-height: 28px

4.3 标签

4.4 文字筛选标签（filter-tag）

用于查询区多选一筛选项，区别于 radio-button 蓝色填充样式，避免与查询按钮撞色。组内紧贴排列（margin-left:-1px 合并边框），组间竖线分隔。

组内 gap:0, margin-left:-1px 合并相邻边框, 首尾圆角 3px, 中间 0 | 组间竖线分隔 1px×16px | z-index 选中态覆盖悬停态

4.4 输入框

height 28-30px / border-radius 3px / padding 0 8px / font-size 14px / focus: border-color --color-primary

五、全局结构

5.1 顶部导航栏

5.2 滚动条

标准滚动条（主区域/表格/列表）：6px宽, 轨道透明, 滑块 rgba(80,79,79,0.2)

大滚动条（目录树/编辑区）：10px宽, 轨道 #d6d6d6, 滑块 #bfbfbf

5.3 目录树

节点 14px / 图标 14×14px / 间距 10px / 选中背景 #e2eaff / 文字溢出省略 / 缩进每级 16-20px

5.4 浮动按钮（侧边）

左侧（门诊）：20px宽, 竖排文字, 靠左贴边, hover展开抽屉

右侧（护理引用）：39×39px圆形, 背景 #43D381, 子按钮 --color-primary 白字

六、医生站标准布局（门诊/住院通用）

门诊医生站和住院医生站共享同一套布局结构，区别仅在左侧患者列表的有无和宽度。整体为顶部导航 + 左侧列表 + 右侧工作区的三段式。

布局结构

┌──────────────────────────────────────────────────────────┐
│ 顶部导航栏（48px, --bg-header #005CAB）                   │
│ logo + 系统名 + 患者横幅 + 用户信息 + 全屏 + 退出       │
├──────────────────────────────────────────────────────────┤
│ Tab页签栏（51px, 白底）                                  │
│ 字号16px/500, 选中色 --color-primary                    │
│ 激活条: 全宽 border-bottom 2px solid --color-primary  │
│ 右侧：功能按钮组（absolute right）                        │
├──────────────────────────────────────────────────────────┤
│ 患者信息栏（姓名/性别/年龄/ID/过敏/费别/GCP标签）       │
├──────────────────────────────────────────────────────────┤
│ 间隔条 6px, background: --bg-gap                          │
├──────────────────────────────────────────────────────────┤
│ Tab内容区（白底, flex:1, overflow:hidden）               │
│ ┌──────────────────────────────────────────────────┐    │
│ │ 筛选栏（32px高, flex横排, mb:4px）                │    │
│ │ select + radio-group + input + 按钮               │    │
│ ├──────────────────────────────────────────────────┤    │
│ │ 数据表格（vxe-table / el-table）                 │    │
│ │ header: 36px, row: 40px, stripe                 │    │
│ │ flex:1, overflow:auto                            │    │
│ ├──────────────────────────────────────────────────┤    │
│ │ 录入区（搜索栏60px + 动态子组件区）              │    │
│ │ border: 1px solid --border-light                 │    │
│ └──────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────┘

注：左侧患者列表为独立的收缩栏组件（PatientLeftBar），
    不属于主布局结构，按需展开/收起。

关键样式值速查

与现有系统的差异对照

医生站布局规范示例

以下为门诊医生站标准布局示例：Tab页签 + 患者信息栏 + 筛选栏 + 医嘱列表（表头固定/表体独立滚动）+ 录入区。点击Tab可切换内容。

七、快速接入

/* App.vue style (非scoped) — 全局层次增强覆盖 */
: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 主题覆盖（字典维护型页面） */
.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 主题覆盖（业务列表型页面） — 统一行高 35px + flex 布局 */
.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-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 { display: flex; align-items: center; line-height: 35px !important; padding: 0 8px !important; }
.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; }
.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); }