# 用户贡献实时显示方案

## 1. 概述

### 1.1 需求描述
在活动页面实时展示所有用户的贡献动态，包括：
- 贡献者头像 / 昵称
- 道具图标 / 名称
- 贡献数量

### 1.2 展示形式
- **列表形式**：最新贡献显示在顶部
- **生命周期**：页面可见时显示，不可见时暂停
- **消失逻辑**：每条记录 5 秒无新数据则逐条淡出消失

### 1.3 技术方案
- 后端：Gateway 层新增 HTTP API，ActivityService 处理业务逻辑
- 前端：轮询 composable 与列表组件
- 数据库：`activity_contributions` 表已存在

---

## 2. 数据库设计

### 2.1 ER 关系

```
┌─────────────────┐       ┌──────────────────────────┐
│   activities     │       │  activity_contributions  │
│─────────────────│       │───────────────────────────│
│ id              │──────< │ activity_id              │
│ star_id         │       │ user_id                  │
│ ...             │       │ star_id                  │
└─────────────────┘       │ item_id                  │
                          │ item_type                │
                          │ quantity                 │
                          │ contribution_points      │
                          │ created_at（毫秒时间戳）  │
                          └──────────────────────────┘
                                    │
                                    │ LEFT JOIN
                                    ▼
                          ┌─────────────────┐
                          │     users       │
                          │─────────────────│
                          │ id              │
                          │ nickname        │
                          │ avatar_url      │
                          └─────────────────┘
                                    │
                                    │ LEFT JOIN
                                    ▼
                          ┌─────────────────┐
                          │  activity_items │
                          │─────────────────│
                          │ id              │
                          │ item_name       │
                          │ icon_url        │
                          └─────────────────┘
```

### 2.2 表结构

**activity_contributions（活动贡献记录表）**

| 字段 | 类型 | 约束 | 说明 |
|------|------|------|------|
| id | bigint | PK, AUTO_INCREMENT | 贡献记录 ID |
| activity_id | bigint | NOT NULL, INDEX | 关联活动 ID |
| user_id | bigint | NOT NULL | 贡献者用户 ID |
| star_id | bigint | NOT NULL | 明星 ID |
| item_id | bigint | NOT NULL | 道具 ID |
| item_type | varchar(50) | NOT NULL | 道具类型，如 `firework`、`megaphone` |
| quantity | int | DEFAULT 1 | 本次贡献数量 |
| crystal_spent | bigint | NOT NULL | 花费的水晶数量 |
| contribution_points | bigint | NOT NULL | 贡献值 |
| created_at | bigint | NOT NULL, INDEX | 创建时间（毫秒时间戳） |

**索引设计**

| 索引名 | 索引字段 | 类型 | 用途 |
|--------|----------|------|------|
| idx_activity_id | (activity_id) | BTREE | 按活动 ID 筛选 |
| idx_activity_created | (activity_id, created_at DESC, id DESC) | BTREE | 按活动时间降序+ID降序查询，支持 since_timestamp + since_id 轮询 |

> `created_at DESC` 索引可加速 `WHERE activity_id = ? AND created_at > sinceTimestamp` 查询。

### 2.3 写入时机

`purchaseItem` 成功后，**同步写入**此表。

**连击计数器（Redis）**：

用户每次点击购买道具时，更新 Redis 连击计数器：
- **Key**：`combo:{user_id}:{item_type}`
- **Value**：当前连击数
- **TTL**：3 秒（无新点击则过期）

```
用户点击购买 → Redis INCR combo:{user_id}:{item_type} + EXPIRE 3秒
```

### 2.4 查询时获取连击数

前端轮询时，后端从 Redis 获取当前连击数，合并到返回结果中：

```
GET combo:{user_id}:{item_type} → 返回当前计数
```

**连击逻辑**：
- 同一用户、同一道具：3 秒内的多次点击累加显示
- 不同道具：独立计数，互不影响

