后台概览页面修改

video-gen-admin/src/pages/AdminDashboard.tsx

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Col, Row, Typography, DatePicker, Button, Space } from 'antd';
+import { Card, Col, Row, Typography, DatePicker, Button, Space, Spin } from 'antd';
 import {
-  UserOutlined,
-  ProjectOutlined,
-  PlayCircleOutlined,
-  FileTextOutlined,
-  DollarOutlined,
-  WalletOutlined,
-  ArrowUpOutlined,
-  CalendarOutlined,
+  UserOutlined, ProjectOutlined, PlayCircleOutlined, FileTextOutlined,
+  DollarOutlined, WalletOutlined, ArrowUpOutlined, CalendarOutlined,
 } from '@ant-design/icons';
 import { getAdminStats, getSystemConfigs } from '../api';
 import type { AdminStats, SystemConfig } from '../types';
@@ -17,6 +11,16 @@ import 'dayjs/locale/zh-cn';
 
 dayjs.locale('zh-cn');
 
+const MODULE_LABELS: Record<string, string> = {
+  'chat_ai': 'AI创作',
+  'hot_opening_replicate': '爆款开头',
+  'shot_replicate': '拆镜复刻',
+  'project': '项目生成',
+  'other': '其他',
+};
+
+const COLORS = ['#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd', '#10b981', '#f59e0b', '#ef4444', '#3b82f6'];
+
 const AdminDashboard: React.FC = () => {
   const [stats, setStats] = useState<AdminStats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -39,371 +43,87 @@ const AdminDashboard: React.FC = () => {
       const configs = await getSystemConfigs();
       const siteConfig = configs.find((c: SystemConfig) => c.key === 'site_name');
       if (siteConfig) {
-        const title = `${siteConfig.value} 管理后台`;
-        setSiteName(title);
-        document.title = title;
+        setSiteName(`${siteConfig.value} 管理后台`);
+        document.title = `${siteConfig.value} 管理后台`;
       }
-    } catch {
-      setSiteName('数据概览');
-      document.title = '数据概览';
-    }
+    } catch { /* ignore */ }
   };
 
-  useEffect(() => {
-    load();
-    loadSiteName();
-  }, []);
-
-  const handleToday = () => {
-    const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('day'), dayjs()];
-    setStartDate(dates);
-    loadWithDates(dates);
-  };
-
-  const handleYesterday = () => {
-    const yesterday = dayjs().subtract(1, 'day');
-    const dates: [dayjs.Dayjs, dayjs.Dayjs] = [yesterday.startOf('day'), yesterday.endOf('day')];
-    setStartDate(dates);
-    loadWithDates(dates);
-  };
-
-  const handleWeek = () => {
-    const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('week'), dayjs()];
-    setStartDate(dates);
-    loadWithDates(dates);
-  };
-
-  const handleMonth = () => {
-    const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('month'), dayjs()];
-    setStartDate(dates);
-    loadWithDates(dates);
-  };
+  useEffect(() => { load(); loadSiteName(); }, []);
 
   const loadWithDates = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
+    setStartDate(dates);
     const start = dates[0]?.format('YYYY-MM-DD') || undefined;
     const end = dates[1]?.format('YYYY-MM-DD') || undefined;
     setLoading(true);
-    getAdminStats(start, end).then(data => {
-      setStats(data);
-      setLoading(false);
-    }).catch(() => {
-      setLoading(false);
-    });
+    getAdminStats(start, end).then(data => { setStats(data); setLoading(false); }).catch(() => setLoading(false));
   };
 
