增强后台数据驾驶舱：6张指标卡(近7天活跃/订阅成功/文档数等)+30天Token趋势+操作/审计日志分页与CSV下载

frontend/src/pages/admin/Dashboard.tsx

@@ -15,9 +15,11 @@ interface DashboardStats {
   enabled_models: number;
   total_conversations: number;
   active_conversations: number;
+  valid_conversations: number;
   total_knowledge_bases: number;
   total_documents: number;
   today_orders: number;
+  today_subscription_orders: number;
   today_tokens: number;
   week_tokens: number;
   total_tokens: number;
@@ -111,28 +113,100 @@ const MiniDonut: React.FC<{ value: number; max: number; color: string }> = ({ va
   );
 };
 
+const pagBtnStyle = (disabled: boolean): React.CSSProperties => ({
+  border: '1px solid rgba(0,0,0,0.12)',
+  background: disabled ? '#F3F4F6' : '#FFFFFF',
+  color: disabled ? '#B0B3BD' : '#374151',
+  borderRadius: 6,
+  padding: '4px 10px',
+  fontSize: 12,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+});
+
+const LogPagination: React.FC<{ total: number; page: number; pageSize: number; onPage: (p: number) => void }> = ({ total, page, pageSize, onPage }) => {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, padding: '12px 16px', fontSize: 12, color: '#6B7280' }}>
+      <span>共 {total} 条</span>
+      <button disabled={page <= 1} onClick={() => onPage(page - 1)} style={pagBtnStyle(page <= 1)}>上一页</button>
+      <span style={{ fontFamily: 'var(--font-mono)', color: '#374151' }}>{page} / {totalPages}</span>
+      <button disabled={page >= totalPages} onClick={() => onPage(page + 1)} style={pagBtnStyle(page >= totalPages)}>下一页</button>
+    </div>
+  );
+};
+
 const Dashboard: React.FC = () => {
   const navigate = useNavigate();
   const [stats, setStats] = useState<DashboardStats>({
     total_users: 0, active_users: 0, total_models: 0, enabled_models: 0,
-    total_conversations: 0, active_conversations: 0, total_knowledge_bases: 0, total_documents: 0,
-    today_orders: 0, today_tokens: 0, week_tokens: 0, total_tokens: 0,
+    total_conversations: 0, active_conversations: 0, valid_conversations: 0, total_knowledge_bases: 0, total_documents: 0,
+    today_orders: 0, today_subscription_orders: 0, today_tokens: 0, week_tokens: 0, total_tokens: 0,
     today_conversations: 0, server_time: '',
   });
   const [dailyStats, setDailyStats] = useState<DailyStat[]>([]);
   const [operationLogs, setOperationLogs] = useState<any[]>([]);
   const [auditLogs, setAuditLogs] = useState<any[]>([]);
+  const [opTotal, setOpTotal] = useState(0);
+  const [auditTotal, setAuditTotal] = useState(0);
+  const [opPage, setOpPage] = useState(1);
+  const [auditPage, setAuditPage] = useState(1);
   const [loading, setLoading] = useState(true);
 
+  const PAGE_SIZE = 20;
+
+  const loadOperationLogs = async (page: number) => {
+    try {
+      const res: any = await (adminAPI as any).getDashboardOperationLogs(page, PAGE_SIZE);
+      const data = res?.data || res;
+      setOperationLogs(Array.isArray(data?.items) ? data.items : []);
+      setOpTotal(data?.total ?? 0);
+      setOpPage(page);
+    } catch (err) {
+      console.error('操作日志加载失败:', err);
+    }
+  };
+
+  const loadAuditLogs = async (page: number) => {
+    try {
+      const res: any = await (adminAPI as any).getDashboardAuditLogs(page, PAGE_SIZE);
+      const data = res?.data || res;
+      setAuditLogs(Array.isArray(data?.items) ? data.items : []);
+      setAuditTotal(data?.total ?? 0);
+      setAuditPage(page);
+    } catch (err) {
+      console.error('审计日志加载失败:', err);
+    }
+  };
+
+  const downloadCsv = async (url: string, filename: string) => {
+    try {
+      const token = localStorage.getItem('aiflow_token');
+      const res = await fetch(`/app/api${url}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+      if (!res.ok) throw new Error('下载失败');
+      const blob = await res.blob();
+      const href = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = href;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(href);
+    } catch (err) {
+      console.error('CSV下载失败:', err);
+      alert('下载失败，请稍后重试');
+    }
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
-        const [statsRes, dailyRes, logsRes, auditRes] = await Promise.all([
+        const [statsRes, dailyRes] = await Promise.all([
           adminAPI.getStats() as any,
-          (adminAPI as any).getDailyStats?.(30) || Promise.resolve({ data: [] }),
-          adminAPI.getRecentLogs() as any,
-          adminAPI.getRecentAudit() as any,
+          (adminAPI as any).getDailyStats?.(30) || Promise.resolve({ data: { data: { data: [] } } }),
         ]);
         // Stats: backend returns raw dict (no {code,data} wrapper) — use .data or the response itself
         const statsData = statsRes?.data || statsRes;
@@ -142,13 +216,7 @@ const Dashboard: React.FC = () => {
         const dailyData = dailyRes?.data?.data || (Array.isArray(dailyRes?.data) ? dailyRes.data : []) || [];
         setDailyStats(Array.isArray(dailyData) ? dailyData : []);
 
-        // Recent logs: backend returns raw list (no wrapper) — use the response directly if it's an array
-        const logsData = Array.isArray(logsRes) ? logsRes : (Array.isArray(logsRes?.data) ? logsRes.data : []);
-        setOperationLogs(logsData);
-
-        // Recent audit: same as logs
-        const auditData = Array.isArray(auditRes) ? auditRes : (Array.isArray(auditRes?.data) ? auditRes.data : []);
-        setAuditLogs(auditData);
+        await Promise.all([loadOperationLogs(1), loadAuditLogs(1)]);
       } catch (err) {
         console.error('Dashboard数据加载失败:', err);
       } finally {
@@ -172,15 +240,15 @@ const Dashboard: React.FC = () => {
   };
 
   const statCardDefs = [
-    { label: '总用户', value: stats.total_users, sub: `活跃 ${stats.active_users}`, color: '#6C63FF', bg: 'rgba(108,99,255,0.12)', subBg: 'rgba(108,99,255,0.08)',
+    { label: '总用户', value: stats.total_users, sub: `近7天活跃 ${stats.active_users}`, color: '#6C63FF', bg: 'rgba(108,99,255,0.12)', subBg: 'rgba(108,99,255,0.08)',
       icon: <SVGIcon size={22}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon> },
     { label: 'AI模型', value: stats.total_models, sub: `启用 ${stats.enabled_models}`, color: '#219B5E', bg: 'rgba(33,155,94,0.12)', subBg: 'rgba(33,155,94,0.08)',
       icon: <SVGIcon size={22}><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></SVGIcon> },
-    { label: '对话数', value: stats.total_conversations, sub: `活跃 ${stats.active_conversations}`, color: '#E8922C', bg: 'rgba(232,146,44,0.12)', subBg: 'rgba(232,146,44,0.08)',
+    { label: '对话数', value: stats.valid_conversations, sub: `活跃窗口 ${stats.active_conversations}`, color: '#E8922C', bg: 'rgba(232,146,44,0.12)', subBg: 'rgba(232,146,44,0.08)',
       icon: <SVGIcon size={22}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon> },
-    { label: '知识库', value: stats.total_knowledge_bases, sub: `文档 ${stats.total_documents}`, color: '#3B82F6', bg: 'rgba(59,130,246,0.12)', subBg: 'rgba(59,130,246,0.08)',
+    { label: '知识库文档', value: stats.total_documents, sub: `知识库 ${stats.total_knowledge_bases}`, color: '#3B82F6', bg: 'rgba(59,130,246,0.12)', subBg: 'rgba(59,130,246,0.08)',
       icon: <SVGIcon size={22}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon> },
-    { label: '今日对话', value: stats.today_conversations, sub: `订单 ${stats.today_orders}`, color: '#8B5CF6', bg: 'rgba(139,92,246,0.12)', subBg: 'rgba(139,92,246,0.08)',
+    { label: '今日订阅成功', value: stats.today_subscription_orders, sub: `今日订单 ${stats.today_orders}`, color: '#8B5CF6', bg: 'rgba(139,92,246,0.12)', subBg: 'rgba(139,92,246,0.08)',
       icon: <SVGIcon size={22}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon> },
     { label: '今日Token', value: stats.today_tokens, sub: `本周 ${formatTokens(stats.week_tokens)}`, color: '#EC4899', bg: 'rgba(236,72,153,0.12)', subBg: 'rgba(236,72,153,0.08)', format: true,
       icon: <SVGIcon size={22}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></SVGIcon> },
@@ -312,8 +380,11 @@ const Dashboard: React.FC = () => {
       {/* Recent Logs */}
       <div className="admin-card" style={{ marginBottom: 'var(--space-xl)' }}>
         <div className="admin-card-header">
-          <h3 className="admin-card-title">最近操作日志</h3>
-          <span style={{ fontSize: 12, color: '#6B7280' }}>最近10条</span>
+          <h3 className="admin-card-title">操作日志</h3>
+          <button
+            onClick={() => downloadCsv('/admin/dashboard/operation-logs/export', 'operation_logs.csv')}
+            style={{ fontSize: 12, color: '#6C63FF', border: '1px solid rgba(108,99,255,0.4)', background: 'rgba(108,99,255,0.06)', borderRadius: 6, padding: '4px 12px', cursor: 'pointer' }}
+          >下载 CSV</button>
         </div>
         <div style={{ overflowX: 'auto' }}>
           <table className="admin-table">
@@ -343,13 +414,17 @@ const Dashboard: React.FC = () => {
             </tbody>
           </table>
         </div>
+        <LogPagination total={opTotal} page={opPage} pageSize={PAGE_SIZE} onPage={loadOperationLogs} />
       </div>
 
       {/* Recent Audit Logs */}
       <div className="admin-card">
         <div className="admin-card-header">
-          <h3 className="admin-card-title">最近审计日志</h3>
-          <span style={{ fontSize: 12, color: '#6B7280' }}>最近10条</span>
+          <h3 className="admin-card-title">审计日志</h3>
+          <button
+            onClick={() => downloadCsv('/admin/dashboard/audit-logs/export', 'audit_logs.csv')}
+            style={{ fontSize: 12, color: '#6C63FF', border: '1px solid rgba(108,99,255,0.4)', background: 'rgba(108,99,255,0.06)', borderRadius: 6, padding: '4px 12px', cursor: 'pointer' }}
+          >下载 CSV</button>
         </div>
         <div style={{ overflowX: 'auto' }}>
           <table className="admin-table">
@@ -377,6 +452,7 @@ const Dashboard: React.FC = () => {
             </tbody>
           </table>
         </div>
+        <LogPagination total={auditTotal} page={auditPage} pageSize={PAGE_SIZE} onPage={loadAuditLogs} />
       </div>
     </div>
   );