mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 18:02:47 +08:00
57187a9d1d
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
275 lines
9.9 KiB
HTML
275 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{$post.title} - 手机图片排版</title>
|
||
<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">
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.page-header {
|
||
background: #fff;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.page-header h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.main-layout {
|
||
display: flex;
|
||
height: calc(100vh - 60px);
|
||
}
|
||
|
||
.toolbar {
|
||
width: 220px;
|
||
background: #fff;
|
||
border-right: 1px solid #e8e8e8;
|
||
padding: 15px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.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;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #f5f5f5;
|
||
gap: 20px;
|
||
}
|
||
|
||
.toolbar .layui-form-label {
|
||
width: 60px;
|
||
padding: 6px 8px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.toolbar .layui-input-block {
|
||
margin-left: 70px;
|
||
}
|
||
|
||
.toolbar .layui-form-item {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.action-btns {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.action-btns .layui-btn {
|
||
width: 100%;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 隐藏div存放文章HTML内容，供JS读取 -->
|
||
<div id="post-content-html" style="display:none;">{$layoutContentHtml|raw}</div>
|
||
|
||
<div class="page-header">
|
||
<div>
|
||
<a href="{:url('post/index')}" class="layui-btn layui-btn-sm layui-btn-primary"><i
|
||
class="layui-icon layui-icon-return"></i> 返回列表</a>
|
||
<a href="{:url('post/postOutputList',['id'=>$post.id])}" class="layui-btn layui-btn-sm">输出管理</a>
|
||
</div>
|
||
<h3>{$post.title}</h3>
|
||
</div>
|
||
|
||
<div class="main-layout">
|
||
<!-- 左侧工具栏 -->
|
||
<div class="toolbar">
|
||
<div class="layui-form" lay-filter="phoneImageForm">
|
||
<!-- 尺寸选择 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">尺寸</label>
|
||
<div class="layui-input-block">
|
||
<select name="size" lay-filter="size">
|
||
<option value="xiaohongshu">小红书 (1080x1440)</option>
|
||
<option value="douyin">抖音 (1080x1920)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 字号 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">字号</label>
|
||
<div class="layui-input-block">
|
||
<input type="range" name="fontSize" min="10" max="24" value="14" lay-filter="fontSize"
|
||
style="width:100%;">
|
||
<span id="fontSizeValue">14px</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 水印 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">水印</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="watermark" placeholder="可选水印文字" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-btns">
|
||
<button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
|
||
class="layui-icon layui-icon-picture"></i> 生成并保存</button>
|
||
<button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i
|
||
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 class="content-flow-area">
|
||
<div id="content-flow" class="content-flow"></div>
|
||
</div>
|
||
|
||
<!-- 右侧：分页排版预览 -->
|
||
<div class="paginated-preview-area">
|
||
<div id="paginated-preview" class="phone-image-container size-xiaohongshu"></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/js/phone-image.js"></script>
|
||
<script>
|
||
layui.use(['form', 'layer'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
|
||
var lastOutputId = null;
|
||
var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
|
||
|
||
var postData = {
|
||
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=""}',
|
||
createTime: '{$post.create_time_text|default=""}',
|
||
categoryName: ''
|
||
};
|
||
|
||
// 恢复之前保存的排版配置
|
||
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);
|
||
|
||
// 同步尺寸选择
|
||
$('[name="size"]').val(initConfig.size);
|
||
form.render('select');
|
||
|
||
// 尺寸切换
|
||
form.on('select(size)', function (data) {
|
||
doRender();
|
||
});
|
||
|
||
// 字号调整
|
||
$('[name="fontSize"]').on('input', function () {
|
||
$('#fontSizeValue').text($(this).val() + 'px');
|
||
doRender();
|
||
});
|
||
|
||
var renderTimer = null;
|
||
function doRender() {
|
||
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);
|
||
}
|
||
|
||
// 生成并保存
|
||
$('#btn-generate').click(function () {
|
||
var btn = $(this);
|
||
btn.prop('disabled', true).text('生成中...');
|
||
layer.msg('正在生成图片，请稍候...');
|
||
|
||
PhoneImageEngine.saveImages(postData.postId, {
|
||
size: $('[name="size"]').val(),
|
||
fontSize: parseInt($('[name="fontSize"]').val()) || 14,
|
||
watermark: $('[name="watermark"]').val(),
|
||
content_html: $('#post-content-html').html()
|
||
}).then(function (data) {
|
||
if (data.output_id) {
|
||
lastOutputId = data.output_id;
|
||
}
|
||
layer.msg('保存成功！');
|
||
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 生成并保存');
|
||
}).catch(function (err) {
|
||
layer.msg('保存失败: ' + err);
|
||
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 生成并保存');
|
||
});
|
||
});
|
||
|
||
// 打包下载
|
||
$('#btn-download').click(function () {
|
||
if (!lastOutputId) {
|
||
layer.msg('请先生成并保存图片');
|
||
return;
|
||
}
|
||
var url = downloadBaseUrl.replace('/0/', '/' + lastOutputId + '/');
|
||
window.open(url);
|
||
});
|
||
|
||
// 导出长图
|
||
$('#btn-export-long').click(function () {
|
||
var btn = $(this);
|
||
btn.prop('disabled', true).text('导出中...');
|
||
PhoneImageEngine.exportLongImage().then(function () {
|
||
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
|
||
layer.msg('长图已导出');
|
||
}).catch(function (err) {
|
||
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
|
||
layer.msg('导出失败: ' + err);
|
||
});
|
||
});
|
||
|
||
// 初始渲染
|
||
doRender();
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|