# 股票详情页报告展示功能验证指南

## 📋 验证步骤

### 步骤1：验证后端数据格式

运行测试脚本：
```bash
.\.venv\Scripts\python scripts/test_stock_detail_reports.py
```

**预期结果**：
```
================================================================================
📊 测试股票详情页分析报告数据格式
================================================================================

[步骤1] 登录获取token...
✅ 登录成功，获取到token

[步骤2] 获取历史分析记录...
✅ 获取历史记录成功

📋 最新任务信息:
   task_id: 14a63d4d-2798-4cf7-93f6-c3255e110651
   stock_code: 002475
   status: completed

[步骤3] 检查result_data字段...
✅ 找到result_data字段
   result_data键: ['analysis_id', 'stock_symbol', 'stock_code', 'analysis_date', 
                   'summary', 'recommendation', 'confidence_score', 'risk_level', 
                   'key_points', 'detailed_analysis', 'execution_time', 'tokens_used', 
                   'reports', 'decision']

🔍 关键字段检查:
   有 summary: True
   有 recommendation: True
   有 confidence_score: True
   有 reports: True

📊 reports字段分析:
   类型: <class 'dict'>
   包含 7 个报告:
      - market_report: ✅ 格式正确
      - fundamentals_report: ✅ 格式正确
      - investment_plan: ✅ 格式正确
      - trader_investment_plan: ✅ 格式正确
      - final_trade_decision: ✅ 格式正确
      - research_team_decision: ✅ 格式正确
      - risk_management_decision: ✅ 格式正确

================================================================================
✅ 测试完成：前后端数据格式一致
================================================================================

✅ 所有测试通过
```

---

### 步骤2：启动前端开发服务器

```bash
cd frontend
npm run dev
```

**预期输出**：
```
  VITE v5.0.10  ready in 1234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
```

---

### 步骤3：访问股票详情页

打开浏览器访问：
```
http://localhost:5173/stocks/002475
```

---

### 步骤4：验证页面展示

#### ✅ 检查点1：分析结果卡片
在页面中间偏下位置，应该看到"详细分析结果"卡片：

```
┌─────────────────────────────────────────────────────────┐
│ 详细分析结果                                              │
├─────────────────────────────────────────────────────────┤
│ [卖出] 信心度 90% 2025-09-30                             │
│                                                          │
│ 基于事实纠错、逻辑重构、风险评估与历史教训后的负责任投资判断。│
│                                                          │
│ ─────────────────────────────────────────────────────── │
│                                                          │
│ 📊 详细分析报告 (7)              [查看完整报告]           │
│                                                          │
│ [📈 市场分析] [📊 基本面分析] [💼 投资计划]               │
│ [🎯 交易员计划] [✅ 最终决策] [🔬 研究团队决策]           │
│ [⚠️ 风险管理决策]                                        │
└─────────────────────────────────────────────────────────┘
```

**验证项**：
- [ ] 显示投资建议标签（如"卖出"）
- [ ] 显示信心度（如"90%"）
- [ ] 显示分析日期
- [ ] 显示分析摘要文本
- [ ] 显示"📊 详细分析报告 (7)"标题
- [ ] 显示"查看完整报告"按钮
- [ ] 显示7个报告标签

---

#### ✅ 检查点2：点击"查看完整报告"按钮

点击按钮后，应该弹出一个对话框：

```
┌─────────────────────────────────────────────────────────────────┐
│ 📊 详细分析报告                                          [×]     │
├─────────────────────────────────────────────────────────────────┤
│ [📈 市场分析] [📊 基本面分析] [💼 投资计划] [🎯 交易员计划]    │
│ [✅ 最终决策] [🔬 研究团队决策] [⚠️ 风险管理决策]              │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  # 002475 股票技术分析报告                                       │
│                                                                  │
│  ## 一、价格趋势分析                                             │
│                                                                  │
│  从2025年9月1日至9月30日的交易数据来看，002475（华昌达）的价格   │
│  整体呈现波动上升的趋势...                                       │
│                                                                  │
│  [滚动查看更多内容]                                              │
│                                                                  │
├─────────────────────────────────────────────────────────────────┤
│                                    [关闭]  [导出报告]            │
└─────────────────────────────────────────────────────────────────┘
```

**验证项**：
- [ ] 对话框成功弹出
- [ ] 显示7个标签页
- [ ] 默认显示第一个报告（市场分析）
- [ ] 报告内容格式化良好（标题、段落、列表等）
- [ ] 可以滚动查看长内容
- [ ] 显示"关闭"和"导出报告"按钮

---

#### ✅ 检查点3：切换报告标签

点击不同的标签页：

**验证项**：
- [ ] 点击"📊 基本面分析"标签，显示基本面分析报告
- [ ] 点击"💼 投资计划"标签，显示投资计划报告
- [ ] 点击"✅ 最终决策"标签，显示最终决策报告
- [ ] 每个标签页的内容都不同
- [ ] 切换标签页时内容立即更新
- [ ] 所有报告都格式化良好

