77 lines
2.0 KiB
Markdown
77 lines
2.0 KiB
Markdown
|
# 历史解卦列表页面实现
|
||
|
|
|
||
|
|
## 目标
|
||
|
|
实现完整的历史解卦列表页面功能，包括：
|
||
|
|
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)
|
||
|
|
- 参照设计稿调整样式
|