eryao/.trellis/tasks/archive/2026-05/05-10-web-history-list-page/prd.md

历史解卦列表页面实现

目标

实现完整的历史解卦列表页面功能，包括：

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

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)
• 参照设计稿调整样式