298 lines
10 KiB
JavaScript
298 lines
10 KiB
JavaScript
// 页面加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化机器人表单
|
|
initRobotForm();
|
|
|
|
// 加载机器人列表
|
|
loadRobots();
|
|
|
|
// 初始化编辑和删除功能
|
|
initEditRobotModal();
|
|
initDeleteRobotModal();
|
|
});
|
|
|
|
// 初始化机器人表单
|
|
function initRobotForm() {
|
|
const form = document.getElementById('robotForm');
|
|
const avatarInput = document.getElementById('robotAvatar');
|
|
const avatarPreview = document.getElementById('avatarPreview');
|
|
const avatarPreviewContainer = document.querySelector('#robotForm .avatar-preview');
|
|
|
|
// 头像预览
|
|
avatarInput.addEventListener('change', function() {
|
|
if (this.files && this.files[0]) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
avatarPreview.src = e.target.result;
|
|
avatarPreviewContainer.classList.remove('d-none');
|
|
};
|
|
|
|
reader.readAsDataURL(this.files[0]);
|
|
} else {
|
|
avatarPreviewContainer.classList.add('d-none');
|
|
}
|
|
});
|
|
|
|
// 表单提交
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
// 显示提交中状态
|
|
const submitButton = form.querySelector('button[type="submit"]');
|
|
const originalButtonText = submitButton.innerHTML;
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 添加中...';
|
|
|
|
try {
|
|
const response = await fetch('/imgsearcherApi/api/robots', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert(`添加失败: ${data.error}`);
|
|
return;
|
|
}
|
|
|
|
// 重置表单
|
|
form.reset();
|
|
avatarPreviewContainer.classList.add('d-none');
|
|
|
|
// 刷新机器人列表
|
|
loadRobots();
|
|
|
|
// 显示成功消息
|
|
alert('机器人角色添加成功！');
|
|
|
|
} catch (error) {
|
|
alert(`添加失败: ${error.message}`);
|
|
} finally {
|
|
// 恢复按钮状态
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonText;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 加载机器人列表
|
|
async function loadRobots() {
|
|
const robotsList = document.getElementById('robotsList');
|
|
const loadingIndicator = document.getElementById('loadingIndicator');
|
|
const noRobotsMessage = document.getElementById('noRobotsMessage');
|
|
|
|
// 显示加载指示器
|
|
loadingIndicator.classList.remove('d-none');
|
|
noRobotsMessage.classList.add('d-none');
|
|
|
|
// 清除现有的机器人卡片（保留标题和加载指示器）
|
|
const existingCards = robotsList.querySelectorAll('.robot-card-container');
|
|
existingCards.forEach(card => card.remove());
|
|
|
|
try {
|
|
const response = await fetch('/imgsearcherApi/api/robots');
|
|
const data = await response.json();
|
|
|
|
// 隐藏加载指示器
|
|
loadingIndicator.classList.add('d-none');
|
|
|
|
if (!data.robots || data.robots.length === 0) {
|
|
noRobotsMessage.classList.remove('d-none');
|
|
return;
|
|
}
|
|
|
|
// 渲染机器人卡片
|
|
data.robots.forEach(robot => {
|
|
const robotCard = createRobotCard(robot);
|
|
robotsList.appendChild(robotCard);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('加载机器人列表失败:', error);
|
|
loadingIndicator.classList.add('d-none');
|
|
alert(`加载机器人列表失败: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
// 创建机器人卡片
|
|
function createRobotCard(robot) {
|
|
const cardContainer = document.createElement('div');
|
|
cardContainer.className = 'col-md-4 mb-4 robot-card-container';
|
|
|
|
const avatarHtml = robot.avatar_data
|
|
? `<img src="data:image/jpeg;base64,${robot.avatar_data}" alt="${robot.name}" class="robot-avatar">`
|
|
: `<div class="robot-avatar-placeholder"><i class="bi bi-person"></i></div>`;
|
|
|
|
cardContainer.innerHTML = `
|
|
<div class="card robot-card">
|
|
<div class="card-body text-center">
|
|
${avatarHtml}
|
|
<h5 class="card-title">${robot.name}</h5>
|
|
<div class="robot-background text-start mb-3">
|
|
<small class="text-muted">${robot.background}</small>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-sm btn-outline-primary edit-robot" data-robot-id="${robot.robot_id}">
|
|
<i class="bi bi-pencil"></i> 编辑
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger delete-robot" data-robot-id="${robot.robot_id}">
|
|
<i class="bi bi-trash"></i> 删除
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 添加编辑按钮事件
|
|
cardContainer.querySelector('.edit-robot').addEventListener('click', function() {
|
|
openEditRobotModal(robot);
|
|
});
|
|
|
|
// 添加删除按钮事件
|
|
cardContainer.querySelector('.delete-robot').addEventListener('click', function() {
|
|
openDeleteRobotModal(robot.robot_id, robot.name);
|
|
});
|
|
|
|
return cardContainer;
|
|
}
|
|
|
|
// 初始化编辑机器人模态框
|
|
function initEditRobotModal() {
|
|
const editRobotForm = document.getElementById('editRobotForm');
|
|
const saveChangesButton = document.getElementById('saveRobotChanges');
|
|
const editRobotAvatar = document.getElementById('editRobotAvatar');
|
|
const editAvatarPreview = document.getElementById('editAvatarPreview');
|
|
|
|
// 头像预览
|
|
editRobotAvatar.addEventListener('change', function() {
|
|
if (this.files && this.files[0]) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(e) {
|
|
editAvatarPreview.src = e.target.result;
|
|
};
|
|
|
|
reader.readAsDataURL(this.files[0]);
|
|
}
|
|
});
|
|
|
|
// 保存更改按钮点击事件
|
|
saveChangesButton.addEventListener('click', async function() {
|
|
const robotId = document.getElementById('editRobotId').value;
|
|
const formData = new FormData(editRobotForm);
|
|
|
|
// 显示保存中状态
|
|
const originalButtonText = saveChangesButton.innerHTML;
|
|
saveChangesButton.disabled = true;
|
|
saveChangesButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 保存中...';
|
|
|
|
try {
|
|
const response = await fetch(`/imgsearcherApi/api/robots/${robotId}`, {
|
|
method: 'PUT',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert(`更新失败: ${data.error}`);
|
|
return;
|
|
}
|
|
|
|
// 关闭模态框
|
|
const editModal = bootstrap.Modal.getInstance(document.getElementById('editRobotModal'));
|
|
editModal.hide();
|
|
|
|
// 刷新机器人列表
|
|
loadRobots();
|
|
|
|
// 显示成功消息
|
|
alert('机器人角色更新成功！');
|
|
|
|
} catch (error) {
|
|
alert(`更新失败: ${error.message}`);
|
|
} finally {
|
|
// 恢复按钮状态
|
|
saveChangesButton.disabled = false;
|
|
saveChangesButton.innerHTML = originalButtonText;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 打开编辑机器人模态框
|
|
function openEditRobotModal(robot) {
|
|
document.getElementById('editRobotId').value = robot.robot_id;
|
|
document.getElementById('editRobotName').value = robot.name;
|
|
document.getElementById('editRobotBackground').value = robot.background;
|
|
|
|
// 设置头像预览
|
|
if (robot.avatar_data) {
|
|
document.getElementById('editAvatarPreview').src = `data:image/jpeg;base64,${robot.avatar_data}`;
|
|
} else {
|
|
document.getElementById('editAvatarPreview').src = '';
|
|
}
|
|
|
|
// 打开模态框
|
|
const editModal = new bootstrap.Modal(document.getElementById('editRobotModal'));
|
|
editModal.show();
|
|
}
|
|
|
|
// 初始化删除机器人模态框
|
|
function initDeleteRobotModal() {
|
|
const confirmDeleteButton = document.getElementById('confirmDeleteRobot');
|
|
|
|
confirmDeleteButton.addEventListener('click', async function() {
|
|
const robotId = document.getElementById('deleteRobotId').value;
|
|
|
|
// 显示删除中状态
|
|
const originalButtonText = confirmDeleteButton.innerHTML;
|
|
confirmDeleteButton.disabled = true;
|
|
confirmDeleteButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 删除中...';
|
|
|
|
try {
|
|
const response = await fetch(`/imgsearcherApi/api/robots/${robotId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.error) {
|
|
alert(`删除失败: ${data.error}`);
|
|
return;
|
|
}
|
|
|
|
// 关闭模态框
|
|
const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteRobotModal'));
|
|
deleteModal.hide();
|
|
|
|
// 刷新机器人列表
|
|
loadRobots();
|
|
|
|
// 显示成功消息
|
|
alert('机器人角色删除成功！');
|
|
|
|
} catch (error) {
|
|
alert(`删除失败: ${error.message}`);
|
|
} finally {
|
|
// 恢复按钮状态
|
|
confirmDeleteButton.disabled = false;
|
|
confirmDeleteButton.innerHTML = originalButtonText;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 打开删除机器人模态框
|
|
function openDeleteRobotModal(robotId, robotName) {
|
|
document.getElementById('deleteRobotId').value = robotId;
|
|
document.getElementById('deleteRobotModalLabel').textContent = `确认删除 "${robotName}"`;
|
|
document.querySelector('#deleteRobotModal .modal-body p').textContent = `确定要删除机器人角色 "${robotName}" 吗？此操作不可撤销。`;
|
|
|
|
// 打开模态框
|
|
const deleteModal = new bootstrap.Modal(document.getElementById('deleteRobotModal'));
|
|
deleteModal.show();
|
|
}
|