# 每日浏览任务追踪方案

## 目标
在前端路由变化时自动调用 `tasks.track` 上报浏览行为，使每日浏览任务能够正常统计进度。

---

## 当前状态分析

| 问题 | 原因 |
|------|------|
| 每日浏览任务不工作 | 前端没有在任何地方调用 `tasks.track({ action_type: 'browse' })` |
| 后端 API 已就绪 | `TaskTrackAPIView` 支持 `browse` action_type |
| 前端请求函数已存在 | `api_request.tasks.track({ action_type, count })` 已定义 |

---

## 实现方案

### 核心思路
在 `App.tsx` 中添加一个全局路由监听组件，当路由变化时调用 `tasks.track`。

### 需要修改的文件

| 文件 | 修改内容 |
|------|----------|
| `App.tsx` | 添加 `RouteChangeTracker` 组件，监听路由变化并上报浏览 |
| `hooks/useRouteTracker.ts` (新增) | 封装路由追踪逻辑，包含节流和登录判断 |

---

## 详细实现

### Step 1: 创建自定义 Hook `useRouteTracker`

**文件**: `src/hooks/useRouteTracker.ts`

```typescript
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selectIsLogin } from '@/features/login';
import { api_request } from '@/utils/request';

const TRACK_THROTTLE_MS = 3000; // 3秒内不重复上报同一页面

export const useRouteTracker = () => {
  const location = useLocation();
  const isLogin = useSelector(selectIsLogin);
  const lastTrackedPath = useRef<string>('');
  const lastTrackedTime = useRef<number>(0);

  useEffect(() => {
    if (!isLogin) return;

    const currentPath = location.pathname + location.search;
    const now = Date.now();

    // 节流：同一页面 3 秒内不重复上报
    if (currentPath === lastTrackedPath.current && now - lastTrackedTime.current < TRACK_THROTTLE_MS) {
      return;
    }

    lastTrackedPath.current = currentPath;
    lastTrackedTime.current = now;

    api_request.tasks.track({ action_type: 'browse', count: 1 }).catch(() => {});
  }, [location, isLogin]);
};
```

### Step 2: 在 App.tsx 中使用

**文件**: `src/App.tsx`

```tsx
import { useRouteTracker } from '@/hooks/useRouteTracker';

const App: React.FC = () => {
  useRouteTracker(); // 添加路由追踪
  // ... 其余代码
};
```

---

## 设计决策

| 决策点 | 选择 | 原因 |
|--------|------|------|
| 节流时间 | 3 秒 | 避免快速切换页面导致大量请求 |
| 是否追踪所有页面 | 是 | 后端会匹配活跃的 browse 任务，无匹配则忽略 |
| 未登录时是否追踪 | 否 | 后端需要用户身份才能创建进度记录 |
| 是否包含 search 参数 | 是 | 不同搜索词视为不同浏览 |

---

## 验证步骤

1. 登录用户访问任意页面 → 打开 Network 面板，确认 `/user/tasks/track/` 被调用
2. 快速切换页面 → 确认 3 秒内不会重复上报同一页面
3. 未登录用户访问页面 → 确认不调用 track API
4. 进入任务中心 → 确认每日浏览任务进度 +1