Files
augushong 34fe255829 feat(phone-image): 增加翻页预览与无封面图排版样式
- 为手机截图生成器添加翻页功能,支持在生成前预览各页内容
- 增加无封面图时的排版样式,使用装饰线条和居中布局
- 改进图片处理逻辑,清除内联样式并展平嵌套包装元素
- 修复 models.dev 同步接口,支持 GET 请求获取缓存数据
- 优化网络请求,添加直连失败后的本地代理重试机制
2026-05-01 16:31:26 +08:00

649 lines
23 KiB
HTML

<!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>