# 活动榜单弹窗设计

**日期**: 2026-05-14
**状态**: 已批准

## 概述

新建 `ActivityRankingModal.vue` 弹窗组件，从 `ThemeBanner` 点击触发，专门显示单活动的排名数据。

## 核心功能

1. **TOP3 展示** - 排名前三用户卡片（头像、昵称、人气值）
2. **排名列表** - 第4名及以后，支持滚动加载更多
3. **当前用户栏** - 固定底部，显示当前用户排名和贡献值
4. **下拉刷新** - 支持 pull-to-refresh 刷新数据
5. **单活动模式** - 直接使用传入的 `activityId` 获取数据，无需活动切换

## 组件接口

### Props

| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| visible | Boolean | 是 | 弹窗显示状态 |
| activityId | String \| Number | 是 | 活动ID |
| starId | String \| Number | 否 | 明星ID，默认从 storage 获取 |
| currentUser | Object | 否 | 当前用户数据 |

### Emits

| 事件 | 参数 | 说明 |
|------|------|------|
| update:visible | Boolean | 关闭弹窗 |
| visit | { userId, nickname } | 拜访按钮点击 |
| view-profile | userId | 查看用户资料 |
| view-artwork | { artworkId, userId } | 查看作品 |

## API 调用（独立实现）

使用 `getActivityRankingApi(activityId, starId, page, pageSize)` 获取活动排名数据。

响应数据格式复用 RankingModal 的 `transformActivityRankingData` 逻辑：

```javascript
{
  rank: Number,
  userId: String,
  avatar: String,
  nickname: String,
  popularityScore: Number,  // total_contribution
  artworkImage: String
}
```

## 页面结构

```
ActivityRankingModal
├── 遮罩层（点击关闭）
├── 弹窗容器
│   ├── 背景
│   ├── 头部（活动名称 + 关闭按钮）
│   ├── 滚动内容区
│   │   ├── 加载中/错误/空状态
│   │   ├── TOP3 卡片区
│   │   ├── 排名列表
│   │   └── 加载更多
│   └── 当前用户栏（固定底部）
```

## 样式

复用 `RankingModal.vue` 的现有样式主题（渐变背景、卡片样式等）。

## 触发方式

在 `ThemeBanner` 组件上添加点击事件，打开 `ActivityRankingModal`。