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 防止页面级滚动

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 {