diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css index d4535da..7940250 100644 --- a/public/static/css/phone-image-templates.css +++ b/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; +} diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index 0a02833..fe115e6 100644 --- a/public/static/js/phone-image.js +++ b/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 = '
' + + '' + formatTime() + '' + + '' + msg + '' + + '
'; + $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 = '
' + + '
' + + '操作日志' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
'; + $(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(/]*>\s*<\/p>/gi, ''); + // 移除内联font-size,让CSS变量控制字号 + html = html.replace(/\s*font-size\s*:\s*[^;'"<>]+;?/gi, ''); + // 处理图片: 保留原始尺寸到data属性, 强制 max-width:100% html = html.replace(/]*?)>/gi, function (match, attrs) { // 移除内联style @@ -747,7 +829,7 @@ var PhoneImageEngine = (function () { } // 封面文案(有封面图) if (postData.coverText) { - html += '
' + escapeHtml(postData.coverText) + '
'; + html += '
' + escapeHtml(postData.coverText) + '
'; } html += '
'; if (postData.category_name) { @@ -771,7 +853,7 @@ var PhoneImageEngine = (function () { } // 封面文案(无封面图) if (postData.coverText) { - html += '
' + escapeHtml(postData.coverText) + '
'; + html += '
' + escapeHtml(postData.coverText) + '
'; } html += '
'; if (postData.category_name) { @@ -848,7 +930,7 @@ var PhoneImageEngine = (function () { html += '
' + escapeHtml(postData.title) + '
'; if (postData.desc) { - html += '
' + escapeHtml(postData.desc) + '
'; + html += '
' + escapeHtml(postData.desc) + '
'; } html += ' @@ -339,6 +400,10 @@ PhoneImageEngine.init(postData, initConfig); + // 初始化日志面板 + PhoneImageLogPanel.init('.paginated-preview-area'); + PhoneImageLogPanel.log('排版引擎已初始化', 'info'); + // 初始同步预览区 PhoneImageEngine.syncPreview();