From 38672565195e4752812e9028961abb4f23e60034 Mon Sep 17 00:00:00 2001 From: augushong Date: Tue, 19 May 2026 19:46:11 +0800 Subject: [PATCH] =?UTF-8?q?fix(phone-image):=20=E4=BF=AE=E5=BE=A95?= =?UTF-8?q?=E5=80=8BUI=E5=95=8F=E9=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 36 ++++++++++++++++++--- public/static/js/phone-image.js | 12 +++++-- view/admin/post/phone_image.html | 26 +++++++-------- 3 files changed, 53 insertions(+), 21 deletions(-) diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css index 7f2a4fd..92fbe6a 100644 --- a/public/static/css/phone-image-templates.css +++ b/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分页页码 --- */ diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index acfde91..eae35fe 100644 --- a/public/static/js/phone-image.js +++ b/public/static/js/phone-image.js @@ -1515,9 +1515,14 @@ var PhoneImageEngine = (function () { var $thumbItem = $('
').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 = $('
'); + // 创建DOM分页容器（实际尺寸，通过transform缩放显示为缩略图） var $container = $('
').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 = $('').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'; diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html index 2a0eb36..0df4ebd 100644 --- a/view/admin/post/phone_image.html +++ b/view/admin/post/phone_image.html @@ -229,9 +229,9 @@
渲染预览 -
- 字号 - @@ -241,10 +241,10 @@ - 1.0x - 表格字号 - @@ -254,10 +254,10 @@ - 1.0x - 代码字号 - @@ -267,8 +267,8 @@ - 1.0x + style="width:50px;height:22px;font-size:11px;border:1px solid #d9d9d9;border-radius:3px;text-align:center;display:none;"> + 1.0x