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

2026-09-24 17:08:12 +08:00
parent 9a6ac93e21
commit 5ea79178cb
30 changed files with 3787 additions and 2878 deletions
@@ -175,7 +175,7 @@ API 模块与页面按业务域对应。工作台页面使用 `api/workbench`
 - `POST /api/v1/auth/logout`：注销当前会话；
 - 后续请求自动携带 `X-Token` 请求头。

-路由、侧栏和页面操作均按后端授权资源控制；导航每 15 秒及窗口重新聚焦时刷新，角色、菜单资源或员工角色绑定变更后也会主动刷新当前授权。角色权限从菜单资源树配置目录、菜单和按钮，员工角色绑定通过独立用户角色接口保存。菜单资源维护使用真实接口；系统参数卡片仍是演示数据，最终授权始终以后端校验为准。
+路由、侧栏和页面操作均按后端授权资源控制；窗口重新聚焦、或页面重新可见（`visibilitychange`）时刷新当前授权，角色、菜单资源或员工角色绑定变更后也会主动刷新。**这里不再有周期性轮询**：早期版本用 15 秒定时器刷新，实测一个闲置可见标签页会稳定产生约 240 次/小时请求（`/v1/authorization/me`），而权限变更本身是低频的管理员操作，因此改为只在「用户重新回到页面」时收敛。用户长时间停留且不切窗口时，切路由仍会经路由守卫的 `ensureCurrentUser()`（10 秒 TTL + 并发去重）顺带收敛。角色权限从菜单资源树配置目录、菜单和按钮，员工角色绑定通过独立用户角色接口保存。菜单资源维护使用真实接口；系统参数卡片仍是演示数据，最终授权始终以后端校验为准。

 按钮级权限统一用全局指令 `v-permission` 声明（实现见 `src/directives/permission.ts`）：`v-permission="'doc:template:edit'"` 无权限时隐藏，`v-permission.disable="'doc:template:edit'"` 无权限时置灰；权限码必须与菜单资源树里 BUTTON 节点的 `code` 完全一致，前端不再维护别名映射。指令只负责体验，按钮背后的处理函数仍要用同一套权限码自行校验。文档库管理（`views/management/documents`）是本轮先落地的页面，其余页面沿用旧的 `hasPermission` 写法，待逐个统计按钮后迁移。

@@ -84,8 +84,9 @@ async function login(captchaCode) {
    '  用户        = ' + json.data.user.displayName + ' (' + json.data.user.username + ')',
  )
  console.log('  campusId    = ' + json.data.user.campusId)
-  console.log('  dataScope   = ' + json.data.user.dataScope)
-  console.log('  permissions = ' + json.data.user.permissions.length + ' 项')
+  // 登录响应里 dataScope / permissions 可能缺失：权限以 /v1/authorization/me 为准。
+  console.log('  dataScope   = ' + (json.data.user.dataScope ?? '(未返回)'))
+  console.log('  permissions = ' + (json.data.user.permissions?.length ?? 0) + ' 项')
  console.log('  会话已写入   ' + SESSION_FILE)
 }

