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

clinical-web/src/utils/document-paper.ts

@@ -14,12 +14,52 @@
  * （setup 期，避免首帧"纸没排版"的闪烁），且规则文本同时供导出 PDF 之类的场景复用。
  *
  * 选择器一律以 `.doc-paper` 开头，挂在容器 div 上。
+ * 例外只有一处：A4 规格的 `--doc-paper-*` 变量放在 `:root`（见下），
+ * 因为编辑器里的编辑面不是 `.doc-paper`（是 WangEditor 的 `[data-slate-editor]`），
+ * 它也要吃同一套页边距。
  *
  * 注意：填写项胶囊 / 选项 ☑☐ / 系统页眉的样式**不在这里**，
  * 它们与「签署态」语义强相关，统一在 styles/signing-document.css。
  */
 
 export const DOCUMENT_PAPER_CSS = `
+/* ============ A4 纸规格（全项目唯一一份） ============
+   A4 = 210mm × 297mm。页边距：
+   - 左右 3.18cm（Word 中文默认的「一般文书」留白）→ 占纸宽 15.14%
+   - 上下 1.4cm（原型工作台 #previewBox .paper 的 56px 那一档）→ 占纸宽 6.83%
+     上下比左右紧是刻意的：820px 宽的纸上 2.54cm（Word 默认）会在顶部空出一大片，
+     屏幕上很显眼；原型用的就是这一档。
+   纸宽上限 820px 时对应的 px 值（124px / 56px）就是 clamp 的上界。
+
+   为什么用 clamp 而不是裸百分比：% padding 以**包含块宽度**为基准，不是自身宽。
+   纸在窄容器里 width:100% 时两者相等（裸百分比正好）；纸一旦被 max-width 收窄，
+   百分比就会按更宽的包含块算 → 页边距偏大。clamp 让「纸 == 容器」和「纸被收窄」
+   两种情形都得到同一套页边距。
+   ⚠️ 换纸宽时两个 --doc-paper-pad-* 要跟着改（与 --doc-paper-max-w 是一组）。
+   ⚠️ 本段在模板字符串里，注释内**不要写反引号**，会提前结束字符串。 */
+:root {
+  --doc-paper-max-w: 820px;
+  --doc-paper-pad-x: clamp(20px, 15.14%, 124px);
+  --doc-paper-pad-y: clamp(16px, 6.83%, 56px);
+  /* 同一套比例，用**容器查询单位**表达：给「纸壳宽度 == 纸宽」的场景（编辑器）用。
+     那种场景下 cqw 精确等于纸宽的 1%，不需要 clamp 的两段兜底。
+     ⚠️ 这三个与上面那三个必须同步改；只在有 container-type:inline-size 祖先的元素上用，
+        否则 cqw 会退化成相对视口算。 */
+  --doc-paper-pad-x-cqw: 15.14cqw;
+  --doc-paper-pad-y-cqw: 6.83cqw;
+  --doc-paper-min-h-cqw: 141.43cqw; /* 297 / 210 */
+}
+
+/* 一页 A4：比例 + 一般文书页边距。
+   aspect-ratio 只是**下限** —— 内容超过一页时盒子会长高（实测过），不裁切、不内滚。 */
+.doc-paper--a4 {
+  width: 100%;
+  max-width: var(--doc-paper-max-w);
+  margin: 0 auto;
+  aspect-ratio: 210 / 297;
+  padding: var(--doc-paper-pad-y) var(--doc-paper-pad-x);
+}
+
 .doc-paper {
   color: #1c2b33;
   font-family: 'SimSun', 'Songti SC', 'STSong', serif;