ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-09 00:22:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(phone-image): three-column layout with content flow and paginated preview

Browse Source 
T6: Rewrite phone_image.html to three-column layout (toolbar 220px | content flow 540px | paginated preview flex:1)

- Remove: template buttons, font selector, AI section, preview button, page navigation

- Add: content-flow area, paginated-preview area, export long image button

- Update: postData with coverText, layoutContentHtml, savedConfig restore

- Debounced doRender (300ms), auto-render on page load
This commit is contained in:
augushong
2026-05-02 09:30:20 +08:00
parent b53ba68f68
commit 57187a9d1d
1 changed files with 69 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
view/admin/post/phone_image.html
View File

@@ -36,20 +36,29 @@
} }
.toolbar { .toolbar {
width: 260px; width: 220px;
background: #fff; background: #fff;
border-right: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8;
padding: 15px; padding: 15px;
overflow-y: auto; overflow-y: auto;
} }
.preview-area { .content-flow-area {
flex: 1; width: 540px;
padding: 20px;
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #e8e8e8;
background: #fafafa;
}
.paginated-preview-area {
flex: 1;
overflow-y: auto;
padding: 20px;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: flex-start; align-items: center;
background: #f5f5f5;
gap: 20px;
} }
.toolbar .layui-form-label { .toolbar .layui-form-label {
@@ -66,32 +75,6 @@
margin-bottom: 12px; 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 { .action-btns {
margin-top: 15px; margin-top: 15px;
} }
@@ -100,30 +83,12 @@
width: 100%; width: 100%;
margin-bottom: 8px; 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;
}
</style> </style>
</head> </head>
<body> <body>
<!-- 隐藏div存放文章HTML内容，供JS读取 --> <!-- 隐藏div存放文章HTML内容，供JS读取 -->
<div id="post-content-html" style="display:none;">{$post->content_html|raw}</div> <div id="post-content-html" style="display:none;">{$layoutContentHtml|raw}</div>
<div class="page-header"> <div class="page-header">
<div> <div>
@@ -138,17 +103,7 @@
<!-- 左侧工具栏 --> <!-- 左侧工具栏 -->
<div class="toolbar"> <div class="toolbar">
<div class="layui-form" lay-filter="phoneImageForm"> <div class="layui-form" lay-filter="phoneImageForm">
<div class="layui-form-item"> <!-- 尺寸选择 -->
<label class="layui-form-label">模板</label>
<div class="layui-input-block">
<div class="template-btn-group">
<div class="template-btn active" data-template="minimal">简约</div>
<div class="template-btn" data-template="magazine">杂志</div>
<div class="template-btn" data-template="mixed">图文</div>
</div>
</div>
</div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">尺寸</label> <label class="layui-form-label">尺寸</label>
<div class="layui-input-block"> <div class="layui-input-block">
@@ -159,17 +114,7 @@
</div> </div>
</div> </div>
<div class="layui-form-item"> <!-- 字号 -->
<label class="layui-form-label">字体</label>
<div class="layui-input-block">
<select name="font" lay-filter="font">
<option value="source-han-sans">思源黑体</option>
<option value="alibaba-puhuiti">阿里巴巴普惠体</option>
<option value="lxgw-wenkai">霞鹜文楷</option>
</select>
</div>
</div>
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">字号</label> <label class="layui-form-label">字号</label>
<div class="layui-input-block"> <div class="layui-input-block">
@@ -179,6 +124,7 @@
</div> </div>
</div> </div>
<!-- 水印 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">水印</label> <label class="layui-form-label">水印</label>
<div class="layui-input-block"> <div class="layui-input-block">
@@ -186,52 +132,26 @@
</div> </div>
</div> </div>
<!-- AI 智能排版 --> <!-- 操作按钮 -->
<div style="margin-top: 15px; margin-bottom: 10px; padding-top: 10px; border-top: 1px solid #e8e8e8;">
<label class="layui-form-label" style="font-size: 13px; color: #1890ff;">AI 助手</label>
<div class="layui-input-block" style="margin-top: 5px;">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btn-ai-recommend" style="width: 100%; margin-bottom: 5px;">
<i class="layui-icon layui-icon-magic"></i> AI 智能排版
</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="btn-ai-optimize" style="width: 100%;">
<i class="layui-icon layui-icon-edit"></i> AI 优化内容
</button>
</div>
</div>
<div id="ai-reason" style="display:none; margin: 10px 0; padding: 8px 12px; background: #f0f7ff; border-radius: 4px; font-size: 12px; color: #666; line-height: 1.6;"></div>
<div id="ai-content-panel" style="display:none; margin: 10px 0; padding: 10px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 4px; font-size: 12px;">
<div style="font-weight: bold; margin-bottom: 5px;">AI 内容优化建议</div>
<div id="ai-optimized-title" style="margin-bottom: 5px;"></div>
<div id="ai-summary-points" style="margin-bottom: 8px;"></div>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="btn-apply-ai">应用优化</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-keep-original">保持原文</button>
</div>
<div class="action-btns"> <div class="action-btns">
<button type="button" class="layui-btn" id="btn-preview"><i
class="layui-icon layui-icon-refresh"></i> 预览排版</button>
<button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i <button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
class="layui-icon layui-icon-picture"></i> 生成并保存</button> class="layui-icon layui-icon-picture"></i> 生成并保存</button>
<button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i <button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i
class="layui-icon layui-icon-download-circle"></i> 打包下载</button> class="layui-icon layui-icon-download-circle"></i> 打包下载</button>
<button type="button" class="layui-btn layui-btn-primary" id="btn-export-long"><i
class="layui-icon layui-icon-picture"></i> 导出长图</button>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧预览区 --> <!-- 中间：内容流 -->
<div class="preview-area"> <div class="content-flow-area">
<div> <div id="content-flow" class="content-flow"></div>
<div class="phone-frame"> </div>
<div id="phone-image-container"
class="phone-image-container tpl-minimal size-xiaohongshu font-source-han-sans"> <!-- 右侧：分页排版预览 -->
</div> <div class="paginated-preview-area">
</div> <div id="paginated-preview" class="phone-image-container size-xiaohongshu"></div>
<div class="preview-nav">
<span id="prev-page"><i class="layui-icon layui-icon-left"></i> 上一页</span>
<span id="page-info">第 1 页 / 共 0 页</span>
<span id="next-page">下一页 <i class="layui-icon layui-icon-right"></i></span>
</div>
</div>
</div> </div>
</div> </div>
@@ -251,6 +171,7 @@
postId: {$post.id}, postId: {$post.id},
title: '{$post.title|raw}', title: '{$post.title|raw}',
desc: '{$post.desc|default=""}', desc: '{$post.desc|default=""}',
coverText: '{$post->getData("cover_text")|default=""}',
contentHtml: $('#post-content-html').html(), contentHtml: $('#post-content-html').html(),
poster: '{$post.poster|default=""}', poster: '{$post.poster|default=""}',
authorName: '{$post.author_name|default=""}', authorName: '{$post.author_name|default=""}',
@@ -258,74 +179,46 @@
categoryName: '' categoryName: ''
}; };
// 初始化引擎 // 恢复之前保存的排版配置
PhoneImageEngine.init(postData, { var savedConfig = {$layoutConfig|json_encode|default="{}"};
template: 'minimal', var initConfig = {
size: 'xiaohongshu', size: savedConfig.size || 'xiaohongshu',
font: 'source-han-sans', fontSize: savedConfig.fontSize || 14,
fontSize: 14 watermark: savedConfig.watermark || '',
}); pageAlignments: savedConfig.pageAlignments || {}
};
PhoneImageEngine.init(postData, initConfig);
// 模板切换 // 同步尺寸选择
$('.template-btn').click(function () { $('[name="size"]').val(initConfig.size);
$('.template-btn').removeClass('active'); form.render('select');
$(this).addClass('active');
PhoneImageEngine.switchTemplate($(this).data('template'));
doRender();
});
// 尺寸切换 // 尺寸切换
form.on('select(size)', function (data) { form.on('select(size)', function (data) {
PhoneImageEngine.switchSize(data.value);
doRender();
});
// 字体切换
form.on('select(font)', function (data) {
PhoneImageEngine.switchFont(data.value);
doRender(); doRender();
}); });
// 字号调整 // 字号调整
$('[name="fontSize"]').on('input', function () { $('[name="fontSize"]').on('input', function () {
$('#fontSizeValue').text($(this).val() + 'px'); $('#fontSizeValue').text($(this).val() + 'px');
});
// 预览
$('#btn-preview').click(function () {
doRender(); doRender();
}); });
var renderTimer = null;
function doRender() { function doRender() {
var fontSize = parseInt($('[name="fontSize"]').val()) || 14; clearTimeout(renderTimer);
PhoneImageEngine.init(postData, { renderTimer = setTimeout(function() {
template: $('.template-btn.active').data('template'), var fontSize = parseInt($('[name="fontSize"]').val()) || 14;
size: $('[name="size"]').val(), PhoneImageEngine.init(postData, {
font: $('[name="font"]').val(), size: $('[name="size"]').val(),
fontSize: fontSize fontSize: fontSize,
}); watermark: $('[name="watermark"]').val()
var pages = PhoneImageEngine.render(); });
updatePageInfo(); var pages = PhoneImageEngine.render();
layer.msg('排版完成，共 ' + pages.length + ' 页'); 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 () { $('#btn-generate').click(function () {
var btn = $(this); var btn = $(this);
@@ -333,11 +226,10 @@
layer.msg('正在生成图片，请稍候...'); layer.msg('正在生成图片，请稍候...');
PhoneImageEngine.saveImages(postData.postId, { PhoneImageEngine.saveImages(postData.postId, {
template: $('.template-btn.active').data('template'),
size: $('[name="size"]').val(), size: $('[name="size"]').val(),
font: $('[name="font"]').val(),
fontSize: parseInt($('[name="fontSize"]').val()) || 14, fontSize: parseInt($('[name="fontSize"]').val()) || 14,
watermark: $('[name="watermark"]').val() watermark: $('[name="watermark"]').val(),
content_html: $('#post-content-html').html()
}).then(function (data) { }).then(function (data) {
if (data.output_id) { if (data.output_id) {
lastOutputId = data.output_id; lastOutputId = data.output_id;
@@ -360,85 +252,23 @@
window.open(url); window.open(url);
}); });
// ===== AI 智能排版 ===== // 导出长图
$('#btn-export-long').click(function () {
// AI智能排版推荐
$('#btn-ai-recommend').click(function () {
var btn = $(this); var btn = $(this);
btn.prop('disabled', true).text('AI 分析中...'); btn.prop('disabled', true).text('导出中...');
$.post('{:url("post/aiRecommend")}', { post_id: postData.postId }, function (res) { PhoneImageEngine.exportLongImage().then(function () {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-magic"></i> AI 智能排版'); btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
if (res.code === 0) { layer.msg('长图已导出');
PhoneImageEngine.applyAiRecommendation(res.data); }).catch(function (err) {
if (res.data.reason) { btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
$('#ai-reason').html('AI 推荐理由: ' + escapeHtmlSimple(res.data.reason)).show(); layer.msg('导出失败: ' + err);
}
doRender();
layer.msg('AI 排版推荐已应用');
} else {
layer.msg(res.msg || 'AI 分析失败');
}
}).fail(function () {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-magic"></i> AI 智能排版');
layer.msg('网络错误');
}); });
}); });
// AI优化内容 // 初始渲染
$('#btn-ai-optimize').click(function () { doRender();
var btn = $(this);
btn.prop('disabled', true).text('AI 优化中...');
$.post('{:url("post/aiOptimizeContent")}', { post_id: postData.postId }, function (res) {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-edit"></i> AI 优化内容');
if (res.code === 0) {
var data = res.data;
var titleHtml = '<b>原标题:</b> ' + escapeHtmlSimple(postData.title);
if (data.optimized_title) {
titleHtml += '<br><b>优化标题:</b> ' + escapeHtmlSimple(data.optimized_title);
}
$('#ai-optimized-title').html(titleHtml);
if (data.summary_points) {
var points = '<b>要点:</b><br>';
for (var i = 0; i < data.summary_points.length; i++) {
points += (i + 1) + '. ' + escapeHtmlSimple(data.summary_points[i]) + '<br>';
}
$('#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('<i class="layui-icon layui-icon-edit"></i> 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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
}); });
</script> </script>
</body> </body>
</html> </html>