feat(phoneimage): 添加日志面板UI和右栏布局重构

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

@@ -961,11 +961,19 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
    ============================================ */
 
 .paginated-preview-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #f5f5f5;
+}
+
+.preview-thumb-zone {
     flex: 1;
     overflow-x: auto;
     overflow-y: hidden;
     padding: 20px;
-    background: #f5f5f5;
+    min-height: 0;
 }
 
 #paginated-preview {
@@ -973,6 +981,68 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
     flex-direction: row;
     align-items: flex-start;
     gap: 20px;
-    height: 100%;
     padding: 0 10px;
 }
+
+/* 封面文案样式(替代内联font-size,支持字号缩放) */
+.cover-text-inline {
+    font-size: calc(14px * var(--pi-font-scale, 1));
+    color: #1890ff;
+    margin-top: 8px;
+}
+.cover-text-inline.cover-text-no-img {
+    margin-top: 10px;
+    padding: 0 30px;
+    word-break: break-word;
+}
+
+/* 操作日志面板 */
+.log-panel {
+    height: 200px;
+    flex-shrink: 0;
+    border-top: 1px solid #e8e8e8;
+    display: flex;
+    flex-direction: column;
+    background: #1e1e1e;
+    color: #d4d4d4;
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 12px;
+}
+.log-panel.collapsed {
+    height: auto;
+}
+.log-panel.collapsed .log-panel-body {
+    display: none;
+}
+.log-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 10px;
+    background: #2d2d2d;
+    border-bottom: 1px solid #3e3e3e;
+    flex-shrink: 0;
+}
+.log-panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 10px;
+    min-height: 0;
+}
+.log-panel-actions {
+    display: flex;
+    gap: 6px;
+}
+.log-entry {
+    padding: 2px 0;
+    line-height: 1.5;
+    border-bottom: 1px solid #2a2a2a;
+}
+.log-info { color: #4fc3f7; }
+.log-warn { color: #ffb74d; }
+.log-error { color: #ef5350; }
+.log-success { color: #81c784; }
+.log-time {
+    color: #888;
+    margin-right: 8px;
+}

public/static/js/phone-image.js

@@ -1,3 +1,82 @@
+/**
+ * 操作日志面板模块
+ * 提供实时日志显示，替代 layer.load() 遮罩
+ */
+var PhoneImageLogPanel = (function () {
+    var $panel = null;
+    var $body = null;
+    var MAX_ENTRIES = 500;
+    var entryCount = 0;
+
+    function formatTime() {
+        var d = new Date();
+        var h = (d.getHours() < 10 ? '0' : '') + d.getHours();
+        var m = (d.getMinutes() < 10 ? '0' : '') + d.getMinutes();
+        var s = (d.getSeconds() < 10 ? '0' : '') + d.getSeconds();
+        return h + ':' + m + ':' + s;
+    }
+
+    function log(msg, level) {
+        if (!$body) return;
+        level = level || 'info';
+        var entryHtml = '<div class="log-entry log-' + level + '">' +
+            '<span class="log-time">' + formatTime() + '</span>' +
+            '<span class="log-msg">' + msg + '</span>' +
+            '</div>';
+        $body.append(entryHtml);
+        entryCount++;
+        if (entryCount > MAX_ENTRIES) {
+            $body.children().first().remove();
+            entryCount--;
+        }
+        $body.scrollTop($body[0].scrollHeight);
+    }
+
+    function clear() {
+        if (!$body) return;
+        $body.empty();
+        entryCount = 0;
+    }
+
+    function toggle() {
+        if (!$panel) return;
+        $panel.toggleClass('collapsed');
+    }
+
+    function collapse() {
+        if (!$panel) return;
+        $panel.addClass('collapsed');
+    }
+
+    function expand() {
+        if (!$panel) return;
+        $panel.removeClass('collapsed');
+    }
+
+    function init(container) {
+        var panelHtml = '<div class="log-panel" id="log-panel">' +
+            '<div class="log-panel-header">' +
+            '<span style="font-size:12px;color:#ccc;">操作日志</span>' +
+            '<div class="log-panel-actions">' +
+            '<button type="button" id="log-btn-clear" style="background:transparent;border:1px solid #555;color:#aaa;padding:1px 8px;cursor:pointer;border-radius:3px;font-size:11px;">清空</button>' +
+            '<button type="button" id="log-btn-toggle" style="background:transparent;border:1px solid #555;color:#aaa;padding:1px 8px;cursor:pointer;border-radius:3px;font-size:11px;">收起</button>' +
+            '</div>' +
+            '</div>' +
+            '<div class="log-panel-body"></div>' +
+            '</div>';
+        $(container).append(panelHtml);
+        $panel = $('#log-panel');
+        $body = $panel.find('.log-panel-body');
+        $('#log-btn-clear').on('click', function () { clear(); });
+        $('#log-btn-toggle').on('click', function () {
+            toggle();
+            $(this).text($panel.hasClass('collapsed') ? '展开' : '收起');
+        });
+    }
+
+    return { init: init, log: log, clear: clear, toggle: toggle, collapse: collapse, expand: expand };
+})();
+
 /**
  * PhoneImageEngine - 手机图片排版引擎
  *
@@ -184,6 +263,9 @@ var PhoneImageEngine = (function () {
         // 清除空段落
         html = html.replace(/<p[^>]*>\s*<\/p>/gi, '');
 
+        // 移除内联font-size,让CSS变量控制字号
+        html = html.replace(/\s*font-size\s*:\s*[^;'"<>]+;?/gi, '');
+
         // 处理图片: 保留原始尺寸到data属性, 强制 max-width:100%
         html = html.replace(/<img([^>]*?)>/gi, function (match, attrs) {
             // 移除内联style
@@ -747,7 +829,7 @@ var PhoneImageEngine = (function () {
             }
             // 封面文案（有封面图）
             if (postData.coverText) {
-                html += '<div style="font-size:14px;color:#1890ff;margin-top:8px;">' + escapeHtml(postData.coverText) + '</div>';
+                html += '<div class="cover-text-inline">' + escapeHtml(postData.coverText) + '</div>';
             }
             html += '<div class="cover-meta">';
             if (postData.category_name) {
@@ -771,7 +853,7 @@ var PhoneImageEngine = (function () {
             }
             // 封面文案（无封面图）
             if (postData.coverText) {
-                html += '<div style="font-size:14px;color:#1890ff;margin-top:10px;padding:0 30px;word-break:break-word;">' + escapeHtml(postData.coverText) + '</div>';
+                html += '<div class="cover-text-inline cover-text-no-img">' + escapeHtml(postData.coverText) + '</div>';
             }
             html += '<div class="cover-no-img-meta">';
             if (postData.category_name) {
@@ -848,7 +930,7 @@ var PhoneImageEngine = (function () {
         html += '<div class="summary-text">' + escapeHtml(postData.title) + '</div>';
 
         if (postData.desc) {
-            html += '<div class="summary-text" style="font-size:12px;">' + escapeHtml(postData.desc) + '</div>';
+            html += '<div class="summary-text">' + escapeHtml(postData.desc) + '</div>';
         }
 
         html += '<div class="summary-footer">';

view/admin/post/phone_image.html

@@ -97,9 +97,9 @@
 
         .paginated-preview-area {
             flex: 1;
-            overflow-x: auto;
-            overflow-y: hidden;
-            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
             background: #f5f5f5;
         }
 
@@ -108,10 +108,17 @@
             flex-direction: row;
             align-items: flex-start;
             gap: 20px;
-            height: 100%;
             padding: 0 10px;
         }
 
+        .preview-thumb-zone {
+            flex: 1;
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding: 20px;
+            min-height: 0;
+        }
+
         /* 设置弹框样式 */
         .settings-form .layui-form-item {
             margin-bottom: 15px;
@@ -122,6 +129,57 @@
         .settings-form .layui-input-block {
             margin-left: 90px;
         }
+
+        /* 操作日志面板 */
+        .log-panel {
+            height: 200px;
+            flex-shrink: 0;
+            border-top: 1px solid #e8e8e8;
+            display: flex;
+            flex-direction: column;
+            background: #1e1e1e;
+            color: #d4d4d4;
+            font-family: Consolas, 'Courier New', monospace;
+            font-size: 12px;
+        }
+        .log-panel.collapsed {
+            height: auto;
+        }
+        .log-panel.collapsed .log-panel-body {
+            display: none;
+        }
+        .log-panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 4px 10px;
+            background: #2d2d2d;
+            border-bottom: 1px solid #3e3e3e;
+            flex-shrink: 0;
+        }
+        .log-panel-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 4px 10px;
+            min-height: 0;
+        }
+        .log-panel-actions {
+            display: flex;
+            gap: 6px;
+        }
+        .log-entry {
+            padding: 2px 0;
+            line-height: 1.5;
+            border-bottom: 1px solid #2a2a2a;
+        }
+        .log-info { color: #4fc3f7; }
+        .log-warn { color: #ffb74d; }
+        .log-error { color: #ef5350; }
+        .log-success { color: #81c784; }
+        .log-time {
+            color: #888;
+            margin-right: 8px;
+        }
     </style>
 </head>
 
@@ -179,7 +237,10 @@
 
         <!-- 右侧：分页排版预览 -->
         <div class="paginated-preview-area">
-            <div id="paginated-preview" class="preview-thumbnails"></div>
+            <div class="preview-thumb-zone">
+                <div id="paginated-preview" class="preview-thumbnails"></div>
+            </div>
+            <!-- 日志面板由 LogPanel.init() 动态插入 -->
         </div>
     </div>
 
@@ -339,6 +400,10 @@
 
             PhoneImageEngine.init(postData, initConfig);
 
+            // 初始化日志面板
+            PhoneImageLogPanel.init('.paginated-preview-area');
+            PhoneImageLogPanel.log('排版引擎已初始化', 'info');
+
             // 初始同步预览区
             PhoneImageEngine.syncPreview();