mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 14:52:48 +08:00
83a2bd48a2
- 新增手机图片排版功能，支持小红书/抖音尺寸输出 - 新增AI智能排版顾问，支持内容分析与优化推荐 - 新增AI供应商管理，支持多渠道配置与同步 - 新增文章输出管理页面，支持图片预览与批量下载 - 新增字体文件与排版样式配置
265 lines
11 KiB
HTML
265 lines
11 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">
|
|
<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>
|