EMR 工作台

工作台模式面向临床医生，内容区 padding 20px、模块间距 10px，单屏不滚动。Header 固定展示患者姓名、模态徽章与元信息。

返回组件库

16 · WORKSTATION · EMR 医生工作台模式（§30）

§30.3 · 侧边栏 Logo 中英文规则对比

EMR

英文/缩写：13px / 600 / 0.16em / uppercase

EMR电子病历系统

中文全称：14px / 700 / 0.02em / 不大写

§30.4 · Header 患者主信息条

郑宗范 02003床医保(先) · 男 · 79岁 · 主管: 刘姗姗

住院号1708569 · 入院2017-02-23

§30.5/30.6 · QueryCard 查询卡片 + StatRow 状态统计

查询条件 88

我的患者会诊患者本科患者出院(72h)

就诊科室

主管医生

危 2

重 5

普通 81

§30.2 · 工作台紧凑布局对照（v2.6 已统一）

基础 B 端 (§3.3)

content padding20px

内卡片 gap10px

滚动行为min-height

Logo英文 RUNDA

工作台 (§30.2)

content padding20px（一致）

内卡片 gap10px（一致）

滚动行为overflow:hidden

Logo中文润达医疗

v2.6 起 §3.3 基础 B 端布局的 main-content padding 与卡片 gap 已与工作台规范统一，避免双标准混乱。差异点收敛为 Logo 形式 + 滚动行为 两项。

完整页面参考

EMR电子病历系统

工作台

患者列表

医嘱录入

病历书写

检验报告

诊疗管理

诊断资料

临床路径

系统

系统设置

郑宗范 02003床医保(先) · 男 · 79岁 · 主管: 刘姗姗

住院号 1708569 · 入院 2017-02-23

查询条件 88

我的患者会诊患者本科患者

在院状态

在院出院

就诊科室

呼吸内科

主管医生

全部

患者姓名

输入姓名搜索

危 2 重 5 普通 81

患者列表共 88 人

搜索患者...

筛选

患者床号患者姓名性别年龄缺陷数量入院日期主诊医师

02001床杜德芳女5412017.02.14张先先

02002床郭成成男8712017.02.14张先先

02003床郑宗范男7912017.02.23刘姗姗

02004床王广连男6712017.02.08孙树喜

02005床徐德群男6412017.02.18孙树喜

02006床孟兆苓女7112017.02.04闫春章

显示 1–6 条

‹ 1 2 3 ›