@@ -22,6 +22,15 @@ export interface DocumentRecord {
  versionId?: string
  departmentId?: string | null
  departmentName?: string
+  /**
+   * 除归属科室外还共享给哪些科室。
+   *
+   * 原型 V10.2 的「文档归属」支持多选科室，但后端 CreateTemplateRequest 只接受
+   * 单个 departmentId + campusId，这个字段因此**只在演示文库里有值**；
+   * 真实接口补齐多科室归属前，页面不会为它编造取值（缺省即 undefined，
+   * 卡片上的「·+N 科室」据此决定是否显示）。
+   */
+  sharedDepartments?: string[]
  campusId?: string | null
  campusName?: string
  description?: string
@@ -264,20 +264,42 @@ const defaultMockRecords: SigningTaskRecord[] = [
 * ② 签名图：种子任务里标了「已签署」却不带签名，会出现「列表说已签署、打开没有签名、
 *    产物列表也是空的」这种自相矛盾的状态，下载的 PDF 也缺签名。
 *    这里给缺签名的已签署任务补一张示意签名；真实签署过的任务已有签名图，不会被覆盖。
+ * ③ 文书绑定：种子的 documentId 是按早期「一类文书一个任务」写死的（tpl-001…tpl-006）。
+ *    演示文书库现在只保留一份麻精知情同意书，那些模板已经不在库里——不重绑的话
+ *    每个任务详情都会落到「未能取到模板正文」的占位版式，签名位、勾选项、页眉
+ *    这些签署链路在演示环境里一次都走不到。重绑按序号在库里取，库里以后增删文书
+ *    任务会跟着走，不会再脱钩。
 */
 function hydrateTaskDocuments(records: SigningTaskRecord[]): SigningTaskRecord[] {
-  const templates = new Map(readLocalSigningTemplates().map((template) => [template.id, template]))
+  const library = readLocalSigningTemplates()
+  const templates = new Map(library.map((template) => [template.id, template]))
+  // 只重绑到「确实有正文」的文书：换成一个同样取不到正文的模板，等于白换，
+  // 还会把任务上的文书名改成与详情内容不符的一个
+  const usable = library.filter((template) => template.contentHtml)

-  return records.map((record) => {
+  return records.map((record, index) => {
    let next = record

    if (next.status === 'signed' && !next.signatureDataUrl) {
      next = { ...next, signatureDataUrl: DEMO_SIGNATURE_DATA_URL }
    }

-    const template = templates.get(next.documentId)
+    const bound = templates.get(next.documentId)

-    if (!template?.contentHtml) {
+    // 库里已经没有这个 documentId 了。带固化正文的任务不重绑——那是留痕的一部分。
+    if (!bound && !next.documentContentHtml && usable.length) {
+      const fallback = usable[index % usable.length]
+
+      return {
+        ...next,
+        documentId: fallback.id,
+        documentName: fallback.name,
+        templateVersionId: fallback.versionId,
+        documentContentHtml: fallback.contentHtml,
+      }
+    }
+
+    if (!bound?.contentHtml) {
      return next
    }

@@ -291,8 +313,8 @@ function hydrateTaskDocuments(records: SigningTaskRecord[]): SigningTaskRecord[]

    return {
      ...next,
-      templateVersionId: next.templateVersionId || template.versionId,
-      documentContentHtml: template.contentHtml,
+      templateVersionId: next.templateVersionId || bound.versionId,
+      documentContentHtml: bound.contentHtml,
    }
  })
 }
@@ -10,7 +10,6 @@ import { useLoginStore } from '@/stores/login'
 const loginStore = useLoginStore()
 const route = useRoute()
 const router = useRouter()
-let authorizationTimer: ReturnType<typeof setInterval> | undefined
 let authorizationRefreshing = false

 async function redirectIfUnauthorized() {
@@ -44,16 +43,24 @@ function handleWindowFocus() {
  void refreshAuthorization()
 }

+/**
+ * 切标签页回来时浏览器不一定派发 window focus（窗口本身没失焦），
+ * 所以补一条 visibilitychange，保证「离开页面期间别人改了权限」能立刻收敛。
+ */
+function handleVisibilityChange() {
+  if (document.visibilityState === 'visible') {
+    void refreshAuthorization()
+  }
+}
+
 onMounted(() => {
-  authorizationTimer = setInterval(() => void refreshAuthorization(), 15_000)
  window.addEventListener('focus', handleWindowFocus)
+  document.addEventListener('visibilitychange', handleVisibilityChange)
 })

 onUnmounted(() => {
-  if (authorizationTimer) {
-    clearInterval(authorizationTimer)
-  }
  window.removeEventListener('focus', handleWindowFocus)
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
 })

 watch(
@@ -1,4 +1,7 @@
@import './theme.css';
+/* 文书渲染（签署态）的通用样式：占位符胶囊、选项、系统页眉。
+   文书库预览 / 签署工作台 / 编辑器三处共用一份，避免各写一套后配色漂移 */
+@import './signing-document.css';

 :root {
  font-family: var(--font-sans);
@@ -0,0 +1,229 @@
+/**
+ * 文书渲染的通用样式（全局）。
+ *
+ * 为什么放全局而不是各组件 scoped：同一份「签署态文书」会在三个地方出现——
+ * 文书库的签署预览、签署工作台的文书区、编辑器里的占位符胶囊。
+ * 三处各写一份 :deep() 覆盖，改一次配色要改三处，且必然漂移。
+ *
+ * 类名口径与原型 V10.2 对齐：
+ * - `.docfld`  = 填写项（占位符）。空值是虚线胶囊，填充后加 `.filled` 去掉边框与底色；
+ * - `.docopt`  = 一组选项里的单项，用 ☑ / ☐ 文本而不是 input；
+ * - `.sign-doc-header` = 系统页眉（患者信息由 HIS 带出，不进签署证据）。
+ *
+ * 约定：`.docfld` / `.docopt` 的配色只在原型基础上做**一处**改动——
+ * 原型的 `#8aa4b0` 下划线、`#c07f00` 签名橙、`#0f9d6c` 勾选绿都原样保留，
+ * 因为它们与项目主题变量（--brand / --warn / --ok）本来就是同一套色系。
+ */
+
+/* ============ 填写项：占位符胶囊 ============ */
+
+.docfld {
+  display: inline-block;
+  padding: 1px 8px;
+  margin: 0 2px;
+  color: var(--brand-d);
+  font-weight: 600;
+  white-space: nowrap;
+  background: var(--brand-l);
+  border: 1px dashed var(--brand);
+  border-radius: 5px;
+}
+
+/* 签名位：它决定签名落位，是文书里最不能漏的一项，用橙色单独区分 */
+.docfld.k-signature {
+  color: #9a5f00;
+  background: #fff7e8;
+  border-color: #c07f00;
+}
+
+/* 勾选 / 选择类：绿色；未填充时前面带一个 ☑ 提示这是可勾的 */
+.docfld.k-checkbox,
+.docfld.k-choice {
+  color: #0b7a4b;
+  background: #eafaf1;
+  border-color: #0f9d6c;
+}
+
+.docfld.k-checkbox:not(.filled)::before,
+.docfld.k-choice:not(.filled)::before {
+  font-weight: 700;
+  content: '\2611  ';
+}
+
+/* 已填充：去掉"待填写"的视觉暗示，取值直接读作正文。
+   下划线空白（.docfld-blank）也会被一并去掉底色与边框，
+   否则空值看起来和填好的值一样重 */
+.docfld.filled {
+  padding: 1px 2px;
+  font-weight: 400;
+  cursor: default;
+  background: transparent;
+  border-style: solid;
+  border-color: transparent;
+}
+
+/* 空值占位：一条下划线。原型是 inline style，这里落成类名，
+   免得渲染端拼 HTML 时再手写一段样式字符串（也就没法统一调整） */
+.docfld-blank {
+  display: inline-block;
+  min-width: 90px;
+  border-bottom: 1px solid #8aa4b0;
+}
+
+/* 文本 / 日期填写项在签署页是可补录的，控件压成与 .docfld-blank 完全一致的外观：
+   空着是一条下划线、填好了是正文。原型这类项只读（值全来自 HIS），
+   本仓库还有必须现场手填的自定义文本项，所以保留输入能力但不上表单外观。 */
+.docfld-input {
+  min-width: 90px;
+  padding: 0 2px;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  text-align: center;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #8aa4b0;
+  border-radius: 0;
+}
+
+.docfld-input:focus {
+  background: #f4fafc;
+  border-bottom-color: var(--brand);
+  outline: none;
+}
+
+/* 未填写的必填项：下划线转橙，让签署页一眼看出还有哪几处要填。
+   原型没有这一档（它的空值只有一条淡线），是为签署页可用性补的——
+   填充后胶囊边框被 .filled 去掉，否则未填项在文书上完全看不出差别 */
+.docfld.sign-field--missing .docfld-blank,
+.docfld.sign-field--missing .docfld-input {
+  border-bottom-color: #d9821f;
+}
+
+.docfld.sign-field--missing .docfld-input {
+  background: #fffdf7;
+}
+
+/* 签名图：原型固定 46px 高、垂直居中 */
+.docfld-signature {
+  height: 46px;
+  vertical-align: middle;
+}
+
+/* 未采集签名的提示文字 */
+.docfld-empty {
+  color: var(--mut);
+  font-size: 11px;
+}
+
+/* 可点击采集签名的填写项：整块胶囊都是点击热区（子节点会冒泡到宿主），
+   hover / 聚焦给出明确反馈，否则操作人员不知道这里能点 */
+.docfld.sign-field--actionable {
+  cursor: pointer;
+  background: #fffaf0;
+  border-color: #f0a21a;
+}
+
+.docfld.sign-field--actionable:hover {
+  background: #fff3d8;
+  border-color: #d98c05;
+  box-shadow: 0 0 0 2px rgb(240 162 26 / 20%);
+}
+
+.docfld.sign-field--actionable:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
+}
+
+/* 取值命中高危值（如「否」）：底色转红，签署端会额外在页脚汇总 */
+.docfld.sign-field--abnormal {
+  background: #fdf0f0;
+  border-color: #efb9bb;
+}
+
+/* ============ 选项：☑ / ☐ ============ */
+
+.docopt {
+  display: inline-block;
+  padding: 1px 3px;
+  margin-right: 12px;
+  border-radius: 4px;
+}
+
+.docopt.tick {
+  cursor: pointer;
+  user-select: none;
+}
+
+.docopt.tick:hover {
+  background: #f0f6f8;
+}
+
+.docopt.on {
+  color: #0b7a4b;
+  font-weight: 600;
+}
+
+/* ============ 存量兼容：表格勾选列与行内方框 ============ */
+
+.sign-doc-checkbox {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--brand);
+  cursor: pointer;
+}
+
+.sign-doc-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
+.sign-doc-option {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+  margin-right: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* 存量「勾选表」：表头含「勾选」列 */
+.sign-doc-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* ============ 系统页眉 ============ */
+
+/* 患者姓名 / 性别 / 年龄 / 住院号·门诊号，取值全部来自 HIS。
+   只读展示，不挂 data-sign-field —— 页眉不是"待填写项"，也不进签署证据。
+   四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width） */
+.sign-doc-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 18px;
+  padding-bottom: 10px;
+  margin-bottom: 16px;
+  border-bottom: 1.5px solid #52646e;
+}
+
+.sign-doc-header__item {
+  display: inline-flex;
+  gap: 3px;
+  align-items: baseline;
+}
+
+.sign-doc-header__label {
+  flex-shrink: 0;
+  color: #52646e;
+  font-size: 12.5px;
+}
+
+.sign-doc-header__value {
+  padding: 0 5px 1px;
+  color: #1c2b33;
+  font-size: 12.5px;
+  text-align: center;
+  border-bottom: 1px solid #52646e;
+}
@@ -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()
 }

 /** 保存演示文书库，刷新后仍可继续编辑、预览与发起签署 */
@@ -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

@@ -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
 }
@@ -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',
@@ -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
+}
+
 /**
 * 给新插入的自定义文本项分配一个在本文书里唯一的字段键。
 *
@@ -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'
+  })
 }

 /** 量固定页眉的高度（含下外边距）——它是每页要重复的那一条 */
@@ -1,4 +1,13 @@
 <script setup lang="ts">
+/**
+ * 文书库的两级筛选条（原型 V10.2 的 #libTabs / #libStatus）。
+ *
+ * 类名刻意沿用原型的 lib-tabs / lib-tab / lib-status / lib-st：这套样式在原型里
+ * 是文档库页面独有的筛选语言（胶囊 + 虚线分隔），与通用 Tabs 组件的观感不同，
+ * 换成通用组件会把「全部（8）」这类计数排版搞丢。
+ *
+ * 用 <button> 而不是原型的 <span onclick>：保留键盘可达与 aria-selected。
+ */
 import type { DepartmentTab, DocumentFilterStatus, StatusTab } from '../types'

 defineProps<{
@@ -15,14 +24,14 @@ const emit = defineEmits<{
 </script>

 <template>
-  <div class="filter-card">
-    <div class="department-tabs" role="tablist" aria-label="按科室筛选">
+  <div class="lib-filter">
+    <div class="lib-tabs" role="tablist" aria-label="按科室筛选">
      <button
        v-for="tab in departments"
        :key="tab.key ?? 'all'"
        type="button"
-        class="department-tab"
-        :class="{ active: department === tab.key }"
+        class="lib-tab"
+        :class="{ on: department === tab.key }"
        :aria-selected="department === tab.key"
        role="tab"
        @click="emit('update:department', tab.key)"
@@ -31,25 +40,26 @@ const emit = defineEmits<{
      </button>
    </div>

-    <div class="status-tabs" role="tablist" aria-label="按状态筛选">
+    <div class="lib-status" role="tablist" aria-label="按状态筛选">
      <button
        v-for="tab in statuses"
        :key="tab.key"
        type="button"
-        class="status-tab"
-        :class="{ active: status === tab.key }"
+        class="lib-st"
+        :class="{ on: status === tab.key }"
        :aria-selected="status === tab.key"
        role="tab"
        @click="emit('update:status', tab.key)"
      >
-        {{ tab.label }}<span v-if="tab.count"> · {{ tab.count }}</span>
+        {{ tab.label }}<template v-if="tab.count"> · {{ tab.count }}</template>
      </button>
    </div>
  </div>
 </template>

 <style scoped>
-.filter-card {
+/* 原型把两条页签包在 .card 里（padding:12px 16px; margin-bottom:12px），照抄 */
+.lib-filter {
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--card);
@@ -57,37 +67,40 @@ const emit = defineEmits<{
  box-shadow: var(--sh);
 }

-.department-tabs {
+/* 原型 .lib-tabs：flex-wrap + gap 8，块间距靠 margin-bottom 交给外层 */
+.lib-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
 }

-.department-tab {
+.lib-tab {
+  display: inline-flex;
+  align-items: center;
  padding: 5px 12px;
  color: var(--mut);
  font-size: 12.5px;
  background: #f4f8fa;
  border: 1px solid transparent;
  border-radius: 16px;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
+  cursor: pointer;
+  transition: 0.15s;
 }

-.department-tab:hover {
+.lib-tab:hover {
  color: var(--brand);
  background: #eaf2f5;
 }

-.department-tab.active {
+.lib-tab.on {
  color: #fff;
-  font-weight: 700;
+  font-weight: bold;
  background: var(--brand);
 }

-.status-tabs {
+/* 原型 .lib-status：与科室行之间用一条虚线分开，表达「同一维度下的第二级筛选」 */
+.lib-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
@@ -95,27 +108,27 @@ const emit = defineEmits<{
  border-top: 1px dashed var(--line);
 }

-.status-tab {
+.lib-st {
+  display: inline-flex;
+  align-items: center;
  padding: 4px 10px;
  color: var(--mut);
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
+  cursor: pointer;
+  transition: 0.15s;
 }

-.status-tab:hover {
+.lib-st:hover {
  color: var(--brand);
  border-color: var(--brand);
 }

-.status-tab.active {
+.lib-st.on {
  color: var(--brand-d);
-  font-weight: 700;
+  font-weight: bold;
  background: var(--brand-l);
  border-color: var(--brand);
 }
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { readLibraryStatus } from '../library'
+import type { DocumentHistoryRow, DocumentTemplate } from '../types'
+
+const props = defineProps<{
+  visible: boolean
+  template: DocumentTemplate | null
+  rows: DocumentHistoryRow[]
+  loading: boolean
+  error: boolean
+  /** 演示文库只保存当前版本，弹窗要如实说明，别让科室以为这就是全部历史 */
+  isMock: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  /** 查看某个历史版本的正文（只读） */
+  'view-version': [versionId: string]
+}>()
+
+const sub = computed(() => {
+  if (!props.template) {
+    return ''
+  }
+
+  const status = readLibraryStatus(props.template)
+
+  return `${props.template.name} · ${props.template.code || '未编号'} · 当前 ${props.template.version}（${status}）`
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible && template" class="dialog-mask" @click.self="emit('close')">
+      <section
+        class="dialog-card history-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="history-dialog-title"
+      >
+        <header class="dialog-header">
+          <div class="dialog-heading">
+            <strong id="history-dialog-title">📄 文档历史记录</strong>
+            <span>{{ sub }}</span>
+          </div>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+
+        <div class="dialog-body">
+          <p v-if="loading" class="history-state">正在加载历史记录…</p>
+
+          <p v-else-if="error" class="history-state history-state--error">
+            历史记录加载失败，请确认后端模板版本接口可访问后重试。
+          </p>
+
+          <template v-else-if="rows.length">
+            <div class="table-scroll">
+              <table class="history-table">
+                <thead>
+                  <tr>
+                    <th class="col-version">版本</th>
+                    <th class="col-operator">操作人</th>
+                    <th class="col-time">时间</th>
+                    <th>操作</th>
+                    <th>说明</th>
+                    <th class="col-action">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in rows" :key="row.id">
+                    <td><b>{{ row.version }}</b></td>
+                    <td>{{ row.operator }}</td>
+                    <td>{{ row.operatedAt || '—' }}</td>
+                    <td>{{ row.action }}</td>
+                    <td class="cell-note">{{ row.note }}</td>
+                    <td>
+                      <span v-if="row.isCurrent" class="current-badge">当前</span>
+                      <button
+                        v-else
+                        type="button"
+                        class="row-button"
+                        title="只读查看该版本的正文"
+                        @click="emit('view-version', row.id)"
+                      >
+                        查看
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <p v-if="isMock" class="history-hint">
+              演示文库只保留当前版本，因此这里只有一条。真实模式下会列出该文书的全部历史版本。
+            </p>
+          </template>
+
+          <p v-else class="history-state">该文书还没有版本记录。</p>
+        </div>
+
+        <footer class="dialog-footer">
+          <span>
+            每次保存 / 发布自动生成一条版本记录（版本号 · 操作人 · 时间 · 说明），全程可追溯、不可删除；
+            已发布版本按任务固化，历史任务仍按当时版本渲染。
+          </span>
+          <button type="button" class="action-button" @click="emit('close')">关闭</button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 20;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.dialog-card {
+  display: flex;
+  width: 760px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  flex-direction: column;
+  margin: auto;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+}
+
+.dialog-header {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-heading {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dialog-heading strong {
+  color: var(--ink);
+  font-size: 15px;
+}
+
+.dialog-heading span {
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-close:hover {
+  color: var(--ink);
+}
+
+.dialog-body {
+  flex: 1;
+  padding: 14px 18px;
+  overflow-y: auto;
+}
+
+.table-scroll {
+  overflow-x: auto;
+}
+
+.history-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+
+.history-table th,
+.history-table td {
+  padding: 8px 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--line);
+}
+
+.history-table th {
+  color: var(--mut);
+  font-size: 11.5px;
+  font-weight: 700;
+  white-space: nowrap;
+  background: #f8fbfc;
+}
+
+.history-table td {
+  color: var(--ink);
+  vertical-align: top;
+}
+
+.cell-note {
+  color: var(--mut);
+}
+
+.col-version {
+  width: 90px;
+}
+
+.col-operator {
+  width: 170px;
+}
+
+.col-time {
+  width: 140px;
+}
+
+.col-action {
+  width: 80px;
+}
+
+.current-badge {
+  padding: 2px 8px;
+  color: var(--ok);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+  background: var(--ok-l);
+  border-radius: 10px;
+}
+
+.row-button {
+  padding: 3px 10px;
+  color: var(--brand);
+  font-size: 11.5px;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 5px;
+}
+
+.row-button:hover {
+  background: var(--brand-l);
+}
+
+.history-state {
+  padding: 28px 0;
+  margin: 0;
+  color: var(--mut);
+  font-size: 13px;
+  text-align: center;
+}
+
+.history-state--error {
+  color: var(--err);
+}
+
+.history-hint {
+  margin: 12px 0 0;
+  color: var(--mut);
+  font-size: 11.5px;
+  line-height: 1.7;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  color: var(--mut);
+  font-size: 11.5px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+  border-radius: 0 0 14px 14px;
+}
+
+.dialog-footer span {
+  flex: 1;
+  line-height: 1.7;
+}
+
+.action-button {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.action-button:hover {
+  background: var(--brand-d);
+}
+</style>
@@ -7,10 +7,8 @@ withDefaults(
    total: number
    /** 只在演示模式下展示「重置演示数据」：真实环境不该出现这个自测入口 */
    showReset?: boolean
-    /** 模板包导出接口尚未接入，先只在演示模式展示入口；功能上线后放开这里即可 */
-    showExport?: boolean
  }>(),
-  { showReset: false, showExport: false },
+  { showReset: false },
 )

 const emit = defineEmits<{
@@ -26,42 +24,22 @@ function handleInput(event: Event) {
 </script>

 <template>
-  <div class="library-header">
-    <div class="library-title">
-      <h2>文档库管理</h2>
-      <p>
-        按科室分类的知情同意书模板库，支持预览、编辑与版本管理。
-        <span>共 {{ total }} 份模板</span>
-      </p>
-    </div>
+  <!--
+    原型 V10.2：文档库顶部不再重复页面标题（左侧导航已经写着「文档库管理」），
+    只剩一行「搜索框 + 共 N 份模板 + 导出模板包 + ＋新增文档」。
+  -->
+  <div class="lib-header">
+    <input
+      :value="modelValue"
+      class="lib-search"
+      type="search"
+      placeholder="搜索模板名 / 编号 / 科室 / 分类"
+      aria-label="搜索模板名称、编号、科室或分类"
+      @input="handleInput"
+    />

-    <div class="library-tools">
-      <input
-        :value="modelValue"
-        class="library-search"
-        type="search"
-        placeholder="搜索模板名称 / 编号 / 科室"
-        aria-label="搜索模板名称、编号或科室"
-        @input="handleInput"
-      />
-      <button
-        v-permission="DOC_TEMPLATE_PERMISSIONS.create"
-        type="button"
-        class="tool-button primary"
-        @click="emit('add')"
-      >
-        <span aria-hidden="true">＋</span>
-        新增文档
-      </button>
-      <button
-        v-if="showExport"
-        v-permission="DOC_TEMPLATE_PERMISSIONS.export"
-        type="button"
-        class="tool-button secondary"
-        @click="emit('export')"
-      >
-        导出模板包
-      </button>
+    <div class="lib-tools">
+      <span class="lib-count">共 {{ total }} 份模板</span>
      <button
        v-if="showReset"
        type="button"
@@ -71,12 +49,29 @@ function handleInput(event: Event) {
      >
        重置演示数据
      </button>
+      <button
+        v-permission="DOC_TEMPLATE_PERMISSIONS.export"
+        type="button"
+        class="tool-button secondary"
+        @click="emit('export')"
+      >
+        导出模板包
+      </button>
+      <button
+        v-permission="DOC_TEMPLATE_PERMISSIONS.create"
+        type="button"
+        class="tool-button primary"
+        @click="emit('add')"
+      >
+        <span aria-hidden="true">＋</span>
+        新增文档
+      </button>
    </div>
  </div>
 </template>

 <style scoped>
-.library-header {
+.lib-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
@@ -85,40 +80,9 @@ function handleInput(event: Event) {
  margin-bottom: 14px;
 }

-.library-title {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.library-title h2 {
-  margin: 0;
-  color: var(--ink);
-  font-size: 17px;
-  line-height: 1.4;
-}
-
-.library-title p {
-  margin: 0;
-  color: var(--mut);
-  font-size: 12.5px;
-}
-
-.library-title p span {
-  margin-left: 8px;
-  color: var(--brand);
-  font-weight: 700;
-}
-
-.library-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  align-items: center;
-}
-
-.library-search {
-  width: 240px;
+.lib-search {
+  flex: 1;
+  max-width: 420px;
  padding: 6px 12px;
  color: var(--ink);
  font-size: 12.5px;
@@ -127,16 +91,34 @@ function handleInput(event: Event) {
  border-radius: 8px;
 }

-.library-search:focus {
+.lib-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(14 110 140 / 10%);
 }

+.lib-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.lib-count {
+  color: var(--mut);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
 .tool-button {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
+  white-space: nowrap;
  border-radius: 7px;
  transition:
    background-color 0.15s ease,
@@ -177,11 +159,12 @@ function handleInput(event: Event) {
 }

@media (max-width: 760px) {
-  .library-tools {
+  .lib-tools {
    width: 100%;
+    margin-left: 0;
  }

-  .library-search {
+  .lib-search {
    flex: 1;
    min-width: 180px;
  }
@@ -3,14 +3,17 @@ import { computed, nextTick, ref, watch } from 'vue'

 import {
  buildSigningDocumentHtml,
+  collectSelectedItemsFromRoot,
  describeFieldProgress,
+  OPTION_TICK_SELECTOR,
  readAnswersFromRoot,
-  type SigningDocumentData,
+  toggleOptionAt,
  type SigningFieldProgress,
 } from '@/utils/signing-document'

-import { readStatusLabel, readStatusTone } from '../mock'
-import type { DocumentTemplate } from '../types'
+import { canInitiateSigning, readLibraryStatus, readStatusTone } from '../library'
+import { PREVIEW_PATIENT as previewPatient } from '../sample-patient'
+import type { DocumentLibraryStatus, DocumentTemplate } from '../types'

 const props = defineProps<{
  visible: boolean
@@ -25,22 +28,8 @@ const emit = defineEmits<{
 }>()

 /**
- * 签署预览用的示例患者快照（脱敏演示数据）。
- *
- * 创建文书时还没有真实签署任务，用固定示例值让科室看到占位符被填充后的版式；
- * 真实签署仍以任务创建时的患者/就诊快照为准。
- * 这份数据只服务于「签署预览」这个演示页签，因此留在组件内，
- * 不再从页面 mock.ts 导出——那会让"演示数据"渗透到文书库的其它部分。
+ * 签署预览用的示例患者快照见 ../sample-patient（编辑器弹窗的「签署预览」共用同一份）。
 */
-const previewPatient: SigningDocumentData = {
-  patientName: '李某某',
-  sex: '男',
-  age: 46,
-  visitNo: 'V20260914001',
-  visitDate: '2026-09-14',
-  phone: '138****5678',
-  signedAt: '',
-}

 /** 预览页签：「文书内容」看原始定稿，「签署预览」看占位符填充与勾选交互化后的样子 */
 const activeTab = ref<'content' | 'signing'>('content')
@@ -81,17 +70,22 @@ watch(
  },
 )

-const statusLabel = computed(() => (props.template ? readStatusLabel(props.template) : ''))
+/** 状态口径统一走 library.ts：卡片、页签、预览三处必须是同一档 */
+const libraryStatus = computed<DocumentLibraryStatus>(() =>
+  props.template ? readLibraryStatus(props.template) : '草稿',
+)

-/** 徽标配色与文书卡片同口径：草稿/待审核/已驳回/已发布/已归档各不相同 */
-const statusTone = computed(() => (props.template ? readStatusTone(props.template) : 'draft'))
+const statusLabel = computed(() => libraryStatus.value)
+
+/** 徽标配色与文书卡片同口径（见 library.ts 的 STATUS_TONES） */
+const statusTone = computed(() => readStatusTone(libraryStatus.value))

 /**
- * 与文书卡片保持同一口径：只有已发布（后端 APPROVED / PUBLISHED）才能发起签署。
- * 不放行 review —— 它同时承载待审核与已驳回，两者都未定稿。
+ * 与文书卡片保持同一口径：只有「启用中」的文书能发起签署。
+ * 「需复审」不放行——它同时承载待审核与已驳回，两者都未定稿。
 */
 const canInitiate = computed(
-  () => Boolean(props.template?.contentHtml) && props.template?.status === 'published',
+  () => Boolean(props.template?.contentHtml) && canInitiateSigning(libraryStatus.value),
 )

 // 预置文书的 contentHtml 是完整 HTML 文档（自带版式样式）；
@@ -160,9 +154,27 @@ function syncPreviewFields() {

  const answers = readAnswersFromRoot(body)
  signingProgress.value = describeFieldProgress(body, answers)
-  signingSelection.value = Array.from(
-    body.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox:checked'),
-  ).map((input) => input.getAttribute('data-sign-item') ?? '')
+  signingSelection.value = collectSelectedItemsFromRoot(body)
+}
+
+/**
+ * 预览里的 ☑ / ☐ 就地切换。
+ * 选项渲染成文本（原型口径），不会触发 change 事件，必须自己接 click；
+ * 切换判据在 utils/signing-document 的 toggleOptionAt 里，与签署端共用一份。
+ */
+function handlePreviewClick(event: MouseEvent) {
+  const body = signingBodyRef.value
+  const target = event.target
+
+  if (!body || !(target instanceof Element)) {
+    return
+  }
+
+  const option = target.closest<HTMLElement>(OPTION_TICK_SELECTOR)
+
+  if (option && toggleOptionAt(body, option)) {
+    syncPreviewFields()
+  }
 }
 </script>

@@ -224,7 +236,7 @@ function syncPreviewFields() {
          <template v-else-if="template.contentHtml && activeTab === 'signing'">
            <p class="preview-note">
              按签署时效果渲染：占位符已用示例患者「{{ previewPatient.patientName }}」填充，
-              表头含「勾选」的表格已转为勾选框，可直接勾选确认交互效果（预览不保存勾选结果）。
+              空白处是待补录的下划线、☑ / ☐ 可直接点击确认交互效果（预览不保存结果）。
            </p>
            <!-- eslint-disable vue/no-v-html -- 内容为本系统定稿的文书 HTML（编辑器产出、仅医务人员可改），非任意用户输入 -->
            <div
@@ -232,6 +244,7 @@ function syncPreviewFields() {
              class="signing-preview"
              @change="syncPreviewFields"
              @input="syncPreviewFields"
+              @click="handlePreviewClick"
              v-html="signingPreviewHtml"
            />
            <!-- eslint-enable vue/no-v-html -->
@@ -382,9 +395,10 @@ function syncPreviewFields() {
  background: var(--brand-l);
 }

-/* 状态徽标配色：与文书卡片同一套色调，草稿/待审核/已驳回不再一律显示成绿色 */
+/* 状态徽标配色：与文书卡片同一套色调（见 library.ts 的 STATUS_TONES） */
 .status-badge.tone-draft,
-.status-badge.tone-archived {
+.status-badge.tone-archived,
+.status-badge.tone-stopped {
  color: #8a9aa3;
  background: #eceef0;
 }
@@ -394,12 +408,7 @@ function syncPreviewFields() {
  background: var(--warn-l);
 }

-.status-badge.tone-rejected {
-  color: var(--err);
-  background: var(--err-l);
-}
-
-.status-badge.tone-published {
+.status-badge.tone-enabled {
  color: var(--ok);
  background: var(--ok-l);
 }
@@ -503,37 +512,6 @@ function syncPreviewFields() {
  max-width: 100%;
 }

-/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
-   四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
-.signing-preview :deep(.sign-doc-header) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 18px;
-  padding-bottom: 10px;
-  margin-bottom: 16px;
-  border-bottom: 1.5px solid #52646e;
-}
-
-.signing-preview :deep(.sign-doc-header__item) {
-  display: inline-flex;
-  gap: 3px;
-  align-items: baseline;
-}
-
-.signing-preview :deep(.sign-doc-header__label) {
-  flex-shrink: 0;
-  color: #52646e;
-  font-size: 12.5px;
-}
-
-.signing-preview :deep(.sign-doc-header__value) {
-  padding: 0 5px 1px;
-  color: #1c2b33;
-  font-size: 12.5px;
-  text-align: center;
-  border-bottom: 1px solid #52646e;
-}
-
 .signing-preview :deep(table) {
  width: 100%;
  margin: 8px 0;
@@ -557,123 +535,9 @@ function syncPreviewFields() {
  margin: 0;
 }

-.signing-preview :deep(.sign-doc-checkbox) {
-  width: 15px;
-  height: 15px;
-  accent-color: var(--brand);
-  cursor: pointer;
-}
-
-/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
-.signing-preview :deep(.sign-doc-option) {
-  display: inline-flex;
-  gap: 3px;
-  align-items: center;
-  margin-right: 14px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.signing-preview :deep(.sign-doc-signature) {
-  max-width: 150px;
-  max-height: 52px;
-  vertical-align: middle;
-}
-
-/* 填写项：签署预览里按签署时的控件外观渲染，样式与签署端保持一致 */
-.signing-preview :deep(.sign-field) {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding: 2px 7px;
-  margin: 0 2px;
-  vertical-align: middle;
-  background: #f7fbfd;
-  border: 1px solid #d4e3e8;
-  border-radius: 5px;
-}
-
-.signing-preview :deep(.sign-field__label) {
-  flex-shrink: 0;
-  color: #587786;
-  font-size: 11.5px;
-}
-
-.signing-preview :deep(.sign-field__required) {
-  margin-left: 2px;
-  color: var(--err);
-}
-
-.signing-preview :deep(.sign-field__control) {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.signing-preview :deep(.sign-field__input) {
-  width: 9em;
-  min-width: 0;
-  padding: 1px 5px;
-  color: #1c2b33;
-  font: inherit;
-  font-size: 12.5px;
-  background: #fff;
-  border: 1px solid #cfe0e6;
-  border-radius: 4px;
-}
-
-.signing-preview :deep(.sign-field__input:focus) {
-  border-color: var(--brand);
-  outline: none;
-}
-
-.signing-preview :deep(.sign-field__choices) {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.signing-preview :deep(.sign-field__radio),
-.signing-preview :deep(.sign-field__checkbox) {
-  width: 15px;
-  height: 15px;
-  accent-color: var(--brand);
-}
-
-.signing-preview :deep(.sign-field__signature-empty) {
-  padding: 12px 18px;
-  color: #a96900;
-  font-size: 11px;
-  background: #fff9ec;
-  border: 1px dashed #f0a21a;
-  border-radius: 4px;
-}
-
-.signing-preview :deep(.sign-field--signature) {
-  padding: 3px 8px;
-}
-
-.signing-preview :deep(.sign-field--signature .sign-field__control) {
-  min-width: 150px;
-  justify-content: center;
-}
-
-.signing-preview :deep(.sign-field--abnormal) {
-  background: #fdf0f0;
-  border-color: #efb9bb;
-}
-
-.signing-preview :deep(.sign-field--abnormal .sign-field__label) {
-  color: #a42e34;
-}
-
-.signing-preview :deep(.sign-field__badge) {
-  padding: 1px 6px;
-  color: #fff;
-  font-size: 10px;
-  background: var(--err);
-  border-radius: 8px;
-}
+/* 填写项胶囊、选项 ☑ / ☐、系统页眉的样式在 styles/signing-document.css（全局）：
+   同一份签署态文书会在文书库预览、签署工作台与编辑器三处出现，各写一份必然漂移。
+   这里只保留预览容器自己的版式。 */

 .signing-selection {
  padding: 8px 12px;
@@ -0,0 +1,485 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+
+import type { DepartmentRecord } from '@/api/management/types'
+
+import { DEFAULT_DOCUMENT_TYPE, DOCUMENT_TYPES, GENERAL_OWNERSHIP } from '../library'
+import { DOC_TEMPLATE_PERMISSIONS } from '../permissions'
+import type { DocumentPropsForm, DocumentTemplate } from '../types'
+
+const props = defineProps<{
+  visible: boolean
+  /** null 表示新增文档 */
+  template: DocumentTemplate | null
+  /** 可归属的科室（真实模式取组织接口，演示模式取演示字典） */
+  departments: DepartmentRecord[]
+  /**
+   * 是否可以把文档设为「通用（全院）」。
+   *
+   * 原型 canSetGeneral() 只放给系统管理员 / 医务管理；这里由页面判定后传进来，
+   * 弹窗不自己去读角色——弹窗只负责表单。
+   */
+  canSetGeneral: boolean
+  /**
+   * 演示模式。
+   *
+   * 真实模式下「版本号」是只读展示：版本由后端在每次保存正文时递增生成
+   * （CreateTemplateVersionRequest 的 versionNo 是可选字段，前端不填就由后端编），
+   * 让科室手填一个和后端对不上的号，只会让卡片上的版本显示变成假信息。
+   */
+  isMock: boolean
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  submit: [form: DocumentPropsForm]
+}>()
+
+const isCreate = computed(() => !props.template)
+const title = computed(() => (isCreate.value ? '新增文档' : '编辑文档属性'))
+const sub = computed(() =>
+  props.template
+    ? `${props.template.name} · ${props.template.code || '未编号'}`
+    : '先创建文书属性，保存后进入「编辑正文」添加 Word 内容',
+)
+const submitLabel = computed(() => (isCreate.value ? '创建并编辑正文' : '保存属性'))
+
+const form = reactive<DocumentPropsForm>({
+  name: '',
+  category: DEFAULT_DOCUMENT_TYPE,
+  versionNo: 'v1.0.0',
+  ownership: [],
+  description: '',
+})
+
+/**
+ * 归属勾选列表。
+ * 顺序与原型 docDeptOpts 一致：科室名在前、「通用（全院）」在最后，
+ * 勾了通用（全院）就等于全院可见，其余科室勾选不再参与落库。
+ */
+const ownershipOptions = computed(() => {
+  const names = props.departments.map((department) => department.name)
+
+  return props.canSetGeneral ? [...names, GENERAL_OWNERSHIP] : names
+})
+
+const generalSelected = computed(() => form.ownership.includes(GENERAL_OWNERSHIP))
+
+function toggleOwnership(option: string) {
+  if (option === GENERAL_OWNERSHIP) {
+    // 勾上「通用（全院）」就清掉科室勾选，取消则回到空选择——
+    // 两种选择混在一起会让「到底归属哪儿」没有唯一答案
+    form.ownership = generalSelected.value ? [] : [GENERAL_OWNERSHIP]
+    return
+  }
+
+  if (generalSelected.value) {
+    form.ownership = []
+  }
+
+  const index = form.ownership.indexOf(option)
+
+  if (index >= 0) {
+    form.ownership.splice(index, 1)
+  } else {
+    form.ownership.push(option)
+  }
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (!visible) {
+      return
+    }
+
+    const template = props.template
+
+    Object.assign(form, {
+      id: template?.id,
+      name: template?.name ?? '',
+      category: template?.category || DEFAULT_DOCUMENT_TYPE,
+      versionNo: template?.version ?? 'v1.0.0',
+      ownership: template
+        ? template.departmentId
+          ? [template.departmentName ?? ''].filter(Boolean)
+          : [GENERAL_OWNERSHIP]
+        : // 新增时预选当前用户所属科室（对得上就直接用，对不上就空着让科室自己勾）
+          [],
+      description: template?.description ?? '',
+    })
+  },
+  { immediate: true },
+)
+
+function submit() {
+  const name = form.name.trim()
+
+  if (!name) {
+    ElMessage.error('请填写文书名称')
+    return
+  }
+
+  if (!form.ownership.length) {
+    ElMessage.error('请至少选择一个归属科室')
+    return
+  }
+
+  emit('submit', {
+    ...(form.id ? { id: form.id } : {}),
+    name,
+    category: form.category,
+    versionNo: form.versionNo.trim() || 'v1.0.0',
+    ownership: [...form.ownership],
+    description: form.description.trim(),
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="dialog-mask" role="presentation" @click.self="emit('close')">
+      <section class="props-dialog" role="dialog" aria-modal="true" aria-labelledby="props-title">
+        <header class="dialog-header">
+          <div class="dialog-heading">
+            <strong id="props-title">{{ title }}</strong>
+            <span>{{ sub }}</span>
+          </div>
+          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
+            ×
+          </button>
+        </header>
+
+        <div class="dialog-body">
+          <p class="section-label">① 基本信息</p>
+
+          <div class="form-grid">
+            <label class="form-field span-2">
+              <span>文书名称 <i>*</i></span>
+              <input v-model="form.name" type="text" placeholder="例：麻醉药品、精神药品知情同意书" />
+            </label>
+
+            <label class="form-field">
+              <span>文档类型</span>
+              <select v-model="form.category">
+                <option v-for="type in DOCUMENT_TYPES" :key="type" :value="type">{{ type }}</option>
+              </select>
+            </label>
+
+            <div class="form-field">
+              <span>版本号</span>
+              <input v-if="isMock" v-model="form.versionNo" type="text" placeholder="v1.0.0" />
+              <span v-else class="auto-version">由系统按 vN 自动生成</span>
+            </div>
+
+            <div class="form-field span-2">
+              <span>文档归属 <i>*</i></span>
+              <div class="ownership">
+                <button
+                  v-for="option in ownershipOptions"
+                  :key="option"
+                  type="button"
+                  class="ownership-chip"
+                  :class="{ 'is-on': form.ownership.includes(option) }"
+                  @click="toggleOwnership(option)"
+                >
+                  {{ option }}
+                </button>
+              </div>
+              <p class="field-tip">
+                勾选科室设置可见范围，支持多科室与通用（全院）。勾选「通用（全院）」后各科室均可见。
+              </p>
+            </div>
+
+            <label class="form-field span-2">
+              <span>文书说明</span>
+              <textarea
+                v-model="form.description"
+                rows="2"
+                placeholder="显示在文书卡片上的简介"
+              />
+            </label>
+          </div>
+        </div>
+
+        <footer class="dialog-footer">
+          <p>
+            {{
+              isCreate
+                ? '创建后自动进入类 Word 编辑器：可编写正文、导入 .docx 文件或插入签署占位符，保存后生效。'
+                : '属性与正文分开维护：此处只修改文档基本信息与归属；正文请在文档卡片点「编辑正文」。'
+            }}
+          </p>
+          <button type="button" class="footer-button secondary" @click="emit('close')">
+            取消
+          </button>
+          <button
+            v-permission.disable="isCreate ? DOC_TEMPLATE_PERMISSIONS.create : DOC_TEMPLATE_PERMISSIONS.props"
+            type="button"
+            class="footer-button primary"
+            :disabled="saving"
+            @click="submit"
+          >
+            {{ saving ? '保存中…' : submitLabel }}
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.dialog-mask {
+  position: fixed;
+  z-index: 20;
+  inset: 0;
+  display: flex;
+  padding: 16px;
+  overflow-y: auto;
+  background: rgb(9 40 52 / 45%);
+}
+
+.props-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 660px;
+  max-width: 96vw;
+  max-height: calc(100vh - 32px);
+  margin: auto;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: var(--sh-modal);
+}
+
+.dialog-header {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dialog-heading {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.dialog-heading strong {
+  color: var(--ink);
+  font-size: 15px;
+}
+
+.dialog-heading span {
+  overflow: hidden;
+  color: var(--mut);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  padding: 0;
+  margin-left: auto;
+  color: var(--mut);
+  font-size: 20px;
+  line-height: 1;
+  background: transparent;
+}
+
+.dialog-close:hover {
+  color: var(--ink);
+}
+
+.dialog-body {
+  flex: 1;
+  padding: 14px 18px;
+  overflow-y: auto;
+}
+
+.section-label {
+  margin: 0 0 10px;
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.form-field {
+  display: block;
+  min-width: 0;
+}
+
+.form-field.span-2 {
+  grid-column: span 2;
+}
+
+.form-field > span {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--ink);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.form-field > span i {
+  color: var(--err);
+  font-style: normal;
+}
+
+.form-field input,
+.form-field select,
+.form-field textarea {
+  width: 100%;
+  padding: 7px 10px;
+  color: var(--ink);
+  font: inherit;
+  font-size: 13px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.form-field textarea {
+  resize: vertical;
+}
+
+.form-field input:focus,
+.form-field select:focus,
+.form-field textarea:focus {
+  border-color: var(--brand);
+  outline: none;
+}
+
+/*
+ * 真实模式的版本号只读展示。
+ * 必须显式覆盖 `.form-field > span` 的标签样式——它是同一层的第二个 span，
+ * 不覆盖就会变成和「版本号」标签一样的加粗小字。
+ */
+.form-field > span.auto-version {
+  display: flex;
+  align-items: center;
+  min-height: 33px;
+  padding: 7px 10px;
+  margin-bottom: 0;
+  color: var(--mut);
+  font-size: 12.5px;
+  font-weight: 400;
+  background: #f4f8fa;
+  border: 1px dashed var(--line);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.ownership {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ownership-chip {
+  padding: 4px 11px;
+  color: var(--mut);
+  font-size: 12px;
+  background: #f4f8fa;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+}
+
+.ownership-chip:hover {
+  color: var(--brand);
+  border-color: var(--brand);
+}
+
+.ownership-chip.is-on {
+  color: var(--brand-d);
+  font-weight: 700;
+  background: var(--brand-l);
+  border-color: var(--brand);
+}
+
+.field-tip {
+  margin: 6px 0 0;
+  color: var(--mut);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.dialog-footer {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 18px;
+  background: #f8fbfc;
+  border-top: 1px solid var(--line);
+}
+
+.dialog-footer p {
+  flex: 1;
+  margin: 0;
+  color: var(--mut);
+  font-size: 11.5px;
+  line-height: 1.6;
+}
+
+.footer-button {
+  flex-shrink: 0;
+  padding: 7px 13px;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 7px;
+}
+
+.footer-button.secondary {
+  color: var(--brand);
+  background: #fff;
+  border: 1px solid var(--brand);
+}
+
+.footer-button.primary {
+  color: #fff;
+  background: var(--brand);
+  border: 1px solid var(--brand);
+}
+
+.footer-button:hover:not(:disabled) {
+  filter: brightness(0.96);
+}
+
+.footer-button:disabled {
+  color: #aebbc0;
+  cursor: not-allowed;
+  background: #f1f5f6;
+  border-color: #dce5e8;
+}
+
+@media (max-width: 680px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-field.span-2 {
+    grid-column: span 1;
+  }
+
+  .dialog-footer {
+    flex-wrap: wrap;
+  }
+
+  .dialog-footer p {
+    width: 100%;
+    flex: none;
+  }
+}
+</style>
@@ -3,185 +3,169 @@ import { computed } from 'vue'

 import type { TemplateVersionAction } from '@/api/management/documents'

-import type { DocumentTemplate } from '../types'
-import { readStatusLabel, readStatusTone } from '../mock'
+import {
+  canInitiateSigning,
+  canToggleStatus,
+  DOCUMENT_STATUS_DOT,
+  isGeneralOwnership,
+  readLibraryStatus,
+  readStatusTone,
+} from '../library'
 import { DOC_TEMPLATE_PERMISSIONS, workflowPermission } from '../permissions'
+import type { DocumentTemplate } from '../types'

 const props = defineProps<{
  template: DocumentTemplate
-  /** 演示模式下「删除」是真删；真实模式下语义是下架（模板无 DELETE 接口，走归档） */
+  /**
+   * 演示模式。
+   *
+   * 真实模式下卡片只有「停用 / 启用」这一个状态动作：后端菜单资源树里的
+   * 「发布 / 提交审核」按钮虽在，但原型 V10.2 已经抛弃那条工作流，
+   * 科室侧不该再看到「提交审核」这一步（草稿的送审改由属性/正文弹窗完成，
+   * 或直接由医务管理放行）。
+   */
  isMock: boolean
 }>()

 const emit = defineEmits<{
  preview: [template: DocumentTemplate]
-  edit: [template: DocumentTemplate]
-  versions: [template: DocumentTemplate]
+  'edit-props': [template: DocumentTemplate]
+  'edit-content': [template: DocumentTemplate]
+  history: [template: DocumentTemplate]
+  'toggle-status': [template: DocumentTemplate]
+  'submit-review': [template: DocumentTemplate]
  initiate: [template: DocumentTemplate]
-  remove: [template: DocumentTemplate]
-  workflow: [template: DocumentTemplate, action: TemplateVersionAction]
 }>()

-const statusLabel = computed(() => readStatusLabel(props.template))
+const status = computed(() => readLibraryStatus(props.template))
+const tone = computed(() => readStatusTone(status.value))
+const dotColor = computed(() => DOCUMENT_STATUS_DOT[tone.value])

-/** 配色按后端状态分组取（待审核与已驳回不能共用一个颜色） */
-const statusTone = computed(() => readStatusTone(props.template))
+const isGeneral = computed(() => isGeneralOwnership(props.template))
+const ownershipLabel = computed(() =>
+  isGeneral.value ? '🌐 全院通用' : `🏥 ${props.template.departmentName ?? '未知科室'}`,
+)

-/** 只有已发布 / 待复审的模板可以发起签署；草稿与已归档不可用 */
-const hasInitiableVersion = computed(() => Boolean(props.template.currentVersionId || props.isMock))
+/**
+ * 归属徽标上的「·+N 科室」。
+ *
+ * sharedDepartments 只在演示文库里有值（后端 CreateTemplateRequest 只接受单个
+ * departmentId），所以真实模式下这里自然为 0、标签不显示后缀——
+ * 不给真实数据编一个后端没存的共享清单。
+ */
+const sharedCount = computed(() => props.template.sharedDepartments?.length ?? 0)

+/** 只有「启用中」能发起签署；其余状态要么没定稿，要么已下线 */
+const canInitiate = computed(() => canInitiateSigning(status.value))
 const initiateTitle = computed(() =>
-  hasInitiableVersion.value ? '用此模板发起签署' : '仅已发布或待复审的模板可发起签署',
+  canInitiate.value ? '用此文书发起签署' : '仅「启用中」的文书可发起签署',
 )

-/**
- * 版本工作流主动作。
- *
- * 模板状态只能由后端工作流推进，前端不自行改写 status，因此这里按后端原始状态
- * （backendStatus，不是归一后的 status）给出「当前该做的下一步」，把文书从草稿推到可签署。
- *
- * 不放在这里的两种状态：
- * - APPROVED / PUBLISHED 已经可签署，走「发起」按钮；
- * - ARCHIVED 是终态，没有任何可执行动作。
- */
-const primaryAction = computed<{ key: TemplateVersionAction; label: string } | null>(() => {
-  switch (props.template.backendStatus) {
-    case 'DRAFT':
-      return { key: 'submit-review', label: '提交审核' }
-    case 'PENDING_REVIEW':
-      return { key: 'approve', label: '审核通过' }
-    case 'REJECTED':
-      return { key: 'submit-review', label: '重新提交' }
-    case 'DISABLED':
-      return { key: 'publish', label: '重新启用' }
-    case 'APPROVED':
-      return { key: 'publish', label: '发布' }
-    default:
-      return null
-  }
-})
+const canToggle = computed(() => canToggleStatus(status.value))
+const toggleLabel = computed(() => (status.value === '停用' ? '启用' : '停用'))

-/**
- * 版本工作流次要动作。
- *
- * 「驳回」不能只做成主动作的反面：审核通过和驳回是审核人的一对选择，
- * 必须同时可见，否则待审核的文书就只能通过、不能打回。
- */
-const secondaryActions = computed<{ key: TemplateVersionAction; label: string; title: string }[]>(
-  () => {
-    if (props.template.backendStatus === 'PENDING_REVIEW') {
-      return [
-        {
-          key: 'reject',
-          label: '驳回',
-          title: '驳回后需填写原因，科室按意见修改并重新提交',
-        },
-      ]
-    }
+/** 草稿的「提交审核」只在演示模式露出，真实模式不给这个入口 */
+const showSubmitReview = computed(() => props.isMock && status.value === '草稿')

-    return []
-  },
+/** 停用/启用走的是后端版本动作：停用 → disable，启用 → publish */
+const toggleAction = computed<TemplateVersionAction>(() =>
+  status.value === '停用' ? 'publish' : 'disable',
 )

-/**
- * 本次交付暂不包含「版本历史」与「删除 / 下架」入口，先隐藏对应按钮。
- * 权限码已按 doc:template:hist / doc:template:stop 接好，需要恢复时把开关改回 true 即可。
- */
-const showVersionAction = false
-const showRemoveAction = false
-
-const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架此文书'))
+// 按钮文案与权限码的对应关系集中在模板里，避免多处各写一份
+const permissions = DOC_TEMPLATE_PERMISSIONS
+const togglePermission = computed(() => workflowPermission(toggleAction.value))
 </script>

 <template>
-  <article class="template-card">
-    <div class="template-head">
-      <h3 :title="template.name">{{ template.name }}</h3>
-      <span class="template-status" :class="'status-' + statusTone">
-        <i aria-hidden="true" />
-        {{ statusLabel }}
+  <article class="tpl-card">
+    <div class="tpl-hd">
+      <h3 class="tpl-title" :title="template.name">{{ template.name }}</h3>
+      <span class="tpl-status" :class="'tone-' + tone">
+        <i :style="{ background: dotColor }" aria-hidden="true" />
+        {{ status }}
      </span>
    </div>

-    <p class="template-meta">
-      {{ template.code }} · {{ template.version }} · {{ template.department }}
-    </p>
-    <p class="template-description">{{ template.description }}</p>
+    <p class="tpl-meta">{{ template.code || '未编号' }} · {{ template.version }}</p>

-    <div class="template-footer">
-      <span class="department-tag">
-        <i aria-hidden="true" />
-        {{ template.department }}
+    <div class="tpl-tags">
+      <span class="exam-tag" :class="isGeneral ? 'is-general' : 'is-department'">
+        {{ ownershipLabel }}<template v-if="!isGeneral && sharedCount"> ·+{{ sharedCount }} 科室</template>
      </span>
-      <div class="template-actions">
-        <button type="button" class="card-button" @click="emit('preview', template)">预览</button>
-        <button
-          v-permission="DOC_TEMPLATE_PERMISSIONS.edit"
-          type="button"
-          class="card-button"
-          @click="emit('edit', template)"
-        >
-          编辑
-        </button>
-        <button
-          v-if="showVersionAction"
-          v-permission="DOC_TEMPLATE_PERMISSIONS.history"
-          type="button"
-          class="card-button"
-          title="查看该文书的版本历史"
-          @click="emit('versions', template)"
-        >
-          版本
-        </button>
-        <button
-          v-if="hasInitiableVersion"
-          v-permission="DOC_TEMPLATE_PERMISSIONS.initiate"
-          type="button"
-          class="card-button primary"
-          :title="initiateTitle"
-          @click="emit('initiate', template)"
-        >
-          发起
-        </button>
-        <!-- 还不能签署时，把「当前该做的下一步」放在同一位置，避免按钮越堆越多 -->
-        <button
-          v-if="primaryAction"
-          v-permission="workflowPermission(primaryAction.key)"
-          type="button"
-          class="card-button primary"
-          :title="`${primaryAction.label}后才能发起签署`"
-          @click="emit('workflow', template, primaryAction.key)"
-        >
-          {{ primaryAction.label }}
-        </button>
-        <button
-          v-for="action in secondaryActions"
-          :key="action.key"
-          v-permission="workflowPermission(action.key)"
-          type="button"
-          class="card-button"
-          :title="action.title"
-          @click="emit('workflow', template, action.key)"
-        >
-          {{ action.label }}
-        </button>
-        <button
-          v-if="showRemoveAction"
-          v-permission="DOC_TEMPLATE_PERMISSIONS.stop"
-          type="button"
-          class="card-button danger"
-          :title="removeTitle"
-          @click="emit('remove', template)"
-        >
-          {{ isMock ? '删除' : '下架' }}
-        </button>
-      </div>
+    </div>
+
+    <p class="tpl-desc">{{ template.description || '—' }}</p>
+
+    <div class="tpl-ft">
+      <button type="button" class="card-button" @click="emit('preview', template)">预览</button>
+      <button
+        v-permission="permissions.props"
+        type="button"
+        class="card-button"
+        @click="emit('edit-props', template)"
+      >
+        编辑属性
+      </button>
+      <button
+        v-permission="permissions.edit"
+        type="button"
+        class="card-button"
+        @click="emit('edit-content', template)"
+      >
+        编辑正文
+      </button>
+      <button
+        v-permission="permissions.history"
+        type="button"
+        class="card-button"
+        @click="emit('history', template)"
+      >
+        历史记录
+      </button>
+
+      <span class="ft-spacer" />
+
+      <button
+        v-if="canToggle"
+        v-permission="togglePermission"
+        type="button"
+        class="card-button"
+        :title="
+          toggleLabel === '停用'
+            ? '停用后各科室不可见、不可发起签署'
+            : '启用后各科室可见并可发起签署'
+        "
+        @click="emit('toggle-status', template)"
+      >
+        {{ toggleLabel }}
+      </button>
+      <button
+        v-if="showSubmitReview"
+        v-permission="permissions.publish"
+        type="button"
+        class="card-button"
+        title="提交审核，审核通过后自动发布"
+        @click="emit('submit-review', template)"
+      >
+        提交审核
+      </button>
+      <button
+        v-if="canInitiate"
+        v-permission="permissions.initiate"
+        type="button"
+        class="card-button primary"
+        :title="initiateTitle"
+        @click="emit('initiate', template)"
+      >
+        发起
+      </button>
    </div>
  </article>
 </template>

 <style scoped>
-.template-card {
+.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
@@ -193,24 +177,22 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
  box-shadow: var(--sh);
  transition:
    border-color 0.15s ease,
-    box-shadow 0.15s ease,
-    transform 0.15s ease;
+    box-shadow 0.15s ease;
 }

-.template-card:hover {
+.tpl-card:hover {
  border-color: var(--brand);
-  box-shadow: var(--sh-hover);
-  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgb(14 110 140 / 10%);
 }

-.template-head {
+.tpl-hd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
 }

-.template-head h3 {
+.tpl-title {
  display: -webkit-box;
  flex: 1;
  margin: 0;
@@ -222,7 +204,7 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
  -webkit-line-clamp: 2;
 }

-.template-status {
+.tpl-status {
  display: inline-flex;
  flex-shrink: 0;
  gap: 5px;
@@ -234,41 +216,31 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
  border-radius: 12px;
 }

-.template-status i {
+.tpl-status i {
  width: 6px;
  height: 6px;
-  background: currentColor;
  border-radius: 50%;
 }

-.status-published {
+/* 徽标底色沿用原型 tg-* 那套色调；圆点颜色由内联样式给出（见 DOCUMENT_STATUS_DOT） */
+.tone-enabled {
  color: var(--ok);
  background: var(--ok-l);
 }

-.status-draft {
-  color: #8a9aa3;
-  background: #eceef0;
-}
-
-.status-archived {
-  color: #8a9aa3;
-  background: #eceef0;
-}
-
-.status-review {
+.tone-review {
  color: var(--warn);
  background: var(--warn-l);
 }

-/* 已驳回要和「待审核」在颜色上分开：两者归一后都是 review，
-   只靠文字区分时一眼扫过去仍会混为一谈 */
-.status-rejected {
-  color: var(--err);
-  background: var(--err-l);
+.tone-draft,
+.tone-archived,
+.tone-stopped {
+  color: #8a9aa3;
+  background: #eceef0;
 }

-.template-meta {
+.tpl-meta {
  margin: 0;
  overflow: hidden;
  color: var(--mut);
@@ -277,9 +249,36 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
  white-space: nowrap;
 }

-.template-description {
-  flex: 1;
+.tpl-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* 归属徽标：全院通用用蓝、科室用绿，与原型 tpl-card 的取色一致 */
+.exam-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 10.5px;
+  font-weight: 700;
+  white-space: nowrap;
+  border-radius: 10px;
+}
+
+.exam-tag.is-general {
+  color: #3a7bd5;
+  background: #e7effb;
+}
+
+.exam-tag.is-department {
+  color: #0b7a4b;
+  background: #e2f5ec;
+}
+
+.tpl-desc {
  display: -webkit-box;
+  flex: 1;
  min-height: 58px;
  margin: 0;
  overflow: hidden;
@@ -290,90 +289,50 @@ const removeTitle = computed(() => (props.isMock ? '删除此文书' : '下架
  -webkit-line-clamp: 3;
 }

-.template-footer {
+.tpl-ft {
  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
-}
-
-.department-tag {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 5px;
-  align-items: center;
-  padding: 3px 9px;
-  color: var(--brand);
-  font-size: 11px;
-  font-weight: 700;
-  background: var(--brand-l);
-  border-radius: 12px;
-}
-
-.department-tag i {
-  width: 5px;
-  height: 5px;
-  background: currentColor;
-  border-radius: 50%;
-}
-
-/* 按钮数量随状态变化（待审核时多一个「驳回」），允许换行并右对齐，
-   否则窄屏下最后一个按钮会被挤出卡片 */
-.template-actions {
-  display: flex;
-  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
-  justify-content: flex-end;
+  align-items: center;
+  padding-top: 10px;
+  margin-top: 4px;
+  border-top: 1px solid var(--line);
+}
+
+/* 把状态动作与发起推到右侧，左侧四个入口（预览/属性/正文/历史）成一组 */
+.ft-spacer {
+  flex: 1 1 auto;
 }

 .card-button {
  padding: 4px 9px;
-  color: var(--brand);
+  color: var(--ink);
  font-size: 12px;
  background: #fff;
-  border: 1px solid var(--brand);
+  border: 1px solid var(--line);
  border-radius: 5px;
 }

 .card-button:hover {
-  background: var(--brand-l);
+  color: var(--brand);
+  border-color: var(--brand);
 }

 .card-button.primary {
  color: #fff;
  background: var(--brand);
+  border-color: var(--brand);
 }

 .card-button.primary:hover {
+  color: #fff;
  background: var(--brand-d);
-}
-
-.card-button:disabled {
-  color: #aebbc0;
-  background: #f1f5f6;
-  border-color: #dce5e8;
-  cursor: not-allowed;
-}
-
-.card-button.primary:disabled:hover {
-  background: #f1f5f6;
-}
-
-.card-button.danger {
-  color: #b3442f;
-  border-color: #cf7c68;
-}
-
-.card-button.danger:hover {
-  background: #fbeee9;
+  border-color: var(--brand-d);
 }

@media (max-width: 680px) {
-  .template-footer {
-    align-items: flex-start;
-    flex-direction: column;
+  .ft-spacer {
+    display: none;
  }
 }
 </style>
@@ -1,335 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { formatTemplateDateTime } from '@/api/management/documents'
-import type { TemplateVersionResponseDto } from '@/api/management/types'
-
-import { readBackendStatusLabel } from '../mock'
-import type { DocumentTemplate } from '../types'
-
-const props = defineProps<{
-  visible: boolean
-  template: DocumentTemplate | null
-  versions: TemplateVersionResponseDto[]
-  loading: boolean
-  error: boolean
-  /** 演示文库只保存当前版本，弹窗要如实说明，别让科室以为这就是全部历史 */
-  isMock: boolean
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-/**
- * 版本 DTO → 展示行。
- *
- * 版本号优先用后端给的 versionNo；只给了自增号时补一个 `v{号}`，
- * 两者都没有才显示 —，不自己编一个看起来像版本号的值。
- */
-const versionRows = computed(() =>
-  props.versions.map((version) => ({
-    id: version.id,
-    versionNo: version.versionNo || (version.versionNumber ? `v${version.versionNumber}` : '—'),
-    statusLabel: readBackendStatusLabel(version.status),
-    isCurrent: version.id === props.template?.versionId,
-    createdBy: version.createdBy || '—',
-    createdAt: formatTemplateDateTime(version.createdAt),
-    reviewedAt: formatTemplateDateTime(version.reviewedAt),
-    publishedAt: formatTemplateDateTime(version.publishedAt),
-    reviewComment: version.reviewComment ?? '',
-  })),
-)
-</script>
-
-<template>
-  <Teleport to="body">
-    <div v-if="visible && template" class="dialog-mask" @click.self="emit('close')">
-      <section
-        class="dialog-card version-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="version-dialog-title"
-      >
-        <header class="dialog-header">
-          <div class="dialog-heading">
-            <strong id="version-dialog-title">版本历史</strong>
-            <span>{{ template.name }} · {{ template.code }}</span>
-          </div>
-          <button type="button" class="dialog-close" aria-label="关闭" @click="emit('close')">
-            ×
-          </button>
-        </header>
-
-        <div class="dialog-body">
-          <p v-if="loading" class="version-state">正在加载版本历史…</p>
-
-          <p v-else-if="error" class="version-state version-state--error">
-            版本历史加载失败，请确认后端模板版本接口可访问后重试。
-          </p>
-
-          <template v-else-if="versionRows.length">
-            <ol class="version-list">
-              <li v-for="row in versionRows" :key="row.id" class="version-item">
-                <div class="version-item__head">
-                  <strong>{{ row.versionNo }}</strong>
-                  <span class="version-status">{{ row.statusLabel }}</span>
-                  <span v-if="row.isCurrent" class="version-current">当前版本</span>
-                </div>
-
-                <dl class="version-meta">
-                  <div>
-                    <dt>创建人</dt>
-                    <dd>{{ row.createdBy }}</dd>
-                  </div>
-                  <div>
-                    <dt>创建时间</dt>
-                    <dd>{{ row.createdAt || '—' }}</dd>
-                  </div>
-                  <div v-if="row.reviewedAt">
-                    <dt>审核时间</dt>
-                    <dd>{{ row.reviewedAt }}</dd>
-                  </div>
-                  <div v-if="row.publishedAt">
-                    <dt>发布时间</dt>
-                    <dd>{{ row.publishedAt }}</dd>
-                  </div>
-                </dl>
-
-                <p v-if="row.reviewComment" class="version-comment">
-                  审核意见：{{ row.reviewComment }}
-                </p>
-              </li>
-            </ol>
-
-            <p v-if="isMock" class="version-hint">
-              演示文库只保留当前版本，因此这里只有一条。真实模式下会列出该文书的全部历史版本。
-            </p>
-          </template>
-
-          <p v-else class="version-state">该文书还没有版本记录。</p>
-        </div>
-
-        <footer class="dialog-footer">
-          <span>已签署的文书引用的是具体版本，历史版本不会被覆盖，可随时追溯。</span>
-          <button type="button" class="action-button" @click="emit('close')">关闭</button>
-        </footer>
-      </section>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.dialog-mask {
-  position: fixed;
-  z-index: 50;
-  inset: 0;
-  display: flex;
-  padding: 16px;
-  overflow-y: auto;
-  background: rgb(9 40 52 / 45%);
-}
-
-.dialog-card {
-  display: flex;
-  width: 560px;
-  max-width: 96vw;
-  max-height: calc(100vh - 32px);
-  flex-direction: column;
-  margin: auto;
-  background: #fff;
-  border-radius: 14px;
-  box-shadow: var(--sh-modal);
-  animation: dialog-pop 0.18s ease;
-}
-
-.dialog-header {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  padding: 12px 18px;
-  border-bottom: 1px solid var(--line);
-}
-
-.dialog-heading {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.dialog-heading strong {
-  color: var(--ink);
-  font-size: 15px;
-}
-
-.dialog-heading span {
-  overflow: hidden;
-  color: var(--mut);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dialog-close {
-  flex-shrink: 0;
-  padding: 0;
-  margin-left: auto;
-  color: var(--mut);
-  font-size: 20px;
-  line-height: 1;
-  background: transparent;
-}
-
-.dialog-close:hover {
-  color: var(--ink);
-}
-
-.dialog-body {
-  flex: 1;
-  padding: 14px 18px;
-  overflow-y: auto;
-}
-
-.version-state {
-  padding: 28px 0;
-  margin: 0;
-  color: var(--mut);
-  font-size: 13px;
-  text-align: center;
-}
-
-.version-state--error {
-  color: var(--err);
-}
-
-.version-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.version-item {
-  padding: 12px 14px;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: var(--r);
-}
-
-.version-item__head {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.version-item__head strong {
-  color: var(--ink);
-  font-size: 13.5px;
-}
-
-.version-status {
-  padding: 2px 8px;
-  color: var(--brand);
-  font-size: 11px;
-  font-weight: 700;
-  background: var(--brand-l);
-  border-radius: 10px;
-}
-
-.version-current {
-  padding: 2px 8px;
-  color: var(--ok);
-  font-size: 11px;
-  font-weight: 700;
-  background: var(--ok-l);
-  border-radius: 10px;
-}
-
-.version-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 18px;
-  margin: 8px 0 0;
-}
-
-.version-meta div {
-  display: flex;
-  gap: 5px;
-  align-items: baseline;
-}
-
-.version-meta dt {
-  color: var(--mut);
-  font-size: 11.5px;
-}
-
-.version-meta dd {
-  margin: 0;
-  color: var(--ink);
-  font-size: 12px;
-}
-
-.version-comment {
-  padding: 8px 10px;
-  margin: 9px 0 0;
-  color: #a15c19;
-  font-size: 12px;
-  line-height: 1.7;
-  background: var(--warn-l);
-  border-radius: 6px;
-}
-
-.version-hint {
-  margin: 12px 0 0;
-  color: var(--mut);
-  font-size: 11.5px;
-  line-height: 1.7;
-}
-
-.dialog-footer {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 10px 18px;
-  color: var(--mut);
-  font-size: 12px;
-  background: #f8fbfc;
-  border-top: 1px solid var(--line);
-  border-radius: 0 0 14px 14px;
-}
-
-.dialog-footer span {
-  flex: 1;
-  line-height: 1.6;
-}
-
-.action-button {
-  flex-shrink: 0;
-  padding: 8px 16px;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  background: var(--brand);
-  border-radius: 7px;
-}
-
-.action-button:hover {
-  background: var(--brand-d);
-}
-
-@keyframes dialog-pop {
-  from {
-    opacity: 0;
-    transform: scale(0.96) translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-</style>
@@ -244,6 +244,9 @@ onBeforeUnmount(() => {
      :default-config="toolbarConfig"
      :mode="editorMode"
    />
+    <!-- 工具栏的第二行（原型 mdDocEd 里「插入签署占位符」那一行）。
+         放在工具栏与正文之间，让"插入什么"与"排版成什么样"在同一条视觉带里。 -->
+    <slot name="toolbar-extra" />
    <Editor
      class="pane-content"
      :model-value="props.modelValue"
@@ -316,8 +319,16 @@ onBeforeUnmount(() => {
 }

 /* ---- 占位符 / 勾选框胶囊 ----
-   现在有两种占位符胶囊，样式刻意保持一致（都代表"待签署内容"，不该靠外观区分重要性）：
+   配色与形状照原型 V10.2 的 .docfld（见 styles/signing-document.css 里签署态的同一套色）：

+   - 文本 / 日期：蓝（--brand 系）
+   - 签名：橙（#c07f00 系）——它决定签名落位，是文书里最不能漏的一项
+   - 勾选 / 选择：绿（#0f9d6c 系），且前面带一个 ☑ 提示这是可勾的
+
+   原型不给胶囊加类型角标，靠颜色区分类型；这里也照做，
+   完整信息（必填 / 选项 / 多选 / 高危值）留在 title 里。
+
+   两种载体共用同一套外观：
   ① 结构化占位符（.ms-sign-node）：Slate 元素节点，正文里存成 <span data-field>。
      标签文字走下面的 ::before，DOM 里没有可落光标的文字，一次退格整块删除。
   ② 旧式 ｛患者姓名｝（.ms-sign-brace + .ms-sign-chip）：decorate 出来的叶子，
@@ -340,25 +351,49 @@ onBeforeUnmount(() => {
  margin-left: -0.18em;
 }

-/* 占位符主体：带类型角标的胶囊 */
+/* 占位符主体：原型 .docfld 的编辑器版（虚线胶囊 + 品牌浅底 + 加粗） */
 .pane-content :deep(.ms-sign-chip) {
  display: inline-block;
-  padding: 0 6px;
+  padding: 1px 8px;
+  margin: 0 2px;
  color: var(--brand-d);
-  font-size: 0.92em;
-  font-weight: 700;
-  line-height: 1.65;
+  font-size: 0.95em;
+  font-weight: 600;
+  line-height: 1.7;
+  white-space: nowrap;
  background: var(--brand-l);
-  border: 1px solid #bcd9e3;
-  border-radius: 4px;
+  border: 1px dashed var(--brand);
+  border-radius: 5px;
 }

 /* 结构化占位符的标签文字：走 CSS 内容而不是 DOM 文本节点。
   元素是 void，DOM 里只有它自己与一个绝对定位的零宽占位叶子；
   若在这里放真实文字，浏览器原生光标会落进文字里，
-   一次退格就只删掉一个字符 —— 正好破坏"一次退格整块删除"这个设计目标 */
+   一次退格就只删掉一个字符 —— 正好破坏"一次退格整块删除"这个设计目标。
+
+   外层方括号与原型 fieldHtml 的 `【label】` 一致：正文里一眼能认出这是占位符而不是文书正文。 */
 .pane-content :deep(.ms-sign-node)::before {
-  content: attr(data-sign-label);
+  content: '【' attr(data-sign-label) '】';
+}
+
+/* 签名位：橙（原型 .docfld.k-signature） */
+.pane-content :deep(.ms-sign-node[data-sign-kind='signature']) {
+  color: #9a5f00;
+  background: #fff7e8;
+  border-color: #c07f00;
+}
+
+/* 勾选 / 选择：绿，并在标签前补一个 ☑（原型 .docfld.k-checkbox::before） */
+.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox']),
+.pane-content :deep(.ms-sign-node[data-sign-kind='choice']) {
+  color: #0b7a4b;
+  background: #eafaf1;
+  border-color: #0f9d6c;
+}
+
+.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before,
+.pane-content :deep(.ms-sign-node[data-sign-kind='choice'])::before {
+  content: '\2611  【' attr(data-sign-label) '】';
 }

 /* 选中态：点一下即整块选中，给个明确的反色，让人知道接下来的退格会删掉整块 */
@@ -368,21 +403,15 @@ onBeforeUnmount(() => {
  border-color: var(--brand);
 }

-.pane-content :deep(.ms-sign-node.is-selected)::after {
-  border-left-color: rgb(255 255 255 / 35%);
+.pane-content :deep(.ms-sign-node[data-sign-kind='signature'].is-selected) {
+  background: #c07f00;
+  border-color: #c07f00;
 }

-/* 类型角标：签名/日期/文本……让科室不点开也知道这一项要填什么。
-   所有占位符共用一个样式，靠这个角标区分类型，不再按必填/签名位分色 */
-.pane-content :deep(.ms-sign-chip)::after {
-  padding-left: 5px;
-  margin-left: 5px;
-  color: inherit;
-  font-size: 0.8em;
-  font-weight: 400;
-  content: attr(data-sign-tag);
-  border-left: 1px solid rgb(0 0 0 / 10%);
-  opacity: 0.7;
+.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'].is-selected),
+.pane-content :deep(.ms-sign-node[data-sign-kind='choice'].is-selected) {
+  background: #0f9d6c;
+  border-color: #0f9d6c;
 }

 /* 勾选框：签署时会转成可勾选控件，这里给它一个"框"的观感。
@@ -0,0 +1,65 @@
+/**
+ * 文档历史记录：后端版本 DTO → 原型「历史记录」表格的一行。
+ *
+ * 原型 openDocHistory 的表格是 版本 / 操作人 / 时间 / 操作 / 说明 / 操作，
+ * 其中「操作」是「编辑正文并发布」这类人类可读短语。后端 TemplateVersionResponseDto
+ * 没有「操作名」字段，只能由版本状态与各阶段时间戳归纳——归纳口径集中在这里，
+ * 避免表格组件与（将来的）其它入口各写一份。
+ */
+import { formatTemplateDateTime } from '@/api/management/documents'
+import type { TemplateVersionResponseDto } from '@/api/management/types'
+
+import type { DocumentHistoryRow } from './types'
+
+/**
+ * 由版本状态归纳「这一步做了什么」。
+ *
+ * 顺序有讲究：先判终态（归档 / 停用），再看发布与审核时间戳。
+ * 只看 status 是不够的——一个已发布版本后来又被打回时，status 会回到 DRAFT/REJECTED，
+ * 但它确实发布过，历史记录里应该留下痕迹。
+ */
+function describeVersionAction(version: TemplateVersionResponseDto): string {
+  if (version.status === 'ARCHIVED') {
+    return '归档'
+  }
+
+  if (version.status === 'DISABLED') {
+    return '停用'
+  }
+
+  if (version.publishedAt) {
+    return '发布生效'
+  }
+
+  if (version.reviewedAt) {
+    return version.status === 'REJECTED' ? '审核驳回' : '审核通过'
+  }
+
+  if (version.reviewSubmittedAt) {
+    return '提交审核'
+  }
+
+  return '创建版本'
+}
+
+/**
+ * 版本列表 → 历史记录行。
+ *
+ * isCurrent 由调用方给出（当前版本 id），不在这里猜：当前版本是「文书正指向哪个版本」，
+ * 属于文书对象的语义，版本列表本身不知道自己是不是当前版本。
+ */
+export function toHistoryRows(
+  versions: TemplateVersionResponseDto[],
+  currentVersionId: string | undefined,
+): DocumentHistoryRow[] {
+  return versions.map((version) => ({
+    id: version.id,
+    version: version.versionNo || (version.versionNumber ? `v${version.versionNumber}` : '—'),
+    operator: version.createdBy || '—',
+    operatedAt: formatTemplateDateTime(version.createdAt),
+    action: describeVersionAction(version),
+    // 后端没有「说明」字段，审核意见是唯一可用的自由文本；没有就如实留空
+    note: version.reviewComment?.trim() || '—',
+    isCurrent: Boolean(currentVersionId) && version.id === currentVersionId,
+  }))
+}
@@ -0,0 +1,180 @@
+/**
+ * 文档库的展示口径：状态、归属、文档类型。
+ *
+ * 状态口径取自原型 V10.2 的 libStatuses（启用中 / 草稿 / 归档 / 需复审 / 停用），
+ * **不是**后端模板状态枚举（DRAFT / PENDING_REVIEW / APPROVED / PUBLISHED /
+ * DISABLED / ARCHIVED）。原型已经彻底抛弃「发布 → 审核」那条工作流，
+ * 页签若继续按后端枚举铺开，界面上会多出一堆科室看不懂也点不动的状态。
+ *
+ * 因此这里只做一件事：把后端原始状态**折叠**成原型口径。
+ * 反向映射（口径 → 后端）只保留「按状态过滤」这一处需要，见 toBackendStatusFilter。
+ */
+import type { DocumentRecord, DocumentStatus } from '@/api/management/types'
+
+/** 文档库页签与卡片上的状态，取值即显示文案 */
+export type DocumentLibraryStatus = '启用中' | '草稿' | '归档' | '需复审' | '停用'
+
+/** 页签固定顺序，与原型 libStatuses 一致：启用中排最前，停用排最后 */
+export const DOCUMENT_LIBRARY_STATUSES: DocumentLibraryStatus[] = [
+  '启用中',
+  '草稿',
+  '归档',
+  '需复审',
+  '停用',
+]
+
+/** 状态色调：决定徽标配色（与原型 stDot 的取色一致） */
+export type DocumentStatusTone = 'enabled' | 'draft' | 'archived' | 'review' | 'stopped'
+
+const STATUS_TONES: Record<DocumentLibraryStatus, DocumentStatusTone> = {
+  启用中: 'enabled',
+  草稿: 'draft',
+  归档: 'archived',
+  需复审: 'review',
+  停用: 'stopped',
+}
+
+/** 原型 stDot：状态徽标前的圆点颜色 */
+export const DOCUMENT_STATUS_DOT: Record<DocumentStatusTone, string> = {
+  enabled: '#0f9d6c',
+  draft: '#8a9aa3',
+  archived: '#8a9aa3',
+  review: '#d9821f',
+  stopped: '#c0c8cd',
+}
+
+/**
+ * 后端原始状态 → 原型口径。
+ *
+ * 折叠是有损的，且是刻意的：
+ * - APPROVED 与 PUBLISHED 都算「启用中」——原型没有「审核通过但未发布」这一档；
+ * - PENDING_REVIEW 与 REJECTED 都算「需复审」——原型只给一个「需复审」页签，
+ *   至于「还等着审」还是「已被打回」，由卡片上的操作按钮与历史记录去区分；
+ * - DISABLED 算「停用」而不是「归档」：停用是可逆的（还能启用），归档不是。
+ *
+ * 未知状态按「草稿」兜底而不是原样显示：口径是页签的键，多出一个键就多出一个
+ * 原型上没有的页签；草稿是最安全的一档（既不显示为可发起，也不谎称已停用）。
+ */
+export function readLibraryStatus(record: {
+  status: DocumentStatus
+  backendStatus?: string
+}): DocumentLibraryStatus {
+  switch (record.backendStatus) {
+    case 'PUBLISHED':
+    case 'APPROVED':
+      return '启用中'
+    case 'PENDING_REVIEW':
+    case 'REJECTED':
+      return '需复审'
+    case 'ARCHIVED':
+      return '归档'
+    case 'DISABLED':
+      return '停用'
+    case 'DRAFT':
+      return '草稿'
+    default:
+      break
+  }
+
+  // 没有 backendStatus 的历史数据（演示文库、早期本地缓存）按归一后的状态反推
+  switch (record.status) {
+    case 'published':
+      return '启用中'
+    case 'review':
+      return '需复审'
+    case 'archived':
+      return '归档'
+    case 'draft':
+    default:
+      return '草稿'
+  }
+}
+
+export function readStatusTone(status: DocumentLibraryStatus): DocumentStatusTone {
+  return STATUS_TONES[status]
+}
+
+/**
+ * 状态页签 → 后端查询参数。
+ *
+ * 只用于「真实模式按状态向服务端过滤」；页面上默认仍是一次拉全量再本地过滤
+ * （口径折叠后一个页签对应多个后端状态，服务端做不到一次查全）。
+ * 映射不上的（需复审要同时含 PENDING_REVIEW 与 REJECTED）返回 undefined，
+ * 调用方据此退回本地过滤，而不是拿一个错的状态去查。
+ */
+export function toBackendStatusFilter(status: DocumentLibraryStatus): string | undefined {
+  switch (status) {
+    case '启用中':
+      return 'PUBLISHED'
+    case '草稿':
+      return 'DRAFT'
+    case '归档':
+      return 'ARCHIVED'
+    case '停用':
+      return 'DISABLED'
+    case '需复审':
+    default:
+      return undefined
+  }
+}
+
+/** 只有「启用中」的文书能发起签署：草稿没定稿，停用/归档已下线 */
+export function canInitiateSigning(status: DocumentLibraryStatus): boolean {
+  return status === '启用中'
+}
+
+/** 停用 / 启用只在这两档之间来回（原型 setDocStatus 的取值口径） */
+export function canToggleStatus(status: DocumentLibraryStatus): boolean {
+  return status === '启用中' || status === '停用'
+}
+
+/**
+ * 文档归属：原型把「通用（全院）」当作科室清单里的一个选项一起勾选，
+ * 勾中它就等于全院通用，其余科室勾选一并作废（见 docDeptPicks / openDocProps）。
+ */
+export const GENERAL_OWNERSHIP = '通用（全院）'
+
+/** 归属选项 → 后端可落库的科室 id（勾了通用（全院）就没有科室 id） */
+export function resolveOwnershipDepartmentId(
+  ownership: string[],
+  departments: Array<{ id: string; name: string }>,
+): string | null {
+  if (ownership.includes(GENERAL_OWNERSHIP)) {
+    return null
+  }
+
+  const first = ownership.find((name) => name !== GENERAL_OWNERSHIP)
+
+  return first ? (departments.find((department) => department.name === first)?.id ?? null) : null
+}
+
+/** 归属徽标文案：全院通用用 🌐，科室用 🏥（与原型 tpl-card 的标签一致） */
+export function readOwnershipLabel(record: DocumentRecord): string {
+  if (!record.departmentId) {
+    return '🌐 全院通用'
+  }
+
+  const name = record.departmentName ?? '未知科室'
+
+  return `🏥 ${name}`
+}
+
+/** 归属是否为全院通用：卡片标签配色与归属勾选回填都要用同一个判据 */
+export function isGeneralOwnership(record: DocumentRecord): boolean {
+  return !record.departmentId
+}
+
+/**
+ * 文档类型。
+ * 与原型 docTypes 同一份取值，属性弹窗用下拉而不是自由输入：
+ * 类型是分组的键，自由输入会让「知情同意书 / 知情同意书 」这类写法分成两组。
+ */
+export const DOCUMENT_TYPES = [
+  '知情同意书',
+  '风险告知书',
+  '入院告知',
+  '检查预约单',
+  '授权委托',
+]
+
+export const DEFAULT_DOCUMENT_TYPE = '知情同意书'
@@ -1,22 +1,9 @@
-/**
- * 文档库的演示数据与展示文案。
- *
- * 状态标签放在这里而不是随演示数据一起删掉：标签是纯展示映射，
- * 接真实接口后照样要用，不能和"演示数据"捆在一起。
- *
- * 演示文书库的种子与读写逻辑在 utils/mock-document-library：
- * 文档库页面和签署工作台必须读同一份数据，否则会出现「文档库里维护的模板，签署端选不到」，
- * 或者签署端混着一批文档库里看不到、也无法维护的模板。
- */
-import type { DocumentRecord } from '@/api/management/types'
-import type { LocalDocument, LocalDepartment } from '@/utils/mock-document-library'
-import { readDocumentLibrary, writeDocumentLibrary } from '@/utils/mock-document-library'
-
-import type { DocumentDepartment, DocumentBackendStatus, DocumentStatus } from './types'
-
 /**
 * 演示文库与页面模型之间的归一。
 *
+ * 状态口径与标签见 ./library，这里只管「演示文库（utils/mock-document-library）
+ * ↔ 页面模型（DocumentDepartment）」的字段补齐，不掺展示映射。
+ *
 * utils/mock-document-library 刻意只声明自己用到的字段（不反向依赖 views 的类型），
 * 它返回的文书缺了页面模型要求的 category / updatedBy / updatedAt，code 也可能为空。
 * 两种口径不一致会在 loadLibrary / saveDocumentLibrary 处直接报类型错误，
@@ -26,6 +13,12 @@ import type { DocumentDepartment, DocumentBackendStatus, DocumentStatus } from '
 * 补齐用的值都标注了是演示数据的缺省值，不冒充真实字段：
 * updatedAt 留空串，页面会显示成"—"，不会假装有一份真实的更新时间。
 */
+import type { DocumentRecord } from '@/api/management/types'
+import type { LocalDocument, LocalDepartment } from '@/utils/mock-document-library'
+import { readDocumentLibrary, writeDocumentLibrary } from '@/utils/mock-document-library'
+
+import type { DocumentDepartment } from './types'
+
 function toDocumentRecord(document: LocalDocument, categoryName: string): DocumentRecord {
  return {
    ...document,
@@ -88,6 +81,7 @@ function toLocalDocument(document: DocumentRecord): LocalDocument {
    versionId: document.versionId,
    departmentId: document.departmentId,
    departmentName: document.departmentName,
+    sharedDepartments: document.sharedDepartments,
    campusId: document.campusId,
    campusName: document.campusName,
    updatedAt: document.updatedAt,
@@ -95,132 +89,3 @@ function toLocalDocument(document: DocumentRecord): LocalDocument {
    contentSha256: document.contentSha256,
  }
 }
-
-/**
- * 状态标签。键集合与后端模板状态枚举一一对应
- * （见 api/management/types.ts 的 BackendTemplateStatus 与 documents.ts 的 normalizeDocumentStatus），
- * 不再有后端枚举里不存在的 enabled。
- */
-export const documentStatusLabels: Record<DocumentStatus, string> = {
-  draft: '草稿',
-  review: '需复审',
-  published: '已发布',
-  archived: '已归档',
-}
-
-/**
- * 后端原始状态 → 中文标签。
- *
- * 卡片与预览弹窗用它，而不是归一后的 documentStatusLabels：归一过程把
- * PENDING_REVIEW（待审核）和 REJECTED（已驳回）都并成了 review，
- * 只看「需复审」分不清是「还等着审」还是「已经被打回」。
- */
-export const backendStatusLabels: Record<DocumentBackendStatus, string> = {
-  DRAFT: '草稿',
-  PENDING_REVIEW: '待审核',
-  REJECTED: '已驳回',
-  APPROVED: '审核通过',
-  PUBLISHED: '已发布',
-  DISABLED: '已停用',
-  ARCHIVED: '已归档',
-}
-
-/**
- * 状态页签的固定展示顺序：按文书生命周期排列（草稿 → 送审 → 驳回/通过 → 发布 → 停用 → 归档）。
- * 固定顺序而不是按接口返回顺序，否则同一个库里状态一多，页签会来回跳。
- */
-export const backendStatusOrder: DocumentBackendStatus[] = [
-  'DRAFT',
-  'PENDING_REVIEW',
-  'REJECTED',
-  'APPROVED',
-  'PUBLISHED',
-  'DISABLED',
-  'ARCHIVED',
-]
-
-/** 取状态标签：优先用后端原始状态（更精确），拿不到再退回归一后的状态 */
-export function readStatusLabel(template: {
-  status: DocumentStatus
-  backendStatus?: string
-}): string {
-  const backendLabel = template.backendStatus
-    ? backendStatusLabels[template.backendStatus as DocumentBackendStatus]
-    : undefined
-
-  return backendLabel ?? documentStatusLabels[template.status]
-}
-
-/**
- * 按后端状态取标签。
- * 版本历史只有后端状态，没有归一后的 status，因此单独开一个入口。
- * 遇到未知状态原样显示，不显示成空白——后端新增状态时至少能看见它是什么。
- */
-export function readBackendStatusLabel(status: string | null | undefined): string {
-  if (!status) {
-    return '—'
-  }
-
-  return backendStatusLabels[status as DocumentBackendStatus] ?? status
-}
-
-/**
- * 状态色调：决定状态徽标用哪一套配色。
- *
- * 不能直接用归一后的 DocumentStatus 当配色键——PENDING_REVIEW 与 REJECTED
- * 归一后都是 review，两者会共用同一个颜色，页签与文字已经区分开了、颜色却还糊在一起。
- */
-export type DocumentStatusTone = 'draft' | 'review' | 'rejected' | 'published' | 'archived'
-
-export function readStatusTone(template: {
-  status: DocumentStatus
-  backendStatus?: string
-}): DocumentStatusTone {
-  switch (readBackendStatus(template)) {
-    case 'PENDING_REVIEW':
-      return 'review'
-    case 'REJECTED':
-      return 'rejected'
-    case 'APPROVED':
-    case 'PUBLISHED':
-      return 'published'
-    case 'DISABLED':
-    case 'ARCHIVED':
-      return 'archived'
-    case 'DRAFT':
-    default:
-      return 'draft'
-  }
-}
-
-/**
- * 取文书的后端原始状态，供状态页签归类。
- *
- * 真实模式的列表接口会给 backendStatus；演示库与部分历史数据可能没有，
- * 这时按归一后的 status 反推一个等价状态，避免这类文书在页签里被漏掉。
- *
- * 反推对 'review' 是有损的：归一过程把 PENDING_REVIEW 与 REJECTED 合并了，
- * 只能归到 PENDING_REVIEW。这只是缺字段时的兜底，不改变页签按真实状态过滤的口径。
- */
-export function readBackendStatus(template: {
-  status: DocumentStatus
-  backendStatus?: string
-}): DocumentBackendStatus {
-  const known = backendStatusOrder.find((status) => status === template.backendStatus)
-
-  if (known) {
-    return known
-  }
-
-  switch (template.status) {
-    case 'published':
-      return 'PUBLISHED'
-    case 'review':
-      return 'PENDING_REVIEW'
-    case 'archived':
-      return 'ARCHIVED'
-    case 'draft':
-    default:
-      return 'DRAFT'
-  }
-}
@@ -5,6 +5,13 @@ import type { TemplateVersionAction } from '@/api/management/documents'
 *
 * 必须与后端菜单资源树里 BUTTON 节点的 code 完全一致（当前为 doc:template:* 这一套）。
 * 前端不再维护别名映射：码对不上就等于没有权限，不做兜底。
+ *
+ * 已按 `GET /v1/menu-resources` 实测核对（2026-09-24，共 70 个节点）：
+ *   浏览文档模板 / 新增文档模板 / 编辑文档正文 / 编辑文档属性 /
+ *   发布·提交审核 / 停用·启用模板 / 查看文档历史记录 / 导出模板包
+ * 后端的「新增文档模板」是 **doc:template:create**，
+ * 原型 V10.2 里写的是 doc:template:new —— 那是原型内部的命名，不是后端口径，
+ * 不要照抄原型去改这里的码，否则真实模式下「新增文档」按钮会因权限判定不通过而消失。
 */
 export const DOC_TEMPLATE_PERMISSIONS = {
  view: 'doc:template:view',
@@ -21,11 +28,16 @@ export const DOC_TEMPLATE_PERMISSIONS = {
 } as const

 /**
- * 版本工作流的权限码映射。
+ * 版本工作流动作的权限码映射。
+ *
+ * 原型 V10.2 已经抛弃「发布 → 审核」那条工作流，页面上只剩三类动作：
+ * - 停用 / 启用（停用 → disable，启用 → publish）；
+ * - 草稿提交审核（仅在演示模式露出，真实模式不给这个入口）；
+ * - 归档（后端没有 DELETE，删除语义靠它承担，页面暂不暴露）。
 *
 * 后端当前没有独立的「提交审核 / 审核通过 / 驳回」按钮码，因此按职责归并：
 * - 提交审核 / 重新提交归入编辑权限：改稿并送审是编辑流程的一步；
- * - 审核通过 / 驳回 / 发布 / 重新启用归入发布权限：决定文书能否上线；
+ * - 发布 / 重新启用归入发布权限：决定文书能否上线；
 * - 停用 / 归档归入停用权限。
 * 后端补齐独立按钮码后只需改这张表，页面不需要调整。
 */
@@ -0,0 +1,20 @@
+/**
+ * 签署预览用的示例患者快照（脱敏演示数据）。
+ *
+ * 创建 / 编辑文书时还没有真实签署任务，用固定示例值让科室看到占位符被填充后的版式；
+ * 真实签署仍以任务创建时的患者 / 就诊快照为准。
+ *
+ * 单独成文件是因为它现在有两个使用者——文书库的「签署预览」页签与编辑器弹窗里的
+ * 「签署预览」——两处各写一份，预览效果会随口径漂移而悄悄不一致。
+ */
+import type { SigningDocumentData } from '@/utils/signing-document'
+
+export const PREVIEW_PATIENT: SigningDocumentData = {
+  patientName: '李某某',
+  sex: '男',
+  age: 46,
+  visitNo: 'V20260914001',
+  visitDate: '2026-09-14',
+  phone: '138****5678',
+  signedAt: '',
+}
@@ -1,15 +1,18 @@
 /**
 * 文档库页面模型。
 *
- * 状态枚举直接复用 api/management/types.ts 的 DocumentStatus，不再另立一套：
- * 之前页面自己定义了 'enabled' | 'draft' | 'archived' | 'review'，
- * 其中 enabled 在后端模板状态枚举里没有对应值（后端只有 DRAFT / PENDING_REVIEW /
- * APPROVED / PUBLISHED / DISABLED / ARCHIVED），一旦接入真实接口就没法双向映射。
- * 现在两侧共用同一份，API 边界的 normalizeDocumentStatus 就是唯一的转换口径。
+ * 状态口径见 ./library：页面用原型 V10.2 的「启用中 / 草稿 / 归档 / 需复审 / 停用」，
+ * 后端模板状态枚举只在 API 边界出现一次（readLibraryStatus 折叠）。
+ *
+ * 「属性」与「正文」是两份表单、两个弹窗：原型 V10.2 刻意把「修改文档」拆成
+ * 「编辑属性」与「编辑正文」，属性弹窗不碰正文、正文弹窗不碰属性。
+ * 因此这里也不合成一个大表单——合成之后总会有人顺手在一个弹窗里改另一个弹窗的字段。
 */
-import type { DocumentRecord, DocumentStatus } from '@/api/management/types'
+import type { DocumentRecord } from '@/api/management/types'

-export type { DocumentStatus }
+import type { DocumentLibraryStatus } from './library'
+
+export type { DocumentLibraryStatus }

 /** 院区分组键：与模板接口的 campusId 对应，'all' 表示全院通用 */
 export type DocumentCampus = string
@@ -35,43 +38,38 @@ export interface DocumentTemplate extends LibraryDocument {
  category: string
 }

-export interface TemplateEditorForm {
+/**
+ * 编辑属性弹窗的表单（原型 openDocProps / openDocCreate）。
+ * 只有属性，没有正文——正文走 WordEditorDialog。
+ */
+export interface DocumentPropsForm {
+  /** 有值表示编辑已有文书，无值表示新增 */
  id?: string
-  templateCode: string
  name: string
-  description: string
-  campusId: string
-  departmentId: string
+  /** 文档类型，取自 library.DOCUMENT_TYPES */
  category: string
  versionNo: string
+  /** 文档归属：科室名数组，可能含 GENERAL_OWNERSHIP（通用（全院）） */
+  ownership: string[]
+  description: string
+}
+
+/**
+ * 编辑正文弹窗的表单。
+ * 只带正文与定位信息：名称 / 类型 / 版本 / 归属都在属性弹窗里维护。
+ */
+export interface DocumentContentForm {
+  id: string
+  /** 正文 HTML（含结构化占位符 <span data-field>） */
  contentHtml: string
 }

 /**
- * 模板版本的后端原始状态。
- *
- * 逐字列出而不是直接复用 api/management/types.ts 的 BackendTemplateStatus：
- * 后者带 `| string` 兜底（后端将来新增状态时前端不至于编译不过），
- * 直接拿来当过滤键会把类型收窄成 string，页签取值就失去约束了。
- * 这里列的是已知枚举，未知状态由 readBackendStatus 兜底归类。
+ * 状态筛选的取值：按原型口径，不再按后端原始状态。
+ * 折叠后「需复审」同时含 PENDING_REVIEW 与 REJECTED，按后端枚举做页签会把
+ * 「还等着审」和「已被打回」拆成两个页签，而原型只有一个。
 */
-export type DocumentBackendStatus =
-  | 'DRAFT'
-  | 'PENDING_REVIEW'
-  | 'REJECTED'
-  | 'APPROVED'
-  | 'PUBLISHED'
-  | 'DISABLED'
-  | 'ARCHIVED'
-
-/**
- * 状态筛选的取值：按后端原始状态过滤，而不是按归一后的 DocumentStatus。
- *
- * 归一过程把 PENDING_REVIEW（待审核）和 REJECTED（已驳回）都并成 review，
- * 用归一键做页签会把两种完全不同的处境混在一个「需复审」里：
- * 一个是还等着审，一个是已经被打回，科室要做的下一步完全不同。
- */
-export type DocumentFilterStatus = 'all' | DocumentBackendStatus
+export type DocumentFilterStatus = 'all' | DocumentLibraryStatus

 export interface StatusTab {
  key: DocumentFilterStatus
@@ -90,3 +88,19 @@ export interface DepartmentTab {
  label: string
  count: number
 }
+
+/**
+ * 历史记录的一行（原型 openDocHistory 的表格：版本 / 操作人 / 时间 / 操作 / 说明）。
+ *
+ * 原型的「操作」是「编辑正文并发布」这类人类可读短语；这里由后端状态与时间字段
+ * 归纳出来（见 history.ts 的 describeHistoryAction），后端没有专门的「操作名」字段。
+ */
+export interface DocumentHistoryRow {
+  id: string
+  version: string
+  operator: string
+  operatedAt: string
+  action: string
+  note: string
+  isCurrent: boolean
+}
@@ -4,11 +4,15 @@ import { computed, onMounted, ref, watch } from 'vue'
 import type { SigningAnswers, SigningTaskRecord } 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,
@@ -92,8 +96,8 @@ const signatureStateLabel = computed(() => {
 })

 /**
- * 从渲染后的 DOM 读回填写项取值。
- * 生成 HTML 时已把取值写成 attribute，这里再按取值同步一次 DOM 状态，
+ * 从渲染后的 DOM 读回填写项取值与勾选清单。
+ * 生成 HTML 时已把取值写成属性/文本，这里再按取值同步一次 DOM 状态，
 * 保证「签完再打开时填写项/勾选还在」这件事不依赖序列化细节。
 */
 function syncFromDom() {
@@ -106,17 +110,13 @@ function syncFromDom() {
  const answers = readAnswersFromRoot(container)
  fieldAnswers.value = answers
  progress.value = describeFieldProgress(container, answers)
-
-  const checked = Array.from(
-    container.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox:checked'),
-  )
-  selectedItems.value = checked.map((item) => item.getAttribute('data-sign-item') ?? '')
+  selectedItems.value = collectSelectedItemsFromRoot(container)

  emit('field-change', { ...answers }, { ...progress.value })
  emit('selection-change', [...selectedItems.value])
 }

-/** 按已固化的取值还原 DOM 控件状态（存量勾选表 + 新填写项都覆盖） */
+/** 按已固化的取值还原 DOM 状态（存量勾选表 + 新填写项都覆盖） */
 function applyStoredValues() {
  const container = containerRef.value

@@ -124,11 +124,7 @@ function applyStoredValues() {
    return
  }

-  const selected = new Set(props.task.selectedItems ?? [])
-
-  container.querySelectorAll<HTMLInputElement>('input.sign-doc-checkbox').forEach((input) => {
-    input.checked = selected.has(input.getAttribute('data-sign-item') ?? '')
-  })
+  applySelectedItemsToRoot(container, props.task.selectedItems ?? [])

  const answers: SigningAnswers = { ...(props.task.fieldAnswers ?? {}) }

@@ -145,7 +141,7 @@ function applyStoredValues() {
    }

    // 读写的判据都在 signing-document 里（readAnswersFromRoot 的镜像），
-    // 这里不自己写 data-sign-* 选择器，否则多选组这类"同 DOM 不同语义"的控件会两处漂移
+    // 这里不自己写 data-sign-* 选择器，否则选项组这类"同 DOM 不同语义"的控件会两处漂移
    applyAnswerToFieldHost(host, value)
  })
 }
@@ -189,11 +185,30 @@ function requestSignature(host: HTMLElement) {
  })
 }

+/**
+ * 点击文书里的 ☑ / ☐ 选项。
+ *
+ * 与签名位分开处理：签名位是"请求采集"（要弹签字板），选项是就地切换。
+ * 切换逻辑本身在 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) {
@@ -439,189 +454,7 @@ defineExpose({ getDocumentElement })
  max-width: 100%;
 }

-/* 固定页眉：患者基本信息由 HIS 自动带出，与正文之间用一条横线分隔。
-   四项要在一行内放下，取值下划线的宽度由字段定义给出（内联 min-width），样式里不再写死 */
-.sign-doc-body :deep(.sign-doc-header) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 18px;
-  padding-bottom: 10px;
-  margin-bottom: 16px;
-  border-bottom: 1.5px solid #52646e;
-}
-
-.sign-doc-body :deep(.sign-doc-header__item) {
-  display: inline-flex;
-  gap: 3px;
-  align-items: baseline;
-}
-
-.sign-doc-body :deep(.sign-doc-header__label) {
-  flex-shrink: 0;
-  color: #52646e;
-  font-size: 12.5px;
-}
-
-.sign-doc-body :deep(.sign-doc-header__value) {
-  padding: 0 5px 1px;
-  color: #1c2b33;
-  font-size: 12.5px;
-  text-align: center;
-  border-bottom: 1px solid #52646e;
-}
-
-.sign-doc-body :deep(.sign-doc-checkbox) {
-  width: 15px;
-  height: 15px;
-  accent-color: var(--brand);
-  cursor: pointer;
-}
-
-.sign-doc-body :deep(.sign-doc-checkbox:disabled) {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-/* 正文行内选项（□否 □是）：用 label 包住方框与选项文字，点文字也能选中 */
-.sign-doc-body :deep(.sign-doc-option) {
-  display: inline-flex;
-  gap: 3px;
-  align-items: center;
-  margin-right: 14px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.sign-doc-body :deep(.sign-doc-signature) {
-  max-width: 150px;
-  max-height: 52px;
-  vertical-align: middle;
-}
-
-/* ===== 填写项 ===== */
-.sign-doc-body :deep(.sign-field) {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding: 2px 7px;
-  margin: 0 2px;
-  vertical-align: middle;
-  background: #f7fbfd;
-  border: 1px solid #d4e3e8;
-  border-radius: 5px;
-}
-
-.sign-doc-body :deep(.sign-field__label) {
-  flex-shrink: 0;
-  color: #587786;
-  font-size: 11.5px;
-}
-
-.sign-doc-body :deep(.sign-field__required) {
-  margin-left: 2px;
-  color: var(--err);
-}
-
-.sign-doc-body :deep(.sign-field__control) {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.sign-doc-body :deep(.sign-field__input) {
-  width: 9em;
-  min-width: 0;
-  padding: 1px 5px;
-  color: #1c2b33;
-  font: inherit;
-  font-size: 12.5px;
-  background: #fff;
-  border: 1px solid #cfe0e6;
-  border-radius: 4px;
-}
-
-.sign-doc-body :deep(.sign-field__input:focus) {
-  border-color: var(--brand);
-  outline: none;
-}
-
-.sign-doc-body :deep(.sign-field__input:disabled) {
-  color: #1c2b33;
-  background: transparent;
-  border-color: transparent;
-  opacity: 1;
-  -webkit-text-fill-color: #1c2b33;
-}
-
-.sign-doc-body :deep(.sign-field__choices) {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.sign-doc-body :deep(.sign-field__radio),
-.sign-doc-body :deep(.sign-field__checkbox) {
-  width: 15px;
-  height: 15px;
-  accent-color: var(--brand);
-}
-
-.sign-doc-body :deep(.sign-field__signature-empty) {
-  padding: 12px 18px;
-  color: #a96900;
-  font-size: 11px;
-  background: #fff9ec;
-  border: 1px dashed #f0a21a;
-  border-radius: 4px;
-}
-
-/* 可点击采集的签名位：整块胶囊都是点击热区（子节点会冒泡到宿主），
-   hover / 聚焦给出明确反馈，否则操作人员不知道这里能点 */
-.sign-doc-body :deep(.sign-field--actionable) {
-  cursor: pointer;
-  background: #fffaf0;
-  border-color: #f0a21a;
-}
-
-.sign-doc-body :deep(.sign-field--actionable:hover) {
-  background: #fff3d8;
-  border-color: #d98c05;
-  box-shadow: 0 0 0 2px rgb(240 162 26 / 20%);
-}
-
-.sign-doc-body :deep(.sign-field--actionable:focus-visible) {
-  outline: 2px solid var(--brand);
-  outline-offset: 1px;
-}
-
-.sign-doc-body :deep(.sign-field--actionable .sign-field__signature-empty) {
-  font-weight: 600;
-}
-
-/* 签名位比其他填写项更宽，避免签名图被压扁 */
-.sign-doc-body :deep(.sign-field--signature) {
-  padding: 3px 8px;
-}
-
-.sign-doc-body :deep(.sign-field--signature .sign-field__control) {
-  min-width: 150px;
-  justify-content: center;
-}
-
-.sign-doc-body :deep(.sign-field--abnormal) {
-  background: #fdf0f0;
-  border-color: #efb9bb;
-}
-
-.sign-doc-body :deep(.sign-field--abnormal .sign-field__label) {
-  color: #a42e34;
-}
-
-.sign-doc-body :deep(.sign-field__badge) {
-  padding: 1px 6px;
-  color: #fff;
-  font-size: 10px;
-  background: var(--err);
-  border-radius: 8px;
-}
+/* 填写项胶囊、选项 ☑ / ☐、系统页眉的样式在 styles/signing-document.css（全局）：
+   它们同时出现在文书库预览、签署工作台与编辑器里，各写一份必然漂移。
+   这里只保留"这份文书外壳"自己的版式（正文字号、表格边框等）。 */
 </style>