yelan 3cb174ce0c refactor(文书预览): 抽出统一的文书纸与预览弹窗,消除五处重复渲染
预览原先在 5 个地方各写一遍(文书库预览、编辑器签署预览、发起签署弹窗预览、
工作台在线预览、工作台文书区),基础排版已经分叉:表格边框 #52646e 与 #c8d7dd
两套色、单元格内边距 5px 7px 与 5px 9px 两个值、只有两处带宋体。
原型本身是「一处渲染(.paper + fillDocHtml)、两种外框」,这次按那个形状收口。

新增
- utils/document-paper.ts:基础排版的**唯一一份** CSS(p / h1-h4 / 表格 / 宋体)。
  运行期幂等注入 head —— 因为同一份纸有两条渲染通道:v-html(吃全局样式)与
  iframe srcdoc(隔离模板自带 style,只能吃字符串),各写一份必然漂移。
- components/document/DocumentPaper.vue:唯一的纸渲染器。
  signing / raw 两模式、interactive、取值还原、☑☐ 就地切换、签名位请求采集、
  填写项与勾选上报、getDocumentElement()(供导出 PDF)。
- components/document/DocumentPreviewDialog.vue:唯一的预览外框。
  标题/副标题/徽标、可选页签、加载与错误态、纸舞台(浅色卡片 / 深灰 A4)、
  #footer 与 #empty 插槽。
- styles/document-preview.css:页脚按钮等**插槽内容**要用的类。
  插槽节点带的是父组件 scope id,弹窗的 scoped 样式命中不了 —— 与
  signing-document.css 同一类问题,同一套解法。

迁移
- 文书库预览、编辑器签署预览、发起签署弹窗预览、工作台在线预览全部改走统一组件;
  SigningDocumentInteractive 的纸换成 DocumentPaper,只留任务外壳
  (横幅 / 作废章 / 填写项进度)。
- 删除四处基础排版副本;SimSun 与 :deep(table) 现在各只剩一处。

行为保持
- 文书库预览仍是两个页签(文书内容走 iframe 隔离、签署预览走 v-html),
  没有正文时仍给占位版式(占位符写成 {患者姓名} 原始形态,不预填示例值)。
- 工作台预览的深灰 A4 舞台、页脚说明与两个出口按钮不变。
- 作废章原先是纸的兄弟节点、DOM 顺序在前,纸改成自带白底后会被盖住 ——
  给章补 z-index,并在探针里加命中测试锁死。

验证
- 新增 probe-doc-paper.cjs:31/31 PASS。核心是**计算样式**断言
  (边框色 / 内边距 / 宋体 / border-collapse),并断言文书库预览与编辑器预览
  两份纸的样式**逐项一致** —— 只看 DOM 存在证明不了"只有一份排版"。
- 回归:probe-new-task 104/104、probe-workbench-lib 46/46(新增作废章命中测试)、
  probe-dept-confirm 36/36、probe-method-domain 14/14、probe-report-analytics 92/92。
- vue-tsc 与 eslint 0 错。

净减 888 行(309 增 / 1197 删)。
2026-09-26 20:56:02 +08:00

medical-sign

医签通(医疗知情同意电子签署平台)前端项目。

当前状态

已完成两个 Vite 应用的基础初始化、ESLint + Prettier 工程化配置,以及第一版业务页面骨架:

  • clinical-web:医护端布局、工作台、签署任务、文书库、报表和设置页面;
  • patient-h5:签署入口、文书确认、签署人信息、手写签名和结果页面;
  • 默认仍使用演示数据,但医护端已按 MEDISIGN 接口文档接入登录、患者/就诊、模板、签署任务、文件产物、投递、用户组织和模板权限等真实接口;患者 H5 已接入一次性 Token 消费和签名上传请求;
  • packages 目录暂时保留,等接口和公共类型稳定后再接入共享包。

项目定位

医签通用于管理医疗知情同意文书的生成、签署、回传、校验和审计,核心对象是:

患者 + 就诊 + 医嘱/项目 + 签署任务 + 文书版本 + 签署证据

目标流程:

医生在电子病历中发起
→ 患者或家属通过手机 H5 / 现场签字板签署
→ 医签通保存签署证据
→ 结果回传电子病历
→ 收费、检查或治疗前校验

目录结构

medical-sign/
├─ clinical-web/       医护端、电子病历嵌入端和管理功能
├─ patient-h5/         患者/家属手机签署端
└─ packages/
   ├─ api-client/      公共接口客户端
   └─ types/           公共 TypeScript 类型

前端规划

clinical-web

面向医生、护士和系统管理人员,电脑端优先,后续可适配医院平板。

计划包含:

  • 电子病历嵌入入口;
  • 患者、就诊和医嘱关联;
  • 签署任务创建和查询;
  • 手机签署和签字板签署;
  • 文书模板、版本、权限和报表;
  • 签署结果回传及异常处理。

patient-h5

面向患者和家属的手机网页,不是完整的移动版电子病历。

计划包含:

  • 短信/二维码打开;
  • 身份和签署人关系确认;
  • 阅读知情同意文书;
  • 勾选同意/不同意项目;
  • 手写签名和提交;
  • 成功、过期、拒签和异常状态展示。

packages

存放两个前端共同使用的类型、接口和基础逻辑,不单独部署。

技术栈规划

  • 医护端:Vue 3 + TypeScript + Vite + Vue Router + Pinia + Element Plus + Axios;
  • 患者端:Vue 3 + TypeScript + Vite + Vue Router + Axios,移动端先使用原生 Canvas 完成签名演示;
  • 接口数据:先通过 Axios 封装请求,接口稳定后再评估 OpenAPI 类型生成;
  • 服务端数据:医护端后续再评估 TanStack Vue Query;
  • 测试:待最小业务闭环稳定后再补充 Vitest + Playwright。

开发原则

  • 签署任务必须尽量关联具体就诊和医嘱/项目;
  • 解释医生、实际签署人和协助操作人员需要分别记录;
  • 术中新增处置应创建追加签署任务,不修改已签署文书;
  • 文书版本、签署时间、签署渠道和文档哈希必须可追溯;
  • 前端不负责最终权限和签署有效性判断,后端必须重新校验;
  • 患者 H5 不在 URL 中暴露身份证号、完整病历等敏感信息。

构建与部署规划

两个应用分别构建为 dist:

clinical-web/dist/  → 医护端网页
patient-h5/dist/    → 患者手机签署网页

packages 中被使用的代码会在构建时打包进对应应用。生产环境不需要部署 node_modules 或 packages 源码。

两个应用的构建资源名都会包含构建 ID 和内容哈希。构建 ID 默认使用当前毫秒时间戳,确保连续发布不会复用同名 JS/CSS;CI 可通过 BUILD_ID(例如流水线编号或提交短 SHA)显式指定。生产 Nginx 应对 index.html 使用 Cache-Control: no-cache,对带构建 ID 的 /assets/ 文件使用长期缓存。

医护端通常部署在医院内网;患者 H5 如果需要院外访问,应通过医院安全网关、DMZ 或反向代理提供服务。

后续工作

  1. 用真实调研结果校准页面字段、状态和角色权限;
  2. 完成“医护端发起 → 患者 H5 签署 → 结果回传”的最小闭环;
  3. 再接入 packages 中的公共类型和接口客户端;
  4. 验证电子病历 iframe、单点登录和签字板调用;
  5. 补充收费拦截、动态补签和急诊例外流程。
S
Description
No description provided
Readme
4.4 MiB
Languages
Vue 55.2%
TypeScript 39.4%
JavaScript 3.5%
CSS 1.7%
HTML 0.2%