diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html index 9141101..ee48ceb 100644 --- a/view/admin/post/phone_image.html +++ b/view/admin/post/phone_image.html @@ -36,20 +36,29 @@ } .toolbar { - width: 260px; + width: 220px; background: #fff; border-right: 1px solid #e8e8e8; padding: 15px; overflow-y: auto; } - .preview-area { - flex: 1; - padding: 20px; + .content-flow-area { + width: 540px; overflow-y: auto; + border-right: 1px solid #e8e8e8; + background: #fafafa; + } + + .paginated-preview-area { + flex: 1; + overflow-y: auto; + padding: 20px; display: flex; - justify-content: center; - align-items: flex-start; + flex-direction: column; + align-items: center; + background: #f5f5f5; + gap: 20px; } .toolbar .layui-form-label { @@ -66,32 +75,6 @@ margin-bottom: 12px; } - .template-btn-group { - display: flex; - gap: 8px; - margin-bottom: 10px; - } - - .template-btn { - flex: 1; - padding: 8px; - text-align: center; - border: 2px solid #e8e8e8; - border-radius: 4px; - cursor: pointer; - font-size: 12px; - background: #fff; - } - - .template-btn.active { - border-color: #1890ff; - color: #1890ff; - } - - .template-btn:hover { - border-color: #1890ff; - } - .action-btns { margin-top: 15px; } @@ -100,30 +83,12 @@ width: 100%; margin-bottom: 8px; } - - .phone-frame { - background: #fff; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); - border-radius: 8px; - overflow: hidden; - } - - .preview-nav { - text-align: center; - margin-top: 10px; - } - - .preview-nav span { - margin: 0 10px; - cursor: pointer; - color: #1890ff; - } - +
@@ -138,17 +103,7 @@
-
- -
-
-
简约
-
杂志
-
图文
-
-
-
- +
@@ -159,17 +114,7 @@
-
- -
- -
-
- +
@@ -179,6 +124,7 @@
+
@@ -186,52 +132,26 @@
- -
- -
- - -
-
- - - +
- +
- -
-
-
-
-
-
-
- 上一页 - 第 1 页 / 共 0 页 - 下一页 -
-
+ +
+
+
+ + +
+
@@ -251,6 +171,7 @@ postId: {$post.id}, title: '{$post.title|raw}', desc: '{$post.desc|default=""}', + coverText: '{$post->getData("cover_text")|default=""}', contentHtml: $('#post-content-html').html(), poster: '{$post.poster|default=""}', authorName: '{$post.author_name|default=""}', @@ -258,74 +179,46 @@ categoryName: '' }; - // 初始化引擎 - PhoneImageEngine.init(postData, { - template: 'minimal', - size: 'xiaohongshu', - font: 'source-han-sans', - fontSize: 14 - }); + // 恢复之前保存的排版配置 + var savedConfig = {$layoutConfig|json_encode|default="{}"}; + var initConfig = { + size: savedConfig.size || 'xiaohongshu', + fontSize: savedConfig.fontSize || 14, + watermark: savedConfig.watermark || '', + pageAlignments: savedConfig.pageAlignments || {} + }; + PhoneImageEngine.init(postData, initConfig); - // 模板切换 - $('.template-btn').click(function () { - $('.template-btn').removeClass('active'); - $(this).addClass('active'); - PhoneImageEngine.switchTemplate($(this).data('template')); - doRender(); - }); + // 同步尺寸选择 + $('[name="size"]').val(initConfig.size); + form.render('select'); // 尺寸切换 form.on('select(size)', function (data) { - PhoneImageEngine.switchSize(data.value); - doRender(); - }); - - // 字体切换 - form.on('select(font)', function (data) { - PhoneImageEngine.switchFont(data.value); doRender(); }); // 字号调整 $('[name="fontSize"]').on('input', function () { $('#fontSizeValue').text($(this).val() + 'px'); - }); - - // 预览 - $('#btn-preview').click(function () { doRender(); }); + var renderTimer = null; function doRender() { - var fontSize = parseInt($('[name="fontSize"]').val()) || 14; - PhoneImageEngine.init(postData, { - template: $('.template-btn.active').data('template'), - size: $('[name="size"]').val(), - font: $('[name="font"]').val(), - fontSize: fontSize - }); - var pages = PhoneImageEngine.render(); - updatePageInfo(); - layer.msg('排版完成，共 ' + pages.length + ' 页'); + clearTimeout(renderTimer); + renderTimer = setTimeout(function() { + var fontSize = parseInt($('[name="fontSize"]').val()) || 14; + PhoneImageEngine.init(postData, { + size: $('[name="size"]').val(), + fontSize: fontSize, + watermark: $('[name="watermark"]').val() + }); + var pages = PhoneImageEngine.render(); + layer.msg('排版完成，共 ' + pages.length + ' 页'); + }, 300); } - function updatePageInfo() { - var current = PhoneImageEngine.getCurrentPageIndex() + 1; - var total = PhoneImageEngine.getPages().length; - $('#page-info').text('第 ' + current + ' 页 / 共 ' + total + ' 页'); - } - - // 翻页 - $('#prev-page').click(function () { - PhoneImageEngine.prevPage(); - updatePageInfo(); - }); - - $('#next-page').click(function () { - PhoneImageEngine.nextPage(); - updatePageInfo(); - }); - // 生成并保存 $('#btn-generate').click(function () { var btn = $(this); @@ -333,11 +226,10 @@ layer.msg('正在生成图片，请稍候...'); PhoneImageEngine.saveImages(postData.postId, { - template: $('.template-btn.active').data('template'), size: $('[name="size"]').val(), - font: $('[name="font"]').val(), fontSize: parseInt($('[name="fontSize"]').val()) || 14, - watermark: $('[name="watermark"]').val() + watermark: $('[name="watermark"]').val(), + content_html: $('#post-content-html').html() }).then(function (data) { if (data.output_id) { lastOutputId = data.output_id; @@ -360,85 +252,23 @@ window.open(url); }); - // ===== AI 智能排版 ===== - - // AI智能排版推荐 - $('#btn-ai-recommend').click(function () { + // 导出长图 + $('#btn-export-long').click(function () { var btn = $(this); - btn.prop('disabled', true).text('AI 分析中...'); - $.post('{:url("post/aiRecommend")}', { post_id: postData.postId }, function (res) { - btn.prop('disabled', false).html(' AI 智能排版'); - if (res.code === 0) { - PhoneImageEngine.applyAiRecommendation(res.data); - if (res.data.reason) { - $('#ai-reason').html('AI 推荐理由: ' + escapeHtmlSimple(res.data.reason)).show(); - } - doRender(); - layer.msg('AI 排版推荐已应用'); - } else { - layer.msg(res.msg || 'AI 分析失败'); - } - }).fail(function () { - btn.prop('disabled', false).html(' AI 智能排版'); - layer.msg('网络错误'); + btn.prop('disabled', true).text('导出中...'); + PhoneImageEngine.exportLongImage().then(function () { + btn.prop('disabled', false).html(' 导出长图'); + layer.msg('长图已导出'); + }).catch(function (err) { + btn.prop('disabled', false).html(' 导出长图'); + layer.msg('导出失败: ' + err); }); }); - // AI优化内容 - $('#btn-ai-optimize').click(function () { - var btn = $(this); - btn.prop('disabled', true).text('AI 优化中...'); - $.post('{:url("post/aiOptimizeContent")}', { post_id: postData.postId }, function (res) { - btn.prop('disabled', false).html(' AI 优化内容'); - if (res.code === 0) { - var data = res.data; - var titleHtml = '原标题: ' + escapeHtmlSimple(postData.title); - if (data.optimized_title) { - titleHtml += '
优化标题: ' + escapeHtmlSimple(data.optimized_title); - } - $('#ai-optimized-title').html(titleHtml); - if (data.summary_points) { - var points = '要点:
'; - for (var i = 0; i < data.summary_points.length; i++) { - points += (i + 1) + '. ' + escapeHtmlSimple(data.summary_points[i]) + '
'; - } - $('#ai-summary-points').html(points); - } - $('#ai-content-panel').data('aiData', data).show(); - } else { - layer.msg(res.msg || 'AI 优化失败'); - } - }).fail(function () { - btn.prop('disabled', false).html(' AI 优化内容'); - layer.msg('网络错误'); - }); - }); - - // 应用AI优化 - $('#btn-apply-ai').click(function () { - var aiData = $('#ai-content-panel').data('aiData'); - if (aiData) { - PhoneImageEngine.applyAiContent(aiData); - doRender(); - $('#ai-content-panel').hide(); - layer.msg('已应用 AI 优化内容'); - } - }); - - // 保持原文 - $('#btn-keep-original').click(function () { - PhoneImageEngine.restoreOriginalContent(); - doRender(); - $('#ai-content-panel').hide(); - layer.msg('已恢复原文'); - }); - - function escapeHtmlSimple(text) { - if (!text) return ''; - return text.replace(/&/g, '&').replace(//g, '>'); - } + // 初始渲染 + doRender(); }); - \ No newline at end of file +