diff --git a/clinical-web/README.md b/clinical-web/README.md index efc8b05..c831bc1 100644 --- a/clinical-web/README.md +++ b/clinical-web/README.md @@ -153,6 +153,17 @@ ClinicalLayout(实际导航和页面路由由授权菜单资源树提供) ### 编辑区与签署态的呈现差异 +**版式两边是同一份**:编辑区的编辑面(`EditorWangPane`)与签署态的纸(`DocumentPaper`)都挂 `utils/document-paper.ts` 里的 `doc-paper` 类 —— 段落、标题、列表、表格、字号行距字体的规则全项目只有这一条来源,编辑时看到的换行位置就是签出来、下载到的位置。两件事要留意: + +- WangEditor 自带一套权重更高的正文默认(`p{margin:15px 0}`、`td/th` 的 `line-height:1.5` 等),会把那份排版盖掉。它整包被压进 `styles/editor-vendor.css` 的 cascade layer —— 未分层的规则优先于分层规则,因此不必写 `!important` 也不复述 vendor 的数值。**换编辑器引擎时这里要一并换成新引擎的样式入口**; +- 纸在窄容器里不缩窄:`.doc-paper-stage`(加在纸桌/纸舞台上)让纸保持 A4 设计宽 820px、由容器横向滚动。纸一被压窄,页边距与版心跟着变小,换行位置就和编辑器、和导出的 PDF 对不上了。 + +**文书字体**(后台「文书字体设置」里配置的默认字体)两边也是同一个:编辑区与纸都加载默认文书字体并挂 `.managed-font`,后台配了仿宋/楷体时不会出现「编辑区雅黑、签出来仿宋」。 + +**表格宽度同样只认渲染端的 CSS**(`.doc-paper table { width: 100% }`)。这里有个坑:WangEditor 导出表格时会写成 ``,而内联样式优先级高于样式表 —— 结果编辑器里表格撑满版心(编辑器 DOM 上那是**属性**,值为 `auto` 时浏览器直接忽略),预览 / 签署里却按内容收缩。渲染管线(`buildSigningDocumentHtml`)会先调 `utils/rich-text.ts` 的 `unlockTableLayout` 把这层内联锁解开,与粘贴 Word 表格时的处理是同一份规则。 + +**列宽拖拽只在本轮编辑会话内有效**:WangEditor 把列宽存在 `colgroup` 上,而它导出的 HTML 里没有 `colgroup`,保存后重开会回到「按内容分配列宽」——这也正是预览 / 签署里的样子。 + **编辑区**(`utils/signing-editor-marks.ts`)把 `{…}` 与 `□` 渲染成带类型角标的胶囊,让科室一眼分出「正文」和「待签署的内容」。这是**只读投影**:靠 wangEditor 的 `decorate` 把文本切成叶子再挂样式,`editor.getHtml()` 输出一字未变,保存与签署链路的口径不受影响。 **签署态**(`utils/signing-document.ts`)把占位符就地换成可交互控件。其中**签名位**(`kind=signature`)在任务处于可签署状态时渲染成「✍ 点击签名」的可点击入口:点一下就打开签字板,签完的图就地回显到该签名位,只回填这一个字段,**不会结束签署任务**——任务级的「签署完成」仍由主签名位(`{患者签名}`)通过「手写板签署 / 线上签署」触发。 diff --git a/clinical-web/src/components/document/DocumentPaper.vue b/clinical-web/src/components/document/DocumentPaper.vue index 321608a..56e6ef1 100644 --- a/clinical-web/src/components/document/DocumentPaper.vue +++ b/clinical-web/src/components/document/DocumentPaper.vue @@ -361,11 +361,9 @@ defineExpose({ getDocumentElement })