feat: AI对话系统 v1.0.0 - 网页端和Matrix端实时同步
This commit is contained in:
509
templates/admin/index.html
Normal file
509
templates/admin/index.html
Normal file
@@ -0,0 +1,509 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.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-form button {
|
||||
padding: 12px 24px;
|
||||
background: #10a37f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.config-form button:hover {
|
||||
background: #0d8c6d;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</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('users')">用户管理</button>
|
||||
<button class="tab-btn" onclick="switchTab('conversations')">对话记录</button>
|
||||
<button class="tab-btn" onclick="switchTab('config')">系统配置</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<!-- 用户管理 -->
|
||||
<div class="tab-panel active" 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 onclick="saveConfig()">保存</button>
|
||||
</div>
|
||||
|
||||
<div class="config-list" id="configList">
|
||||
<!-- 配置列表 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadStats();
|
||||
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');
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
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');
|
||||
|
||||
if (data.configs.length === 0) {
|
||||
container.innerHTML = '<p>暂无配置</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = data.configs.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('usersPanel').classList.contains('active')) {
|
||||
loadUsers();
|
||||
}
|
||||
if (document.getElementById('conversationsPanel').classList.contains('active')) {
|
||||
loadConversations();
|
||||
}
|
||||
}, 30000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user