Services/shop-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

实现后台及前台通过API访问UV埋点，所有代码全部保存

Browse Source
This commit is contained in:
ZF Sun
2025-11-08 18:15:26 +08:00
parent 6bad32d9b1
commit e440631275
43 changed files with 5960 additions and 1105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/shop/controller/BaseShop.php
View File

@@ -123,12 +123,11 @@ class BaseShop extends Controller
$config_view = Config::get('view');
$config_view[ 'tpl_replace_string' ] = array_merge($config_view[ 'tpl_replace_string' ], $this->replace);
Config::set($config_view, 'view');
// 其他操作
if (!request()->isAjax()) {
$this->initBaseInfo();
$this->loadTemplate();
}
}
/**

46
src/app/shop/controller/Config.php
View File

@@ -188,6 +188,52 @@ class Config extends BaseShop
}
}
/**
* AI配置
*/
public function ai()
{
// 获取当前请求的 site_id
$site_id = $this->site_id;
$app_module = $this->app_module;
$config_model = new ConfigModel();
if (request()->isJson()) {
$type = input('type', '');
$data = input('config', []);
if ($type == 'save_platform_cfg') {
$data = json_decode($data, true);
$result_platform = $config_model->setAIPlatformConfig($data, $site_id, $app_module);
return $result_platform;
} else if ($type == 'save_aiagent_cfg') {
$data = json_decode($data, true);
$result_agent = $config_model->setAIAgentServicesConfig($data, $site_id, $app_module);
return $result_agent;
}
return '无法识别的操作类型: ' . $type;
} else {
$support_app_modules = $config_model->getSupportAppModules();
$support_ai_platform_types = $config_model->getSupportAIPlatformTypes();
$config_platform = $config_model->getAIPlatformConfig($site_id)[ 'data' ][ 'value' ];
$config_agent = $config_model->getAIAgentServicesConfig($site_id)[ 'data' ][ 'value' ];
$this->assign('support_app_modules', $support_app_modules);
$this->assign('support_ai_platform_types', $support_ai_platform_types);
$this->assign('platform_info', $config_platform);
$this->assign('agent_info', $config_agent);
// return json_encode([
// 'support_ai_platform_types' => $support_ai_platform_types,
// 'support_app_modules' => $support_app_modules,
// 'platform_info' => $config_platform,
// ]);
return $this->fetch('config/ai/index');
}
}
/**
* 客服配置
*/

1
src/app/shop/controller/Index.php
View File