+  const handleToday = () => loadWithDates([dayjs().startOf('day'), dayjs()]);
+  const handleYesterday = () => { const y = dayjs().subtract(1, 'day'); loadWithDates([y.startOf('day'), y.endOf('day')]); };
+  const handleWeek = () => loadWithDates([dayjs().startOf('week'), dayjs()]);
+  const handleMonth = () => loadWithDates([dayjs().startOf('month'), dayjs()]);
+
   const handleDateChange = (dates: any) => {
-    if (dates) {
-      setStartDate([dates[0], dates[1]]);
-      loadWithDates([dates[0], dates[1]]);
-    }
-  };
-
-  const baseStats = stats ? [
-    { 
-      title: '用户数量', 
-      value: stats.totalUsers, 
-      lastPeriodValue: stats.lastPeriodUsers,
-      icon: <UserOutlined />, 
-      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      prefix: '',
-      suffix: '位用户',
-      description: '平台注册用户总数'
-    },
-    { 
-      title: '总项目数', 
-      value: stats.totalProjects, 
-      lastPeriodValue: stats.lastPeriodProjects,
-      icon: <ProjectOutlined />, 
-      gradient: 'linear-gradient(135deg, #00d4ff 0%, #0099cc 100%)',
-      prefix: '',
-      suffix: '个项目',
-      description: '创建的项目总数'
-    },
-    { 
-      title: '项目记录', 
-      value: stats.totalRecords, 
-      lastPeriodValue: stats.lastPeriodRecords,
-      icon: <FileTextOutlined />, 
-      gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-      prefix: '',
-      suffix: '条记录',
-      description: '项目记录总数'
-    },
-    { 
-      title: '创作记录', 
-      value: stats.totalGenerations, 
-      lastPeriodValue: stats.lastPeriodGenerations,
-      icon: <PlayCircleOutlined />, 
-      gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
-      prefix: '',
-      suffix: '次创作',
-      description: 'AI创作记录总数'
-    },
-  ] : [];
-
-  const financeStats = stats ? [
-    { 
-      title: '支付宝收入', 
-      value: stats.todayAlipayRevenue, 
-      icon: <WalletOutlined />, 
-      gradient: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
-      prefix: '¥',
-      suffix: '',
-      description: '支付宝收款',
-      tag: '支付宝'
-    },
-    { 
-      title: '微信收入', 
-      value: stats.todayWechatRevenue, 
-      icon: <DollarOutlined />, 
-      gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
-      prefix: '¥',
-      suffix: '',
-      description: '微信收款',
-      tag: '微信支付'
-    },
-    { 
-      title: '总收入', 
-      value: stats.totalRevenue, 
-      lastPeriodValue: stats.lastPeriodRevenue,
-      icon: <ArrowUpOutlined />, 
-      gradient: 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)',
-      prefix: '¥',
-      suffix: '',
-      description: '平台总收入',
-      tag: '总收入'
-    },
-    { 
-      title: '消耗积分', 
-      value: stats.creditsConsumedToday, 
-      lastPeriodValue: stats.lastPeriodCreditsConsumed,
-      icon: <DollarOutlined />, 
-      gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
-      prefix: '',
-      suffix: '积分',
-      description: '用户消耗积分',
-      tag: '积分消耗'
-    },
-  ] : [];
-
-  const StatCard: React.FC<{
-    title: string;
-    value: number;
-    lastPeriodValue?: number;
-    icon: React.ReactNode;
-    gradient: string;
-    prefix?: string;
-    suffix?: string;
-    description?: string;
-    tag?: string;
-  }> = ({ title, value, lastPeriodValue, icon, gradient, prefix = '', suffix = '', description, tag }) => {
-    const change = lastPeriodValue !== undefined && lastPeriodValue > 0 
-      ? ((value - lastPeriodValue) / lastPeriodValue * 100).toFixed(1) 
-      : null;
-    const isPositive = change !== null && parseFloat(change) >= 0;
-
-    return (
-      <Card 
-        bordered={false} 
-        loading={loading}
-        hoverable
-        style={{ 
-          borderRadius: 16, 
-          border: '1px solid rgba(0,0,0,0.04)',
-          background: '#ffffff',
-          boxShadow: '0 4px 20px rgba(0,0,0,0.05)',
-          transition: 'all 0.3s ease',
-          overflow: 'hidden'
-        }}
-      >
-        <div style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
-          gap: 16,
-          padding: '16px 0'
-        }}>
-          <div style={{
-            width: 52, 
-            height: 52, 
-            borderRadius: 14,
-            background: gradient,
-            display: 'flex',
-            alignItems: 'center', 
-            justifyContent: 'center',
-            fontSize: 24, 
-            color: '#fff',
-            flexShrink: 0,
-            boxShadow: '0 8px 24px rgba(0,0,0,0.1)',
-          }}>
-            {icon}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ 
-              display: 'flex', 
-              alignItems: 'center', 
-              gap: 8,
-              marginBottom: 4 
-            }}>
-              <Typography.Text style={{ color: '#64748b', fontSize: 13 }}>{title}</Typography.Text>
-              {tag && (
-                <span style={{
-                  fontSize: 10,
-                  padding: '2px 8px',
-                  borderRadius: 10,
-                  background: 'rgba(99,102,241,0.1)',
-                  color: '#6366f1',
-                  fontWeight: 500
-                }}>
-                  {tag}
-                </span>
-              )}
-            </div>
-            <div style={{ 
-              fontSize: 28, 
-              fontWeight: 800, 
-              color: '#1e293b',
-              letterSpacing: -0.5,
-              marginBottom: 2
-            }}>
-              {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
-            </div>
-            {description && (
-              <Typography.Text style={{ color: '#94a3b8', fontSize: 11 }}>
-                {description}
-              </Typography.Text>
-            )}
-            {change !== null && lastPeriodValue !== undefined && (
-              <div style={{ 
-                marginTop: 8, 
-                paddingTop: 8, 
-                borderTop: '1px solid #f1f5f9',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8
-              }}>
-                <Typography.Text style={{ color: '#94a3b8', fontSize: 11 }}>
-                  上一周期: {prefix}{lastPeriodValue.toLocaleString()}{suffix}
-                </Typography.Text>
-                <span style={{
-                  fontSize: 11,
-                  fontWeight: 500,
-                  color: isPositive ? '#10b981' : '#ef4444',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 2
-                }}>
-                  {isPositive ? '↑' : '↓'} {Math.abs(parseFloat(change))}%
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-    );
+    if (dates) loadWithDates([dates[0], dates[1]]);
   };
 
   return (
-    <div style={{ padding: 0 }}>
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        padding: '24px 24px 32px',
-        borderRadius: 0,
-        marginBottom: -24,
-        position: 'relative',
-        overflow: 'hidden'
-      }}>
-        <div style={{ 
-          position: 'absolute',
-          top: -50,
-          right: -50,
-          width: 200,
-          height: 200,
-          background: 'rgba(255,255,255,0.1)',
-          borderRadius: '50%'
-        }} />
-        <div style={{ 
-          position: 'absolute',
-          bottom: -30,
-          left: -30,
-          width: 150,
-          height: 150,
-          background: 'rgba(255,255,255,0.08)',
-          borderRadius: '50%'
-        }} />
-        <div style={{ position: 'relative', zIndex: 1 }}>
-          <Typography.Title level={2} style={{ color: '#fff', marginBottom: 4, fontWeight: 700 }}>
-            {siteName}
-          </Typography.Title>
-          <Typography.Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>
-            欢迎回来，查看平台运营数据统计
-          </Typography.Text>
+    <div>
+      {/* 日期筛选 */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 20 }}>
+        <Space>
+          <Button type="primary" size="small" onClick={handleToday}>今日</Button>
+          <Button size="small" onClick={handleYesterday}>昨日</Button>
+          <Button size="small" onClick={handleWeek}>本周</Button>
+          <Button size="small" onClick={handleMonth}>本月</Button>
+        </Space>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1px solid #e2e8f0', padding: '4px 12px', borderRadius: 8 }}>
+          <CalendarOutlined style={{ color: '#64748b' }} />
+          <DatePicker.RangePicker value={startDate} onChange={handleDateChange} size="small" />
         </div>
       </div>
 