---

## 3. 后端 API 设计

### 3.1 接口概述

| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 获取最新贡献记录 | GET | `/api/v1/activity/:activityId/contributions/latest` | 实时轮询用 |

### 3.2 获取最新贡献记录接口

**请求**
```
GET /api/v1/activity/:activityId/contributions/latest
```

**Query 参数**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| since_timestamp | int64 | 否 | 0 | 起始时间戳（毫秒），获取该时间之后的最新记录 |
| since_id | int64 | 否 | 0 | 起始记录 ID（用于同时间戳内的二次筛选） |
| limit | int32 | 否 | 1 | 每次拉取条数，最大 5 |

**响应（成功）**
```json
{
  "code": 0,
  "message": "success",
  "data": {
    "records": [
      {
        "id": 12345,
        "activity_id": 1001,
        "user_id": 888,
        "user_nickname": "小明",
        "user_avatar": "https://example.com/avatar.jpg",
        "item_type": "firework",
        "item_name": "烟花",
        "item_icon": "https://example.com/firework.png",
        "quantity": 3,
        "contribution_points": 3,
        "combo_count": 2,
        "created_at": 1747133400000
      }
    ],
    "latest_timestamp": 1747133400000,
    "latest_id": 12345
  }
}
```

**字段说明**：
| 字段 | 说明 |
|------|------|
| quantity | 本次 contribution 的实际贡献数量 |
| combo_count | 从 Redis 获取的当前连击数（3秒内同用户同道具的累计点击） |

**响应（失败）**
```json
{
  "code": 40401,
  "message": "活动不存在",
  "data": null
}
```

### 3.3 接口流程

```
请求到达
    │
    ▼
参数校验（activityId 格式、limit 范围）
    │
    ▼
Gateway 调用 ActivityService（直接查 Repository）
    │
    ▼
查询 activity_contributions 表，并联表查询用户信息和道具信息
  SELECT c.id, c.activity_id, c.user_id,
         u.nickname as user_nickname, u.avatar_url as user_avatar,
         i.item_type, i.item_name, i.icon_url as item_icon,
         c.quantity, c.contribution_points, c.created_at
  FROM activity_contributions c
  LEFT JOIN users u ON c.user_id = u.id
  LEFT JOIN activity_items i ON c.item_id = i.id
  WHERE c.activity_id = ?
    AND (c.created_at > ? OR (c.created_at = ? AND c.id > ?))
  ORDER BY c.created_at DESC, c.id DESC
  LIMIT limit
    │
    ▼
组装响应
  latest_timestamp = 本次返回的最新记录时间戳
  latest_id = 本次返回的最大 ID
  combo_count = 从 Redis 获取连击数
    │
    ▼
返回 code: 0 + records + latest_timestamp + latest_id
```

> 使用时间戳 + ID 双重条件查询，好处是：
> 1. 用户退出页面再进来时，用列表中最新记录的时间戳和 ID 作为起点
> 2. 同一毫秒内多条记录时，用 ID 做二次筛选，不会漏数据
> 3. `ORDER BY created_at DESC, id DESC` 保证同时间戳内 ID 大的在前

### 3.4 后端实现

#### Gateway 层（HTTP API）

新增 Controller：`gateway/controller/contribution_controller.go`

```go
package controller

type ContributionController struct {
    db *gorm.DB
}

func NewContributionController(db *gorm.DB) *ContributionController

// GetLatestContributions 获取最新贡献记录
// @Summary 获取活动最新贡献记录（实时轮询用）
// @Tags contributions
// @Accept json
// @Produce json
// @Security BearerAuth
// @Param activityId path int64 true "活动ID"
// @Param since_timestamp query int64 false "起始时间戳（毫秒）"
// @Param since_id query int64 false "起始记录ID（用于同时间戳内的二次筛选）"
// @Param limit query int32 false "拉取条数，默认1，最大5"
// @Success 200 {object} response.Response
// @Router /api/v1/activity/{activityId}/contributions/latest [get]
func (ctrl *ContributionController) GetLatestContributions(c *gin.Context)
```

