fix(phone-image): 修復5個UI問題

1. 中間預覽區工具欄折行: 縮小字號/間距(gap 8->4, font 12->11px)
2. 右側畫布缺少頁間距: 新增scaleWrapper裁切transform溢出
3. 右側對齊下拉框不可見: select改為正常文檔流,移除position:absolute
4. 正文水平居中: dom-page-content添加text-align:left
5. 列表不顯示序號/圓點: 顯式設置list-style-type + display:list-item

public/static/css/phone-image-templates.css

@@ -603,9 +603,7 @@
 }
 
 .thumb-alignment-select {
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
+    display: block;
     height: 22px;
     font-size: 11px;
     border: 1px solid #d9d9d9;
@@ -613,7 +611,7 @@
     padding: 0 2px;
     background: #fff;
     cursor: pointer;
-    z-index: 10;
+    margin: 4px auto 0;
     opacity: 0;
     transition: opacity 0.2s;
 }
@@ -955,14 +953,39 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
 }
 
 /* 预览区列表 */
-#render-preview ul,
+#render-preview ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 10px;
+}
+
 #render-preview ol {
+    list-style-type: decimal;
     padding-left: 20px;
     margin-bottom: 10px;
 }
 
 #render-preview li {
     margin-bottom: 5px;
+    display: list-item;
+}
+
+/* DOM分页预览列表 */
+.dom-page-content ul {
+    list-style-type: disc;
+    padding-left: 20px;
+    margin-bottom: 10px;
+}
+
+.dom-page-content ol {
+    list-style-type: decimal;
+    padding-left: 20px;
+    margin-bottom: 10px;
+}
+
+.dom-page-content li {
+    margin-bottom: 5px;
+    display: list-item;
 }
 
 /* ============================================
@@ -1152,6 +1175,7 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
     font-size: calc(14px * var(--pi-font-scale, 1));
     line-height: 1.8;
     word-break: break-word;
+    text-align: left;
 }
 
 /* DOM分页内容区对齐支持 (复用valign模式) */
@@ -1159,12 +1183,14 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
     display: flex;
     flex-direction: column;
     justify-content: center;
+    text-align: left;
 }
 
 .dom-page-content.valign-bottom {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
+    text-align: left;
 }
 
 /* --- DOM分页页码 --- */

public/static/js/phone-image.js

@@ -1515,9 +1515,14 @@ var PhoneImageEngine = (function () {
             var $thumbItem = $('<div class="preview-thumb-item" data-page-index="' + i + '"></div>').css({
                 'flex-shrink': '0',
                 'width': thumbWidth + 'px',
-                'position': 'relative'
+                'position': 'relative',
+                'margin-bottom': '8px'
             });
 
+            // 创建overflow:hidden的缩放wrapper，裁切transform:scale溢出
+            var scaledH = Math.round(sizeConfig.height * scaleRatio);
+            var $scaleWrapper = $('<div style="overflow:hidden;width:' + thumbWidth + 'px;height:' + scaledH + 'px;"></div>');
+
             // 创建DOM分页容器（实际尺寸，通过transform缩放显示为缩略图）
             var $container = $('<div class="dom-page-container"></div>').css({
                 'transform': 'scale(' + scaleRatio + ')',
@@ -1535,13 +1540,14 @@ var PhoneImageEngine = (function () {
             // pages[].html 是完整的 .phone-image-page 结构（含品牌header、内容、页码、水印）
             $container.html(domPage.html);
 
-            $thumbItem.append($container);
+            $scaleWrapper.append($container);
+            $thumbItem.append($scaleWrapper);
 
             // 页码标签（N/M格式）
             var $pageNum = $('<span class="preview-thumb-page-num"></span>').text((i + 1) + '/' + totalPages);
             $thumbItem.append($pageNum);
 
-            // 对齐select（仅内容页显示）
+            // 对齐select（仅内容页显示，正常文档流放在页码下方）
             if (pageType === 'content') {
                 var pageNum = domPage.pageNum || (i + 1);
                 var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';

view/admin/post/phone_image.html

@@ -229,9 +229,9 @@
         <div class="render-preview-area">
             <div class="preview-header">
                 <span>渲染预览</span>
-                <div style="display:inline-flex;align-items:center;gap:8px;float:right;">
-                    <span style="font-size:12px;color:#666;">字号</span>
-                    <select id="font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
+                <div style="display:inline-flex;align-items:center;gap:4px;float:right;">
+                    <span style="font-size:11px;color:#666;">字号</span>
+                    <select id="font-scale-select" style="height:24px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
                         <option value="0.5">0.5x</option>
                         <option value="0.8">0.8x</option>
                         <option value="1.0" selected>1.0x</option>
@@ -241,10 +241,10 @@
                         <option value="custom">自定义</option>
                     </select>
                     <input type="number" id="font-scale-custom" min="0.5" max="2.0" step="0.1" value="1.0"
-                           style="width:60px;height:24px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
-                    <span id="font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
-                    <span style="font-size:12px;color:#666;margin-left:8px;">表格字号</span>
-                    <select id="table-font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
+                           style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
+                    <span id="font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
+                    <span style="font-size:11px;color:#666;margin-left:4px;">表格字号</span>
+                    <select id="table-font-scale-select" style="height:24px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
                         <option value="0.5">0.5x</option>
                         <option value="0.8">0.8x</option>
                         <option value="1.0" selected>1.0x</option>
@@ -254,10 +254,10 @@
                         <option value="custom">自定义</option>
                     </select>
                     <input type="number" id="table-font-scale-custom" min="0.5" max="2.0" step="0.1" value="1.0"
-                           style="width:60px;height:24px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
-                    <span id="table-font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
-                    <span style="font-size:12px;color:#666;margin-left:8px;">代码字号</span>
-                    <select id="code-font-scale-select" style="height:26px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
+                           style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
+                    <span id="table-font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
+                    <span style="font-size:11px;color:#666;margin-left:4px;">代码字号</span>
+                    <select id="code-font-scale-select" style="height:24px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;padding:0 4px;">
                         <option value="0.5">0.5x</option>
                         <option value="0.8">0.8x</option>
                         <option value="1.0" selected>1.0x</option>
@@ -267,8 +267,8 @@
                         <option value="custom">自定义</option>
                     </select>
                     <input type="number" id="code-font-scale-custom" min="0.5" max="2.0" step="0.1" value="1.0"
-                           style="width:60px;height:24px;font-size:12px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
-                    <span id="code-font-scale-value" style="font-size:12px;color:#1890ff;min-width:32px;">1.0x</span>
+                           style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;">
+                    <span id="code-font-scale-value" style="font-size:11px;color:#1890ff;min-width:28px;">1.0x</span>
                 </div>
             </div>
             <div id="render-preview"></div>