-      <div style={{ marginTop: 40 }}>
-        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
-          <Space>
-            <Button 
-              type={!startDate[0] || !startDate[1] || startDate[0]?.isSame(dayjs().startOf('day')) && startDate[1]?.isSame(dayjs(), 'day') ? 'primary' : 'default'} 
-              size="small" 
-              onClick={handleToday}
-            >
-              今日
-            </Button>
-            <Button 
-              type="default" 
-              size="small" 
-              onClick={handleYesterday}
-            >
-              昨日
-            </Button>
-            <Button 
-              type="default" 
-              size="small" 
-              onClick={handleWeek}
-            >
-              本周
-            </Button>
-            <Button 
-              type="default" 
-              size="small" 
-              onClick={handleMonth}
-            >
-              本月
-            </Button>
-          </Space>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1px solid #e2e8f0', padding: '6px 12px', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
-            <CalendarOutlined style={{ color: '#64748b', fontSize: 14 }} />
-            <DatePicker.RangePicker
-              value={startDate}
-              onChange={handleDateChange}
-              placeholder={['开始日期', '结束日期']}
-              size="small"
-            />
-          </div>
-        </div>
-        <div style={{ marginBottom: 16, paddingLeft: 4 }}>
-          <Typography.Text strong style={{ color: '#1e293b', fontSize: 15 }}>核心数据</Typography.Text>
-          <Typography.Text style={{ color: '#94a3b8', fontSize: 12, marginLeft: 8 }}>平台基础运营指标</Typography.Text>
-        </div>
-        <Row gutter={[16, 16]}>
-          {baseStats.map((s) => (
-            <Col xs={12} sm={8} lg={6} key={s.title}>
-              <StatCard {...s} />
-            </Col>
-          ))}
-        </Row>
-      </div>
+      {/* 图表区域 */}
+      <Row gutter={[16, 16]}>
+        <Col xs={24} lg={12}>
+          <ChartCard title="每日积分消耗趋势" loading={loading}>
+            <LineChart data={stats?.dailyCreditsByModule || []} />
+          </ChartCard>
+        </Col>
+        <Col xs={24} lg={12}>
+          <ChartCard title="各模块积分占比" loading={loading}>
+            <ModulePie data={stats?.dailyCreditsByModule || []} />
+          </ChartCard>
+        </Col>
+        <Col xs={24} lg={12}>
+          <ChartCard title="团队积分消耗排行" loading={loading}>
+            <HorizontalBarChart data={(stats?.creditsByTeam || []).slice(0, 8)} />
+          </ChartCard>
+        </Col>
+        <Col xs={24} lg={12}>
+          <ChartCard title="模型使用次数" loading={loading}>
+            <HorizontalBarChart data={(stats?.modelUsage || []).slice(0, 8)} valueKey="count" />
+          </ChartCard>
+        </Col>
+      </Row>
 