@@ -35,7 +35,6 @@ class Index extends BaseShop
*/
public function index()
{
$this->assign('shop_status', 1);
$this->handlePromotion();

617
src/app/shop/view/config/ai.html
View File

@@ -1,617 +0,0 @@
<!-- 页面样式定义 -->
<style>
.layui-card {
margin: 20px 0;
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.layui-card-header {
background-color: #f2f2f2;
padding: 12px 20px;
font-weight: 500;
border-bottom: 1px solid #e6e6e6;
}
.layui-card-body {
padding: 20px;
}
.layui-form-item {
margin-bottom: 20px;
}
.layui-field-title {
margin-top: 25px;
margin-bottom: 20px;
}
.layui-field-title legend {
padding: 0 10px;
font-size: 16px;
font-weight: 500;
}
.word-aux {
color: #999;
font-size: 12px;
margin-top: 5px;
display: block;
}
.required {
color: #f00;
margin-right: 4px;
}
.form-wrap {
padding: 20px;
background: #fff;
min-height: calc(100vh - 40px);
}
.lang-tabs {
margin-bottom: 20px;
}
.lang-content {
display: none;
}
.lang-content.active {
display: block;
}
.layui-form-label {
padding: 9px 15px;
width: 110px;
}
.layui-input-block {
margin-left: 110px;
}
.all-shop-information {
width: 100%;
background: white;
padding: 15px;
box-sizing: border-box;
margin-top: 15px;
margin-bottom: 30px;
}
.all-shop-information .all-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.all-shop-information .all-top .title {
color: #333333;
margin-bottom: 0;
font-size: 17px;
padding-left: 10px;
border-left: 3px solid var(--base-color);
box-sizing: border-box;
}
select[name="selected_platform"] + .layui-form-select {
min-width: 400px;
max-width: fit-content;
}
/* 扁平化表格样式 */
.layui-table {
margin: 10px 0;
border-radius: 0;
box-shadow: none;
}
.layui-table th {
font-weight: 400;
background-color: #f5f7fa;
border-bottom: 1px solid #e6e8eb;
text-align: center;
}
.layui-table td {
vertical-align: top;
border-bottom: 1px solid #e6e8eb;
padding: 12px 15px;
}
.layui-table tbody tr:hover {
background-color: #f5f7fa;
}
/* 调整类型列宽度 */
.layui-table th:nth-child(2),
.layui-table td:nth-child(2) {
width: 120px;
}
/* 调整输入框样式 */
.layui-table-edit {
width: calc(100% - 4px);
border-radius: 2px;
border: 1px solid #dcdfe6;
transition: border-color 0.2s;
/* 确保输入框和选择框垂直居中对齐 */
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
margin: 4px;
margin-top: 12px;
height: 34px;
}
.layui-table-edit:focus {
border-color: #c0c4cc;
outline: none;
}
.layui-table td select.layui-select {
height: 30px;
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
}
/* 调整操作列宽度 */
.layui-table th:last-child,
.layui-table td:last-child {
width: 120px;
white-space: nowrap;
overflow: hidden;
}
/* 按钮图标样式 */
.btn-icon {
width: 28px;
height: 28px;
line-height: 28px;
padding: 0;
text-align: center;
margin: 0 2px;
font-size: 14px;
}
</style>
<div class="layui-form">
<!-- 根据功能分两个Tab进行配置，一个是AI智能客服，一个是AI平台 -->
<div class="layui-tab" lay-filter="mainTab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="ai_agent">AI智能客服</li>
<li lay-id="ai_platform">AI服务平台</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<!-- AI智能客服配置 -->
<div class="layui-form form-wrap card-common">
<!-- 基础设置 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>基础设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">启用状态</label>
<div class="layui-input-block">
<input type="checkbox" name="enable" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.enable" }checked{/if}>
</div>
</div>
<!-- 语言切换 -->
<div class="layui-form-item">
<div class="layui-tab lang-tabs" lay-filter="langTab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="zh_CN">简体中文</li>
<li lay-id="en">English</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form-item">
<label class="layui-form-label">AI客服姓名</label>
<div class="layui-input-block">
<input type="text" name="ai_name[zh_CN]" placeholder="请输入AI客服姓名"
class="layui-input" value="{$agent_info.ai_name.zh_CN|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">AI客服头像</label>
<div class="layui-input-block">
<input type="text" name="ai_avatar[zh_CN]" placeholder="请输入AI客服头像URL"
class="layui-input" value="{$agent_info.ai_avatar.zh_CN|default=''}">
<div class="word-aux">支持JPG、PNG、GIF格式，建议尺寸：100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户头像</label>
<div class="layui-input-block">
<input type="text" name="user_avatar[zh_CN]" placeholder="请输入用户头像URL"
class="layui-input" value="{$agent_info.user_avatar.zh_CN|default=''}">
<div class="word-aux">支持JPG、PNG、GIF格式，建议尺寸：100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">欢迎语</label>
<div class="layui-input-block">
<textarea name="welcome_messages[zh_CN]" placeholder="请输入欢迎语，每行一条"
class="layui-textarea" rows="4">{if isset($agent_info.welcome_messages.zh_CN)}{foreach $agent_info.welcome_messages.zh_CN as $msg}{$msg}
{/foreach}{else}您好，我是智能客服助手，有什么可以帮助您的吗？{/if}</textarea>
<!-- <div class="word-aux">每行一条欢迎语，系统会随机选择一条显示</div> -->
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-form-item">
<label class="layui-form-label">AI Name</label>
<div class="layui-input-block">
<input type="text" name="ai_name[en]" placeholder="Please enter AI name"
class="layui-input" value="{$agent_info.ai_name.en|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">AI Avatar</label>
<div class="layui-input-block">
<input type="text" name="ai_avatar[en]"
placeholder="Please enter AI avatar URL" class="layui-input"
value="{$agent_info.ai_avatar.en|default=''}">
<div class="word-aux">Support JPG, PNG, GIF formats, recommended size:
100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">User Avatar</label>
<div class="layui-input-block">
<input type="text" name="user_avatar[en]"
placeholder="Please enter user avatar URL" class="layui-input"
value="{$agent_info.user_avatar.en|default=''}">
<div class="word-aux">Support JPG, PNG, GIF formats, recommended size:
100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Welcome Messages</label>
<div class="layui-input-block">
<textarea name="welcome_messages[en]"
placeholder="Please enter welcome messages, one per line"
class="layui-textarea" rows="4">{if isset($agent_info.welcome_messages.en)}{foreach $agent_info.welcome_messages.en as $msg}{$msg}
{/foreach}{else}Hello, I'm the AI customer service assistant. How can I help you?{/if}</textarea>
<!-- <div class="word-aux">One welcome message per line, the system will randomly select one to display</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 显示设置 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>显示设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">显示加载更多按钮</label>
<div class="layui-input-block">
<input type="checkbox" name="show_load_more_button" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.show_load_more_button"
}checked{else}checked{/if}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">最大消息数量</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="max_messages" value="{$agent_info.max_messages|default='100'}"
class="layui-input" min="10" max="500">
</div>
<div class="layui-form-mid">条</div>
<div class="word-aux" style="margin-left: 110px;">建议设置在10-500条之间</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">启用流式响应</label>
<div class="layui-input-block">
<input type="checkbox" name="stream_mode" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.stream_mode" }checked{else}checked{/if}>
</div>
</div>
</div>
</div>
<div class="layui-tab-item" lay-id="ai_platform">
<!-- AI平台配置 -->
<div class="layui-form form-wrap card-common">
<!-- 平台选择 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>基本设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">默认平台</label>
<div class="layui-input-block">
<select name="selected_platform" lay-filter="platformSelect">
<option value="">请选择要默认使用的AI服务平台</option>
{if isset($enable_platform_list) && !empty($enable_platform_list)}
{foreach $enable_platform_list as $platform}
<option value="{$platform.id}">{$platform.name}</option>
{/foreach}
{/if}
</select>
</div>
</div>
<!-- 平台配置表格 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>AI服务平台配置</legend>
</fieldset>
<div class="layui-form-item">
<table class="layui-table" lay-even lay-skin="line">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>API URL</th>
<th>API Key</th>
<th>操作</th>
</tr>
</thead>
<tbody id="platformTable">
{if isset($platform_list) && !empty($platform_list)}
{foreach $platform_list as $platform}
<tr data-id="{$platform.id}">
<td>
<input type="text" name="platform_name[{$platform.id}]" value="{$platform.name}"
class="layui-input layui-table-edit" placeholder="请输入AI服务平台名称">
</td>
<td>
<select name="platform_type[{$platform.id}]" class="layui-select layui-table-edit">
{foreach $support_ai_platform_types as $item}
<option value="{$item.value}" {if $platform.type == $item.value}selected{/if}>{$item.label}</option>
{/foreach}
</select>
</td>
<td>
<input type="text" name="platform_api_url[{$platform.id}]" value="{$platform.api_url}"
class="layui-input layui-table-edit" placeholder="请输入API URL">
</td>
<td>
<input type="text" name="platform_api_key[{$platform.id}]" value="{$platform.api_key}"
class="layui-input layui-table-edit" placeholder="请输入API Key">
</td>
<td class="layui-row">
<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs layui-btn-danger btn-icon delete-platform" data-id="{$platform.id}" title="删除">
<i class="layui-icon layui-icon-delete"></i>
</button>
<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs layui-btn-warm btn-icon toggle-platform" data-id="{$platform.id}" data-status="{if $platform.enable === 1}1{else}0{/if}" title="{if $platform.enable === 1}禁用{else}开启{/if}">
{if $platform.enable === 1}<i class="layui-icon layui-icon-radio"></i>{else}<i class="layui-icon layui-icon-circle"></i>{/if}
</button>
<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs btn-icon save-platform" data-id="{$platform.id}" title="保存">
<i class="layui-icon layui-icon-ok"></i>
</button>
</td>
</tr>
{/foreach}
{else}
<tr>
<td colspan="5" style="text-align: center;">暂无平台配置</td>
</tr>
{/if}
</tbody>
</table>
</div>
<!-- 添加新平台 -->
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<button class="layui-btn" id="addPlatform">添加平台</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页面脚本 -->
<script>
layui.use(['form', 'layer', 'element'], function () {
var form = layui.form;
var layer = layui.layer;
var element = layui.element;
// 初始化表单
form.render();
// layui 2.5.5版本需要手动初始化Tab组件
element.render('tab');
// 主Tab切换处理
element.on('tab(mainTab)', function (data) { });
// 语言切换 - 使用layui原生的Tab切换，不再需要自定义逻辑
element.on('tab(langTab)', function (data) { });
// 平台选择下拉框处理
form.on('select(platformSelect)', function(data) {
var platformId = data.value;
if (platformId) {
// 可以在这里添加根据平台ID高亮显示对应表格行的逻辑
$('#platformTable tr').removeClass('layui-bg-blue');
$('#platformTable tr[data-id="' + platformId + '"]').addClass('layui-bg-blue');
}
});
// 保存平台配置
$(document).on('click', '.save-platform', function() {
var platformId = $(this).data('id');
var name = $('input[name="platform_name[' + platformId + ']"]').val();
var type = $('select[name="platform_type[' + platformId + ']"]').val();
var apiUrl = $('input[name="platform_api_url[' + platformId + ']"]').val();
var apiKey = $('input[name="platform_api_key[' + platformId + ']"]').val();
if (!name) {
layer.msg('平台名称不能为空', {icon: 2});
return;
}
if (!type) {
layer.msg('请选择平台类型', {icon: 2});
return;
}
if (!apiUrl) {
layer.msg('API URL不能为空', {icon: 2});
return;
}
if (!apiKey) {
layer.msg('API Key不能为空', {icon: 2});
return;
}
// 这里应该是AJAX请求保存数据
// 模拟保存成功并获取新的平台ID
var newPlatformId = platformId.startsWith('temp_') ? 'new_' + new Date().getTime() : platformId;
// 更新行的data-id属性
$('#platformTable tr[data-id="' + platformId + '"]').attr('data-id', newPlatformId);
// 更新表单元素的name属性中的ID
$('#platformTable tr[data-id="' + newPlatformId + '"] input, #platformTable tr[data-id="' + newPlatformId + '"] select').each(function() {
var oldName = $(this).attr('name');
var newName = oldName.replace(platformId, newPlatformId);
$(this).attr('name', newName);
});
// 更新按钮的data-id属性
$('#platformTable tr[data-id="' + newPlatformId + '"] button').data('id', newPlatformId);
// 更新默认平台下拉框
var select = $('select[name="selected_platform"]');
// 检查是否已存在相同ID的选项
if (select.find('option[value="' + newPlatformId + '"]').length === 0) {
select.append('<option value="' + newPlatformId + '">' + name + '</option>');
form.render('select'); // 重新渲染select
}
// 显示保存成功提示
layer.msg('保存成功', {icon: 1});
});
// 删除平台
$(document).on('click', '.delete-platform', function() {
var platformId = $(this).data('id');
layer.confirm('确定要删除这个平台配置吗？', {
btn: ['确定', '取消']
}, function(index) {
// 删除行
$('#platformTable tr[data-id="' + platformId + '"]').remove();
// 从下拉框中移除对应的选项
$('select[name="selected_platform"] option[value="' + platformId + '"]').remove();
form.render('select');
// 检查表格是否为空，如果为空则显示提示
if ($('#platformTable tr').length === 0) {
$('#platformTable').append('<tr><td colspan="5" style="text-align: center;">暂无平台配置</td></tr>');
}
layer.close(index);
layer.msg('删除成功', {icon: 1});
});
});
// 禁用/开启平台
$(document).on('click', '.toggle-platform', function() {
var platformId = $(this).data('id');
var status = $(this).data('status');
var newStatus = status === 1 ? 0 : 1;
// 更新按钮状态
$(this).data('status', newStatus);
$(this).html(newStatus === 1 ? '<i class="layui-icon layui-icon-radio"></i>' : '<i class="layui-icon layui-icon-circle"></i>');
$(this).attr('title', newStatus === 1 ? '开启' : '禁用');
// 如果平台被禁用，从默认平台下拉框中移除
if (newStatus === 0) {
var option = $('select[name="selected_platform"] option[value="' + platformId + '"]');
if (option.length > 0) {
option.detach().data('disabled', true); // 保存选项但不显示
form.render('select');
}
}
// 如果平台被启用，将选项添加回下拉框
else {
var savedOption = $('select[name="selected_platform"] option[data-disabled="true"][value="' + platformId + '"]');
if (savedOption.length === 0) {
// 如果没有保存的选项，获取平台名称并创建新选项
var platformName = $('#platformTable tr[data-id="' + platformId + '"] input[name^="platform_name"]').val();
if (platformName) {
$('select[name="selected_platform"]').append('<option value="' + platformId + '">' + platformName + '</option>');
form.render('select');
}
} else {
savedOption.removeData('disabled').appendTo('select[name="selected_platform"]');
form.render('select');
}
}
layer.msg(newStatus === 1 ? '已开启' : '已禁用', {icon: 1});
});
// 添加新平台
$('#addPlatform').on('click', function() {
// 生成一个临时ID
var tempId = 'temp_' + new Date().getTime();
// 创建新行HTML
var newRow = '<tr data-id="' + tempId + '">' +
'<td>' +
'<input type="text" name="platform_name[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入AI服务平台名称">' +
'</td>' +
'<td>' +
'<select name="platform_type[' + tempId + ']" class="layui-select layui-table-edit">' +
'{foreach $support_ai_platform_types as $type}' +
'<option value="{$type.value}">{$type.label}</option>' +
'{/foreach}' +
'</select>' +
'</td>' +
'<td>' +
'<input type="text" name="platform_api_url[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入API URL">' +
'</td>' +
'<td>' +
'<input type="text" name="platform_api_key[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入API Key">' +
'</td>' +
'<td class="layui-row">' +
'<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs btn-icon delete-platform" data-id="' + tempId + '" title="删除">' +
'<i class="layui-icon layui-icon-delete"></i>' +
'</button>' +
'<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs btn-icon toggle-platform" data-id="' + tempId + '" data-status="0" title="开启">'+
'<i class="layui-icon layui-icon-circle"></i>' +
'</button>' +
'<button class="layui-col-xs4 layui-col-sm12 layui-col-md4 layui-btn layui-btn-xs btn-icon save-platform" data-id="' + tempId + '" title="保存">' +
'<i class="layui-icon layui-icon-ok"></i>' +
'</button>' +
'</td>' +
'</tr>'
// 检查是否有暂无平台配置的提示行
var emptyRow = $('#platformTable tr:has(td[colspan="5"])');
if (emptyRow.length > 0) {
emptyRow.replaceWith(newRow);
} else {
$('#platformTable').append(newRow);
}
// 重新渲染表单元素
form.render();
// 聚焦到新添加的行的第一个输入框
$('input[name="platform_name[' + tempId + ']"]').focus();
});
});
</script>

141
src/app/shop/view/config/ai/agent.html Normal file
View File

@@ -0,0 +1,141 @@
<div class="layui-tab-item layui-show">
<!-- AI智能客服配置 -->
<div class="layui-form form-wrap card-common">
<!-- 基础设置 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>基础设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">启用状态</label>
<div class="layui-input-block">
<input type="checkbox" name="enable" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.enable" }checked{/if}>
</div>
</div>
<!-- 语言切换 -->
<div class="layui-form-item">
<div class="layui-tab lang-tabs" lay-filter="langTab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="zh_CN">简体中文</li>
<li lay-id="en">English</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-form-item">
<label class="layui-form-label">AI客服姓名</label>
<div class="layui-input-block">
<input type="text" name="ai_name[zh_CN]" placeholder="请输入AI客服姓名" class="layui-input"
value="{$agent_info.ai_name.zh_CN|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">AI客服头像</label>
<div class="layui-input-block">
<input type="text" name="ai_avatar[zh_CN]" placeholder="请输入AI客服头像URL"
class="layui-input" value="{$agent_info.ai_avatar.zh_CN|default=''}">
<div class="word-aux">支持JPG、PNG、GIF格式，建议尺寸：100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户头像</label>
<div class="layui-input-block">
<input type="text" name="user_avatar[zh_CN]" placeholder="请输入用户头像URL"
class="layui-input" value="{$agent_info.user_avatar.zh_CN|default=''}">
<div class="word-aux">支持JPG、PNG、GIF格式，建议尺寸：100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">欢迎语</label>
<div class="layui-input-block">
<textarea name="welcome_messages[zh_CN]" placeholder="请输入欢迎语，每行一条"
class="layui-textarea" rows="4">{if isset($agent_info.welcome_messages.zh_CN)}{foreach $agent_info.welcome_messages.zh_CN as $msg}{$msg}
{/foreach}{else}您好，我是智能客服助手，有什么可以帮助您的吗？{/if}</textarea>
<!-- <div class="word-aux">每行一条欢迎语，系统会随机选择一条显示</div> -->
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-form-item">
<label class="layui-form-label">AI Name</label>
<div class="layui-input-block">
<input type="text" name="ai_name[en]" placeholder="Please enter AI name"
class="layui-input" value="{$agent_info.ai_name.en|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">AI Avatar</label>
<div class="layui-input-block">
<input type="text" name="ai_avatar[en]" placeholder="Please enter AI avatar URL"
class="layui-input" value="{$agent_info.ai_avatar.en|default=''}">
<div class="word-aux">Support JPG, PNG, GIF formats, recommended size:
100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">User Avatar</label>
<div class="layui-input-block">
<input type="text" name="user_avatar[en]" placeholder="Please enter user avatar URL"
class="layui-input" value="{$agent_info.user_avatar.en|default=''}">
<div class="word-aux">Support JPG, PNG, GIF formats, recommended size:
100x100px</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Welcome Messages</label>
<div class="layui-input-block">
<textarea name="welcome_messages[en]"
placeholder="Please enter welcome messages, one per line" class="layui-textarea"
rows="4">{if isset($agent_info.welcome_messages.en)}{foreach $agent_info.welcome_messages.en as $msg}{$msg}
{/foreach}{else}Hello, I'm the AI customer service assistant. How can I help you?{/if}</textarea>
<!-- <div class="word-aux">One welcome message per line, the system will randomly select one to display</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 显示设置 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>显示设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">显示加载更多按钮</label>
<div class="layui-input-block">
<input type="checkbox" name="show_load_more_button" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.show_load_more_button" }checked{else}checked{/if}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">最大消息数量</label>
<div class="layui-input-inline" style="width: 100px; margin-left: 50px;">
<input type="number" name="max_messages" value="{$agent_info.max_messages|default=100}"
class="layui-input" min="10" max="500">
</div>
<div class="layui-form-mid">条</div>
<div class="word-aux" style="margin-left: 110px;">建议设置在10-500条之间</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">启用流式响应</label>
<div class="layui-input-block">
<input type="checkbox" name="stream_mode" lay-skin="switch" lay-text="开启|关闭" {if
condition="isset($agent_info) && $agent_info.stream_mode" }checked{else}checked{/if}>
</div>
</div>
<!-- 独立的保存按钮 -->
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="save_aiagent_cfg">保存</button>
</div>
</div>
</div>

209
src/app/shop/view/config/ai/index.html Normal file
View File

@@ -0,0 +1,209 @@
<!-- 页面样式定义 -->
<style>
.text-center {
text-align: center;
}
.layui-card {
margin: 20px 0;
border-radius: 4px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.layui-card-header {
background-color: #f2f2f2;
padding: 12px 20px;
font-weight: 500;
border-bottom: 1px solid #e6e6e6;
}
.layui-card-body {
padding: 20px;
}
.layui-form-item {
margin-bottom: 20px;
}
.layui-field-title {
margin-top: 25px;
margin-bottom: 20px;
}
.layui-field-title legend {
padding: 0 10px;
font-size: 16px;
font-weight: 500;
}
.word-aux {
color: #999;
font-size: 12px;
margin-top: 5px;
display: block;
}
.required {
color: #f00;
margin-right: 4px;
}
.form-wrap {
padding: 20px;
background: #fff;
min-height: calc(100vh - 40px);
}
.lang-tabs {
margin-bottom: 20px;
}
.lang-content {
display: none;
}
.lang-content.active {
display: block;
}
.layui-form-label {
padding: 9px 15px;
width: 150px;
}
.layui-input-block {
margin-left: 150px;
}
.all-shop-information {
width: 100%;
background: white;
padding: 15px;
box-sizing: border-box;
margin-top: 15px;
margin-bottom: 30px;
}
.all-shop-information .all-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.all-shop-information .all-top .title {
color: #333333;
margin-bottom: 0;
font-size: 17px;
padding-left: 10px;
border-left: 3px solid var(--base-color);
box-sizing: border-box;
}
select[name="selected_platform"] + .layui-form-select {
min-width: 400px;
max-width: fit-content;
}
/* 扁平化表格样式 */
.layui-table {
margin: 10px 0;
border-radius: 0;
box-shadow: none;
}
.layui-table th {
font-weight: 400;
background-color: #f5f7fa;
border-bottom: 1px solid #e6e8eb;
text-align: center;
}
.layui-table td {
vertical-align: top;
border-bottom: 1px solid #e6e8eb;
padding: 12px 15px;
}
.layui-table tbody tr:hover {
background-color: #f5f7fa;
}
/* 调整类型列宽度 */
.layui-table th:nth-child(2),
.layui-table td:nth-child(2) {
width: 120px;
}
/* 调整输入框样式 */
.layui-table-edit {
width: calc(100% - 4px);
border-radius: 2px;
border: 1px solid #dcdfe6;
transition: border-color 0.2s;
/* 确保输入框和选择框垂直居中对齐 */
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
margin: 4px;
margin-top: 12px;
height: 34px;
}
.layui-table-edit:focus {
border-color: #c0c4cc;
outline: none;
}
.layui-table td select.layui-select {
height: 30px;
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
}
/* 调整操作列宽度 */
.layui-table th:last-child,
.layui-table td:last-child {
width: 120px;
white-space: nowrap;
overflow: hidden;
}
/* 按钮图标样式 */
.btn-icon {
width: 28px;
height: 28px;
line-height: 28px;
padding: 0;
text-align: center;
margin: 0 2px;
font-size: 14px;
}
</style>
<div class="layui-form">
<!-- 根据功能分两个Tab进行配置，一个是AI智能客服，一个是AI平台 -->
<div class="layui-tab" lay-filter="mainTab">
<ul class="layui-tab-title">
<li class="layui-this" lay-id="ai_agent">AI智能客服</li>
<li lay-id="ai_platform">AI服务平台</li>
</ul>
<div class="layui-tab-content">
<!-- AI服务平台配置，必须使用绝对路径 -->
{include file="app/shop/view/config/ai/platform.html" /}
</div>
</div>
</div>
<!-- 页面脚本 -->
<script>
// layui 2.5.5 版本
layui.use(['form', 'layer', 'element'], function () {
var form = layui.form;
var layer = layui.layer;
var element = layui.element;
// 初始化表单
form.render();
// layui 2.5.5版本需要手动初始化Tab组件
element.render('tab');
// 主Tab切换处理
element.on('tab(mainTab)', function (data) { });
// 语言切换 - 使用layui原生的Tab切换，不再需要自定义逻辑
element.on('tab(langTab)', function (data) { });
});
</script>

397
src/app/shop/view/config/ai/js/platform.js Normal file
View File

@@ -0,0 +1,397 @@
// 平台选择下拉框处理
form.on('select(platformSelect)', function (data) {
var platformId = data.value;
if (platformId) {
// 可以在这里添加根据平台ID高亮显示对应表格行的逻辑
$('#platformTable tr').removeClass('layui-bg-blue');
$('#platformTable tr[data-id="' + platformId + '"]').addClass('layui-bg-blue');
}
});
// 应用模块选择下拉框处理
form.on('select(appModuleSelect)', function (data) {
var appModule = data.value;
loadPlatformConfigByAppModule(appModule);
});
// 存储平台配置的初始状态，用于检测数据变更
function storeInitialData() {
$('#platformTable tr[data-id]').each(function () {
var platformId = $(this).data('id');
var initialData = {
name: $('input[name="platform_name[' + platformId + ']"]').val(),
type: $('select[name="platform_type[' + platformId + ']"]').val(),
base_url: $('input[name="platform_base_url[' + platformId + ']"]').val(),
api_key: $('input[name="platform_api_key[' + platformId + ']"]').val(),
desc: $('input[name="platform_desc[' + platformId + ']"]').val()
};
// 使用data属性存储初始数据
$(this).data('initial-data', initialData);
});
}
// 检查平台数据是否有变更
function hasDataChanged(platformId) {
var row = $('#platformTable tr[data-id="' + platformId + '"]');
var initialData = row.data('initial-data');
// 对于新添加的平台（没有初始数据），认为有变更
if (!initialData) {
return true;
}
var currentData = {
name: $('input[name="platform_name[' + platformId + ']"]').val(),
type: $('select[name="platform_type[' + platformId + ']"]').val(),
base_url: $('input[name="platform_base_url[' + platformId + ']"]').val(),
api_key: $('input[name="platform_api_key[' + platformId + ']"]').val(),
desc: $('input[name="platform_desc[' + platformId + ']"]').val()
};
// 比较初始数据和当前数据
for (var key in initialData) {
if (initialData[key] !== currentData[key]) {
return true;
}
}
return false;
}
// 更新保存按钮图标
function updateSaveButtonIcon(platformId) {
var saveButton = $('#platformTable tr[data-id="' + platformId + '"] .save-platform');
var hasChanged = hasDataChanged(platformId);
if (hasChanged) {
saveButton.find('i').removeClass('layui-icon-ok').addClass('layui-icon-edit');
} else {
saveButton.find('i').removeClass('layui-icon-edit').addClass('layui-icon-ok');
}
}
// 监听输入框变化
$(document).on('input propertychange', '#platformTable input.layui-table-edit', function () {
var platformId = $(this).closest('tr').data('id');
updateSaveButtonIcon(platformId);
});
// 监听选择框变化
$(document).on('change', '#platformTable select.layui-table-edit', function () {
var platformId = $(this).closest('tr').data('id');
updateSaveButtonIcon(platformId);
});
// 初始化时存储初始数据
storeInitialData();
function genNewPlatformId() {
return 'temp_' + new Date().getTime() + Math.random().toString(36).substring(2);
}
// 保存平台配置
$(document).on('click', '.save-platform', function () {
var platformId = $(this).data('id');
var name = $('input[name="platform_name[' + platformId + ']"]').val();
var type = $('select[name="platform_type[' + platformId + ']"]').val();
var apiUrl = $('input[name="platform_base_url[' + platformId + ']"]').val();
var apiKey = $('input[name="platform_api_key[' + platformId + ']"]').val();
if (!name) {
layer.msg('平台名称不能为空', { icon: 2 });
return;
}
if (!type) {
layer.msg('请选择平台类型', { icon: 2 });
return;
}
if (!apiUrl) {
layer.msg('API URL不能为空', { icon: 2 });
return;
}
if (!apiKey) {
layer.msg('API Key不能为空', { icon: 2 });
return;
}
// 建立临时的平台ID
var newPlatformId = String(platformId).startsWith('temp_') ? genNewPlatformId() : platformId;
// 更新行的data-id属性
$('#platformTable tr[data-id="' + platformId + '"]').attr('data-id', newPlatformId);
// 更新表单元素的name属性中的ID
$('#platformTable tr[data-id="' + newPlatformId + '"] input, #platformTable tr[data-id="' + newPlatformId + '"] select').each(function () {
var oldName = $(this).attr('name');
if (oldName) { // 确保oldName存在才调用replace方法
var newName = oldName.replace(platformId, newPlatformId);
$(this).attr('name', newName);
}
});
// 更新按钮的data-id属性
$('#platformTable tr[data-id="' + newPlatformId + '"] button').data('id', newPlatformId);
// 更新默认平台下拉框
var select = $('select[name="selected_platform"]');
// 检查是否已存在相同ID的选项
if (select.find('option[value="' + newPlatformId + '"]').length === 0) {
select.append('<option value="' + newPlatformId + '">' + name + '</option>');
form.render('select'); // 重新渲染select
}
// 保存成功后，更新初始数据并将图标改回layui-icon-ok
var newRow = $('#platformTable tr[data-id="' + newPlatformId + '"]');
var updatedData = {
name: name,
type: type,
base_url: apiUrl,
api_key: apiKey,
desc: $('input[name="platform_desc[' + newPlatformId + ']"]').val()
};
newRow.data('initial-data', updatedData);
// 更新保存按钮图标为layui-icon-ok
newRow.find('.save-platform i').removeClass('layui-icon-edit').addClass('layui-icon-ok');
// 显示保存成功提示
layer.msg('保存成功', { icon: 1 });
});
// 删除平台
$(document).on('click', '.delete-platform', function () {
var platformId = $(this).data('id');
layer.confirm('确定要删除这个平台配置吗？', {
btn: ['确定', '取消']
}, function (index) {
// 删除行
$('#platformTable tr[data-id="' + platformId + '"]').remove();
// 从下拉框中移除对应的选项
$('select[name="selected_platform"] option[value="' + platformId + '"]').remove();
form.render('select');
// 检查表格是否为空，如果为空则显示提示
if ($('#platformTable tr').length === 0) {
$('#platformTable').append('<tr><td colspan="5" style="text-align: center;">暂无平台配置</td></tr>');
}
layer.close(index);
});
});
// 禁用/开启平台
$(document).on('click', '.toggle-platform', function () {
var platformId = $(this).data('id');
var status = $(this).data('status');
var newStatus = status === 1 ? 0 : 1;
// 更新按钮状态
$(this).data('status', newStatus);
$(this).html(newStatus === 1 ? '<i class="layui-icon layui-icon-radio"></i>' : '<i class="layui-icon layui-icon-circle"></i>');
$(this).attr('title', newStatus === 1 ? '开启' : '禁用');
// 如果平台被禁用，从默认平台下拉框中移除
if (newStatus === 0) {
var option = $('select[name="selected_platform"] option[value="' + platformId + '"]');
if (option.length > 0) {
option.detach().data('disabled', true); // 保存选项但不显示
form.render('select');
}
}
// 如果平台被启用，将选项添加回下拉框
else {
var savedOption = $('select[name="selected_platform"] option[data-disabled="true"][value="' + platformId + '"]');
if (savedOption.length === 0) {
// 如果没有保存的选项，获取平台名称并创建新选项
var platformName = $('#platformTable tr[data-id="' + platformId + '"] input[name^="platform_name"]').val();
if (platformName) {
$('select[name="selected_platform"]').append('<option value="' + platformId + '">' + platformName + '</option>');
form.render('select');
}
} else {
savedOption.removeData('disabled').appendTo('select[name="selected_platform"]');
form.render('select');
}
}
layer.msg(newStatus === 1 ? '已设置为开启，保存后生效' : '已设置为禁用，保存后生效', { icon: 1 });
});
// 添加新平台
$('#addPlatform').on('click', function () {
// 生成一个临时ID
var tempId = genNewPlatformId();
// 创建新行HTML
var newRow = '<tr data-id="' + tempId + '">' +
'<td>' +
'<input type="text" name="platform_name[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入AI服务平台名称">' +
'</td>' +
'<td>' +
'<select name="platform_type[' + tempId + ']" class="layui-select layui-table-edit">' +
'{foreach $support_ai_platform_types as $type}' +
'<option value="{$type.value}">{$type.label}</option>' +
'{/foreach}' +
'</select>' +
'</td>' +
'<td>' +
'<input type="text" name="platform_base_url[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入API URL">' +
'</td>' +
'<td>' +
'<input type="text" name="platform_api_key[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入API Key">' +
'</td>' +
'<td>' +
'<input type="text" name="platform_desc[' + tempId + ']" ' +
'class="layui-input layui-table-edit" placeholder="请输入描述">' +
'</td>' +
'<td class="layui-row">' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs btn-icon delete-platform" data-id="' + tempId + '" title="删除">' +
'<i class="layui-icon layui-icon-delete"></i>' +
'</button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs btn-icon toggle-platform" data-id="' + tempId + '" data-status="0" title="开启">' +
'<i class="layui-icon layui-icon-circle"></i>' +
'</button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs btn-icon save-platform" data-id="' + tempId + '" title="保存">' +
'<i class="layui-icon layui-icon-ok"></i>' +
'</button>' +
'</td>' +
'</tr>';
// 获取表格body
var tbody = $('#platformTableBody');
// 检查是否有暂无平台配置的提示行
var emptyRow = tbody.find('tr:has(td[colspan="5"])');
if (emptyRow.length > 0) {
emptyRow.replaceWith(newRow);
} else {
tbody.append(newRow);
}
// 重新渲染表单元素
form.render();
// 为新添加的行设置初始数据为null，确保图标显示为编辑状态
tbody.find('tr[data-id="' + tempId + '"]').data('initial-data', null);
// 新添加的行默认显示编辑图标
tbody.find('tr[data-id="' + tempId + '"] .save-platform i').removeClass('layui-icon-ok').addClass('layui-icon-edit');
// 聚焦到新添加的行的第一个输入框
tbody.find('input[name="platform_name[' + tempId + ']"]').focus();
});
// 保存平台配置
form.on('submit(save_platform_cfg)', function (data) {
// 验证表单数据
if (!form.verify()) {
return false;
}
// 验证是否选择了默认平台
if (!data.field['selected_platform']) {
layer.msg('请选择默认AI智能客服平台', { icon: 2 });
return false;
}
// 处理新增的平台配置
var cfg = {};
var platforms = [];
$('#platformTableBody tr[data-id]').each(function () {
var id = $(this).data('id');
var platform = {
'id': id,
'name': $(this).find('input[name^="platform_name"]').val(),
'type': $(this).find('select[name^="platform_type"]').val(),
'type_label': $(this).find('select[name^="platform_type"]').find('option:selected').text(),
'enable': parseInt($(this).find('button.toggle-platform').data('status') || 0),
'desc': $(this).find('input[name^="platform_desc"]').val(),
'base_url': $(this).find('input[name^="platform_base_url"]').val(),
'api_key': $(this).find('input[name^="platform_api_key"]').val(),
};
platforms.push(platform);
});
cfg = {
'default': {
'id': data.field['selected_platform'] || (platforms[0] ? platforms[0].id : ''),
'name': data.field['selected_platform_name'] || (platforms[0] ? platforms[0].name : ''),
},
'list': platforms,
};
$.ajax({
url: ns.url("shop/config/ai"),
data: {
config: JSON.stringify(cfg),
type: 'save_platform_cfg',
app_module: data.field['app_module']
},
dataType: 'JSON',
type: 'POST',
success: function (res) {
if (res.code == 0) {
layer.msg('保存成功', { icon: 1 });
// 重新加载当前应用模块的配置，确保数据同步
loadPlatformConfigByAppModule(data.field['app_module']);
layer.closeAll();
} else {
layer.msg('保存失败：' + res.message, { icon: 2 });
}
}
});
});
// 保存AI智能客服平台配置
form.on('submit(save_aiagent_cfg)', function (data) {
// 验证表单数据
if (!form.verify()) {
return false;
}
console.log('data.field =', data.field);
var cfg = {};
// 处理关于AI智能客服配置，将ai_avater[en], ai_avater[zh] 合并到 ai_avater 字段
['ai_avater', 'ai_name', 'user_avater', 'welcome_messages'].forEach(function (field) {
cfg[field] = {
'en': data.field[field + '[en]'],
'zh_CN': data.field[field + '[zh_CN]'],
};
});
['show_load_more_button', 'stream_mode'].forEach(function (field) {
cfg[field] = data.field[field] === 'on';
});
['max_messages'].forEach(function (field) {
cfg[field] = data.field[field] || 0;
});
$.ajax({
url: ns.url("shop/config/ai"),
data: {
config: JSON.stringify(cfg),
type: 'save_aiagent_cfg',
},
dataType: 'JSON',
type: 'POST',
success: function (res) {
if (res.code == 0) {
layer.msg('保存成功', { icon: 1 });
listenerHash(); // 刷新页面
layer.closeAll();
} else {
layer.msg('保存失败：' + res.message, { icon: 2 });
}
}
});
});

465
src/app/shop/view/config/ai/platform.html Normal file
View File

@@ -0,0 +1,465 @@
<div class="layui-tab-item" lay-id="ai_platform">
<!-- AI平台配置 -->
<div class="layui-form form-wrap card-common">
<!-- 应用模块选择 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>应用模块选择</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">应用模块</label>
<div class="layui-input-block">
<select name="app_module" class="layui-select" lay-filter="appModuleSelect">
<option value="">请选择应用模块</option>
{foreach $support_app_modules as $item}
<option value="{$item.value}">{$item.label}</option>
{/foreach}
</select>
</div>
</div>
<!-- 平台选择 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>基本设置</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">默认平台</label>
<div class="layui-input-block">
<select name="selected_platform" lay-filter="platformSelect" id="selectedPlatformSelect">
<option value="">请选择要默认使用的AI服务平台</option>
</select>
</div>
</div>
<!-- 平台配置表格 -->
<fieldset class="layui-elem-field layui-field-title">
<legend>AI服务平台配置</legend>
</fieldset>
<div class="layui-form-item">
<table class="layui-table" lay-even lay-skin="line">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>Base URL</th>
<th>API Key</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="platformTableBody">
<tr>
<td colspan="6" style="text-align: center;">请选择应用模块</td>
</tr>
</tbody>
</table>
</div>
<!-- 添加新平台 -->
<div class="layui-form-item text-center">
<button class="layui-btn" id="addPlatform">添加平台</button>
</div>
<!-- 保存按钮 -->
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="save_platform_cfg">保存</button>
</div>
</div>
</div>
<script>
/**
* 从PHP获得的应用参数说明
* $support_ai_platform_types 支持的AI平台类型
* $support_app_modules 支持的应用模块
* $platform_info 平台的配置信息，包含各应用模块的平台配置
**/
// 存储PHP传递过来的平台配置数据
var support_ai_platform_types = <? php echo json_encode($support_ai_platform_types ?? []); ?>;
var support_app_modules = <? php echo json_encode($support_app_modules ?? []); ?>;
var platform_info = <? php echo json_encode($platform_info ?? []); ?>;
console.log('platform_info', platform_info);
// 创建深度代理对象
var proxy_platform_info = new PerformanceDeepProxy(platform_info, {});
console.log('proxy_platform_info', proxy_platform_info);
// 当前选中的应用模块
var currentAppModule = '';
// 临时编辑状态标识
var editingPlatformId = null;
// 验证平台数据
function validatePlatformData(platformData, isEdit, existingId) {
// 检查名称是否重复
if (!platformData.name || platformData.name.trim() === '') {
return '名称不能为空';
}
var moduleInfo = proxy_platform_info[currentAppModule];
var platformList = moduleInfo.list || [];
var nameExists = platformList.some(function (p) {
return p.name === platformData.name && (!isEdit || p.id.toString() !== existingId.toString());
});
if (nameExists) {
return '名称已存在';
}
// 检查类型是否选择
if (!platformData.type) {
return '类型必须选择';
}
// 检查Base URL是否为空
if (!platformData.base_url || platformData.base_url.trim() === '') {
return 'Base URL不能为空';
}
// 检查API Key是否为空
if (!platformData.api_key || platformData.api_key.trim() === '') {
return 'API Key不能为空';
}
return null; // 验证通过
}
// 初始化layui
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
// 监听应用模块选择变化
form.on('select(appModuleSelect)', function (data) {
currentAppModule = data.value;
editingPlatformId = null; // 重置编辑状态
updatePlatformSettings();
});
// 生成平台类型选择框HTML
function generatePlatformTypeSelect(selectedValue) {
var selectHtml = '<select class="layui-select">';
selectHtml += '<option value="">请选择类型</option>';
support_ai_platform_types.forEach(function (type) {
var selected = selectedValue === type.value ? ' selected' : '';
selectHtml += '<option value="' + type.value + '"' + selected + '>' + type.label + '</option>';
});
selectHtml += '</select>';
return selectHtml;
}
// 获取平台类型标签
function getPlatformTypeLabel(typeValue) {
var type = support_ai_platform_types.find(function (t) { return t.value === typeValue; });
return type ? type.label : typeValue;
}
// 更新平台设置（默认平台下拉框和平台配置表格）
function updatePlatformSettings() {
var platformSelect = document.getElementById('selectedPlatformSelect');
var tableBody = document.getElementById('platformTableBody');
// 清空默认平台下拉框
platformSelect.innerHTML = '<option value="">请选择要默认使用的AI服务平台</option>';
// 如果没有选择应用模块，显示提示信息
if (!currentAppModule || !proxy_platform_info[currentAppModule]) {
tableBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">请选择应用模块</td></tr>';
form.render('select'); // 重新渲染表单
return;
}
// 获取当前应用模块的平台信息
var moduleInfo = proxy_platform_info[currentAppModule];
var platformList = moduleInfo.list || [];
var defaultPlatformId = moduleInfo.default && moduleInfo.default.id ? moduleInfo.default.id.toString() : '';
// 更新默认平台下拉框
platformList.forEach(function (platform) {
var option = document.createElement('option');
option.value = platform.id;
option.textContent = platform.name;
if (platform.id.toString() === defaultPlatformId) {
option.selected = true;
}
platformSelect.appendChild(option);
});
// 更新平台配置表格
if (platformList.length === 0) {
tableBody.innerHTML = '<tr><td colspan="6" style="text-align: center;">当前应用模块暂无平台配置</td></tr>';
} else {
var tableHtml = '';
platformList.forEach(function (platform) {
// API Key 脱敏显示
var displayApiKey = platform.api_key ? platform.api_key.substring(0, 4) + '****' + platform.api_key.substring(platform.api_key.length - 4) : '';
// 构建操作按钮
var actionButtons = '';
if (editingPlatformId === platform.id) {
// 编辑状态下显示保存和取消按钮
actionButtons =
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs layui-btn-danger btn-icon delete-platform" data-id="' + platform.id + '"><i class="layui-icon layui-icon-delete"></i></button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs layui-btn-primary btn-icon cancel-edit-platform" onclick="cancelEditPlatform(' + platform.id + ')">取消</button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs btn-icon save-platform" onclick="saveEditPlatform(' + platform.id + ')">保存</button>';
} else {
// 普通状态下显示编辑、删除和启用/禁用按钮
var toggleIcon = platform.enable ? 'layui-icon-radio' : 'layui-icon-circle';
var toggleText = platform.enable ? '启用' : '禁用';
var toggleStatus = platform.enable ? '0' : '1';
actionButtons =
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs layui-btn-danger btn-icon delete-platform" data-id="' + platform.id + '"><i class="layui-icon layui-icon-delete"></i></button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs layui-btn-warm btn-icon toggle-platform" data-id="' + platform.id + '" data-status="' + toggleStatus + '" title="' + toggleText + '">' + '<i class="layui-icon ' + toggleIcon + '"></i>' + '</button>' +
'<button class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn layui-btn-xs btn-icon save-platform" data-id="' + platform.id + '"><i class="layui-icon layui-icon-ok"></i></button>';
}
tableHtml += '<tr data-id="' + platform.id + '">' +
'<td>' + (editingPlatformId === platform.id ? '<input type="text" class="layui-input" value="' + platform.name + '" />' : platform.name) + '</td>' +
'<td>' + (editingPlatformId === platform.id ? generatePlatformTypeSelect(platform.type) : platform.type_label) + '</td>' +
'<td>' + (editingPlatformId === platform.id ? '<input type="text" class="layui-input" value="' + platform.base_url + '" />' : platform.base_url) + '</td>' +
'<td>' + (editingPlatformId === platform.id ? '<input type="text" class="layui-input" value="' + platform.api_key + '" />' : displayApiKey) + '</td>' +
'<td>' + (editingPlatformId === platform.id ? '<input type="text" class="layui-input" value="' + (platform.desc || '') + '" />' : (platform.desc || '')) + '</td>' +
'<td class="layui-row">' + actionButtons + '</td>' +
'</tr>';
});
tableBody.innerHTML = tableHtml;
// 如果当前有编辑的行，重新渲染表单以初始化select组件
if (editingPlatformId) {
form.render('select');
}
}
// 重新渲染表单
form.render('select');
}
// 切换平台启用状态
$('.toggle-platform').on('click', function () {
var id = $(this).data('id');
var status = $(this).data('status');
if (!currentAppModule || !proxy_platform_info[currentAppModule]) return;
// 查找平台
var platformList = proxy_platform_info[currentAppModule].list;
var platform = platformList.find(function (p) { return p.id === id; });
if (platform) {
// 切换启用状态
platform.enable = platform.enable ? 0 : 1;
// 同步更新 platform_info 中的数据
var platformList = proxy_platform_info[currentAppModule].list;
var idx = platformList.findIndex(function (p) { return p.id === id; });
if (idx !== -1) {
platformList[idx].enable = platform.enable;
}
updatePlatformSettings();
layui.layer.msg(platform.enable ? '已启用' : '已关闭');
}
});
// 编辑平台
// 添加平台按钮点击事件
document.getElementById('addPlatform').onclick = function () {
if (!currentAppModule) {
layer.msg('请先选择应用模块');
return;
}
// 确保platform_info中存在当前应用模块的数据
if (!proxy_platform_info[currentAppModule]) {
proxy_platform_info[currentAppModule] = {
default: null,
list: []
};
}
// 生成新的平台ID（使用时间戳）
var newId = Date.now();
// 创建新的平台对象
var newPlatform = {
id: newId,
name: '',
type: '',
type_label: '',
base_url: '',
api_key: '',
desc: '',
enable: 1
};
// 添加到平台列表
proxy_platform_info[currentAppModule].list.push(newPlatform);
// 设置为编辑状态
editingPlatformId = newId;
// 更新表格显示
updatePlatformSettings();
// 滚动到新添加的行
setTimeout(function () {
var newRow = document.querySelector('tr[data-id="' + newId + '"]');
if (newRow) {
newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
// 聚焦到第一个输入框
var firstInput = newRow.querySelector('input');
if (firstInput) firstInput.focus();
}
}, 100);
};
// 保存按钮点击事件（占位，需要根据实际需求实现）
form.on('submit(save_platform_cfg)', function (data) {
if (!currentAppModule) {
layer.msg('请先选择应用模块');
return false;
}
// 检查是否有正在编辑的行
if (editingPlatformId) {
layer.msg('请先完成当前行的编辑操作');
return false;
}
// 添加应用模块信息到提交数据中
data.field.app_module = currentAppModule;
data.field.platform_data = proxy_platform_info[currentAppModule];
// 这里应该发送保存请求，暂时用alert显示要保存的数据
layer.msg('保存功能待实现');
console.log('要保存的数据：', data.field);
return false;
});
});
// 编辑平台
function editPlatform(id) {
if (!currentAppModule || !proxy_platform_info[currentAppModule]) return;
// 查找要编辑的平台
var platformList = proxy_platform_info[currentAppModule].list;
var platform = platformList.find(function (p) { return p.id === id; });
if (platform) {
editingPlatformId = id;
updatePlatformSettings();
// 滚动到编辑行并聚焦
setTimeout(function () {
var editRow = document.querySelector('tr[data-id="' + id + '"]');
if (editRow) {
editRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
var firstInput = editRow.querySelector('input');
if (firstInput) firstInput.focus();
}
}, 100);
}
}
// 取消编辑
function cancelEditPlatform(id) {
if (!currentAppModule || !proxy_platform_info[currentAppModule]) return;
// 如果是新增的行且未保存，则从列表中移除
var platformList = proxy_platform_info[currentAppModule].list;
var platformIndex = platformList.findIndex(function (p) { return p.id === id; });
if (platformIndex !== -1 && !platformList[platformIndex].name) {
// 如果是未填写任何内容的新行，直接删除
platformList.splice(platformIndex, 1);
}
editingPlatformId = null;
updatePlatformSettings();
}
// 保存编辑
function saveEditPlatform(id) {
if (!currentAppModule || !proxy_platform_info[currentAppModule]) return;
var rowElement = document.querySelector('tr[data-id="' + id + '"]');
if (!rowElement) return;
// 获取表单数据
var inputs = rowElement.querySelectorAll('input');
var selects = rowElement.querySelectorAll('select');
var platformData = {
name: inputs[0] ? inputs[0].value.trim() : '',
type: selects[0] ? selects[0].value : '',
base_url: inputs[1] ? inputs[1].value.trim() : '',
api_key: inputs[2] ? inputs[2].value.trim() : '',
desc: inputs[3] ? inputs[3].value.trim() : ''
};
// 验证数据
var validationError = validatePlatformData(platformData, true, id);
if (validationError) {
layui.layer.msg(validationError);
return;
}
// 查找要更新的平台
var platformList = proxy_platform_info[currentAppModule].list;
var platformIndex = platformList.findIndex(function (p) { return p.id === id; });
if (platformIndex !== -1) {
// 更新平台数据
platformList[platformIndex].name = platformData.name;
platformList[platformIndex].type = platformData.type;
platformList[platformIndex].type_label = getPlatformTypeLabel(platformData.type);
platformList[platformIndex].base_url = platformData.base_url;
platformList[platformIndex].api_key = platformData.api_key;
platformList[platformIndex].desc = platformData.desc;
}
editingPlatformId = null;
updatePlatformSettings();
layui.layer.msg('保存成功');
}
// 删除平台
function deletePlatform(id) {
layui.layer.confirm('确定要删除这个平台吗？', function (index) {
if (!currentAppModule || !proxy_platform_info[currentAppModule]) {
layui.layer.close(index);
return;
}
// 查找并删除平台
var platformList = proxy_platform_info[currentAppModule].list;
var platformIndex = platformList.findIndex(function (p) { return p.id === id; });
if (platformIndex !== -1) {
platformList.splice(platformIndex, 1);
// 如果删除的是默认平台，清除默认设置
if (proxy_platform_info[currentAppModule].default &&
proxy_platform_info[currentAppModule].default.id.toString() === id.toString()) {
proxy_platform_info[currentAppModule].default = null;
}
updatePlatformSettings();
layui.layer.msg('删除成功');
}
layui.layer.close(index);
});
}
// 获取平台类型标签
function getPlatformTypeLabel(typeValue) {
var type = support_ai_platform_types.find(function (t) { return t.value === typeValue; });
return type ? type.label : typeValue;
}
</script>

1
src/app/shop/view/layout/base.html
View File

@@ -22,6 +22,7 @@
<link rel="stylesheet" type="text/css" href="SHOP_CSS/style2/common.css?v={$version}" />
<script src="__STATIC__/js/jquery-3.1.1.js"></script>
<script src="__STATIC__/js/jquery.cookie.js"></script>
<script src="__STATIC__/js/deep-proxy-1.0.js?t={$version}5"></script>
<script src="__STATIC__/ext/layui/layui.js"></script>
<script>
layui.use(['layer', 'upload', 'element'], function() {});