175 lines
6.3 KiB
TypeScript
175 lines
6.3 KiB
TypeScript
/**
|
||
* 文书纸的基础排版（全项目唯一一份）。
|
||
*
|
||
* 为什么单独成文件、还要在运行期注入：同一份「文书纸」原先有**两种渲染通道**——
|
||
* ① v-html 直接挂进页面（签署工作台、各类预览）→ 只能吃全局样式；
|
||
* ② iframe srcdoc（文书库的「文书内容」页签，隔离模板自带的 `<style>`）→ 只能吃字符串。
|
||
* 各写一份必然漂移：改版前实测已经有 5 份副本，表格边框在 `#52646e` 与 `#c8d7dd` 之间
|
||
* 分叉、单元格内边距 `5px 7px` 与 `5px 9px` 不一致、只有两处带宋体。
|
||
* 所以这里只维护一份字符串。
|
||
*
|
||
* **2026-09-27 起只剩 ① 一条通道**：文书库预览去掉了「文书内容」页签，
|
||
* iframe/srcdoc 那条路连同 `DocumentPaper` 的 `raw` 模式一起删除。
|
||
* 仍然保留「运行期注入」而不是普通 css 文件，是因为注入的时机可控
|
||
* （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);
|
||
/* A4 的**最小高度**：纸宽封顶 820 时就是 1159.71px（= 820 × 297/210）；
|
||
容器比 820 窄时纸也会跟着窄，那时按容器宽 × 297/210 算（cqw = 容器宽的 1%）。
|
||
两个分支在「容器 == 纸宽」处正好接上，所以 min() 挑哪个都对。
|
||
|
||
⚠️ **不要用 aspect-ratio 表达这个下限**（2026-09-27 踩过）：
|
||
aspect-ratio 会把纸的**高度定死**，正文比一页高时纸不长高、内容直接溢到纸外 ——
|
||
实测深灰舞台那张纸卡在 1160px 而正文 1355px，用户看到的就是「纸张只显示一页」。
|
||
min-height 只设下限，正文多了纸一定长高（编辑器的纸一直是这么写的，没出过问题）。
|
||
|
||
⚠️ cqw 相对**最近的容器查询祖先**解析 —— 纸的父级必须带
|
||
container-type: inline-size（probe-a4-paper.cjs 会逐处断言纵向不溢出）。 */
|
||
--doc-paper-min-h: min(calc(var(--doc-paper-max-w) * 297 / 210), 141.43cqw);
|
||
}
|
||
|
||
/* 一页 A4：至少一页的高度 + 一般文书页边距。
|
||
min-height 是**下限** —— 正文超过一页时纸长高，不裁切、不内滚、不溢到纸外。
|
||
|
||
flex: none 也是必须的（2026-09-27 踩过）：预览弹窗的纸舞台是 flex 列容器且高度受限，
|
||
纸作为 flex 子项默认 flex-shrink: 1 → 会被**压回 min-height**、正文又溢到纸外。
|
||
flex: none（0 0 auto）让纸既不伸也不缩，高度 = max(正文, 一页 A4)。 */
|
||
.doc-paper--a4 {
|
||
width: 100%;
|
||
max-width: var(--doc-paper-max-w);
|
||
margin: 0 auto;
|
||
flex: none;
|
||
min-height: var(--doc-paper-min-h);
|
||
padding: var(--doc-paper-pad-y) var(--doc-paper-pad-x);
|
||
}
|
||
|
||
.doc-paper {
|
||
color: #1c2b33;
|
||
font-family: 'SimSun', 'Songti SC', 'STSong', serif;
|
||
font-size: 13.5px;
|
||
line-height: 1.85;
|
||
background: #fff;
|
||
}
|
||
|
||
.doc-paper p {
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.doc-paper h1,
|
||
.doc-paper h2 {
|
||
margin: 0 0 10px;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.doc-paper h3 {
|
||
margin: 14px 0 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.doc-paper h4 {
|
||
margin: 10px 0 4px;
|
||
font-size: 13.5px;
|
||
}
|
||
|
||
.doc-paper ol,
|
||
.doc-paper ul {
|
||
margin: 6px 0;
|
||
padding-left: 22px;
|
||
}
|
||
|
||
.doc-paper li {
|
||
margin: 0 0 4px;
|
||
}
|
||
|
||
/* 表格按内容自适应列宽并允许换行：绝对列宽在窄容器里会把整表裁掉 */
|
||
.doc-paper table {
|
||
width: 100%;
|
||
margin: 8px 0 12px;
|
||
border-collapse: collapse;
|
||
table-layout: auto;
|
||
font-size: 12.5px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.doc-paper th,
|
||
.doc-paper td {
|
||
padding: 5px 7px;
|
||
vertical-align: middle;
|
||
border: 1px solid #52646e;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.doc-paper th {
|
||
font-weight: 700;
|
||
background: #f2f6f8;
|
||
}
|
||
|
||
.doc-paper th p,
|
||
.doc-paper td p {
|
||
margin: 0;
|
||
}
|
||
|
||
.doc-paper img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 系统页眉是 flex 排的一行患者信息，纸内边距由容器给，这里只补下间距 */
|
||
.doc-paper > .sign-doc-header:first-child {
|
||
margin-top: 0;
|
||
}
|
||
`
|
||
|
||
const STYLE_TAG_ID = 'document-paper-base-style'
|
||
|
||
/**
|
||
* 把基础排版注入 `document.head`（幂等）。
|
||
*
|
||
* 用运行期注入而不是普通的全局 css 文件，是为了控制注入时机
|
||
* （setup 期而不是 onMounted，避免首帧"纸没排版"的闪烁），
|
||
* 并且让规则文本有唯一一份来源。
|
||
*/
|
||
export function ensureDocumentPaperStyle(): void {
|
||
if (typeof document === 'undefined') {
|
||
return
|
||
}
|
||
|
||
if (document.getElementById(STYLE_TAG_ID)) {
|
||
return
|
||
}
|
||
|
||
const style = document.createElement('style')
|
||
style.id = STYLE_TAG_ID
|
||
style.textContent = DOCUMENT_PAPER_CSS
|
||
document.head.appendChild(style)
|
||
}
|