mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 18:12:49 +08:00
314 lines
12 KiB
HTML
314 lines
12 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">
|
||
<link rel="stylesheet" href="/static/lib/prismjs/prism.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-x: auto;
|
||
overflow-y: hidden;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
#paginated-preview {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
height: 100%;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.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-save"><i
|
||
class="layui-icon layui-icon-ok"></i> 保存</button>
|
||
<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="preview-thumbnails"></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/lib/prismjs/prism.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 saveConfigUrl = '{:url("post/savePostOutputConfig")}';
|
||
|
||
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 = <?php echo $layoutConfig ? json_encode($layoutConfig) : '{}'; ?>;
|
||
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 loadIdx = layer.load();
|
||
PhoneImageEngine.render().then(function(pages) {
|
||
layer.close(loadIdx);
|
||
layer.msg('排版完成，共 ' + pages.length + ' 页');
|
||
}).catch(function(err) {
|
||
layer.close(loadIdx);
|
||
layer.msg('渲染失败: ' + err);
|
||
});
|
||
}, 300);
|
||
}
|
||
|
||
// 保存配置（不生成图片）
|
||
$('#btn-save').click(function () {
|
||
var btn = $(this);
|
||
btn.prop('disabled', true);
|
||
layer.msg('保存中...');
|
||
|
||
PhoneImageEngine.saveConfig(postData.postId, {
|
||
size: $('[name="size"]').val(),
|
||
fontSize: parseInt($('[name="fontSize"]').val()) || 14,
|
||
watermark: $('[name="watermark"]').val(),
|
||
content_html: $('#post-content-html').html()
|
||
}, saveConfigUrl).then(function (data) {
|
||
if (data.output_id) lastOutputId = data.output_id;
|
||
layer.msg('保存成功');
|
||
}).catch(function (err) {
|
||
layer.msg('保存失败: ' + err);
|
||
}).always(function () {
|
||
setTimeout(function () { btn.prop('disabled', false); }, 2000);
|
||
});
|
||
});
|
||
|
||
// 生成并保存
|
||
$('#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>
|
||
<div id="render-staging" style="position:fixed;left:-9999px;top:0;visibility:hidden;"></div>
|
||
</body>
|
||
|
||
</html>
|