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

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

2026-05-14 12:39:44 +08:00

2.1 KiB

Raw Blame History

活动榜单弹窗设计

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

概述

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

核心功能

TOP3 展示 - 排名前三用户卡片（头像、昵称、人气值）
排名列表 - 第4名及以后，支持滚动加载更多
当前用户栏 - 固定底部，显示当前用户排名和贡献值
下拉刷新 - 支持 pull-to-refresh 刷新数据
单活动模式 - 直接使用传入的 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 逻辑：

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

页面结构

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

样式

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

触发方式

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

2.1 KiB Raw Blame History Unescape Escape