#### Repository 层

```go
// services/activityService/repository/activity_repository.go

// GetLatestContributions 获取最新的贡献记录（用于实时轮询）
// sinceTimestamp: 起始时间戳，sinceId: 起始记录ID（用于同时间戳内的二次筛选）
func (r *activityRepository) GetLatestContributions(activityID int64, sinceTimestamp int64, sinceId int64, limit int) ([]*models.ActivityContribution, int64, int64, error) {
    query := r.db.Model(&models.ActivityContribution{}).
        Where("activity_id = ?", activityID)

    if sinceTimestamp > 0 && sinceId > 0 {
        // 同一毫秒内用 ID 做二次筛选
        query = query.Where("(created_at > ? OR (created_at = ? AND id > ?))", sinceTimestamp, sinceTimestamp, sinceId)
    } else if sinceTimestamp > 0 {
        query = query.Where("created_at > ?", sinceTimestamp)
    }

    var contributions []*models.ActivityContribution
    if err := query.Order("created_at DESC, id DESC").Limit(limit).Find(&contributions).Error; err != nil {
        return nil, 0, 0, err
    }

    // 返回本次返回的最新时间戳和最大 ID
    var latestTimestamp, latestId int64
    if len(contributions) > 0 {
        latestTimestamp = contributions[0].CreatedAt
        latestId = contributions[0].Id
    }

    return contributions, latestTimestamp, latestId, nil
}
```

**获取连击数（Service 层）**：

```go
func (s *ActivityService) GetComboCount(userID int64, itemType string) (int64, error) {
    key := fmt.Sprintf("combo:%d:%s", userID, itemType)
    count, err := s.redis.Get(key).Int64()
    if err != nil || count == 0 {
        return 1, nil // 无连击时返回 1
    }
    return count, nil
}
```

#### 写入时机（purchaseItem 改造）

当前 `PurchaseItem` 成功后已调用 `CreateContribution`，需确保冗余字段（user_nickname、user_avatar、item_name、item_icon）一并写入。

**连击计数**：
```go
// Redis INCR + EXPIRE
rdb.Incr(ctx, fmt.Sprintf("combo:%d:%s", userID, itemType))
rdb.Expire(ctx, fmt.Sprintf("combo:%d:%s", userID, itemType), 3*time.Second)
```

#### 查询时获取连击数

```go
// 从 Redis 获取 combo_count
comboCount, _ := rdb.Get(ctx, fmt.Sprintf("combo:%d:%s", userID, itemType)).Int64()
```

---

## 4. 前端架构设计

### 4.1 目录结构

```
frontend/pages/support-activity/
├── components/
│   └── ContributionList.vue        # 新增：贡献列表组件
├── composables/
│   └── useContributionPolling.js  # 新增：贡献轮询逻辑
└── index.vue
```

### 4.2 数据流

```
页面可见
    │
    ▼
useContributionPolling.start()
    │
    ▼
首次全量拉取：GET /api/v1/activity/{id}/contributions/latest?since_timestamp=0&since_id=0&limit=5
    │
    ▼
records = 返回的最新记录（最多 5 条）
latestTimestamp = 本次返回的最新时间戳
latestId = 本次返回的最大 ID
    │
    ▼
定时轮询（每秒）
        │
        ▼
    GET /api/v1/activity/{id}/contributions/latest?since_timestamp={latestTimestamp}&since_id={latestId}&limit=1
        │
        ▼
    比对 records：
    - 有新记录（时间戳更新 或 同时间戳内 ID 更新）→ 插入到列表头部，移除超出的记录，重置所有记录计时器
    - 无新记录 → 不更新，计时器继续倒计时
        │
        ▼
    更新 latestTimestamp 和 latestId

页面不可见
    │
    ▼
useContributionPolling.stop() — 停止轮询，保留 latestTimestamp 和 records

页面重新可见
    │
    ▼
useContributionPolling.start() — 直接用现有的 latestTimestamp 继续轮询
```

