feat(签署文书): 统一签署态文书样式并精简演示种子为单份麻精同意书

clinical-web/src/utils/mock-document-library.ts

@@ -7,14 +7,19 @@
  *
  * 这里同时持有演示文书库的种子数据，原因有两点：
  * ① 文档库页面与签署工作台必须看到同一份模板，不能一边有数据一边空着；
- * ② 种子文书都带真实正文（含签名位、签署日期、勾选表），
+ * ② 种子文书带真实正文（含签名位、签署日期、勾选/选择项），
  *    发起签署后能走完整的填写项/签名链路，不会退化成前端写死的回退纸样。
  *
+ * 种子只保留一份：**麻醉药品、精神药品知情同意书**（原型 V10.2 的 docSeedNar）。
+ * 正文里的占位符用结构化写法（<span data-field>，见 utils/signing-fields），
+ * 与编辑器插入的占位符、签署端渲染共用同一份属性契约。
+ *
  * 只声明实际用到的字段，不绑定文档库页面的类型，避免 utils 反向依赖 views。
  */
 
-import type { SigningMethod, SigningTemplate } from '@/api/workbench/types'
+import type { SigningFieldDef, SigningMethod, SigningTemplate } from '@/api/workbench/types'
 
+import { buildFieldSpanHtml } from './signing-fields'
 import { MOCK_STORAGE_KEYS, readMockState, writeMockState } from './mock-storage'
 
 /**
@@ -39,6 +44,11 @@ export interface LocalDocument {
   versionId?: string
   departmentId?: string | null
   departmentName?: string
+  /**
+   * 除归属科室外还共享给哪些科室（原型 sharedDepts）。
+   * 后端 CreateTemplateRequest 只接受单个 departmentId，因此这里只在演示文库里有值。
+   */
+  sharedDepartments?: string[]
   campusId?: string | null
   campusName?: string
   /**
@@ -63,162 +73,6 @@ export interface LocalDepartment {
   categories: LocalCategory[]
 }
 
-interface DemoDocumentSpec {
-  id: string
-  versionId: string
-  name: string
-  code: string
-  version: string
-  /** 所属科室（文档库分组名） */
-  department: string
-  category: string
-  description: string
-  /** 主体说明句：各类文书的措辞不同，逐份写清楚，不做模板化拼接 */
-  statement: string
-  /** 需要患者逐项确认的条目，渲染成表头含「勾选」的表格（签署时转为可勾选） */
-  items: string[]
-  /** 补充说明段落 */
-  paragraphs?: string[]
-  /** 需要签署现场填写的额外字段，如代理文书里的「与患者关系」 */
-  extraFields?: string[]
-}
-
-/**
- * 生成演示文书正文。
- * 标题、说明段、勾选表、签名位、签署日期都用真实文书的写法，
- * 其中 ｛患者签名｝｛医师签名｝｛签署日期｝ 是签署端识别签名位与日期的依据。
- *
- * 患者签名与医师签名是两栏：前者是主签名位（手写板/线上签署采集），
- * 后者是文书上的独立签名位，由医师在签署页点击就地采集，两者互不覆盖。
- */
-function buildDemoDocumentHtml(spec: DemoDocumentSpec): string {
-  const paragraphs = [
-    spec.statement,
-    ...(spec.paragraphs ?? []),
-    '本文档采用电子方式签署，患者手写签名图片将合成至本文档签名位，文书原件与签名原图双留存，可随时查验。',
-  ]
-
-  const checkboxTable = spec.items.length
-    ? `<table><thead><tr><th>项目</th><th>勾选</th></tr></thead><tbody>${spec.items
-        .map((item) => `<tr><td>${item}</td><td></td></tr>`)
-        .join('')}</tbody></table>`
-    : ''
-
-  const extraFields = (spec.extraFields ?? []).map((field) => `<p>${field}：｛${field}｝</p>`)
-
-  return [
-    `<h1 style="margin:0 0 14px;font-size:18px;letter-spacing:2px;text-align:center">${spec.name}</h1>`,
-    ...paragraphs.map((paragraph) => `<p>${paragraph}</p>`),
-    checkboxTable,
-    ...extraFields,
-    '<p>患者（或家属）签名：｛患者签名｝</p>',
-    '<p>医师签名：｛医师签名｝</p>',
-    '<p>签署日期：｛签署日期｝</p>',
-  ].join('')
-}
-
-const DEMO_DOCUMENT_SPECS: DemoDocumentSpec[] = [
-  {
-    id: 'tpl-001',
-    versionId: 'tpl-001-v2',
-    name: '住院患者知情同意书',
-    code: 'DOC-HOS-001',
-    version: 'V2.0',
-    department: '全院通用',
-    category: '住院告知',
-    description: '住院期间诊疗事项、风险与患者权利告知。',
-    statement:
-      '医务人员已就住院期间的诊疗方案、检查与用药安排、可能出现的医疗风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。',
-    items: ['诊疗方案与风险知情', '自费项目知情确认', '个人信息使用授权', '住院期间安全告知'],
-  },
-  {
-    id: 'tpl-002',
-    versionId: 'tpl-002-v1',
-    name: '住院须知及告知书',
-    code: 'DOC-HOS-002',
-    version: 'V1.0',
-    department: '全院通用',
-    category: '住院告知',
-    description: '住院流程、陪护要求和患者须知确认。',
-    statement: '现将住院期间的相关制度、注意事项与患者权利义务告知如下，请仔细阅读并确认。',
-    items: ['探视与陪护制度', '请假离院风险告知', '费用结算方式确认'],
-  },
-  {
-    id: 'tpl-003',
-    versionId: 'tpl-003-v3',
-    name: '内镜检查知情同意书',
-    code: 'DOC-DIG-001',
-    version: 'V3.0',
-    department: '消化内科',
-    category: '检查告知',
-    description: '内镜检查适应证、风险及替代方案告知。',
-    statement:
-      '医务人员已就内镜检查的目的、操作过程、可能的风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。',
-    paragraphs: ['本次检查可能采用普通内镜或无痛内镜，若采用无痛内镜需另行完成麻醉评估。'],
-    items: ['肠道准备工作知情', '麻醉方式选择', '病理活检同意', '息肉切除同意'],
-  },
-  {
-    id: 'tpl-004',
-    versionId: 'tpl-004-v1',
-    name: 'MRI 磁共振检查知情同意书',
-    code: 'DOC-RAD-001',
-    version: 'V1.0',
-    department: '放射科',
-    category: '检查告知',
-    description: '磁共振检查注意事项、禁忌证及风险告知。',
-    statement:
-      '医务人员已就磁共振检查的目的、注意事项、可能的风险、替代方案及不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。',
-    paragraphs: [
-      '磁共振检查需进入强磁场环境，体外及体内金属植入物可能造成伤害，请务必如实告知。',
-      '如使用钆对比剂，存在过敏反应及肾功能相关风险，检查前后需配合完成评估。',
-    ],
-    items: ['体内金属植入物筛查', '幽闭恐惧症告知', '造影剂过敏史确认', '妊娠情况确认'],
-  },
-  {
-    id: 'tpl-005',
-    versionId: 'tpl-005-v2',
-    name: '心脏介入手术知情同意书',
-    code: 'DOC-CARD-001',
-    version: 'V2.0',
-    department: '心内科',
-    category: '手术告知',
-    description: '介入治疗方案、围术期风险及替代方案告知。',
-    statement:
-      '医务人员已就介入手术的方案、操作过程、围术期风险、替代方案及可能的不良后果向本人（或授权委托人）充分说明，本人已完全理解上述内容。',
-    paragraphs: ['介入操作过程中可能根据实际情况调整术式，需家属在院等候。'],
-    items: ['冠状动脉造影同意', '支架植入同意', '术后抗凝方案知情', '穿刺部位并发症告知'],
-  },
-  {
-    id: 'tpl-006',
-    versionId: 'tpl-006-v1',
-    name: '体检报告发放及知情同意书',
-    code: 'DOC-PE-001',
-    version: 'V1.0',
-    department: '健康管理中心',
-    category: '体检告知',
-    description: '体检报告领取方式、隐私保护和异常结果随访告知。',
-    statement: '现将体检报告发放方式、个人隐私保护与异常结果随访安排告知如下，请确认。',
-    items: ['报告领取方式确认', '异常结果随访告知', '个人隐私保护知情'],
-  },
-  {
-    id: 'tpl-007',
-    versionId: 'tpl-007-v1',
-    name: '患者授权委托书',
-    code: 'DOC-GEN-003',
-    version: 'V1.0',
-    department: '医务处',
-    category: '授权文书',
-    description: '患者授权家属或代理人办理相关医疗事项。',
-    statement: '本人因病情或客观原因无法亲自办理下列事项，特授权受托人代为办理。',
-    paragraphs: ['受托人在授权范围内签署的医疗文书，与本人签署具有同等效力。'],
-    items: ['代为签署医疗文书', '代为了解病情与诊疗方案', '代为领取检查报告'],
-    extraFields: ['与患者关系', '受托人姓名'],
-  },
-]
-
-/** 数组顺序即文档库里的科室分组顺序，全院通用排在最前 */
-const DEMO_DEPARTMENT_ORDER = ['全院通用', '放射科', '消化内科', '心内科', '健康管理中心', '医务处']
-
 /**
  * 演示院区字典。
  *
@@ -239,19 +93,17 @@ export const demoCampuses = [
 
 /**
  * 演示科室字典。
- * 文档库的科室下拉在演示模式下用它，真实模式下改由 getDepartments(campusId) 提供。
- * 科室名与演示文书库的分组名刻意保持一致（放射科、消化内科……），
- * 否则会出现"下拉里选不到文书实际所属的科室"。
+ * 文档库「文档归属」的科室勾选列表在演示模式下用它，真实模式下改由
+ * getAllDepartments() 提供。科室名与演示文书库的分组名刻意保持一致，
+ * 否则会出现「勾选列表里选不到文书实际所属的科室」。
  */
 export const demoDepartments = [
-  '医学影像科',
-  '医学检验科',
-  '临床遗传中心',
-  '放射科',
-  '消化内科',
-  '心内科',
-  '健康管理中心',
+  '麻醉科·精神科',
+  '药学部',
   '医务处',
+  '医学影像科',
+  '消化内科',
+  '健康管理中心',
 ].map((name, index) => ({
   id: `mock-department-${index + 1}`,
   campusId: '',
@@ -262,9 +114,10 @@ export const demoDepartments = [
   sortNo: index + 1,
 }))
 
-function groupKeyOf(department: string) {
-  return `demo-${DEMO_DEPARTMENT_ORDER.indexOf(department)}`
-}
+/** 演示文书库里唯一的科室分组 */
+const DEMO_DEPARTMENT = '麻醉科·精神科'
+/** 演示文书库里的分类（原型 library 里该文书落在「麻精药品」分类下） */
+const DEMO_CATEGORY = '麻精药品'
 
 /**
  * 演示文书库种子。
@@ -275,50 +128,150 @@ function groupKeyOf(department: string) {
  */
 const DEMO_UPDATED_AT = '2026-08-20T09:30:00+08:00'
 
-function buildDemoLibrary(): LocalDepartment[] {
-  return DEMO_DEPARTMENT_ORDER.map((department) => {
-    const specs = DEMO_DOCUMENT_SPECS.filter((spec) => spec.department === department)
-    const categories = new Map<string, LocalDocument[]>()
-
-    specs.forEach((spec) => {
-      const documents = categories.get(spec.category) ?? []
-      documents.push({
-        id: spec.id,
-        name: spec.name,
-        code: spec.code,
-        version: spec.version,
-        status: 'published',
-        backendStatus: 'PUBLISHED',
-        description: spec.description,
-        versionId: spec.versionId,
-        departmentId: null,
-        departmentName: department,
-        campusId: null,
-        campusName: '全院通用',
-        updatedAt: DEMO_UPDATED_AT,
-        contentHtml: buildDemoDocumentHtml(spec),
-      })
-      categories.set(spec.category, documents)
-    })
-
-    return {
-      key: groupKeyOf(department),
-      name: department,
-      campus: 'all' as const,
-      categories: [...categories.entries()].map(([name, documents]) => ({ name, documents })),
-    }
-  }).filter((department) => department.categories.length > 0)
+/** 现场手填的文本框：字段键统一走 custom: 前缀，编辑器据此提示「签署时由患者/家属现场填写」 */
+function handFilled(label: string): SigningFieldDef {
+  return { id: `custom:${label}`, label, kind: 'text', required: false, options: [] }
 }
 
-/** 演示文书库种子：文档库页面与签署工作台读同一份，保证两个页面看到的模板一致 */
-export const demoDocumentLibrary: LocalDepartment[] = buildDemoLibrary()
+/**
+ * 麻醉药品、精神药品知情同意书（原型 V10.2 的 docSeedNar）。
+ *
+ * 正文结构与原型逐条对齐：一、患者基本信息 / 二、代办人信息 / 三、身份核验记录 /
+ * 四、用药信息 / 五、风险告知与注意事项 / 六、签字确认。
+ *
+ * 与原型的一处差别：原型里「代办人信息」等处的填空是 Word 导入时留下的静态下划线
+ * （`<span style="border-bottom:…">`），在编辑器里会因属性被清洗而丢失。
+ * 这里改成**文本框占位符**——签署时渲染出来同样是下划线，但内容能被采集，
+ * 也顺便把「现场手填」这条链路演示完整。
+ */
+function buildNarcoticConsentHtml(): string {
+  const field = (def: SigningFieldDef) => buildFieldSpanHtml(def)
+
+  const identityVerified: SigningFieldDef = {
+    id: 'identityVerified',
+    label: '已核对',
+    kind: 'checkbox',
+    required: true,
+    options: ['患者本人', '代办人'],
+    multi: true,
+  }
+  const takeAway: SigningFieldDef = {
+    id: 'takeAway',
+    label: '是否带离机构使用',
+    kind: 'choice',
+    required: true,
+    options: ['否（本机构内使用）', '是（带离机构外使用，按单次门诊处方量管理）'],
+    multi: false,
+  }
+
+  const risks = [
+    '麻精药品具有成瘾性（依赖性）风险，须严格按照医嘱使用，不得擅自调整用药剂量或改变用法。',
+    '不得套开麻精药品，不得将药品转借、转售他人。',
+    '转售麻精药品涉嫌毒品犯罪，需承担严重法律后果（第二十七条“特殊属性告知”）。',
+    '使用麻精药品需按医嘱定期复诊（长期使用者至少每 3 个月复诊或电话/视频随诊）。',
+    '过期、未使用的麻精药品及其废贴、空安瓿应当交回医疗机构，由医疗机构按规定销毁，不得自行处理或丢弃。',
+    '注射剂再次领取时须交回此前使用的空安瓿（第二十七条、第四十二条）。',
+    '可能出现的不良反应：恶心、呕吐、便秘、头晕、嗜睡、呼吸抑制等，如有不适及时就医。',
+    '本药品仅供本患者使用，请妥善保管，防止丢失、被盗或被他人误用。',
+  ]
+
+  return [
+    '<h2>麻醉药品、精神药品知情同意书</h2>',
+    '<p>（依据国卫医政发〔2026〕21号第二十七条、第六十九条制定）</p>',
+    '<h3>一、患者基本信息</h3>',
+    '<table><tbody>',
+    `<tr><td>患者姓名</td><td>${field({ id: 'patient', label: '患者姓名', kind: 'text', required: true, options: [] })}</td>`,
+    `<td>性别</td><td>${field({ id: 'sex', label: '性别', kind: 'text', required: false, options: [] })}</td></tr>`,
+    `<tr><td>年龄</td><td>${field({ id: 'age', label: '年龄', kind: 'text', required: false, options: [] })}</td>`,
+    `<td>病历号</td><td>${field(handFilled('病历号'))}</td></tr>`,
+    `<tr><td>身份证号</td><td>${field(handFilled('身份证号'))}</td>`,
+    `<td>联系电话</td><td>${field({ id: 'phone', label: '联系电话', kind: 'text', required: false, options: [] })}</td></tr>`,
+    `<tr><td>诊断</td><td>${field(handFilled('诊断'))}</td>`,
+    `<td>就诊科室</td><td>${field(handFilled('就诊科室'))}</td></tr>`,
+    '</tbody></table>',
+    '<h3>二、代办人信息（代办领取时填写）</h3>',
+    '<table><tbody>',
+    `<tr><td>代办人姓名</td><td>${field(handFilled('代办人姓名'))}</td>`,
+    `<td>与患者关系</td><td>${field(handFilled('与患者关系'))}</td></tr>`,
+    `<tr><td>代办人身份证号</td><td>${field(handFilled('代办人身份证号'))}</td>`,
+    `<td>联系电话</td><td>${field(handFilled('代办人联系电话'))}</td></tr>`,
+    '</tbody></table>',
+    '<h3>三、身份核验记录</h3>',
+    '<table><tbody>',
+    `<tr><td>已核对${field(identityVerified)} 身份证明原件：</td>`,
+    `<td>证件类型及号码：${field(handFilled('证件类型及号码'))}</td></tr>`,
+    '<tr><td>医师确认：患者/代办人身份信息与登记一致</td>',
+    `<td>核对医师签名：${field({ id: 'doctor', label: '核对医师签名', kind: 'signature', required: true, options: [] })}</td></tr>`,
+    '</tbody></table>',
+    '<h3>四、用药信息</h3>',
+    '<table><tbody>',
+    `<tr><td>药品名称</td><td>${field(handFilled('药品名称'))}</td></tr>`,
+    `<tr><td>剂型/规格</td><td>${field(handFilled('剂型规格'))}</td></tr>`,
+    `<tr><td>用法用量</td><td>${field(handFilled('用法用量'))}</td></tr>`,
+    `<tr><td>是否带离机构使用</td><td>${field(takeAway)}</td></tr>`,
+    `<tr><td>使用期限</td><td>${field(handFilled('使用期限'))}</td></tr>`,
+    '</tbody></table>',
+    '<h3>五、风险告知与注意事项</h3>',
+    `<ol>${risks.map((risk) => `<li>${risk}</li>`).join('')}</ol>`,
+    '<h3>六、签字确认</h3>',
+    '<table><tbody>',
+    `<tr><td>患者（或监护人/代办人）签名：${field({ id: 'signature', label: '患者签名', kind: 'signature', required: true, options: [] })}</td>`,
+    `<td>签字日期：${field({ id: 'signedDate', label: '签署日期', kind: 'date', required: true, options: [] })}</td></tr>`,
+    '<tr><td>（未成年人须由监护人书面同意并签名）</td><td></td></tr>',
+    `<tr><td>开具医师签名：${field({ id: 'prescribingDoctor', label: '开具医师签名', kind: 'signature', required: true, options: [] })}</td>`,
+    '<td></td></tr>',
+    '</tbody></table>',
+    '<p>注：本知情同意书由医疗机构妥善保存。采用电子形式的，内容须与纸质一致、完整且不可篡改（第六十九条）。</p>',
+  ].join('')
+}
+
+function buildDemoLibrary(): LocalDepartment[] {
+  const document: LocalDocument = {
+    id: 'tpl-pha-nar-001',
+    name: '麻醉药品、精神药品知情同意书',
+    code: 'TPL-PHA-NAR-001',
+    version: 'v1.0.0',
+    status: 'published',
+    backendStatus: 'PUBLISHED',
+    description: '麻精药品成瘾性风险、特殊属性告知、身份核验、代办人信息与用药信息登记。',
+    versionId: 'tpl-pha-nar-001-v1',
+    departmentId: null,
+    departmentName: DEMO_DEPARTMENT,
+    campusId: null,
+    campusName: '全院通用',
+    updatedAt: DEMO_UPDATED_AT,
+    contentHtml: buildNarcoticConsentHtml(),
+  }
+
+  return [
+    {
+      key: 'demo-0',
+      name: DEMO_DEPARTMENT,
+      campus: 'all' as const,
+      categories: [{ name: DEMO_CATEGORY, documents: [document] }],
+    },
+  ]
+}
+
+/**
+ * 演示文书库种子（惰性构建）。
+ *
+ * 正文里的占位符由 buildFieldSpanHtml 产出，而它要读 document，
+ * 因此在首次取用时才构建：模块被 Node 侧脚本 import 时不会因为缺 DOM 直接抛错。
+ */
+let demoLibraryCache: LocalDepartment[] | null = null
+
+export function getDemoDocumentLibrary(): LocalDepartment[] {
+  demoLibraryCache ??= buildDemoLibrary()
+  return demoLibraryCache
+}
 
 /**
  * 读取演示文书库：优先用本地保存的（科室改过、建过的），没有则用种子。
  * 调用方负责再克隆一份使用，避免直接改到种子数据。
  */
 export function readDocumentLibrary(): LocalDepartment[] {
-  return readMockState<LocalDepartment[]>(MOCK_STORAGE_KEYS.documentLibrary) ?? demoDocumentLibrary
+  return readMockState<LocalDepartment[]>(MOCK_STORAGE_KEYS.documentLibrary) ?? getDemoDocumentLibrary()
 }
 
 /** 保存演示文书库，刷新后仍可继续编辑、预览与发起签署 */

clinical-web/src/utils/mock-storage.ts

@@ -13,7 +13,14 @@ const STORAGE_PREFIX = 'medical-sign:mock:'
 
 /** 演示数据键名：清空演示数据时按这里的清单统一清理 */
 export const MOCK_STORAGE_KEYS = {
-  documentLibrary: `${STORAGE_PREFIX}document-library`,
+  /**
+   * 键里带种子版本号。
+   *
+   * 演示文库的种子内容换过一轮（原来 7 份示例文书，现在只保留「麻醉药品、精神药品
+   * 知情同意书」），旧键里的数据不会再被读到，浏览器不必手工清缓存就能看到新种子。
+   * 之后每次改种子结构，把版本号 +1 即可，代价只是旧键留在 localStorage 里不参与读取。
+   */
+  documentLibrary: `${STORAGE_PREFIX}document-library:v2`,
   signingTasks: `${STORAGE_PREFIX}signing-tasks`,
 } as const
 

clinical-web/src/utils/signing-document.ts

@@ -53,18 +53,58 @@ const FIELD_LABEL_ATTR = 'data-sign-label'
 const FIELD_REQUIRED_ATTR = 'data-sign-required'
 const FIELD_RISK_ATTR = 'data-sign-risk'
 /**
- * 多选组的标记。渲染时由这里打上，回读取值时靠它区分
- * 「一组多选 checkbox」与「单个勾选框」——两者 DOM 里都是 input[type=checkbox]。
+ * 选项组的标记，渲染时由这里**总是**打上（true / false）。
+ *
+ * 为什么要显式写 false 而不是「有才写」：回读取值时要区分三种形态——
+ * 一组多选、一组单选、以及没有选项的单个勾选框；后两者都可能是
+ * 「没有这个属性 + kind=checkbox」，光看属性在不在分不出来。
+ * 显式落成 true / false 后，「有没有这个属性」就等于「是不是一组选项」。
  */
 const FIELD_MULTI_ATTR = 'data-sign-multi'
 /** 需要宿主接管交互的填写项（目前只有「点击采集签名」），值是动作名 */
 const FIELD_ACTION_ATTR = 'data-sign-action'
 /** 签名位的采集动作名 */
 const SIGNATURE_ACTION = 'signature'
-/** 已采集签名图的类名，readAnswersFromRoot 与写入端都按它找 */
-const SIGNATURE_IMAGE_CLASS = 'sign-doc-signature'
 /** 可点击采集的签名位类名，样式与摘除入口时都要用同一个 */
 const ACTIONABLE_CLASS = 'sign-field--actionable'
+/** 填写项宿主节点类名（原型 .docfld：虚线胶囊 → 填充后去边框） */
+const FIELD_HOST_CLASS = 'docfld'
+/** 已填充标记：去掉"待填写"的视觉暗示 */
+const FIELD_FILLED_CLASS = 'filled'
+/** 空值下划线 */
+const BLANK_CLASS = 'docfld-blank'
+/**
+ * 文本 / 日期填写项的可输入控件类名。
+ *
+ * 原型里这类项是**只读**的：值全部来自 HIS 与患者就诊快照，取不到就留一条下划线。
+ * 但本仓库还有「与患者关系」「受托人姓名」这类没有系统取值来源、必须现场手填的
+ * 自定义文本项（见 utils/signing-fields 的 createCustomField），做成只读等于把
+ * 代理人签署这条路堵死。折中办法是保留输入框、但把外观压成原型那条下划线：
+ * 空着是一条线、填好了是正文，视觉上与原型一致，又没丢能力。
+ */
+const INPUT_CLASS = 'docfld-input'
+/** 签名图类名，readAnswersFromRoot 与写入端都按它找 */
+const SIGNATURE_IMAGE_CLASS = 'docfld-signature'
+/** 单个选项的类名（原型 .docopt） */
+const OPTION_CLASS = 'docopt'
+/** 可点击选项的附加类名（原型 .docopt.tick） */
+const OPTION_TICK_CLASS = 'tick'
+/** 已勾选标记（原型 .docopt.on） */
+const OPTION_ON_CLASS = 'on'
+/** 选项取值的载体属性；表格勾选列与行内方框也用同一个，回读时只认它 */
+const OPTION_VALUE_ATTR = 'data-sign-item'
+/**
+ * 行内方框转换出来的选项所属的组名。
+ * 这些选项散落在正文的文本节点里、没有共同的宿主节点，
+ * 互斥只能靠这个属性在整篇文书里找同组兄弟（见 toggleOptionAt）。
+ */
+const GROUP_ATTR = 'data-sign-group'
+/**
+ * 选项的显示名。与取值标识（data-sign-item）分开存：
+ * 表格勾选列的取值标识是项目名，但那一格显示的是「待患者勾选」。
+ * 切换勾选状态时要按显示名重建文案，所以它必须落成属性，不能从取值推。
+ */
+const OPTION_TEXT_ATTR = 'data-sign-text'
 
 /**
  * 可点击采集签名的填写项宿主节点选择器。
@@ -72,6 +112,13 @@ const ACTIONABLE_CLASS = 'sign-field--actionable'
  */
 export const SIGNATURE_ACTION_SELECTOR = `[${FIELD_ACTION_ATTR}="${SIGNATURE_ACTION}"]`
 
+/**
+ * 可点击切换的选项选择器。
+ * 导出给签署端做事件委托：渲染端决定"哪些选项可点"（.tick），
+ * 签署端只负责把点击转成 toggleOptionAt，两边不能各写一份选择器。
+ */
+export const OPTION_TICK_SELECTOR = `.${OPTION_CLASS}.${OPTION_TICK_CLASS}`
+
 /**
  * 科室手打的复选框符号见 SIGNING_OPTION_MARKERS（utils/signing-fields）：
  * 编辑器标记与这里识别必须用同一份字符集，故不再本地声明。
@@ -179,6 +226,83 @@ function isMultiOptionGroup(field: SigningFieldDef): boolean {
   return isOptionGroupField(field) && (field.multi ?? field.kind === 'checkbox')
 }
 
+/**
+ * 选项的显示文案（原型 fillDocHtml / tickDocOpt 的同一口径）：
+ * 勾选态用 ☑、未勾选用 ☐，空一格后跟选项名。
+ *
+ * 没有选项名的单个勾选框（占位符只写了 kind=checkbox 却没配选项）用固定文案
+ * 说明它的语义——原型就是这么写的，也让科室一眼看出这一处是"待勾"而不是漏了内容。
+ */
+function optionDisplay(value: string, on: boolean): string {
+  const mark = on ? '☑' : '☐'
+
+  if (value) {
+    return `${mark} ${value}`
+  }
+
+  return on ? `${mark} 已勾选（结果固化归档）` : `${mark} 待患者勾选`
+}
+
+/**
+ * 一个选项。
+ *
+ * 刻意用文本而不是 `<input>`：原型的签署态文书里没有任何表单控件，
+ * 选项就是 ☑ / ☐ 两个字符，点击切换类名与文字。这样导出的 HTML
+ * 与纸质文书的观感一致，也不会因为表单控件的默认样式在各浏览器下跑版。
+ * 交互由签署端的事件委托完成（见 toggleOptionAt），所以这里只落一个 .tick 标记。
+ *
+ * displayValue 与 itemValue 分开：表格勾选列的项目名要写进 data-sign-item 当取值标识，
+ * 但那一格显示的是「待患者勾选」——项目名在左边那一列已经写过了，重复一遍反而挤。
+ */
+function buildOptionItem(
+  doc: Document,
+  itemValue: string,
+  on: boolean,
+  interactive: boolean,
+  displayValue: string = itemValue,
+): HTMLElement {
+  const item = doc.createElement('span')
+  item.className = [
+    OPTION_CLASS,
+    on ? OPTION_ON_CLASS : '',
+    interactive ? OPTION_TICK_CLASS : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
+  item.setAttribute(OPTION_VALUE_ATTR, itemValue)
+  item.setAttribute(OPTION_TEXT_ATTR, displayValue)
+  item.textContent = optionDisplay(displayValue, on)
+
+  return item
+}
+
+/** 切换一个选项的勾选态（改类名 + 重建 ☑ / ☐ 文案），返回切换后的状态 */
+function setOptionState(item: HTMLElement, on: boolean): boolean {
+  item.classList.toggle(OPTION_ON_CLASS, on)
+  item.textContent = optionDisplay(item.getAttribute(OPTION_TEXT_ATTR) ?? '', on)
+
+  return on
+}
+
+/**
+ * 空值占位：一条下划线。
+ *
+ * 原型只给下划线、不给标签，因为它的填写项几乎都由 HIS 预填，
+ * 空值属于"系统没取到值"的少数情况。这里补一个 title，
+ * 让鼠标停在下划线上能看出这一处该填什么——外观一行没动。
+ */
+function buildBlank(doc: Document, label: string): HTMLElement {
+  const blank = doc.createElement('span')
+  blank.className = BLANK_CLASS
+  blank.innerHTML = '&nbsp;'
+
+  if (label) {
+    blank.title = `待填写：${label}`
+  }
+
+  return blank
+}
+
 function buildFieldWidget(
   doc: Document,
   field: SigningFieldDef,
@@ -189,17 +313,30 @@ function buildFieldWidget(
   const value = answers[field.id]
   const abnormal = hitsRisk(value, field.risk)
   const multi = isMultiOptionGroup(field)
+  const empty = isEmptyFieldValue(value)
 
   const host = doc.createElement('span')
-  host.className = `sign-field sign-field--${field.kind}${abnormal ? ' sign-field--abnormal' : ''}`
+  // 原型口径：渲染出来的填写项**一律**带 .filled —— 签署态文书不再有"待填写"的
+  // 虚线胶囊，填空处是下划线、填好的地方就是正文；.filled 表达的是"已渲染为签署态"，
+  // 不是"已填值"。未填的必填项靠下面的 sign-field--missing 补一条提示色。
+  host.className = [
+    FIELD_HOST_CLASS,
+    `k-${field.kind}`,
+    FIELD_FILLED_CLASS,
+    abnormal ? 'sign-field--abnormal' : '',
+    interactive && empty ? 'sign-field--missing' : '',
+  ]
+    .filter(Boolean)
+    .join(' ')
   host.setAttribute(FIELD_ATTR, field.id)
   host.setAttribute(FIELD_KIND_ATTR, field.kind)
   host.setAttribute(FIELD_LABEL_ATTR, field.label)
   host.setAttribute(FIELD_REQUIRED_ATTR, field.required ? 'true' : 'false')
 
-  // 回读取值时靠它区分「一组多选」与「单个勾选框」：两者 DOM 里都是 checkbox
-  if (multi) {
-    host.setAttribute(FIELD_MULTI_ATTR, 'true')
+  // 选项组显式落成 true / false：回读取值时靠"有没有这个属性"区分
+  // 「一组选项」与「没有选项的单个勾选框」，两者 DOM 里都是一串 .docopt
+  if (isOptionGroupField(field)) {
+    host.setAttribute(FIELD_MULTI_ATTR, multi ? 'true' : 'false')
   }
 
   if (field.risk) {
@@ -216,144 +353,72 @@ function buildFieldWidget(
     host.setAttribute('role', 'button')
     host.setAttribute('tabindex', '0')
     host.setAttribute('title', `点击采集「${field.label}」`)
+  } else if (field.label) {
+    host.title = field.required ? `${field.label}（必填）` : field.label
   }
 
-  const label = doc.createElement('span')
-  label.className = 'sign-field__label'
-  label.textContent = field.label
+  if (field.kind === 'signature') {
+    const text = toTextValue(value)
 
-  if (field.required) {
-    const mark = doc.createElement('span')
-    mark.className = 'sign-field__required'
-    mark.textContent = '*'
-    label.appendChild(mark)
+    if (text) {
+      const image = doc.createElement('img')
+      image.className = SIGNATURE_IMAGE_CLASS
+      image.src = text
+      image.alt = field.label
+      host.appendChild(image)
+    } else {
+      const pending = doc.createElement('span')
+      pending.className = 'docfld-empty'
+      pending.textContent = '未签署'
+      host.appendChild(pending)
+    }
+
+    return host
   }
 
-  host.appendChild(label)
+  // 声明了选项就渲染成一组 ☑ / ☐；没给选项的 choice 会落到下面的文本分支，
+  // 否则科室拿到的是一个点不动的空控件
+  if (isOptionGroupField(field)) {
+    const selected = toSelectedValues(value)
 
-  const control = doc.createElement('span')
-  control.className = 'sign-field__control'
-  control.appendChild(buildFieldControl(doc, field, value, interactive, signaturePending, multi))
-  host.appendChild(control)
+    field.options.forEach((option) => {
+      host.appendChild(buildOptionItem(doc, option, selected.includes(option), interactive))
+    })
 
-  if (abnormal) {
-    const badge = doc.createElement('span')
-    badge.className = 'sign-field__badge'
-    badge.textContent = '异常项'
-    host.appendChild(badge)
+    return host
+  }
+
+  // 没有选项的单个勾选框：一个 ☑ / ☐，取值是布尔
+  if (field.kind === 'checkbox') {
+    host.appendChild(buildOptionItem(doc, '', value === true, interactive))
+    return host
+  }
+
+  const text = toTextValue(value)
+
+  // 可交互（签署页）：给一个压成下划线外观的输入框，现场可补录
+  if (interactive) {
+    const input = doc.createElement('input')
+    input.className = INPUT_CLASS
+    input.type = 'text'
+    input.value = text
+    // value 属性同理：只设 property 的话序列化出来是空值
+    input.setAttribute('value', text)
+    host.appendChild(input)
+
+    return host
+  }
+
+  // 只读（预览 / 已签署查看）：原型口径——有值就是正文，没值留一条下划线
+  if (text) {
+    host.textContent = text
+  } else {
+    host.appendChild(buildBlank(doc, field.label))
   }
 
   return host
 }
 
-/**
- * 一组选项：单选渲染成一组 radio（互斥），多选渲染成一组 checkbox（各勾各的）。
- */
-function buildOptionGroup(
-  doc: Document,
-  field: SigningFieldDef,
-  value: SigningFieldValue | undefined,
-  interactive: boolean,
-  multi: boolean,
-): HTMLElement {
-  const group = doc.createElement('span')
-  group.className = `sign-field__choices${multi ? ' sign-field__choices--multi' : ''}`
-  const selected = toSelectedValues(value)
-
-  field.options.forEach((option) => {
-    const wrapper = doc.createElement('label')
-    wrapper.className = 'sign-doc-option'
-
-    const input = doc.createElement('input')
-    input.className = multi ? 'sign-field__checkbox' : 'sign-field__radio'
-    input.type = multi ? 'checkbox' : 'radio'
-    // 同名：单选靠它互斥，多选靠它被 readAnswersFromRoot 一起取回
-    input.name = `sign-field-${field.id}`
-    input.value = option
-    input.disabled = !interactive
-
-    // 必须同时落成 attribute：innerHTML 只序列化 HTML 属性，
-    // 只设 .checked 这个 property 会在生成 HTML 时被丢掉
-    if (selected.includes(option)) {
-      input.checked = true
-      input.setAttribute('checked', '')
-    }
-
-    wrapper.appendChild(input)
-    wrapper.appendChild(doc.createTextNode(option))
-    group.appendChild(wrapper)
-  })
-
-  return group
-}
-
-function buildFieldControl(
-  doc: Document,
-  field: SigningFieldDef,
-  value: SigningFieldValue | undefined,
-  interactive: boolean,
-  signaturePending: boolean,
-  multi: boolean,
-): Node {
-  const textValue = toTextValue(value)
-
-  if (field.kind === 'signature') {
-    if (textValue) {
-      const image = doc.createElement('img')
-      image.className = SIGNATURE_IMAGE_CLASS
-      image.src = textValue
-      image.alt = field.label
-      return image
-    }
-
-    // 签名位只写「待签名」：宿主胶囊上已经写着「医师签名」了，
-    // 这里再写一遍「待医师签名」是重复信息
-    const empty = doc.createElement('span')
-    empty.className = 'sign-field__signature-empty'
-    empty.textContent = signaturePending ? '✍ 点击签名' : '待签名'
-    return empty
-  }
-
-  // 声明了选项就渲染成一组控件；没给选项的 choice 会落到下面的文本框分支，
-  // 否则科室拿到的是一个点不动的空控件
-  if (isOptionGroupField(field)) {
-    return buildOptionGroup(doc, field, value, interactive, multi)
-  }
-
-  if (field.kind === 'checkbox') {
-    const wrapper = doc.createElement('label')
-    wrapper.className = 'sign-doc-option'
-
-    const input = doc.createElement('input')
-    input.className = 'sign-field__checkbox'
-    input.type = 'checkbox'
-    input.disabled = !interactive
-
-    if (value === true) {
-      input.checked = true
-      input.setAttribute('checked', '')
-    }
-
-    wrapper.appendChild(input)
-    wrapper.appendChild(doc.createTextNode(field.label))
-    return wrapper
-  }
-
-  const input = doc.createElement('input')
-  input.className = 'sign-field__input'
-  input.type = field.kind === 'date' ? 'date' : 'text'
-  input.value = textValue
-  // value 属性同理：只设 property 的话序列化出来是空值
-  input.setAttribute('value', textValue)
-  input.readOnly = !interactive
-  input.disabled = !interactive
-  if (interactive) {
-    input.placeholder = '请填写'
-  }
-
-  return input
-}
-
 /**
  * 占位符渲染：把 ｛患者姓名｝ 就地替换成填写项控件，保留同一文本节点内的前后文字。
  * 模板未收录的占位符按自定义文本项处理，仍可在文书上填写，
@@ -439,7 +504,19 @@ function renderStructuredFields(
   })
 }
 
-function convertCheckboxes(root: Element, interactive: boolean, selected: Set<string>) {
+/**
+ * 存量兼容①：表头含「勾选」列的表格，逐行把勾选列转成可点击的 ☑ / ☐。
+ *
+ * 为什么不是 `<input type=checkbox>`：原型的口径是"勾选列 → 占位符 → ☑ 文本"
+ * （见其 docCheckboxize + fillDocHtml），签署态文书里没有表单控件。
+ * 两种外观混在一篇文书里，会让人以为有一处没生效。
+ *
+ * 项目名仍写在 data-sign-item 上：它是这项勾选的**取值标识**，
+ * 显示成「待患者勾选」只是因为它左边那一列已经写着项目名了。
+ */
+function convertCheckboxTables(root: Element, interactive: boolean, selected: Set<string>) {
+  const doc = root.ownerDocument
+
   root.querySelectorAll('table').forEach((table) => {
     // 不能只认 <thead>：WangEditor 的表格节点是 <table><tbody><tr>，它导出时不会生成
     // thead，粘贴带 thead 的表格时其 preParseHtml 也把 thead 拆掉；.docx 经 mammoth
@@ -476,33 +553,36 @@ function convertCheckboxes(root: Element, interactive: boolean, selected: Set<st
         const nameCell = cells[nameIndex > -1 ? nameIndex : fallbackIndex]
         const itemName = (nameCell?.textContent ?? '').trim()
 
-        const checkbox = document.createElement('input')
-        checkbox.type = 'checkbox'
-        checkbox.className = 'sign-doc-checkbox'
-        checkbox.setAttribute('data-sign-item', itemName)
-        checkbox.disabled = !interactive
-
-        // 必须写成 attribute：innerHTML 只序列化 HTML 属性，只设 .checked 这个
-        // property 会在生成 HTML 时被丢掉，渲染回来就成了未勾选
-        if (selected.has(itemName)) {
-          checkbox.checked = true
-          checkbox.setAttribute('checked', '')
-        }
-
-        checkCell.textContent = ''
-        checkCell.appendChild(checkbox)
+        checkCell.replaceChildren(
+          buildOptionItem(doc, itemName, selected.has(itemName), interactive, ''),
+        )
       })
   })
 }
 
-/** 收集所有含方框符号的文本节点 */
+/**
+ * 已经渲染成控件的区域：结构化占位符宿主（含它内部的选项）与已经生成的选项本身。
+ * 这两个区域里的方框符号是**我们自己的输出**（☑/☐ 文本），不能再当"科室手打的方框"识别。
+ */
+const RENDERED_OPTION_SELECTOR = `.${OPTION_CLASS}, [${FIELD_ATTR}]`
+
+/**
+ * 收集所有含方框符号的文本节点。
+ *
+ * 必须排除已渲染区域，否则会自我套娃：选项的文本就是 `☐ 选项`，而 `☐` 恰好是
+ * SIGNING_OPTION_MARKERS 里的字符，扫描器会把它当成科室手打的方框再转一次，
+ * 于是在 `.docopt` 里再嵌一个 `.docopt` —— 患者看到的是「☐ 患者本人 ☐ 患者本人」，
+ * 且内层用「选项名到标点为止」的规则截断，长选项名会被切掉后半截。
+ */
 function collectOptionTextNodes(root: Element): Text[] {
   const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT)
   const targets: Text[] = []
   let node = walker.nextNode()
 
   while (node) {
-    if (OPTION_TEST_PATTERN.test(node.textContent ?? '')) {
+    const text = node.textContent ?? ''
+
+    if (OPTION_TEST_PATTERN.test(text) && !isInsideRenderedOption(node as Text)) {
       targets.push(node as Text)
     }
 
@@ -512,9 +592,17 @@ function collectOptionTextNodes(root: Element): Text[] {
   return targets
 }
 
+function isInsideRenderedOption(node: Text): boolean {
+  return Boolean(node.parentElement?.closest(RENDERED_OPTION_SELECTOR))
+}
+
 /**
- * 把一个文本节点里的方框换成可交互控件：方框 + 紧随其后的文字算一个选项，
- * 例如「□否 □是」→ 两个 radio，选项名分别是「否」「是」。
+ * 把一个文本节点里的方框换成可点击的 ☑ / ☐ 选项：方框 + 紧随其后的文字算一个选项，
+ * 例如「□否 □是」→ 两个选项，取值分别是「否」「是」。
+ *
+ * 同组标记（data-sign-group）落在选项自己身上，而不是包一层容器：
+ * 这些方框散落在正文的文本节点里，跨节点包容器会改掉文书结构。
+ * 单选组还会带上 data-sign-multi="false"，签署端据此做互斥。
  */
 function replaceOptionMarkers(
   textNode: Text,
@@ -523,15 +611,16 @@ function replaceOptionMarkers(
   interactive: boolean,
   selected: Set<string>,
 ) {
+  const doc = textNode.ownerDocument
   const parts = (textNode.textContent ?? '').split(OPTION_SPLIT_PATTERN)
-  const fragment = textNode.ownerDocument.createDocumentFragment()
+  const fragment = doc.createDocumentFragment()
 
   for (let index = 0; index < parts.length; index += 1) {
     const part = parts[index] ?? ''
 
     if (!OPTION_TEST_PATTERN.test(part)) {
       if (part) {
-        fragment.appendChild(textNode.ownerDocument.createTextNode(part))
+        fragment.appendChild(doc.createTextNode(part))
       }
 
       continue
@@ -542,32 +631,17 @@ function replaceOptionMarkers(
     const label = labelMatch?.[1] ?? ''
     const tail = labelMatch?.[2] ?? ''
 
-    const input = textNode.ownerDocument.createElement('input')
-    input.type = type
-    input.className = 'sign-doc-checkbox'
-    input.disabled = !interactive
-    input.setAttribute('data-sign-item', label)
-
-    // 同表格勾选：只设 property 不会出现在生成的 HTML 里，必须落成属性
-    if (label !== '' && selected.has(label)) {
-      input.checked = true
-      input.setAttribute('checked', '')
-    }
+    const item = buildOptionItem(doc, label, label !== '' && selected.has(label), interactive)
+    item.setAttribute(GROUP_ATTR, groupName)
 
     if (type === 'radio') {
-      input.name = groupName
-      input.value = label
+      item.setAttribute(FIELD_MULTI_ATTR, 'false')
     }
 
-    const wrapper = textNode.ownerDocument.createElement('label')
-    wrapper.className = 'sign-doc-option'
-    wrapper.appendChild(input)
-    wrapper.appendChild(textNode.ownerDocument.createTextNode(label))
-
-    fragment.appendChild(wrapper)
+    fragment.appendChild(item)
 
     if (tail) {
-      fragment.appendChild(textNode.ownerDocument.createTextNode(tail))
+      fragment.appendChild(doc.createTextNode(tail))
     }
 
     // 选项名已随方框一起消费，跳过它对应的片段
@@ -708,7 +782,7 @@ export function buildSigningDocumentHtml(
   renderTokenFields(root, answers, interactive, signatureActionable, claimed)
 
   const selected = new Set(data.selectedItems ?? [])
-  convertCheckboxes(root, interactive, selected)
+  convertCheckboxTables(root, interactive, selected)
   convertInlineOptions(root, interactive, selected)
 
   // 页眉最后插入：保证 HIS 取值不会被当成文书内容参与占位符/方框识别
@@ -719,7 +793,11 @@ export function buildSigningDocumentHtml(
 
 /**
  * 从渲染后的文书 DOM 里读回填写项取值。
- * 签名读的是签名图，其余按控件类型读，返回结果直接可作为签署证据的一部分固化。
+ * 签名读的是签名图，其余按控件形态读，返回结果直接可作为签署证据的一部分固化。
+ *
+ * 三条读取路径与 buildFieldWidget 的三种形态一一对应，判据只看宿主上的属性，
+ * 不再猜 DOM：带 data-sign-multi 的是一组选项，kind=checkbox 的是单个勾选框，
+ * 其余按文本读。
  */
 export function readAnswersFromRoot(root: HTMLElement): SigningAnswers {
   const answers: SigningAnswers = {}
@@ -738,73 +816,174 @@ export function readAnswersFromRoot(root: HTMLElement): SigningAnswers {
       return
     }
 
-    // 多选组：一组 checkbox，取值是字符串数组（勾了几个就是几个）。
-    // 必须先于下面的 checkbox 分支判断——两者 DOM 里都是 input[type=checkbox]，
-    // 只有渲染时打上的 data-sign-multi 能区分「一组多选」与「单个勾选框」
-    if (host.getAttribute(FIELD_MULTI_ATTR) === 'true') {
-      answers[id] = Array.from(
-        host.querySelectorAll<HTMLInputElement>('input[type="checkbox"]:checked'),
-      ).map((input) => input.value)
-      return
-    }
-
-    if (kind === 'choice') {
-      const checked = host.querySelector<HTMLInputElement>('input[type="radio"]:checked')
-      answers[id] = checked?.value ?? ''
+    const multiAttr = host.getAttribute(FIELD_MULTI_ATTR)
+
+    // 一组选项：勾中的项取 data-sign-item。
+    // 单选返回字符串、多选返回数组——与 SigningFieldValue 的约定一致
+    if (multiAttr !== null) {
+      const picked = collectCheckedItems(host)
+
+      answers[id] = multiAttr === 'true' ? picked : (picked[0] ?? '')
       return
     }
 
+    // 没有选项的单个勾选框：取值是布尔。
+    // 找不到勾选节点时按「未勾选」处理——`?.classList.contains()` 会返回 undefined，
+    // 直接落库会在证据里留下一个 undefined 而不是 false
     if (kind === 'checkbox') {
-      const box = host.querySelector<HTMLInputElement>('input[type="checkbox"]')
-      answers[id] = Boolean(box?.checked)
+      answers[id] =
+        host
+          .querySelector<HTMLElement>(`.${OPTION_CLASS}`)
+          ?.classList.contains(OPTION_ON_CLASS) ?? false
       return
     }
 
-    answers[id] = host.querySelector<HTMLInputElement>('input')?.value ?? ''
+    answers[id] = readHostText(host)
   })
 
   return answers
 }
 
+/** 某个宿主下已勾选的选项取值（按文档顺序） */
+function collectCheckedItems(host: HTMLElement): string[] {
+  return Array.from(host.querySelectorAll<HTMLElement>(`.${OPTION_CLASS}.${OPTION_ON_CLASS}`)).map(
+    (item) => item.getAttribute(OPTION_VALUE_ATTR) ?? '',
+  )
+}
+
 /**
- * 把一个已固化的取值写回填写项的控件（签署端重新打开文书时还原状态）。
+ * 读填写项的文本取值。
  *
- * 与 readAnswersFromRoot 是一对：那边按控件类型读、这边按同一套判据写，
+ * 两种载体都要认：签署页是输入框（取 value），预览与已签署查看是正文文字。
+ * 只读态的空值占位（.docfld-blank）里是 `&nbsp;`，直接取 textContent 会得到一个
+ * 不换行空格——那会让「已填 / 未填」的判据全部失效（空值看起来像有值），
+ * 所以把占位节点先摘掉再读。
+ */
+function readHostText(host: HTMLElement): string {
+  const input = host.querySelector<HTMLInputElement>(`.${INPUT_CLASS}`)
+
+  if (input) {
+    return input.value.trim()
+  }
+
+  const clone = host.cloneNode(true) as HTMLElement
+
+  clone.querySelectorAll(`.${BLANK_CLASS}`).forEach((blank) => blank.remove())
+
+  return (clone.textContent ?? '').trim()
+}
+
+/**
+ * 把一个已固化的取值写回填写项（签署端重新打开文书时还原状态）。
+ *
+ * 与 readAnswersFromRoot 是一对：那边按宿主属性读、这边按同一套判据写，
  * 两者都放在本文件里，属性名与判据只有一份——签署端不该自己写 data-sign-* 选择器。
  */
 export function applyAnswerToFieldHost(host: HTMLElement, value: SigningFieldValue): void {
-  // 多选组：一组 checkbox，取值是字符串数组。
-  // 必须先判它，否则会落到下面的布尔分支，把数组当成「勾上了」全部勾选
-  if (host.getAttribute(FIELD_MULTI_ATTR) === 'true') {
-    const picked = new Set(Array.isArray(value) ? value : [])
+  const items = Array.from(host.querySelectorAll<HTMLElement>(`.${OPTION_CLASS}`))
+  const multiAttr = host.getAttribute(FIELD_MULTI_ATTR)
 
-    host.querySelectorAll<HTMLInputElement>('input[type="checkbox"]').forEach((box) => {
-      box.checked = picked.has(box.value)
+  // 一组选项：多选取数组、单选取字符串。两种都先把整组清干净再按取值点亮，
+  // 否则「从「是」改成「否」」会留下两个勾
+  if (multiAttr !== null && items.length) {
+    const picked = new Set(
+      multiAttr === 'true' ? toSelectedValues(value) : [toTextValue(value)].filter(Boolean),
+    )
+
+    items.forEach((item) => {
+      setOptionState(item, picked.has(item.getAttribute(OPTION_VALUE_ATTR) ?? ''))
     })
-    return
-  }
-
-  if (typeof value === 'boolean') {
-    const checkbox = host.querySelector<HTMLInputElement>('input[type="checkbox"]')
-
-    if (checkbox) {
-      checkbox.checked = value
-    }
 
     return
   }
 
-  const text = Array.isArray(value) ? '' : value
-  const input = host.querySelector<HTMLInputElement>(
-    'input:not([type="radio"]):not([type="checkbox"])',
-  )
+  // 没有选项的单个勾选框：取值是布尔
+  if (items.length === 1) {
+    setOptionState(items[0] as HTMLElement, value === true)
+    return
+  }
+
+  // 文本项只认字符串：数组（选项组）与布尔（勾选框）都在这条分支之前被处理掉了，
+  // 真落到这里说明取值类型与控件形态对不上，按空值处理而不是硬塞一个值进去
+  const text = typeof value === 'string' ? value : ''
+  const input = host.querySelector<HTMLInputElement>(`.${INPUT_CLASS}`)
 
   if (input) {
     input.value = text
+    input.setAttribute('value', text)
+    return
   }
 
-  host.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((radio) => {
-    radio.checked = radio.value === text
+  if (text) {
+    host.textContent = text
+    return
+  }
+
+  // 清空要还原成下划线占位，不能留一个空壳（空壳看起来像"这一项被删了"）
+  host.replaceChildren(buildBlank(host.ownerDocument, host.getAttribute(FIELD_LABEL_ATTR) ?? ''))
+}
+
+/**
+ * 切换点击到的那个选项，返回是否真的发生了变化。
+ *
+ * 三种形态在这里统一处理：
+ * - 结构化占位符与存量勾选表的选项：宿主带 data-sign-multi，互斥范围就是这个宿主；
+ * - 行内方框转出来的选项：散在正文里、没有共同宿主，靠 data-sign-group 找同组兄弟。
+ *
+ * root 是整篇文书的容器：只有它才能把"同组兄弟"找全（见上）。
+ * 这一层逻辑放在本文件而不是签署端组件里，是为了和渲染端共用
+ * 「什么算同组」这一条判据——组件里再推一遍迟早和渲染漂移。
+ */
+export function toggleOptionAt(root: HTMLElement, item: HTMLElement): boolean {
+  if (!item.classList.contains(OPTION_TICK_CLASS) || !root.contains(item)) {
+    return false
+  }
+
+  const host = item.closest<HTMLElement>(`[${FIELD_ATTR}]`)
+  const groupName = item.getAttribute(GROUP_ATTR)
+  const multiAttr = host?.getAttribute(FIELD_MULTI_ATTR) ?? item.getAttribute(FIELD_MULTI_ATTR)
+  // 缺省按多选：只有明确声明过互斥的组才做单选
+  const multi = multiAttr !== 'false'
+  const on = item.classList.contains(OPTION_ON_CLASS)
+
+  if (multi) {
+    setOptionState(item, !on)
+    return true
+  }
+
+  const siblings = groupName
+    ? Array.from(root.querySelectorAll<HTMLElement>(`[${GROUP_ATTR}="${groupName}"]`))
+    : Array.from(host?.querySelectorAll<HTMLElement>(`.${OPTION_CLASS}`) ?? [item])
+
+  // 单选：再点一次已选中的项等于取消，与原型 tickDocOpt 的口径一致
+  siblings.forEach((sibling) => setOptionState(sibling, !on && sibling === item))
+
+  return true
+}
+
+/**
+ * 收集"散装"选项里已勾选的项（存量勾选表 + 行内方框），即 SigningTaskRecord.selectedItems。
+ *
+ * 刻意排除落在 `[data-sign-field]` 宿主里的选项：结构化填写项的取值走 fieldAnswers，
+ * 两边都收会让同一份勾选在任务上存两份、且口径可能不一致。
+ */
+export function collectSelectedItemsFromRoot(root: HTMLElement): string[] {
+  return Array.from(root.querySelectorAll<HTMLElement>(`.${OPTION_CLASS}.${OPTION_ON_CLASS}`))
+    .filter((item) => !item.closest(`[${FIELD_ATTR}]`))
+    .map((item) => item.getAttribute(OPTION_VALUE_ATTR) ?? '')
+    .filter(Boolean)
+}
+
+/** 按已固化的勾选清单还原"散装"选项的状态（与 collectSelectedItemsFromRoot 对称） */
+export function applySelectedItemsToRoot(root: HTMLElement, items: string[]): void {
+  const selected = new Set(items)
+
+  root.querySelectorAll<HTMLElement>(`.${OPTION_CLASS}`).forEach((item) => {
+    if (item.closest(`[${FIELD_ATTR}]`)) {
+      return
+    }
+
+    setOptionState(item, selected.has(item.getAttribute(OPTION_VALUE_ATTR) ?? ''))
   })
 }
 
@@ -824,14 +1003,13 @@ export function applySignatureToRoot(root: HTMLElement, fieldId: string, dataUrl
   }
 
   const host = root.querySelector<HTMLElement>(`[${FIELD_ATTR}="${fieldId}"]`)
-  const control = host?.querySelector('.sign-field__control')
 
-  if (!host || !control) {
+  if (!host) {
     return false
   }
 
   // 同一张图重复写入没有意义，返回 false 也让调用方少跑一轮回读
-  if (control.querySelector(`img.${SIGNATURE_IMAGE_CLASS}`)?.getAttribute('src') === dataUrl) {
+  if (host.querySelector(`img.${SIGNATURE_IMAGE_CLASS}`)?.getAttribute('src') === dataUrl) {
     return false
   }
 
@@ -839,14 +1017,15 @@ export function applySignatureToRoot(root: HTMLElement, fieldId: string, dataUrl
   image.className = SIGNATURE_IMAGE_CLASS
   image.src = dataUrl
   image.alt = host.getAttribute(FIELD_LABEL_ATTR) ?? fieldId
-  control.replaceChildren(image)
+  // 签名位填充后只剩签名图：原型不保留「未签署」提示，也不再有点击提示
+  host.replaceChildren(image)
+  host.title = host.getAttribute(FIELD_LABEL_ATTR) ?? ''
 
   // 采集入口用完即摘：留着会让「还能再点一次」的观感落空
-  host.classList.remove(ACTIONABLE_CLASS)
+  host.classList.remove(ACTIONABLE_CLASS, 'sign-field--missing')
   host.removeAttribute(FIELD_ACTION_ATTR)
   host.removeAttribute('role')
   host.removeAttribute('tabindex')
-  host.removeAttribute('title')
 
   return true
 }

clinical-web/src/utils/signing-field-node.ts

@@ -253,9 +253,9 @@ function renderSignField(
   return h('span', {
     attrs: {
       class: `${SIGN_FIELD_CHIP_CLASS} ${SIGN_FIELD_NODE_CLASS}${selected ? ' is-selected' : ''}`,
-      // 供 CSS ::before / ::after 展示，避免在 DOM 里留下可落光标的文字
+      // 供 CSS ::before 展示标签、::before/::after 与选择器区分类型，
+      // 避免在 DOM 里留下可落光标的文字（见文件头 ③）
       'data-sign-label': elem.fieldLabel,
-      'data-sign-tag': kindLabel,
       'data-sign-kind': elem.fieldKind,
       title: `待填写项：${elem.fieldLabel}（${kindLabel}），${source}。${extra.join('，')}。点击选中后可整块删除`,
       contenteditable: 'false',

clinical-web/src/utils/signing-fields.ts

@@ -765,6 +765,87 @@ export function upgradeFieldTokensToStructured(contentHtml: string): string {
   )
 }
 
+/**
+ * 把导入的 Word 表格里的「勾选」列转成结构化勾选占位符（原型 docCheckboxize 的口径）。
+ *
+ * 为什么在**导入时**转，而不是留到签署渲染再转：
+ * ① 转完它就是一个正常的填写项，科室可以点开改名称、类型、选项，
+ *    与手工插入的占位符没有任何区别；
+ * ② 留在渲染期转的话，这份文书在编辑器里始终是一张"看不出哪里要勾"的空表格，
+ *    科室没法在保存前核对。
+ *
+ * 取值列的选择顺序照原型：勾选列右边第二列 → 左边第一列 → 右边第一列 → 「选择项目」。
+ * 原型会给转出来的勾选项写 data-risk="是"，但那个值在渲染侧从未被读取
+ * （勾选的取值是布尔，命中判据比不出来），属于原型里没落地的残留，这里不抄。
+ *
+ * 字段键必须逐格现取：同一张表里两行都叫「已阅读」时，共用 `custom:已阅读`
+ * 会让两处勾选互相覆盖，所以用 allocateCustomFieldId 的同款规则按占用情况往后编号。
+ */
+export function convertCheckboxColumnsToFields(contentHtml: string): string {
+  if (!contentHtml || !contentHtml.includes('<table')) {
+    return contentHtml
+  }
+
+  const parsed = new DOMParser().parseFromString(
+    `<div id="${SCAN_ROOT_ID}">${contentHtml}</div>`,
+    'text/html',
+  )
+  const root = parsed.getElementById(SCAN_ROOT_ID)
+
+  if (!root) {
+    return contentHtml
+  }
+
+  const claimed = collectStructuredIdsFrom(root)
+  let changed = false
+
+  root.querySelectorAll('table').forEach((table) => {
+    const rows = Array.from(table.querySelectorAll('tr'))
+
+    if (rows.length < 2) {
+      return
+    }
+
+    const headerRow = rows[0] as HTMLTableRowElement
+    const headerCells = Array.from(headerRow.cells)
+    const checkIndex = headerCells.findIndex((cell) => cell.textContent?.trim() === '勾选')
+
+    if (checkIndex === -1) {
+      return
+    }
+
+    rows.slice(1).forEach((row) => {
+      const cells = Array.from((row as HTMLTableRowElement).cells)
+      const target = cells[checkIndex]
+
+      // 只转空单元格：已经有内容的说明科室自己填过，别覆盖
+      if (!target || (target.textContent ?? '').trim()) {
+        return
+      }
+
+      const label =
+        (cells[checkIndex + 2]?.textContent ?? '').trim() ||
+        (cells[checkIndex - 1]?.textContent ?? '').trim() ||
+        (cells[checkIndex + 1]?.textContent ?? '').trim() ||
+        '选择项目'
+
+      let sequence = 1
+
+      while (claimed.has(createCustomField(label, 'checkbox', [], sequence).id)) {
+        sequence += 1
+      }
+
+      const field = createCustomField(label, 'checkbox', [], sequence)
+      claimed.add(field.id)
+
+      target.replaceChildren(createFieldElement(parsed, { ...field, required: true }))
+      changed = true
+    })
+  })
+
+  return changed ? root.innerHTML : contentHtml
+}
+
 /**
  * 给新插入的自定义文本项分配一个在本文书里唯一的字段键。
  *

clinical-web/src/utils/signing-pdf.ts

@@ -43,37 +43,31 @@ export interface SigningPdfInput {
  *
  * 实测（签署工作台导出的 PDF，html2canvas 1.4）：页面上明明印着「与患者关系：文本框 配偶」、
  * 签名图也画出来了，导出的位图里这些却全是空白，只剩胶囊的边框和底色——
- * 填写项胶囊 `.sign-field` 与控件容器 `.sign-field__control` 都是 `display: inline-flex`，
- * 而 html2canvas 1.4 不实现 flex 布局，容器内文本的落点算不出来，
- * 于是连同 `<input>` 的取值、签名 `<img>` 一起被丢掉（连 `<p>` 里的「待签名」提示也不见了）。
+ * 当时填写项胶囊与它的控件容器都是 `display: inline-flex`，html2canvas 算不出容器内
+ * 文本的落点，于是连同取值与签名 `<img>` 一起被丢掉。
  *
- * 换成 `inline-block` 后内容全部回来，于是这里把这两层降级。**只在导出克隆体上改**：
- * 屏幕上的版式一行不动，PDF 也不会丢内容；`.sign-doc-header` 那层 flex 实测不受影响，不动它。
+ * 现在填写项已按原型口径改成 `display: inline-block`（.docfld / .docopt，
+ * 见 styles/signing-document.css），这条降级只剩系统页眉那一层：
+ * 它是 flex 排的一行患者信息，导出前改成 block + inline-block，
+ * 并用等效的 margin 补回原来的项间距，保证页眉在 PDF 里不丢字。
  *
- * gap 在 inline-block 下失效，所以把原来的 4px 项间距、align-items: center、
- * 签名位的 justify-content: center 用等效的 inline 写法补回来，导出结果与屏幕观感一致。
+ * **只在导出克隆体上改**：屏幕上的版式一行不动。
  */
 function applyExportFlexFallback(root: HTMLElement) {
-  root.querySelectorAll<HTMLElement>('.sign-field, .sign-field__control').forEach((element) => {
-    element.style.display = 'inline-block'
-  })
+  const header = root.querySelector<HTMLElement>('.sign-doc-header')
 
-  // 胶囊原来是 inline-flex + gap: 4px，项名与控件之间的间距要自己补
-  root.querySelectorAll<HTMLElement>('.sign-field__label').forEach((element) => {
-    element.style.marginRight = '4px'
-  })
+  if (!header) {
+    return
+  }
 
-  root.querySelectorAll<HTMLElement>('.sign-field__control').forEach((element) => {
-    // 原来是 align-items: center
-    element.style.verticalAlign = 'middle'
-  })
+  header.style.display = 'block'
 
-  // 签名位原来是 justify-content: center，inline-block 下改用 text-align 居中
-  root
-    .querySelectorAll<HTMLElement>('.sign-field--signature .sign-field__control')
-    .forEach((element) => {
-      element.style.textAlign = 'center'
-    })
+  // gap: 10px 18px 在 inline-block 下失效，用 margin 补回来
+  root.querySelectorAll<HTMLElement>('.sign-doc-header__item').forEach((item) => {
+    item.style.display = 'inline-block'
+    item.style.marginRight = '18px'
+    item.style.marginBottom = '6px'
+  })
 }
 
 /** 量固定页眉的高度（含下外边距）——它是每页要重复的那一条 */