refactor(文书纸): 统一 A4 纸规格并收敛各渲染场景的纸宽与页边距

This commit is contained in:
yelan
2026-09-27 13:54:15 +08:00
parent 635e998946
commit 431dd2cd6f
8 changed files with 150 additions and 52 deletions
@@ -108,20 +108,24 @@ defineExpose({ getDocumentElement })
<div v-if="task.status === 'void'" class="void-stamp">已 作 废</div>
<DocumentPaper
ref="paperRef"
class="sign-doc-body"
:content-html="task.documentContentHtml ?? ''"
:data="documentData"
:interactive="interactive"
:selected-items="task.selectedItems"
:field-answers="task.fieldAnswers"
:signature-data-url="task.signatureDataUrl"
:signature-injections="signatureInjections"
@selection-change="emit('selection-change', $event)"
@field-change="handleFieldChange"
@signature-request="emit('signature-request', $event)"
/>
<!-- 纸桌:灰底 + 内滚,纸(一页 A4)居中摆在上面。
纸不能直接当 flex 子项 —— `flex: 1` 会把高度交给布局,
`aspect-ratio` 在主轴上不生效,A4 比例就没了 -->
<div class="sign-doc-body">
<DocumentPaper
ref="paperRef"
:content-html="task.documentContentHtml ?? ''"
:data="documentData"
:interactive="interactive"
:selected-items="task.selectedItems"
:field-answers="task.fieldAnswers"
:signature-data-url="task.signatureDataUrl"
:signature-injections="signatureInjections"
@selection-change="emit('selection-change', $event)"
@field-change="handleFieldChange"
@signature-request="emit('signature-request', $event)"
/>
</div>
<footer v-if="interactive" class="sign-doc-footer">
<span>
@@ -202,13 +206,15 @@ defineExpose({ getDocumentElement })
background: #8a9aa3;
}
/* 纸的盒子:DocumentPaper 只给排版与白底(variant=plain),
内边距与滚动由这里给。类名通过 fallthrough 落到纸的根元素上。 */
/* 纸桌:灰底 + 内滚,纸(一页 A4)居中摆在上面。
纸自己的比例与页边距走统一 A4 规格(.doc-paper--a4,见 utils/document-paper.ts),
这里只留「桌子」—— 四周留一圈灰边,纸才不会顶到卡片边缘。 */
.sign-doc-body {
flex: 1;
min-height: 0;
padding: 26px 32px 30px;
padding: 16px 20px 20px;
overflow: auto;
background: var(--bg);
}
.sign-doc-footer {