ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-01 16:22: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

5
view/admin/common/left_system.html
View File

@@ -67,5 +67,10 @@
<a class="" href="{:url('admin/System/clearCache')}">清空缓存</a>
</li>
</ul>
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed left-nav-item" data-name="ai">
<a class="" href="{:url('admin/System/ai')}">AI 设置</a>
</li>
</ul>
</div>
</div>

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>

264
view/admin/post_output/index.html Normal file
View File

@@ -0,0 +1,264 @@
<!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">
<style>
.output-thumb-row {
display: none;
}
.output-thumb-row.show {
display: table-row;
}
.output-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
}
.output-thumb-item {
position: relative;
width: 80px;
height: 107px;
border: 1px solid #e6e6e6;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.2s;
}
.output-thumb-item:hover {
border-color: #1e9fff;
}
.output-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.output-thumb-item .thumb-page-num {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-size: 11px;
line-height: 18px;
}
.output-thumbs-loading {
padding: 20px;
text-align: center;
color: #999;
}
.btn-view-images {
cursor: pointer;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-header">
<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/phoneImage',['id'=>$post.id])}" class="layui-btn layui-btn-sm"><i
class="layui-icon layui-icon-add-1"></i> 新建排版</a>
<span style="margin-left: 15px;">文章: {$post.title}</span>
</div>
<div class="layui-card-body">
<table class="layui-table" lay-skin="line">
<colgroup>
<col width="100">
<col width="200">
<col width="80">
<col width="80">
<col width="160">
<col width="100">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>输出类型</th>
<th>状态</th>
<th>图片数</th>
<th>创建时间</th>
<th>操作人</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{volist name="list" id="vo"}
<tr>
<td>{$vo.id}</td>
<td>{$vo.output_type_text}</td>
<td>{$vo.status_text}</td>
<td>{$vo.page_count}</td>
<td>{$vo.create_time|date='Y-m-d H:i'}</td>
<td>Admin</td>
<td>
<button class="layui-btn layui-btn-xs btn-view-images" data-id="{$vo.id}"
data-page-count="{$vo.page_count}">查看图片</button>
<a href="{:url('post/downloadPostOutputZip',['id'=>$vo.id])}"
class="layui-btn layui-btn-xs layui-btn-normal">下载ZIP</a>
<button class="layui-btn layui-btn-xs layui-btn-warm btn-regenerate"
data-id="{$vo.id}">重新生成</button>
<button class="layui-btn layui-btn-xs layui-btn-danger btn-delete"
data-id="{$vo.id}">删除</button>
</td>
</tr>
<tr class="output-thumb-row" id="thumbs-row-{$vo.id}">
<td colspan="7">
<div class="output-thumbs-loading">
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
加载中...
</div>
<div class="output-thumbs" id="thumbs-{$vo.id}" style="display:none;"></div>
</td>
</tr>
{/volist}
</tbody>
</table>
<div class="layui-page">{$list|raw}</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>
layui.use(['layer'], function () {
var layer = layui.layer;
// 查看图片 - 展开/收起缩略图
$(document).on('click', '.btn-view-images', function () {
var $btn = $(this);
var outputId = $btn.data('id');
var pageCount = parseInt($btn.data('page-count'), 10) || 0;
var $thumbRow = $('#thumbs-row-' + outputId);
var $thumbContainer = $('#thumbs-' + outputId);
// 切换显示
if ($thumbRow.hasClass('show')) {
$thumbRow.removeClass('show');
$btn.text('查看图片');
return;
}
// 如果已加载过图片，直接显示
if ($thumbContainer.children('.output-thumb-item').length > 0) {
$thumbRow.addClass('show');
$btn.text('收起图片');
return;
}
// 无图片数据
if (pageCount === 0) {
layer.msg('该输出暂无图片');
return;
}
// 加载图片列表
$thumbRow.addClass('show');
$btn.text('收起图片');
$thumbContainer.siblings('.output-thumbs-loading').show();
$thumbContainer.hide();
$.getJSON('/index.php/admin/post/getOutputFiles', { output_id: outputId }, function (res) {
$thumbContainer.siblings('.output-thumbs-loading').hide();
if (res.code !== 0 || !res.data || res.data.length === 0) {
$thumbContainer.html('<div style="color:#999;padding:10px;">暂无图片文件</div>').show();
return;
}
$thumbContainer.empty();
for (var i = 0; i < res.data.length; i++) {
var file = res.data[i];
var $item = $('<div class="output-thumb-item" data-full="' + file.file_url + '">' +
'<img src="' + file.file_url + '" alt="第' + file.page + '页">' +
'<div class="thumb-page-num">第' + file.page + '页</div>' +
'</div>');
$thumbContainer.append($item);
}
$thumbContainer.show();
}).fail(function () {
$thumbContainer.siblings('.output-thumbs-loading').hide();
$thumbContainer.html('<div style="color:#FF5722;padding:10px;">加载失败，请重试</div>').show();
});
});
// 点击缩略图查看大图
$(document).on('click', '.output-thumb-item', function () {
var imgUrl = $(this).data('full');
if (!imgUrl) return;
var pageText = $(this).find('.thumb-page-num').text() || '';
layer.open({
type: 1,
title: pageText,
area: ['auto', '90%'],
maxWidth: 600,
shadeClose: true,
content: '<div style="text-align:center;padding:10px;background:#f2f2f2;">' +
'<img src="' + imgUrl + '" style="max-width:100%;height:auto;" alt="' + pageText + '">' +
'</div>'
});
});
// 删除
$(document).on('click', '.btn-delete', function () {
var id = $(this).data('id');
var $btn = $(this);
layer.confirm('确定删除该输出记录？图片文件将一并删除。', function (index) {
$btn.prop('disabled', true).addClass('layui-btn-disabled');
$.post('{:url("post/deletePostOutput")}', { id: id }, function (res) {
if (res.code === 0) {
layer.msg('删除成功', { icon: 1 });
setTimeout(function () { location.reload(); }, 1000);
} else {
layer.msg(res.msg || '删除失败', { icon: 2 });
$btn.prop('disabled', false).removeClass('layui-btn-disabled');
}
}).fail(function () {
layer.msg('网络错误', { icon: 2 });
$btn.prop('disabled', false).removeClass('layui-btn-disabled');
});
layer.close(index);
});
});
// 重新生成
$(document).on('click', '.btn-regenerate', function () {
var id = $(this).data('id');
var $btn = $(this);
layer.confirm('重新生成将删除当前输出记录，确定继续？', function (index) {
$btn.prop('disabled', true).addClass('layui-btn-disabled');
$.post('{:url("post/regeneratePostOutput")}', { id: id }, function (res) {
if (res.code === 0) {
layer.msg('正在跳转...', { icon: 1 });
setTimeout(function () {
location.href = '{:url("post/phoneImage",["id"=>$post.id])}';
}, 500);
} else {
layer.msg(res.msg || '操作失败', { icon: 2 });
$btn.prop('disabled', false).removeClass('layui-btn-disabled');
}
}).fail(function () {
layer.msg('网络错误', { icon: 2 });
$btn.prop('disabled', false).removeClass('layui-btn-disabled');
});
layer.close(index);
});
});
});
</script>
</body>
</html>

648
view/admin/system/ai.html Normal file
View File

@@ -0,0 +1,648 @@
<!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>AI 设置</title>
{include file="common/_require"}
<script>
var currentHeaderNavItem = 'System';
var currentLeftNavItem = 'ai';
</script>
<style>
.layui-form-pane .layui-form-label {
width: 120px;
}
.layui-form-pane .layui-input-block {
margin-left: 120px;
}
.ai-card {
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 4px;
margin-bottom: 15px;
}
.ai-card-header {
padding: 10px 15px;
border-bottom: 1px solid #e6e6e6;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8f8f8;
}
.ai-card-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.ai-card-body {
padding: 15px;
}
.ai-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
color: #fff;
}
.ai-badge-success { background: #5FB878; }
.ai-badge-danger { background: #FF5722; }
.ai-badge-warn { background: #FFB800; }
.ai-provider-list {
max-height: 400px;
overflow-y: auto;
}
.ai-provider-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.ai-provider-item:last-child {
border-bottom: none;
}
.ai-provider-info {
flex: 1;
}
.ai-provider-name {
font-weight: 600;
font-size: 14px;
}
.ai-provider-id {
color: #999;
font-size: 12px;
margin-left: 8px;
}
.ai-provider-actions {
display: flex;
gap: 5px;
}
.ai-sync-status {
padding: 10px 0;
color: #666;
font-size: 13px;
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
{include file="common/_header"}
{include file="common/left_system"}
<div class="layui-body">
<div style="padding:15px">
<div class="main-header">
<span class="layui-breadcrumb">
<a>首页</a>
<a><cite>AI 设置</cite></a>
</span>
</div>
<div class="main-container">
<div class="layui-row layui-col-space15">
<!-- 左侧: 渠道管理 -->
<div class="layui-col-md8">
<!-- 已配置的渠道 -->
<div class="ai-card">
<div class="ai-card-header">
<h3>已配置的渠道</h3>
<button class="layui-btn layui-btn-sm" id="btn-add-channel">
<i class="layui-icon layui-icon-add-1"></i> 添加渠道
</button>
</div>
<div class="ai-card-body">
<div class="ai-provider-list" id="channel-list">
<div style="text-align:center;color:#999;padding:20px;">加载中...</div>
</div>
</div>
</div>
<!-- 默认设置 -->
<div class="ai-card">
<div class="ai-card-header">
<h3>默认设置</h3>
</div>
<div class="ai-card-body">
<form class="layui-form layui-form-pane" action="{:url('admin/System/update')}" method="post" lay-filter="default-settings">
<div class="layui-form-item">
<div class="layui-form-label">默认供应商</div>
<div class="layui-input-block">
<select name="ai_default_provider" id="sel-default-provider" lay-filter="default-provider">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">默认模型</div>
<div class="layui-input-block">
<input type="text" name="ai_default_model" id="inp-default-model"
value="{:get_system_config('ai_default_model', '')}"
placeholder="如 gpt-3.5-turbo, glm-4-flash" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="save-defaults">保存默认设置</button>
</div>
</form>
</div>
</div>
</div>
<!-- 右侧: 同步与缓存 -->
<div class="layui-col-md4">
<!-- 模型目录同步 -->
<div class="ai-card">
<div class="ai-card-header">
<h3>模型目录同步</h3>
</div>
<div class="ai-card-body">
<div class="ai-sync-status" id="sync-status">
加载中...
</div>
<button class="layui-btn layui-btn-fluid" id="btn-sync">
<i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步
</button>
</div>
</div>
<!-- 从模型目录添加渠道 -->
<div class="ai-card">
<div class="ai-card-header">
<h3>从模型目录添加</h3>
</div>
<div class="ai-card-body">
<form class="layui-form" lay-filter="catalog-add">
<div class="layui-form-item">
<select name="catalog_provider" id="sel-catalog-provider" lay-filter="catalog-provider" lay-search>
<option value="">搜索并选择供应商...</option>
</select>
</div>
<div id="catalog-provider-info" style="display:none;margin-bottom:10px;">
<p style="font-size:12px;color:#999;" id="catalog-provider-desc"></p>
</div>
<div class="layui-form-item" id="catalog-models-wrap" style="display:none;">
<select name="catalog_model" id="sel-catalog-model" lay-filter="catalog-model">
<option value="">选择默认模型(可选)</option>
</select>
</div>
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="catalog-add-submit">快速添加此渠道</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{include file="common/_footer"}
</div>
<!-- 添加/编辑渠道弹窗模板 -->
<script type="text/html" id="tpl-channel-form">
<form class="layui-form layui-form-pane" lay-filter="channel-form" style="padding:20px;">
<input type="hidden" name="edit_mode" value="">
<div class="layui-form-item">
<div class="layui-form-label">供应商标识</div>
<div class="layui-input-block">
<input type="text" name="provider_id" placeholder="英文标识,如 zhipu, deepseek" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">API Key</div>
<div class="layui-input-block">
<input type="password" name="key" placeholder="输入API密钥" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">API 地址</div>
<div class="layui-input-block">
<input type="text" name="base_url" placeholder="如 https://api.openai.com/v1" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-form-label">设为默认</div>
<div class="layui-input-block">
<input type="checkbox" name="is_default" lay-skin="switch" lay-text="是|否">
</div>
</div>
<div class="layui-form-item" style="text-align:center;">
<button class="layui-btn" lay-submit lay-filter="channel-form-submit">保存</button>
<button type="button" class="layui-btn layui-btn-primary" id="btn-test-channel">测试连接</button>
</div>
</form>
</script>
<script>
layui.use(['layer', 'form', 'element'], function () {
var layer = layui.layer;
var form = layui.form;
var $ = layui.$;
var cacheProviders = {};
// 加载渠道列表
function loadChannels() {
$.ajax({
url: '{:url("admin/System/getAiCacheStatus")}',
dataType: 'json',
success: function (res) {
if (res.code === 0) {
var status = res.data;
$('#sync-status').html(
'缓存状态: ' + (status.exists ? '<span class="ai-badge ai-badge-success">存在</span>' : '<span class="ai-badge ai-badge-danger">无缓存</span>') +
'<br>上次同步: ' + status.last_sync +
(status.expired ? ' <span class="ai-badge ai-badge-warn">已过期</span>' : '') +
'<br>供应商数: ' + status.provider_count
);
if (status.provider_count > 0) {
loadProviderList();
} else {
$('#channel-list').html('<div style="text-align:center;color:#999;padding:20px;">暂无数据,请先同步模型目录或手动添加渠道</div>');
}
}
}
});
}
// 加载已配置的渠道列表
function loadProviderList() {
// 获取所有 system_config 中 ai_provider_ 开头的配置
var channels = [];
// 读取页面内嵌的已配置渠道数据(通过模板变量)
{:php}
$allConfig = get_system_config();
$defaultProvider = get_system_config('ai_default_provider', '');
$configured = [];
if (is_array($allConfig)) {
foreach ($allConfig as $key => $value) {
if (preg_match('/^ai_provider_([a-z0-9_]+)_key$/', $key, $m)) {
if (!empty($value)) {
$pid = $m[1];
$configured[] = [
'id' => $pid,
'name' => ucfirst(str_replace('_', ' ', $pid)),
'base_url' => get_system_config("ai_provider_{$pid}_base_url", ''),
'is_default' => ($defaultProvider === $pid),
];
}
}
}
}
{/php}
var configuredChannels = {:json_encode($configured)};
var html = '';
if (configuredChannels.length === 0) {
html = '<div style="text-align:center;color:#999;padding:20px;">暂无已配置的渠道</div>';
} else {
for (var i = 0; i < configuredChannels.length; i++) {
var ch = configuredChannels[i];
html += '<div class="ai-provider-item">';
html += ' <div class="ai-provider-info">';
html += ' <span class="ai-provider-name">' + ch.name + '</span>';
html += ' <span class="ai-provider-id">' + ch.id + '</span>';
if (ch.is_default) {
html += ' <span class="ai-badge ai-badge-success" style="margin-left:5px;">默认</span>';
}
html += ' <br><span style="font-size:12px;color:#999;">' + (ch.base_url || '默认地址') + '</span>';
html += ' </div>';
html += ' <div class="ai-provider-actions">';
html += ' <button class="layui-btn layui-btn-xs" onclick="testChannel(\'' + ch.id + '\')">测试</button>';
html += ' <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="editChannel(\'' + ch.id + '\')">编辑</button>';
html += ' <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteChannel(\'' + ch.id + '\')">删除</button>';
html += ' </div>';
html += '</div>';
}
}
$('#channel-list').html(html);
// 更新默认供应商下拉
updateDefaultProviderSelect(configuredChannels);
updateCatalogProviders(configuredChannels);
}
// 更新默认供应商下拉
function updateDefaultProviderSelect(channels) {
var sel = $('#sel-default-provider');
var currentDefault = '{:get_system_config("ai_default_provider", "")}';
sel.html('<option value="">请选择</option>');
for (var i = 0; i < channels.length; i++) {
sel.append('<option value="' + channels[i].id + '"' + (channels[i].id === currentDefault ? ' selected' : '') + '>' + channels[i].name + '</option>');
}
form.render('select');
}
// 更新模型目录供应商下拉
function updateCatalogProviders(configured) {
var configuredIds = {};
for (var i = 0; i < configured.length; i++) {
configuredIds[configured[i].id] = true;
}
$.ajax({
url: '{:url("admin/System/syncModelsDev")}',
type: 'get',
dataType: 'json',
success: function (res) {
if (res.code === 0 && res.data && res.data.providers) {
cacheProviders = res.data.providers;
var sel = $('#sel-catalog-provider');
sel.html('<option value="">搜索并选择供应商...</option>');
var keys = Object.keys(res.data.providers).sort();
for (var i = 0; i < keys.length; i++) {
var p = res.data.providers[keys[i]];
var suffix = configuredIds[p.id] ? ' (已配置)' : '';
sel.append('<option value="' + p.id + '">' + p.name + ' (' + p.id + ')' + suffix + '</option>');
}
form.render('select');
}
}
});
}
// 同步 models.dev
$('#btn-sync').on('click', function () {
var btn = $(this);
btn.prop('disabled', true).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 同步中...');
$.ajax({
url: '{:url("admin/System/syncModelsDev")}',
type: 'post',
dataType: 'json',
success: function (res) {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步');
if (res.code === 0) {
layer.msg(res.msg, { icon: 1 });
loadChannels();
} else {
layer.msg(res.msg, { icon: 2 });
}
},
error: function () {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步');
layer.msg('网络错误', { icon: 2 });
}
});
});
// 添加渠道弹窗
$('#btn-add-channel').on('click', function () {
showChannelForm('add', {});
});
// 显示渠道表单弹窗
function showChannelForm(mode, data) {
var html = $('#tpl-channel-form').html();
var title = mode === 'add' ? '添加渠道' : '编辑渠道 - ' + (data.name || data.provider_id);
layer.open({
type: 1,
title: title,
area: ['500px', '380px'],
content: html,
success: function (layero, index) {
form.render(null, 'channel-form');
if (mode === 'edit') {
layero.find('input[name="provider_id"]').val(data.provider_id || '').prop('readonly', true);
layero.find('input[name="key"]').val(data.key || '');
layero.find('input[name="base_url"]').val(data.base_url || '');
layero.find('input[name="edit_mode"]').val('edit');
}
// 测试连接
layero.find('#btn-test-channel').on('click', function () {
var pid = layero.find('input[name="provider_id"]').val();
if (!pid) {
layer.msg('请填写供应商标识', { icon: 2 });
return;
}
layer.msg('测试中...', { icon: 16, time: 0, shade: 0.3 });
$.ajax({
url: '{:url("admin/System/testAiChannel")}',
data: { provider_id: pid },
dataType: 'json',
success: function (res) {
layer.closeAll('msg');
layer.msg(res.msg, { icon: res.code === 0 ? 1 : 2 });
},
error: function () {
layer.closeAll('msg');
layer.msg('网络错误', { icon: 2 });
}
});
});
// 提交表单
form.on('submit(channel-form-submit)', function (obj) {
var formData = obj.field;
if (formData.edit_mode === 'edit') {
formData.provider_id = data.provider_id;
}
$.ajax({
url: '{:url("admin/System/saveAiChannel")}',
type: 'post',
data: formData,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
layer.close(index);
layer.msg(res.msg, { icon: 1 });
setTimeout(function () { location.reload(); }, 500);
} else {
layer.msg(res.msg, { icon: 2 });
}
}
});
return false;
});
}
});
}
// 测试渠道
window.testChannel = function (providerId) {
layer.msg('测试中...', { icon: 16, time: 0, shade: 0.3 });
$.ajax({
url: '{:url("admin/System/testAiChannel")}',
data: { provider_id: providerId },
dataType: 'json',
success: function (res) {
layer.closeAll('msg');
layer.msg(res.msg, { icon: res.code === 0 ? 1 : 2 });
},
error: function () {
layer.closeAll('msg');
layer.msg('网络错误', { icon: 2 });
}
});
};
// 编辑渠道
window.editChannel = function (providerId) {
{:php}
echo 'var providerConfigs = {};';
if (is_array($allConfig)) {
foreach ($configured as $ch) {
$pid = $ch['id'];
echo "providerConfigs['{$pid}'] = " . json_encode([
'provider_id' => $pid,
'name' => $ch['name'],
'key' => get_system_config("ai_provider_{$pid}_key", ''),
'base_url' => get_system_config("ai_provider_{$pid}_base_url", ''),
]) . ';';
}
}
{/php}
var data = providerConfigs[providerId];
if (data) {
showChannelForm('edit', data);
}
};
// 删除渠道
window.deleteChannel = function (providerId) {
layer.confirm('确定删除渠道 "' + providerId + '" 的配置?', { icon: 3, title: '确认' }, function (index) {
$.ajax({
url: '{:url("admin/System/deleteAiChannel")}',
data: { provider_id: providerId },
dataType: 'json',
success: function (res) {
if (res.code === 0) {
layer.close(index);
layer.msg(res.msg, { icon: 1 });
setTimeout(function () { location.reload(); }, 500);
} else {
layer.msg(res.msg, { icon: 2 });
}
}
});
});
};
// 模型目录选择供应商
form.on('select(catalog-provider)', function (obj) {
var pid = obj.value;
if (pid && cacheProviders[pid]) {
var p = cacheProviders[pid];
$('#catalog-provider-desc').text((p.url ? '官网: ' + p.url : '') + (p.api_base_url ? ' | API: ' + p.api_base_url : ''));
$('#catalog-provider-info').show();
// 加载该供应商的模型列表
$.ajax({
url: '{:url("admin/System/getModelsByProvider")}',
data: { provider_id: pid },
dataType: 'json',
success: function (res) {
if (res.code === 0 && res.data && res.data.length > 0) {
var sel = $('#sel-catalog-model');
sel.html('<option value="">选择默认模型(可选)</option>');
for (var i = 0; i < res.data.length; i++) {
var m = res.data[i];
sel.append('<option value="' + m.id + '">' + m.name + ' (' + m.id + ')</option>');
}
$('#catalog-models-wrap').show();
form.render('select');
} else {
$('#catalog-models-wrap').hide();
}
}
});
// 自动填充 API 地址
if (p.api_base_url) {
// 保存到临时变量
window._catalogBaseUrl = p.api_base_url;
}
} else {
$('#catalog-provider-info').hide();
$('#catalog-models-wrap').hide();
window._catalogBaseUrl = '';
}
});
// 从目录添加渠道提交
form.on('submit(catalog-add-submit)', function (obj) {
var formData = obj.field;
if (!formData.catalog_provider) {
layer.msg('请选择供应商', { icon: 2 });
return false;
}
var saveData = {
provider_id: formData.catalog_provider,
key: '', // 弹窗输入
base_url: window._catalogBaseUrl || '',
default_model: formData.catalog_model || '',
is_default: false
};
// 弹出输入API Key的窗口
layer.prompt({
formType: 1,
title: '输入 <b>' + formData.catalog_provider + '</b> 的 API Key',
area: ['400px', '120px']
}, function (value, index, elem) {
saveData.key = value;
$.ajax({
url: '{:url("admin/System/saveAiChannel")}',
type: 'post',
data: saveData,
dataType: 'json',
success: function (res) {
layer.close(index);
if (res.code === 0) {
layer.msg(res.msg, { icon: 1 });
setTimeout(function () { location.reload(); }, 500);
} else {
layer.msg(res.msg, { icon: 2 });
}
}
});
});
return false;
});
// 保存默认设置
form.on('submit(save-defaults)', function (obj) {
$.ajax({
url: '{:url("admin/System/update")}',
type: 'post',
data: obj.field,
dataType: 'json',
success: function (res) {
if (res.code === 0) {
layer.msg('保存成功', { icon: 1 });
} else {
layer.msg(res.msg || '保存失败', { icon: 2 });
}
},
error: function () {
layer.msg('网络错误', { icon: 2 });
}
});
return false;
});
// 初始加载
loadChannels();
});
</script>
</body>
</html>