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

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">';