From b8c05e0329dd16016b2bc144d598bc2f879ed05f Mon Sep 17 00:00:00 2001 From: augushong Date: Fri, 15 May 2026 23:38:39 +0800 Subject: [PATCH] =?UTF-8?q?fix(phoneimage):=20=E4=BF=AE=E5=A4=8D=E5=AD=97?= =?UTF-8?q?=E5=8F=B7=E7=BC=A9=E6=94=BE=E4=B8=8D=E7=94=9F=E6=95=88=E4=BA=8E?= =?UTF-8?q?=E7=94=BB=E5=B8=83=E6=B8=B2=E6=9F=93=E5=92=8C=E6=AE=B5=E8=90=BD?= =?UTF-8?q?=E6=96=87=E5=AD=97=EF=BC=8C=E7=BC=A9=E5=B0=8F=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E8=A1=8C=E9=97=B4=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CSS: 在 #render-preview 和 #render-staging 上重新声明中间变量 (--pi-font-size-base 等)，使其在本地用 --pi-font-scale 重新计算， 解决 CSS 自定义属性在 :root 预计算后子元素继承固定值的问题 - CSS: #render-preview 的 font-size 从 var(--pi-font-size-base) 改为 直接 calc(14px * var(--pi-font-scale, 1))，确保段落文字响应缩放 - JS: doCapturePages() 在 ensureStaging() 后调用 applyFontScale()， 确保首次创建 staging 时 --pi-font-scale 被正确设置 - CSS: th/td padding 从 8px 10px 缩小为 4px 10px，减少表格行间距 - HTML: body 布局改为 flex-column 防止页面级滚动 --- public/static/css/phone-image-templates.css | 28 +++++++++++++++------ public/static/js/phone-image.js | 1 + view/admin/post/phone_image.html | 13 +++++++++- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css index 7940250..c38047a 100644 --- a/public/static/css/phone-image-templates.css +++ b/public/static/css/phone-image-templates.css @@ -18,6 +18,20 @@ --pi-font-size-title: calc(26px * var(--pi-font-scale, 1)); --pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1)); --pi-font-size-small: calc(12px * var(--pi-font-scale, 1)); +} + +/* + * 字号缩放中间变量局部覆盖 + * 当 --pi-font-scale 通过 inline style 设置在 #render-preview 或 #render-staging 上时， + * 需要在该元素上重新声明中间变量，使其用本地的 --pi-font-scale 重新计算。 + * 否则中间变量继承 :root 的预计算值（:root 的 --pi-font-scale 始终为 1），缩放不生效。 + */ +#render-preview, +#render-staging { + --pi-font-size-base: calc(14px * var(--pi-font-scale, 1)); + --pi-font-size-title: calc(26px * var(--pi-font-scale, 1)); + --pi-font-size-subtitle: calc(16px * var(--pi-font-scale, 1)); + --pi-font-size-small: calc(12px * var(--pi-font-scale, 1)); /* 行高 */ --pi-line-height: 1.8; /* 间距 */ @@ -579,8 +593,8 @@ /* 表格美化样式（html2canvas兼容） */ .page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); } -.page-content th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; } -.page-content td { padding: 8px 10px; border: 1px solid #ddd; } +.page-content th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; } +.page-content td { padding: 4px 10px; border: 1px solid #ddd; } .page-content tr:nth-child(even) td { background-color: #f9f9f9; } .content-flow pre { @@ -607,8 +621,8 @@ /* 中间栏表格样式 */ .content-flow-block table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: calc(13px * var(--pi-font-scale, 1)); } -.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 8px 10px; border: 1px solid #ddd; text-align: left; } -.content-flow-block td { padding: 8px 10px; border: 1px solid #ddd; } +.content-flow-block th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; } +.content-flow-block td { padding: 4px 10px; border: 1px solid #ddd; } .content-flow-block tr:nth-child(even) td { background-color: #f9f9f9; } /* ============================================ @@ -780,7 +794,7 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm #render-preview { font-family: var(--pi-font-family); - font-size: var(--pi-font-size-base); + font-size: calc(14px * var(--pi-font-scale, 1)); line-height: var(--pi-line-height); color: var(--pi-color-text); } @@ -858,13 +872,13 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm #render-preview th { background-color: #f0f0f0; font-weight: bold; - padding: 8px 10px; + padding: 4px 10px; border: 1px solid #ddd; text-align: left; } #render-preview td { - padding: 8px 10px; + padding: 4px 10px; border: 1px solid #ddd; } diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index 620c53a..92fc3a7 100644 --- a/public/static/js/phone-image.js +++ b/public/static/js/phone-image.js @@ -1048,6 +1048,7 @@ var PhoneImageEngine = (function () { function doCapturePages(opts, pageProgressCallback) { var deferred = $.Deferred(); ensureStaging(); + applyFontScale(); var $staging = $('#render-staging'); $staging.empty(); diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html index 46758cd..1842f6c 100644 --- a/view/admin/post/phone_image.html +++ b/view/admin/post/phone_image.html @@ -11,10 +11,19 @@