From 63b0b0423db833f25860a2383b8fa6655a9c9d36 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Thu, 14 May 2026 12:39:44 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E6=A6=9C=E5=8D=95=E5=BC=B9=E7=AA=97=E8=AE=BE=E8=AE=A1=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ...026-05-14-activity-ranking-modal-design.md | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-14-activity-ranking-modal-design.md

diff --git a/docs/superpowers/specs/2026-05-14-activity-ranking-modal-design.md b/docs/superpowers/specs/2026-05-14-activity-ranking-modal-design.md
new file mode 100644
index 0000000..9a302d2
--- /dev/null
+++ b/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`。
\ No newline at end of file