mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 13:12:49 +08:00
feat(post): 新增手机图片排版与AI智能排版功能
- 新增手机图片排版功能，支持小红书/抖音尺寸输出 - 新增AI智能排版顾问，支持内容分析与优化推荐 - 新增AI供应商管理，支持多渠道配置与同步 - 新增文章输出管理页面，支持图片预览与批量下载 - 新增字体文件与排版样式配置
This commit is contained in:
augushong
@@ -348,4 +348,208 @@ class Post extends Common
|
||||
|
||||
return download($mardkown, $model_post->title . '.md', true);
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机图片排版操作页
|
||||
*/
|
||||
public function phoneImage($id)
|
||||
{
|
||||
$model_post = ModelPost::find($id);
|
||||
if (empty($model_post)) {
|
||||
$this->error('文章不存在');
|
||||
}
|
||||
View::assign('post', $model_post);
|
||||
return View::fetch();
|
||||
}
|
||||
|
||||
/**
|
||||
* 输出管理列表页
|
||||
*/
|
||||
public function postOutputList($id)
|
||||
{
|
||||
$model_post = ModelPost::find($id);
|
||||
if (empty($model_post)) {
|
||||
$this->error('文章不存在');
|
||||
}
|
||||
$output_list = \app\model\PostOutput::where('post_id', $id)
|
||||
->order('id', 'desc')
|
||||
->paginate(10);
|
||||
View::assign('post', $model_post);
|
||||
View::assign('list', $output_list);
|
||||
return View::fetch('post_output/index');
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存输出记录
|
||||
*/
|
||||
public function savePostOutput()
|
||||
{
|
||||
$data = json_decode(file_get_contents('php://input'), true);
|
||||
if (empty($data['post_id'])) {
|
||||
return json(['code' => 500, 'msg' => '缺少文章ID']);
|
||||
}
|
||||
|
||||
$post = ModelPost::find($data['post_id']);
|
||||
if (empty($post)) {
|
||||
return json(['code' => 500, 'msg' => '文章不存在']);
|
||||
}
|
||||
|
||||
$config = $data['config'] ?? [];
|
||||
$pages = $data['pages'] ?? [];
|
||||
|
||||
$admin_id = session('admin_id') ?? 0;
|
||||
|
||||
$phoneImage = new \app\common\tools\PhoneImage();
|
||||
|
||||
$output = $phoneImage->createOutput((int) $data['post_id'], $config, (int) $admin_id);
|
||||
|
||||
foreach ($pages as $index => $pageData) {
|
||||
$phoneImage->savePageImage($output->id, $index + 1, $pageData);
|
||||
}
|
||||
|
||||
$phoneImage->completeOutput($output->id, count($pages));
|
||||
|
||||
return json(['code' => 0, 'msg' => '保存成功', 'data' => ['output_id' => $output->id]]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除输出记录
|
||||
*/
|
||||
public function deletePostOutput()
|
||||
{
|
||||
$id = $this->request->param('id', 0);
|
||||
if (empty($id)) {
|
||||
return json(['code' => 500, 'msg' => '缺少ID']);
|
||||
}
|
||||
|
||||
$phoneImage = new \app\common\tools\PhoneImage();
|
||||
$phoneImage->deleteOutput((int) $id);
|
||||
|
||||
return json(['code' => 0, 'msg' => '删除成功']);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新生成（用相同配置）
|
||||
*/
|
||||
public function regeneratePostOutput()
|
||||
{
|
||||
$id = $this->request->param('id', 0);
|
||||
if (empty($id)) {
|
||||
return json(['code' => 500, 'msg' => '缺少ID']);
|
||||
}
|
||||
|
||||
$output = \app\model\PostOutput::find($id);
|
||||
if (empty($output)) {
|
||||
return json(['code' => 500, 'msg' => '输出记录不存在']);
|
||||
}
|
||||
|
||||
$phoneImage = new \app\common\tools\PhoneImage();
|
||||
$phoneImage->deleteOutput((int) $id);
|
||||
|
||||
return json(['code' => 0, 'msg' => '请重新排版', 'data' => ['config' => $output->config]]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载ZIP
|
||||
*/
|
||||
public function downloadPostOutputZip($id)
|
||||
{
|
||||
$phoneImage = new \app\common\tools\PhoneImage();
|
||||
try {
|
||||
$zipPath = $phoneImage->createZip((int) $id);
|
||||
$output = \app\model\PostOutput::find($id);
|
||||
if (empty($output)) {
|
||||
throw new \Exception('输出记录不存在');
|
||||
}
|
||||
$post = ModelPost::find($output->post_id);
|
||||
$fileName = ($post ? $post->title : 'output') . '_phone_image_' . date('Ymd') . '.zip';
|
||||
|
||||
// 请求结束后清理临时ZIP文件
|
||||
$tempFile = $zipPath;
|
||||
register_shutdown_function(function () use ($tempFile) {
|
||||
if (file_exists($tempFile)) {
|
||||
@unlink($tempFile);
|
||||
}
|
||||
});
|
||||
|
||||
return download($zipPath, $fileName);
|
||||
} catch (\Exception $e) {
|
||||
$this->error($e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取输出文件列表(AJAX)
|
||||
*/
|
||||
public function getOutputFiles()
|
||||
{
|
||||
$outputId = $this->request->param('output_id', 0);
|
||||
|
||||
if (empty($outputId)) {
|
||||
return json(['code' => 500, 'msg' => '缺少输出ID']);
|
||||
}
|
||||
|
||||
$output = \app\model\PostOutput::find((int) $outputId);
|
||||
if (empty($output)) {
|
||||
return json(['code' => 500, 'msg' => '输出记录不存在']);
|
||||
}
|
||||
|
||||
$files = \app\model\PostOutputFile::getByOutput((int) $outputId);
|
||||
|
||||
$result = [];
|
||||
foreach ($files as $file) {
|
||||
$result[] = [
|
||||
'id' => $file->id,
|
||||
'page' => $file->page,
|
||||
'file_url' => $file->file_url,
|
||||
'file_size' => $file->file_size,
|
||||
'width' => $file->width,
|
||||
'height' => $file->height,
|
||||
];
|
||||
}
|
||||
|
||||
return json(['code' => 0, 'data' => $result]);
|
||||
}
|
||||
|
||||
/**
|
||||
* AI智能排版推荐.
|
||||
*/
|
||||
public function aiRecommend()
|
||||
{
|
||||
$postId = $this->request->post('post_id', 0);
|
||||
$post = ModelPost::find($postId);
|
||||
if (empty($post)) {
|
||||
return json(['code' => 500, 'msg' => '文章不存在']);
|
||||
}
|
||||
|
||||
$advisor = new \app\common\tools\AiLayoutAdvisor();
|
||||
$result = $advisor->analyzeAndRecommend($post);
|
||||
|
||||
if ($result['success']) {
|
||||
return json(['code' => 0, 'data' => $result['data']]);
|
||||
}
|
||||
|
||||
return json(['code' => 500, 'msg' => $result['msg']]);
|
||||
}
|
||||
|
||||
/**
|
||||
* AI内容优化.
|
||||
*/
|
||||
public function aiOptimizeContent()
|
||||
{
|
||||
$postId = $this->request->post('post_id', 0);
|
||||
$post = ModelPost::find($postId);
|
||||
if (empty($post)) {
|
||||
return json(['code' => 500, 'msg' => '文章不存在']);
|
||||
}
|
||||
|
||||
$advisor = new \app\common\tools\AiLayoutAdvisor();
|
||||
$result = $advisor->optimizeContent($post);
|
||||
|
||||
if ($result['success']) {
|
||||
return json(['code' => 0, 'data' => $result['data']]);
|
||||
}
|
||||
|
||||
return json(['code' => 500, 'msg' => $result['msg']]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,4 +96,91 @@ class System extends Common
|
||||
|
||||
return $this->success('清楚成功');
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 设置页面.
|
||||
*/
|
||||
public function ai()
|
||||
{
|
||||
return View::fetch();
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步 models.dev 数据.
|
||||
*/
|
||||
public function syncModelsDev()
|
||||
{
|
||||
$sync = new \app\common\tools\ai\ModelsDevSync();
|
||||
try {
|
||||
$result = $sync->syncProviders();
|
||||
$count = count($result['providers'] ?? []);
|
||||
return json(['code' => 0, 'msg' => "同步成功, 共{$count}个供应商", 'data' => $result]);
|
||||
} catch (\Exception $e) {
|
||||
return json(['code' => 500, 'msg' => '同步失败: ' . $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 测试AI渠道连接.
|
||||
*/
|
||||
public function testAiChannel()
|
||||
{
|
||||
$providerId = $this->request->param('provider_id', '');
|
||||
if (empty($providerId)) {
|
||||
return json(['code' => 500, 'msg' => '缺少供应商ID']);
|
||||
}
|
||||
$manager = new \app\common\tools\ai\AiChannelManager();
|
||||
$provider = $manager->getProvider($providerId);
|
||||
if (!$provider) {
|
||||
return json(['code' => 500, 'msg' => '供应商未配置或缺少API Key']);
|
||||
}
|
||||
$ok = $provider->testConnection();
|
||||
return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '连接成功' : '连接失败,请检查配置']);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定供应商的模型列表.
|
||||
*/
|
||||
public function getModelsByProvider()
|
||||
{
|
||||
$providerId = $this->request->param('provider_id', '');
|
||||
$sync = new \app\common\tools\ai\ModelsDevSync();
|
||||
$models = $sync->getModelsByProvider($providerId);
|
||||
return json(['code' => 0, 'data' => $models]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 models.dev 缓存状态.
|
||||
*/
|
||||
public function getAiCacheStatus()
|
||||
{
|
||||
$sync = new \app\common\tools\ai\ModelsDevSync();
|
||||
$status = $sync->getCacheStatus();
|
||||
return json(['code' => 0, 'data' => $status]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存AI渠道配置.
|
||||
*/
|
||||
public function saveAiChannel()
|
||||
{
|
||||
$data = $this->request->post();
|
||||
$manager = new \app\common\tools\ai\AiChannelManager();
|
||||
$ok = $manager->saveChannelConfig($data);
|
||||
return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '保存成功' : '保存失败']);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除AI渠道配置.
|
||||
*/
|
||||
public function deleteAiChannel()
|
||||
{
|
||||
$providerId = $this->request->param('provider_id', '');
|
||||
if (empty($providerId)) {
|
||||
return json(['code' => 500, 'msg' => '缺少供应商ID']);
|
||||
}
|
||||
$manager = new \app\common\tools\ai\AiChannelManager();
|
||||
$ok = $manager->deleteChannelConfig($providerId);
|
||||
return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '删除成功' : '删除失败']);
|
||||
}
|
||||
}
|
||||
|
||||
87
app/common/tools/AiLayoutAdvisor.php
Normal file
87
app/common/tools/AiLayoutAdvisor.php
Normal file
@@ -0,0 +1,87 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools;
|
||||
|
||||
use app\common\tools\ai\AiChannelManager;
|
||||
use app\model\Post;
|
||||
|
||||
/**
|
||||
* AI 智能排版顾问.
|
||||
*
|
||||
* 分析文章内容并推荐排版配置，或优化内容以适配手机图片排版.
|
||||
*/
|
||||
class AiLayoutAdvisor
|
||||
{
|
||||
/**
|
||||
* 分析文章并推荐排版配置.
|
||||
*
|
||||
* @param Post $post 文章模型
|
||||
*
|
||||
* @return array ['success'=>bool, 'data'=>..., 'msg'=>...]
|
||||
*/
|
||||
public function analyzeAndRecommend(Post $post): array
|
||||
{
|
||||
try {
|
||||
$manager = new AiChannelManager();
|
||||
$provider = $manager->getDefaultProvider();
|
||||
|
||||
if (!$provider) {
|
||||
return ['success' => false, 'msg' => 'AI 功能暂不可用，请检查后台 AI 设置'];
|
||||
}
|
||||
|
||||
$systemPrompt = "你是一位专业的手机图文排版设计师。根据文章内容，推荐最适合的排版配置。"
|
||||
. "你必须返回JSON格式：{\"template\":\"minimal|magazine|mixed\",\"font\":\"source-han-sans|alibaba-puhuiti|lxgw-wenkai\","
|
||||
. "\"font_size\":14,\"reason\":\"推荐理由\"}"
|
||||
. "模板特点：minimal=白底黑字留白多适合长文，magazine=装饰线首字下沉适合正式文章，mixed=图文穿插适合图片多的文章。"
|
||||
. "字体特点：source-han-sans=思源黑体通用，alibaba-puhuiti=阿里巴巴普惠体现代感，lxgw-wenkai=霞鹜文楷文艺感。";
|
||||
|
||||
$contentPreview = mb_substr(strip_tags($post->content_html ?? ''), 0, 500);
|
||||
$imageCount = substr_count($post->content_html ?? '', '<img');
|
||||
|
||||
$userPrompt = "文章标题：{$post->title}\n"
|
||||
. '摘要：' . ($post->desc ?? '无') . "\n"
|
||||
. "正文前500字：{$contentPreview}\n"
|
||||
. "图片数量：{$imageCount}\n"
|
||||
. '分类：' . ($post->category_name ?? '未分类');
|
||||
|
||||
$result = $provider->chatJson($systemPrompt, $userPrompt);
|
||||
|
||||
return ['success' => true, 'data' => $result];
|
||||
} catch (\Exception $e) {
|
||||
return ['success' => false, 'msg' => 'AI 分析失败: ' . $e->getMessage()];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化内容以适配手机图片排版.
|
||||
*
|
||||
* @param Post $post 文章模型
|
||||
*
|
||||
* @return array ['success'=>bool, 'data'=>..., 'msg'=>...]
|
||||
*/
|
||||
public function optimizeContent(Post $post): array
|
||||
{
|
||||
try {
|
||||
$manager = new AiChannelManager();
|
||||
$provider = $manager->getDefaultProvider();
|
||||
|
||||
if (!$provider) {
|
||||
return ['success' => false, 'msg' => 'AI 功能暂不可用，请检查后台 AI 设置'];
|
||||
}
|
||||
|
||||
$systemPrompt = "你是一位专业的内容编辑。优化以下文章内容，使其更适合在手机图片上展示。"
|
||||
. "要求：1.标题更简短有力 2.段落精简(每段不超过100字) 3.提炼3-5个要点"
|
||||
. "返回JSON：{\"optimized_title\":\"标题\",\"optimized_paragraphs\":[\"段落1\",\"段落2\"],\"summary_points\":[\"要点1\",\"要点2\"]}";
|
||||
|
||||
$content = mb_substr(strip_tags($post->content_html ?? ''), 0, 1000);
|
||||
|
||||
$userPrompt = "文章标题：{$post->title}\n原文内容：{$content}";
|
||||
|
||||
$result = $provider->chatJson($systemPrompt, $userPrompt);
|
||||
|
||||
return ['success' => true, 'data' => $result];
|
||||
} catch (\Exception $e) {
|
||||
return ['success' => false, 'msg' => 'AI 内容优化失败: ' . $e->getMessage()];
|
||||
}
|
||||
}
|
||||
}
|
||||
215
app/common/tools/PhoneImage.php
Normal file
215
app/common/tools/PhoneImage.php
Normal file
@@ -0,0 +1,215 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools;
|
||||
|
||||
use app\model\Post;
|
||||
use app\model\PostOutput;
|
||||
use app\model\PostOutputFile;
|
||||
use think\facade\App;
|
||||
|
||||
class PhoneImage implements PostOutputManagerInterface
|
||||
{
|
||||
/**
|
||||
* 返回配置字段定义
|
||||
*/
|
||||
public function getConfigFields(): array
|
||||
{
|
||||
return [
|
||||
'template' => ['type' => 'select', 'options' => ['minimal', 'magazine', 'mixed'], 'default' => 'minimal'],
|
||||
'size' => ['type' => 'select', 'options' => ['xiaohongshu', 'douyin'], 'default' => 'xiaohongshu'],
|
||||
'font' => ['type' => 'select', 'options' => ['source-han-sans', 'alibaba-puhuiti', 'lxgw-wenkai'], 'default' => 'source-han-sans'],
|
||||
'font_size' => ['type' => 'number', 'default' => 14, 'min' => 10, 'max' => 24],
|
||||
'watermark' => ['type' => 'text', 'default' => ''],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 验证配置合法性
|
||||
*/
|
||||
public function validateConfig(array $config): bool
|
||||
{
|
||||
$fields = $this->getConfigFields();
|
||||
|
||||
if (isset($config['template']) && !in_array($config['template'], $fields['template']['options'])) {
|
||||
return false;
|
||||
}
|
||||
if (isset($config['size']) && !in_array($config['size'], $fields['size']['options'])) {
|
||||
return false;
|
||||
}
|
||||
if (isset($config['font']) && !in_array($config['font'], $fields['font']['options'])) {
|
||||
return false;
|
||||
}
|
||||
if (isset($config['font_size'])) {
|
||||
$size = intval($config['font_size']);
|
||||
if ($size < $fields['font_size']['min'] || $size > $fields['font_size']['max']) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行输出处理 - 服务端接收base64数据，保存文件，创建记录
|
||||
* 注意：HTML渲染在前端完成(html2canvas)，服务端只做文件保存和记录创建
|
||||
*/
|
||||
public function process(Post $post, array $config): array
|
||||
{
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回预览HTML - 预览在前端完成，服务端返回空
|
||||
*/
|
||||
public function getPreview(Post $post, array $config): string
|
||||
{
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存单页图片
|
||||
* @param int $outputId 输出记录ID
|
||||
* @param int $page 页码(从1开始)
|
||||
* @param string $imageData base64编码的图片数据
|
||||
* @return PostOutputFile|false
|
||||
*/
|
||||
public function savePageImage(int $outputId, int $page, string $imageData)
|
||||
{
|
||||
$imageData = str_replace('data:image/jpeg;base64,', '', $imageData);
|
||||
$imageData = str_replace('data:image/png;base64,', '', $imageData);
|
||||
$imageData = str_replace(' ', '+', $imageData);
|
||||
$decoded = base64_decode($imageData);
|
||||
|
||||
if ($decoded === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$dateDir = date('Ymd');
|
||||
$relativeDir = '/upload/post_output/' . $dateDir;
|
||||
$fileName = $outputId . '_' . $page . '.jpg';
|
||||
$relativePath = $relativeDir . '/' . $fileName;
|
||||
$fullDir = App::getRootPath() . '/public' . $relativeDir;
|
||||
$fullPath = $fullDir . '/' . $fileName;
|
||||
|
||||
if (!is_dir($fullDir)) {
|
||||
mkdir($fullDir, 0777, true);
|
||||
}
|
||||
|
||||
file_put_contents($fullPath, $decoded);
|
||||
|
||||
$imageInfo = getimagesize($fullPath);
|
||||
$width = $imageInfo[0] ?? 0;
|
||||
$height = $imageInfo[1] ?? 0;
|
||||
|
||||
$fileRecord = PostOutputFile::create([
|
||||
'output_id' => $outputId,
|
||||
'page' => $page,
|
||||
'file_path' => $relativePath,
|
||||
'file_url' => $relativePath,
|
||||
'file_size' => strlen($decoded),
|
||||
'width' => $width,
|
||||
'height' => $height,
|
||||
]);
|
||||
|
||||
return $fileRecord;
|
||||
}
|
||||
|
||||
/**
|
||||
* 打包某条输出记录的所有图片为ZIP
|
||||
* @param int $outputId
|
||||
* @return string ZIP文件路径
|
||||
* @throws \Exception
|
||||
*/
|
||||
public function createZip(int $outputId): string
|
||||
{
|
||||
$output = PostOutput::find($outputId);
|
||||
if (!$output) {
|
||||
throw new \Exception('输出记录不存在');
|
||||
}
|
||||
|
||||
$files = PostOutputFile::where('output_id', $outputId)
|
||||
->order('page', 'asc')
|
||||
->select();
|
||||
|
||||
if ($files->isEmpty()) {
|
||||
throw new \Exception('没有可下载的文件');
|
||||
}
|
||||
|
||||
$tempDir = App::getRuntimePath() . 'temp';
|
||||
if (!is_dir($tempDir)) {
|
||||
mkdir($tempDir, 0777, true);
|
||||
}
|
||||
|
||||
$zipFileName = 'post_output_' . $outputId . '.zip';
|
||||
$zipPath = $tempDir . '/' . $zipFileName;
|
||||
|
||||
$zip = new \ZipArchive();
|
||||
if ($zip->open($zipPath, \ZipArchive::CREATE | \ZipArchive::OVERWRITE) !== true) {
|
||||
throw new \Exception('无法创建ZIP文件');
|
||||
}
|
||||
|
||||
foreach ($files as $file) {
|
||||
$filePath = App::getRootPath() . '/public' . $file->file_path;
|
||||
if (file_exists($filePath)) {
|
||||
$pageName = str_pad((string) $file->page, 2, '0', STR_PAD_LEFT) . '.jpg';
|
||||
$zip->addFile($filePath, $pageName);
|
||||
}
|
||||
}
|
||||
|
||||
$zip->close();
|
||||
|
||||
return $zipPath;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除输出记录及所有关联文件
|
||||
* @param int $outputId
|
||||
* @return bool
|
||||
*/
|
||||
public function deleteOutput(int $outputId): bool
|
||||
{
|
||||
$files = PostOutputFile::where('output_id', $outputId)->select();
|
||||
|
||||
foreach ($files as $file) {
|
||||
$filePath = App::getRootPath() . '/public' . $file->file_path;
|
||||
if (file_exists($filePath)) {
|
||||
@unlink($filePath);
|
||||
}
|
||||
}
|
||||
|
||||
PostOutputFile::where('output_id', $outputId)->delete();
|
||||
PostOutput::destroy($outputId);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建输出记录
|
||||
* @param int $postId 文章ID
|
||||
* @param array $config 配置
|
||||
* @param int $adminId 管理员ID
|
||||
* @return PostOutput
|
||||
*/
|
||||
public function createOutput(int $postId, array $config, int $adminId): PostOutput
|
||||
{
|
||||
return PostOutput::create([
|
||||
'post_id' => $postId,
|
||||
'output_type' => 'phone_image',
|
||||
'config' => $config,
|
||||
'status' => PostOutput::STATUS_PROCESSING,
|
||||
'page_count' => 0,
|
||||
'admin_id' => $adminId,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 完成输出记录 - 更新状态和页数
|
||||
*/
|
||||
public function completeOutput(int $outputId, int $pageCount): bool
|
||||
{
|
||||
return PostOutput::where('id', $outputId)->update([
|
||||
'status' => PostOutput::STATUS_COMPLETED,
|
||||
'page_count' => $pageCount,
|
||||
]) > 0;
|
||||
}
|
||||
}
|
||||
28
app/common/tools/PostOutputManagerInterface.php
Normal file
28
app/common/tools/PostOutputManagerInterface.php
Normal file
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools;
|
||||
|
||||
use app\model\Post;
|
||||
|
||||
interface PostOutputManagerInterface
|
||||
{
|
||||
/**
|
||||
* 返回该输出类型需要的配置字段定义
|
||||
*/
|
||||
public function getConfigFields(): array;
|
||||
|
||||
/**
|
||||
* 验证配置合法性
|
||||
*/
|
||||
public function validateConfig(array $config): bool;
|
||||
|
||||
/**
|
||||
* 执行输出处理，返回文件信息数组
|
||||
*/
|
||||
public function process(Post $post, array $config): array;
|
||||
|
||||
/**
|
||||
* 返回预览HTML
|
||||
*/
|
||||
public function getPreview(Post $post, array $config): string;
|
||||
}
|
||||
186
app/common/tools/ai/AiChannelManager.php
Normal file
186
app/common/tools/ai/AiChannelManager.php
Normal file
@@ -0,0 +1,186 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools\ai;
|
||||
|
||||
use app\common\tools\ai\provider\OpenAiCompatibleAdapter;
|
||||
|
||||
/**
|
||||
* AI 渠道管理器.
|
||||
*
|
||||
* 管理多个AI供应商的配置、连接和调用.
|
||||
*/
|
||||
class AiChannelManager
|
||||
{
|
||||
/**
|
||||
* @var array 已注册的供应商适配器实例
|
||||
*/
|
||||
protected $providers = [];
|
||||
|
||||
/**
|
||||
* 获取默认供应商的适配器实例.
|
||||
*
|
||||
* @return AiProviderInterface|null
|
||||
*/
|
||||
public function getDefaultProvider(): ?AiProviderInterface
|
||||
{
|
||||
$defaultId = get_system_config('ai_default_provider', '');
|
||||
|
||||
if (empty($defaultId)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return $this->getProvider($defaultId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定供应商的适配器实例.
|
||||
*
|
||||
* @param string $providerId 供应商标识
|
||||
*
|
||||
* @return AiProviderInterface|null
|
||||
*/
|
||||
public function getProvider(string $providerId): ?AiProviderInterface
|
||||
{
|
||||
if (isset($this->providers[$providerId])) {
|
||||
return $this->providers[$providerId];
|
||||
}
|
||||
|
||||
$apiKey = get_system_config("ai_provider_{$providerId}_key", '');
|
||||
if (empty($apiKey)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$provider = new OpenAiCompatibleAdapter($providerId);
|
||||
$this->providers[$providerId] = $provider;
|
||||
|
||||
return $provider;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有已配置(有API Key)的供应商列表.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getAvailableProviders(): array
|
||||
{
|
||||
$sync = new ModelsDevSync();
|
||||
$allProviders = $sync->getProviders();
|
||||
|
||||
$available = [];
|
||||
foreach ($allProviders as $id => $provider) {
|
||||
$apiKey = get_system_config("ai_provider_{$id}_key", '');
|
||||
if (!empty($apiKey)) {
|
||||
$provider['configured'] = true;
|
||||
$provider['base_url'] = get_system_config("ai_provider_{$id}_base_url", $provider['api_base_url'] ?? '');
|
||||
$available[$id] = $provider;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查不在models.dev中但已手动配置的供应商
|
||||
$allConfig = get_system_config();
|
||||
if (is_array($allConfig)) {
|
||||
foreach ($allConfig as $key => $value) {
|
||||
if (preg_match('/^ai_provider_([a-z0-9_]+)_key$/', $key, $matches)) {
|
||||
$customId = $matches[1];
|
||||
if (!empty($value) && !isset($available[$customId])) {
|
||||
$available[$customId] = [
|
||||
'id' => $customId,
|
||||
'name' => ucfirst(str_replace('_', ' ', $customId)),
|
||||
'configured' => true,
|
||||
'base_url' => get_system_config("ai_provider_{$customId}_base_url", ''),
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $available;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存供应商配置.
|
||||
*
|
||||
* @param array $data 配置数据,格式:
|
||||
* [
|
||||
* 'provider_id' => 'zhipu',
|
||||
* 'key' => 'api_key_value',
|
||||
* 'base_url' => 'https://open.bigmodel.cn/api/paas/v4',
|
||||
* ]
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function saveChannelConfig(array $data): bool
|
||||
{
|
||||
$providerId = $data['provider_id'] ?? '';
|
||||
if (empty($providerId)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$configs = [
|
||||
"ai_provider_{$providerId}_key" => $data['key'] ?? '',
|
||||
"ai_provider_{$providerId}_base_url" => $data['base_url'] ?? '',
|
||||
];
|
||||
|
||||
if (isset($data['is_default']) && $data['is_default']) {
|
||||
$configs['ai_default_provider'] = $providerId;
|
||||
}
|
||||
|
||||
if (isset($data['default_model'])) {
|
||||
$configs['ai_default_model'] = $data['default_model'];
|
||||
}
|
||||
|
||||
return $this->saveConfigs($configs);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除供应商配置.
|
||||
*
|
||||
* @param string $providerId 供应商标识
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function deleteChannelConfig(string $providerId): bool
|
||||
{
|
||||
$configs = [
|
||||
"ai_provider_{$providerId}_key" => '',
|
||||
"ai_provider_{$providerId}_base_url" => '',
|
||||
];
|
||||
|
||||
// 如果删除的是默认供应商,清除默认设置
|
||||
$defaultProvider = get_system_config('ai_default_provider', '');
|
||||
if ($defaultProvider === $providerId) {
|
||||
$configs['ai_default_provider'] = '';
|
||||
}
|
||||
|
||||
return $this->saveConfigs($configs);
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量保存配置到SystemConfig.
|
||||
*
|
||||
* @param array $configs 键值对配置
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
protected function saveConfigs(array $configs): bool
|
||||
{
|
||||
$list = \app\model\SystemConfig::column('value', 'name');
|
||||
|
||||
foreach ($configs as $key => $value) {
|
||||
if (isset($list[$key])) {
|
||||
\app\model\SystemConfig::where('name', $key)->update(['value' => $value]);
|
||||
} else {
|
||||
$model = new \app\model\SystemConfig();
|
||||
$model->name = $key;
|
||||
$model->value = $value;
|
||||
$model->save();
|
||||
}
|
||||
|
||||
$list[$key] = $value;
|
||||
}
|
||||
|
||||
\think\facade\Cache::set('system_config', $list);
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
52
app/common/tools/ai/AiProviderInterface.php
Normal file
52
app/common/tools/ai/AiProviderInterface.php
Normal file
@@ -0,0 +1,52 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools\ai;
|
||||
|
||||
/**
|
||||
* AI 供应商接口.
|
||||
*/
|
||||
interface AiProviderInterface
|
||||
{
|
||||
/**
|
||||
* 发送聊天请求.
|
||||
*
|
||||
* @param string $systemPrompt 系统提示词
|
||||
* @param string $userPrompt 用户消息
|
||||
* @param array $options 额外选项(model, temperature, max_tokens等)
|
||||
*
|
||||
* @return string AI回复内容
|
||||
*/
|
||||
public function chat(string $systemPrompt, string $userPrompt, array $options = []): string;
|
||||
|
||||
/**
|
||||
* 发送聊天请求并返回JSON解析后的数组.
|
||||
*
|
||||
* @param string $systemPrompt 系统提示词
|
||||
* @param string $userPrompt 用户消息
|
||||
* @param array $options 额外选项
|
||||
*
|
||||
* @return array 解析后的JSON数组
|
||||
*/
|
||||
public function chatJson(string $systemPrompt, string $userPrompt, array $options = []): array;
|
||||
|
||||
/**
|
||||
* 获取供应商名称.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getProviderName(): string;
|
||||
|
||||
/**
|
||||
* 获取供应商支持的模型列表.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getModels(): array;
|
||||
|
||||
/**
|
||||
* 测试连接是否可用.
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
public function testConnection(): bool;
|
||||
}
|
||||
237
app/common/tools/ai/ModelsDevSync.php
Normal file
237
app/common/tools/ai/ModelsDevSync.php
Normal file
@@ -0,0 +1,237 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools\ai;
|
||||
|
||||
/**
|
||||
* models.dev 数据同步与缓存.
|
||||
*
|
||||
* 从 https://models.dev/api.json 获取AI模型供应商和模型目录数据,
|
||||
* 缓存到 runtime/ai/models_dev_cache.json, 有效期24小时.
|
||||
*/
|
||||
class ModelsDevSync
|
||||
{
|
||||
/**
|
||||
* @var string models.dev API地址
|
||||
*/
|
||||
protected $apiUrl = 'https://models.dev/api.json';
|
||||
|
||||
/**
|
||||
* @var string 缓存文件路径
|
||||
*/
|
||||
protected $cachePath;
|
||||
|
||||
/**
|
||||
* @var int 缓存有效期(秒), 默认24小时
|
||||
*/
|
||||
protected $cacheTtl = 86400;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->cachePath = app()->getRuntimePath() . 'ai' . DIRECTORY_SEPARATOR . 'models_dev_cache.json';
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步供应商数据到本地缓存.
|
||||
*
|
||||
* @return array 同步结果统计
|
||||
*
|
||||
* @throws \Exception
|
||||
*/
|
||||
public function syncProviders(): array
|
||||
{
|
||||
$data = $this->fetchApi();
|
||||
|
||||
if ($data === false) {
|
||||
throw new \Exception('无法连接 models.dev API');
|
||||
}
|
||||
|
||||
$parsed = $this->parseApiData($data);
|
||||
|
||||
$this->writeCache($parsed);
|
||||
|
||||
return $parsed;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有供应商列表.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getProviders(): array
|
||||
{
|
||||
$cache = $this->readCache();
|
||||
if ($cache === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return $cache['providers'] ?? [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定供应商的模型列表.
|
||||
*
|
||||
* @param string $providerId 供应商标识
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getModelsByProvider(string $providerId): array
|
||||
{
|
||||
$cache = $this->readCache();
|
||||
if ($cache === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$models = $cache['models'][$providerId] ?? [];
|
||||
|
||||
return $models;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取缓存状态信息.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getCacheStatus(): array
|
||||
{
|
||||
$exists = file_exists($this->cachePath);
|
||||
$mtime = $exists ? filemtime($this->cachePath) : 0;
|
||||
$expired = ($mtime + $this->cacheTtl) < time();
|
||||
|
||||
return [
|
||||
'exists' => $exists,
|
||||
'last_sync' => $mtime > 0 ? date('Y-m-d H:i:s', $mtime) : '从未同步',
|
||||
'expired' => $expired,
|
||||
'provider_count' => count($this->getProviders()),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 从API获取原始数据.
|
||||
*
|
||||
* @return string|false
|
||||
*/
|
||||
protected function fetchApi()
|
||||
{
|
||||
$ch = curl_init();
|
||||
curl_setopt($ch, CURLOPT_URL, $this->apiUrl);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
|
||||
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
||||
'Accept: application/json',
|
||||
]);
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
if ($httpCode !== 200 || $response === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析API数据为统一格式.
|
||||
*
|
||||
* @param string $raw JSON原始数据
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
protected function parseApiData(string $raw): array
|
||||
{
|
||||
$data = json_decode($raw, true);
|
||||
if (!is_array($data)) {
|
||||
return ['providers' => [], 'models' => []];
|
||||
}
|
||||
|
||||
$providers = [];
|
||||
$models = [];
|
||||
|
||||
foreach ($data as $providerId => $providerData) {
|
||||
if (!is_array($providerData)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
$provider = [
|
||||
'id' => $providerId,
|
||||
'name' => $providerData['name'] ?? ucfirst($providerId),
|
||||
'url' => $providerData['url'] ?? '',
|
||||
'docs_url' => $providerData['docs_url'] ?? '',
|
||||
];
|
||||
|
||||
// 提取API基础地址(如果有)
|
||||
if (isset($providerData['api_base_url'])) {
|
||||
$provider['api_base_url'] = $providerData['api_base_url'];
|
||||
}
|
||||
|
||||
$providers[$providerId] = $provider;
|
||||
|
||||
// 提取模型列表
|
||||
$providerModels = [];
|
||||
if (isset($providerData['models']) && is_array($providerData['models'])) {
|
||||
foreach ($providerData['models'] as $modelId => $modelData) {
|
||||
$model = [
|
||||
'id' => $modelId,
|
||||
'name' => $modelData['name'] ?? $modelId,
|
||||
'description' => $modelData['description'] ?? '',
|
||||
];
|
||||
|
||||
if (isset($modelData['context_length'])) {
|
||||
$model['context_length'] = (int) $modelData['context_length'];
|
||||
}
|
||||
if (isset($modelData['pricing'])) {
|
||||
$model['pricing'] = $modelData['pricing'];
|
||||
}
|
||||
|
||||
$providerModels[] = $model;
|
||||
}
|
||||
}
|
||||
|
||||
$models[$providerId] = $providerModels;
|
||||
}
|
||||
|
||||
return [
|
||||
'providers' => $providers,
|
||||
'models' => $models,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 写入缓存文件.
|
||||
*
|
||||
* @param array $data 缓存数据
|
||||
*/
|
||||
protected function writeCache(array $data): void
|
||||
{
|
||||
$dir = dirname($this->cachePath);
|
||||
if (!is_dir($dir)) {
|
||||
mkdir($dir, 0755, true);
|
||||
}
|
||||
|
||||
file_put_contents($this->cachePath, json_encode($data, JSON_UNESCAPED_UNICODE));
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取缓存文件(支持过期降级).
|
||||
*
|
||||
* @return array|null
|
||||
*/
|
||||
protected function readCache(): ?array
|
||||
{
|
||||
if (!file_exists($this->cachePath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$content = file_get_contents($this->cachePath);
|
||||
$data = json_decode($content, true);
|
||||
|
||||
if (!is_array($data)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
}
|
||||
228
app/common/tools/ai/provider/OpenAiCompatibleAdapter.php
Normal file
228
app/common/tools/ai/provider/OpenAiCompatibleAdapter.php
Normal file
@@ -0,0 +1,228 @@
|
||||
<?php
|
||||
|
||||
namespace app\common\tools\ai\provider;
|
||||
|
||||
use app\common\tools\ai\AiProviderInterface;
|
||||
|
||||
/**
|
||||
* OpenAI 兼容适配器.
|
||||
*
|
||||
* 适用于所有兼容 OpenAI API 格式的供应商:
|
||||
* OpenAI / Zhipu / DeepSeek / Moonshot / Qwen / etc.
|
||||
*/
|
||||
class OpenAiCompatibleAdapter implements AiProviderInterface
|
||||
{
|
||||
/**
|
||||
* @var string 供应商标识(如 zhipu, deepseek)
|
||||
*/
|
||||
protected $providerId;
|
||||
|
||||
/**
|
||||
* @var string 供应商显示名称
|
||||
*/
|
||||
protected $providerName;
|
||||
|
||||
/**
|
||||
* @param string $providerId 供应商标识
|
||||
* @param string $providerName 显示名称(可选)
|
||||
*/
|
||||
public function __construct(string $providerId, string $providerName = '')
|
||||
{
|
||||
$this->providerId = $providerId;
|
||||
$this->providerName = $providerName ?: ucfirst($providerId);
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function chat(string $systemPrompt, string $userPrompt, array $options = []): string
|
||||
{
|
||||
$apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
|
||||
$baseUrl = get_system_config("ai_provider_{$this->providerId}_base_url", 'https://api.openai.com/v1');
|
||||
$model = $options['model'] ?? get_system_config('ai_default_model', 'gpt-3.5-turbo');
|
||||
|
||||
$url = rtrim($baseUrl, '/') . '/chat/completions';
|
||||
$data = [
|
||||
'model' => $model,
|
||||
'messages' => [
|
||||
['role' => 'system', 'content' => $systemPrompt],
|
||||
['role' => 'user', 'content' => $userPrompt],
|
||||
],
|
||||
];
|
||||
|
||||
if (isset($options['temperature'])) {
|
||||
$data['temperature'] = (float) $options['temperature'];
|
||||
}
|
||||
if (isset($options['max_tokens'])) {
|
||||
$data['max_tokens'] = (int) $options['max_tokens'];
|
||||
}
|
||||
|
||||
$response = $this->httpPost($url, $data, [
|
||||
'Authorization: Bearer ' . $apiKey,
|
||||
'Content-Type: application/json',
|
||||
]);
|
||||
|
||||
if ($response === false) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$result = json_decode($response, true);
|
||||
if (!$result || isset($result['error'])) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return $result['choices'][0]['message']['content'] ?? '';
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function chatJson(string $systemPrompt, string $userPrompt, array $options = []): array
|
||||
{
|
||||
$jsonInstruction = "\n\n请严格按照JSON格式返回结果，不要包含任何其他文字说明。";
|
||||
$content = $this->chat($systemPrompt . $jsonInstruction, $userPrompt, $options);
|
||||
|
||||
if (empty($content)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 尝试提取JSON内容(可能包裹在markdown代码块中)
|
||||
if (preg_match('/```(?:json)?\s*([\s\S]*?)```/', $content, $matches)) {
|
||||
$content = $matches[1];
|
||||
}
|
||||
|
||||
$decoded = json_decode(trim($content), true);
|
||||
|
||||
return is_array($decoded) ? $decoded : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getProviderName(): string
|
||||
{
|
||||
return $this->providerName;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getModels(): array
|
||||
{
|
||||
$apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
|
||||
$baseUrl = get_system_config("ai_provider_{$this->providerId}_base_url", 'https://api.openai.com/v1');
|
||||
|
||||
if (empty($apiKey)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$url = rtrim($baseUrl, '/') . '/models';
|
||||
$response = $this->httpGet($url, [
|
||||
'Authorization: Bearer ' . $apiKey,
|
||||
]);
|
||||
|
||||
if ($response === false) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$result = json_decode($response, true);
|
||||
if (!$result || !isset($result['data'])) {
|
||||
return [];
|
||||
}
|
||||
|
||||
$models = [];
|
||||
foreach ($result['data'] as $model) {
|
||||
$models[] = [
|
||||
'id' => $model['id'] ?? '',
|
||||
'name' => $model['id'] ?? '',
|
||||
'owned_by' => $model['owned_by'] ?? '',
|
||||
];
|
||||
}
|
||||
|
||||
return $models;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function testConnection(): bool
|
||||
{
|
||||
$apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
|
||||
if (empty($apiKey)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
$result = $this->chat(
|
||||
'You are a test assistant.',
|
||||
'Reply with exactly: OK',
|
||||
['max_tokens' => 5]
|
||||
);
|
||||
|
||||
return !empty($result);
|
||||
} catch (\Exception $e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* HTTP POST 请求.
|
||||
*
|
||||
* @param string $url 请求地址
|
||||
* @param array $data 请求数据
|
||||
* @param array $headers 请求头
|
||||
*
|
||||
* @return string|false
|
||||
*/
|
||||
protected function httpPost(string $url, array $data, array $headers = [])
|
||||
{
|
||||
$ch = curl_init();
|
||||
curl_setopt($ch, CURLOPT_URL, $url);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
|
||||
curl_setopt($ch, CURLOPT_POST, 1);
|
||||
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
|
||||
curl_setopt($ch, CURLOPT_TIMEOUT, 60);
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
if ($httpCode >= 400) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
/**
|
||||
* HTTP GET 请求.
|
||||
*
|
||||
* @param string $url 请求地址
|
||||
* @param array $headers 请求头
|
||||
*
|
||||
* @return string|false
|
||||
*/
|
||||
protected function httpGet(string $url, array $headers = [])
|
||||
{
|
||||
$ch = curl_init();
|
||||
curl_setopt($ch, CURLOPT_URL, $url);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
|
||||
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
if ($httpCode >= 400) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
}
|
||||
62
app/model/PostOutput.php
Normal file
62
app/model/PostOutput.php
Normal file
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace app\model;
|
||||
|
||||
use app\common\model\Base;
|
||||
use think\model\concern\SoftDelete;
|
||||
|
||||
class PostOutput extends Base
|
||||
{
|
||||
use SoftDelete;
|
||||
|
||||
protected $defaultSoftDelete = 0;
|
||||
|
||||
protected $name = 'post_output';
|
||||
|
||||
protected $json = ['config'];
|
||||
|
||||
public const STATUS_PROCESSING = 0;
|
||||
public const STATUS_COMPLETED = 1;
|
||||
public const STATUS_FAILED = 2;
|
||||
|
||||
public static $statusList = [
|
||||
0 => '生成中',
|
||||
1 => '已完成',
|
||||
2 => '失败',
|
||||
];
|
||||
|
||||
public static $autoClearCache = [];
|
||||
|
||||
public function post()
|
||||
{
|
||||
return $this->belongsTo(Post::class, 'post_id');
|
||||
}
|
||||
|
||||
public function files()
|
||||
{
|
||||
return $this->hasMany(PostOutputFile::class, 'output_id');
|
||||
}
|
||||
|
||||
public function getStatusTextAttr()
|
||||
{
|
||||
return self::$statusList[$this->getData('status')] ?? '未知';
|
||||
}
|
||||
|
||||
public function getOutputTypeTextAttr()
|
||||
{
|
||||
$types = config('output_type');
|
||||
$type = $this->getData('output_type');
|
||||
|
||||
return $types[$type]['name'] ?? $type;
|
||||
}
|
||||
|
||||
public static function getByPostAndType(int $postId, string $type)
|
||||
{
|
||||
return static::where('post_id', $postId)
|
||||
->where('output_type', $type)
|
||||
->order('id', 'desc')
|
||||
->select();
|
||||
}
|
||||
}
|
||||
26
app/model/PostOutputFile.php
Normal file
26
app/model/PostOutputFile.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace app\model;
|
||||
|
||||
use app\common\model\Base;
|
||||
|
||||
class PostOutputFile extends Base
|
||||
{
|
||||
protected $name = 'post_output_file';
|
||||
|
||||
public static $autoClearCache = [];
|
||||
|
||||
public function output()
|
||||
{
|
||||
return $this->belongsTo(PostOutput::class, 'output_id');
|
||||
}
|
||||
|
||||
public static function getByOutput(int $outputId)
|
||||
{
|
||||
return static::where('output_id', $outputId)
|
||||
->order('page', 'asc')
|
||||
->select();
|
||||
}
|
||||
}
|
||||
19
config/output_type.php
Normal file
19
config/output_type.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
'phone_image' => [
|
||||
'name' => '手机图片排版',
|
||||
'handler' => \app\common\tools\PhoneImage::class,
|
||||
'description' => '将文章排版为手机尺寸图片，适合小红书/抖音等平台',
|
||||
'templates' => ['minimal', 'magazine', 'mixed'],
|
||||
'sizes' => [
|
||||
'xiaohongshu' => ['name' => '小红书', 'width' => 1080, 'height' => 1440],
|
||||
'douyin' => ['name' => '抖音', 'width' => 1080, 'height' => 1920],
|
||||
],
|
||||
'fonts' => [
|
||||
'source-han-sans' => ['name' => '思源黑体', 'file' => 'SourceHanSans-Normal.otf'],
|
||||
'alibaba-puhuiti' => ['name' => '阿里巴巴普惠体', 'file' => 'AlibabaPuHuiTi-3-Regular.ttf'],
|
||||
'lxgw-wenkai' => ['name' => '霞鹜文楷', 'file' => 'LXGWWenKai-Regular.ttf'],
|
||||
],
|
||||
],
|
||||
];
|
||||
@@ -0,0 +1,37 @@
|
||||
<?php
|
||||
|
||||
use app\common\ColumnFormat;
|
||||
use think\migration\Migrator;
|
||||
use think\migration\db\Column;
|
||||
|
||||
class CreateTablePostOutput extends Migrator
|
||||
{
|
||||
public function change()
|
||||
{
|
||||
$table = $this->table('post_output', ['comment' => '文章输出任务']);
|
||||
$table->addColumn(ColumnFormat::integer('post_id')->setComment('文章ID'));
|
||||
$table->addColumn(ColumnFormat::stringShort('output_type')->setComment('输出类型'));
|
||||
$table->addColumn(Column::make('config', 'text')->setComment('配置'));
|
||||
$table->addColumn(ColumnFormat::integerTypeStatus('status')->setComment('状态,0:待处理,1:处理中,2:完成,3:失败'));
|
||||
$table->addColumn(ColumnFormat::integer('page_count')->setComment('页数'));
|
||||
$table->addColumn(ColumnFormat::integer('admin_id')->setComment('管理员ID'));
|
||||
$table->addColumn(ColumnFormat::timestamp('create_time'));
|
||||
$table->addColumn(ColumnFormat::timestamp('update_time'));
|
||||
$table->addColumn(ColumnFormat::timestamp('delete_time'));
|
||||
$table->addIndex('post_id');
|
||||
$table->addIndex('status');
|
||||
$table->create();
|
||||
|
||||
$tableFile = $this->table('post_output_file', ['comment' => '文章输出文件']);
|
||||
$tableFile->addColumn(ColumnFormat::integer('output_id')->setComment('输出任务ID'));
|
||||
$tableFile->addColumn(ColumnFormat::integer('page')->setComment('页码'));
|
||||
$tableFile->addColumn(ColumnFormat::stringLong('file_path')->setComment('文件路径'));
|
||||
$tableFile->addColumn(ColumnFormat::stringLong('file_url')->setComment('文件URL'));
|
||||
$tableFile->addColumn(ColumnFormat::integer('file_size')->setComment('文件大小'));
|
||||
$tableFile->addColumn(ColumnFormat::integer('width')->setComment('宽度'));
|
||||
$tableFile->addColumn(ColumnFormat::integer('height')->setComment('高度'));
|
||||
$tableFile->addColumn(ColumnFormat::timestamp('create_time'));
|
||||
$tableFile->addIndex('output_id');
|
||||
$tableFile->create();
|
||||
}
|
||||
}
|
||||
23
public/static/css/phone-image-fonts.css
Normal file
23
public/static/css/phone-image-fonts.css
Normal file
@@ -0,0 +1,23 @@
|
||||
@font-face {
|
||||
font-family: 'AlibabaPuHuiTi';
|
||||
src: url('/source/font/AlibabaPuHuiTi-3-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlibabaPuHuiTi';
|
||||
src: url('/source/font/AlibabaPuHuiTi-3-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LXGWWenKai';
|
||||
src: url('/source/font/LXGWWenKai-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
694
public/static/css/phone-image-templates.css
Normal file
694
public/static/css/phone-image-templates.css
Normal file
@@ -0,0 +1,694 @@
|
||||
/* ============================================
|
||||
Phone Image Template System
|
||||
用于生成手机端分享图片的CSS框架
|
||||
渲染宽度540px, html2canvas scale=2 输出1080px
|
||||
注意: 仅使用html2canvas兼容的CSS属性
|
||||
支持: flexbox, border-radius, box-shadow, background-color,
|
||||
font, padding, margin, border, position(relative/absolute/fixed)
|
||||
不支持: transform, filter, clip-path, backdrop-filter,
|
||||
CSS grid, object-fit, position:sticky, CSS animations
|
||||
============================================ */
|
||||
|
||||
/* --- CSS Custom Properties --- */
|
||||
:root {
|
||||
/* 字号 */
|
||||
--pi-font-size-base: 14px;
|
||||
--pi-font-size-title: 24px;
|
||||
--pi-font-size-subtitle: 16px;
|
||||
--pi-font-size-small: 12px;
|
||||
/* 行高 */
|
||||
--pi-line-height: 1.8;
|
||||
/* 间距 */
|
||||
--pi-spacing: 20px;
|
||||
--pi-spacing-sm: 10px;
|
||||
--pi-spacing-lg: 30px;
|
||||
/* 颜色 */
|
||||
--pi-color-text: #333333;
|
||||
--pi-color-text-light: #666666;
|
||||
--pi-color-text-lighter: #999999;
|
||||
--pi-color-bg: #ffffff;
|
||||
--pi-color-accent: #1890ff;
|
||||
--pi-color-border: #eeeeee;
|
||||
/* 字体 */
|
||||
--pi-font-family: 'Source Han Sans', 'SourceHanSans-Normal', sans-serif;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Base Container
|
||||
固定540px宽度的最外层容器
|
||||
============================================ */
|
||||
.phone-image-container {
|
||||
width: 540px;
|
||||
background: var(--pi-color-bg);
|
||||
color: var(--pi-color-text);
|
||||
font-family: var(--pi-font-family);
|
||||
font-size: var(--pi-font-size-base);
|
||||
line-height: var(--pi-line-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Container
|
||||
每一页的容器, 尺寸由 size class 控制
|
||||
============================================ */
|
||||
.phone-image-page {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Size Variants
|
||||
两种主流手机图片尺寸
|
||||
============================================ */
|
||||
|
||||
/* 小红书尺寸 540x720 (输出1080x1440) */
|
||||
.size-xiaohongshu .phone-image-page {
|
||||
width: 540px;
|
||||
height: 720px;
|
||||
}
|
||||
|
||||
/* 抖音尺寸 540x960 (输出1080x1920) */
|
||||
.size-douyin .phone-image-page {
|
||||
width: 540px;
|
||||
height: 960px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Type Variants
|
||||
三种页面类型: 封面页/内容页/总结页
|
||||
============================================ */
|
||||
|
||||
/* --- 封面页/首页 --- */
|
||||
.page-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--pi-spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-cover .cover-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--pi-spacing);
|
||||
color: var(--pi-color-text);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.page-cover .cover-subtitle {
|
||||
font-size: var(--pi-font-size-subtitle);
|
||||
color: var(--pi-color-text-light);
|
||||
margin-bottom: var(--pi-spacing);
|
||||
}
|
||||
|
||||
.page-cover .cover-image {
|
||||
width: 100%;
|
||||
margin-bottom: var(--pi-spacing);
|
||||
}
|
||||
|
||||
.page-cover .cover-meta {
|
||||
font-size: var(--pi-font-size-small);
|
||||
color: var(--pi-color-text-lighter);
|
||||
margin-top: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
/* --- 内容页 --- */
|
||||
.page-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--pi-spacing);
|
||||
}
|
||||
|
||||
/* 内容页 - 页头区域 */
|
||||
.page-header {
|
||||
padding-bottom: var(--pi-spacing-sm);
|
||||
margin-bottom: var(--pi-spacing);
|
||||
border-bottom: 1px solid var(--pi-color-border);
|
||||
}
|
||||
|
||||
.page-header .page-title {
|
||||
font-size: var(--pi-font-size-title);
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
color: var(--pi-color-text);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.page-header .page-subtitle {
|
||||
font-size: var(--pi-font-size-subtitle);
|
||||
color: var(--pi-color-text-light);
|
||||
margin-top: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
/* 内容页 - 正文区域 */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.page-content p {
|
||||
margin-bottom: var(--pi-spacing-sm);
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.page-content h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: var(--pi-spacing);
|
||||
margin-bottom: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
.page-content h3 {
|
||||
font-size: var(--pi-font-size-subtitle);
|
||||
font-weight: bold;
|
||||
margin-top: var(--pi-spacing-sm);
|
||||
margin-bottom: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
.page-content blockquote {
|
||||
border-left: 3px solid var(--pi-color-accent);
|
||||
padding-left: var(--pi-spacing-sm);
|
||||
margin: var(--pi-spacing-sm) 0;
|
||||
color: var(--pi-color-text-light);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.page-content ul,
|
||||
.page-content ol {
|
||||
padding-left: var(--pi-spacing);
|
||||
margin-bottom: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
.page-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 内容页 - 页脚区域 */
|
||||
.page-footer {
|
||||
padding-top: var(--pi-spacing-sm);
|
||||
margin-top: var(--pi-spacing-sm);
|
||||
border-top: 1px solid var(--pi-color-border);
|
||||
font-size: var(--pi-font-size-small);
|
||||
color: var(--pi-color-text-lighter);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --- 总结页/尾页 --- */
|
||||
.page-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--pi-spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-summary .summary-title {
|
||||
font-size: var(--pi-font-size-title);
|
||||
font-weight: bold;
|
||||
margin-bottom: var(--pi-spacing);
|
||||
color: var(--pi-color-text);
|
||||
}
|
||||
|
||||
.page-summary .summary-text {
|
||||
font-size: var(--pi-font-size-subtitle);
|
||||
color: var(--pi-color-text-light);
|
||||
margin-bottom: var(--pi-spacing);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.page-summary .summary-qr {
|
||||
margin-bottom: var(--pi-spacing-sm);
|
||||
}
|
||||
|
||||
.page-summary .summary-footer {
|
||||
font-size: var(--pi-font-size-small);
|
||||
color: var(--pi-color-text-lighter);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Font Variants
|
||||
三种可选字体
|
||||
============================================ */
|
||||
.font-source-han-sans {
|
||||
--pi-font-family: 'Source Han Sans', 'SourceHanSans-Normal', sans-serif;
|
||||
}
|
||||
|
||||
.font-alibaba-puhuiti {
|
||||
--pi-font-family: 'AlibabaPuHuiTi', sans-serif;
|
||||
}
|
||||
|
||||
.font-lxgw-wenkai {
|
||||
--pi-font-family: 'LXGWWenKai', cursive;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Article Images
|
||||
文章内图片样式
|
||||
============================================ */
|
||||
|
||||
/* 行内图片, 有边距 */
|
||||
.article-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: var(--pi-spacing) 0;
|
||||
}
|
||||
|
||||
/* 全宽图片, 无边距 */
|
||||
.article-image-full {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Number
|
||||
页码指示器
|
||||
============================================ */
|
||||
.page-number {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
font-size: var(--pi-font-size-small);
|
||||
color: var(--pi-color-text-lighter);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Template Namespaces
|
||||
三个模板命名空间, 基础结构样式
|
||||
后续Task 8-10会填充详细样式
|
||||
============================================ */
|
||||
|
||||
/* --- 简约文字卡片模板 --- */
|
||||
.tpl-minimal {
|
||||
/* 基础结构: 白底黑字, 大量留白, 现代简约风格 */
|
||||
}
|
||||
|
||||
/* 封面页 - 居中大标题 + 副标题 + 日期 */
|
||||
.tpl-minimal .page-cover .cover-title {
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-cover .cover-subtitle {
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-cover .cover-meta {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 内容页 - 页头区域 */
|
||||
.tpl-minimal .page-header {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-header .page-title {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 内容页 - 正文区域: 宽行高(2.0), 大段落间距, 首行缩进2em */
|
||||
.tpl-minimal .page-content {
|
||||
line-height: 2.0;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content p {
|
||||
text-indent: 2em;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content h2 {
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content h3 {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content blockquote {
|
||||
border-left: 1px solid #ccc;
|
||||
font-style: normal;
|
||||
color: #888;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content .article-image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-content .article-image-full {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 内容页 - 页脚区域: 小号版权 + 页码, 细线分隔 */
|
||||
.tpl-minimal .page-footer {
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
font-size: 11px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* 总结页/尾页 */
|
||||
.tpl-minimal .page-summary .summary-title {
|
||||
font-weight: normal;
|
||||
letter-spacing: 2px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-summary .summary-text {
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tpl-minimal .page-summary .summary-footer {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* --- 杂志模板 - 完整样式 --- */
|
||||
.tpl-magazine .page-cover {
|
||||
padding: 0;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: #1890ff;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-cover .cover-title {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 1px;
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-cover .cover-subtitle {
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-cover .cover-meta {
|
||||
position: relative;
|
||||
padding: 8px 12px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-header {
|
||||
border-bottom: 2px solid #1890ff;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-header .page-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content p {
|
||||
margin-bottom: 14px;
|
||||
text-indent: 2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content p:first-child {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content p:first-child::first-letter {
|
||||
font-size: 3.2em;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
line-height: 1;
|
||||
margin-right: 8px;
|
||||
margin-top: 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #1890ff;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content h3 {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content blockquote {
|
||||
border-left: 4px solid #1890ff;
|
||||
background: #f8f9fa;
|
||||
padding: 12px 15px;
|
||||
margin: 12px 0;
|
||||
font-style: normal;
|
||||
color: #555;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-content .article-image {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-footer {
|
||||
border-top: 2px solid #1890ff;
|
||||
padding-top: 8px;
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-summary {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-summary .summary-title {
|
||||
color: #1890ff;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-summary .summary-text {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tpl-magazine .page-summary .summary-footer {
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 15px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* --- 图文混排模板 - 完整样式 --- */
|
||||
.tpl-mixed {
|
||||
/* 基础结构: 图文混排 */
|
||||
}
|
||||
|
||||
/* 封面页: 图片背景 + 底部文字叠加 */
|
||||
.tpl-mixed .page-cover {
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover .cover-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover .cover-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 15px 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover .cover-subtitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #eee;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
padding: 8px 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover .cover-meta {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #ccc;
|
||||
padding: 5px 20px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 无封面图时的降级样式 */
|
||||
.tpl-mixed .page-cover.no-cover-image {
|
||||
justify-content: center;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover.no-cover-image .cover-title {
|
||||
text-align: center;
|
||||
background: none;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover.no-cover-image .cover-subtitle {
|
||||
text-align: center;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-cover.no-cover-image .cover-meta {
|
||||
text-align: center;
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* 内容页头部 */
|
||||
.tpl-mixed .page-header {
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-header .page-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 内容页正文 */
|
||||
.tpl-mixed .page-content {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content p {
|
||||
margin-bottom: 12px;
|
||||
text-indent: 2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content h2 {
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #f0f0f0;
|
||||
border-left: 4px solid #333;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 14px;
|
||||
margin-bottom: 6px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content blockquote {
|
||||
border-left: 3px solid #333;
|
||||
background: #f8f8f8;
|
||||
padding: 10px 15px;
|
||||
font-style: normal;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content .article-image {
|
||||
border-radius: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-content .article-image-full {
|
||||
margin: 0 -20px;
|
||||
max-width: none;
|
||||
width: 540px;
|
||||
}
|
||||
|
||||
/* 内容页底部 */
|
||||
.tpl-mixed .page-footer {
|
||||
border-top: 1px solid #333;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 总结页 */
|
||||
.tpl-mixed .page-summary {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-summary .summary-title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-summary .summary-text {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tpl-mixed .page-summary .summary-footer {
|
||||
color: #999;
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 15px;
|
||||
}
|
||||
736
public/static/js/phone-image.js
Normal file
736
public/static/js/phone-image.js
Normal file
@@ -0,0 +1,736 @@
|
||||
/**
|
||||
* PhoneImageEngine - 手机图片排版引擎
|
||||
*
|
||||
* 将文章HTML内容自动分页并渲染为手机尺寸图片
|
||||
* 依赖: jQuery, html2canvas (项目已有)
|
||||
*
|
||||
* 渲染宽度540px, html2canvas scale=2 输出1080px
|
||||
* 小红书: 540x720 (输出1080x1440)
|
||||
* 抖音: 540x960 (输出1080x1920)
|
||||
*/
|
||||
var PhoneImageEngine = (function () {
|
||||
|
||||
// ===== 配置 =====
|
||||
var config = {
|
||||
template: 'minimal',
|
||||
size: 'xiaohongshu',
|
||||
font: 'source-han-sans',
|
||||
fontSize: 14,
|
||||
watermark: '',
|
||||
// 尺寸映射 (渲染尺寸, 实际输出是2倍)
|
||||
sizes: {
|
||||
xiaohongshu: { width: 540, height: 720 },
|
||||
douyin: { width: 540, height: 960 }
|
||||
},
|
||||
// 字体映射
|
||||
fonts: {
|
||||
'source-han-sans': "'Source Han Sans', 'SourceHanSans-Normal', sans-serif",
|
||||
'alibaba-puhuiti': "'AlibabaPuHuiTi', sans-serif",
|
||||
'lxgw-wenkai': "'LXGWWenKai', cursive"
|
||||
},
|
||||
// 页面内容边距
|
||||
contentPadding: 20
|
||||
};
|
||||
|
||||
// ===== 文章数据 =====
|
||||
var postData = {
|
||||
id: 0,
|
||||
title: '',
|
||||
desc: '',
|
||||
content_html: '',
|
||||
poster: '',
|
||||
author_name: '',
|
||||
create_time: '',
|
||||
category_name: ''
|
||||
};
|
||||
|
||||
// ===== 分页结果 =====
|
||||
var pages = [];
|
||||
|
||||
// ===== DOM引用 =====
|
||||
var $container = null;
|
||||
|
||||
/**
|
||||
* 初始化引擎
|
||||
* @param {Object} options - {postId, title, desc, contentHtml, poster, authorName, createTime, categoryName}
|
||||
* @param {Object} userConfig - {template, size, font, fontSize, watermark}
|
||||
*/
|
||||
function init(options, userConfig) {
|
||||
postData.id = options.postId || 0;
|
||||
postData.title = options.title || '';
|
||||
postData.desc = options.desc || '';
|
||||
postData.content_html = options.contentHtml || '';
|
||||
postData.poster = options.poster || '';
|
||||
postData.author_name = options.authorName || '';
|
||||
postData.create_time = options.createTime || '';
|
||||
postData.category_name = options.categoryName || '';
|
||||
|
||||
if (userConfig) {
|
||||
$.extend(config, userConfig);
|
||||
}
|
||||
|
||||
$container = $('#phone-image-container');
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染排版预览 - 生成分页后的HTML
|
||||
* @returns {Array} 页面数组，每项是 { type, html, pageNum }
|
||||
*/
|
||||
function render() {
|
||||
pages = [];
|
||||
var sizeConfig = config.sizes[config.size] || config.sizes.xiaohongshu;
|
||||
var pageHeight = sizeConfig.height;
|
||||
var contentAreaHeight = pageHeight - (config.contentPadding * 2);
|
||||
|
||||
// 内容预处理
|
||||
var cleanHtml = preprocessContent(postData.content_html);
|
||||
|
||||
// 解析为块级元素
|
||||
var blocks = parseHtmlToBlocks(cleanHtml);
|
||||
|
||||
// 生成封面页
|
||||
pages.push(generateCoverPage(sizeConfig));
|
||||
|
||||
// 内容分页
|
||||
var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
|
||||
pages = pages.concat(contentPages);
|
||||
|
||||
// 生成尾页
|
||||
pages.push(generateSummaryPage(sizeConfig, pages.length));
|
||||
|
||||
// 渲染到DOM
|
||||
renderToDOM(sizeConfig);
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
/**
|
||||
* 预处理HTML内容
|
||||
*/
|
||||
function preprocessContent(html) {
|
||||
if (!html) return '';
|
||||
html = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
|
||||
html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
|
||||
// 清除空段落
|
||||
html = html.replace(/<p[^>]*>\s*<\/p>/gi, '');
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将HTML解析为块级元素数组
|
||||
* 每个块: { type, html, estimatedHeight }
|
||||
*/
|
||||
function parseHtmlToBlocks(html) {
|
||||
var blocks = [];
|
||||
if (!html) return blocks;
|
||||
|
||||
var $temp = $('<div>').html(html);
|
||||
var children = $temp.children();
|
||||
|
||||
if (children.length === 0) {
|
||||
// 纯文本内容，按段落分割
|
||||
var text = $temp.text().trim();
|
||||
if (text) {
|
||||
var paragraphs = text.split(/\n\s*\n|\n/);
|
||||
for (var i = 0; i < paragraphs.length; i++) {
|
||||
var p = paragraphs[i].trim();
|
||||
if (p) {
|
||||
blocks.push({
|
||||
type: 'p',
|
||||
html: '<p>' + p + '</p>',
|
||||
estimatedHeight: estimateTextHeight(p, config.fontSize)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return blocks;
|
||||
}
|
||||
|
||||
children.each(function () {
|
||||
var $el = $(this);
|
||||
var tagName = $el.prop('tagName').toLowerCase();
|
||||
var block = {
|
||||
type: tagName,
|
||||
html: $el[0].outerHTML
|
||||
};
|
||||
|
||||
switch (tagName) {
|
||||
case 'h1':
|
||||
case 'h2':
|
||||
case 'h3':
|
||||
case 'h4':
|
||||
case 'h5':
|
||||
case 'h6':
|
||||
block.estimatedHeight = estimateHeadingHeight(tagName, $el.text());
|
||||
break;
|
||||
case 'img':
|
||||
block.estimatedHeight = estimateImageHeight($el);
|
||||
block.$img = $el;
|
||||
break;
|
||||
case 'ul':
|
||||
case 'ol':
|
||||
block.estimatedHeight = estimateListHeight($el);
|
||||
break;
|
||||
case 'blockquote':
|
||||
block.estimatedHeight = estimateBlockquoteHeight($el);
|
||||
break;
|
||||
case 'p':
|
||||
default:
|
||||
block.type = 'p';
|
||||
block.estimatedHeight = estimateTextHeight($el.text(), config.fontSize);
|
||||
break;
|
||||
}
|
||||
|
||||
blocks.push(block);
|
||||
});
|
||||
|
||||
return blocks;
|
||||
}
|
||||
|
||||
// ===== 高度估算 =====
|
||||
|
||||
/**
|
||||
* 获取内容区可用宽度 (540 - 40px padding)
|
||||
*/
|
||||
function getContentWidth() {
|
||||
return 500;
|
||||
}
|
||||
|
||||
/**
|
||||
* 估算文本高度
|
||||
* @param {string} text
|
||||
* @param {number} fontSize
|
||||
* @returns {number} px
|
||||
*/
|
||||
function estimateTextHeight(text, fontSize) {
|
||||
var charCount = text.length;
|
||||
if (charCount === 0) return 0;
|
||||
var charsPerLine = Math.floor(getContentWidth() / (fontSize * 1.0));
|
||||
if (charsPerLine < 1) charsPerLine = 1;
|
||||
var lines = Math.ceil(charCount / charsPerLine);
|
||||
return lines * fontSize * 1.8 + 10; // 1.8行高 + 10px段落间距
|
||||
}
|
||||
|
||||
/**
|
||||
* 估算标题高度
|
||||
*/
|
||||
function estimateHeadingHeight(tag, text) {
|
||||
var sizeMap = { h1: 28, h2: 24, h3: 20, h4: 18, h5: 16, h6: 14 };
|
||||
var hSize = sizeMap[tag] || 20;
|
||||
var charsPerLine = Math.floor(getContentWidth() / (hSize * 1.0));
|
||||
if (charsPerLine < 1) charsPerLine = 1;
|
||||
var lines = Math.ceil(text.length / charsPerLine);
|
||||
return lines * hSize * 1.4 + 20; // heading行高1.4 + 20px上下间距
|
||||
}
|
||||
|
||||
/**
|
||||
* 估算图片高度
|
||||
* 默认按内容区宽度的60%估算
|
||||
*/
|
||||
function estimateImageHeight($img) {
|
||||
var w = parseInt($img.attr('width'), 10);
|
||||
var h = parseInt($img.attr('height'), 10);
|
||||
if (w > 0 && h > 0) {
|
||||
// 按比例缩放到内容宽度
|
||||
var ratio = getContentWidth() / w;
|
||||
return Math.round(h * ratio) + 10;
|
||||
}
|
||||
// 无尺寸信息时默认300px
|
||||
return 310;
|
||||
}
|
||||
|
||||
/**
|
||||
* 估算列表高度
|
||||
*/
|
||||
function estimateListHeight($list) {
|
||||
var items = $list.find('li').length;
|
||||
return items * (config.fontSize * 1.8 + 5) + 15;
|
||||
}
|
||||
|
||||
/**
|
||||
* 估算引用块高度
|
||||
*/
|
||||
function estimateBlockquoteHeight($bq) {
|
||||
var text = $bq.text();
|
||||
return estimateTextHeight(text, config.fontSize) + 10;
|
||||
}
|
||||
|
||||
// ===== 分页核心算法 =====
|
||||
|
||||
/**
|
||||
* 将块级元素按高度累加，超过可用高度时分页
|
||||
* 支持超大块拆分（超长文本拆成多段）
|
||||
*/
|
||||
function paginateContent(blocks, contentAreaHeight, sizeConfig) {
|
||||
var contentPages = [];
|
||||
var currentPageBlocks = [];
|
||||
var currentHeight = 0;
|
||||
var pageNumber = 1;
|
||||
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
var block = blocks[i];
|
||||
|
||||
// 超大块处理：单个块超过整页高度时需要拆分
|
||||
if (block.estimatedHeight > contentAreaHeight) {
|
||||
// 先把当前页已有的内容推出去
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
|
||||
// 尝试拆分超大块
|
||||
var splitBlocks = splitOversizedBlock(block, contentAreaHeight);
|
||||
for (var s = 0; s < splitBlocks.length; s++) {
|
||||
var sb = splitBlocks[s];
|
||||
if (currentHeight + sb.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
currentPageBlocks.push(sb);
|
||||
currentHeight += sb.estimatedHeight;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// 正常块：判断是否需要换页
|
||||
if (currentHeight + block.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, false
|
||||
));
|
||||
currentPageBlocks = [];
|
||||
currentHeight = 0;
|
||||
pageNumber++;
|
||||
}
|
||||
|
||||
currentPageBlocks.push(block);
|
||||
currentHeight += block.estimatedHeight;
|
||||
}
|
||||
|
||||
// 最后一页
|
||||
if (currentPageBlocks.length > 0) {
|
||||
contentPages.push(generateContentPage(
|
||||
currentPageBlocks, pageNumber, sizeConfig, true
|
||||
));
|
||||
}
|
||||
|
||||
return contentPages;
|
||||
}
|
||||
|
||||
/**
|
||||
* 拆分超大块（超长段落文本拆成多段）
|
||||
* @param {Object} block - 块级元素
|
||||
* @param {number} pageHeight - 可用内容高度
|
||||
* @returns {Array} 拆分后的块数组
|
||||
*/
|
||||
function splitOversizedBlock(block, pageHeight) {
|
||||
// 图片块不拆分，保留原样（会被截断但保持完整）
|
||||
if (block.type === 'img') {
|
||||
return [block];
|
||||
}
|
||||
|
||||
// 文本类块：按句子拆分
|
||||
var text = '';
|
||||
var wrapperTag = 'p';
|
||||
if (block.type === 'blockquote') {
|
||||
text = $(block.html).text();
|
||||
wrapperTag = 'blockquote';
|
||||
} else {
|
||||
text = $(block.html).text();
|
||||
}
|
||||
|
||||
if (!text || text.length === 0) {
|
||||
return [block];
|
||||
}
|
||||
|
||||
// 按句子拆分：句号、问号、叹号、换行
|
||||
var sentences = text.split(/(?<=[。！？\n])/);
|
||||
if (sentences.length <= 1) {
|
||||
// 无法按句子拆分，按固定字符数拆分
|
||||
sentences = [];
|
||||
var chunkSize = Math.floor(getContentWidth() / config.fontSize) *
|
||||
Math.floor(pageHeight / (config.fontSize * 1.8));
|
||||
if (chunkSize < 10) chunkSize = 10;
|
||||
for (var ci = 0; ci < text.length; ci += chunkSize) {
|
||||
sentences.push(text.substring(ci, ci + chunkSize));
|
||||
}
|
||||
}
|
||||
|
||||
var result = [];
|
||||
for (var j = 0; j < sentences.length; j++) {
|
||||
var s = sentences[j].trim();
|
||||
if (!s) continue;
|
||||
var h = estimateTextHeight(s, config.fontSize);
|
||||
result.push({
|
||||
type: wrapperTag === 'blockquote' ? 'blockquote' : 'p',
|
||||
html: '<' + wrapperTag + '>' + s + '</' + wrapperTag + '>',
|
||||
estimatedHeight: h
|
||||
});
|
||||
}
|
||||
|
||||
return result.length > 0 ? result : [block];
|
||||
}
|
||||
|
||||
// ===== 页面HTML生成 =====
|
||||
|
||||
/**
|
||||
* 生成封面页HTML
|
||||
*/
|
||||
function generateCoverPage(sizeConfig) {
|
||||
var html = '<div class="phone-image-page page-cover" style="width:' +
|
||||
sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
|
||||
|
||||
if (postData.poster) {
|
||||
html += '<img class="cover-image" src="' + postData.poster + '" alt="">';
|
||||
}
|
||||
|
||||
html += '<div class="cover-title">' + escapeHtml(postData.title) + '</div>';
|
||||
|
||||
if (postData.desc) {
|
||||
html += '<div class="cover-subtitle">' + escapeHtml(postData.desc) + '</div>';
|
||||
}
|
||||
|
||||
html += '<div class="cover-meta">';
|
||||
if (postData.category_name) {
|
||||
html += escapeHtml(postData.category_name) + ' | ';
|
||||
}
|
||||
if (postData.author_name) {
|
||||
html += escapeHtml(postData.author_name) + ' | ';
|
||||
}
|
||||
if (postData.create_time) {
|
||||
html += postData.create_time;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return { type: 'cover', html: html };
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成内容页HTML
|
||||
*/
|
||||
function generateContentPage(blocks, pageNum, sizeConfig, isLast) {
|
||||
var html = '<div class="phone-image-page page-body" style="width:' +
|
||||
sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
|
||||
|
||||
// 页头（仅首页内容页显示标题）
|
||||
if (pageNum === 1) {
|
||||
html += '<div class="page-header">';
|
||||
html += '<div class="page-title">' + escapeHtml(postData.title) + '</div>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// 正文内容区
|
||||
html += '<div class="page-content">';
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
html += blocks[i].html;
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// 页脚
|
||||
html += '<div class="page-footer">';
|
||||
html += '<span>' + escapeHtml(postData.author_name || '') + '</span>';
|
||||
html += '<span>' + pageNum + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
return { type: 'content', html: html, pageNum: pageNum };
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成尾页/总结页HTML
|
||||
*/
|
||||
function generateSummaryPage(sizeConfig, totalPages) {
|
||||
var html = '<div class="phone-image-page page-summary" style="width:' +
|
||||
sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
|
||||
html += '<div class="summary-title">感谢阅读</div>';
|
||||
html += '<div class="summary-text">' + escapeHtml(postData.title) + '</div>';
|
||||
|
||||
if (postData.desc) {
|
||||
html += '<div class="summary-text" style="font-size:12px;">' + escapeHtml(postData.desc) + '</div>';
|
||||
}
|
||||
|
||||
html += '<div class="summary-footer">';
|
||||
html += '共 ' + totalPages + ' 页';
|
||||
if (postData.author_name) {
|
||||
html += ' | ' + escapeHtml(postData.author_name);
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
return { type: 'summary', html: html };
|
||||
}
|
||||
|
||||
// ===== DOM渲染 =====
|
||||
|
||||
/**
|
||||
* 渲染分页结果到DOM
|
||||
*/
|
||||
function renderToDOM(sizeConfig) {
|
||||
if (!$container || !$container.length) return;
|
||||
|
||||
var containerClasses = [
|
||||
'phone-image-container',
|
||||
'tpl-' + config.template,
|
||||
'size-' + config.size,
|
||||
'font-' + config.font
|
||||
];
|
||||
|
||||
$container.attr('class', containerClasses.join(' '));
|
||||
$container.css({
|
||||
'font-family': config.fonts[config.font] || config.fonts['source-han-sans'],
|
||||
'font-size': config.fontSize + 'px'
|
||||
});
|
||||
|
||||
$container.empty();
|
||||
for (var i = 0; i < pages.length; i++) {
|
||||
$container.append(pages[i].html);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 图片生成 =====
|
||||
|
||||
/**
|
||||
* 逐页截图生成图片
|
||||
* @param {Function} [onProgress] 进度回调 function(currentIndex, totalPages, canvas)
|
||||
* @returns {Promise} jQuery Deferred, resolves with array of canvas objects
|
||||
*/
|
||||
function generateImages(onProgress) {
|
||||
var deferred = $.Deferred();
|
||||
var canvases = [];
|
||||
var $pages = $container.find('.phone-image-page');
|
||||
|
||||
if ($pages.length === 0) {
|
||||
deferred.reject('没有可渲染的页面');
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
var index = 0;
|
||||
var total = $pages.length;
|
||||
|
||||
function captureNext() {
|
||||
if (index >= total) {
|
||||
if (onProgress) onProgress(total, total, null);
|
||||
deferred.resolve(canvases);
|
||||
return;
|
||||
}
|
||||
|
||||
var $page = $($pages[index]);
|
||||
|
||||
html2canvas($page[0], {
|
||||
scale: 2,
|
||||
useCORS: true,
|
||||
backgroundColor: '#ffffff',
|
||||
width: $page.outerWidth(),
|
||||
height: $page.outerHeight(),
|
||||
logging: false
|
||||
}).then(function (canvas) {
|
||||
canvases.push(canvas);
|
||||
index++;
|
||||
if (onProgress) onProgress(index, total, canvas);
|
||||
captureNext();
|
||||
}).catch(function (err) {
|
||||
deferred.reject('截图失败(第' + (index + 1) + '页): ' + err);
|
||||
});
|
||||
}
|
||||
|
||||
if (onProgress) onProgress(0, total, null);
|
||||
captureNext();
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
/**
|
||||
* 将canvas转为base64并保存到服务端
|
||||
* @param {number} postId 文章ID
|
||||
* @param {Object} saveConfig 配置信息
|
||||
* @param {Function} [onProgress] 生成进度回调 function(current, total, canvas)
|
||||
* @returns {Promise} jQuery Deferred
|
||||
*/
|
||||
function saveImages(postId, saveConfig, onProgress) {
|
||||
var deferred = $.Deferred();
|
||||
|
||||
generateImages(onProgress).then(function (canvases) {
|
||||
var pagesData = [];
|
||||
for (var i = 0; i < canvases.length; i++) {
|
||||
pagesData.push(canvases[i].toDataURL('image/jpeg', 0.92));
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/index.php/admin/post/savePostOutput',
|
||||
type: 'POST',
|
||||
data: JSON.stringify({
|
||||
post_id: postId,
|
||||
output_type: 'phone_image',
|
||||
config: saveConfig || config,
|
||||
pages: pagesData
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
success: function (result) {
|
||||
if (result.code === 0) {
|
||||
deferred.resolve(result.data);
|
||||
} else {
|
||||
deferred.reject(result.msg || '保存失败');
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
deferred.reject('网络错误: ' + xhr.statusText);
|
||||
}
|
||||
});
|
||||
}).catch(function (err) {
|
||||
deferred.reject(err);
|
||||
});
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
|
||||
/**
|
||||
* 将生成的canvas数组显示为缩略图
|
||||
* @param {Array} canvases canvas对象数组
|
||||
* @param {string} containerSelector 容器选择器
|
||||
*/
|
||||
function showGeneratedThumbnails(canvases, containerSelector) {
|
||||
var $container = $(containerSelector);
|
||||
$container.empty();
|
||||
|
||||
for (var i = 0; i < canvases.length; i++) {
|
||||
var thumb = canvases[i].toDataURL('image/jpeg', 0.5);
|
||||
var $item = $('<div class="phone-thumb-item" data-index="' + i + '">' +
|
||||
'<img src="' + thumb + '" alt="第' + (i + 1) + '页">' +
|
||||
'<span class="phone-thumb-page">' + (i + 1) + '</span>' +
|
||||
'</div>');
|
||||
$container.append($item);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 配置切换 =====
|
||||
|
||||
/**
|
||||
* 切换模板
|
||||
*/
|
||||
function switchTemplate(name) {
|
||||
config.template = name;
|
||||
if ($container) {
|
||||
$container.removeClass('tpl-minimal tpl-magazine tpl-mixed').addClass('tpl-' + name);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换尺寸
|
||||
*/
|
||||
function switchSize(name) {
|
||||
config.size = name;
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换字体
|
||||
*/
|
||||
function switchFont(name) {
|
||||
config.font = name;
|
||||
if ($container) {
|
||||
$container.removeClass('font-source-han-sans font-alibaba-puhuiti font-lxgw-wenkai').addClass('font-' + name);
|
||||
$container.css('font-family', config.fonts[name] || config.fonts['source-han-sans']);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 工具方法 =====
|
||||
|
||||
/**
|
||||
* HTML转义
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(text));
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前配置
|
||||
*/
|
||||
function getConfig() {
|
||||
return $.extend({}, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取分页结果
|
||||
*/
|
||||
function getPages() {
|
||||
return pages.slice();
|
||||
}
|
||||
|
||||
// ===== AI 智能排版 =====
|
||||
|
||||
/**
|
||||
* 应用AI推荐配置
|
||||
*/
|
||||
function applyAiRecommendation(recommendation) {
|
||||
if (recommendation.template) {
|
||||
switchTemplate(recommendation.template);
|
||||
$('.template-btn').removeClass('active');
|
||||
$('.template-btn[data-template="' + recommendation.template + '"]').addClass('active');
|
||||
$('[name="size"]').val(config.size);
|
||||
}
|
||||
if (recommendation.font) {
|
||||
switchFont(recommendation.font);
|
||||
$('[name="font"]').val(recommendation.font);
|
||||
}
|
||||
if (recommendation.font_size) {
|
||||
config.fontSize = parseInt(recommendation.font_size);
|
||||
$('[name="fontSize"]').val(config.fontSize);
|
||||
$('#fontSizeValue').text(config.fontSize + 'px');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 应用AI优化内容（替换预览用的内容）
|
||||
*/
|
||||
var originalContentHtml = '';
|
||||
function applyAiContent(optimizedContent) {
|
||||
if (!originalContentHtml) {
|
||||
originalContentHtml = postData.content_html;
|
||||
}
|
||||
if (optimizedContent.optimized_paragraphs) {
|
||||
var newHtml = '';
|
||||
for (var i = 0; i < optimizedContent.optimized_paragraphs.length; i++) {
|
||||
newHtml += '<p>' + optimizedContent.optimized_paragraphs[i] + '</p>';
|
||||
}
|
||||
postData.content_html = newHtml;
|
||||
postData.title = optimizedContent.optimized_title || postData.title;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 恢复原始内容
|
||||
*/
|
||||
function restoreOriginalContent() {
|
||||
if (originalContentHtml) {
|
||||
postData.content_html = originalContentHtml;
|
||||
originalContentHtml = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 公开API =====
|
||||
return {
|
||||
init: init,
|
||||
render: render,
|
||||
paginate: render,
|
||||
generateImages: generateImages,
|
||||
saveImages: saveImages,
|
||||
showGeneratedThumbnails: showGeneratedThumbnails,
|
||||
switchTemplate: switchTemplate,
|
||||
switchSize: switchSize,
|
||||
switchFont: switchFont,
|
||||
getConfig: getConfig,
|
||||
getPages: getPages,
|
||||
applyAiRecommendation: applyAiRecommendation,
|
||||
applyAiContent: applyAiContent,
|
||||
restoreOriginalContent: restoreOriginalContent
|
||||
};
|
||||
})();
|
||||
BIN
source/font/AlibabaPuHuiTi-3-Bold.ttf
Normal file
BIN
source/font/AlibabaPuHuiTi-3-Bold.ttf
Normal file
Binary file not shown.
BIN
source/font/AlibabaPuHuiTi-3-Regular.ttf
Normal file
BIN
source/font/AlibabaPuHuiTi-3-Regular.ttf
Normal file
Binary file not shown.
BIN
source/font/LXGWWenKai-Regular.ttf
Normal file
BIN
source/font/LXGWWenKai-Regular.ttf
Normal file
Binary file not shown.
@@ -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>
|
||||
|
||||
@@ -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
426
view/admin/post/phone_image.html
Normal 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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
175
view/admin/post/post_output/index.html
Normal file
175
view/admin/post/post_output/index.html
Normal 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
264
view/admin/post_output/index.html
Normal 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
648
view/admin/system/ai.html
Normal 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>
|
||||
Reference in New Issue
Block a user