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

feat(post): 新增手机图片排版与AI智能排版功能

Browse Source 
- 新增手机图片排版功能，支持小红书/抖音尺寸输出
- 新增AI智能排版顾问，支持内容分析与优化推荐
- 新增AI供应商管理，支持多渠道配置与同步
- 新增文章输出管理页面，支持图片预览与批量下载
- 新增字体文件与排版样式配置
This commit is contained in:
augushong
2026-05-01 12:23:17 +08:00
parent b4558b55fb
commit 83a2bd48a2
25 changed files with 4440 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
view/admin/post/index.html
View File

@@ -76,6 +76,7 @@
<a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
<a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">设置</a>
<a class="layui-btn layui-btn-sm" href="{:url('editContent',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
<a class="layui-btn layui-btn-sm layui-btn-normal" href="{:url('post/postOutputList',['id'=>$vo.id])}"><i class="layui-icon layui-icon-picture"></i> 排版</a>
<a class="layui-btn layui-btn-sm" target="_blank" href="{:url('output',['id'=>$vo.id,'type'=>$Request.param.type])}">导出</a>
<div class="layui-btn layui-btn-sm delete">删除</div>
</div>

426
view/admin/post/phone_image.html Normal file
View File

@@ -0,0 +1,426 @@
<!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: 260px;
background: #fff;
border-right: 1px solid #e8e8e8;
padding: 15px;
overflow-y: auto;
}
.preview-area {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
.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;
}
.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;
}
.action-btns .layui-btn {
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;
}
</style>
</head>
<body>
<!-- 隐藏div存放文章HTML内容，供JS读取 -->
<div id="post-content-html" style="display:none;">{$post->content_html|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">
<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">
<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">
<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">
<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>
<!-- 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">
<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
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>
</div>
</div>
</div>
<!-- 右侧预览区 -->
<div class="preview-area">
<div>
<div class="phone-frame">
<div id="phone-image-container"
class="phone-image-container tpl-minimal size-xiaohongshu font-source-han-sans">
</div>
</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>
<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=""}',
contentHtml: $('#post-content-html').html(),
poster: '{$post.poster|default=""}',
authorName: '{$post.author_name|default=""}',
createTime: '{$post.create_time_text|default=""}',
categoryName: ''
};
// 初始化引擎
PhoneImageEngine.init(postData, {
template: 'minimal',
size: 'xiaohongshu',
font: 'source-han-sans',
fontSize: 14
});
// 模板切换
$('.template-btn').click(function () {
$('.template-btn').removeClass('active');
$(this).addClass('active');
PhoneImageEngine.switchTemplate($(this).data('template'));
doRender();
});
// 尺寸切换
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();
});
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();
layer.msg('排版完成，共 ' + pages.length + ' 页');
}
// 生成并保存
$('#btn-generate').click(function () {
var btn = $(this);
btn.prop('disabled', true).text('生成中...');
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()
}).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);
});
// ===== AI 智能排版 =====
// AI智能排版推荐
$('#btn-ai-recommend').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('<i class="layui-icon layui-icon-magic"></i> 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('<i class="layui-icon layui-icon-magic"></i> AI 智能排版');
layer.msg('网络错误');
});
});
// 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('<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>
</body>
</html>

175
view/admin/post/post_output/index.html Normal file
View File

