Phase4剩余: 推广+成就系统前后端完成 (promotion + achievement)

- 新增: Achievement.tsx 成就系统前端页面 (644行) - 新增: achievement_admin.py 成就系统后端API (9个端点) - 新增: migration SQL (achievements, user_achievements, achievement_progress_log) - 更新: api/index.ts 添加推广+成就API方法 (23个方法) - 更新: App.tsx 添加 /admin/promotion 和 /admin/achievement 路由 - 更新: AdminLayout.tsx 添加成就系统导航项和图标 - 修复: Promotion.tsx 导入路径 (@/utils/api → @/api) - 前端构建: 472 modules, 11.23s, 成功 - API测试: 全部6个端点返回 code=0
2026-07-07 14:51:42 +08:00
1 parent 7daeae6fc7
commit 0886c26157
@@ -0,0 +1,644 @@
+// @ts-nocheck
+/**
+ * Phase 4 剩余 - 成就系统管理页面
+ * 成就管理、用户进度、排行榜、奖励领取
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { adminAPI } from '@/api';
+
+// ==================== 类型定义 ====================
+interface Achievement {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  category: string;
+  criteria_type: string;
+  criteria_key: string | null;
+  criteria_value: number;
+  reward_type: string;
+  reward_value: number;
+  badge_icon: string | null;
+  is_active: boolean;
+  display_order: number;
+  user_progress?: number;
+  is_completed?: boolean;
+  reward_claimed?: boolean;
+  completed_at?: string | null;
+}
+
+interface AchievementStats {
+  total_achievements: number;
+  active_achievements: number;
+  completed_achievements: number;
+  rewards_claimed: number;
+  total_points: number;
+  by_category: Record<string, number>;
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  usage: '使用量',
+  social: '社交',
+  content: '内容创作',
+  payment: '付费',
+  special: '特殊',
+};
+
+const CATEGORY_COLORS: Record<string, string> = {
+  usage: '#6C63FF',
+  social: '#00D4AA',
+  content: '#FFB800',
+  payment: '#FF6B6B',
+  special: '#C084FC',
+};
+
+const REWARD_LABELS: Record<string, string> = {
+  points: '积分',
+  badge: '徽章',
+  discount: '折扣',
+  feature: '功能解锁',
+  credits: '额度',
+};
+
+const CRITERIA_LABELS: Record<string, string> = {
+  message_count: '消息数量',
+  conversation_count: '对话数量',
+  token_usage: 'Token用量',
+  referral_count: '推荐人数',
+  kb_doc_count: '知识库文档数',
+  agent_count: 'Agent数量',
+  skill_count: '技能数量',
+  payment_amount: '付费金额',
+  days_active: '活跃天数',
+  workflow_count: '工作流数量',
+};
+
+// ==================== 主组件 ====================
+const Achievement: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const [stats, setStats] = useState<AchievementStats | null>(null);
+  const [achievements, setAchievements] = useState<Achievement[]>([]);
+  const [userProgress, setUserProgress] = useState<Achievement[]>([]);
+  const [leaderboard, setLeaderboard] = useState<any[]>([]);
+  const [categoryFilter, setCategoryFilter] = useState('');
+
+  // Modal states
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingAch, setEditingAch] = useState<Achievement | null>(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    category: 'usage',
+    criteria_type: 'message_count',
+    criteria_value: 100,
+    reward_type: 'points',
+    reward_value: 100,
+    icon: '',
+  });
+
+  const loadStats = useCallback(async () => {
+    try {
+      const allRes = await adminAPI.getAchievements('');
+      const items = allRes.data?.items || [];
+      const active = items.filter((a: Achievement) => a.is_active);
+      const completed = items.filter((a: Achievement) => a.is_completed);
+      const claimed = items.filter((a: Achievement) => a.reward_claimed);
+      const totalPoints = items
+        .filter((a: Achievement) => a.is_completed)
+        .reduce((sum: number, a: Achievement) => sum + (a.reward_value || 0), 0);
+      const byCategory: Record<string, number> = {};
+      items.forEach((a: Achievement) => {
+        byCategory[a.category] = (byCategory[a.category] || 0) + 1;
+      });
+      setStats({
+        total_achievements: items.length,
+        active_achievements: active.length,
+        completed_achievements: completed.length,
+        rewards_claimed: claimed.length,
+        total_points: totalPoints,
+        by_category: byCategory,
+      });
+    } catch (e: any) {
+      console.error('Failed to load stats:', e);
+    }
+  }, []);
+
+  const loadAchievements = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const params = categoryFilter ? `?category=${categoryFilter}` : '';
+      const res = await adminAPI.getAchievements(params);
+      setAchievements(res.data?.items || []);
+    } catch (e: any) {
+      setError(e.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [categoryFilter]);
+
+  const loadUserProgress = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await adminAPI.getUserAchievements();
+      setUserProgress(res.data?.items || []);
+    } catch (e: any) {
+      setError(e.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadLeaderboard = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await adminAPI.getAchievementLeaderboard('?period=all');
+      setLeaderboard(res.data?.items || []);
+    } catch (e: any) {
+      setError(e.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadStats();
+  }, [loadStats]);
+
+  useEffect(() => {
+    if (activeTab === 'list') loadAchievements();
+    else if (activeTab === 'progress') loadUserProgress();
+    else if (activeTab === 'leaderboard') loadLeaderboard();
+  }, [activeTab, loadAchievements, loadUserProgress, loadLeaderboard]);
+
+  const handleSave = async () => {
+    if (!formData.name.trim()) {
+      setError('成就名称不能为空');
+      return;
+    }
+    setLoading(true);
+    try {
+      const params = `?name=${encodeURIComponent(formData.name)}&category=${formData.category}&criteria_type=${formData.criteria_type}&criteria_value=${formData.criteria_value}&description=${encodeURIComponent(formData.description)}&reward_type=${formData.reward_type}&reward_value=${formData.reward_value}&icon=${encodeURIComponent(formData.icon)}`;
+      if (editingAch) {
+        const updateParams = `?name=${encodeURIComponent(formData.name)}&description=${encodeURIComponent(formData.description)}&reward_value=${formData.reward_value}`;
+        await adminAPI.updateAchievement(editingAch.id, updateParams);
+      } else {
+        await adminAPI.createAchievement(params);
+      }
+      setShowCreateModal(false);
+      setEditingAch(null);
+      setFormData({
+        name: '', description: '', category: 'usage', criteria_type: 'message_count',
+        criteria_value: 100, reward_type: 'points', reward_value: 100, icon: '',
+      });
+      loadAchievements();
+      loadStats();
+    } catch (e: any) {
+      setError(e.message || '保存失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('确定要删除这个成就吗？')) return;
+    try {
+      await adminAPI.deleteAchievement(id);
+      loadAchievements();
+      loadStats();
+    } catch (e: any) {
+      setError(e.message || '删除失败');
+    }
+  };
+
+  const handleToggle = async (ach: Achievement) => {
+    try {
+      const params = `?is_active=${!ach.is_active}`;
+      await adminAPI.updateAchievement(ach.id, params);
+      loadAchievements();
+      loadStats();
+    } catch (e: any) {
+      setError(e.message || '操作失败');
+    }
+  };
+
+  const handleClaim = async (id: string) => {
+    try {
+      await adminAPI.claimAchievementReward(id);
+      loadUserProgress();
+      loadStats();
+    } catch (e: any) {
+      setError(e.message || '领取失败');
+    }
+  };
+
+  const handleCheckProgress = async () => {
+    try {
+      await adminAPI.checkAchievementProgress();
+      loadUserProgress();
+      loadStats();
+    } catch (e: any) {
+      setError(e.message || '检查失败');
+    }
+  };
+
+  const openEdit = (ach: Achievement) => {
+    setEditingAch(ach);
+    setFormData({
+      name: ach.name,
+      description: ach.description || '',
+      category: ach.category,
+      criteria_type: ach.criteria_type,
+      criteria_value: ach.criteria_value,
+      reward_type: ach.reward_type,
+      reward_value: ach.reward_value,
+      icon: ach.icon || '',
+    });
+    setShowCreateModal(true);
+  };
+
+  const getProgressPercent = (current: number, target: number) => {
+    if (target <= 0) return 0;
+    return Math.min(100, Math.round((current / target) * 100));
+  };
+
+  // ==================== 渲染 ====================
+  return (
+    <div className="admin-page" style={{ padding: '24px' }}>
+      <style>{`
+        .ach-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+        .ach-tab { padding: 10px 20px; cursor: pointer; color: rgba(255,255,255,0.5); font-size: 14px; border-bottom: 2px solid transparent; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
+        .ach-tab:hover { color: rgba(255,255,255,0.8); }
+        .ach-tab.active { color: #6C63FF; border-bottom-color: #6C63FF; }
+        .ach-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
+        .ach-stat-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; }
+        .ach-stat-card .label { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
+        .ach-stat-card .value { font-size: 28px; font-weight: 700; color: #fff; }
+        .ach-cat-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+        .ach-cat-bar .cat-label { width: 80px; font-size: 13px; color: rgba(255,255,255,0.6); }
+        .ach-cat-bar .cat-track { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
+        .ach-cat-bar .cat-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
+        .ach-cat-bar .cat-count { width: 30px; text-align: right; font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 600; }
+        .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
+        .ach-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; transition: all 0.2s; position: relative; }
+        .ach-card:hover { border-color: rgba(108,99,255,0.3); background: rgba(255,255,255,0.05); }
+        .ach-card.completed { border-color: rgba(0,212,170,0.3); }
+        .ach-card .ach-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }
+        .ach-card .ach-name { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
+        .ach-card .ach-desc { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 12px; line-height: 1.5; }
+        .ach-card .ach-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+        .ach-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
+        .ach-progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
+        .ach-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6C63FF, #8B80FF); transition: width 0.3s; }
+        .ach-progress-fill.done { background: linear-gradient(90deg, #00D4AA, #00E4B4); }
+        .ach-progress-text { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.4); }
+        .ach-actions { display: flex; gap: 8px; margin-top: 12px; }
+        .ach-btn { padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; border: none; transition: all 0.2s; }
+        .ach-btn-primary { background: #6C63FF; color: #fff; }
+        .ach-btn-primary:hover { background: #5B52E0; }
+        .ach-btn-danger { background: rgba(255,107,107,0.15); color: #FF6B6B; }
+        .ach-btn-danger:hover { background: rgba(255,107,107,0.25); }
+        .ach-btn-success { background: rgba(0,212,170,0.15); color: #00D4AA; }
+        .ach-btn-success:hover { background: rgba(0,212,170,0.25); }
+        .ach-btn-ghost { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
+        .ach-btn-ghost:hover { background: rgba(255,255,255,0.1); }
+        .ach-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+        .ach-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+        .ach-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 12px; color: #fff; font-size: 13px; }
+        .ach-select option { background: #1A1A2E; }
+        .ach-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
+        .ach-modal { background: #1E1E36; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px; width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
+        .ach-modal h2 { font-size: 20px; color: #fff; margin-bottom: 20px; }
+        .ach-field { margin-bottom: 16px; }
+        .ach-field label { display: block; font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
+        .ach-field input, .ach-field select, .ach-field textarea { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; color: #fff; font-size: 14px; box-sizing: border-box; }
+        .ach-field input:focus, .ach-field select:focus, .ach-field textarea:focus { outline: none; border-color: #6C63FF; }
+        .ach-field select option { background: #1A1A2E; }
+        .ach-field-row { display: flex; gap: 12px; }
+        .ach-field-row .ach-field { flex: 1; }
+        .ach-empty { text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.3); }
+        .ach-lb-table { width: 100%; border-collapse: collapse; }
+        .ach-lb-table th { text-align: left; padding: 12px 16px; font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+        .ach-lb-table td { padding: 14px 16px; font-size: 14px; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.04); }
+        .ach-lb-rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; }
+        .ach-lb-rank.gold { background: rgba(255,184,0,0.15); color: #FFB800; }
+        .ach-lb-rank.silver { background: rgba(192,192,192,0.15); color: #C0C0C0; }
+        .ach-lb-rank.bronze { background: rgba(205,127,50,0.15); color: #CD7F32; }
+        .ach-lb-rank.normal { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
+        .ach-error { background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.2); border-radius: 8px; padding: 12px 16px; color: #FF6B6B; font-size: 13px; margin-bottom: 16px; }
+      `}</style>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+        <h1 style={{ fontSize: '24px', fontWeight: 700, color: '#fff', margin: 0 }}>成就系统</h1>
+        <div style={{ display: 'flex', gap: '8px' }}>
+          {activeTab === 'list' && (
+            <button className="ach-btn ach-btn-primary" onClick={() => { setEditingAch(null); setFormData({ name: '', description: '', category: 'usage', criteria_type: 'message_count', criteria_value: 100, reward_type: 'points', reward_value: 100, icon: '' }); setShowCreateModal(true); }}>
+              + 创建成就
+            </button>
+          )}
+          {activeTab === 'progress' && (
+            <button className="ach-btn ach-btn-ghost" onClick={handleCheckProgress}>检查进度</button>
+          )}
+        </div>
+      </div>
+
+      {error && <div className="ach-error">{error}</div>}
+
+      {/* Tabs */}
+      <div className="ach-tabs">
+        <button className={`ach-tab ${activeTab === 'overview' ? 'active' : ''}`} onClick={() => setActiveTab('overview')}>概览</button>
+        <button className={`ach-tab ${activeTab === 'list' ? 'active' : ''}`} onClick={() => setActiveTab('list')}>成就管理</button>
+        <button className={`ach-tab ${activeTab === 'progress' ? 'active' : ''}`} onClick={() => setActiveTab('progress')}>我的进度</button>
+        <button className={`ach-tab ${activeTab === 'leaderboard' ? 'active' : ''}`} onClick={() => setActiveTab('leaderboard')}>排行榜</button>
+      </div>
+
+      {/* Overview Tab */}
+      {activeTab === 'overview' && stats && (
+        <div>
+          <div className="ach-stat-grid">
+            <div className="ach-stat-card">
+              <div className="label">总成就数</div>
+              <div className="value">{stats.total_achievements}</div>
+            </div>
+            <div className="ach-stat-card">
+              <div className="label">已激活</div>
+              <div className="value" style={{ color: '#6C63FF' }}>{stats.active_achievements}</div>
+            </div>
+            <div className="ach-stat-card">
+              <div className="label">已完成</div>
+              <div className="value" style={{ color: '#00D4AA' }}>{stats.completed_achievements}</div>
+            </div>
+            <div className="ach-stat-card">
+              <div className="label">奖励已领取</div>
+              <div className="value" style={{ color: '#FFB800' }}>{stats.rewards_claimed}</div>
+            </div>
+            <div className="ach-stat-card">
+              <div className="label">累计积分</div>
+              <div className="value" style={{ color: '#C084FC' }}>{stats.total_points}</div>
+            </div>
+          </div>
+
+          <div style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '12px', padding: '24px' }}>
+            <h3 style={{ fontSize: '16px', color: '#fff', marginBottom: '20px' }}>分类分布</h3>
+            {Object.entries(stats.by_category).map(([cat, count]) => {
+              const pct = stats.total_achievements > 0 ? (count / stats.total_achievements) * 100 : 0;
+              return (
+                <div key={cat} className="ach-cat-bar">
+                  <span className="cat-label">{CATEGORY_LABELS[cat] || cat}</span>
+                  <div className="cat-track">
+                    <div className="cat-fill" style={{ width: `${pct}%`, background: CATEGORY_COLORS[cat] || '#6C63FF' }} />
+                  </div>
+                  <span className="cat-count">{count}</span>
+                </div>
+              );
+            })}
+            {Object.keys(stats.by_category).length === 0 && (
+              <div className="ach-empty">暂无数据</div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* List Tab */}
+      {activeTab === 'list' && (
+        <div>
+          <div className="ach-toolbar">
+            <select className="ach-select" value={categoryFilter} onChange={(e) => setCategoryFilter(e.target.value)}>
+              <option value="">全部分类</option>
+              {Object.entries(CATEGORY_LABELS).map(([k, v]) => (
+                <option key={k} value={k}>{v}</option>
+              ))}
+            </select>
+          </div>
+
+          {loading ? (
+            <div className="ach-empty">加载中...</div>
+          ) : achievements.length === 0 ? (
+            <div className="ach-empty">暂无成就数据</div>
+          ) : (
+            <div className="ach-grid">
+              {achievements.map((ach) => {
+                const progressPct = getProgressPercent(ach.user_progress || 0, ach.criteria_value);
+                const color = CATEGORY_COLORS[ach.category] || '#6C63FF';
+                return (
+                  <div key={ach.id} className={`ach-card ${ach.is_completed ? 'completed' : ''}`}>
+                    <div className="ach-icon" style={{ background: `${color}20`, color }}>
+                      {ach.icon || CATEGORY_LABELS[ach.category]?.[0] || '★'}
+                    </div>
+                    <div className="ach-name">{ach.name}</div>
+                    <div className="ach-desc">{ach.description || '暂无描述'}</div>
+                    <div className="ach-meta">
+                      <span className="ach-badge" style={{ background: `${color}20`, color }}>{CATEGORY_LABELS[ach.category] || ach.category}</span>
+                      <span className="ach-badge" style={{ background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.6)' }}>
+                        {CRITERIA_LABELS[ach.criteria_type] || ach.criteria_type}: {ach.criteria_value}
+                      </span>
+                      <span className="ach-badge" style={{ background: 'rgba(255,184,0,0.1)', color: '#FFB800' }}>
+                        {REWARD_LABELS[ach.reward_type] || ach.reward_type}: {ach.reward_value}
+                      </span>
+                      {!ach.is_active && (
+                        <span className="ach-badge" style={{ background: 'rgba(255,107,107,0.1)', color: '#FF6B6B' }}>已停用</span>
+                      )}
+                    </div>
+                    {ach.user_progress !== undefined && (
+                      <>
+                        <div className="ach-progress-bar">
+                          <div className={`ach-progress-fill ${ach.is_completed ? 'done' : ''}`} style={{ width: `${progressPct}%` }} />
+                        </div>
+                        <div className="ach-progress-text">
+                          <span>{ach.user_progress || 0} / {ach.criteria_value}</span>
+                          <span>{progressPct}%</span>
+                        </div>
+                      </>
+                    )}
+                    <div className="ach-actions">
+                      <button className="ach-btn ach-btn-ghost" onClick={() => openEdit(ach)}>编辑</button>
+                      <button className="ach-btn ach-btn-ghost" onClick={() => handleToggle(ach)}>
+                        {ach.is_active ? '停用' : '启用'}
+                      </button>
+                      <button className="ach-btn ach-btn-danger" onClick={() => handleDelete(ach.id)}>删除</button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Progress Tab */}
+      {activeTab === 'progress' && (
+        <div>
+          {loading ? (
+            <div className="ach-empty">加载中...</div>
+          ) : userProgress.length === 0 ? (
+            <div className="ach-empty">暂无进度数据</div>
+          ) : (
+            <div className="ach-grid">
+              {userProgress.map((ach) => {
+                const progressPct = getProgressPercent(ach.progress || 0, ach.criteria_value);
+                const color = CATEGORY_COLORS[ach.category] || '#6C63FF';
+                return (
+                  <div key={ach.id} className={`ach-card ${ach.is_completed ? 'completed' : ''}`}>
+                    <div className="ach-icon" style={{ background: `${color}20`, color }}>
+                      {ach.icon || CATEGORY_LABELS[ach.category]?.[0] || '★'}
+                    </div>
+                    <div className="ach-name">{ach.name}</div>
+                    <div className="ach-desc">{ach.description || '暂无描述'}</div>
+                    <div className="ach-meta">
+                      <span className="ach-badge" style={{ background: `${color}20`, color }}>{CATEGORY_LABELS[ach.category] || ach.category}</span>
+                      {ach.is_completed && (
+                        <span className="ach-badge" style={{ background: 'rgba(0,212,170,0.15)', color: '#00D4AA' }}>已完成</span>
+                      )}
+                      {ach.reward_claimed && (
+                        <span className="ach-badge" style={{ background: 'rgba(255,184,0,0.15)', color: '#FFB800' }}>已领取</span>
+                      )}
+                    </div>
+                    <div className="ach-progress-bar">
+                      <div className={`ach-progress-fill ${ach.is_completed ? 'done' : ''}`} style={{ width: `${progressPct}%` }} />
+                    </div>
+                    <div className="ach-progress-text">
+                      <span>{ach.progress || 0} / {ach.criteria_value}</span>
+                      <span>{progressPct}%</span>
+                    </div>
+                    {ach.completed_at && (
+                      <div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.3)', marginTop: '8px' }}>
+                        完成时间: {new Date(ach.completed_at).toLocaleString('zh-CN')}
+                      </div>
+                    )}
+                    <div className="ach-actions">
+                      {ach.is_completed && !ach.reward_claimed && (
+                        <button className="ach-btn ach-btn-success" onClick={() => handleClaim(ach.id)}>
+                          领取奖励
+                        </button>
+                      )}
+                      {ach.reward_claimed && (
+                        <span style={{ fontSize: '12px', color: 'rgba(255,184,0,0.6)' }}>奖励已领取</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Leaderboard Tab */}
+      {activeTab === 'leaderboard' && (
+        <div>
+          {loading ? (
+            <div className="ach-empty">加载中...</div>
+          ) : leaderboard.length === 0 ? (
+            <div className="ach-empty">
+              <div style={{ fontSize: '16px', marginBottom: '8px' }}>排行榜暂无数据</div>
+              <div style={{ fontSize: '13px' }}>用户完成成就后将出现在排行榜中</div>
+            </div>
+          ) : (
+            <table className="ach-lb-table">
+              <thead>
+                <tr>
+                  <th>排名</th>
+                  <th>用户</th>
+                  <th>完成成就</th>
+                  <th>累计积分</th>
+                  <th>最近完成</th>
+                </tr>
+              </thead>
+              <tbody>
+                {leaderboard.map((entry, idx) => (
+                  <tr key={entry.user_id || idx}>
+                    <td>
+                      <span className={`ach-lb-rank ${idx === 0 ? 'gold' : idx === 1 ? 'silver' : idx === 2 ? 'bronze' : 'normal'}`}>
+                        {idx + 1}
+                      </span>
+                    </td>
+                    <td>{entry.username || entry.user_id || '匿名用户'}</td>
+                    <td>{entry.achievement_count || 0}</td>
+                    <td style={{ color: '#FFB800', fontWeight: 600 }}>{entry.total_points || 0}</td>
+                    <td style={{ color: 'rgba(255,255,255,0.4)' }}>
+                      {entry.last_completed ? new Date(entry.last_completed).toLocaleDateString('zh-CN') : '-'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showCreateModal && (
+        <div className="ach-modal-overlay" onClick={() => setShowCreateModal(false)}>
+          <div className="ach-modal" onClick={(e) => e.stopPropagation()}>
+            <h2>{editingAch ? '编辑成就' : '创建成就'}</h2>
+            <div className="ach-field">
+              <label>成就名称 *</label>
+              <input type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} placeholder="例如：对话达人" />
+            </div>
+            <div className="ach-field">
+              <label>描述</label>
+              <textarea rows={2} value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} placeholder="成就描述" />
+            </div>
+            <div className="ach-field-row">
+              <div className="ach-field">
+                <label>分类</label>
+                <select value={formData.category} onChange={(e) => setFormData({ ...formData, category: e.target.value })} disabled={!!editingAch}>
+                  {Object.entries(CATEGORY_LABELS).map(([k, v]) => (
+                    <option key={k} value={k}>{v}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="ach-field">
+                <label>图标</label>
+                <input type="text" value={formData.icon} onChange={(e) => setFormData({ ...formData, icon: e.target.value })} placeholder="emoji 或文字" />
+              </div>
+            </div>
+            {!editingAch && (
+              <>
+                <div className="ach-field-row">
+                  <div className="ach-field">
+                    <label>条件类型</label>
+                    <select value={formData.criteria_type} onChange={(e) => setFormData({ ...formData, criteria_type: e.target.value })}>
+                      {Object.entries(CRITERIA_LABELS).map(([k, v]) => (
+                        <option key={k} value={k}>{v}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="ach-field">
+                    <label>目标值</label>
+                    <input type="number" value={formData.criteria_value} onChange={(e) => setFormData({ ...formData, criteria_value: Number(e.target.value) })} />
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="ach-field-row">
+              <div className="ach-field">
+                <label>奖励类型</label>
+                <select value={formData.reward_type} onChange={(e) => setFormData({ ...formData, reward_type: e.target.value })}>
+                  {Object.entries(REWARD_LABELS).map(([k, v]) => (
+                    <option key={k} value={k}>{v}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="ach-field">
+                <label>奖励数值</label>
+                <input type="number" value={formData.reward_value} onChange={(e) => setFormData({ ...formData, reward_value: Number(e.target.value) })} />
+              </div>
+            </div>
+            <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
+              <button className="ach-btn ach-btn-primary" style={{ flex: 1, padding: '10px' }} onClick={handleSave} disabled={loading}>
+                {editingAch ? '保存修改' : '创建成就'}
+              </button>
+              <button className="ach-btn ach-btn-ghost" style={{ flex: 1, padding: '10px' }} onClick={() => setShowCreateModal(false)}>取消</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Achievement;
@@ -0,0 +1,887 @@
+// @ts-nocheck
+/**
+ * Phase 4 剩余 - 推广系统管理页面
+ * 推广活动、分销链接、返佣记录、推广统计、排行榜
+ */
+import React, { useState, useEffect, useCallback } from 'react';
+import { adminAPI } from '@/api';
+
+// ==================== 类型定义 ====================
+interface Promotion {
+  id: number;
+  title: string;
+  description: string;
+  reward_type: string;
+  reward_value: number;
+  min_payout: number;
+  start_date: string;
+  end_date: string;
+  status: string;
+  max_referrals: number;
+  coupon_id: string;
+  created_by: number;
+  creator_name: string;
+  created_at: string;
+  updated_at: string;
+  link_count: number;
+  total_rewards: number;
+}
+
+interface ReferralLink {
+  id: number;
+  code: string;
+  user_id: number;
+  username: string;
+  promotion_id: number;
+  promotion_title: string;
+  target_url: string;
+  channel: string;
+  qr_code_url: string;
+  total_clicks: number;
+  total_registrations: number;
+  total_conversions: number;
+  status: string;
+  created_at: string;
+}
+
+interface ReferralReward {
+  id: number;
+  referral_code: string;
+  referrer_name: string;
+  referee_name: string;
+  order_id: string;
+  reward_type: string;
+  reward_amount: number;
+  reward_points: number;
+  status: string;
+  payout_method: string;
+  paid_at: string;
+  created_at: string;
+}
+
+interface PromotionStats {
+  total_promotions: number;
+  active_promotions: number;
+  total_referral_links: number;
+  active_referral_links: number;
+  rewards_by_status: Record<string, { count: number; total: number }>;
+  total_clicks: number;
+  total_registrations: number;
+  total_conversions: number;
+  total_revenue: number;
+  total_rewards_paid: number;
+}
+
+// ==================== 主组件 ====================
+const Promotion: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('overview');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  // 数据
+  const [stats, setStats] = useState<PromotionStats | null>(null);
+  const [promotions, setPromotions] = useState<Promotion[]>([]);
+  const [referralLinks, setReferralLinks] = useState<ReferralLink[]>([]);
+  const [rewards, setRewards] = useState<ReferralReward[]>([]);
+  const [leaderboard, setLeaderboard] = useState<any[]>([]);
+  
+  // 分页
+  const [promoPage, setPromoPage] = useState(1);
+  const [linkPage, setLinkPage] = useState(1);
+  const [rewardPage, setRewardPage] = useState(1);
+  const [totalPromos, setTotalPromos] = useState(0);
+  const [totalLinks, setTotalLinks] = useState(0);
+  const [totalRewards, setTotalRewards] = useState(0);
+  
+  // 弹窗
+  const [showPromoModal, setShowPromoModal] = useState(false);
+  const [showLinkModal, setShowLinkModal] = useState(false);
+  const [editingPromo, setEditingPromo] = useState<Promotion | null>(null);
+
+  // 加载概览数据
+  const loadStats = useCallback(async () => {
+    try {
+      const res = await adminAPI.getPromotionStats();
+      if (res.success) {
+        setStats(res.data);
+      }
+    } catch (err: any) {
+      console.error('Failed to load stats:', err);
+    }
+  }, []);
+
+  // 加载推广活动
+  const loadPromotions = useCallback(async (page: number) => {
+    setLoading(true);
+    try {
+      const res = await adminAPI.getPromotions({ page, page_size: 20 });
+      if (res.success) {
+        setPromotions(res.data.items);
+        setTotalPromos(res.data.total);
+        setPromoPage(page);
+      }
+    } catch (err: any) {
+      setError(err.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 加载分销链接
+  const loadLinks = useCallback(async (page: number) => {
+    setLoading(true);
+    try {
+      const res = await adminAPI.getReferralLinks({ page, page_size: 20 });
+      if (res.success) {
+        setReferralLinks(res.data.items);
+        setTotalLinks(res.data.total);
+        setLinkPage(page);
+      }
+    } catch (err: any) {
+      setError(err.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 加载返佣记录
+  const loadRewards = useCallback(async (page: number) => {
+    setLoading(true);
+    try {
+      const res = await adminAPI.getReferralRewards({ page, page_size: 20 });
+      if (res.success) {
+        setRewards(res.data.items);
+        setTotalRewards(res.data.total);
+        setRewardPage(page);
+      }
+    } catch (err: any) {
+      setError(err.message || '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 加载排行榜
+  const loadLeaderboard = useCallback(async () => {
+    try {
+      const res = await adminAPI.getPromotionLeaderboard({ limit: 50 });
+      if (res.success) {
+        setLeaderboard(res.data.leaderboard);
+      }
+    } catch (err: any) {
+      console.error('Failed to load leaderboard:', err);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadStats();
+  }, [loadStats]);
+
+  useEffect(() => {
+    if (activeTab === 'promotions') {
+      loadPromotions(1);
+    } else if (activeTab === 'links') {
+      loadLinks(1);
+    } else if (activeTab === 'rewards') {
+      loadRewards(1);
+    } else if (activeTab === 'leaderboard') {
+      loadLeaderboard();
+    }
+  }, [activeTab, loadPromotions, loadLinks, loadRewards, loadLeaderboard]);
+
+  // 创建/更新推广活动
+  const handleSavePromo = async (formData: any) => {
+    setLoading(true);
+    try {
+      if (editingPromo) {
+        await adminAPI.updatePromotion(editingPromo.id, formData);
+      } else {
+        await adminAPI.createPromotion(formData);
+      }
+      setShowPromoModal(false);
+      setEditingPromo(null);
+      loadPromotions(promoPage);
+      loadStats();
+    } catch (err: any) {
+      setError(err.message || '保存失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换活动状态
+  const handleTogglePromo = async (id: number) => {
+    try {
+      await adminAPI.togglePromotion(id);
+      loadPromotions(promoPage);
+    } catch (err: any) {
+      setError(err.message || '操作失败');
+    }
+  };
+
+  // 删除活动
+  const handleDeletePromo = async (id: number) => {
+    if (!window.confirm('确定删除此推广活动？')) return;
+    try {
+      await adminAPI.deletePromotion(id);
+      loadPromotions(promoPage);
+      loadStats();
+    } catch (err: any) {
+      setError(err.message || '删除失败');
+    }
+  };
+
+  // 生成分销链接
+  const handleGenerateLink = async (formData: any) => {
+    setLoading(true);
+    try {
+      await adminAPI.generateReferralLink(formData);
+      setShowLinkModal(false);
+      loadLinks(linkPage);
+      loadStats();
+    } catch (err: any) {
+      setError(err.message || '生成失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 审核返佣
+  const handleApproveReward = async (id: number) => {
+    try {
+      await adminAPI.approveReward(id);
+      loadRewards(rewardPage);
+    } catch (err: any) {
+      setError(err.message || '操作失败');
+    }
+  };
+
+  // 标记已打款
+  const handleMarkPaid = async (id: number) => {
+    const payout_method = prompt('请输入提现方式（wechat/alipay/bank/balance）:');
+    const payout_account = prompt('请输入提现账号:');
+    if (!payout_method || !payout_account) return;
+    
+    try {
+      await adminAPI.markRewardPaid(id, {
+        payout_method,
+        payout_account,
+        payout_transaction_id: `TXN${Date.now()}`
+      });
+      loadRewards(rewardPage);
+    } catch (err: any) {
+      setError(err.message || '操作失败');
+    }
+  };
+
+  // ==================== 渲染 ====================
+  const renderOverview = () => {
+    if (!stats) return <div className="loading">加载中...</div>;
+    
+    // 计算返佣状态分布条的宽度
+    const totalRewardsCount = Object.values(stats.rewards_by_status || {}).reduce((a: number, b: any) => a + (b.count || 0), 0) || 1;
+    const statusBars = Object.entries(stats.rewards_by_status || {}).map(([status, data]: [string, any]) => ({
+      status,
+      data,
+      width: Math.min(100, ((data.count || 0) / totalRewardsCount) * 100)
+    }));
+    
+    return (
+      <div className="overview-grid">
+        <div className="stat-card">
+          <div className="stat-icon">📢</div>
+          <div className="stat-content">
+            <div className="stat-value">{stats.total_promotions}</div>
+            <div className="stat-label">推广活动总数</div>
+          </div>
+        </div>
+        
+        <div className="stat-card active">
+          <div className="stat-icon">✅</div>
+          <div className="stat-content">
+            <div className="stat-value">{stats.active_promotions}</div>
+            <div className="stat-label">进行中的活动</div>
+          </div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-icon">🔗</div>
+          <div className="stat-content">
+            <div className="stat-value">{stats.total_referral_links}</div>
+            <div className="stat-label">分销链接总数</div>
+          </div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-icon">👥</div>
+          <div className="stat-content">
+            <div className="stat-value">{stats.total_registrations || 0}</div>
+            <div className="stat-label">总注册数</div>
+          </div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-icon">💰</div>
+          <div className="stat-content">
+            <div className="stat-value">¥{(stats.total_revenue || 0).toFixed(2)}</div>
+            <div className="stat-label">产生收入</div>
+          </div>
+        </div>
+        
+        <div className="stat-card">
+          <div className="stat-icon">💸</div>
+          <div className="stat-content">
+            <div className="stat-value">¥{(stats.total_rewards_paid || 0).toFixed(2)}</div>
+            <div className="stat-label">已发返佣</div>
+          </div>
+        </div>
+        
+        {/* 返佣状态分布 */}
+        {statusBars.length > 0 && (
+          <div className="chart-card full-width">
+            <h3>返佣状态分布</h3>
+            <div className="status-bars">
+              {statusBars.map(bar => (
+                <div key={bar.status} className="status-bar-item">
+                  <span className="status-label">
+                    {bar.status === 'pending' ? '待审核' : bar.status === 'approved' ? '已通过' : bar.status === 'paid' ? '已打款' : '已取消'}
+                  </span>
+                  <div className="status-bar">
+                    <div className={`status-bar-fill ${bar.status}`} style={{ width: `${bar.width}%` }}></div>
+                  </div>
+                  <span className="status-count">{bar.data.count} 笔 (¥{bar.data.total.toFixed(2)})</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderPromotions = () => (
+    <div className="table-container">
+      <div className="table-header">
+        <h3>推广活动列表</h3>
+        <button className="btn-primary" onClick={() => { setEditingPromo(null); setShowPromoModal(true); }}>
+          + 创建活动
+        </button>
+      </div>
+      
+      {error && <div className="error-message">{error}</div>}
+      
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>活动标题</th>
+            <th>返佣类型</th>
+            <th>返佣值</th>
+            <th>状态</th>
+            <th>链接数</th>
+            <th>已发返佣</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {promotions.map(promo => (
+            <tr key={promo.id}>
+              <td>{promo.id}</td>
+              <td>
+                <div className="name-cell">
+                  <div className="name">{promo.title}</div>
+                  {promo.description && <div className="description">{promo.description}</div>}
+                </div>
+              </td>
+              <td>
+                <span className={`badge ${promo.reward_type}`}>
+                  {promo.reward_type === 'percentage' ? '百分比' : promo.reward_type === 'fixed' ? '固定金额' : '积分'}
+                </span>
+              </td>
+              <td>
+                {promo.reward_type === 'percentage' ? `${promo.reward_value}%` : 
+                 promo.reward_type === 'fixed' ? `¥${promo.reward_value.toFixed(2)}` : 
+                 `${promo.reward_value} 分`}
+              </td>
+              <td>
+                <span className={`status-badge ${promo.status}`}>
+                  {promo.status === 'active' ? '进行中' : promo.status === 'inactive' ? '已停用' : '已过期'}
+                </span>
+              </td>
+              <td>{promo.link_count || 0}</td>
+              <td>¥{(promo.total_rewards || 0).toFixed(2)}</td>
+              <td>{new Date(promo.created_at).toLocaleDateString()}</td>
+              <td>
+                <div className="action-buttons">
+                  <button className="btn-sm" onClick={() => { setEditingPromo(promo); setShowPromoModal(true); }}>编辑</button>
+                  <button className="btn-sm warning" onClick={() => handleTogglePromo(promo.id)}>
+                    {promo.status === 'active' ? '停用' : '启用'}
+                  </button>
+                  <button className="btn-sm danger" onClick={() => handleDeletePromo(promo.id)}>删除</button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      
+      {/* 分页 */}
+      <div className="pagination">
+        <button disabled={promoPage <= 1} onClick={() => loadPromotions(promoPage - 1)}>上一页</button>
+        <span>第 {promoPage} 页 / 共 {Math.ceil(totalPromos / 20)} 页</span>
+        <button disabled={promoPage >= Math.ceil(totalPromos / 20)} onClick={() => loadPromotions(promoPage + 1)}>下一页</button>
+      </div>
+    </div>
+  );
+
+  const renderLinks = () => (
+    <div className="table-container">
+      <div className="table-header">
+        <h3>分销链接列表</h3>
+        <button className="btn-primary" onClick={() => setShowLinkModal(true)}>
+          + 生成链接
+        </button>
+      </div>
+      
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>推广短码</th>
+            <th>推广人</th>
+            <th>关联活动</th>
+            <th>点击数</th>
+            <th>注册数</th>
+            <th>转化数</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {referralLinks.map(link => (
+            <tr key={link.id}>
+              <td>{link.id}</td>
+              <td>
+                <code className="code">{link.code}</code>
+                <button className="btn-icon" onClick={() => { navigator.clipboard.writeText(link.code); alert('已复制'); }}>📋</button>
+              </td>
+              <td>{link.username}</td>
+              <td>{link.promotion_title || '-'}</td>
+              <td>{link.total_clicks || 0}</td>
+              <td>{link.total_registrations || 0}</td>
+              <td>{link.total_conversions || 0}</td>
+              <td>
+                <span className={`status-badge ${link.status}`}>
+                  {link.status === 'active' ? '活跃' : '停用'}
+                </span>
+              </td>
+              <td>{new Date(link.created_at).toLocaleDateString()}</td>
+              <td>
+                <div className="action-buttons">
+                  <button className="btn-sm" onClick={() => {
+                    const url = `${link.target_url}?ref=${link.code}`;
+                    navigator.clipboard.writeText(url);
+                    alert('链接已复制');
+                  }}>复制链接</button>
+                  <button className="btn-sm warning" onClick={async () => {
+                    if (window.confirm('确定重新生成推广短码？')) {
+                      try {
+                        await adminAPI.regenerateReferralCode(link.id);
+                        loadLinks(linkPage);
+                      } catch (err: any) {
+                        setError(err.message || '操作失败');
+                      }
+                    }
+                  }}>重新生成</button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  const renderRewards = () => (
+    <div className="table-container">
+      <div className="table-header">
+        <h3>返佣记录</h3>
+      </div>
+      
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>推广码</th>
+            <th>推广人</th>
+            <th>被推荐人</th>
+            <th>订单号</th>
+            <th>返佣类型</th>
+            <th>返佣金额</th>
+            <th>状态</th>
+            <th>打款时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rewards.map(reward => (
+            <tr key={reward.id}>
+              <td>{reward.id}</td>
+              <td><code className="code">{reward.referral_code}</code></td>
+              <td>{reward.referrer_name}</td>
+              <td>{reward.referee_name}</td>
+              <td>{reward.order_id || '-'}</td>
+              <td>
+                <span className="badge">
+                  {reward.reward_type === 'registration' ? '注册奖励' : 
+                   reward.reward_type === 'first_purchase' ? '首购返佣' : '续费返佣'}
+                </span>
+              </td>
+              <td>¥{reward.reward_amount.toFixed(2)}</td>
+              <td>
+                <span className={`status-badge ${reward.status}`}>
+                  {reward.status === 'pending' ? '待审核' : 
+                   reward.status === 'approved' ? '已通过' : 
+                   reward.status === 'paid' ? '已打款' : '已取消'}
+                </span>
+              </td>
+              <td>{reward.paid_at ? new Date(reward.paid_at).toLocaleDateString() : '-'}</td>
+              <td>
+                <div className="action-buttons">
+                  {reward.status === 'pending' && (
+                    <button className="btn-sm" onClick={() => handleApproveReward(reward.id)}>审核通过</button>
+                  )}
+                  {reward.status === 'approved' && (
+                    <button className="btn-sm warning" onClick={() => handleMarkPaid(reward.id)}>标记已打款</button>
+                  )}
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  const renderLeaderboard = () => (
+    <div className="table-container">
+      <div className="table-header">
+        <h3>推广排行榜</h3>
+      </div>
+      
+      <table className="data-table">
+        <thead>
+          <tr>
+            <th>排名</th>
+            <th>用户</th>
+            <th>点击数</th>
+            <th>注册数</th>
+            <th>转化数</th>
+            <th>产生收入</th>
+            <th>获得返佣</th>
+          </tr>
+        </thead>
+        <tbody>
+          {leaderboard.map((entry, index) => (
+            <tr key={entry.user_id}>
+              <td>
+                <span className={`rank ${index < 3 ? 'top' : ''}`}>
+                  {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : entry.rank}
+                </span>
+              </td>
+              <td>{entry.username}</td>
+              <td>{entry.total_clicks || 0}</td>
+              <td>{entry.total_registrations || 0}</td>
+              <td>{entry.total_conversions || 0}</td>
+              <td>¥{(entry.total_revenue || 0).toFixed(2)}</td>
+              <td>¥{(entry.total_rewards || 0).toFixed(2)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  return (
+    <div className="promotion-page">
+      <div className="page-header">
+        <h2>📢 推广系统管理</h2>
+        <p>管理推广活动、分销链接、返佣记录和推广统计</p>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div className="tabs">
+        <button className={`tab ${activeTab === 'overview' ? 'active' : ''}`} onClick={() => setActiveTab('overview')}>
+          📊 概览
+        </button>
+        <button className={`tab ${activeTab === 'promotions' ? 'active' : ''}`} onClick={() => setActiveTab('promotions')}>
+          📢 推广活动
+        </button>
+        <button className={`tab ${activeTab === 'links' ? 'active' : ''}`} onClick={() => setActiveTab('links')}>
+          🔗 分销链接
+        </button>
+        <button className={`tab ${activeTab === 'rewards' ? 'active' : ''}`} onClick={() => setActiveTab('rewards')}>
+          💰 返佣记录
+        </button>
+        <button className={`tab ${activeTab === 'leaderboard' ? 'active' : ''}`} onClick={() => setActiveTab('leaderboard')}>
+          🏆 排行榜
+        </button>
+      </div>
+
+      <div className="tab-content">
+        {activeTab === 'overview' && renderOverview()}
+        {activeTab === 'promotions' && renderPromotions()}
+        {activeTab === 'links' && renderLinks()}
+        {activeTab === 'rewards' && renderRewards()}
+        {activeTab === 'leaderboard' && renderLeaderboard()}
+      </div>
+
+      {/* 推广活动弹窗 */}
+      {showPromoModal && (
+        <PromotionModal
+          promotion={editingPromo}
+          onSave={handleSavePromo}
+          onCancel={() => { setShowPromoModal(false); setEditingPromo(null); }}
+        />
+      )}
+
+      {/* 生成链接弹窗 */}
+      {showLinkModal && (
+        <LinkModal
+          onSave={handleGenerateLink}
+          onCancel={() => setShowLinkModal(false)}
+        />
+      )}
+    </div>
+  );
+};
+
+// ==================== 推广活动弹窗 ====================
+interface PromotionModalProps {
+  promotion: Promotion | null;
+  onSave: (data: any) => void;
+  onCancel: () => void;
+}
+
+const PromotionModal: React.FC<PromotionModalProps> = ({ promotion, onSave, onCancel }) => {
+  const [formData, setFormData] = useState({
+    title: promotion?.title || '',
+    description: promotion?.description || '',
+    reward_type: promotion?.reward_type || 'percentage',
+    reward_value: promotion?.reward_value || 5,
+    min_payout: promotion?.min_payout || 10,
+    start_date: promotion?.start_date ? promotion.start_date.slice(0, 16) : '',
+    end_date: promotion?.end_date ? promotion.end_date.slice(0, 16) : '',
+    max_referrals: promotion?.max_referrals || 0,
+    status: promotion?.status || 'active'
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <div className="modal-header">
+          <h3>{promotion ? '编辑推广活动' : '创建推广活动'}</h3>
+          <button className="close-btn" onClick={onCancel}>×</button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="modal-body">
+            <div className="form-group">
+              <label>活动标题 *</label>
+              <input
+                type="text"
+                required
+                value={formData.title}
+                onChange={e => setFormData({ ...formData, title: e.target.value })}
+                placeholder="例如：新用户推广计划"
+              />
+            </div>
+            
+            <div className="form-group">
+              <label>活动描述</label>
+              <textarea
+                value={formData.description}
+                onChange={e => setFormData({ ...formData, description: e.target.value })}
+                placeholder="活动说明..."
+                rows={3}
+              />
+            </div>
+            
+            <div className="form-row">
+              <div className="form-group">
+                <label>返佣类型 *</label>
+                <select
+                  value={formData.reward_type}
+                  onChange={e => setFormData({ ...formData, reward_type: e.target.value })}
+                >
+                  <option value="percentage">百分比</option>
+                  <option value="fixed">固定金额</option>
+                  <option value="points">积分</option>
+                </select>
+              </div>
+              
+              <div className="form-group">
+                <label>返佣值 *</label>
+                <input
+                  type="number"
+                  required
+                  step={formData.reward_type === 'percentage' ? 1 : 0.01}
+                  min={0}
+                  value={formData.reward_value}
+                  onChange={e => setFormData({ ...formData, reward_value: parseFloat(e.target.value) })}
+                  placeholder={formData.reward_type === 'percentage' ? '5 表示 5%' : '100 表示 100元'}
+                />
+              </div>
+            </div>
+            
+            <div className="form-row">
+              <div className="form-group">
+                <label>最低提现金额</label>
+                <input
+                  type="number"
+                  step={0.01}
+                  min={0}
+                  value={formData.min_payout}
+                  onChange={e => setFormData({ ...formData, min_payout: parseFloat(e.target.value) })}
+                />
+              </div>
+              
+              <div className="form-group">
+                <label>最大推广人数 (0=无限制)</label>
+                <input
+                  type="number"
+                  min={0}
+                  value={formData.max_referrals}
+                  onChange={e => setFormData({ ...formData, max_referrals: parseInt(e.target.value) })}
+                />
+              </div>
+            </div>
+            
+            <div className="form-row">
+              <div className="form-group">
+                <label>开始时间 *</label>
+                <input
+                  type="datetime-local"
+                  required
+                  value={formData.start_date}
+                  onChange={e => setFormData({ ...formData, start_date: e.target.value })}
+                />
+              </div>
+              
+              <div className="form-group">
+                <label>结束时间 (可选)</label>
+                <input
+                  type="datetime-local"
+                  value={formData.end_date}
+                  onChange={e => setFormData({ ...formData, end_date: e.target.value })}
+                />
+              </div>
+            </div>
+          </div>
+          
+          <div className="modal-footer">
+            <button type="button" className="btn-secondary" onClick={onCancel}>取消</button>
+            <button type="submit" className="btn-primary">保存</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+// ==================== 生成链接弹窗 ====================
+interface LinkModalProps {
+  onSave: (data: any) => void;
+  onCancel: () => void;
+}
+
+const LinkModal: React.FC<LinkModalProps> = ({ onSave, onCancel }) => {
+  const [formData, setFormData] = useState({
+    promotion_id: '',
+    target_url: 'https://bot.qihuyun.com/register',
+    channel: 'link'
+  });
+  const [promotions, setPromotions] = useState<Promotion[]>([]);
+
+  useEffect(() => {
+    adminAPI.getPromotions({ status: 'active', page: 1, page_size: 100 })
+      .then(res => {
+        if (res.success) setPromotions(res.data.items);
+      })
+      .catch(err => console.error('Failed to load active promotions:', err));
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      promotion_id: parseInt(formData.promotion_id),
+      target_url: formData.target_url,
+      channel: formData.channel
+    });
+  };
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <div className="modal-header">
+          <h3>生成分销链接</h3>
+          <button className="close-btn" onClick={onCancel}>×</button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="modal-body">
+            <div className="form-group">
+              <label>选择推广活动 *</label>
+              <select
+                required
+                value={formData.promotion_id}
+                onChange={e => setFormData({ ...formData, promotion_id: e.target.value })}
+              >
+                <option value="">-- 请选择 --</option>
+                {promotions.map(p => (
+                  <option key={p.id} value={p.id}>{p.title}</option>
+                ))}
+              </select>
+            </div>
+            
+            <div className="form-group">
+              <label>目标URL *</label>
+              <input
+                type="url"
+                required
+                value={formData.target_url}
+                onChange={e => setFormData({ ...formData, target_url: e.target.value })}
+                placeholder="https://bot.qihuyun.com/register"
+              />
+            </div>
+            
+            <div className="form-group">
+              <label>推广渠道</label>
+              <select
+                value={formData.channel}
+                onChange={e => setFormData({ ...formData, channel: e.target.value })}
+              >
+                <option value="link">链接</option>
+                <option value="qrcode">二维码</option>
+                <option value="api">API</option>
+              </select>
+            </div>
+          </div>
+          
+          <div className="modal-footer">
+            <button type="button" className="btn-secondary" onClick={onCancel}>取消</button>
+            <button type="submit" className="btn-primary">生成链接</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Promotion;