<section id="workstation" class="section">
    <div class="section-title">16 · WORKSTATION · EMR 医生工作台模式（§30）</div>

    <div class="demo-sub">§30.3 · 侧边栏 Logo 中英文规则对比</div>
    <div class="demo-box">
      <div class="flex gap-6">
        <div class="flex-1 border border-ink-100 rounded overflow-hidden">
          <div class="h-14 px-5 flex items-center gap-2.5 border-b border-ink-200">
            <span class="w-2 h-2 rounded-full" style="background:#1D6571"></span>
            <span style="font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#18181B">EMR</span>
          </div>
          <div class="p-3 text-[11px] text-ink-500 font-mono">英文/缩写：13px / 600 / 0.16em / uppercase</div>
        </div>
        <div class="flex-1 border border-ink-100 rounded overflow-hidden">
          <div class="h-14 px-5 flex items-center gap-2.5 border-b border-ink-200">
            <span class="w-2 h-2 rounded-full" style="background:#1D6571"></span>
            <span style="font-size:14px;font-weight:700;letter-spacing:0.02em;color:#18181B">EMR电子病历系统</span>
          </div>
          <div class="p-3 text-[11px] text-ink-500 font-mono">中文全称：14px / 700 / 0.02em / 不大写</div>
        </div>
      </div>
    </div>

    <div class="demo-sub">§30.4 · Header 患者主信息条</div>
    <div class="demo-box">
      <div style="height:56px;background:#fff;border:1px solid #E4E4E7;border-radius:6px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;white-space:nowrap">
        <div style="display:flex;align-items:center;gap:10px;font-size:12px;color:#3F3F46">
          <span style="font-size:14px;font-weight:600;color:#18181B">郑宗范</span>
          <span style="display:inline-flex;padding:2px 6px;border-radius:2px;font-size:10px;font-weight:500;font-family:ui-monospace,monospace;letter-spacing:0.04em;background:#F0F7F8;color:#185058">02003床</span>
          <span style="display:inline-flex;padding:2px 6px;border-radius:2px;font-size:10px;font-weight:500;font-family:ui-monospace,monospace;letter-spacing:0.04em;background:#FEF3C7;color:#92400E">医保(先)</span>
          <span style="color:#A1A1AA">·</span>
          <span>男 · 79岁</span>
          <span style="color:#A1A1AA">·</span>
          <span>主管: 刘姗姗</span>
        </div>
        <div style="display:flex;align-items:center;gap:10px">
          <div style="display:flex;align-items:center;gap:5px;font-size:11px;color:#71717A">
            <span>住院号</span><span style="font-family:ui-monospace,monospace;font-size:11px">1708569</span>
            <span style="color:#D4D4D8">·</span>
            <span>入院</span><span style="font-family:ui-monospace,monospace;font-size:11px">2017-02-23</span>
          </div>
          <div style="width:32px;height:32px;border-radius:50%;background:#F0F7F8;border:1px solid #B0D6DB;display:grid;place-items:center;color:#185058">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-sub">§30.5/30.6 · QueryCard 查询卡片 + StatRow 状态统计</div>
    <div class="demo-box">
      <div style="width:300px;background:#fff;border:1px solid #F4F4F5;border-radius:6px;overflow:hidden">
        <div style="padding:14px 16px;border-bottom:1px solid #E4E4E7;display:flex;align-items:center;justify-content:space-between">
          <span style="font-size:13px;font-weight:600;color:#18181B;display:flex;align-items:center;gap:8px"><span style="display:inline-block;width:3px;height:14px;background:#185058;border-radius:2px"></span>查询条件</span>
          <span style="font-size:11px;font-family:ui-monospace,monospace;font-weight:600;padding:2px 8px;border-radius:2px;background:#F0F7F8;color:#185058">88</span>
        </div>
        <div style="display:flex;border-bottom:1px solid #F4F4F5;padding:0 4px">
          <span style="flex:1;padding:8px 4px;font-size:12px;text-align:center;color:#185058;font-weight:600;border-bottom:2px solid #185058">我的患者</span>
          <span style="flex:1;padding:8px 4px;font-size:12px;text-align:center;color:#71717A;border-bottom:2px solid transparent">会诊患者</span>
          <span style="flex:1;padding:8px 4px;font-size:12px;text-align:center;color:#71717A;border-bottom:2px solid transparent">本科患者</span>
          <span style="flex:1;padding:8px 4px;font-size:12px;text-align:center;color:#71717A;border-bottom:2px solid transparent">出院(72h)</span>
        </div>
        <div style="padding:16px">
          <div style="margin-bottom:12px"><label style="display:block;font-size:12px;font-weight:500;color:#52525B;margin-bottom:4px">就诊科室</label><input style="width:100%;height:32px;padding:0 10px;font-size:13px;border:1px solid #E4E4E7;border-radius:4px" value="呼吸内科"></div>
          <div style="margin-bottom:12px"><label style="display:block;font-size:12px;font-weight:500;color:#52525B;margin-bottom:4px">主管医生</label><input style="width:100%;height:32px;padding:0 10px;font-size:13px;border:1px solid #E4E4E7;border-radius:4px" placeholder="全部"></div>
        </div>
        <div style="padding:12px 16px;border-top:1px solid #F4F4F5;display:flex;gap:16px;background:#FAFAFA">
          <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#52525B"><span style="width:8px;height:8px;border-radius:50%;background:#A8453B"></span>危 <strong style="font-family:ui-monospace,monospace;color:#18181B">2</strong></div>
          <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#52525B"><span style="width:8px;height:8px;border-radius:50%;background:#C28A2C"></span>重 <strong style="font-family:ui-monospace,monospace;color:#18181B">5</strong></div>
          <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#52525B"><span style="width:8px;height:8px;border-radius:50%;background:#3F8F5C"></span>普通 <strong style="font-family:ui-monospace,monospace;color:#18181B">81</strong></div>
        </div>
      </div>
    </div>

    <div class="demo-sub">§30.2 · 工作台紧凑布局对照（v2.6 已统一）</div>
    <div class="demo-box">
      <div class="grid grid-cols-2 gap-4">
        <div class="border border-ink-100 rounded p-4">
          <div class="text-[12px] font-semibold text-ink-700 mb-2">基础 B 端 (§3.3)</div>
          <div class="space-y-1.5 text-[12px]">
            <div class="flex justify-between"><span class="text-ink-600">content padding</span><span class="font-mono text-cdx-700">20px</span></div>
            <div class="flex justify-between"><span class="text-ink-600">内卡片 gap</span><span class="font-mono text-cdx-700">10px</span></div>
            <div class="flex justify-between"><span class="text-ink-600">滚动行为</span><span class="font-mono text-cdx-700">min-height</span></div>
            <div class="flex justify-between"><span class="text-ink-600">Logo</span><span class="font-mono text-cdx-700">英文 RUNDA</span></div>
          </div>
        </div>
        <div class="border rounded p-4" style="border-color:#185058;background:#F0F7F8">
          <div class="text-[12px] font-semibold mb-2" style="color:#185058">工作台 (§30.2)</div>
          <div class="space-y-1.5 text-[12px]">
            <div class="flex justify-between"><span class="text-ink-600">content padding</span><span class="font-mono" style="color:#185058">20px（一致）</span></div>
            <div class="flex justify-between"><span class="text-ink-600">内卡片 gap</span><span class="font-mono" style="color:#185058">10px（一致）</span></div>
            <div class="flex justify-between"><span class="text-ink-600">滚动行为</span><span class="font-mono font-semibold" style="color:#185058">overflow:hidden</span></div>
            <div class="flex justify-between"><span class="text-ink-600">Logo</span><span class="font-mono font-semibold" style="color:#185058">中文 润达医疗</span></div>
          </div>
        </div>
      </div>
      <div class="mt-3 text-[12px] text-ink-500" style="line-height:1.6">
        v2.6 起 §3.3 基础 B 端布局的 <span class="font-mono">main-content padding</span> 与卡片 <span class="font-mono">gap</span> 已与工作台规范统一，避免双标准混乱。差异点收敛为 <strong class="text-ink-700">Logo 形式</strong> + <strong class="text-ink-700">滚动行为</strong> 两项。
      </div>
    </div>

    <div class="demo-sub">完整页面参考</div>
    <div class="demo-box" style="padding:0;overflow:hidden;background:#FAFAFA">
      <div class="flex" style="min-height:430px">
        <!-- 左侧导航 -->
        <div style="width:150px;background:#fff;border-right:1px solid #E4E4E7;padding:12px 0;flex-shrink:0">
          <div class="flex items-center gap-2 px-4 pb-3 mb-2 border-b border-ink-100">
            <span class="w-2 h-2 rounded-full bg-cdx-600"></span>
            <span style="font-size:10px;font-weight:700;color:#18181B">EMR电子病历系统</span>
          </div>
          <div class="px-2 space-y-0.5">
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">工作台</div>
            <div class="demo-side-item is-active px-3 py-1.5 text-[11px] text-cdx-700 bg-cdx-50 rounded font-medium border-l-2 border-cdx-700">患者列表</div>
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">医嘱录入</div>
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">病历书写</div>
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">检验报告</div>
          </div>
          <div class="px-4 pt-3 pb-1 text-[9px] text-ink-400 tracking-[0.12em]">诊疗管理</div>
          <div class="px-2 space-y-0.5">
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">诊断资料</div>
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">临床路径</div>
          </div>
          <div class="px-4 pt-3 pb-1 text-[9px] text-ink-400 tracking-[0.12em]">系统</div>
          <div class="px-2">
            <div class="demo-side-item px-3 py-1.5 text-[11px] text-ink-500 rounded">系统设置</div>
          </div>
        </div>
        <!-- 主内容 -->
        <div class="flex-1 min-w-0">
          <!-- 患者主信息条 -->
          <div class="h-10 bg-white border-b border-ink-100 flex items-center justify-between px-3">
            <div class="flex items-center gap-2" style="font-size:10px;color:#3F3F46">
              <span style="font-size:12px;font-weight:600;color:#18181B">郑宗范</span>
              <span class="px-1.5 py-0.5 rounded-sm" style="font-size:9px;background:#F0F7F8;color:#185058">02003床</span>
              <span class="px-1.5 py-0.5 rounded-sm" style="font-size:9px;background:#FEF3C7;color:#92400E">医保(先)</span>
              <span class="text-ink-300">·</span>
              <span>男 · 79岁</span>
              <span class="text-ink-300">·</span>
              <span>主管: 刘姗姗</span>
            </div>
            <div class="flex items-center gap-2 text-[9px] text-ink-500">
              <span>住院号 <span class="font-mono">1708569</span></span>
              <span class="text-ink-300">·</span>
              <span>入院 <span class="font-mono">2017-02-23</span></span>
              <div class="w-5 h-5 rounded-full bg-cdx-100 flex items-center justify-center">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#185058" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              </div>
            </div>
          </div>
          <div class="flex gap-3 p-3">
            <!-- 查询卡片 -->
            <div style="width:152px;background:#fff;border:1px solid #E4E4E7;border-radius:4px;flex-shrink:0;display:flex;flex-direction:column">
              <div class="px-2.5 py-2 border-b border-ink-100 flex items-center justify-between">
                <span class="text-[10px] font-semibold text-ink-900">查询条件</span>
                <span class="text-[9px] font-semibold px-1.5 py-0.5 rounded-sm bg-cdx-50 text-cdx-700">88</span>
              </div>
              <div class="flex border-b border-ink-50">
                <span class="flex-1 text-center py-1.5 text-[9px] font-semibold text-cdx-700 border-b-2 border-cdx-700">我的患者</span>
                <span class="flex-1 text-center py-1.5 text-[9px] text-ink-500">会诊患者</span>
                <span class="flex-1 text-center py-1.5 text-[9px] text-ink-500">本科患者</span>
              </div>
              <div class="p-2.5 space-y-2">
                <div>
                  <div class="text-[9px] text-ink-500 mb-1">在院状态</div>
                  <div class="flex gap-2 text-[9px] text-ink-600">
                    <label class="checkbox" style="gap:4px"><input type="checkbox" checked><span class="checkbox-box" style="width:11px;height:11px"></span>在院</label>
                    <label class="checkbox" style="gap:4px"><input type="checkbox"><span class="checkbox-box" style="width:11px;height:11px"></span>出院</label>
                  </div>
                </div>
                <div>
                  <div class="text-[9px] text-ink-500 mb-1">就诊科室</div>
                  <div class="border border-ink-200 rounded px-2 py-1 text-[10px] text-ink-800">呼吸内科</div>
                </div>
                <div>
                  <div class="text-[9px] text-ink-500 mb-1">主管医生</div>
                  <div class="border border-ink-200 rounded px-2 py-1 text-[10px] text-ink-400">全部</div>
                </div>
                <div>
                  <div class="text-[9px] text-ink-500 mb-1">患者姓名</div>
                  <div class="border border-ink-200 rounded px-2 py-1 text-[10px] text-ink-400">输入姓名搜索</div>
                </div>
                <div class="flex gap-1.5 pt-0.5">
                  <button class="flex-1 py-1 text-[9px] bg-ink-900 text-white rounded">查询</button>
                  <button class="flex-1 py-1 text-[9px] border border-ink-200 rounded bg-white text-ink-600">重置</button>
                </div>
              </div>
              <div class="mt-auto px-2.5 py-1.5 border-t border-ink-100 bg-ink-50 flex gap-2 text-[9px] text-ink-600">
                <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full" style="background:#A8453B"></span>危 <strong class="font-num">2</strong></span>
                <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full" style="background:#C28A2C"></span>重 <strong class="font-num">5</strong></span>
                <span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full" style="background:#3F8F5C"></span>普通 <strong class="font-num">81</strong></span>
              </div>
            </div>
            <!-- 患者列表 -->
            <div class="flex-1 min-w-0 bg-white border border-ink-100 rounded flex flex-col overflow-hidden">
              <div class="px-2.5 py-2 flex items-center justify-between border-b border-ink-100">
                <div class="flex items-center gap-1.5">
                  <span class="text-[11px] font-semibold text-ink-900">患者列表</span>
                  <span class="text-[9px] text-ink-400">共 88 人</span>
                </div>
                <div class="flex items-center gap-1">
                  <div class="border border-ink-200 rounded px-1.5 py-0.5 text-[9px] text-ink-400">搜索患者...</div>
                  <div class="border border-ink-200 rounded px-1.5 py-0.5 text-[9px] text-ink-600">筛选</div>
                </div>
              </div>
              <div class="overflow-x:auto">
                <div style="min-width:520px">
                  <div class="grid grid-cols-7 gap-0 text-[9px] font-medium text-ink-500 bg-ink-50 px-2 py-1.5 border-b border-ink-100">
                    <span>患者床号</span><span>患者姓名</span><span>性别</span><span>年龄</span><span>缺陷数量</span><span>入院日期</span><span>主诊医师</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-700 px-2 py-1.5 border-b border-ink-50">
                    <span class="font-mono text-ink-600">02001床</span><span>杜德芳</span><span>女</span><span>54</span><span>1</span><span class="font-mono">2017.02.14</span><span>张先先</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-700 px-2 py-1.5 border-b border-ink-50">
                    <span class="font-mono text-ink-600">02002床</span><span>郭成成</span><span>男</span><span>87</span><span>1</span><span class="font-mono">2017.02.14</span><span>张先先</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-900 px-2 py-1.5 border-b border-ink-50 bg-cdx-50" style="border-left:2px solid #185058">
                    <span class="font-mono text-cdx-700 font-semibold">02003床</span><span class="font-semibold">郑宗范</span><span>男</span><span>79</span><span>1</span><span class="font-mono">2017.02.23</span><span>刘姗姗</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-700 px-2 py-1.5 border-b border-ink-50">
                    <span class="font-mono text-ink-600">02004床</span><span>王广连</span><span>男</span><span>67</span><span>1</span><span class="font-mono">2017.02.08</span><span>孙树喜</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-700 px-2 py-1.5 border-b border-ink-50">
                    <span class="font-mono text-ink-600">02005床</span><span>徐德群</span><span>男</span><span>64</span><span>1</span><span class="font-mono">2017.02.18</span><span>孙树喜</span>
                  </div>
                  <div class="demo-list-row grid grid-cols-7 gap-0 text-[9px] text-ink-700 px-2 py-1.5">
                    <span class="font-mono text-ink-600">02006床</span><span>孟兆苓</span><span>女</span><span>71</span><span>1</span><span class="font-mono">2017.02.04</span><span>闫春章</span>
                  </div>
                </div>
              </div>
              <div class="mt-auto px-2.5 py-1.5 border-t border-ink-100 flex items-center justify-between text-[9px] text-ink-500">
                <span>显示 1–6 条</span>
                <div class="flex items-center gap-1">
                  <span class="w-5 h-5 border border-ink-200 rounded grid place-items-center">‹</span>
                  <span class="w-5 h-5 rounded grid place-items-center bg-ink-900 text-white">1</span>
                  <span class="w-5 h-5 border border-ink-200 rounded grid place-items-center">2</span>
                  <span class="w-5 h-5 border border-ink-200 rounded grid place-items-center">3</span>
                  <span class="w-5 h-5 border border-ink-200 rounded grid place-items-center">›</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<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>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。