@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{$post.title} - 输出管理</title>
{include file="common/_require"}
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
{include file="common/_header"}
{include file="common/left_post"}
<div class="layui-body">
<div style="padding:15px">
<div class="main-header">
<span class="layui-breadcrumb">
<a>首页</a>
<a href="{:url('post/index')}">内容管理</a>
<a><cite>输出管理 - {$post.title}</cite></a>
</span>
</div>
<div class="main-container">
<div>
<a href="{:url('post/phoneImage',['id'=>$post.id])}" class="layui-btn">
<i class="layui-icon layui-icon-add-1"></i> 新建排版
</a>
<a href="{:url('post/index')}" class="layui-btn layui-btn-primary">
<i class="layui-icon layui-icon-return"></i> 返回列表
</a>
</div>
</div>
<div>
<table class="layui-table" lay-skin="line">
<thead>
<tr>
<th>ID</th>
<th>类型</th>
<th>尺寸</th>
<th>页数</th>
<th>状态</th>
<th>创建时间</th>
<th>图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name='list' id='vo'}
<tr class="item" data-id="{$vo.id}">
<td>{$vo.id}</td>
<td>{$vo.output_type_text}</td>
<td>
{if $vo.config && $vo.config.size}
{if $vo.config.size == 'xiaohongshu'}小红书{/if}
{if $vo.config.size == 'douyin'}抖音{/if}
{else/}
-
{/if}
</td>
<td>{$vo.page_count}</td>
<td>{$vo.status_text}</td>
<td>{$vo.create_time}</td>
<td>
<button type="button" class="layui-btn layui-btn-xs btn-view-images"
data-output-id="{$vo.id}">
<i class="layui-icon layui-icon-picture"></i> 查看图片
</button>
</td>
<td>
<div class="layui-btn-container">
<a class="layui-btn layui-btn-xs layui-btn-warm"
href="{:url('post/downloadPostOutputZip',['id'=>$vo.id])}">
<i class="layui-icon layui-icon-download-circle"></i> 下载ZIP
</a>
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn-delete-output"
data-output-id="{$vo.id}">
<i class="layui-icon layui-icon-delete"></i> 删除
</button>
</div>
</td>
</tr>
{/volist}
{if condition="count($list) == 0"}
<tr>
<td colspan="8">暂无输出记录，点击"新建排版"创建</td>
</tr>
{/if}
</tbody>
</table>
<div>
{$list|raw}
</div>
</div>
<!-- 图片预览弹窗容器 -->
<div id="image-preview-panel" style="display:none; margin-top:15px; padding:15px; background:#fff; border:1px solid #e8e8e8; border-radius:4px;">
<div style="margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
<strong>图片预览</strong>
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-close-preview">
<i class="layui-icon layui-icon-close"></i> 关闭
</button>
</div>
<div id="image-preview-list" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
</div>
</div>
</div>
{include file="common/_footer"}
</div>
<script>
// 查看图片
$('.btn-view-images').click(function () {
var outputId = $(this).data('output-id');
var $panel = $('#image-preview-panel');
var $list = $('#image-preview-list');
$list.html('<div style="padding:20px;">加载中...</div>');
$panel.show();
$.get('{:url("post/getOutputFiles")}', { output_id: outputId }, function (res) {
if (res.code !== 0) {
$list.html('<div style="color:red;">' + (res.msg || '加载失败') + '</div>');
return;
}
if (!res.data || res.data.length === 0) {
$list.html('<div style="color:#999;">暂无图片</div>');
return;
}
var html = '';
for (var i = 0; i < res.data.length; i++) {
var f = res.data[i];
html += '<div style="width:120px; text-align:center;">';
html += '<img src="' + f.file_url + '" style="max-width:120px; max-height:200px; border:1px solid #eee; border-radius:4px;" alt="第' + f.page + '页">';
html += '<div style="font-size:12px; color:#999; margin-top:4px;">第' + f.page + '页</div>';
html += '</div>';
}
$list.html(html);
}).fail(function () {
$list.html('<div style="color:red;">网络错误</div>');
});
});
// 关闭预览
$('#btn-close-preview').click(function () {
$('#image-preview-panel').hide();
});
// 删除输出
$('.btn-delete-output').click(function () {
var btn = $(this);
var outputId = btn.data('output-id');
layer.confirm('确定要删除该输出记录吗？图片文件将一并删除。', function () {
$.get('{:url("post/deletePostOutput")}', { id: outputId }, function (res) {
if (res.code === 0) {
layer.msg('删除成功');
btn.parents('.item').remove();
$('#image-preview-panel').hide();
} else {
layer.msg(res.msg || '删除失败');
}
}).fail(function () {
layer.msg('网络错误');
});
});
});
</script>
</body>
</html>