# 历史解卦列表页面实现

## 目标
实现完整的历史解卦列表页面功能，包括：
1. Dashboard 卡片点击跳转到解卦结果页
2. 重构 HistoryListPage 使用真实 API
3. 快捷筛选和搜索功能

## 设计稿参考
- `HomeHistoryListPage` (EH0fv) - 历史列表页面
- `HistoryResultDetailPage` - 历史详情页面

## 实现步骤

### Step 1: Dashboard 卡片点击跳转
**文件**: `web/src/components/Dashboard.tsx`

- [ ] 将历史卡片包装为可点击链接
- [ ] 跳转到 `/{locale}/history/{threadId}`
- [ ] 确保 `HistoryItem` 有正确的 `threadId` 字段

### Step 2: 重构 HistoryListPage
**文件**: `web/src/components/HistoryListPage.tsx`

- [ ] 删除 mock 数据
- [ ] 使用 `getAgentHistory()` API 获取真实数据
- [ ] 实现页面布局：
  - Header: 返回按钮 + 标题 + 搜索框 + 筛选按钮
  - Stats: 总记录数 + 可追问数 + 最近解卦时间
  - Main: 左侧列表 + 右侧快捷筛选面板
- [ ] 实现列表项点击跳转到详情页

### Step 3: 快捷筛选功能
**文件**: `web/src/components/HistoryListPage.tsx`

- [ ] 全部 / 事业·学业 / 情感·财富 等分类筛选
- [ ] 前端过滤实现
- [ ] 显示各分类数量

### Step 4: 搜索功能
**文件**: `web/src/components/HistoryListPage.tsx`

- [ ] 搜索问题或卦名
- [ ] 前端过滤实现
- [ ] 实时搜索响应

### Step 5: 历史详情页检查
**文件**: `web/src/components/HistoryResultPage.tsx`

- [ ] 确保 URL 参数 `threadId` 正确接收
- [ ] 根据 `threadId` 显示对应的解卦结果

## 数据结构

### HistoryItem
```typescript
interface HistoryItem {
  id: string;
  threadId: string;
  question: string;
  category: string;
  hexagram_name: string;
  rating: string;
  created_at: string;
  can_follow_up: boolean;
}
```

## API 使用
- `getAgentHistory()` - 获取历史记录列表
- `mapHistoryMessagesToItems()` - 转换数据格式

## 注意事项
- 响应式设计支持
- 国际化支持 (zh/en)
- 参照设计稿调整样式