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

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