diff --git a/clinical-web/src/styles/editor-vendor.css b/clinical-web/src/styles/editor-vendor.css index 81477b5..1609a50 100644 --- a/clinical-web/src/styles/editor-vendor.css +++ b/clinical-web/src/styles/editor-vendor.css @@ -26,6 +26,6 @@ * 工具栏、悬浮菜单、表格操作手柄等没有对应规则的地方仍按 vendor 自己的样式渲染。 * * ⚠️ 换成别的编辑器引擎时,这里要跟着换成那个引擎的样式入口 - * (EditorWangPane 的注释里列了换引擎要一并处理的三件事)。 + * (换引擎要一并处理的几件事,列在 WordEditorDialog 里 EditorPaneHandle 的注释上)。 */ @import '@wangeditor/editor/dist/css/style.css' layer(vendor-editor); diff --git a/clinical-web/src/styles/signing-document.css b/clinical-web/src/styles/signing-document.css index eb7deef..852730c 100644 --- a/clinical-web/src/styles/signing-document.css +++ b/clinical-web/src/styles/signing-document.css @@ -199,6 +199,14 @@ font-weight: 600; } +/* 无名称的单个勾选框:正文里只剩一个 ☐(表格勾选列、无选项的勾选项), + 点击区域会从上百像素缩到二十来像素,签署时不好点。 + 补一圈内边距把可点范围拉回来,外观上仍是"一个待勾的方框"。 */ +.docopt.bare { + padding: 1px 10px; + text-align: center; +} + /* ============ 存量兼容:表格勾选列与行内方框 ============ */ .sign-doc-checkbox { diff --git a/clinical-web/src/utils/signing-document.ts b/clinical-web/src/utils/signing-document.ts index 195cfe4..675c6f3 100644 --- a/clinical-web/src/utils/signing-document.ts +++ b/clinical-web/src/utils/signing-document.ts @@ -91,6 +91,13 @@ const OPTION_CLASS = 'docopt' const OPTION_TICK_CLASS = 'tick' /** 已勾选标记(原型 .docopt.on) */ const OPTION_ON_CLASS = 'on' +/** + * 无名称的单个勾选框的附加类名。 + * + * 去掉「待患者勾选」那句说明文字后,这一格只剩一个 ☐,点击区域从上百像素缩到二十来像素, + * 签署时患者不好点。样式里靠这个类把内边距补回来(见 styles/signing-document.css)。 + */ +const OPTION_BARE_CLASS = 'bare' /** 选项取值的载体属性;表格勾选列与行内方框也用同一个,回读时只认它 */ const OPTION_VALUE_ATTR = 'data-sign-item' /** @@ -101,7 +108,7 @@ const OPTION_VALUE_ATTR = 'data-sign-item' const GROUP_ATTR = 'data-sign-group' /** * 选项的显示名。与取值标识(data-sign-item)分开存: - * 表格勾选列的取值标识是项目名,但那一格显示的是「待患者勾选」。 + * 表格勾选列的取值标识是项目名,但那一格只显示一个 ☐。 * 切换勾选状态时要按显示名重建文案,所以它必须落成属性,不能从取值推。 */ const OPTION_TEXT_ATTR = 'data-sign-text' @@ -236,20 +243,21 @@ function isMultiOptionGroup(field: SigningFieldDef): boolean { } /** - * 选项的显示文案(原型 fillDocHtml / tickDocOpt 的同一口径): - * 勾选态用 ☑、未勾选用 ☐,空一格后跟选项名。 + * 选项的显示文案:勾选态用 ☑、未勾选用 ☐,空一格后跟选项名。 * - * 没有选项名的单个勾选框(占位符只写了 kind=checkbox 却没配选项)用固定文案 - * 说明它的语义——原型就是这么写的,也让科室一眼看出这一处是"待勾"而不是漏了内容。 + * **没有选项名的单个勾选框只落一个符号**,不再补说明文字。 + * + * 这是**有意偏离原型 V10.2**(2026-10-06 定):原型给无选项名的勾选框补 + * 「☐ 待患者勾选」/「☑ 已勾选(结果固化归档)」,等于把方框当正文写。 + * 而方框本身就是"这里要勾",这一处在勾什么由旁边的文字(表格的其它列、 + * 正文的上一句)交代,补一句说明只会把版面挤开;编辑层同一处也只显示一个 ☑, + * 签署层补一句中文会让同一处控件两副长相。 + * 字段名仍留在宿主 title 里,悬停可见。**别照原型改回去。** */ function optionDisplay(value: string, on: boolean): string { const mark = on ? '☑' : '☐' - if (value) { - return `${mark} ${value}` - } - - return on ? `${mark} 已勾选(结果固化归档)` : `${mark} 待患者勾选` + return value ? `${mark} ${value}` : mark } /** @@ -261,7 +269,7 @@ function optionDisplay(value: string, on: boolean): string { * 交互由签署端的事件委托完成(见 toggleOptionAt),所以这里只落一个 .tick 标记。 * * displayValue 与 itemValue 分开:表格勾选列的项目名要写进 data-sign-item 当取值标识, - * 但那一格显示的是「待患者勾选」——项目名在左边那一列已经写过了,重复一遍反而挤。 + * 但那一格只显示一个 ☐——项目名在左边那一列已经写过了,重复一遍反而挤。 */ function buildOptionItem( doc: Document, @@ -271,7 +279,12 @@ function buildOptionItem( displayValue: string = itemValue, ): HTMLElement { const item = doc.createElement('span') - item.className = [OPTION_CLASS, on ? OPTION_ON_CLASS : '', interactive ? OPTION_TICK_CLASS : ''] + item.className = [ + OPTION_CLASS, + on ? OPTION_ON_CLASS : '', + interactive ? OPTION_TICK_CLASS : '', + displayValue ? '' : OPTION_BARE_CLASS, + ] .filter(Boolean) .join(' ') if (interactive) { @@ -533,7 +546,7 @@ function renderStructuredFields( * 两种外观混在一篇文书里,会让人以为有一处没生效。 * * 项目名仍写在 data-sign-item 上:它是这项勾选的**取值标识**, - * 显示成「待患者勾选」只是因为它左边那一列已经写着项目名了。 + * 格子里只显示一个 ☐——项目名在左边那一列已经写着,重复一遍反而挤。 */ function convertCheckboxTables(root: Element, interactive: boolean, selected: Set) { const doc = root.ownerDocument diff --git a/clinical-web/src/utils/signing-fields.ts b/clinical-web/src/utils/signing-fields.ts index c9e9849..320b416 100644 --- a/clinical-web/src/utils/signing-fields.ts +++ b/clinical-web/src/utils/signing-fields.ts @@ -849,6 +849,167 @@ export function convertCheckboxColumnsToFields(contentHtml: string): string { return changed ? root.innerHTML : contentHtml } +/** 匹配单个方框符号(SIGNING_OPTION_MARKERS 里的任意一个) */ +const BOX_TEST_PATTERN = new RegExp(`[${SIGNING_OPTION_MARKERS}]`) +/** 方框转出来的勾选项取不到上下文名称时的兜底名称(与工具栏「勾选项」按钮同名) */ +const DEFAULT_BOX_LABEL = '勾选项' +/** 选项名最长取多少字:方框后面若是一整句话,别把整句当成字段名 */ +const BOX_LABEL_MAX_LENGTH = 20 + +/** + * 方框后第一段文字(到标点 / 空白为止)就是选项名。 + * + * 与签署渲染期的 replaceOptionMarkers 用**同一条规则** —— 两边认出来的选项名必须一致, + * 否则「导入时按一套切分成组、签署渲染时又按另一套切分」会得到对不上的选项。 + */ +function readOptionAfter(text: string, from: number): { label: string; end: number } { + const match = /^(\s*)([^\s。,、;:,.;:]*)/.exec(text.slice(from)) + const leading = match?.[1]?.length ?? 0 + const raw = match?.[2] ?? '' + + return { label: raw.slice(0, BOX_LABEL_MAX_LENGTH), end: from + leading + raw.length } +} + +/** + * 取一个在本文书里没被占用的勾选项字段键。 + * 与 allocateCustomFieldId 同款规则:同名的第二处往后编号,两处方框不会共用一份取值。 + */ +function nextBoxField( + claimed: Set, + label: string, + options: string[], + multi?: boolean, +): SigningFieldDef { + let sequence = 1 + + while (claimed.has(createCustomField(label, 'checkbox', options, sequence).id)) { + sequence += 1 + } + + const field = createCustomField(label, 'checkbox', options, sequence, multi) + claimed.add(field.id) + + return field +} + +/** 把一个文本节点里的方框换成结构化占位符;没有方框时返回 null,调用方据此跳过替换 */ +function rewriteBoxesInText( + doc: Document, + text: string, + claimed: Set, +): DocumentFragment | null { + const pattern = new RegExp(`[${SIGNING_OPTION_MARKERS}]`, 'g') + const boxes: Array<{ index: number; end: number; label: string }> = [] + let match: RegExpExecArray | null + + while ((match = pattern.exec(text)) !== null) { + const option = readOptionAfter(text, pattern.lastIndex) + boxes.push({ index: match.index, end: option.end, label: option.label }) + } + + if (!boxes.length) { + return null + } + + const fragment = doc.createDocumentFragment() + const first = boxes[0] + const last = boxes[boxes.length - 1] + const options = boxes.map((box) => box.label).filter(Boolean) + + // 同一处出现多个方框时合成一个勾选组:签署渲染期对这种情况本来就是按「互斥单选」处理的 + // (convertInlineOptions 数方框个数 > 1 → radio),拆成两个独立勾选框会让患者把 + // 「是」「否」同时勾上。 + if (first && last && boxes.length > 1 && options.length > 1) { + fragment.appendChild(doc.createTextNode(text.slice(0, first.index))) + fragment.appendChild( + createFieldElement(doc, nextBoxField(claimed, DEFAULT_BOX_LABEL, options, false)), + ) + fragment.appendChild(doc.createTextNode(text.slice(last.end))) + + return fragment + } + + // 单个方框:只换掉方框本身,后面的文字原样留在正文里(「□ 已阅读」→「[勾选框] 已阅读」) + let cursor = 0 + + boxes.forEach((box) => { + fragment.appendChild(doc.createTextNode(text.slice(cursor, box.index))) + fragment.appendChild( + createFieldElement(doc, nextBoxField(claimed, box.label || DEFAULT_BOX_LABEL, [])), + ) + cursor = box.index + 1 + }) + + fragment.appendChild(doc.createTextNode(text.slice(cursor))) + + return fragment +} + +/** + * 把正文里科室手打的方框(□ / ☐ / Wingdings 私有区码位,见 SIGNING_OPTION_MARKERS) + * 替换成**结构化勾选占位符** —— 与工具栏「勾选项」按钮插出来的是同一种东西。 + * + * 为什么要在导入 / 粘贴时转,而不是留到签署渲染再转(见 signing-document 的 convertInlineOptions): + * ① 渲染期那一步只改签署态的外观,编辑层里它始终是一段普通文字 —— 科室看到的是 + * 「浅蓝小方块」,与插入的绿色胶囊两副长相,也点不开填写项配置; + * ② 转成占位符后它就是一个正常的填写项,可以改名称、类型、选项,与手工插入的没有区别。 + * + * 取值规则照抄签署渲染期:方框后第一段文字(到标点为止)就是选项名。于是 + * - 一块里只有一个方框 → 一个无选项的勾选框,方框被替换、后面的文字留在正文里; + * - 一块里有多个方框 → 合成一个勾选组(选项名进 data-options,显式 multi=false)。 + * + * 只处理**同一个文本节点内**的方框:跨节点的方框(如 `□是 □否`)罕见, + * 要重建多个文本节点才能合并,留给签署渲染期的启发式兜底,不做半吊子的合并。 + * + * 已经结构化的占位符内部不扫:它的标签文字里可能带方框字符(如 {□} 那种旧写法)。 + */ +export function convertInlineBoxesToFields(contentHtml: string): string { + if (!contentHtml || !BOX_TEST_PATTERN.test(contentHtml)) { + return contentHtml + } + + const parsed = new DOMParser().parseFromString( + `
${contentHtml}
`, + 'text/html', + ) + const root = parsed.getElementById(SCAN_ROOT_ID) + + if (!root) { + return contentHtml + } + + const claimed = collectStructuredIdsFrom(root) + const walker = parsed.createTreeWalker(root, NodeFilter.SHOW_TEXT) + const targets: Text[] = [] + let node = walker.nextNode() + + while (node) { + const text = node.textContent ?? '' + + // 结构化占位符内部的文字是它自己的标签,不再当方框扫一遍 + if (BOX_TEST_PATTERN.test(text) && !node.parentElement?.closest(FIELD_ELEMENT_SELECTOR)) { + targets.push(node as Text) + } + + node = walker.nextNode() + } + + let changed = false + + targets.forEach((textNode) => { + const replacement = rewriteBoxesInText(parsed, textNode.textContent ?? '', claimed) + + if (!replacement) { + return + } + + textNode.replaceWith(replacement) + changed = true + }) + + return changed ? root.innerHTML : contentHtml +} + /** * 给新插入的自定义文本项分配一个在本文书里唯一的字段键。 * diff --git a/clinical-web/src/views/management/documents/components/WordEditorDialog.vue b/clinical-web/src/views/management/documents/components/WordEditorDialog.vue index ad7ea8c..816a1b4 100644 --- a/clinical-web/src/views/management/documents/components/WordEditorDialog.vue +++ b/clinical-web/src/views/management/documents/components/WordEditorDialog.vue @@ -6,6 +6,7 @@ import { allocateCustomFieldId, collectFieldDefs, convertCheckboxColumnsToFields, + convertInlineBoxesToFields, SIGNING_FIELD_KIND_LABELS, SIGNING_FIELD_PRESETS, upgradeFieldTokensToStructured, @@ -249,7 +250,11 @@ watch( // 打开时统一升级成结构化占位符(原子节点、一次退格整块删除)。 // 升级沿用同一套解析口径,字段键前后完全一致,历史 fieldAnswers 不受影响; // 正文里没有 { 时这一步原样返回,不会白白做一次 DOM 往返。 - valueHtml.value = upgradeFieldTokensToStructured(rawContent) + // + // 再把手打的方框(□)也换成结构化勾选项:这一步会改写正文,但存量模板里的 □ + // 在签署渲染期本来就会被 convertInlineOptions 转成勾选控件,换成占位符只是把 + // 同一件事提前到编辑期做,让科室在保存前就能核对、能改名称。 + valueHtml.value = convertInlineBoxesToFields(upgradeFieldTokensToStructured(rawContent)) needConfirm.value = Boolean(props.template?.needConfirm) message.text = '' message.tone = '' @@ -481,8 +486,11 @@ async function handleDocxChange(event: Event) { const mammoth = await import('mammoth/mammoth.browser') const result = await mammoth.convertToHtml({ arrayBuffer }) // 表头含「勾选」的表格在导入时就转成结构化占位符(原型 docCheckboxize 的口径), - // 这样科室在保存前就能点开核对每一项勾选,而不是留一张看不出要勾哪儿的空表格 - const html = convertCheckboxColumnsToFields(result.value || '


') + // 这样科室在保存前就能点开核对每一项勾选,而不是留一张看不出要勾哪儿的空表格。 + // 再扫一遍手打的方框(表头不叫「勾选」、或直接写在格子里的 □),同样换成结构化勾选项。 + const html = convertInlineBoxesToFields( + convertCheckboxColumnsToFields(result.value || '


'), + ) valueHtml.value = html previewing.value = false diff --git a/clinical-web/src/views/management/documents/components/editors/EditorWangPane.vue b/clinical-web/src/views/management/documents/components/editors/EditorWangPane.vue index 97acc03..44dcf1f 100644 --- a/clinical-web/src/views/management/documents/components/editors/EditorWangPane.vue +++ b/clinical-web/src/views/management/documents/components/editors/EditorWangPane.vue @@ -32,6 +32,7 @@ import { SIGN_FIELD_TYPE, updateSignFieldNodes, } from '@/utils/signing-field-node' +import { convertInlineBoxesToFields } from '@/utils/signing-fields' // 这两个都是 wangEditor 的全局注册表,必须在编辑器创建前挂上: // - 渲染钩子决定旧式 {…} 占位符与 □ 勾选框的显示(要等下一次重渲染才生效就晚了); @@ -131,7 +132,10 @@ const editorConfig: Partial = { const html = event.clipboardData?.getData('text/html') if (html) { - editor.dangerouslyInsertHtml(normalizePastedHtml(html)) + // 归一化之后还要把科室手打的方框转成结构化勾选项:否则粘进来的 □ 只是被 decorate + // 标了个底色,与工具栏「勾选项」插出来的绿色胶囊两副长相,也点不开填写项配置。 + // 放在这里而不是等保存,是为了让科室粘完当场就能看到、能核对。 + editor.dangerouslyInsertHtml(convertInlineBoxesToFields(normalizePastedHtml(html))) return false } @@ -464,7 +468,7 @@ onBeforeUnmount(() => { border-color: #c07f00; } -/* 勾选 / 选择:绿,并在标签前补一个 ☑(原型 .docfld.k-checkbox::before) */ +/* 勾选 / 选择:绿(原型 .docfld.k-checkbox) */ .pane-content :deep(.ms-sign-node[data-sign-kind='checkbox']), .pane-content :deep(.ms-sign-node[data-sign-kind='choice']) { color: #0b7a4b; @@ -472,7 +476,17 @@ onBeforeUnmount(() => { border-color: #0f9d6c; } -.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before, +/* 勾选项在正文里就是**一个待勾的方框**,不带名称。 + 这是**有意偏离原型 V10.2**(2026-10-06 定):原型给勾选胶囊带【名称】, + 而这一处在勾什么由旁边的文字交代(表格的其它列、正文的上一句), + 自带一个【名称】只会把版面挤开;签署层渲染出来也只有一个 ☐, + 编辑层挂着名称会让同一处控件在两层两副长相。 + 名称仍留在 title 里(见 utils/signing-field-node 的 renderSignField),悬停可见。 */ +.pane-content :deep(.ms-sign-node[data-sign-kind='checkbox'])::before { + content: '\2611'; +} + +/* 单选仍带名称:一组单选(是 / 否)要靠名字才能分辨,去掉就只剩一个认不出的符号 */ .pane-content :deep(.ms-sign-node[data-sign-kind='choice'])::before { content: '\2611 【' attr(data-sign-label) '】'; }