### 4.3 轮询策略

| 参数 | 值 | 说明 |
|------|-----|------|
| 轮询间隔 | 1000ms | 每秒拉取一次，确保实时感 |
| 首次请求 | 全量拉取 5 条最新记录 | 获取最近 5 条实时贡献 |
| 轮询请求 | limit=1 | 每秒拉取 1 条，保持实时感 |
| 列表上限 | 5 条 | 超出后移除最旧记录 |
| 消失计时 | 每条记录 5 秒无更新则逐条淡出消失 | 无新数据时，最早那条记录 5 秒后先消失，后续记录依次前移并同样计时 |
| 暂停条件 | onHide | 页面隐藏时停止轮询，保留 latestTimestamp、latestId 和 records |
| 恢复条件 | onShow | 页面显示时继续轮询，使用现有的 latestTimestamp 和 latestId |
| 切换活动 | - | activityId 变化时，调用 reset() 重置所有状态 |

---

## 5. 组件设计

### 5.1 ContributionList.vue

**功能**
- 展示贡献记录滚动列表，最新记录在顶部
- 页面不可见时整体隐藏（v-if）
- 新记录有淡入动画，记录超时淡出消失

**Props**
| 属性 | 类型 | 必填 | 说明 |
|------|------|------|------|
| activityId | string | 是 | 活动 ID |

**模板结构**
```vue
<template>
  <view class="contribution-list" v-if="visible">
    <view class="list-header">
      <text class="header-title">实时贡献</text>
    </view>
    <scroll-view class="list-content" scroll-y>
      <view
        v-for="(record, index) in records"
        :key="record.id"
        class="contribution-item"
        :class="{ 'new-item': index === 0, 'fading-out': record.fading }"
      >
        <image class="user-avatar" :src="record.user_avatar" mode="aspectFill" />
        <text class="user-nickname">{{ record.user_nickname }}</text>
        <text class="contribute-text">贡献了</text>
        <image class="item-icon" :src="record.item_icon" mode="aspectFill" />
        <text class="item-name">{{ record.item_name }}</text>
        <text class="item-quantity">x{{ record.combo_count > 1 ? record.combo_count : record.quantity }}</text>
      </view>
    </scroll-view>
  </view>
</template>
```

**样式要点**
- 固定高度（建议 200rpx），超出部分滚动
- 半透明背景（rgba(0,0,0,0.3)）
- 每条记录一行：头像 + 昵称 + "贡献了" + 道具图标 + 名称 + 数量
- 新记录（index === 0）有 0.3s 淡入动画
- 消失时添加 fading 类，0.5s 淡出动画

### 5.2 useContributionPolling.js

**功能**
- 管理贡献记录的轮询逻辑
- 提供 start / stop 方法
- 自动处理增量拉取和列表更新
- 每条记录独立计时，超时淡出消失

**接口**
```javascript
// 输入
activityId: Ref<string>

// 输出
{
  records,        // Ref<ContributionRecord[]> — 当前展示的贡献列表
  visible,        // Ref<boolean> — 列表是否可见（用于 v-if 控制）
  loading,        // Ref<boolean> — 是否正在加载
  error,          // Ref<string | null> — 错误信息
  start,          // () => void — 开始轮询
  stop,           // () => void — 停止轮询（保留状态）
  reset          // () => void — 重置所有状态（切换活动时用）
}

// 内部状态
{
  latestTimestamp,    // number — 当前列表中最新记录的时间戳（继续轮询的起点）
  latestId,          // number — 当前列表中最新记录的 ID（同时间戳内二次筛选用）
  pollingTimer,       // number — setInterval 返回的 timer ID
  isPolling,          // boolean — 是否正在轮询
  recordTimers,       // Map — 记录 ID -> 定时器
}
```

