docs: 添加活动榜单弹窗设计文档

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

docs/superpowers/specs/2026-05-14-activity-ranking-modal-design.md

@@ -0,0 +1,77 @@
+# 活动榜单弹窗设计
+
+**日期**: 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`。