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
parent 8c70f01e2e
commit 3cb174ce0c
10 changed files with 1294 additions and 1202 deletions
@@ -0,0 +1,343 @@
+<script setup lang="ts">
+/**
+ * 文书纸：把一份文书正文按「签署态」渲染出来 —— **全项目唯一一处**。
+ *
+ * 为什么必须只有一个：同一份纸会出现在签署工作台、文书库预览、编辑器签署预览、
+ * 发起签署弹窗的文档预览、记录详情、以及导出 PDF 的截图源里。改版前每处各写一遍
+ * 基础排版，实测已经分叉（表格边框两套色、单元格内边距两套值、宋体只有两处有）。
+ * 版式一旦不一致，"预览看到的"和"签署时看到的"就不再是同一份东西，
+ * 而这类偏差不会报错，只会让人对不上。
+ *
+ * 组件只负责「纸」本身（排版 + 取值 + 交互 + 上报），不负责外框：
+ * 弹窗壳见 components/document/DocumentPreviewDialog.vue，
+ * 任务态外壳（横幅 / 页脚进度 / 作废章）见 components/signing/SigningDocumentInteractive.vue。
+ */
+import { computed, onMounted, ref, watch } from 'vue'
+
+import type { SigningAnswers } from '@/api/workbench/types'
+import {
+  applyAnswerToFieldHost,
+  applySelectedItemsToRoot,
+  applySignatureToRoot,
+  buildSigningDocumentHtml,
+  collectSelectedItemsFromRoot,
+  describeFieldProgress,
+  OPTION_TICK_SELECTOR,
+  readAnswersFromRoot,
+  SIGNATURE_ACTION_SELECTOR,
+  toggleOptionAt,
+  type SigningDocumentData,
+  type SigningFieldProgress,
+  type SigningSignatureRequest,
+} from '@/utils/signing-document'
+import { buildPaperSrcDoc, ensureDocumentPaperStyle } from '@/utils/document-paper'
+
+const props = withDefaults(
+  defineProps<{
+    /** 文书正文（模板定稿 / 任务固化快照） */
+    contentHtml: string
+    /**
+     * 渲染模式。
+     * - `signing`（默认）：按签署态渲染（占位符回填、勾选项交互化、签名域）
+     * - `raw`：原样展示定稿（iframe 隔离模板自带的 `<style>`），仅文书库的「文书内容」页签用
+     */
+    mode?: 'signing' | 'raw'
+    /** 回填上下文：患者信息 / 签名 / 勾选 / 已填取值 */
+    data?: SigningDocumentData
+    /** 填写项可否改动、签名位可否点击采集 */
+    interactive?: boolean
+    /**
+     * 签名位是否渲染成可点入口。
+     * 默认跟随 `interactive`；单独一个开关是因为「静态预览」也是 interactive 的
+     * （科室能试勾选），但那里没有事件宿主，渲染成可点按钮就是骗人。
+     */
+    signatureActionable?: boolean
+    /** 已固化的勾选结果（存量勾选表） */
+    selectedItems?: string[]
+    /** 已固化的填写项取值 */
+    fieldAnswers?: SigningAnswers
+    /** 已固化的主签名图 */
+    signatureDataUrl?: string
+    /** 本次会话刚采到、还没提交的签名图（key 是字段键） */
+    signatureInjections?: SigningAnswers
+    /**
+     * 纸的盒子形态：
+     * - `plain`（默认）：只有排版与白底，内边距/圆角/阴影由调用方给（工作台的外壳自己带）
+     * - `card`：白纸 + 内边距 + 圆角 + 阴影，预览弹窗用
+     */
+    variant?: 'plain' | 'card'
+  }>(),
+  {
+    mode: 'signing',
+    data: () => ({}),
+    interactive: false,
+    signatureActionable: undefined,
+    selectedItems: () => [],
+    fieldAnswers: () => ({}),
+    signatureDataUrl: undefined,
+    signatureInjections: () => ({}),
+    variant: 'plain',
+  },
+)
+
+const emit = defineEmits<{
+  selectionChange: [items: string[]]
+  fieldChange: [answers: SigningAnswers, progress: SigningFieldProgress]
+  /** 请求采集某个签名位，由调用方打开签字板并把结果回灌到 signatureInjections */
+  signatureRequest: [request: SigningSignatureRequest]
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+
+/**
+ * 基础排版注入放在 setup 期而不是 onMounted：
+ * onMounted 时首次 DOM 已经 patch 完，会有一帧"纸没有排版"的闪烁。
+ * 注入是幂等的，早调无害。
+ */
+ensureDocumentPaperStyle()
+
+/** 默认跟随 interactive：单独传才算覆盖 */
+const actionable = computed(() => props.signatureActionable ?? props.interactive)
+
+/**
+ * 签署态 HTML。
+ * 只挑渲染真正需要的字段显式映射，不直接透传整个对象：
+ * 渲染数据契约与业务对象是两回事，哪天字段改名也不会静默丢取值。
+ */
+const processedHtml = computed(() =>
+  buildSigningDocumentHtml(props.contentHtml, props.data, props.interactive, {
+    signatureActionable: actionable.value,
+  }),
+)
+
+/** raw 模式的 iframe 文档（自带完整版式的正文原样返回） */
+const rawSrcDoc = computed(() => buildPaperSrcDoc(props.contentHtml))
+
+/**
+ * 从渲染后的 DOM 读回填写项取值与勾选清单并上报。
+ * 生成 HTML 时已把取值写成属性/文本，这里再按取值同步一次 DOM 状态，
+ * 保证「签完再打开时填写项/勾选还在」这件事不依赖序列化细节。
+ */
+function syncFromDom() {
+  const container = containerRef.value
+
+  if (!container) {
+    return
+  }
+
+  const answers = readAnswersFromRoot(container)
+  const progress = describeFieldProgress(container, answers)
+  const selected = collectSelectedItemsFromRoot(container)
+
+  emit('fieldChange', { ...answers }, { ...progress })
+  emit('selectionChange', [...selected])
+}
+
+/** 按已固化的取值还原 DOM 状态（存量勾选表 + 填写项都覆盖） */
+function applyStoredValues() {
+  const container = containerRef.value
+
+  if (!container) {
+    return
+  }
+
+  applySelectedItemsToRoot(container, props.selectedItems ?? [])
+
+  const answers: SigningAnswers = { ...(props.fieldAnswers ?? {}) }
+
+  if (props.signatureDataUrl && !answers.signature) {
+    answers.signature = props.signatureDataUrl
+  }
+
+  container.querySelectorAll<HTMLElement>('[data-sign-field]').forEach((host) => {
+    const id = host.getAttribute('data-sign-field')
+    const value = id ? answers[id] : undefined
+
+    if (id === undefined || value === undefined) {
+      return
+    }
+
+    // 读写的判据都在 signing-document 里（readAnswersFromRoot 的镜像），
+    // 这里不自己写 data-sign-* 选择器，否则选项组这类「同 DOM 不同语义」的控件会两处漂移
+    applyAnswerToFieldHost(host, value)
+  })
+}
+
+/**
+ * 从事件目标往上找「可点击采集的签名位」。
+ * 用 closest 而不是直接比对 target：签名位胶囊里还有类型标签、虚线框等子节点，
+ * 点在这些子节点上时 target 并不是宿主节点本身。
+ */
+function resolveSignatureHost(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) {
+    return null
+  }
+
+  const host = target.closest<HTMLElement>(SIGNATURE_ACTION_SELECTOR)
+
+  // closest 会一路向上穿过容器，事件也可能来自容器外，必须确认落在本文书里
+  return host && containerRef.value?.contains(host) ? host : null
+}
+
+function requestSignature(host: HTMLElement) {
+  const fieldId = host.getAttribute('data-sign-field') ?? ''
+
+  if (!fieldId) {
+    return
+  }
+
+  emit('signatureRequest', {
+    fieldId,
+    label: host.getAttribute('data-sign-label') ?? fieldId,
+  })
+}
+
+/**
+ * 点击文书里的 ☑ / ☐ 选项。
+ *
+ * 与签名位分开处理：签名位是「请求采集」（要弹签字板），选项是就地切换。
+ * 切换逻辑本身在 utils/signing-document 的 toggleOptionAt 里，
+ * 组件只负责把点击翻译成一次调用 —— 单选互斥的判据不该在组件里再推一遍。
+ */
+function handleDocumentClick(event: MouseEvent) {
+  if (!props.interactive) {
+    return
+  }
+
+  const target = event.target
+
+  if (target instanceof Element) {
+    const option = target.closest<HTMLElement>(OPTION_TICK_SELECTOR)
+    const container = containerRef.value
+
+    if (option && container && toggleOptionAt(container, option)) {
+      syncFromDom()
+      return
+    }
+  }
+
+  const host = resolveSignatureHost(event.target)
+
+  if (host) {
+    requestSignature(host)
+  }
+}
+
+/** 签名位挂了 role=button 与 tabindex，键盘必须同样可用，否则只有鼠标点得动 */
+function handleDocumentKeydown(event: KeyboardEvent) {
+  if (!props.interactive || (event.key !== 'Enter' && event.key !== ' ')) {
+    return
+  }
+
+  const host = resolveSignatureHost(event.target)
+
+  if (host) {
+    // 空格默认会滚动容器，必须挡掉
+    event.preventDefault()
+    requestSignature(host)
+  }
+}
+
+/**
+ * 把外部采集到的签名图就地写进签名位，写完立刻回读 DOM 上报取值。
+ *
+ * 不重算 processedHtml：整篇重建会换掉 v-html 的 DOM，
+ * 操作人员正在输入的填写项会连同光标一起丢。
+ */
+function patchSignatures() {
+  const container = containerRef.value
+
+  if (!container) {
+    return
+  }
+
+  const patched = Object.entries(props.signatureInjections ?? {}).some(
+    ([fieldId, value]) =>
+      typeof value === 'string' && applySignatureToRoot(container, fieldId, value),
+  )
+
+  if (patched) {
+    syncFromDom()
+  }
+}
+
+watch(
+  processedHtml,
+  () => {
+    applyStoredValues()
+    // 重渲染会丢掉就地写入的签名图，得重新贴一遍
+    patchSignatures()
+  },
+  { flush: 'post' },
+)
+
+watch(() => props.signatureInjections, patchSignatures, { deep: true, flush: 'post' })
+
+onMounted(() => {
+  applyStoredValues()
+  patchSignatures()
+  syncFromDom()
+})
+
+/** 供「导出 PDF」使用：拿到已渲染的文书容器（含固定页眉与签署态取值） */
+function getDocumentElement() {
+  return containerRef.value
+}
+
+defineExpose({ getDocumentElement })
+</script>
+
+<template>
+  <!-- raw 模式：模板定稿可能自带 <style>，必须隔离，否则会污染整个应用 -->
+  <iframe
+    v-if="mode === 'raw'"
+    class="doc-paper-frame"
+    :srcdoc="rawSrcDoc"
+    sandbox=""
+    title="文书原始版式预览"
+  />
+
+  <!-- eslint-disable vue/no-v-html -- 内容为本系统定稿的文书 HTML（编辑器产出、仅医务人员可改），非任意用户输入 -->
+  <article v-else class="doc-paper" :class="{ 'doc-paper--card': variant === 'card' }">
+    <div
+      ref="containerRef"
+      class="doc-paper__body"
+      @change="syncFromDom"
+      @input="syncFromDom"
+      @click="handleDocumentClick"
+      @keydown="handleDocumentKeydown"
+      v-html="processedHtml"
+    />
+  </article>
+  <!-- eslint-enable vue/no-v-html -->
+</template>
+
+<style scoped>
+/* 基础排版（p / h2 / h3 / table / th / td / img）在 utils/document-paper.ts 的
+   DOCUMENT_PAPER_CSS 里，运行期注入 head —— 那里是唯一一份，v-html 与 iframe 共用。
+   这里只保留容器自己的盒子。 */
+
+.doc-paper {
+  min-width: 0;
+}
+
+/* card：预览弹窗里那张白纸 */
+.doc-paper--card {
+  padding: 26px 32px 30px;
+  border-radius: var(--r);
+  box-shadow: var(--sh);
+}
+
+.doc-paper__body {
+  min-width: 0;
+}
+
+.doc-paper-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 560px;
+  background: #fff;
+  border: 0;
+}
+</style>