**核心逻辑**
```javascript
const MAX_RECORDS = 5
const POLL_INTERVAL = 1000 // 每秒拉取
const RECORD_TTL = 5000 // 每条记录 5 秒后消失

let latestTimestamp = 0 // 初始为 0，获取所有最新记录
let latestId = 0 // 初始为 0
const recordTimers = new Map() // 记录 ID -> 定时器

function resetRecordTimer(record) {
  // 清除已有定时器
  if (recordTimers.has(record.id)) {
    clearTimeout(recordTimers.get(record.id))
    recordTimers.delete(record.id)
  }
  // 清除淡出状态（新数据到来时重置）
  const target = records.value.find(r => r.id === record.id)
  if (target) {
    target.fading = false
  }
  // 设置新的消失定时器
  const timer = setTimeout(() => {
    // 标记为淡出状态
    const target = records.value.find(r => r.id === record.id)
    if (target) {
      target.fading = true
      // 等待动画完成后移除
      setTimeout(() => {
        records.value = records.value.filter(r => r.id !== record.id)
        recordTimers.delete(record.id)
      }, 500)
    } else {
      recordTimers.delete(record.id)
    }
  }, RECORD_TTL)
  recordTimers.set(record.id, timer)
}

async function fetchLatest() {
  // 拉取 since_timestamp 和 since_id 之后的最新记录
  const res = await fetchActivityContributionsLatest(activityId.value, latestTimestamp, latestId, 1)

  if (res.records.length === 0) return

  const newRecord = res.records[0]

  // 检测到新记录（时间戳更新，或时间戳相同但 ID 更新）
  const isNew = newRecord.created_at > latestTimestamp ||
    (newRecord.created_at === latestTimestamp && newRecord.id > latestId)

  if (isNew) {
    // 重置所有现有记录的计时器（新数据到来，刷新列表）
    records.value.forEach(resetRecordTimer)
    // 新记录插入到列表头部
    records.value = [newRecord, ...records.value].slice(0, MAX_RECORDS)
    // 为新记录启动消失计时器
    resetRecordTimer(newRecord)
    // 更新时间戳和 ID
    latestTimestamp = newRecord.created_at
    latestId = newRecord.id
  }
}

function start() {
  if (pollingTimer) return
  isPolling.value = true
  // 如果 latestTimestamp 为 0，说明是首次或切换活动，清空列表
  if (latestTimestamp === 0) {
    records.value = []
  }
  fetchLatest()
  pollingTimer = setInterval(fetchLatest, POLL_INTERVAL)
}

function stop() {
  if (pollingTimer) {
    clearInterval(pollingTimer)
    pollingTimer = null
  }
  // 停止所有记录的计时器
  recordTimers.forEach(timer => clearTimeout(timer))
  recordTimers.clear()
  isPolling.value = false
  // 不清空 records、latestTimestamp、latestId，保留状态以便恢复
}

function reset() {
  // 切换活动时调用，重置所有状态
  stop()
  latestTimestamp = 0
  latestId = 0
  records.value = []
}

// 监听页面显示/隐藏
onShow(() => {
  visible.value = true
  start()
})

onHide(() => {
  visible.value = false
  stop()
})
```

> `fetchActivityContributionsLatest` 调用 `GET /api/v1/activity/{id}/contributions/latest?since_timestamp={sinceTimestamp}&since_id={sinceId}&limit={limit}`
>
> 新增 `reset()` 方法，切换活动时调用，重置所有状态。

---

## 6. 页面集成

### 6.1 组件引入

在 `ThemeBanner` 下方、`StageArea` 上方引入：

```vue
<!-- ThemeBanner 下方 -->
<ThemeBanner v-if="config" ... />

<!-- 贡献列表 -->
<ContributionList
  v-if="activityId && !isLoading"
  :activity-id="activityId"
  class="contribution-list-wrapper"
/>

<!-- StageArea -->
<StageArea v-if="config" ... />
```

