314 lines
12 KiB
HTML
314 lines
12 KiB
HTML
<title>机器人头像配置</title>
|
|
|
|
<div class="layui-card layadmin-header">
|
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
|
<a lay-href="">主页</a>
|
|
<a><cite>游戏管理</cite></a>
|
|
<a><cite>机器人头像配置</cite></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-fluid">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<table id="table-bot" lay-filter="table-bot"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 头像预览列模板 -->
|
|
<script type="text/html" id="tpl-avatar">
|
|
{{# if(d.avatar){ }}
|
|
<img src="{{d.avatar}}" style="width:40px;height:40px;border-radius:50%;object-fit:cover;vertical-align:middle;" onerror="this.src='../../../images/face/0.png'">
|
|
{{# } else { }}
|
|
<span style="color:#aaa;">无</span>
|
|
{{# } }}
|
|
</script>
|
|
|
|
<script type="text/html" id="toolbar-bot">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn layui-btn-sm" lay-filter="add-bot"><i class="layui-icon layui-icon-add-1"></i> 添加机器人</button>
|
|
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-filter="reload-bot"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/html" id="bot-bar">
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
</script>
|
|
|
|
<!-- 添加/编辑弹窗内嵌表单（隐藏，动态使用） -->
|
|
<div id="bot-form-tpl" style="display:none;">
|
|
<div style="padding:24px 20px 10px;">
|
|
<form class="layui-form" id="bot-edit-form">
|
|
<input type="hidden" name="id" id="bot-id">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">昵称 <span style="color:red">*</span></label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="name" id="bot-name" class="layui-input" placeholder="请输入机器人昵称" lay-verify="required">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">头像</label>
|
|
<div class="layui-input-block">
|
|
<div style="display:flex;align-items:center;gap:12px;">
|
|
<!-- 预览框 -->
|
|
<div id="avatar-preview-wrap" style="width:64px;height:64px;border:1px dashed #ccc;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f8f8f8;flex-shrink:0;">
|
|
<img id="avatar-preview" src="" style="width:100%;height:100%;object-fit:cover;display:none;" onerror="this.style.display='none';document.getElementById('avatar-placeholder').style.display='flex';">
|
|
<span id="avatar-placeholder" style="font-size:12px;color:#aaa;text-align:center;display:flex;">点击上传</span>
|
|
</div>
|
|
<!-- 上传按钮 -->
|
|
<div>
|
|
<button type="button" class="layui-btn layui-btn-sm" id="btn-upload-avatar">
|
|
<i class="layui-icon layui-icon-upload"></i> 上传图片
|
|
</button>
|
|
<input type="file" id="avatar-file-input" accept="image/*" style="display:none;">
|
|
<div style="margin-top:6px;font-size:12px;color:#999;">支持 jpg/png/gif，建议正方形，≤2MB</div>
|
|
</div>
|
|
</div>
|
|
<!-- URL 输入框（上传后自动填充，也可手动填写） -->
|
|
<input type="text" name="avatar" id="bot-avatar" class="layui-input" placeholder="头像URL（上传后自动填充，或直接粘贴URL）" style="margin-top:10px;">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['admin', 'table', 'form', 'layer', 'upload'], function () {
|
|
var $ = layui.$,
|
|
admin = layui.admin,
|
|
table = layui.table,
|
|
form = layui.form,
|
|
layer = layui.layer,
|
|
upload = layui.upload,
|
|
setter = layui.setter;
|
|
|
|
setTimeout(function() {
|
|
if (window.parent && window.parent.$ && window.parent.layer) {
|
|
window.parent.$('.layui-layer-shade').remove();
|
|
window.parent.layer.closeAll();
|
|
}
|
|
$('.layui-layer-shade').remove();
|
|
layer.closeAll();
|
|
}, 100);
|
|
|
|
function loadData() {
|
|
admin.req({
|
|
method: "get",
|
|
url: setter.baseurl + "adminapi/BotConfig/GetAll",
|
|
done: function (res) {
|
|
if (res.code === 0) {
|
|
table.reload('table-bot', { data: res.data || [] });
|
|
} else {
|
|
layer.msg(res.info || '加载失败');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
table.render({
|
|
elem: '#table-bot',
|
|
url: setter.baseurl + 'adminapi/BotConfig/GetAll',
|
|
method: 'get',
|
|
page: false,
|
|
cols: [[
|
|
{ type: 'numbers', title: '序号', width: 60 },
|
|
{ field: "avatar", title: "头像", width: 80, templet: '#tpl-avatar', align: 'center' },
|
|
{ field: "name", title: "昵称", minWidth: 200 },
|
|
{ field: "avatar", title: "头像URL", minWidth: 280 },
|
|
{ title: "操作", width: 150, fixed: 'right', toolbar: '#bot-bar' }
|
|
]],
|
|
toolbar: '#toolbar-bot',
|
|
defaultToolbar: ['filter', 'exports', 'print']
|
|
});
|
|
|
|
$(document).on('click', '[lay-filter="add-bot"]', function () {
|
|
showEditDialog(null, true);
|
|
});
|
|
|
|
$(document).on('click', '[lay-filter="reload-bot"]', function () {
|
|
loadData();
|
|
layer.msg('刷新成功');
|
|
});
|
|
|
|
table.on('tool(table-bot)', function (obj) {
|
|
if (obj.event === 'del') {
|
|
layer.confirm('确定删除「' + obj.data.name + '」吗？', function (idx) {
|
|
admin.req({
|
|
method: "post",
|
|
url: setter.baseurl + "adminapi/BotConfig/Delete?id=" + encodeURIComponent(obj.data.id || obj.data.Id || ''),
|
|
done: function (res) {
|
|
if (res.code === 0) {
|
|
obj.del();
|
|
layer.msg('删除成功');
|
|
} else {
|
|
layer.msg(res.info || '删除失败');
|
|
}
|
|
}
|
|
});
|
|
layer.close(idx);
|
|
});
|
|
} else if (obj.event === 'edit') {
|
|
showEditDialog(obj.data, false);
|
|
}
|
|
});
|
|
|
|
// =========== 上传逻辑 ===========
|
|
var currentLayer = null; // 当前弹窗 DOM 引用
|
|
|
|
// 判断是否后台相对路径，自动补全当前域名
|
|
function fixUrl(path) {
|
|
if (!path) return '';
|
|
// 已是完整URL直接返回
|
|
if (/^https?:\/\//i.test(path)) return path;
|
|
// 相对路径补全域名
|
|
if (path.indexOf('/') === 0) {
|
|
return window.location.origin + path;
|
|
}
|
|
return path;
|
|
}
|
|
|
|
function initUpload(layero) {
|
|
currentLayer = layero;
|
|
|
|
// 点击上传按钮触发文件选择
|
|
layero.find('#btn-upload-avatar').off('click').on('click', function () {
|
|
$('#avatar-file-input').val('').trigger('click');
|
|
});
|
|
|
|
// 文件选择后立即上传
|
|
$('#avatar-file-input').off('change').on('change', function () {
|
|
var file = this.files[0];
|
|
if (!file) return;
|
|
|
|
// 大小校验 2MB
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
layer.msg('图片大小不能超过 2MB');
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// 显示上传中状态
|
|
var loadIdx = layer.load(2, { shade: [0.3, '#fff'] });
|
|
|
|
$.ajax({
|
|
url: setter.baseurl + 'adminapi/ImageUpload/upload/temp',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
headers: {
|
|
'Authorization': 'Bearer ' + (setter.token || layui.data(setter.tableName || 'layuiAdmin')[setter.tokenName || 'token'] || '')
|
|
},
|
|
success: function (res) {
|
|
layer.close(loadIdx);
|
|
if (res.code === 0 && res.data && res.data.path) {
|
|
// 后台返回相对路径，自动拼接当前域名
|
|
var url = fixUrl(res.data.path);
|
|
// 填充弹窗内 URL 输入框
|
|
currentLayer.find('#bot-avatar').val(url);
|
|
// 更新弹窗内预览
|
|
setAvatarPreview(url);
|
|
layer.msg('上传成功');
|
|
} else {
|
|
layer.msg(res.info || res.msg || '上传失败');
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.close(loadIdx);
|
|
layer.msg('上传请求失败，请稍后重试');
|
|
}
|
|
});
|
|
});
|
|
|
|
// URL 输入框变化时同步预览
|
|
layero.find('#bot-avatar').off('input').on('input', function () {
|
|
setAvatarPreview($(this).val().trim());
|
|
});
|
|
}
|
|
|
|
function setAvatarPreview(url) {
|
|
if (!currentLayer) return;
|
|
if (url) {
|
|
currentLayer.find('#avatar-preview').attr('src', url).show();
|
|
currentLayer.find('#avatar-placeholder').hide();
|
|
} else {
|
|
currentLayer.find('#avatar-preview').attr('src', '').hide();
|
|
currentLayer.find('#avatar-placeholder').show();
|
|
}
|
|
}
|
|
|
|
// =========== 弹窗 ===========
|
|
function showEditDialog(data, isAdd) {
|
|
var title = isAdd ? '添加机器人' : '编辑机器人';
|
|
var formHtml = $('#bot-form-tpl').html();
|
|
|
|
layer.open({
|
|
type: 1,
|
|
title: title,
|
|
area: ['520px', '380px'],
|
|
content: formHtml,
|
|
btn: ['保存', '取消'],
|
|
shadeClose: true,
|
|
success: function (layero) {
|
|
form.render();
|
|
|
|
// 回填数据
|
|
if (data) {
|
|
layero.find('#bot-id').val(data.id || '');
|
|
layero.find('#bot-name').val(data.name || '');
|
|
layero.find('#bot-avatar').val(data.avatar || '');
|
|
setAvatarPreview(data.avatar || '');
|
|
} else {
|
|
layero.find('#bot-id').val('');
|
|
layero.find('#bot-name').val('');
|
|
layero.find('#bot-avatar').val('');
|
|
setAvatarPreview('');
|
|
}
|
|
|
|
// 初始化上传事件（传入弹窗DOM引用）
|
|
initUpload(layero);
|
|
},
|
|
yes: function (idx, layero) {
|
|
var name = layero.find('#bot-name').val().trim();
|
|
var avatar = layero.find('#bot-avatar').val().trim();
|
|
var id = layero.find('#bot-id').val();
|
|
|
|
if (!name) {
|
|
layer.msg('昵称不能为空');
|
|
return;
|
|
}
|
|
|
|
var url, sendData;
|
|
if (isAdd) {
|
|
url = setter.baseurl + 'adminapi/BotConfig/Add';
|
|
sendData = { name: name, avatar: avatar };
|
|
} else {
|
|
url = setter.baseurl + 'adminapi/BotConfig/Update';
|
|
sendData = { id: id, name: name, avatar: avatar };
|
|
}
|
|
|
|
admin.req({
|
|
method: "post",
|
|
contentType: "application/json;charset=UTF-8",
|
|
url: url,
|
|
data: JSON.stringify(sendData),
|
|
done: function (res) {
|
|
if (res.code === 0) {
|
|
layer.close(idx);
|
|
layer.msg(isAdd ? '添加成功' : '更新成功');
|
|
loadData();
|
|
} else {
|
|
layer.msg(res.info || '操作失败');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|