diff --git a/clinical-web/src/components/document/DocumentPaper.vue b/clinical-web/src/components/document/DocumentPaper.vue index 50bc163..084f6a2 100644 --- a/clinical-web/src/components/document/DocumentPaper.vue +++ b/clinical-web/src/components/document/DocumentPaper.vue @@ -279,7 +279,9 @@ defineExpose({ getDocumentElement }) @@ -273,27 +282,59 @@ onBeforeUnmount(() => { border-bottom: 1px solid var(--line); } -.pane-content { - /* 编辑区左右页边距,模拟 Word 文档版心:宽屏约 96px,窄窗口自动收窄 */ - --pane-gutter: clamp(20px, 8%, 96px); - +/* 纸桌:灰底 + **唯一**的滚动条(纸自己不许再滚,否则会出现两个滚动条) */ +.pane-desk { flex: 1; min-height: 340px; + padding: 16px 20px; overflow: auto; + background: #eef3f6; } -/* WangEditor 默认 [data-slate-editor] 只有 padding: 0 10px,正文会贴着边框; - 这里补上左右留白,粘贴的 Word 正文才呈现"纸张版心"的观感 */ +/* 纸壳:只负责限宽居中,并作为**容器查询上下文**。 + 它的宽度 == 纸宽,所以纸里的 `cqw` 就等于「纸宽的 1%」—— + 用 `min-height: 141.43cqw`(= 297/210)表达「至少一页 A4」,纸窄时按纸宽自动缩, + 不必再为「纸比容器窄」写第二套数字。 */ +.pane-sheet { + width: 100%; + max-width: var(--doc-paper-max-w); + margin: 0 auto; + container-type: inline-size; +} + +/* 白纸:A4 比例(下限)+ 一般文书页边距,走统一 A4 规格(utils/document-paper.ts)。 + 原来那套 `--pane-gutter: clamp(20px, 8%, 96px)` 只是"看着像版心", + 与签署预览的页边距对不上,编辑时看到的换行位置和签出来不一样。 + **用 min-height 而不是 aspect-ratio**:aspect-ratio 会被 WangEditor 内层的 + 滚动容器吃掉(正文 1574px 而纸定死在 1160px,正文直接露到灰桌上); + min-height 只是下限,正文多了纸自己长高,滚动交给纸桌。 */ +.pane-content { + width: 100%; + min-height: var(--doc-paper-min-h-cqw); + padding: var(--doc-paper-pad-y-cqw) var(--doc-paper-pad-x-cqw); + background: #fff; + box-shadow: var(--sh); +} + +/* 编辑面本身不再要 padding —— 页边距已由纸(.pane-content)给; + WangEditor 默认的 `padding: 0 10px` 也要一并清掉 */ .pane-content :deep([data-slate-editor]) { - padding: 0 var(--pane-gutter); + padding: 0; +} + +/* 空文档提示绝对定位于纸的内层容器,WangEditor 自带一点偏移(实测右下各偏 ~10/17px), + 这里拉回版心原点,否则空文档时提示文字不与正文左边界对齐 */ +.pane-content :deep(.w-e-text-container) { + padding: 0; } -/* 占位符绝对定位于 .w-e-text-container(而非编辑区),不跟随上面的 padding, - 需单独对齐到同一版心,否则空文档时提示文字会贴左边框 */ .pane-content :deep(.w-e-text-placeholder) { - right: var(--pane-gutter); - left: var(--pane-gutter); + top: 0; + right: 0; + left: 0; width: auto; + margin: 0; + padding: 0; } /* 粘贴的 Word 表格:解除绝对列宽、允许单元格换行, diff --git a/clinical-web/src/views/workbench/signing/components/SignedDocumentDialog.vue b/clinical-web/src/views/workbench/signing/components/SignedDocumentDialog.vue index fbfd6ce..23495b6 100644 --- a/clinical-web/src/views/workbench/signing/components/SignedDocumentDialog.vue +++ b/clinical-web/src/views/workbench/signing/components/SignedDocumentDialog.vue @@ -46,6 +46,8 @@ const documentData = computed(() => ({