### 6.2 样式控制

```css
.contribution-list-wrapper {
  width: 100%;
  padding: 0 24rpx;
}

.contribution-item.fading-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
```

---

## 7. 性能与优化

| 优化点 | 方案 |
|--------|------|
| 列表更新 | 新记录插入到头部，使用展开运算符 |
| 去重 | 以 `record.id` 作为 v-for 的 :key + 时间戳+ID 双重比对 |
| 列表上限 | 超过 5 条时移除最旧记录 |
| 记录消失 | 每条记录 5 秒无更新则淡出消失 |
| 内存占用 | 页面隐藏时停止计时器，保留 records |
| 轮询策略 | 每秒拉取 1 条，保持实时感 |
| 同毫秒去重 | 使用 `since_timestamp + since_id` 双重条件，同一毫秒多条不漏 |

---

## 8. 错误处理

| 场景 | 处理方式 |
|------|----------|
| 接口返回 404（活动不存在） | 组件隐藏，不影响页面其他功能 |
| 接口返回 500（服务器错误） | 静默忽略，继续等待下一次 |
| 网络断开 | 页面 onHide 会停止轮询；恢复后 onShow 继续轮询 |
| 返回数据为空 | 不更新列表，不更新 latestTimestamp 和 latestId |
| 切换活动 | 调用 reset() 重置所有状态 |
| 同毫秒多条记录 | 使用 since_timestamp + since_id 双重筛选，不会漏数据 |
| 连击显示 | combo_count 从 Redis 获取，3秒内同用户同道具累加 |

---

## 9. 实施步骤

### 9.1 后端实现
1. [x] 在 `activity_contributions` 表联表查询用户信息和道具信息（LEFT JOIN users, LEFT JOIN activity_items）
2. [ ] 在 Redis 中实现连击计数器 `combo:{user_id}:{item_type}`，TTL 3秒
3. [ ] 在 `activity_repository.go` 添加 `GetLatestContributions` 方法
4. [ ] 在 Gateway 层添加 `contribution_controller.go`
5. [ ] 在路由注册新接口 `/api/v1/activity/:activityId/contributions/latest`
6. [ ] 验证 `purchaseItem` 后 `CreateContribution` 正常工作，并更新 Redis 连击计数器

### 9.2 前端 API 层
1. [ ] 在 `frontend/utils/activity-config.js` 中新增 `fetchActivityContributionsLatest` 方法

### 9.3 前端组件
1. [ ] 创建 `useContributionPolling.js`
2. [ ] 创建 `ContributionList.vue`

### 9.4 页面集成
1. [ ] 在 `index.vue` 中引入 `ContributionList`

### 9.5 测试验证
1. [ ] 轮询正常：每秒间隔拉取数据
2. [ ] 增量正确：新贡献出现时列表头部插入
3. [ ] 消失逻辑：无新数据 5 秒后记录淡出消失
4. [ ] 页面切换：onHide 停止，onShow 继续（latestTimestamp 保持）
5. [ ] 列表上限：超过 5 条时移除最旧记录

---

## 10. 待确认

- [x] 后端接口由我方实现
- [x] 道具图标由后端提供（冗余字段直接存储）
- [x] 仅显示当前页面实时数据（页面切换时暂停）
- [x] 后端框架：Go + Gin（Gateway）+ Dubbo-go（微服务）+ GORM
- [x] 数据库：MySQL
- [x] ORM：GORM
- [x] 冗余字段：user_nickname、user_avatar、item_name、item_icon 直接存在表中
- [x] 不需要"几秒前"等相对时间显示，只显示实时贡献
- [x] 轮询使用时间戳（since_timestamp）而非 ID，避免重复拉取
- [ ] 列表视觉样式是否有设计稿？