+      {/* 核心数据 */}
       <div style={{ marginTop: 24 }}>
-        <div style={{ marginBottom: 16, paddingLeft: 4 }}>
-          <Typography.Text strong style={{ color: '#1e293b', fontSize: 15 }}>财务统计</Typography.Text>
-          <Typography.Text style={{ color: '#94a3b8', fontSize: 12, marginLeft: 8 }}>收入与消耗数据</Typography.Text>
+        <div style={{ marginBottom: 12 }}>
+          <Typography.Text strong style={{ fontSize: 15 }}>核心数据</Typography.Text>
         </div>
-        <Row gutter={[16, 16]}>
-          {financeStats.map((s) => (
-            <Col xs={12} sm={8} lg={6} key={s.title}>
-              <StatCard {...s} />
+        <Row gutter={[12, 12]}>
+          {[
+            { title: '用户数量', value: stats?.totalUsers, icon: <UserOutlined />, color: '#6366f1' },
+            { title: '总项目数', value: stats?.totalProjects, icon: <ProjectOutlined />, color: '#3b82f6' },
+            { title: '项目记录', value: stats?.totalRecords, icon: <FileTextOutlined />, color: '#10b981' },
+            { title: '创作记录', value: stats?.totalGenerations, icon: <PlayCircleOutlined />, color: '#f59e0b' },
+            { title: '总收入', value: stats?.totalRevenue, icon: <WalletOutlined />, color: '#ec4899', prefix: '¥' },
+            { title: '消耗积分', value: stats?.creditsConsumedToday, icon: <DollarOutlined />, color: '#ef4444' },
+          ].map(s => (
+            <Col xs={12} sm={8} md={4} key={s.title}>
+              <CompactStatCard {...s} loading={loading} />
             </Col>
           ))}
         </Row>
@@ -412,4 +132,134 @@ const AdminDashboard: React.FC = () => {
   );
 };
 
+// ── 图表卡片 ──
+const ChartCard: React.FC<{ title: string; loading: boolean; children: React.ReactNode }> = ({ title, loading, children }) => (
+  <Card bordered={false} style={{ borderRadius: 12, border: '1px solid #f0f0f5', height: '100%' }}
+    styles={{ body: { padding: '16px' } }}>
+    <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Typography.Text strong style={{ fontSize: 14 }}>{title}</Typography.Text>
+    </div>
+    <Spin spinning={loading}>{children}</Spin>
+  </Card>
+);
+
+// ── 核心数据小卡片 ──
+const CompactStatCard: React.FC<{ title: string; value?: number; icon: React.ReactNode; color: string; prefix?: string; loading: boolean }> = ({ title, value, icon, color, prefix = '', loading }) => (
+  <Card bordered={false} loading={loading} style={{ borderRadius: 10, border: '1px solid #f0f0f5' }}
+    styles={{ body: { padding: '12px 14px' } }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      <div style={{ width: 34, height: 34, borderRadius: 8, background: `${color}15`, display: 'flex', alignItems: 'center', justifyContent: 'center', color, fontSize: 16 }}>
+        {icon}
+      </div>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <Typography.Text type="secondary" style={{ fontSize: 11 }}>{title}</Typography.Text>
+        <div style={{ fontSize: 18, fontWeight: 700, color: '#1e293b', lineHeight: 1.3 }}>
+          {prefix}{typeof value === 'number' ? value.toLocaleString() : '-'}
+        </div>
+      </div>
+    </div>
+  </Card>
+);
+
+// ── 折线图（按日期+模块）──
+const LineChart: React.FC<{ data: { date: string; module: string; credits: number }[] }> = ({ data }) => {
+  if (!data.length) return <EmptyChart />;
+  // 按日期聚合
+  const dateMap = new Map<string, number>();
+  const moduleSet = new Set<string>();
+  data.forEach(d => { dateMap.set(d.date, (dateMap.get(d.date) || 0) + d.credits); moduleSet.add(d.module); });
+  const dates = Array.from(dateMap.keys()).sort();
+  const maxVal = Math.max(...dateMap.values(), 1);
+  const maxPoints = 14;
+  const step = Math.max(1, Math.floor(dates.length / maxPoints));
+  const sampled = dates.filter((_, i) => i % step === 0 || i === dates.length - 1);
+
+  return (
+    <div style={{ height: 220, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 2, borderBottom: '1px solid #f1f5f9', paddingBottom: 4 }}>
+        {sampled.map(d => {
+          const val = dateMap.get(d) || 0;
+          const pct = (val / maxVal) * 100;
+          return (
+            <div key={d} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>
+              <div style={{ width: '70%', maxWidth: 28, height: `${Math.max(pct, 2)}%`, background: 'linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%)', borderRadius: '3px 3px 0 0', minHeight: 3, transition: 'height 0.3s' }} />
+            </div>
+          );
+        })}
+      </div>
+      <div style={{ display: 'flex', gap: 2, marginTop: 4 }}>
+        {sampled.map(d => (
+          <div key={d} style={{ flex: 1, textAlign: 'center' }}>
+            <span style={{ fontSize: 9, color: '#94a3b8' }}>{d.slice(5)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ── 模块积分占比（堆叠式横条）──
+const ModulePie: React.FC<{ data: { module: string; credits: number }[] }> = ({ data }) => {
+  if (!data.length) return <EmptyChart />;
+  const moduleMap = new Map<string, number>();
+  data.forEach(d => { moduleMap.set(d.module, (moduleMap.get(d.module) || 0) + d.credits); });
+  const modules = Array.from(moduleMap.entries()).sort((a, b) => b[1] - a[1]);
+  const total = modules.reduce((s, [, v]) => s + v, 0) || 1;
+
+  return (
+    <div style={{ height: 220, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}>
+      {/* 堆叠条 */}
+      <div style={{ height: 28, borderRadius: 6, display: 'flex', overflow: 'hidden', background: '#f1f5f9' }}>
+        {modules.map(([mod, val], i) => (
+          <div key={mod} style={{ width: `${(val / total) * 100}%`, background: COLORS[i % COLORS.length], minWidth: val > 0 ? 4 : 0, transition: 'width 0.3s' }} />
+        ))}
+      </div>
+      {/* 图例 */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 14px' }}>
+        {modules.map(([mod, val], i) => (
+          <div key={mod} style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: '#64748b' }}>
+            <div style={{ width: 10, height: 10, borderRadius: 2, background: COLORS[i % COLORS.length] }} />
+            <span>{MODULE_LABELS[mod] || mod}</span>
+            <span style={{ fontWeight: 600, color: '#1e293b' }}>{val.toFixed(0)}</span>
+            <span style={{ fontSize: 10 }}>({((val / total) * 100).toFixed(1)}%)</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ── 横向柱状图（团队/模型）──
+const HorizontalBarChart: React.FC<{ data: { teamName?: string; modelName?: string; credits?: number; count?: number }[]; valueKey?: string }> = ({ data, valueKey = 'credits' }) => {
+  if (!data.length) return <EmptyChart />;
+  const maxVal = Math.max(...data.map(d => (d as any)[valueKey] || 0), 1);
+
+  return (
+    <div style={{ height: 220, display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto' }}>
+      {data.map((d, i) => {
+        const label = d.teamName || d.modelName || '-';
+        const val = (d as any)[valueKey] || 0;
+        const pct = (val / maxVal) * 100;
+        return (
+          <div key={i}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
+              <span style={{ fontSize: 12, color: '#475569', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{label}</span>
+              <span style={{ fontSize: 12, fontWeight: 600, color: '#1e293b' }}>{val.toLocaleString()}</span>
+            </div>
+            <div style={{ height: 16, background: '#f1f5f9', borderRadius: 4, overflow: 'hidden' }}>
+              <div style={{ height: '100%', width: `${pct}%`, background: `linear-gradient(90deg, ${COLORS[i % COLORS.length]}, ${COLORS[(i + 1) % COLORS.length]})`, borderRadius: 4, transition: 'width 0.3s' }} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const EmptyChart = () => (
+  <div style={{ height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#94a3b8', fontSize: 13 }}>
+    暂无数据
+  </div>
+);
+
 export default AdminDashboard;

video-gen-admin/src/types/index.ts

@@ -199,6 +199,24 @@ export interface AdminUser {
   privatePortraitAssetLimit: number;
 }
 
+export interface DailyCredit {
+  date: string;
+  module: string;
+  credits: number;
+}
+
+export interface TeamCredit {
+  teamName: string;
+  teamId: string | null;
+  credits: number;
+}
+
+export interface ModelUsageOut {
+  modelName: string;
+  provider: string;
+  count: number;
+}
+
 export interface AdminStats {
   totalUsers: number;
   totalProjects: number;
@@ -214,6 +232,9 @@ export interface AdminStats {
   lastPeriodRecords: number;
   lastPeriodRevenue: number;
   lastPeriodCreditsConsumed: number;
+  dailyCreditsByModule: DailyCredit[];
+  creditsByTeam: TeamCredit[];
+  modelUsage: ModelUsageOut[];
 }
 
 export interface PaymentStats {