---

#### ✅ 检查点4：导出报告功能

点击"导出报告"按钮：

**验证项**：
- [ ] 浏览器自动下载一个文件
- [ ] 文件名格式：`002475_分析报告_2025-09-30.md`
- [ ] 文件是Markdown格式
- [ ] 文件包含所有7个报告的内容
- [ ] 文件内容格式正确
- [ ] 显示"报告已导出"成功提示

**示例文件内容**：
```markdown
# 002475 股票分析报告

**分析日期**: 2025-09-30
**投资建议**: 操作: sell；目标价: 48.0；置信度: 0.75
**信心度**: 90%

---

## 📈 市场分析

# 002475 股票技术分析报告

## 一、价格趋势分析

从2025年9月1日至9月30日的交易数据来看...

---

## 📊 基本面分析

### 1. **公司基本信息分析（立讯精密，股票代码：002475）**

...

---

[其他报告内容]
```

---

#### ✅ 检查点5：样式和交互

**验证项**：
- [ ] 报告标题（h1, h2, h3）字体大小和粗细正确
- [ ] 段落间距合适
- [ ] 列表（ul, ol）缩进正确
- [ ] 代码块（code, pre）背景色正确
- [ ] 表格（table）边框和对齐正确
- [ ] 引用块（blockquote）左边框显示
- [ ] 滚动条样式美观
- [ ] 对话框宽度适中（80%）
- [ ] 响应式设计（在不同屏幕尺寸下正常显示）

---

### 步骤5：测试边界情况

#### 测试1：没有分析报告的股票
访问：`http://localhost:5173/stocks/000001`

**预期结果**：
- 不显示"详细分析结果"卡片（因为没有历史分析）
- 或者显示卡片但不显示"详细分析报告"区域

#### 测试2：分析进行中
触发一次新的分析，在分析进行中时：

**预期结果**：
- 显示进度条
- 显示"正在生成分析报告…"提示
- 不显示"详细分析报告"区域

#### 测试3：分析失败
如果分析失败：

**预期结果**：
- 不显示"详细分析结果"卡片
- 或者显示错误信息

---

## 🐛 常见问题排查

### 问题1：报告对话框不显示

**可能原因**：
- `lastAnalysis.value` 为空
- `lastAnalysis.value.reports` 为空或不是对象

**排查方法**：
1. 打开浏览器开发者工具（F12）
2. 在Console中输入：
   ```javascript
   console.log(lastAnalysis.value)
   console.log(lastAnalysis.value?.reports)
   ```
3. 检查数据结构是否正确

---

### 问题2：Markdown渲染失败

**可能原因**：
- `marked` 库未正确导入
- 报告内容格式错误

**排查方法**：
1. 检查Console是否有错误信息
2. 检查 `marked` 是否正确导入：
   ```javascript
   import { marked } from 'marked'
   ```
3. 检查报告内容是否为字符串类型

---

### 问题3：样式显示异常

**可能原因**：
- CSS样式未正确应用
- 主题变量未定义

**排查方法**：
1. 检查Elements面板中的样式
2. 检查是否有CSS冲突
3. 检查Element Plus主题变量是否正确

---

## ✅ 验证清单

完成以下所有检查项即表示功能正常：

### 后端数据
- [ ] 测试脚本运行成功
- [ ] 后端返回完整的reports字段
- [ ] reports包含7个报告
- [ ] 每个报告都是字符串类型
- [ ] 报告内容不为空

### 前端展示
- [ ] 分析结果卡片正常显示
- [ ] 显示报告数量和标签列表
- [ ] "查看完整报告"按钮可点击
- [ ] 对话框正常弹出
- [ ] 7个标签页都能正常切换
- [ ] Markdown渲染正确
- [ ] 样式美观

### 功能交互
- [ ] 可以切换不同报告
- [ ] 可以滚动查看长内容
- [ ] 可以导出报告
- [ ] 导出的文件格式正确
- [ ] 可以关闭对话框

### 边界情况
- [ ] 没有报告时不显示报告区域
- [ ] 分析进行中时显示进度
- [ ] 分析失败时不显示报告

---

## 📸 截图示例

### 1. 分析结果卡片
![分析结果卡片](./screenshots/analysis-card.png)

### 2. 报告对话框
![报告对话框](./screenshots/reports-dialog.png)

### 3. 报告内容
![报告内容](./screenshots/report-content.png)

### 4. 导出的Markdown文件
![导出文件](./screenshots/exported-report.png)

---

## 🎉 验证完成

如果所有检查项都通过，说明功能已经正常工作！

**下一步**：
1. 提交代码到Git仓库
2. 更新版本号
3. 部署到生产环境
4. 通知用户新功能上线

