983 lines
34 KiB
HTML
983 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI对话系统 - 后台管理</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.header {
|
||
background: #202123;
|
||
color: #fff;
|
||
padding: 16px 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.header-links {
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.header-links a {
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.header-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 24px auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.stat-card h3 {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-card .value {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 12px 24px;
|
||
background: #fff;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: #10a37f;
|
||
color: #fff;
|
||
border-color: #10a37f;
|
||
}
|
||
|
||
.tab-content {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.tab-panel {
|
||
display: none;
|
||
}
|
||
|
||
.tab-panel.active {
|
||
display: block;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th, td {
|
||
padding: 12px 16px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
th {
|
||
font-weight: 600;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
td {
|
||
color: #333;
|
||
}
|
||
|
||
tr:hover {
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
/* AI配置专用样式 */
|
||
.ai-config-section {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.ai-config-section h3 {
|
||
font-size: 18px;
|
||
color: #333;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ai-config-section h3 i {
|
||
color: #10a37f;
|
||
}
|
||
|
||
.ai-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.ai-status.ok {
|
||
border: 1px solid #10a37f;
|
||
}
|
||
|
||
.ai-status.error {
|
||
border: 1px solid #dc3545;
|
||
}
|
||
|
||
.ai-status-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ai-status-dot.ok {
|
||
background: #10a37f;
|
||
}
|
||
|
||
.ai-status-dot.error {
|
||
background: #dc3545;
|
||
}
|
||
|
||
.ai-status-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.ai-config-form {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.config-row {
|
||
display: grid;
|
||
grid-template-columns: 150px 1fr;
|
||
gap: 16px;
|
||
align-items: center;
|
||
}
|
||
|
||
.config-row label {
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.config-row input, .config-row select {
|
||
padding: 12px 16px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
width: 100%;
|
||
}
|
||
|
||
.config-row input:focus, .config-row select:focus {
|
||
outline: none;
|
||
border-color: #10a37f;
|
||
}
|
||
|
||
/* 模型输入组合框 */
|
||
.model-input-wrapper {
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
|
||
.model-input-wrapper input {
|
||
flex: 1;
|
||
padding-right: 40px;
|
||
}
|
||
|
||
.btn-model-dropdown {
|
||
position: absolute;
|
||
right: 4px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 32px;
|
||
height: 32px;
|
||
background: #f0f0f0;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #666;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-model-dropdown:hover {
|
||
background: #e0e0e0;
|
||
color: #333;
|
||
}
|
||
|
||
/* datalist样式提示 */
|
||
.model-input-wrapper input::-webkit-calendar-picker-indicator {
|
||
opacity: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.config-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
border: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #10a37f;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #0d8c6d;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.btn-test {
|
||
background: #007bff;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-test:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.test-result {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.test-result.success {
|
||
background: #d4edda;
|
||
border: 1px solid #10a37f;
|
||
color: #155724;
|
||
}
|
||
|
||
.test-result.error {
|
||
background: #f8d7da;
|
||
border: 1px solid #dc3545;
|
||
color: #721c24;
|
||
}
|
||
|
||
/* 原有配置表单样式 */
|
||
.config-form {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.config-form input, .config-form textarea {
|
||
padding: 12px 16px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.config-form input {
|
||
width: 200px;
|
||
}
|
||
|
||
.config-form textarea {
|
||
width: 300px;
|
||
resize: vertical;
|
||
min-height: 60px;
|
||
}
|
||
|
||
.config-list {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.config-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background: #f9f9f9;
|
||
border-radius: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.config-item .key {
|
||
font-weight: 600;
|
||
width: 200px;
|
||
color: #333;
|
||
}
|
||
|
||
.config-item .value {
|
||
flex: 1;
|
||
color: #666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.config-item .desc {
|
||
color: #999;
|
||
font-size: 12px;
|
||
width: 200px;
|
||
}
|
||
|
||
.badge {
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.badge.web {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.badge.matrix {
|
||
background: #f3e5f5;
|
||
color: #7b1fa2;
|
||
}
|
||
|
||
.badge.active {
|
||
background: #e8f5e9;
|
||
color: #2e7d32;
|
||
}
|
||
|
||
.badge.inactive {
|
||
background: #ffebee;
|
||
color: #c62828;
|
||
}
|
||
|
||
.message-preview {
|
||
max-width: 300px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.loading {
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>🤖 AI对话系统 - 后台管理</h1>
|
||
<div class="header-links">
|
||
<a href="/">← 返回聊天</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="stats-grid" id="statsGrid">
|
||
<div class="stat-card">
|
||
<h3>总用户数</h3>
|
||
<div class="value" id="totalUsers">-</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>总对话数</h3>
|
||
<div class="value" id="totalConversations">-</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>总消息数</h3>
|
||
<div class="value" id="totalMessages">-</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab-btn active" onclick="switchTab('ai')">🧠 AI配置</button>
|
||
<button class="tab-btn" onclick="switchTab('users')">👥 用户管理</button>
|
||
<button class="tab-btn" onclick="switchTab('conversations')">💬 对话记录</button>
|
||
<button class="tab-btn" onclick="switchTab('config')">⚙️ 其他配置</button>
|
||
</div>
|
||
|
||
<div class="tab-content">
|
||
<!-- AI配置 -->
|
||
<div class="tab-panel active" id="aiPanel">
|
||
<div class="ai-config-section">
|
||
<h3><i class="ri-robot-line"></i> 大模型配置</h3>
|
||
|
||
<div class="ai-status" id="aiStatus">
|
||
<div class="ai-status-dot" id="aiStatusDot"></div>
|
||
<div class="ai-status-text" id="aiStatusText">检测中...</div>
|
||
</div>
|
||
|
||
<div class="ai-config-form">
|
||
<div class="config-row">
|
||
<label>API地址</label>
|
||
<input type="text" id="aiApiBase" placeholder="http://192.168.2.17:19007/v1">
|
||
</div>
|
||
|
||
<div class="config-row">
|
||
<label>API密钥</label>
|
||
<input type="text" id="aiApiKey" placeholder="xxxx">
|
||
</div>
|
||
|
||
<div class="config-row">
|
||
<label>模型</label>
|
||
<div class="model-input-wrapper">
|
||
<input type="text" id="aiModel" list="modelList" placeholder="选择或输入模型名称">
|
||
<datalist id="modelList">
|
||
<option value="auto">auto (自动选择)</option>
|
||
<option value="qwen3.5-4b">qwen3.5-4b</option>
|
||
<option value="dsv32">dsv32</option>
|
||
<option value="glm-4">glm-4</option>
|
||
<option value="gpt-4o">gpt-4o</option>
|
||
<option value="claude-3-opus">claude-3-opus</option>
|
||
</datalist>
|
||
<button class="btn-model-dropdown" onclick="toggleModelDropdown()" title="显示预设模型">
|
||
<i class="ri-arrow-down-s-line"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="config-actions">
|
||
<button class="btn btn-primary" onclick="saveAIConfig()">
|
||
<i class="ri-save-line"></i> 保存配置
|
||
</button>
|
||
<button class="btn btn-test" onclick="testAIConnection()">
|
||
<i class="ri-link"></i> 测试连接
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="refreshModels()">
|
||
<i class="ri-refresh-line"></i> 刷新模型列表
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-result" id="testResult" style="display: none;"></div>
|
||
</div>
|
||
|
||
<div class="ai-config-section">
|
||
<h3><i class="ri-information-line"></i> 当前状态</h3>
|
||
<table>
|
||
<tr>
|
||
<th>配置项</th>
|
||
<th>当前值</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
<tr>
|
||
<td>API地址</td>
|
||
<td id="currentApiBase">-</td>
|
||
<td><span class="badge" id="apiBaseStatus">-</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>模型</td>
|
||
<td id="currentModel">-</td>
|
||
<td><span class="badge" id="modelStatus">-</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>连接状态</td>
|
||
<td id="connectionStatus">-</td>
|
||
<td><span class="badge" id="connectionBadge">检测中</span></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户管理 -->
|
||
<div class="tab-panel" id="usersPanel">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>用户ID</th>
|
||
<th>显示名称</th>
|
||
<th>类型</th>
|
||
<th>创建时间</th>
|
||
<th>最后活跃</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="usersTableBody">
|
||
<tr><td colspan="6">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 对话记录 -->
|
||
<div class="tab-panel" id="conversationsPanel">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>会话ID</th>
|
||
<th>用户</th>
|
||
<th>标题</th>
|
||
<th>消息数</th>
|
||
<th>创建时间</th>
|
||
<th>最后更新</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="conversationsTableBody">
|
||
<tr><td colspan="7">加载中...</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 其他配置 -->
|
||
<div class="tab-panel" id="configPanel">
|
||
<div class="config-form">
|
||
<input type="text" id="configKey" placeholder="配置键名">
|
||
<textarea id="configValue" placeholder="配置值"></textarea>
|
||
<input type="text" id="configDesc" placeholder="描述（可选）">
|
||
<button class="btn btn-primary" onclick="saveConfig()">保存</button>
|
||
</div>
|
||
|
||
<div class="config-list" id="configList">
|
||
<!-- 配置列表 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
loadStats();
|
||
loadAIConfig();
|
||
loadUsers();
|
||
loadConversations();
|
||
loadConfig();
|
||
});
|
||
|
||
// 切换标签页
|
||
function switchTab(tabName) {
|
||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||
document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
|
||
|
||
document.querySelector(`.tab-btn[onclick="switchTab('${tabName}')"]`).classList.add('active');
|
||
document.getElementById(`${tabName}Panel`).classList.add('active');
|
||
}
|
||
|
||
// 切换模型下拉显示
|
||
function toggleModelDropdown() {
|
||
const input = document.getElementById('aiModel');
|
||
input.focus();
|
||
// 触发datalist显示
|
||
if (input.showPicker) {
|
||
input.showPicker();
|
||
} else {
|
||
// 兼容性处理：模拟点击
|
||
input.click();
|
||
}
|
||
}
|
||
|
||
// 加载AI配置
|
||
async function loadAIConfig() {
|
||
try {
|
||
const response = await fetch('/api/admin/ai-config');
|
||
const data = await response.json();
|
||
|
||
document.getElementById('aiApiBase').value = data.api_base || '';
|
||
document.getElementById('aiApiKey').value = data.api_key || '';
|
||
document.getElementById('aiModel').value = data.model || 'auto';
|
||
|
||
// 更新当前状态显示
|
||
document.getElementById('currentApiBase').textContent = data.api_base || '-';
|
||
document.getElementById('currentModel').textContent = data.model || '-';
|
||
|
||
// 更新状态指示
|
||
if (data.use_mock) {
|
||
document.getElementById('aiStatusDot').className = 'ai-status-dot error';
|
||
document.getElementById('aiStatusText').textContent = '当前使用Mock模式（未连接真实API）';
|
||
document.getElementById('aiStatus').className = 'ai-status error';
|
||
document.getElementById('connectionStatus').textContent = 'Mock模式';
|
||
document.getElementById('connectionBadge').className = 'badge inactive';
|
||
document.getElementById('connectionBadge').textContent = '未连接';
|
||
} else {
|
||
document.getElementById('aiStatusDot').className = 'ai-status-dot ok';
|
||
document.getElementById('aiStatusText').textContent = '已配置真实API';
|
||
document.getElementById('aiStatus').className = 'ai-status ok';
|
||
document.getElementById('connectionStatus').textContent = '已配置';
|
||
document.getElementById('connectionBadge').className = 'badge active';
|
||
document.getElementById('connectionBadge').textContent = '待测试';
|
||
}
|
||
|
||
document.getElementById('apiBaseStatus').className = 'badge active';
|
||
document.getElementById('apiBaseStatus').textContent = '已配置';
|
||
document.getElementById('modelStatus').className = 'badge active';
|
||
document.getElementById('modelStatus').textContent = data.model || 'auto';
|
||
|
||
} catch (error) {
|
||
console.error('加载AI配置失败:', error);
|
||
}
|
||
}
|
||
|
||
// 保存AI配置
|
||
async function saveAIConfig() {
|
||
const apiBase = document.getElementById('aiApiBase').value.trim();
|
||
const apiKey = document.getElementById('aiApiKey').value.trim();
|
||
const model = document.getElementById('aiModel').value.trim();
|
||
|
||
if (!apiBase) {
|
||
alert('请填写API地址');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const btn = event.target;
|
||
btn.classList.add('loading');
|
||
btn.textContent = '保存中...';
|
||
|
||
const response = await fetch('/api/admin/ai-config', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({api_base: apiBase, api_key: apiKey, model: model})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
btn.classList.remove('loading');
|
||
btn.innerHTML = '<i class="ri-save-line"></i> 保存配置';
|
||
|
||
if (data.success) {
|
||
// 显示成功提示
|
||
const resultDiv = document.getElementById('testResult');
|
||
resultDiv.style.display = 'block';
|
||
resultDiv.className = 'test-result success';
|
||
resultDiv.innerHTML = `<i class="ri-check-line"></i> ${data.message}`;
|
||
|
||
// 重新加载配置
|
||
loadAIConfig();
|
||
|
||
// 3秒后隐藏提示
|
||
setTimeout(() => resultDiv.style.display = 'none', 3000);
|
||
} else {
|
||
alert('保存失败: ' + (data.message || '未知错误'));
|
||
}
|
||
} catch (error) {
|
||
console.error('保存AI配置失败:', error);
|
||
alert('保存失败: ' + error.message);
|
||
event.target.classList.remove('loading');
|
||
event.target.innerHTML = '<i class="ri-save-line"></i> 保存配置';
|
||
}
|
||
}
|
||
|
||
// 测试AI连接
|
||
async function testAIConnection() {
|
||
try {
|
||
const btn = event.target;
|
||
btn.classList.add('loading');
|
||
btn.innerHTML = '<i class="ri-loader-line"></i> 测试中...';
|
||
|
||
const response = await fetch('/api/admin/test-ai', {
|
||
method: 'POST'
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
btn.classList.remove('loading');
|
||
btn.innerHTML = '<i class="ri-link"></i> 测试连接';
|
||
|
||
const resultDiv = document.getElementById('testResult');
|
||
resultDiv.style.display = 'block';
|
||
|
||
if (data.success) {
|
||
resultDiv.className = 'test-result success';
|
||
resultDiv.innerHTML = `<i class="ri-check-line"></i> <strong>连接成功！</strong><br>模型: ${data.model}<br>响应: ${data.message}`;
|
||
|
||
// 更新连接状态
|
||
document.getElementById('aiStatusDot').className = 'ai-status-dot ok';
|
||
document.getElementById('aiStatusText').textContent = '连接正常';
|
||
document.getElementById('aiStatus').className = 'ai-status ok';
|
||
document.getElementById('connectionStatus').textContent = '正常';
|
||
document.getElementById('connectionBadge').className = 'badge active';
|
||
document.getElementById('connectionBadge').textContent = '已连接';
|
||
} else {
|
||
resultDiv.className = 'test-result error';
|
||
resultDiv.innerHTML = `<i class="ri-close-line"></i> <strong>连接失败</strong><br>${data.message}`;
|
||
|
||
// 更新连接状态
|
||
document.getElementById('aiStatusDot').className = 'ai-status-dot error';
|
||
document.getElementById('aiStatusText').textContent = '连接失败';
|
||
document.getElementById('aiStatus').className = 'ai-status error';
|
||
document.getElementById('connectionStatus').textContent = '失败';
|
||
document.getElementById('connectionBadge').className = 'badge inactive';
|
||
document.getElementById('connectionBadge').textContent = '错误';
|
||
}
|
||
} catch (error) {
|
||
console.error('测试连接失败:', error);
|
||
event.target.classList.remove('loading');
|
||
event.target.innerHTML = '<i class="ri-link"></i> 测试连接';
|
||
|
||
const resultDiv = document.getElementById('testResult');
|
||
resultDiv.style.display = 'block';
|
||
resultDiv.className = 'test-result error';
|
||
resultDiv.innerHTML = `<i class="ri-close-line"></i> 测试失败: ${error.message}`;
|
||
}
|
||
}
|
||
|
||
// 刷新模型列表
|
||
async function refreshModels() {
|
||
try {
|
||
const btn = event.target;
|
||
btn.classList.add('loading');
|
||
btn.innerHTML = '<i class="ri-loader-line"></i> 刷新中...';
|
||
|
||
const response = await fetch('/api/admin/models');
|
||
const data = await response.json();
|
||
|
||
btn.classList.remove('loading');
|
||
btn.innerHTML = '<i class="ri-refresh-line"></i> 刷新模型列表';
|
||
|
||
// 更新datalist
|
||
const datalist = document.getElementById('modelList');
|
||
datalist.innerHTML = '';
|
||
|
||
for (const model of data.models) {
|
||
const option = document.createElement('option');
|
||
option.value = model.id;
|
||
option.textContent = model.name;
|
||
datalist.appendChild(option);
|
||
}
|
||
|
||
// 显示提示
|
||
const resultDiv = document.getElementById('testResult');
|
||
resultDiv.style.display = 'block';
|
||
resultDiv.className = 'test-result success';
|
||
resultDiv.innerHTML = `<i class="ri-check-line"></i> 获取到 ${data.models.length} 个模型，可在输入框中选择`;
|
||
|
||
if (!data.success) {
|
||
resultDiv.className = 'test-result error';
|
||
resultDiv.innerHTML = `<i class="ri-warning-line"></i> ${data.message || '使用默认模型列表'}`;
|
||
}
|
||
|
||
setTimeout(() => resultDiv.style.display = 'none', 3000);
|
||
|
||
} catch (error) {
|
||
console.error('刷新模型列表失败:', error);
|
||
event.target.classList.remove('loading');
|
||
event.target.innerHTML = '<i class="ri-refresh-line"></i> 刷新模型列表';
|
||
}
|
||
}
|
||
|
||
// 加载统计数据
|
||
async function loadStats() {
|
||
try {
|
||
const response = await fetch('/api/admin/stats');
|
||
const data = await response.json();
|
||
|
||
document.getElementById('totalUsers').textContent = data.total_users;
|
||
document.getElementById('totalConversations').textContent = data.total_conversations;
|
||
document.getElementById('totalMessages').textContent = data.total_messages;
|
||
} catch (error) {
|
||
console.error('加载统计失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载用户列表
|
||
async function loadUsers() {
|
||
try {
|
||
const response = await fetch('/api/admin/users');
|
||
const data = await response.json();
|
||
|
||
const tbody = document.getElementById('usersTableBody');
|
||
|
||
if (data.users.length === 0) {
|
||
tbody.innerHTML = '<tr><td colspan="6">暂无用户</td></tr>';
|
||
return;
|
||
}
|
||
|
||
tbody.innerHTML = data.users.map(user => `
|
||
<tr>
|
||
<td>${user.user_id}</td>
|
||
<td>${user.display_name || '-'}</td>
|
||
<td><span class="badge ${user.user_type}">${user.user_type}</span></td>
|
||
<td>${formatDate(user.created_at)}</td>
|
||
<td>${formatDate(user.last_active_at)}</td>
|
||
<td><span class="badge ${user.is_active ? 'active' : 'inactive'}">${user.is_active ? '活跃' : '禁用'}</span></td>
|
||
</tr>
|
||
`).join('');
|
||
} catch (error) {
|
||
console.error('加载用户失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载对话列表
|
||
async function loadConversations() {
|
||
try {
|
||
const response = await fetch('/api/admin/conversations');
|
||
const data = await response.json();
|
||
|
||
const tbody = document.getElementById('conversationsTableBody');
|
||
|
||
if (data.conversations.length === 0) {
|
||
tbody.innerHTML = '<tr><td colspan="7">暂无对话</td></tr>';
|
||
return;
|
||
}
|
||
|
||
tbody.innerHTML = data.conversations.map(conv => `
|
||
<tr>
|
||
<td>${conv.conversation_id}</td>
|
||
<td>${conv.user_id || '-'}</td>
|
||
<td class="message-preview">${conv.title || '新对话'}</td>
|
||
<td>${conv.message_count}</td>
|
||
<td>${formatDate(conv.created_at)}</td>
|
||
<td>${formatDate(conv.updated_at)}</td>
|
||
<td><span class="badge ${conv.is_active ? 'active' : 'inactive'}">${conv.is_active ? '活跃' : '已删除'}</span></td>
|
||
</tr>
|
||
`).join('');
|
||
} catch (error) {
|
||
console.error('加载对话失败:', error);
|
||
}
|
||
}
|
||
|
||
// 加载其他配置
|
||
async function loadConfig() {
|
||
try {
|
||
const response = await fetch('/api/admin/config');
|
||
const data = await response.json();
|
||
|
||
const container = document.getElementById('configList');
|
||
|
||
// 过滤掉AI配置（在AI配置面板单独显示）
|
||
const otherConfigs = data.configs.filter(c => !c.key.startsWith('ai_'));
|
||
|
||
if (otherConfigs.length === 0) {
|
||
container.innerHTML = '<p>暂无其他配置</p>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = otherConfigs.map(config => `
|
||
<div class="config-item">
|
||
<div class="key">${config.key}</div>
|
||
<div class="value">${config.value}</div>
|
||
<div class="desc">${config.description || ''}</div>
|
||
</div>
|
||
`).join('');
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error);
|
||
}
|
||
}
|
||
|
||
// 保存其他配置
|
||
async function saveConfig() {
|
||
const key = document.getElementById('configKey').value.trim();
|
||
const value = document.getElementById('configValue').value.trim();
|
||
const desc = document.getElementById('configDesc').value.trim();
|
||
|
||
if (!key || !value) {
|
||
alert('请填写配置键名和值');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/admin/config', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({key, value, description: desc})
|
||
});
|
||
|
||
if (response.ok) {
|
||
alert('配置已保存');
|
||
document.getElementById('configKey').value = '';
|
||
document.getElementById('configValue').value = '';
|
||
document.getElementById('configDesc').value = '';
|
||
loadConfig();
|
||
} else {
|
||
alert('保存失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('保存配置失败:', error);
|
||
alert('保存失败');
|
||
}
|
||
}
|
||
|
||
// 格式化日期
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return '-';
|
||
const date = new Date(dateStr);
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
});
|
||
}
|
||
|
||
// 定时刷新
|
||
setInterval(() => {
|
||
loadStats();
|
||
if (document.getElementById('aiPanel').classList.contains('active')) {
|
||
loadAIConfig();
|
||
}
|
||
if (document.getElementById('usersPanel').classList.contains('active')) {
|
||
loadUsers();
|
||
}
|
||
if (document.getElementById('conversationsPanel').classList.contains('active')) {
|
||
loadConversations();
|
||
}
|
||
}, 30000);
|
||
</script>
|
||
</body>
|
||
</html> |