fix(phoneimage): 修复字号缩放不生效于画布渲染和段落文字，缩小表格行间距

- 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

@@ -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 th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
-.page-content td { padding: 8px 10px; border: 1px solid #ddd; }
+.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 th { background-color: #f0f0f0; font-weight: bold; padding: 4px 10px; border: 1px solid #ddd; text-align: left; }
-.content-flow-block td { padding: 8px 10px; border: 1px solid #ddd; }
+.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;
 }
 

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();

view/admin/post/phone_image.html

@@ -11,10 +11,19 @@
     <link rel="stylesheet" href="/static/css/phone-image-templates.css">
     <link rel="stylesheet" href="/static/css/phone-image-fonts.css">
     <style>
+        html {
+            height: 100%;
+            overflow: hidden;
+        }
+
         body {
             margin: 0;
             padding: 0;
+            height: 100%;
+            overflow: hidden;
             background: #f2f2f2;
+            display: flex;
+            flex-direction: column;
         }
 
         .page-header {
@@ -24,6 +33,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            flex-shrink: 0;
         }
 
         .page-header-left {
@@ -49,7 +59,8 @@
 
         .main-layout {
             display: flex;
-            height: calc(100vh - 52px);
+            flex: 1;
+            min-height: 0;
         }
 
         .content-flow-area {