From 3cc024409fe972d2cd4aaf939c40619b8c3b7fab Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Sun, 3 May 2026 09:00:32 +0800
Subject: [PATCH] refactor(phone-image): CSS and HTML for thumbnail preview
 container

---
 public/static/css/phone-image-templates.css | 76 +++++++++++++++++++--
 view/admin/post/phone_image.html            | 19 ++++--
 2 files changed, 83 insertions(+), 12 deletions(-)

diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css
index 8c4e55d..40d52f6 100644
--- a/public/static/css/phone-image-templates.css
+++ b/public/static/css/phone-image-templates.css
@@ -490,14 +490,45 @@
     opacity: 1;
 }
 
-/* --- 逐页对齐切换指示器 --- */
-.page-alignment-toggle {
+/* ============================================
+   Preview Thumbnails (缩略图容器)
+   ============================================ */
+.preview-thumbnails {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 20px;
+    height: 100%;
+    padding: 0 10px;
+}
+
+.preview-thumb-item {
+    position: relative;
+    flex-shrink: 0;
+    text-align: center;
+}
+
+.preview-thumb-item img {
+    display: block;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.preview-thumb-page-num {
+    display: block;
+    text-align: center;
+    font-size: 12px;
+    color: #999;
+    margin-top: 6px;
+}
+
+.thumb-alignment-toggle {
     position: absolute;
     top: 8px;
     right: 8px;
     z-index: 10;
-    opacity: 0.5;
-    cursor: pointer;
+    opacity: 0;
     width: 24px;
     height: 24px;
     border-radius: 4px;
@@ -510,15 +541,46 @@
     user-select: none;
     border: none;
     padding: 0;
+    cursor: pointer;
+    transition: opacity 0.2s;
 }
 
-.page-alignment-toggle:hover {
+.preview-thumb-item:hover .thumb-alignment-toggle {
     opacity: 1;
+}
+
+.thumb-alignment-toggle:hover {
     background: rgba(0, 0, 0, 0.1);
 }
 
-.page-alignment-toggle.active-center {
+.thumb-alignment-toggle.active-center {
     opacity: 1;
     background: rgba(24, 144, 255, 0.15);
-    color: var(--pi-color-accent);
+    color: #1890ff;
+}
+
+/* ============================================
+   Content Flow Code Blocks (中间栏代码块样式)
+   仅用于编辑区中间栏, 不影响渲染页面
+   ============================================ */
+.content-flow pre {
+    background: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 12px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.6;
+    margin: 10px 0;
+}
+
+.content-flow code {
+    font-family: 'Courier New', Consolas, monospace;
+    font-size: 13px;
+}
+
+.content-flow pre code {
+    background: none;
+    border: none;
+    padding: 0;
 }
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index bb688dc..2aa4f95 100644
--- a/view/admin/post/phone_image.html
+++ b/view/admin/post/phone_image.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
     <link rel="stylesheet" href="/static/css/phone-image-templates.css">
     <link rel="stylesheet" href="/static/css/phone-image-fonts.css">
+    <link rel="stylesheet" href="/static/lib/prismjs/prism.css">
     <style>
         body {
             margin: 0;
@@ -52,13 +53,19 @@
 
         .paginated-preview-area {
             flex: 1;
-            overflow-y: auto;
+            overflow-x: auto;
+            overflow-y: hidden;
             padding: 20px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
             background: #f5f5f5;
+        }
+
+        #paginated-preview {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
             gap: 20px;
+            height: 100%;
+            padding: 0 10px;
         }
 
         .toolbar .layui-form-label {
@@ -151,13 +158,14 @@
 
         <!-- 右侧：分页排版预览 -->
         <div class="paginated-preview-area">
-            <div id="paginated-preview" class="phone-image-container size-xiaohongshu"></div>
+            <div id="paginated-preview" class="preview-thumbnails"></div>
         </div>
     </div>
 
     <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
     <script src="/static/lib/layui/layui.js"></script>
     <script src="/static/lib/html2canvas/html2canvas.js"></script>
+    <script src="/static/lib/prismjs/prism.js"></script>
     <script src="/static/js/phone-image.js"></script>
     <script>
         layui.use(['form', 'layer'], function () {
@@ -269,6 +277,7 @@
             doRender();
         });
     </script>
+    <div id="render-staging" style="position:fixed;left:-9999px;top:0;visibility:hidden;"></div>
 </body>
 
 </html>