1615 lines
61 KiB
Vue
1615 lines
61 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { computed, onMounted, reactive, ref } from "vue";
|
||
|
||
import { api, clearToken, getToken, saveToken } from "./services/api";
|
||
import type {
|
||
AdminProfile,
|
||
AdminUser,
|
||
AgentDebugResult,
|
||
AiLogRecord,
|
||
ChatDetail,
|
||
ChatRecord,
|
||
DashboardStats,
|
||
KnowledgeItem,
|
||
ModelItem,
|
||
SystemConfigItem,
|
||
UserImportResult,
|
||
} from "./types/api";
|
||
|
||
const admin = ref<AdminProfile | null>(null);
|
||
const activeMenu = ref("dashboard");
|
||
const loading = ref(false);
|
||
|
||
const loginForm = reactive({ username: "admin", password: "admin123456" });
|
||
const stats = ref<DashboardStats | null>(null);
|
||
const users = ref<AdminUser[]>([]);
|
||
const userKeyword = ref("");
|
||
const knowledge = ref<KnowledgeItem[]>([]);
|
||
const models = ref<ModelItem[]>([]);
|
||
const configs = ref<SystemConfigItem[]>([]);
|
||
const chats = ref<ChatRecord[]>([]);
|
||
const aiLogs = ref<AiLogRecord[]>([]);
|
||
const operationLogs = ref<Record<string, unknown>[]>([]);
|
||
const promptContent = ref("");
|
||
const chatDetail = ref<ChatDetail | null>(null);
|
||
const chatDetailOpen = ref(false);
|
||
const selectedAiLog = ref<AiLogRecord | null>(null);
|
||
const aiLogDetailOpen = ref(false);
|
||
const recordTab = ref("chats");
|
||
const editingModelId = ref<number | null>(null);
|
||
const editingKnowledgeId = ref<number | null>(null);
|
||
const batchNodeToken = ref("");
|
||
const batchImporting = ref(false);
|
||
const agentDebugging = ref(false);
|
||
const agentPreviewMessages = ref<{ role: "user" | "assistant" | "system"; content: string }[]>([
|
||
{ role: "assistant", content: "选择模型和知识库后，可以在这里调试 Agent 的真实问答效果。" },
|
||
]);
|
||
|
||
const studentForm = reactive({
|
||
phone: "",
|
||
name: "",
|
||
nickname: "",
|
||
status: 1,
|
||
dailyChatLimit: 100,
|
||
expiredAt: "",
|
||
});
|
||
const studentImportFile = ref<File | null>(null);
|
||
const studentImportInput = ref<HTMLInputElement | null>(null);
|
||
const studentImportResult = ref<UserImportResult | null>(null);
|
||
|
||
const knowledgeForm = reactive({
|
||
name: "",
|
||
feishuSpaceId: "",
|
||
feishuNodeId: "",
|
||
status: 1,
|
||
remark: "",
|
||
});
|
||
|
||
const modelForm = reactive({
|
||
provider: "openai-compatible",
|
||
displayName: "",
|
||
apiType: "openai_compatible",
|
||
modelName: "",
|
||
baseUrl: "https://api.openai.com/v1",
|
||
apiUrl: "",
|
||
apiKey: "",
|
||
authType: "bearer",
|
||
apiVersion: "",
|
||
temperature: null as number | null,
|
||
topP: null as number | null,
|
||
topK: null as number | null,
|
||
presencePenalty: null as number | null,
|
||
frequencyPenalty: null as number | null,
|
||
maxToken: null as number | null,
|
||
contextWindow: null as number | null,
|
||
streamEnabled: 1,
|
||
responseFormat: "",
|
||
extraParams: "",
|
||
remark: "",
|
||
timeoutSecond: 30,
|
||
});
|
||
|
||
const quickModelForm = reactive({
|
||
provider: "deepseek",
|
||
modelName: "deepseek-v4-pro",
|
||
apiKey: "",
|
||
});
|
||
|
||
const quickModelProviders = [
|
||
{
|
||
label: "DeepSeek",
|
||
provider: "deepseek",
|
||
apiType: "openai_compatible",
|
||
baseUrl: "https://api.deepseek.com",
|
||
authType: "bearer",
|
||
apiVersion: "",
|
||
temperature: null,
|
||
topP: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
models: [
|
||
{ label: "deepseek-v4-pro", value: "deepseek-v4-pro" },
|
||
{ label: "deepseek-v4-flash", value: "deepseek-v4-flash" },
|
||
],
|
||
},
|
||
{
|
||
label: "MiniMax",
|
||
provider: "minimax",
|
||
apiType: "openai_compatible",
|
||
baseUrl: "https://api.minimaxi.com/v1",
|
||
authType: "bearer",
|
||
apiVersion: "",
|
||
temperature: null,
|
||
topP: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
models: [
|
||
{ label: "MiniMax-Text-01", value: "MiniMax-Text-01" },
|
||
{ label: "MiniMax-M3", value: "MiniMax-M3" },
|
||
],
|
||
},
|
||
] as const;
|
||
|
||
const protocolPresets = [
|
||
{
|
||
label: "OpenAI 兼容协议",
|
||
provider: "openai-compatible",
|
||
apiType: "openai_compatible",
|
||
baseUrl: "https://api.openai.com/v1",
|
||
apiUrl: "",
|
||
authType: "bearer",
|
||
},
|
||
{
|
||
label: "Anthropic Messages 协议",
|
||
provider: "anthropic-compatible",
|
||
apiType: "anthropic_messages",
|
||
baseUrl: "https://api.anthropic.com",
|
||
apiUrl: "",
|
||
authType: "api_key",
|
||
apiVersion: "2023-06-01",
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
},
|
||
];
|
||
|
||
const nullableModelFields = [
|
||
"temperature",
|
||
"topP",
|
||
"topK",
|
||
"presencePenalty",
|
||
"frequencyPenalty",
|
||
"contextWindow",
|
||
"responseFormat",
|
||
"extraParams",
|
||
"remark",
|
||
] as const;
|
||
|
||
type SystemSettingValue = string | number | boolean;
|
||
type SystemSettingType = "number" | "switch" | "text" | "password";
|
||
|
||
interface SystemSettingDefinition {
|
||
key: string;
|
||
label: string;
|
||
type: SystemSettingType;
|
||
defaultValue: SystemSettingValue;
|
||
min?: number;
|
||
max?: number;
|
||
placeholder?: string;
|
||
description: string;
|
||
}
|
||
|
||
interface SystemSettingSection {
|
||
title: string;
|
||
description: string;
|
||
settings: SystemSettingDefinition[];
|
||
}
|
||
|
||
const systemSettingSections: SystemSettingSection[] = [
|
||
{
|
||
title: "用户与登录",
|
||
description: "控制学员准入、默认资料、验证码和登录态有效时间。",
|
||
settings: [
|
||
{
|
||
key: "daily_chat_limit",
|
||
label: "默认每日聊天额度",
|
||
type: "number",
|
||
defaultValue: 100,
|
||
min: 0,
|
||
max: 100000,
|
||
description: "新建或导入学员未单独填写额度时使用。",
|
||
},
|
||
{
|
||
key: "access_token_expire_minutes",
|
||
label: "登录 Token 有效期（分钟）",
|
||
type: "number",
|
||
defaultValue: 43200,
|
||
min: 5,
|
||
max: 43200,
|
||
description: "用户端和管理端登录后的 Token 有效期。",
|
||
},
|
||
{
|
||
key: "sms_code_expire_minutes",
|
||
label: "验证码有效期（分钟）",
|
||
type: "number",
|
||
defaultValue: 5,
|
||
min: 1,
|
||
max: 60,
|
||
description: "短信验证码生成后的可使用时间。",
|
||
},
|
||
{
|
||
key: "mock_sms_enabled",
|
||
label: "使用 mock 短信",
|
||
type: "switch",
|
||
defaultValue: true,
|
||
description: "开发和演示环境可开启，生产环境应关闭并接入真实短信。",
|
||
},
|
||
{
|
||
key: "mock_sms_code",
|
||
label: "mock 短信验证码",
|
||
type: "text",
|
||
defaultValue: "123456",
|
||
placeholder: "例如 123456",
|
||
description: "mock 短信开启时使用的固定验证码。",
|
||
},
|
||
{
|
||
key: "default_user_name_prefix",
|
||
label: "默认用户名前缀",
|
||
type: "text",
|
||
defaultValue: "用户",
|
||
placeholder: "例如 用户",
|
||
description: "系统需要生成默认名称时使用的前缀。",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "AI 问答",
|
||
description: "控制 Agent 调用、上下文和用户端回答展示策略。",
|
||
settings: [
|
||
{
|
||
key: "ai_timeout_seconds",
|
||
label: "AI 请求超时（秒）",
|
||
type: "number",
|
||
defaultValue: 60,
|
||
min: 5,
|
||
max: 300,
|
||
description: "真实模型请求超过该时间应判定为超时。",
|
||
},
|
||
{
|
||
key: "mock_model_enabled",
|
||
label: "使用 mock 大模型",
|
||
type: "switch",
|
||
defaultValue: true,
|
||
description: "开发和演示环境可开启，真实模型验收前应关闭。",
|
||
},
|
||
{
|
||
key: "chat_context_message_count",
|
||
label: "上下文消息数",
|
||
type: "number",
|
||
defaultValue: 10,
|
||
min: 0,
|
||
max: 100,
|
||
description: "组装 Prompt 时带入的历史消息数量。",
|
||
},
|
||
{
|
||
key: "show_reference_sources",
|
||
label: "用户端展示引用来源",
|
||
type: "switch",
|
||
defaultValue: true,
|
||
description: "后台始终记录引用；此项控制用户端是否展示。",
|
||
},
|
||
{
|
||
key: "chat_max_active_requests",
|
||
label: "问答最大并发数",
|
||
type: "number",
|
||
defaultValue: 2,
|
||
min: 1,
|
||
max: 1000,
|
||
description: "同一后端进程内同时进入飞书和模型生成链路的最大请求数。",
|
||
},
|
||
{
|
||
key: "chat_max_queue_size",
|
||
label: "问答最大排队数",
|
||
type: "number",
|
||
defaultValue: 20,
|
||
min: 0,
|
||
max: 10000,
|
||
description: "超过最大并发后允许等待的请求数量，超过后直接提示稍后再试。",
|
||
},
|
||
{
|
||
key: "chat_queue_timeout_seconds",
|
||
label: "问答排队超时（秒）",
|
||
type: "number",
|
||
defaultValue: 60,
|
||
min: 1,
|
||
max: 3600,
|
||
description: "请求在排队中超过该时间后自动结束并提示用户稍后再试。",
|
||
},
|
||
{
|
||
key: "chat_active_lease_seconds",
|
||
label: "问答执行租约（秒）",
|
||
type: "number",
|
||
defaultValue: 900,
|
||
min: 60,
|
||
max: 86400,
|
||
description: "Redis 全局队列中执行名额的自动过期时间，防止 worker 异常退出后长期占用并发名额。",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "外部服务",
|
||
description: "控制飞书搜索接口、飞书直读超时和重试策略。",
|
||
settings: [
|
||
{
|
||
key: "feishu_search_url",
|
||
label: "飞书检索服务地址",
|
||
type: "text",
|
||
defaultValue: "",
|
||
placeholder: "例如 https://example.com/search",
|
||
description: "如使用独立飞书检索适配服务，在这里填写调用地址。",
|
||
},
|
||
{
|
||
key: "feishu_app_id",
|
||
label: "飞书应用 AppID",
|
||
type: "text",
|
||
defaultValue: "",
|
||
placeholder: "填写飞书开放平台应用 AppID",
|
||
description: "用于后端直读飞书知识库；系统设置优先于环境变量。",
|
||
},
|
||
{
|
||
key: "feishu_app_secret",
|
||
label: "飞书应用 AppSecret",
|
||
type: "password",
|
||
defaultValue: "",
|
||
placeholder: "填写飞书开放平台应用 AppSecret",
|
||
description: "用于后端获取飞书 tenant_access_token，保存后立即生效。",
|
||
},
|
||
{
|
||
key: "feishu_timeout_seconds",
|
||
label: "飞书请求超时（秒）",
|
||
type: "number",
|
||
defaultValue: 20,
|
||
min: 1,
|
||
max: 120,
|
||
description: "飞书相关接口调用超过该时间应判定为超时。",
|
||
},
|
||
{
|
||
key: "feishu_retry_count",
|
||
label: "飞书检索重试次数",
|
||
type: "number",
|
||
defaultValue: 2,
|
||
min: 0,
|
||
max: 10,
|
||
description: "飞书检索失败时的最大重试次数。",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "系统开关",
|
||
description: "控制系统级展示和运行策略，不包含密钥类配置。",
|
||
settings: [
|
||
{
|
||
key: "show_operation_log_detail",
|
||
label: "展示操作日志详情",
|
||
type: "switch",
|
||
defaultValue: true,
|
||
description: "开启后后台审计页可展示更完整的操作上下文。",
|
||
},
|
||
{
|
||
key: "chat_export_enabled",
|
||
label: "允许导出聊天记录",
|
||
type: "switch",
|
||
defaultValue: true,
|
||
description: "关闭后后台不应提供聊天记录导出能力。",
|
||
},
|
||
{
|
||
key: "maintenance_mode",
|
||
label: "维护模式",
|
||
type: "switch",
|
||
defaultValue: false,
|
||
description: "预留给后续停机维护提示和访问控制使用。",
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
const systemSettingDefinitions = systemSettingSections.flatMap((section) => section.settings);
|
||
const systemSettingValues = reactive<Record<string, SystemSettingValue>>({});
|
||
systemSettingDefinitions.forEach((setting) => {
|
||
systemSettingValues[setting.key] = setting.defaultValue;
|
||
});
|
||
|
||
const chatFilters = reactive({
|
||
keyword: "",
|
||
userId: undefined as number | undefined,
|
||
status: "",
|
||
dateFrom: "",
|
||
dateTo: "",
|
||
});
|
||
|
||
const agentForm = reactive({
|
||
modelId: undefined as number | undefined,
|
||
knowledgeIds: [] as number[],
|
||
temperature: 0.2 as number | null,
|
||
topP: null as number | null,
|
||
topK: null as number | null,
|
||
presencePenalty: null as number | null,
|
||
frequencyPenalty: null as number | null,
|
||
maxToken: 1024 as number | null,
|
||
question: "",
|
||
});
|
||
|
||
onMounted(async () => {
|
||
if (!getToken()) return;
|
||
try {
|
||
admin.value = await api.profile();
|
||
await loadCurrentMenu();
|
||
} catch {
|
||
clearToken();
|
||
}
|
||
});
|
||
|
||
async function login() {
|
||
loading.value = true;
|
||
try {
|
||
const result = await api.login(loginForm.username, loginForm.password);
|
||
saveToken(result.token);
|
||
admin.value = result.admin;
|
||
await loadCurrentMenu();
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : "登录失败");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function logout() {
|
||
clearToken();
|
||
admin.value = null;
|
||
}
|
||
|
||
async function switchMenu(menu: string) {
|
||
activeMenu.value = menu;
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function loadCurrentMenu() {
|
||
loading.value = true;
|
||
try {
|
||
if (activeMenu.value === "dashboard") stats.value = await api.dashboard();
|
||
if (activeMenu.value === "users") users.value = await api.users(userKeyword.value);
|
||
if (activeMenu.value === "knowledge") knowledge.value = await api.knowledge();
|
||
if (activeMenu.value === "prompt") {
|
||
const [prompt, modelRows, knowledgeRows] = await Promise.all([api.prompt(), api.models(), api.knowledge()]);
|
||
promptContent.value = prompt.promptContent;
|
||
models.value = modelRows;
|
||
knowledge.value = knowledgeRows;
|
||
if (!agentForm.modelId && modelRows.length) {
|
||
agentForm.modelId = modelRows.find((model) => model.enabled === 1)?.id ?? modelRows[0].id;
|
||
}
|
||
}
|
||
if (activeMenu.value === "models") models.value = await api.models();
|
||
if (activeMenu.value === "configs") {
|
||
configs.value = await api.configs();
|
||
hydrateSystemSettings();
|
||
}
|
||
if (activeMenu.value === "records") {
|
||
chats.value = await api.chats(buildChatQuery());
|
||
aiLogs.value = await api.aiLogs();
|
||
operationLogs.value = await api.operationLogs();
|
||
}
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function saveUser(row: AdminUser) {
|
||
await api.updateUser(row.id, { status: row.status, dailyChatLimit: row.dailyChatLimit });
|
||
ElMessage.success("用户已更新");
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function createStudent() {
|
||
if (!studentForm.phone || !studentForm.name) {
|
||
ElMessage.error("请填写手机号和姓名");
|
||
return;
|
||
}
|
||
await api.createUser({
|
||
phone: studentForm.phone,
|
||
name: studentForm.name,
|
||
nickname: studentForm.nickname || null,
|
||
status: studentForm.status,
|
||
dailyChatLimit: studentForm.dailyChatLimit,
|
||
expiredAt: studentForm.expiredAt || null,
|
||
});
|
||
ElMessage.success("学员已添加");
|
||
resetStudentForm();
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
function handleStudentImportFile(event: Event) {
|
||
const input = event.target as HTMLInputElement;
|
||
studentImportFile.value = input.files?.[0] ?? null;
|
||
}
|
||
|
||
async function downloadStudentTemplate() {
|
||
await api.downloadStudentTemplate();
|
||
}
|
||
|
||
async function importStudents() {
|
||
if (!studentImportFile.value) {
|
||
ElMessage.error("请先选择 Excel 文件");
|
||
return;
|
||
}
|
||
studentImportResult.value = await api.importUsersExcel(studentImportFile.value);
|
||
ElMessage.success(
|
||
`导入完成：新增 ${studentImportResult.value.created}，更新 ${studentImportResult.value.updated}，失败 ${studentImportResult.value.failed}`,
|
||
);
|
||
studentImportFile.value = null;
|
||
if (studentImportInput.value) studentImportInput.value.value = "";
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
function resetStudentForm() {
|
||
Object.assign(studentForm, { phone: "", name: "", nickname: "", status: 1, dailyChatLimit: 100, expiredAt: "" });
|
||
}
|
||
|
||
async function deleteUser(row: AdminUser) {
|
||
if (!window.confirm(`确认删除用户 ${row.phone} 吗？删除后前台将无法继续使用该账号。`)) return;
|
||
await api.deleteUser(row.id);
|
||
ElMessage.success("用户已删除");
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function saveKnowledge() {
|
||
if (!knowledgeForm.name || !knowledgeForm.feishuSpaceId || !knowledgeForm.feishuNodeId) {
|
||
ElMessage.error("请填写知识库名称、SpaceID 和 NodeID");
|
||
return;
|
||
}
|
||
if (editingKnowledgeId.value) {
|
||
await api.updateKnowledge(editingKnowledgeId.value, { ...knowledgeForm });
|
||
ElMessage.success("知识库已更新");
|
||
} else {
|
||
await api.createKnowledge({ ...knowledgeForm });
|
||
ElMessage.success("知识库已新增");
|
||
}
|
||
resetKnowledgeForm();
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function saveKnowledgeRow(row: KnowledgeItem) {
|
||
await api.updateKnowledge(row.id, {
|
||
name: row.name,
|
||
feishuSpaceId: row.feishuSpaceId,
|
||
feishuNodeId: row.feishuNodeId,
|
||
status: row.status,
|
||
remark: row.remark ?? "",
|
||
});
|
||
ElMessage.success("知识库状态已更新");
|
||
}
|
||
|
||
function editKnowledge(row: KnowledgeItem) {
|
||
editingKnowledgeId.value = row.id;
|
||
Object.assign(knowledgeForm, {
|
||
name: row.name,
|
||
feishuSpaceId: row.feishuSpaceId,
|
||
feishuNodeId: row.feishuNodeId,
|
||
status: row.status,
|
||
remark: row.remark ?? "",
|
||
});
|
||
}
|
||
|
||
async function deleteKnowledge(row: KnowledgeItem) {
|
||
if (!window.confirm(`确认删除知识库 ${row.name} 吗？删除后所有用户都无法再检索该知识库。`)) return;
|
||
await api.deleteKnowledge(row.id);
|
||
ElMessage.success("知识库已删除");
|
||
if (editingKnowledgeId.value === row.id) resetKnowledgeForm();
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
function resetKnowledgeForm() {
|
||
editingKnowledgeId.value = null;
|
||
Object.assign(knowledgeForm, { name: "", feishuSpaceId: "", feishuNodeId: "", status: 1, remark: "" });
|
||
}
|
||
|
||
async function batchImportKnowledge() {
|
||
const token = batchNodeToken.value.trim();
|
||
if (!token) {
|
||
ElMessage.warning("请输入 NodeToken");
|
||
return;
|
||
}
|
||
batchImporting.value = true;
|
||
try {
|
||
const result = await api.importKnowledgeFromSpace({ node_token: token });
|
||
if (result.imported > 0) {
|
||
ElMessage.success(`导入成功：${result.name}（id=${result.id}）`);
|
||
} else {
|
||
ElMessage.info(`该节点已存在：${result.name}（id=${result.id}）`);
|
||
}
|
||
batchNodeToken.value = "";
|
||
await loadCurrentMenu();
|
||
} catch (e: any) {
|
||
ElMessage.error(e.message || "导入失败");
|
||
} finally {
|
||
batchImporting.value = false;
|
||
}
|
||
}
|
||
|
||
async function savePrompt() {
|
||
const result = await api.savePrompt(promptContent.value);
|
||
promptContent.value = result.promptContent;
|
||
ElMessage.success("Prompt 已保存");
|
||
}
|
||
|
||
async function resetPrompt() {
|
||
const result = await api.resetPrompt();
|
||
promptContent.value = result.promptContent;
|
||
ElMessage.success("Prompt 已恢复默认");
|
||
}
|
||
|
||
async function saveModel() {
|
||
if (!validateModelForm()) return;
|
||
const payload = buildModelPayload();
|
||
if (editingModelId.value) {
|
||
await api.updateModel(editingModelId.value, payload);
|
||
ElMessage.success("模型已更新");
|
||
} else {
|
||
await api.createModel(payload);
|
||
ElMessage.success("模型已新增");
|
||
}
|
||
resetModelForm();
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
function buildModelPayload() {
|
||
const payload = { ...modelForm } as Record<string, unknown>;
|
||
nullableModelFields.forEach((field) => {
|
||
if (payload[field] === undefined || payload[field] === "") {
|
||
payload[field] = null;
|
||
}
|
||
});
|
||
Object.assign(payload, {
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
presencePenalty: null,
|
||
frequencyPenalty: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
streamEnabled: 1,
|
||
responseFormat: null,
|
||
extraParams: null,
|
||
});
|
||
return payload;
|
||
}
|
||
|
||
const selectedQuickProvider = computed(() => {
|
||
return quickModelProviders.find((item) => item.provider === quickModelForm.provider) ?? quickModelProviders[0];
|
||
});
|
||
|
||
async function quickAddModel() {
|
||
const provider = selectedQuickProvider.value;
|
||
if (!provider) return;
|
||
if (!quickModelForm.apiKey) {
|
||
ElMessage.error("请填写 API Key");
|
||
return;
|
||
}
|
||
|
||
await api.createModel({
|
||
provider: provider.provider,
|
||
displayName: `${provider.label} ${quickModelForm.modelName}`,
|
||
apiType: provider.apiType,
|
||
modelName: quickModelForm.modelName,
|
||
baseUrl: provider.baseUrl,
|
||
apiUrl: "",
|
||
apiKey: quickModelForm.apiKey,
|
||
authType: provider.authType,
|
||
apiVersion: provider.apiVersion,
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
presencePenalty: null,
|
||
frequencyPenalty: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
streamEnabled: 1,
|
||
responseFormat: null,
|
||
extraParams: null,
|
||
remark: "快速添加",
|
||
timeoutSecond: 30,
|
||
});
|
||
ElMessage.success(`${provider.label} 模型已新增`);
|
||
quickModelForm.apiKey = "";
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
function applyQuickProvider(provider: string) {
|
||
const target = quickModelProviders.find((item) => item.provider === provider);
|
||
if (!target) return;
|
||
quickModelForm.modelName = target.models[0]?.value ?? "";
|
||
}
|
||
|
||
async function enableModel(id: number) {
|
||
await api.enableModel(id);
|
||
ElMessage.success("模型已启用");
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function deleteModel(id: number) {
|
||
try {
|
||
await ElMessageBox.confirm("确认删除该模型？删除后不可恢复。", "删除模型", {
|
||
confirmButtonText: "确认删除",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
});
|
||
} catch {
|
||
return;
|
||
}
|
||
await api.deleteModel(id);
|
||
ElMessage.success("模型已删除");
|
||
await loadCurrentMenu();
|
||
}
|
||
|
||
async function testModel(id: number) {
|
||
const result = await api.testModel(id);
|
||
if (result.ok) {
|
||
ElMessage.success(result.message);
|
||
} else {
|
||
ElMessage.error(result.message);
|
||
}
|
||
}
|
||
|
||
function applyModelPreset(label: string) {
|
||
const preset = protocolPresets.find((item) => item.label === label);
|
||
if (!preset) return;
|
||
Object.assign(
|
||
modelForm,
|
||
{
|
||
apiVersion: "",
|
||
authType: "bearer",
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
presencePenalty: null,
|
||
frequencyPenalty: null,
|
||
responseFormat: "",
|
||
streamEnabled: 1,
|
||
},
|
||
preset,
|
||
);
|
||
}
|
||
|
||
function editModel(row: ModelItem) {
|
||
editingModelId.value = row.id;
|
||
Object.assign(modelForm, {
|
||
provider: row.provider,
|
||
displayName: row.displayName ?? "",
|
||
apiType: row.apiType,
|
||
modelName: row.modelName,
|
||
baseUrl: row.baseUrl ?? "",
|
||
apiUrl: row.apiUrl,
|
||
apiKey: "",
|
||
authType: row.authType,
|
||
apiVersion: row.apiVersion ?? "",
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
presencePenalty: null,
|
||
frequencyPenalty: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
streamEnabled: row.streamEnabled,
|
||
responseFormat: row.responseFormat ?? "",
|
||
extraParams: row.extraParams ?? "",
|
||
remark: row.remark ?? "",
|
||
timeoutSecond: row.timeoutSecond,
|
||
});
|
||
}
|
||
|
||
function resetModelForm() {
|
||
editingModelId.value = null;
|
||
Object.assign(modelForm, {
|
||
provider: "openai-compatible",
|
||
displayName: "",
|
||
apiType: "openai_compatible",
|
||
modelName: "",
|
||
baseUrl: "https://api.openai.com/v1",
|
||
apiUrl: "",
|
||
apiKey: "",
|
||
authType: "bearer",
|
||
apiVersion: "",
|
||
temperature: null,
|
||
topP: null,
|
||
topK: null,
|
||
presencePenalty: null,
|
||
frequencyPenalty: null,
|
||
maxToken: null,
|
||
contextWindow: null,
|
||
streamEnabled: 1,
|
||
responseFormat: "",
|
||
extraParams: "",
|
||
remark: "",
|
||
timeoutSecond: 30,
|
||
});
|
||
}
|
||
|
||
function validateModelForm() {
|
||
if (!modelForm.apiUrl && !modelForm.baseUrl) {
|
||
ElMessage.error("请填写 Base URL 或 API URL");
|
||
return false;
|
||
}
|
||
if (!editingModelId.value && !modelForm.apiKey) {
|
||
ElMessage.error("新增模型必须填写 API Key");
|
||
return false;
|
||
}
|
||
if (modelForm.extraParams.trim()) {
|
||
try {
|
||
const extraParams = JSON.parse(modelForm.extraParams);
|
||
if (!extraParams || Array.isArray(extraParams) || typeof extraParams !== "object") {
|
||
throw new Error("高级 JSON 参数必须是对象");
|
||
}
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : "高级 JSON 参数不是合法 JSON");
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function saveSystemSettings() {
|
||
await Promise.all(
|
||
systemSettingDefinitions.map((setting) =>
|
||
api.saveConfig({
|
||
configKey: setting.key,
|
||
configValue: serializeSystemSettingValue(systemSettingValues[setting.key]),
|
||
description: setting.description,
|
||
}),
|
||
),
|
||
);
|
||
ElMessage.success("系统配置已保存");
|
||
configs.value = await api.configs();
|
||
hydrateSystemSettings();
|
||
}
|
||
|
||
function hydrateSystemSettings() {
|
||
const configMap = new Map(configs.value.map((item) => [item.configKey, item.configValue]));
|
||
systemSettingDefinitions.forEach((setting) => {
|
||
systemSettingValues[setting.key] = normalizeSystemSettingValue(setting, configMap.get(setting.key));
|
||
});
|
||
}
|
||
|
||
function normalizeSystemSettingValue(setting: (typeof systemSettingDefinitions)[number], rawValue?: string) {
|
||
if (rawValue === undefined || rawValue === "") {
|
||
return setting.defaultValue;
|
||
}
|
||
if (setting.type === "switch") {
|
||
return ["1", "true", "yes", "on", "启用"].includes(rawValue.toLowerCase());
|
||
}
|
||
if (setting.type === "text" || setting.type === "password") {
|
||
return rawValue;
|
||
}
|
||
const parsed = Number(rawValue);
|
||
if (Number.isFinite(parsed)) {
|
||
return parsed;
|
||
}
|
||
return setting.defaultValue;
|
||
}
|
||
|
||
function serializeSystemSettingValue(value: SystemSettingValue) {
|
||
if (typeof value === "boolean") return value ? "true" : "false";
|
||
return String(value);
|
||
}
|
||
|
||
function agentMessageParts(content: string) {
|
||
const matched = content.match(/<think>([\s\S]*?)<\/think>/i);
|
||
if (!matched) return { reasoning: "", answer: content };
|
||
const answer = content.replace(matched[0], "").trim();
|
||
return {
|
||
reasoning: matched[1].trim(),
|
||
answer: answer || "模型未返回正式回答。",
|
||
};
|
||
}
|
||
|
||
async function debugAgent() {
|
||
if (!agentForm.modelId) {
|
||
ElMessage.error("请选择调试模型");
|
||
return;
|
||
}
|
||
if (!agentForm.question.trim()) {
|
||
ElMessage.error("请输入调试问题");
|
||
return;
|
||
}
|
||
const question = agentForm.question.trim();
|
||
agentPreviewMessages.value.push({ role: "user", content: question });
|
||
agentForm.question = "";
|
||
agentDebugging.value = true;
|
||
try {
|
||
const result: AgentDebugResult = await api.debugAgent({
|
||
promptContent: promptContent.value,
|
||
modelId: agentForm.modelId,
|
||
knowledgeIds: agentForm.knowledgeIds,
|
||
question,
|
||
temperature: agentForm.temperature,
|
||
topP: agentForm.topP,
|
||
topK: agentForm.topK,
|
||
presencePenalty: agentForm.presencePenalty,
|
||
frequencyPenalty: agentForm.frequencyPenalty,
|
||
maxToken: agentForm.maxToken,
|
||
});
|
||
if (!result.ok) {
|
||
ElMessage.error(result.message);
|
||
agentPreviewMessages.value.push({ role: "assistant", content: result.message });
|
||
return;
|
||
}
|
||
agentPreviewMessages.value.push({ role: "assistant", content: result.answer });
|
||
ElMessage.success(result.message);
|
||
} catch (error) {
|
||
const message = error instanceof Error ? error.message : "Agent 调试失败";
|
||
ElMessage.error(message);
|
||
agentPreviewMessages.value.push({ role: "assistant", content: message });
|
||
} finally {
|
||
agentDebugging.value = false;
|
||
}
|
||
}
|
||
|
||
function clearAgentPreview() {
|
||
agentPreviewMessages.value = [
|
||
{ role: "assistant", content: "预览已清空，可以继续发起新的 Agent 调试。" },
|
||
];
|
||
}
|
||
|
||
async function clearFeishuCache() {
|
||
try {
|
||
const result = await api.clearFeishuCache();
|
||
ElMessage.success(result.message || `已清空 ${result.cleared} 条缓存`);
|
||
} catch (e: any) {
|
||
ElMessage.error(e.message || "刷新缓存失败");
|
||
}
|
||
}
|
||
|
||
async function searchChats() {
|
||
chats.value = await api.chats(buildChatQuery());
|
||
}
|
||
|
||
async function resetChatFilters() {
|
||
Object.assign(chatFilters, { keyword: "", userId: undefined, status: "", dateFrom: "", dateTo: "" });
|
||
await searchChats();
|
||
}
|
||
|
||
async function openChatDetail(row: ChatRecord) {
|
||
chatDetail.value = await api.chatDetail(row.id);
|
||
chatDetailOpen.value = true;
|
||
}
|
||
|
||
async function openAiLogDetail(row: AiLogRecord) {
|
||
selectedAiLog.value = await api.aiLogDetail(row.id);
|
||
aiLogDetailOpen.value = true;
|
||
}
|
||
|
||
async function exportChats() {
|
||
await api.exportChats(buildChatQuery());
|
||
}
|
||
|
||
function buildChatQuery() {
|
||
return {
|
||
keyword: chatFilters.keyword,
|
||
userId: chatFilters.userId,
|
||
status: chatFilters.status,
|
||
dateFrom: chatFilters.dateFrom,
|
||
dateTo: chatFilters.dateTo,
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<main v-if="!admin" class="login-page">
|
||
<section class="login-box">
|
||
<div class="brand">AI</div>
|
||
<h1>AI 知识库后台</h1>
|
||
<p>用于维护用户、知识库、Agent、模型和审计记录。</p>
|
||
<el-form label-position="top" @submit.prevent="login">
|
||
<el-form-item label="管理员账号">
|
||
<el-input v-model="loginForm.username" />
|
||
</el-form-item>
|
||
<el-form-item label="密码">
|
||
<el-input v-model="loginForm.password" type="password" show-password />
|
||
</el-form-item>
|
||
<el-button type="primary" :loading="loading" class="full-btn" @click="login">登录</el-button>
|
||
</el-form>
|
||
</section>
|
||
</main>
|
||
|
||
<main v-else class="admin-shell">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-title">AI 知识库</div>
|
||
<button :class="{ active: activeMenu === 'dashboard' }" @click="switchMenu('dashboard')">Dashboard</button>
|
||
<button :class="{ active: activeMenu === 'users' }" @click="switchMenu('users')">用户管理</button>
|
||
<button :class="{ active: activeMenu === 'knowledge' }" @click="switchMenu('knowledge')">知识库管理</button>
|
||
<button :class="{ active: activeMenu === 'prompt' }" @click="switchMenu('prompt')">Agent 管理</button>
|
||
<button :class="{ active: activeMenu === 'models' }" @click="switchMenu('models')">模型管理</button>
|
||
<button :class="{ active: activeMenu === 'configs' }" @click="switchMenu('configs')">系统配置</button>
|
||
<button :class="{ active: activeMenu === 'records' }" @click="switchMenu('records')">记录审计</button>
|
||
</aside>
|
||
|
||
<section class="workspace">
|
||
<header class="topbar">
|
||
<div>
|
||
<strong>{{ admin.name }}</strong>
|
||
<span>管理员</span>
|
||
</div>
|
||
<el-button @click="logout">退出</el-button>
|
||
</header>
|
||
|
||
<section v-loading="loading" class="content">
|
||
<template v-if="activeMenu === 'dashboard'">
|
||
<div class="page-head">
|
||
<h2>Dashboard</h2>
|
||
<p>核心业务数据概览。</p>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat"><span>用户数</span><strong>{{ stats?.userCount ?? 0 }}</strong></div>
|
||
<div class="stat"><span>会话数</span><strong>{{ stats?.sessionCount ?? 0 }}</strong></div>
|
||
<div class="stat"><span>消息数</span><strong>{{ stats?.messageCount ?? 0 }}</strong></div>
|
||
<div class="stat"><span>AI 请求</span><strong>{{ stats?.aiRequestCount ?? 0 }}</strong></div>
|
||
<div class="stat"><span>知识库</span><strong>{{ stats?.knowledgeCount ?? 0 }}</strong></div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'users'">
|
||
<div class="page-head inline">
|
||
<div><h2>用户管理</h2><p>维护学员名单；只有名单内启用学员可以登录用户端。</p></div>
|
||
<el-input v-model="userKeyword" placeholder="手机号或姓名" clearable @change="loadCurrentMenu" />
|
||
</div>
|
||
<section class="student-tools">
|
||
<div class="student-tool-panel">
|
||
<h3>手动添加学员</h3>
|
||
<div class="student-form-grid">
|
||
<el-input v-model="studentForm.phone" placeholder="手机号" />
|
||
<el-input v-model="studentForm.name" placeholder="姓名" />
|
||
<el-input v-model="studentForm.nickname" placeholder="昵称（可选）" />
|
||
<el-input-number v-model="studentForm.dailyChatLimit" :min="0" />
|
||
<el-date-picker
|
||
v-model="studentForm.expiredAt"
|
||
type="datetime"
|
||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||
placeholder="有效期（可选）"
|
||
/>
|
||
<div class="form-switch-row">
|
||
<span>启用</span>
|
||
<el-switch v-model="studentForm.status" :active-value="1" :inactive-value="0" />
|
||
</div>
|
||
</div>
|
||
<div class="actions compact">
|
||
<el-button type="primary" @click="createStudent">添加学员</el-button>
|
||
<el-button @click="resetStudentForm">清空</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="student-tool-panel">
|
||
<h3>批量导入学员</h3>
|
||
<p class="tool-help">下载模板后填写学员信息，再上传 .xlsx 文件导入。</p>
|
||
<div class="student-file-import">
|
||
<input
|
||
ref="studentImportInput"
|
||
class="file-input"
|
||
type="file"
|
||
accept=".xlsx"
|
||
@change="handleStudentImportFile"
|
||
/>
|
||
<span class="file-name">{{ studentImportFile?.name || "未选择文件" }}</span>
|
||
</div>
|
||
<div class="actions compact">
|
||
<el-button @click="downloadStudentTemplate">下载模板</el-button>
|
||
<el-button type="primary" @click="importStudents">导入 Excel</el-button>
|
||
<span v-if="studentImportResult" class="import-result">
|
||
新增 {{ studentImportResult.created }}，更新 {{ studentImportResult.updated }}，失败 {{ studentImportResult.failed }}
|
||
</span>
|
||
</div>
|
||
<div v-if="studentImportResult?.failures.length" class="import-failures">
|
||
<span v-for="failure in studentImportResult.failures.slice(0, 5)" :key="`${failure.row}-${failure.phone}`">
|
||
第 {{ failure.row }} 行 {{ failure.phone || '-' }}：{{ failure.reason }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<el-table :data="users" stripe>
|
||
<el-table-column prop="id" label="ID" width="80" />
|
||
<el-table-column prop="phone" label="手机号" width="150" />
|
||
<el-table-column prop="name" label="姓名" width="140" />
|
||
<el-table-column prop="nickname" label="昵称" width="140" />
|
||
<el-table-column label="状态" width="130">
|
||
<template #default="{ row }"><el-switch v-model="row.status" :active-value="1" :inactive-value="0" /></template>
|
||
</el-table-column>
|
||
<el-table-column label="每日额度" width="150">
|
||
<template #default="{ row }"><el-input-number v-model="row.dailyChatLimit" :min="0" size="small" /></template>
|
||
</el-table-column>
|
||
<el-table-column prop="dailyChatUsed" label="已用" width="90" />
|
||
<el-table-column prop="lastLoginAt" label="最近登录" width="180" />
|
||
<el-table-column label="操作" width="160" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="saveUser(row)">保存</el-button>
|
||
<el-button size="small" type="danger" @click="deleteUser(row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'knowledge'">
|
||
<div class="page-head inline">
|
||
<div><h2>知识库管理</h2><p>维护飞书知识库 SpaceID 和 NodeID。</p></div>
|
||
<el-button type="warning" @click="clearFeishuCache">刷新飞书缓存</el-button>
|
||
</div>
|
||
<el-form class="knowledge-form" :model="knowledgeForm">
|
||
<el-input v-model="knowledgeForm.name" placeholder="知识库名称" />
|
||
<el-input v-model="knowledgeForm.feishuSpaceId" placeholder="SpaceID" />
|
||
<el-input v-model="knowledgeForm.feishuNodeId" placeholder="NodeID" />
|
||
<el-input v-model="knowledgeForm.remark" placeholder="备注" />
|
||
<div class="form-switch-row">
|
||
<span>启用</span>
|
||
<el-switch v-model="knowledgeForm.status" :active-value="1" :inactive-value="0" />
|
||
</div>
|
||
<div class="form-actions-inline">
|
||
<el-button type="primary" @click="saveKnowledge">{{ editingKnowledgeId ? "保存" : "新增" }}</el-button>
|
||
<el-button @click="resetKnowledgeForm">清空</el-button>
|
||
</div>
|
||
</el-form>
|
||
|
||
<el-divider />
|
||
<div class="batch-import-row">
|
||
<el-input v-model="batchNodeToken" placeholder="输入 NodeToken（如 wikcnXXX），自动获取标题与 SpaceID" style="max-width: 400px" />
|
||
<el-button type="primary" @click="batchImportKnowledge" :loading="batchImporting">导入</el-button>
|
||
</div>
|
||
<el-table :data="knowledge" stripe>
|
||
<el-table-column prop="id" label="ID" width="80" />
|
||
<el-table-column prop="name" label="名称" min-width="160" />
|
||
<el-table-column prop="feishuSpaceId" label="SpaceID" min-width="180" show-overflow-tooltip />
|
||
<el-table-column prop="feishuNodeId" label="NodeID" min-width="180" show-overflow-tooltip />
|
||
<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
|
||
<el-table-column label="状态" width="120">
|
||
<template #default="{ row }">
|
||
<el-switch
|
||
v-model="row.status"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
@change="saveKnowledgeRow(row)"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="160" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="editKnowledge(row)">编辑</el-button>
|
||
<el-button size="small" type="danger" @click="deleteKnowledge(row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'prompt'">
|
||
<div class="page-head inline">
|
||
<div><h2>Agent 管理</h2><p>配置提示词、模型、知识库和调试参数，并在右侧实时预览对话效果。</p></div>
|
||
<el-button @click="resetPrompt">恢复默认提示词</el-button>
|
||
</div>
|
||
<section class="agent-workbench">
|
||
<div class="agent-config-panel">
|
||
<el-form label-position="top">
|
||
<el-form-item label="Agent 提示词">
|
||
<el-input v-model="promptContent" type="textarea" :rows="10" />
|
||
</el-form-item>
|
||
<div class="agent-config-grid">
|
||
<el-form-item label="调试模型">
|
||
<el-select v-model="agentForm.modelId" placeholder="选择已接入模型">
|
||
<el-option
|
||
v-for="model in models"
|
||
:key="model.id"
|
||
:label="model.displayName || model.modelName"
|
||
:value="model.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="调试知识库">
|
||
<el-select v-model="agentForm.knowledgeIds" multiple collapse-tags placeholder="默认使用全部启用知识库">
|
||
<el-option v-for="item in knowledge" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="Temperature">
|
||
<el-input-number v-model="agentForm.temperature" :min="0" :max="2" :step="0.1" />
|
||
</el-form-item>
|
||
<el-form-item label="Top P">
|
||
<el-input-number v-model="agentForm.topP" :min="0" :max="1" :step="0.05" />
|
||
</el-form-item>
|
||
<el-form-item label="Top K">
|
||
<el-input-number v-model="agentForm.topK" :min="1" :max="1000" />
|
||
</el-form-item>
|
||
<el-form-item label="Max Tokens">
|
||
<el-input-number v-model="agentForm.maxToken" :min="1" :max="100000" />
|
||
</el-form-item>
|
||
<el-form-item label="Presence Penalty">
|
||
<el-input-number v-model="agentForm.presencePenalty" :min="-2" :max="2" :step="0.1" />
|
||
</el-form-item>
|
||
<el-form-item label="Frequency Penalty">
|
||
<el-input-number v-model="agentForm.frequencyPenalty" :min="-2" :max="2" :step="0.1" />
|
||
</el-form-item>
|
||
</div>
|
||
<div class="actions">
|
||
<el-button type="primary" @click="savePrompt">保存 Agent 提示词</el-button>
|
||
<el-button @click="clearAgentPreview">清空预览</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<aside class="agent-preview-panel">
|
||
<div class="agent-preview-head">
|
||
<h3>调试预览</h3>
|
||
<span>{{ models.find((model) => model.id === agentForm.modelId)?.modelName || "未选择模型" }}</span>
|
||
</div>
|
||
<div class="agent-preview-chat">
|
||
<article
|
||
v-for="(message, index) in agentPreviewMessages"
|
||
:key="`${message.role}-${index}`"
|
||
class="agent-preview-message-row"
|
||
:class="message.role"
|
||
>
|
||
<div class="agent-preview-avatar">{{ message.role === "user" ? "你" : "AI" }}</div>
|
||
<div class="agent-preview-bubble">
|
||
<strong>{{ message.role === "user" ? "你" : "Agent" }}</strong>
|
||
<template v-if="message.role === 'assistant'">
|
||
<details v-if="agentMessageParts(message.content).reasoning" class="agent-preview-thinking">
|
||
<summary>思考过程</summary>
|
||
<pre>{{ agentMessageParts(message.content).reasoning }}</pre>
|
||
</details>
|
||
<pre>{{ agentMessageParts(message.content).answer }}</pre>
|
||
</template>
|
||
<pre v-else>{{ message.content }}</pre>
|
||
</div>
|
||
</article>
|
||
<article v-if="agentDebugging" class="agent-preview-message-row assistant thinking">
|
||
<div class="agent-preview-avatar">AI</div>
|
||
<div class="agent-preview-bubble">
|
||
<strong>Agent</strong>
|
||
<pre>正在思考中...</pre>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="agent-preview-composer">
|
||
<el-input
|
||
v-model="agentForm.question"
|
||
type="textarea"
|
||
:rows="2"
|
||
resize="none"
|
||
placeholder="向 Agent 发送测试问题"
|
||
@keydown.enter.exact.prevent="debugAgent"
|
||
/>
|
||
<el-button type="primary" :loading="agentDebugging" @click="debugAgent">发送</el-button>
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'models'">
|
||
<div class="page-head inline">
|
||
<div><h2>模型管理</h2><p>DeepSeek、MiniMax 可快速添加；其他供应商按 OpenAI 兼容或 Anthropic Messages 协议添加。</p></div>
|
||
<el-button @click="resetModelForm">清空表单</el-button>
|
||
</div>
|
||
|
||
<section class="quick-model-panel">
|
||
<div class="quick-model-head">
|
||
<div>
|
||
<h3>快速添加</h3>
|
||
<p>适用于 DeepSeek 和 MiniMax，只需要填写 API Key 并选择模型。</p>
|
||
</div>
|
||
</div>
|
||
<div class="quick-model-grid">
|
||
<el-form-item label="厂商">
|
||
<el-select v-model="quickModelForm.provider" @change="applyQuickProvider">
|
||
<el-option
|
||
v-for="provider in quickModelProviders"
|
||
:key="provider.provider"
|
||
:label="provider.label"
|
||
:value="provider.provider"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="模型">
|
||
<el-select v-model="quickModelForm.modelName" :key="quickModelForm.provider">
|
||
<el-option
|
||
v-for="model in selectedQuickProvider.models"
|
||
:key="model.value"
|
||
:label="model.label"
|
||
:value="model.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="API Key">
|
||
<el-input v-model="quickModelForm.apiKey" placeholder="填写后保存，列表中只展示掩码" show-password />
|
||
</el-form-item>
|
||
<el-form-item label=" ">
|
||
<el-button type="primary" class="full-btn" @click="quickAddModel">快速新增</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</section>
|
||
|
||
<el-form class="model-config-panel" label-position="top" :model="modelForm">
|
||
<div class="model-config-grid">
|
||
<el-form-item label="协议模板">
|
||
<el-select placeholder="选择协议模板" clearable @change="applyModelPreset">
|
||
<el-option v-for="preset in protocolPresets" :key="preset.label" :label="preset.label" :value="preset.label" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="供应商标识">
|
||
<el-input v-model="modelForm.provider" placeholder="custom-openai / custom-anthropic" />
|
||
</el-form-item>
|
||
<el-form-item label="显示名称">
|
||
<el-input v-model="modelForm.displayName" placeholder="例如：自建网关生产模型" />
|
||
</el-form-item>
|
||
<el-form-item label="协议类型">
|
||
<el-select v-model="modelForm.apiType">
|
||
<el-option label="OpenAI 兼容" value="openai_compatible" />
|
||
<el-option label="Anthropic Messages" value="anthropic_messages" />
|
||
<el-option label="MiniMax 官方" value="minimax" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="模型名">
|
||
<el-input v-model="modelForm.modelName" placeholder="gpt-4.1 / deepseek-chat / claude..." />
|
||
</el-form-item>
|
||
<el-form-item label="Base URL">
|
||
<el-input v-model="modelForm.baseUrl" placeholder="https://api.example.com/v1" />
|
||
</el-form-item>
|
||
<el-form-item label="API URL（可覆盖）">
|
||
<el-input v-model="modelForm.apiUrl" placeholder="留空则按协议自动拼接" />
|
||
</el-form-item>
|
||
<el-form-item label="鉴权方式">
|
||
<el-select v-model="modelForm.authType">
|
||
<el-option label="Bearer Token" value="bearer" />
|
||
<el-option label="x-api-key" value="api_key" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="API Key">
|
||
<el-input v-model="modelForm.apiKey" placeholder="保存时会覆盖旧 Key" show-password />
|
||
</el-form-item>
|
||
<el-form-item label="API Version">
|
||
<el-input v-model="modelForm.apiVersion" placeholder="Anthropic 默认 2023-06-01" />
|
||
</el-form-item>
|
||
<el-form-item label="超时秒数">
|
||
<el-input-number v-model="modelForm.timeoutSecond" :min="1" :max="300" />
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="modelForm.remark" placeholder="用途、额度、注意事项等" />
|
||
</el-form-item>
|
||
<div class="actions">
|
||
<el-button type="primary" @click="saveModel">{{ editingModelId ? "保存模型" : "新增模型" }}</el-button>
|
||
<el-button @click="resetModelForm">取消编辑</el-button>
|
||
</div>
|
||
</el-form>
|
||
<el-table :data="models" stripe>
|
||
<el-table-column prop="displayName" label="显示名称" width="170" />
|
||
<el-table-column prop="provider" label="Provider" />
|
||
<el-table-column prop="apiType" label="协议" width="170" />
|
||
<el-table-column prop="modelName" label="模型" />
|
||
<el-table-column prop="baseUrl" label="Base URL" min-width="220" show-overflow-tooltip />
|
||
<el-table-column prop="authType" label="鉴权" width="110" />
|
||
<el-table-column prop="enabled" label="启用" width="90" />
|
||
<el-table-column label="操作" width="210" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="editModel(row)">编辑</el-button>
|
||
<el-button size="small" @click="testModel(row.id)">测试</el-button>
|
||
<el-button size="small" type="primary" @click="enableModel(row.id)">启用</el-button>
|
||
<el-button size="small" type="danger" @click="deleteModel(row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'configs'">
|
||
<div class="page-head inline">
|
||
<div><h2>系统配置</h2><p>按业务分组维护运行时配置，默认每日额度已接入学员新增和导入。</p></div>
|
||
<el-button type="primary" @click="saveSystemSettings">保存系统配置</el-button>
|
||
</div>
|
||
<section class="settings-grid">
|
||
<div v-for="section in systemSettingSections" :key="section.title" class="settings-section">
|
||
<div class="settings-section-head">
|
||
<h3>{{ section.title }}</h3>
|
||
<p>{{ section.description }}</p>
|
||
</div>
|
||
<div class="settings-fields">
|
||
<label v-for="setting in section.settings" :key="setting.key" class="setting-field">
|
||
<span>{{ setting.label }}</span>
|
||
<el-input-number
|
||
v-if="setting.type === 'number'"
|
||
v-model="systemSettingValues[setting.key]"
|
||
:min="setting.min"
|
||
:max="setting.max"
|
||
/>
|
||
<el-input
|
||
v-else-if="setting.type === 'text'"
|
||
v-model="systemSettingValues[setting.key]"
|
||
:placeholder="setting.placeholder"
|
||
/>
|
||
<el-input
|
||
v-else-if="setting.type === 'password'"
|
||
v-model="systemSettingValues[setting.key]"
|
||
:placeholder="setting.placeholder"
|
||
type="password"
|
||
show-password
|
||
/>
|
||
<el-switch v-else v-model="systemSettingValues[setting.key]" />
|
||
<small>{{ setting.description }}</small>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template v-if="activeMenu === 'records'">
|
||
<div class="page-head"><h2>记录审计</h2><p>聊天、AI 请求和后台操作记录。</p></div>
|
||
<el-tabs v-model="recordTab">
|
||
<el-tab-pane label="聊天记录" name="chats">
|
||
<div class="record-filter">
|
||
<el-input v-model="chatFilters.keyword" placeholder="搜索标题、手机号、姓名、聊天内容" clearable />
|
||
<el-input-number v-model="chatFilters.userId" :min="1" placeholder="用户ID" />
|
||
<el-select v-model="chatFilters.status" placeholder="消息状态" clearable>
|
||
<el-option label="全部状态" value="" />
|
||
<el-option label="已完成" value="FINISHED" />
|
||
<el-option label="生成中" value="GENERATING" />
|
||
<el-option label="已停止" value="STOPPED" />
|
||
<el-option label="失败" value="FAILED" />
|
||
</el-select>
|
||
<el-date-picker
|
||
v-model="chatFilters.dateFrom"
|
||
class="record-date-item"
|
||
type="datetime"
|
||
placeholder="开始时间"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
<span class="record-date-sep">至</span>
|
||
<el-date-picker
|
||
v-model="chatFilters.dateTo"
|
||
class="record-date-item"
|
||
type="datetime"
|
||
placeholder="结束时间"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
<div class="record-filter-actions">
|
||
<el-button type="primary" @click="searchChats">搜索</el-button>
|
||
<el-button @click="resetChatFilters">重置</el-button>
|
||
<el-button @click="exportChats">导出</el-button>
|
||
</div>
|
||
</div>
|
||
<el-table :data="chats" stripe>
|
||
<el-table-column prop="id" label="会话ID" width="90" />
|
||
<el-table-column prop="userPhone" label="手机号" width="140" />
|
||
<el-table-column prop="userName" label="用户" width="120" />
|
||
<el-table-column prop="title" label="会话标题" min-width="220" show-overflow-tooltip />
|
||
<el-table-column prop="messageCount" label="消息数" width="90" />
|
||
<el-table-column prop="lastMessageAt" label="最后消息" width="180" />
|
||
<el-table-column label="操作" width="100" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="openChatDetail(row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="AI 请求" name="aiLogs">
|
||
<el-table :data="aiLogs" stripe>
|
||
<el-table-column prop="sessionId" label="会话ID" width="90" />
|
||
<el-table-column prop="modelName" label="模型" width="160" />
|
||
<el-table-column prop="knowledgeIds" label="知识库" width="120" />
|
||
<el-table-column prop="retrieveCount" label="命中" width="80" />
|
||
<el-table-column label="片段" width="80">
|
||
<template #default="{ row }">
|
||
{{ row.retrievedChunks?.length || 0 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="totalToken" label="Token" width="90" />
|
||
<el-table-column prop="costMs" label="耗时(ms)" width="100" />
|
||
<el-table-column prop="status" label="状态" width="100" />
|
||
<el-table-column prop="errorMessage" label="错误" min-width="220" show-overflow-tooltip />
|
||
<el-table-column label="操作" width="100" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="openAiLogDetail(row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="操作日志" name="operationLogs">
|
||
<el-table :data="operationLogs" stripe>
|
||
<el-table-column prop="module" label="模块" />
|
||
<el-table-column prop="action" label="动作" />
|
||
<el-table-column prop="result" label="结果" />
|
||
<el-table-column prop="createdAt" label="时间" />
|
||
</el-table>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</template>
|
||
</section>
|
||
</section>
|
||
|
||
<el-drawer v-model="chatDetailOpen" size="760px" title="聊天详情">
|
||
<template v-if="chatDetail">
|
||
<section class="chat-summary">
|
||
<div><span>会话ID</span><strong>{{ chatDetail.session.id }}</strong></div>
|
||
<div><span>用户</span><strong>{{ chatDetail.session.userName || '-' }}</strong></div>
|
||
<div><span>手机号</span><strong>{{ chatDetail.session.userPhone || '-' }}</strong></div>
|
||
<div><span>消息数</span><strong>{{ chatDetail.session.messageCount }}</strong></div>
|
||
</section>
|
||
|
||
<h3 class="detail-title">完整对话</h3>
|
||
<section class="conversation-list">
|
||
<article
|
||
v-for="message in chatDetail.messages"
|
||
:key="message.id"
|
||
class="conversation-message"
|
||
:class="message.role"
|
||
>
|
||
<div class="message-meta">
|
||
<strong>{{ message.role === 'user' ? '用户' : 'AI 助手' }}</strong>
|
||
<span>{{ message.createdAt }}</span>
|
||
</div>
|
||
<pre>{{ message.content }}</pre>
|
||
<div class="message-extra">
|
||
<span>状态：{{ message.messageStatus }}</span>
|
||
<span v-if="message.tokenInput">输入 Token：{{ message.tokenInput }}</span>
|
||
<span v-if="message.tokenOutput">输出 Token：{{ message.tokenOutput }}</span>
|
||
<span v-if="message.responseTimeMs">耗时：{{ message.responseTimeMs }}ms</span>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<h3 class="detail-title">关联 AI 请求</h3>
|
||
<el-collapse>
|
||
<el-collapse-item v-for="log in chatDetail.aiLogs" :key="log.id" :title="`请求 #${log.id} / ${log.status}`">
|
||
<div class="ai-log-grid">
|
||
<span>模型：{{ log.modelName || '-' }}</span>
|
||
<span>知识库：{{ log.knowledgeIds || '-' }}</span>
|
||
<span>命中数：{{ log.retrieveCount }}</span>
|
||
<span>Token：{{ log.totalToken || '-' }}</span>
|
||
<span>耗时：{{ log.costMs || '-' }}ms</span>
|
||
<span>时间：{{ log.createdAt }}</span>
|
||
</div>
|
||
<section v-if="log.retrievedChunks?.length" class="retrieval-chunks">
|
||
<article v-for="chunk in log.retrievedChunks" :key="`${log.id}-${chunk.index}`" class="retrieval-chunk">
|
||
<div class="chunk-head">
|
||
<strong>#{{ chunk.index }} {{ chunk.knowledgeName || '未知知识库' }}</strong>
|
||
<span>{{ chunk.title || '未命名片段' }}</span>
|
||
</div>
|
||
<pre>{{ chunk.content }}</pre>
|
||
<a v-if="chunk.sourceUrl" :href="chunk.sourceUrl" target="_blank" rel="noreferrer">查看来源</a>
|
||
</article>
|
||
</section>
|
||
<el-empty v-else description="本条请求未保存召回片段" :image-size="64" />
|
||
<pre class="prompt-preview">{{ log.prompt || '无 Prompt 记录' }}</pre>
|
||
<p v-if="log.errorMessage" class="error-text">{{ log.errorMessage }}</p>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</template>
|
||
</el-drawer>
|
||
|
||
<el-drawer v-model="aiLogDetailOpen" size="820px" title="AI 请求详情">
|
||
<template v-if="selectedAiLog">
|
||
<section class="chat-summary">
|
||
<div><span>请求ID</span><strong>{{ selectedAiLog.id }}</strong></div>
|
||
<div><span>会话ID</span><strong>{{ selectedAiLog.sessionId || '-' }}</strong></div>
|
||
<div><span>消息ID</span><strong>{{ selectedAiLog.messageId || '-' }}</strong></div>
|
||
<div><span>用户ID</span><strong>{{ selectedAiLog.userId || '-' }}</strong></div>
|
||
<div><span>模型</span><strong>{{ selectedAiLog.modelName || '-' }}</strong></div>
|
||
<div><span>状态</span><strong>{{ selectedAiLog.status }}</strong></div>
|
||
</section>
|
||
|
||
<section class="audit-detail-grid">
|
||
<span>知识库：{{ selectedAiLog.knowledgeIds || '-' }}</span>
|
||
<span>命中数：{{ selectedAiLog.retrieveCount }}</span>
|
||
<span>片段数：{{ selectedAiLog.retrievedChunks?.length || 0 }}</span>
|
||
<span>输入 Token：{{ selectedAiLog.inputToken || '-' }}</span>
|
||
<span>输出 Token：{{ selectedAiLog.outputToken || '-' }}</span>
|
||
<span>总 Token：{{ selectedAiLog.totalToken || '-' }}</span>
|
||
<span>耗时：{{ selectedAiLog.costMs || '-' }}ms</span>
|
||
<span>时间：{{ selectedAiLog.createdAt }}</span>
|
||
</section>
|
||
|
||
<p v-if="selectedAiLog.errorMessage" class="error-text">{{ selectedAiLog.errorMessage }}</p>
|
||
|
||
<h3 class="detail-title">召回知识片段</h3>
|
||
<section v-if="selectedAiLog.retrievedChunks?.length" class="retrieval-chunks">
|
||
<article
|
||
v-for="chunk in selectedAiLog.retrievedChunks"
|
||
:key="`${selectedAiLog.id}-${chunk.index}`"
|
||
class="retrieval-chunk"
|
||
>
|
||
<div class="chunk-head">
|
||
<strong>片段 {{ chunk.index }}/{{ selectedAiLog.retrievedChunks.length }}</strong>
|
||
<span>{{ chunk.knowledgeName || '未知知识库' }}</span>
|
||
<span v-if="chunk.knowledgeId">知识库ID：{{ chunk.knowledgeId }}</span>
|
||
</div>
|
||
<div class="chunk-title">{{ chunk.title || '未命名片段' }}</div>
|
||
<pre>{{ chunk.content }}</pre>
|
||
<a v-if="chunk.sourceUrl" :href="chunk.sourceUrl" target="_blank" rel="noreferrer">查看来源</a>
|
||
</article>
|
||
</section>
|
||
<el-empty v-else description="本条请求未保存召回片段" :image-size="72" />
|
||
|
||
<h3 class="detail-title">完整 Prompt</h3>
|
||
<pre class="prompt-preview">{{ selectedAiLog.prompt || '无 Prompt 记录' }}</pre>
|
||
</template>
|
||
</el-drawer>
|
||
</main>
|
||
</template>
|