@quantabit/leaderboard-sdk 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,1280 @@
+import { BaseApiClient } from '@quantabit/sdk-config';
+import React, { useState, useCallback, useEffect, useMemo, useContext, createContext } from 'react';
+
+/**
+ * Leaderboard SDK - API 客户端
+ * 排行榜系统后端接口封装
+ * 
+ * 使用 BaseApiClient 基类简化代码
+ */
+
+
+/**
+ * 排行榜 API 客户端
+ */
+class LeaderboardApiClient extends BaseApiClient {
+  constructor(config = {}) {
+    super('/leaderboard', config);
+  }
+
+  // ============ 排行榜查询 ============
+
+  /**
+   * 获取排行榜列表
+   */
+  async getLeaderboards() {
+    return this.get('/list');
+  }
+
+  /**
+   * 获取排行榜详情
+   * @param {string} leaderboardId - 排行榜 ID
+   */
+  async getLeaderboard(leaderboardId) {
+    return this.get(`/${leaderboardId}`);
+  }
+
+  /**
+   * 获取排行榜排名
+   */
+  async getRanking(leaderboardId, period, params = {}) {
+    if (typeof period === 'object') {
+      params = period;
+      period = undefined;
+    }
+    const queryParams = {
+      ...params
+    };
+    if (period) queryParams.period = period;
+    return this.get(`/${leaderboardId}/rankings`, queryParams);
+  }
+  async getRankings(leaderboardId, period, params = {}) {
+    return this.getRanking(leaderboardId, period, params);
+  }
+
+  /**
+   * 获取 Top Rankers
+   */
+  async getTopRankers(leaderboardId, period, n = 3) {
+    if (typeof period === 'number') {
+      n = period;
+      period = undefined;
+    }
+    const queryParams = {
+      n
+    };
+    if (period) queryParams.period = period;
+    return this.get(`/${leaderboardId}/top`, queryParams);
+  }
+
+  /**
+   * 获取 Top N
+   */
+  async getTopN(leaderboardId, n = 10) {
+    return this.getTopRankers(leaderboardId, undefined, n);
+  }
+
+  // ============ 我的排名 ============
+
+  /**
+   * 获取我的排名
+   */
+  async getMyRank(leaderboardId, period) {
+    const queryParams = {};
+    if (period) queryParams.period = period;
+    return this.get(`/${leaderboardId}/my-rank`, queryParams);
+  }
+
+  /**
+   * 获取附近排名
+   */
+  async getNearbyRanks(leaderboardId, period, range = 5) {
+    if (typeof period === 'number') {
+      range = period;
+      period = undefined;
+    }
+    const queryParams = {
+      range
+    };
+    if (period) queryParams.period = period;
+    return this.get(`/${leaderboardId}/nearby`, queryParams);
+  }
+
+  /**
+   * 获取附近用户
+   */
+  async getNearbyUsers(leaderboardId, range = 5) {
+    return this.getNearbyRanks(leaderboardId, undefined, range);
+  }
+
+  /**
+   * 获取榜单奖励
+   */
+  async getPrizes(leaderboardId, period) {
+    const queryParams = {};
+    if (period) queryParams.period = period;
+    return this.get(`/${leaderboardId}/prizes`, queryParams);
+  }
+
+  /**
+   * 获取奖励 (别名)
+   */
+  async getRewards(leaderboardId, period) {
+    return this.getPrizes(leaderboardId, period);
+  }
+
+  /**
+   * 获取我的历史排名
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {Object} params - 查询参数
+   */
+  async getMyRankHistory(leaderboardId, params = {}) {
+    return this.get(`/${leaderboardId}/my/history`, params);
+  }
+
+  // ============ 分数提交 ============
+
+  /**
+   * 提交分数
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {number} score - 分数
+   * @param {Object} metadata - 元数据
+   */
+  async submitScore(leaderboardId, score, metadata = {}) {
+    return this.post(`/${leaderboardId}/score`, {
+      score,
+      ...metadata
+    });
+  }
+
+  /**
+   * 增加分数
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {number} increment - 增量
+   */
+  async incrementScore(leaderboardId, increment) {
+    return this.post(`/${leaderboardId}/score/increment`, {
+      increment
+    });
+  }
+
+  // ============ 时间维度 ============
+
+  /**
+   * 获取日榜
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {string} date - 日期
+   * @param {Object} params - 查询参数
+   */
+  async getDailyRankings(leaderboardId, date, params = {}) {
+    return this.get(`/${leaderboardId}/daily`, {
+      date,
+      ...params
+    });
+  }
+
+  /**
+   * 获取周榜
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {string} week - 周（YYYY-WXX）
+   * @param {Object} params - 查询参数
+   */
+  async getWeeklyRankings(leaderboardId, week, params = {}) {
+    return this.get(`/${leaderboardId}/weekly`, {
+      week,
+      ...params
+    });
+  }
+
+  /**
+   * 获取月榜
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {string} month - 月份（YYYY-MM）
+   * @param {Object} params - 查询参数
+   */
+  async getMonthlyRankings(leaderboardId, month, params = {}) {
+    return this.get(`/${leaderboardId}/monthly`, {
+      month,
+      ...params
+    });
+  }
+
+  // ============ 好友排名 ============
+
+  /**
+   * 获取好友排名
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {Object} params - 查询参数
+   */
+  async getFriendRankings(leaderboardId, params = {}) {
+    return this.get(`/${leaderboardId}/friends`, params);
+  }
+
+  // ============ 管理员操作 ============
+
+  /**
+   * 创建排行榜
+   * @param {Object} data - 排行榜数据
+   */
+  async createLeaderboard(data) {
+    return this.post('/admin', data);
+  }
+
+  /**
+   * 更新排行榜
+   * @param {string} leaderboardId - 排行榜 ID
+   * @param {Object} updates - 更新数据
+   */
+  async updateLeaderboard(leaderboardId, updates) {
+    return this.put(`/admin/${leaderboardId}`, updates);
+  }
+
+  /**
+   * 删除排行榜
+   * @param {string} leaderboardId - 排行榜 ID
+   */
+  async deleteLeaderboard(leaderboardId) {
+    return this.delete(`/admin/${leaderboardId}`);
+  }
+
+  /**
+   * 重置排行榜
+   * @param {string} leaderboardId - 排行榜 ID
+   */
+  async resetLeaderboard(leaderboardId) {
+    return this.post(`/admin/${leaderboardId}/reset`);
+  }
+}
+
+// 创建默认实例
+const leaderboardApi = new LeaderboardApiClient();
+
+/**
+ * Leaderboard SDK - 类型定义
+ */
+
+// 榜单类型
+const BoardType = {
+  DAILY: 'daily',
+  WEEKLY: 'weekly',
+  MONTHLY: 'monthly',
+  TOTAL: 'total',
+  SEASON: 'season'
+};
+
+// 排行维度
+const RankDimension = {
+  POINTS: 'points',
+  // 积分
+  LEVEL: 'level',
+  // 等级
+  WEALTH: 'wealth',
+  // 财富
+  INFLUENCE: 'influence',
+  // 影响力
+  CONTRIBUTION: 'contribution',
+  // 贡献
+  ACTIVITY: 'activity' // 活跃度
+};
+
+// 排名变化类型
+const RankChangeType = {
+  UP: 'up',
+  DOWN: 'down',
+  SAME: 'same',
+  NEW: 'new'
+};
+
+// 榜单配置
+const BoardConfig = {
+  [BoardType.DAILY]: {
+    label: 'boardDaily',
+    icon: '📆',
+    refresh: '每日更新'
+  },
+  [BoardType.WEEKLY]: {
+    label: 'boardWeekly',
+    icon: '📅',
+    refresh: '每周更新'
+  },
+  [BoardType.MONTHLY]: {
+    label: 'boardMonthly',
+    icon: '🗓️',
+    refresh: '每月更新'
+  },
+  [BoardType.TOTAL]: {
+    label: 'boardTotal',
+    icon: '🏆',
+    refresh: '实时更新'
+  },
+  [BoardType.SEASON]: {
+    label: 'boardSeason',
+    icon: '🎖️',
+    refresh: '赛季结算'
+  }
+};
+
+// 维度配置
+const DimensionConfig = {
+  [RankDimension.POINTS]: {
+    label: 'dimPoints',
+    icon: '⭐',
+    color: '#faad14'
+  },
+  [RankDimension.LEVEL]: {
+    label: 'dimLevel',
+    icon: '📈',
+    color: '#52c41a'
+  },
+  [RankDimension.WEALTH]: {
+    label: 'dimWealth',
+    icon: '💰',
+    color: '#eb2f96'
+  },
+  [RankDimension.INFLUENCE]: {
+    label: 'dimInfluence',
+    icon: '👑',
+    color: '#722ed1'
+  },
+  [RankDimension.CONTRIBUTION]: {
+    label: 'dimContribution',
+    icon: '🎁',
+    color: '#1890ff'
+  },
+  [RankDimension.ACTIVITY]: {
+    label: 'dimActivity',
+    icon: '🔥',
+    color: '#ff4d4f'
+  }
+};
+
+// 排名样式
+const RankStyle = {
+  1: {
+    bg: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
+    icon: '🥇'
+  },
+  2: {
+    bg: 'linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%)',
+    icon: '🥈'
+  },
+  3: {
+    bg: 'linear-gradient(135deg, #CD7F32 0%, #8B4513 100%)',
+    icon: '🥉'
+  }
+};
+
+// 格式化分数
+function formatScore(score, dimension) {
+  if (typeof score !== 'number') return score;
+  if (score >= 1000000) return (score / 1000000).toFixed(1) + 'M';
+  if (score >= 1000) return (score / 1000).toFixed(1) + 'K';
+  return score.toLocaleString();
+}
+
+// 获取排名变化
+function getRankChange(current, previous) {
+  if (!previous) return {
+    type: RankChangeType.NEW,
+    value: 0
+  };
+  if (current < previous) return {
+    type: RankChangeType.UP,
+    value: previous - current
+  };
+  if (current > previous) return {
+    type: RankChangeType.DOWN,
+    value: current - previous
+  };
+  return {
+    type: RankChangeType.SAME,
+    value: 0
+  };
+}
+const LeaderboardType = {};
+const Period = {};
+
+const SUPPORTED_LANGUAGES = ['en', 'zh', 'ja', 'ko'];
+const messages = {
+  en: {
+    'lb.title': 'Leaderboard',
+    'lb.rank': 'Rank',
+    'lb.score': 'Score'
+  },
+  zh: {
+    'lb.title': '排行榜',
+    'lb.rank': '排名',
+    'lb.score': '分数'
+  },
+  ja: {
+    'lb.title': 'ランキング',
+    'lb.rank': '順位',
+    'lb.score': 'スコア'
+  },
+  ko: {
+    'lb.title': '排행榜',
+    'lb.rank': '순위',
+    'lb.score': '점수'
+  }
+};
+let currentLang = 'en';
+function setLanguage(l) {
+  if (SUPPORTED_LANGUAGES.includes(l)) currentLang = l;
+}
+function getLanguage() {
+  return currentLang;
+}
+function t(k) {
+  return messages[currentLang]?.[k] || messages.en?.[k] || k;
+}
+
+/**
+ * Leaderboard SDK - React Hooks
+ * 排行榜相关的状态管理
+ */
+
+
+/**
+ * 获取排行榜
+ */
+function useLeaderboard$1(type = 'points', period = 'weekly', options = {}) {
+  const [rankings, setRankings] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    total: 0,
+    hasMore: true
+  });
+  const {
+    limit = 50
+  } = options;
+  const fetchRankings = useCallback(async (page = 1) => {
+    try {
+      setLoading(true);
+      const response = await leaderboardApi.getRankings(type, period, {
+        page,
+        limit
+      });
+      if (page === 1) {
+        setRankings(response.data || []);
+      } else {
+        setRankings(prev => [...prev, ...(response.data || [])]);
+      }
+      setPagination({
+        page,
+        total: response.total || 0,
+        hasMore: response.hasMore || false
+      });
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [type, period, limit]);
+  useEffect(() => {
+    fetchRankings(1);
+  }, [fetchRankings]);
+  const loadMore = useCallback(() => {
+    if (!loading && pagination.hasMore) {
+      fetchRankings(pagination.page + 1);
+    }
+  }, [loading, pagination, fetchRankings]);
+  return {
+    rankings,
+    loading,
+    error,
+    pagination,
+    loadMore,
+    refresh: () => fetchRankings(1)
+  };
+}
+
+/**
+ * 获取我的排名
+ */
+function useMyRank(type = 'points', period = 'weekly') {
+  const [rank, setRank] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchRank = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await leaderboardApi.getMyRank(type, period);
+      setRank(response);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [type, period]);
+  useEffect(() => {
+    fetchRank();
+  }, [fetchRank]);
+  return {
+    rank: rank?.rank,
+    score: rank?.score,
+    change: rank?.change,
+    percentile: rank?.percentile,
+    loading,
+    error,
+    refresh: fetchRank
+  };
+}
+
+/**
+ * 排行榜前三名
+ */
+function useTopThree(type = 'points', period = 'weekly') {
+  const [top, setTop] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchTop = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await leaderboardApi.getTopRankers(type, period, 3);
+      setTop(response.data || []);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [type, period]);
+  useEffect(() => {
+    fetchTop();
+  }, [fetchTop]);
+  const [first, second, third] = top;
+  return {
+    first,
+    second,
+    third,
+    top,
+    loading,
+    error,
+    refresh: fetchTop
+  };
+}
+
+/**
+ * 排行榜周围排名
+ */
+function useNearbyRanks(type = 'points', period = 'weekly') {
+  const [nearby, setNearby] = useState([]);
+  const [currentUser, setCurrentUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchNearby = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await leaderboardApi.getNearbyRanks(type, period);
+      setNearby(response.data || []);
+      setCurrentUser(response.currentUser);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [type, period]);
+  useEffect(() => {
+    fetchNearby();
+  }, [fetchNearby]);
+  return {
+    nearby,
+    currentUser,
+    loading,
+    error,
+    refresh: fetchNearby
+  };
+}
+
+/**
+ * 排行榜类型切换
+ */
+function useLeaderboardTabs(defaultType = 'points', defaultPeriod = 'weekly') {
+  const [type, setType] = useState(defaultType);
+  const [period, setPeriod] = useState(defaultPeriod);
+  const types = useMemo(() => [{
+    value: 'points',
+    label: '积分榜'
+  }, {
+    value: 'level',
+    label: '等级榜'
+  }, {
+    value: 'activity',
+    label: '活跃榜'
+  }, {
+    value: 'contribution',
+    label: '贡献榜'
+  }], []);
+  const periods = useMemo(() => [{
+    value: 'daily',
+    label: '日榜'
+  }, {
+    value: 'weekly',
+    label: '周榜'
+  }, {
+    value: 'monthly',
+    label: '月榜'
+  }, {
+    value: 'allTime',
+    label: '总榜'
+  }], []);
+  return {
+    type,
+    setType,
+    period,
+    setPeriod,
+    types,
+    periods
+  };
+}
+
+/**
+ * 排行榜倒计时
+ */
+function useLeaderboardCountdown(period = 'weekly') {
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(period));
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft(period));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [period]);
+  return timeLeft;
+}
+
+/**
+ * 排行榜奖励
+ */
+function useLeaderboardPrizes(type = 'points', period = 'weekly') {
+  const [prizes, setPrizes] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchPrizes = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await leaderboardApi.getPrizes(type, period);
+      setPrizes(response.prizes || []);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [type, period]);
+  useEffect(() => {
+    fetchPrizes();
+  }, [fetchPrizes]);
+  return {
+    prizes,
+    loading,
+    error,
+    refresh: fetchPrizes
+  };
+}
+
+// 工具函数
+function calculateTimeLeft(period) {
+  const now = new Date();
+  let end;
+  switch (period) {
+    case 'daily':
+      end = new Date(now);
+      end.setHours(24, 0, 0, 0);
+      break;
+    case 'weekly':
+      end = new Date(now);
+      end.setDate(end.getDate() + (7 - end.getDay()));
+      end.setHours(0, 0, 0, 0);
+      break;
+    case 'monthly':
+      end = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+      break;
+    default:
+      return null;
+  }
+  const diff = end - now;
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)),
+    minutes: Math.floor(diff % (1000 * 60 * 60) / (1000 * 60)),
+    seconds: Math.floor(diff % (1000 * 60) / 1000)
+  };
+}
+
+const MEDALS = {
+  1: {
+    emoji: '🥇',
+    bg: 'linear-gradient(135deg,#fde68a,#fbbf24)',
+    color: '#92400e'
+  },
+  2: {
+    emoji: '🥈',
+    bg: 'linear-gradient(135deg,#e5e7eb,#d1d5db)',
+    color: '#374151'
+  },
+  3: {
+    emoji: '🥉',
+    bg: 'linear-gradient(135deg,#fed7aa,#fdba74)',
+    color: '#9a3412'
+  }
+};
+function RankBadge({
+  rank,
+  size = 28,
+  className = ''
+}) {
+  const medal = MEDALS[rank];
+  if (medal) return /*#__PURE__*/React.createElement("div", {
+    className: `qlb-medal ${className}`,
+    style: {
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      background: medal.bg,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size * 0.5,
+      flexShrink: 0,
+      boxShadow: '0 2px 6px rgba(0,0,0,0.1)'
+    }
+  }, medal.emoji);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: {
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      background: '#f4f4f5',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 11,
+      fontWeight: 700,
+      color: '#71717a',
+      flexShrink: 0
+    }
+  }, rank);
+}
+
+function Leaderboard({
+  items = [],
+  title = 'Leaderboard',
+  valueLabel = 'Score',
+  highlightUser,
+  showAvatars = true,
+  className = ''
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: `qlb-board ${className}`,
+    style: {
+      borderRadius: 16,
+      border: '1px solid #e4e4e7',
+      background: '#fff',
+      overflow: 'hidden'
+    }
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '16px 20px',
+      borderBottom: '1px solid #f4f4f5',
+      fontSize: 16,
+      fontWeight: 700,
+      color: '#18181b'
+    }
+  }, title), /*#__PURE__*/React.createElement("div", null, items.map((item, i) => {
+    const rank = item.rank || i + 1;
+    const isHighlight = highlightUser && (item.id === highlightUser || item.name === highlightUser);
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id || i,
+      className: "qlb-row",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '10px 20px',
+        borderBottom: i < items.length - 1 ? '1px solid #f4f4f5' : 'none',
+        background: isHighlight ? 'rgba(59,130,246,0.04)' : 'transparent',
+        transition: 'all 0.15s'
+      }
+    }, /*#__PURE__*/React.createElement(RankBadge, {
+      rank: rank
+    }), showAvatars && (item.avatar ? /*#__PURE__*/React.createElement("img", {
+      src: item.avatar,
+      alt: "",
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        objectFit: 'cover',
+        flexShrink: 0
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        background: '#eff6ff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 14,
+        fontWeight: 700,
+        color: '#3b82f6',
+        flexShrink: 0
+      }
+    }, (item.name || '?')[0])), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        overflow: 'hidden'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: isHighlight ? 700 : 500,
+        color: '#18181b',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
+    }, item.name), item.subtitle && /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 11,
+        color: '#a1a1aa'
+      }
+    }, item.subtitle)), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 15,
+        fontWeight: 700,
+        color: rank <= 3 ? '#f59e0b' : '#18181b',
+        textAlign: 'right'
+      }
+    }, typeof item.value === 'number' ? item.value.toLocaleString() : item.value, item.change && /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 11,
+        color: item.change > 0 ? '#22c55e' : '#ef4444',
+        fontWeight: 500
+      }
+    }, item.change > 0 ? '↑' : '↓', Math.abs(item.change))));
+  })));
+}
+
+function TopThree({
+  items = [],
+  className = ''
+}) {
+  const ordered = [items[1], items[0], items[2]].filter(Boolean);
+  const heights = [100, 140, 80];
+  const ranks = [2, 1, 3];
+  return /*#__PURE__*/React.createElement("div", {
+    className: `qlb-podium ${className}`,
+    style: {
+      display: 'flex',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      gap: 8
+    }
+  }, ordered.map((item, i) => {
+    const rank = ranks[i];
+    const h = heights[i];
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 100
+      }
+    }, item.avatar ? /*#__PURE__*/React.createElement("img", {
+      src: item.avatar,
+      alt: "",
+      style: {
+        width: rank === 1 ? 56 : 44,
+        height: rank === 1 ? 56 : 44,
+        borderRadius: '50%',
+        objectFit: 'cover',
+        border: rank === 1 ? '3px solid #fbbf24' : rank === 2 ? '2px solid #d1d5db' : '2px solid #fdba74',
+        marginBottom: 6
+      }
+    }) : /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: rank === 1 ? 56 : 44,
+        height: rank === 1 ? 56 : 44,
+        borderRadius: '50%',
+        background: '#eff6ff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: rank === 1 ? 20 : 16,
+        fontWeight: 700,
+        color: '#3b82f6',
+        marginBottom: 6
+      }
+    }, (item.name || '?')[0]), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 12,
+        fontWeight: 600,
+        color: '#18181b',
+        textAlign: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: 100
+      }
+    }, item.name), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 800,
+        color: '#f59e0b',
+        marginTop: 2
+      }
+    }, typeof item.value === 'number' ? item.value.toLocaleString() : item.value), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100%',
+        height: h,
+        marginTop: 8,
+        borderRadius: '8px 8px 0 0',
+        background: rank === 1 ? 'linear-gradient(180deg,#fbbf24,#d97706)' : rank === 2 ? 'linear-gradient(180deg,#d1d5db,#9ca3af)' : 'linear-gradient(180deg,#fdba74,#f97316)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 24,
+        fontWeight: 800,
+        color: 'rgba(255,255,255,0.9)'
+      }
+    }, "#", rank)));
+  }));
+}
+
+/**
+ * Leaderboard SDK - Context Provider
+ */
+
+const LeaderboardContext = /*#__PURE__*/createContext(null);
+function useLeaderboard() {
+  const context = useContext(LeaderboardContext);
+  if (!context) {
+    throw new Error('useLeaderboard must be used within a LeaderboardProvider');
+  }
+  return context;
+}
+
+/**
+ * Leaderboard SDK - RankingList 组件
+ * 排行榜列表
+ */
+
+function RankingList({
+  limit = 20,
+  showMyRank = true,
+  onUserClick,
+  className = ''
+}) {
+  const {
+    ranking,
+    myRank,
+    dimension,
+    loading,
+    loadRanking,
+    loadMyRank
+  } = useLeaderboard();
+  useEffect(() => {
+    loadRanking(dimension, undefined, {
+      limit
+    });
+    if (showMyRank) loadMyRank();
+  }, [dimension, limit, showMyRank, loadRanking, loadMyRank]);
+  const dimConfig = DimensionConfig[dimension] || {};
+  const renderRankBadge = rank => {
+    const style = RankStyle[rank];
+    if (style) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "rank-badge top",
+        style: {
+          background: style.bg
+        }
+      }, style.icon);
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      className: "rank-badge"
+    }, rank);
+  };
+  const renderChange = item => {
+    const change = getRankChange(item.rank, item.previous_rank);
+    if (change.type === RankChangeType.SAME) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      className: `rank-change ${change.type}`
+    }, change.type === RankChangeType.UP && `↑${change.value}`, change.type === RankChangeType.DOWN && `↓${change.value}`, change.type === RankChangeType.NEW && t('rankNew'));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ranking-list ${className}`
+  }, loading && /*#__PURE__*/React.createElement("div", {
+    className: "ranking-loading"
+  }, t('loading')), /*#__PURE__*/React.createElement("div", {
+    className: "ranking-items"
+  }, ranking.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    key: item.user_id || index,
+    className: `ranking-item ${item.rank <= 3 ? 'top-rank' : ''}`,
+    onClick: () => onUserClick?.(item)
+  }, renderRankBadge(item.rank), /*#__PURE__*/React.createElement("div", {
+    className: "user-avatar"
+  }, item.avatar ? /*#__PURE__*/React.createElement("img", {
+    src: item.avatar,
+    alt: item.nickname
+  }) : /*#__PURE__*/React.createElement("span", null, item.nickname?.charAt(0) || '?')), /*#__PURE__*/React.createElement("div", {
+    className: "user-info"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "user-name"
+  }, item.nickname), renderChange(item)), /*#__PURE__*/React.createElement("div", {
+    className: "user-score",
+    style: {
+      color: dimConfig.color
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "score-icon"
+  }, dimConfig.icon), /*#__PURE__*/React.createElement("span", {
+    className: "score-value"
+  }, formatScore(item.score)))))), ranking.length === 0 && !loading && /*#__PURE__*/React.createElement("div", {
+    className: "ranking-empty"
+  }, t('noData')), showMyRank && myRank && /*#__PURE__*/React.createElement("div", {
+    className: "my-rank-bar"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "my-rank-label"
+  }, t('myRanking')), /*#__PURE__*/React.createElement("div", {
+    className: "my-rank-info"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "my-rank-num"
+  }, myRank.rank ? `#${myRank.rank}` : t('notRanked')), /*#__PURE__*/React.createElement("span", {
+    className: "my-rank-score",
+    style: {
+      color: dimConfig.color
+    }
+  }, dimConfig.icon, " ", formatScore(myRank.score)))));
+}
+
+function RankingItem({
+  item,
+  index,
+  dimension = 'points',
+  onUserClick
+}) {
+  const rank = item.rank || index + 1;
+  const dimConfig = DimensionConfig[dimension] || {};
+  const change = getRankChange(item.rank, item.previous_rank);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ranking-item ${rank <= 3 ? 'top-rank' : ''}`,
+    onClick: () => onUserClick?.(item),
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 12,
+      padding: '12px 16px',
+      borderBottom: '1px solid #f4f4f5',
+      cursor: onUserClick ? 'pointer' : 'default'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rank-badge"
+  }, rank), /*#__PURE__*/React.createElement("div", {
+    className: "user-avatar",
+    style: {
+      width: 32,
+      height: 32,
+      borderRadius: '50%',
+      background: '#eff6ff',
+      display: 'flex',
+      alignItems: 'center',
+      justifyindex: 'center'
+    }
+  }, item.avatar ? /*#__PURE__*/React.createElement("img", {
+    src: item.avatar,
+    alt: item.nickname,
+    style: {
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      objectFit: 'cover'
+    }
+  }) : /*#__PURE__*/React.createElement("span", null, item.nickname?.charAt(0) || '?')), /*#__PURE__*/React.createElement("div", {
+    className: "user-info",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "user-name",
+    style: {
+      fontWeight: 600
+    }
+  }, item.nickname), change.type !== RankChangeType.SAME && /*#__PURE__*/React.createElement("span", {
+    className: `rank-change ${change.type}`,
+    style: {
+      marginLeft: 8,
+      fontSize: 11,
+      color: change.type === RankChangeType.UP ? '#22c55e' : '#ef4444'
+    }
+  }, change.type === RankChangeType.UP ? `↑${change.value}` : `↓${change.value}`)), /*#__PURE__*/React.createElement("div", {
+    className: "user-score",
+    style: {
+      color: dimConfig.color,
+      fontWeight: 700
+    }
+  }, /*#__PURE__*/React.createElement("span", null, dimConfig.icon), " ", formatScore(item.score)));
+}
+function MyRankCard({
+  myRank,
+  dimension = 'points'
+}) {
+  const dimConfig = DimensionConfig[dimension] || {};
+  if (!myRank) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "my-rank-card",
+    style: {
+      padding: '16px',
+      background: '#f8fafc',
+      borderRadius: '12px',
+      marginTop: '16px',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: '#64748b'
+    }
+  }, "My Ranking"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 20,
+      fontWeight: 800,
+      color: '#0f172a'
+    }
+  }, myRank.rank ? `#${myRank.rank}` : 'Not Ranked')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: '#64748b'
+    }
+  }, "My Score"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 18,
+      fontWeight: 700,
+      color: dimConfig.color
+    }
+  }, dimConfig.icon, " ", formatScore(myRank.score))));
+}
+function LeaderboardTabs({
+  type,
+  setType,
+  period,
+  setPeriod,
+  types = [],
+  periods = []
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "leaderboard-tabs",
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8,
+      marginBottom: 16
+    }
+  }, types.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8
+    }
+  }, types.map(t => /*#__PURE__*/React.createElement("button", {
+    key: t.value,
+    onClick: () => setType?.(t.value),
+    style: {
+      padding: '6px 12px',
+      borderRadius: 8,
+      border: 'none',
+      background: type === t.value ? '#3b82f6' : '#f1f5f9',
+      color: type === t.value ? '#fff' : '#475569',
+      cursor: 'pointer',
+      fontSize: 13,
+      fontWeight: 600
+    }
+  }, t.label))), periods.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8
+    }
+  }, periods.map(p => /*#__PURE__*/React.createElement("button", {
+    key: p.value,
+    onClick: () => setPeriod?.(p.value),
+    style: {
+      padding: '4px 10px',
+      borderRadius: 6,
+      border: 'none',
+      background: period === p.value ? '#3b82f6' : '#f8fafc',
+      color: period === p.value ? '#fff' : '#64748b',
+      cursor: 'pointer',
+      fontSize: 12
+    }
+  }, p.label))));
+}
+function LeaderboardCountdown({
+  period = 'weekly'
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "leaderboard-countdown",
+    style: {
+      fontSize: 12,
+      color: '#64748b',
+      background: '#f1f5f9',
+      padding: '6px 12px',
+      borderRadius: 6,
+      display: 'inline-block'
+    }
+  }, "Time Remaining: ", period);
+}
+function LeaderboardPanel({
+  title = 'Leaderboard',
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "leaderboard-panel",
+    style: {
+      background: '#fff',
+      borderRadius: 16,
+      border: '1px solid #e2e8f0',
+      padding: 20,
+      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.05)'
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      margin: '0 0 16px 0',
+      fontSize: 18,
+      fontWeight: 700,
+      color: '#0f172a'
+    }
+  }, title), children);
+}
+
+// ============ Services & Client ============
+async function getRankings(leaderboardId, period, params) {
+  return leaderboardApi.getRankings(leaderboardId, period, params);
+}
+async function getMyRank(leaderboardId, period) {
+  return leaderboardApi.getMyRank(leaderboardId, period);
+}
+async function getTopRankers(leaderboardId, period, n) {
+  return leaderboardApi.getTopRankers(leaderboardId, period, n);
+}
+async function getPrizes(leaderboardId, period) {
+  return leaderboardApi.getPrizes(leaderboardId, period);
+}
+
+export { BoardConfig, BoardType, DimensionConfig, Leaderboard, LeaderboardApiClient, LeaderboardCountdown, LeaderboardPanel, LeaderboardTabs, LeaderboardType, MyRankCard, Period, RankBadge, RankChangeType, RankDimension, RankStyle, RankingItem, RankingList, SUPPORTED_LANGUAGES, TopThree, formatScore, getLanguage, getMyRank, getPrizes, getRankChange, getRankings, getTopRankers, leaderboardApi, messages, setLanguage, t, useLeaderboard$1 as useLeaderboard, useLeaderboardCountdown, useLeaderboardPrizes, useLeaderboardTabs, useMyRank, useNearbyRanks, useTopThree };
+//# sourceMappingURL=index.esm.js.map