hubian
3aab712ff0
功能模块: - 仪表盘: 用户统计、对话统计、方言使用分布 - 用户管理: 查看、搜索、删除用户 - 对话管理: 查看、删除对话、消息内容预览 - 数据导出: 导出用户数据 技术栈: - Flask + Tailwind CSS - RESTful API - 数据可视化
202 lines
9.4 KiB
HTML
202 lines
9.4 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>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
.sidebar { transition: all 0.3s; }
|
|
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="flex">
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
|
|
<div class="p-6">
|
|
<h1 class="text-white text-xl font-bold flex items-center gap-2">
|
|
<i class="ri-translate-2 text-2xl text-purple-400"></i>
|
|
方言AI后台
|
|
</h1>
|
|
</div>
|
|
<nav class="mt-6">
|
|
<a href="/" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
|
|
<i class="ri-dashboard-line"></i><span>仪表盘</span>
|
|
</a>
|
|
<a href="/users" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-user-line"></i><span>用户管理</span>
|
|
</a>
|
|
<a href="/chats" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
|
|
<i class="ri-chat-3-line"></i><span>对话管理</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="ml-64 flex-1 p-8">
|
|
<!-- 统计卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">用户总数</p>
|
|
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-users">-</p>
|
|
</div>
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<i class="ri-user-line text-2xl text-blue-600"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-2">今日新增: <span id="stat-today-users">0</span></p>
|
|
</div>
|
|
|
|
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">对话总数</p>
|
|
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-chats">-</p>
|
|
</div>
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<i class="ri-chat-3-line text-2xl text-green-600"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-2">今日活跃: <span id="stat-today-chats">0</span></p>
|
|
</div>
|
|
|
|
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">消息总数</p>
|
|
<p class="text-3xl font-bold text-gray-800 mt-2" id="stat-messages">-</p>
|
|
</div>
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
|
|
<i class="ri-message-3-line text-2xl text-purple-600"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-white rounded-xl p-6 shadow-sm border border-gray-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-sm">最热方言</p>
|
|
<p class="text-xl font-bold text-gray-800 mt-2" id="stat-hot-dialect">-</p>
|
|
</div>
|
|
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
|
|
<i class="ri-fire-line text-2xl text-orange-600"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 方言使用统计 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i class="ri-pie-chart-line text-purple-500"></i>
|
|
方言使用分布
|
|
</h2>
|
|
<div id="dialectChart" class="space-y-3">
|
|
<p class="text-gray-500">加载中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i class="ri-history-line text-blue-500"></i>
|
|
最近活跃用户
|
|
</h2>
|
|
<div id="recentUsers" class="space-y-3">
|
|
<p class="text-gray-500">加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
const DIALECT_NAMES = {
|
|
'mandarin': '普通话',
|
|
'sichuan': '四川话',
|
|
'cantonese': '粤语',
|
|
'shanghai': '上海话',
|
|
'hakka': '客家话',
|
|
'minnan': '闽南话',
|
|
'northeast': '东北话',
|
|
'henan': '河南话'
|
|
};
|
|
|
|
async function loadStats() {
|
|
const response = await fetch('/api/stats');
|
|
const data = await response.json();
|
|
|
|
document.getElementById('stat-users').textContent = data.users_count;
|
|
document.getElementById('stat-chats').textContent = data.chats_count;
|
|
document.getElementById('stat-messages').textContent = data.messages_count;
|
|
document.getElementById('stat-today-users').textContent = data.today_users;
|
|
document.getElementById('stat-today-chats').textContent = data.today_chats;
|
|
}
|
|
|
|
async function loadDialectStats() {
|
|
const response = await fetch('/api/dialect-stats');
|
|
const data = await response.json();
|
|
|
|
const container = document.getElementById('dialectChart');
|
|
|
|
if (Object.keys(data).length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500">暂无数据</p>';
|
|
return;
|
|
}
|
|
|
|
const total = Object.values(data).reduce((a, b) => a + b, 0);
|
|
const sorted = Object.entries(data).sort((a, b) => b[1] - a[1]);
|
|
|
|
// 设置最热方言
|
|
document.getElementById('stat-hot-dialect').textContent = DIALECT_NAMES[sorted[0][0]] || sorted[0][0];
|
|
|
|
container.innerHTML = sorted.map(([dialect, count]) => {
|
|
const percent = ((count / total) * 100).toFixed(1);
|
|
return `
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-20 text-sm text-gray-600">${DIALECT_NAMES[dialect] || dialect}</span>
|
|
<div class="flex-1 bg-gray-100 rounded-full h-4">
|
|
<div class="bg-purple-500 h-4 rounded-full" style="width: ${percent}%"></div>
|
|
</div>
|
|
<span class="text-sm text-gray-500">${count} (${percent}%)</span>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
async function loadRecentUsers() {
|
|
const response = await fetch('/api/users');
|
|
const users = await response.json();
|
|
|
|
const container = document.getElementById('recentUsers');
|
|
|
|
if (users.length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500">暂无用户</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = users.slice(0, 5).map(u => `
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-800">${u.username}</p>
|
|
<p class="text-xs text-gray-500">${u.phone}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm text-purple-600">${u.chats_count} 个对话</p>
|
|
<p class="text-xs text-gray-400">${u.created_at ? new Date(u.created_at).toLocaleDateString() : '-'}</p>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// 初始化
|
|
loadStats();
|
|
loadDialectStats();
|
|
loadRecentUsers();
|
|
</script>
|
|
</body>
|
|
</html> |