docs: 将所有文档迁移到 docs/ 目录
- 移动42个文档文件到 docs/ 目录 - 更新 .gitignore 允许 docs/ 下的 .md 文件 - 删除根目录下的重复文档文件 📁 文档分类: - StockDetailPanel 重构文档(3个) - PostHog 集成文档(6个) - 系统架构和API文档(33个) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
695
docs/MOCK_DATA_CENTER_SUPPLEMENT.md
Normal file
695
docs/MOCK_DATA_CENTER_SUPPLEMENT.md
Normal file
@@ -0,0 +1,695 @@
|
||||
# 个人中心 Mock 数据补充文档
|
||||
|
||||
> **补充日期**: 2025-01-19
|
||||
> **补充范围**: 个人中心 (`/home/center`) 页面所需的全部 Mock 数据和 API
|
||||
> **补充目标**: 完善 Mock 数据,支持个人中心页面在开发环境下完整运行
|
||||
|
||||
---
|
||||
|
||||
## 📋 目录
|
||||
|
||||
- [1. 业务逻辑梳理](#1-业务逻辑梳理)
|
||||
- [2. API 接口清单](#2-api-接口清单)
|
||||
- [3. Mock 数据结构](#3-mock-数据结构)
|
||||
- [4. 实施内容](#4-实施内容)
|
||||
- [5. 测试验证](#5-测试验证)
|
||||
- [6. 附录](#6-附录)
|
||||
|
||||
---
|
||||
|
||||
## 1. 业务逻辑梳理
|
||||
|
||||
### 1.1 个人中心核心功能
|
||||
|
||||
个人中心 (`src/views/Dashboard/Center.js`) 是用户的核心控制面板,包含以下6大功能模块:
|
||||
|
||||
| 功能模块 | 描述 | 核心价值 |
|
||||
|---------|------|---------|
|
||||
| **自选股管理** | 添加/查看/删除自选股,查看实时行情 | 快速追踪关注股票的动态 |
|
||||
| **事件关注** | 关注的热点事件列表,查看事件详情 | 掌握市场热点和投资机会 |
|
||||
| **我的评论** | 用户在各个事件下的评论历史 | 回顾自己的观点和判断 |
|
||||
| **订阅信息** | 用户会员状态、剩余天数、功能权限 | 管理订阅和升级服务 |
|
||||
| **投资日历** | 用户自定义的投资相关日程事件 | 规划投资时间线 |
|
||||
| **投资计划与复盘** | 投资计划和复盘记录的CRUD | 系统化投资管理 |
|
||||
|
||||
### 1.2 页面数据加载流程
|
||||
|
||||
```
|
||||
页面加载
|
||||
↓
|
||||
并行请求4个API(Promise.all)
|
||||
├─ GET /api/account/watchlist → 自选股列表
|
||||
├─ GET /api/account/events/following → 关注事件
|
||||
├─ GET /api/account/events/comments → 我的评论
|
||||
└─ GET /api/subscription/current → 订阅信息
|
||||
↓
|
||||
如果有自选股,加载实时行情
|
||||
└─ GET /api/account/watchlist/realtime → 实时行情数据
|
||||
↓
|
||||
子组件加载自己的数据
|
||||
├─ InvestmentCalendarChakra
|
||||
│ └─ GET /api/account/calendar/events → 日历事件
|
||||
└─ InvestmentPlansAndReviews
|
||||
└─ GET /api/account/investment-plans → 投资计划
|
||||
```
|
||||
|
||||
### 1.3 用户交互流程
|
||||
|
||||
#### 自选股操作
|
||||
```
|
||||
查看自选股 → 点击刷新 → 更新实时行情
|
||||
↓
|
||||
点击股票 → 跳转到个股详情页
|
||||
↓
|
||||
点击添加 → 跳转到股票搜索页
|
||||
↓
|
||||
点击删除 → DELETE /api/account/watchlist/:id
|
||||
```
|
||||
|
||||
#### 投资计划操作
|
||||
```
|
||||
查看计划列表
|
||||
↓
|
||||
点击新增 → 填写表单 → POST /api/account/investment-plans
|
||||
↓
|
||||
点击编辑 → 修改内容 → PUT /api/account/investment-plans/:id
|
||||
↓
|
||||
点击删除 → DELETE /api/account/investment-plans/:id
|
||||
```
|
||||
|
||||
#### 日历事件操作
|
||||
```
|
||||
查看日历(月视图)
|
||||
↓
|
||||
选择日期 → 查看当天事件
|
||||
↓
|
||||
点击新增 → 填写表单 → POST /api/account/calendar/events
|
||||
↓
|
||||
点击事件 → 查看详情 → 编辑/删除
|
||||
↓
|
||||
PUT /api/account/calendar/events/:id
|
||||
DELETE /api/account/calendar/events/:id
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. API 接口清单
|
||||
|
||||
### 2.1 接口总览
|
||||
|
||||
共实现 **20 个** Mock API 接口,覆盖个人中心的所有功能需求。
|
||||
|
||||
| 分类 | 接口数量 | 说明 |
|
||||
|-----|---------|------|
|
||||
| 用户资料 | 3 | 资料完整度、获取/更新资料 |
|
||||
| 自选股管理 | 4 | 获取列表、实时行情、添加、删除 |
|
||||
| 事件关注 | 2 | 获取关注事件、我的评论 |
|
||||
| 投资计划 | 4 | 获取、创建、更新、删除 |
|
||||
| 投资日历 | 4 | 获取、创建、更新、删除 |
|
||||
| 订阅信息 | 3 | 订阅信息、当前订阅、权限列表 |
|
||||
|
||||
### 2.2 详细接口列表
|
||||
|
||||
#### 用户资料管理
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 1 | GET | `/api/account/profile-completeness` | 获取资料完整度 | 完整度百分比、缺失项 |
|
||||
| 2 | PUT | `/api/account/profile` | 更新用户资料 | 更新后的用户对象 |
|
||||
| 3 | GET | `/api/account/profile` | 获取用户资料 | 用户对象 |
|
||||
|
||||
#### 自选股管理
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 4 | GET | `/api/account/watchlist` | 获取自选股列表 | 自选股数组 |
|
||||
| 5 | GET | `/api/account/watchlist/realtime` | 获取实时行情 | 行情数据数组 |
|
||||
| 6 | POST | `/api/account/watchlist/add` | 添加自选股 | 新添加的自选股对象 |
|
||||
| 7 | DELETE | `/api/account/watchlist/:id` | 删除自选股 | 成功消息 |
|
||||
|
||||
#### 事件关注管理
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 8 | GET | `/api/account/events/following` | 获取关注的事件 | 事件数组 |
|
||||
| 9 | GET | `/api/account/events/comments` | 获取我的评论 | 评论数组 |
|
||||
|
||||
#### 投资计划与复盘
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 10 | GET | `/api/account/investment-plans` | 获取投资计划列表 | 计划数组 |
|
||||
| 11 | POST | `/api/account/investment-plans` | 创建投资计划 | 新创建的计划对象 |
|
||||
| 12 | PUT | `/api/account/investment-plans/:id` | 更新投资计划 | 更新后的计划对象 |
|
||||
| 13 | DELETE | `/api/account/investment-plans/:id` | 删除投资计划 | 成功消息 |
|
||||
|
||||
#### 投资日历
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 14 | GET | `/api/account/calendar/events` | 获取日历事件 | 事件数组(支持日期范围过滤) |
|
||||
| 15 | POST | `/api/account/calendar/events` | 创建日历事件 | 新创建的事件对象 |
|
||||
| 16 | PUT | `/api/account/calendar/events/:id` | 更新日历事件 | 更新后的事件对象 |
|
||||
| 17 | DELETE | `/api/account/calendar/events/:id` | 删除日历事件 | 成功消息 |
|
||||
|
||||
#### 订阅信息
|
||||
|
||||
| # | 方法 | 路径 | 描述 | 返回数据 |
|
||||
|---|------|------|------|---------|
|
||||
| 18 | GET | `/api/subscription/info` | 获取订阅信息 | 订阅类型、状态、剩余天数 |
|
||||
| 19 | GET | `/api/subscription/current` | 获取当前订阅详情 | 详细的订阅信息 |
|
||||
| 20 | GET | `/api/subscription/permissions` | 获取订阅权限 | 功能权限列表 |
|
||||
|
||||
---
|
||||
|
||||
## 3. Mock 数据结构
|
||||
|
||||
### 3.1 自选股数据 (Watchlist)
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 1, // 自选股ID
|
||||
user_id: 1, // 用户ID
|
||||
stock_code: "600519.SH", // 股票代码
|
||||
stock_name: "贵州茅台", // 股票名称
|
||||
industry: "白酒", // 所属行业
|
||||
current_price: 1650.50, // 当前价格
|
||||
change_percent: 2.5, // 涨跌幅(%)
|
||||
added_at: "2025-01-10T10:30:00Z" // 添加时间
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 5 只股票
|
||||
- 贵州茅台 (600519.SH)
|
||||
- 平安银行 (000001.SZ)
|
||||
- 五粮液 (000858.SZ)
|
||||
- 宁德时代 (300750.SZ)
|
||||
- BYD比亚迪 (002594.SZ)
|
||||
|
||||
### 3.2 实时行情数据 (Realtime Quotes)
|
||||
|
||||
```javascript
|
||||
{
|
||||
stock_code: "600519.SH", // 股票代码
|
||||
current_price: 1650.50, // 当前价格
|
||||
change_percent: 2.5, // 涨跌幅(%)
|
||||
change: 40.25, // 涨跌额
|
||||
volume: 2345678, // 成交量
|
||||
turnover: 3945678901.23, // 成交额
|
||||
high: 1665.00, // 最高价
|
||||
low: 1645.00, // 最低价
|
||||
open: 1648.80, // 开盘价
|
||||
prev_close: 1610.25, // 昨收价
|
||||
update_time: "15:00:00" // 更新时间
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 5 只股票的实时行情
|
||||
|
||||
### 3.3 关注事件数据 (Following Events)
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 101, // 事件ID
|
||||
title: "央行宣布降准0.5个百分点...", // 事件标题
|
||||
tags: ["货币政策", "央行", "降准", "银行"], // 标签
|
||||
view_count: 12340, // 浏览数
|
||||
comment_count: 156, // 评论数
|
||||
upvote_count: 489, // 点赞数
|
||||
heat_score: 95, // 热度分数
|
||||
exceed_expectation_score: 85, // 超预期分数
|
||||
creator: { // 创建者
|
||||
id: 1001,
|
||||
username: "财经分析师",
|
||||
avatar_url: "https://i.pravatar.cc/150?img=11"
|
||||
},
|
||||
created_at: "2025-01-15T09:00:00Z", // 创建时间
|
||||
followed_at: "2025-01-15T10:30:00Z" // 关注时间
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 5 个热点事件
|
||||
- 央行降准
|
||||
- ChatGPT-5 发布
|
||||
- 新能源补贴政策
|
||||
- 芯片法案
|
||||
- 医保目录调整
|
||||
|
||||
### 3.4 评论数据 (Comments)
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 201, // 评论ID
|
||||
user_id: 1, // 用户ID
|
||||
event_id: 101, // 关联事件ID
|
||||
event_title: "央行宣布降准0.5个百分点...", // 事件标题
|
||||
content: "这次降准对银行股是重大利好!...", // 评论内容
|
||||
created_at: "2025-01-15T11:20:00Z", // 评论时间
|
||||
likes: 45, // 点赞数
|
||||
replies: 12 // 回复数
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 5 条评论
|
||||
|
||||
### 3.5 投资计划数据 (Investment Plans)
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 301, // 计划ID
|
||||
user_id: 1, // 用户ID
|
||||
type: "plan", // 类型: plan | review
|
||||
title: "2025年Q1 新能源板块布局计划", // 标题
|
||||
content: "计划在Q1分批建仓新能源板块...", // 内容(支持Markdown)
|
||||
target_date: "2025-03-31", // 目标日期
|
||||
status: "in_progress", // 状态: pending | in_progress | completed | cancelled
|
||||
created_at: "2025-01-10T10:00:00Z", // 创建时间
|
||||
updated_at: "2025-01-15T14:30:00Z", // 更新时间
|
||||
tags: ["新能源", "布局计划", "Q1计划"] // 标签
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 4 条记录
|
||||
- 2 条计划 (plan)
|
||||
- 2 条复盘 (review)
|
||||
|
||||
### 3.6 日历事件数据 (Calendar Events)
|
||||
|
||||
```javascript
|
||||
{
|
||||
id: 401, // 事件ID
|
||||
user_id: 1, // 用户ID
|
||||
title: "贵州茅台年报披露", // 事件标题
|
||||
date: "2025-03-28", // 事件日期
|
||||
type: "earnings", // 类型: earnings | policy | reminder | custom
|
||||
category: "financial_report", // 分类: financial_report | macro_policy | trading | investment | review
|
||||
description: "关注营收和净利润增速...", // 描述
|
||||
stock_code: "600519.SH", // 关联股票代码(可选)
|
||||
stock_name: "贵州茅台", // 关联股票名称(可选)
|
||||
importance: "high", // 重要性: low | medium | high
|
||||
is_recurring: false, // 是否重复
|
||||
recurrence_rule: null, // 重复规则: daily | weekly | monthly(可选)
|
||||
created_at: "2025-01-10T10:00:00Z" // 创建时间
|
||||
}
|
||||
```
|
||||
|
||||
**Mock 数据数量**: 7 个日历事件
|
||||
- 2 个财报事件
|
||||
- 2 个政策事件
|
||||
- 3 个提醒事件(含重复事件)
|
||||
|
||||
### 3.7 订阅信息数据 (Subscription)
|
||||
|
||||
```javascript
|
||||
{
|
||||
type: "pro", // 订阅类型: free | pro | max
|
||||
status: "active", // 状态: active | expired | cancelled
|
||||
is_active: true, // 是否激活
|
||||
days_left: 90, // 剩余天数
|
||||
end_date: "2025-04-15T23:59:59Z", // 到期时间
|
||||
plan_name: "Pro版", // 套餐名称
|
||||
features: [ // 功能列表
|
||||
"无限事件查看",
|
||||
"实时行情推送",
|
||||
"专业分析报告",
|
||||
...
|
||||
],
|
||||
price: 0.01, // 价格
|
||||
currency: "CNY", // 货币
|
||||
billing_cycle: "monthly", // 计费周期: monthly | quarterly | yearly
|
||||
auto_renew: true, // 自动续费
|
||||
next_billing_date: "2025-02-15T00:00:00Z" // 下次扣费日期
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. 实施内容
|
||||
|
||||
### 4.1 创建的文件
|
||||
|
||||
#### 1. `src/mocks/data/account.js` (新建)
|
||||
|
||||
**文件作用**: 存储个人中心相关的所有 Mock 数据
|
||||
|
||||
**包含内容**:
|
||||
- `mockWatchlist` - 自选股数据 (5条)
|
||||
- `mockRealtimeQuotes` - 实时行情数据 (5条)
|
||||
- `mockFollowingEvents` - 关注事件数据 (5条)
|
||||
- `mockEventComments` - 评论数据 (5条)
|
||||
- `mockInvestmentPlans` - 投资计划数据 (4条)
|
||||
- `mockCalendarEvents` - 日历事件数据 (7条)
|
||||
- `mockSubscriptionCurrent` - 订阅详情数据 (1条)
|
||||
|
||||
**辅助函数**:
|
||||
```javascript
|
||||
// 根据用户ID获取数据
|
||||
getWatchlistByUserId(userId)
|
||||
getFollowingEventsByUserId(userId)
|
||||
getCommentsByUserId(userId)
|
||||
getInvestmentPlansByUserId(userId)
|
||||
getCalendarEventsByUserId(userId)
|
||||
|
||||
// 根据日期范围获取日历事件
|
||||
getCalendarEventsByDateRange(userId, startDate, endDate)
|
||||
```
|
||||
|
||||
**文件大小**: 约 550 行代码
|
||||
|
||||
#### 2. `src/mocks/handlers/account.js` (完全重写)
|
||||
|
||||
**文件作用**: 处理个人中心相关的所有 API 请求
|
||||
|
||||
**包含内容**: 20 个 API Handler
|
||||
|
||||
**主要改动**:
|
||||
- ✅ 保留原有的用户资料管理接口 (3个)
|
||||
- ✅ 完善自选股管理接口 (4个)
|
||||
- ✅ 完善事件关注接口 (2个)
|
||||
- ✅ **新增** 投资计划接口 (4个)
|
||||
- ✅ **新增** 投资日历接口 (4个)
|
||||
- ✅ 完善订阅信息接口 (3个)
|
||||
|
||||
**文件大小**: 660 行代码(从原 542 行扩展到 660 行)
|
||||
|
||||
### 4.2 修改的文件
|
||||
|
||||
#### `src/mocks/handlers/index.js` (无需修改)
|
||||
|
||||
**检查结果**: ✅ 已正确导入和导出 `accountHandlers`
|
||||
|
||||
```javascript
|
||||
import { accountHandlers } from './account';
|
||||
|
||||
export const handlers = [
|
||||
...authHandlers,
|
||||
...accountHandlers, // ✅ 已包含
|
||||
...simulationHandlers,
|
||||
...eventHandlers,
|
||||
];
|
||||
```
|
||||
|
||||
### 4.3 Mock 数据特点
|
||||
|
||||
#### 数据真实性
|
||||
- ✅ 使用真实的股票代码和名称
|
||||
- ✅ 价格和涨跌幅符合市场规律
|
||||
- ✅ 事件标题和内容贴近实际热点
|
||||
- ✅ 日期时间合理分布
|
||||
|
||||
#### 数据关联性
|
||||
- ✅ 评论关联到对应的事件
|
||||
- ✅ 日历事件关联到对应的股票
|
||||
- ✅ 实时行情对应自选股列表
|
||||
- ✅ 订阅类型影响权限配置
|
||||
|
||||
#### 数据可扩展性
|
||||
- ✅ 支持动态添加/删除数据
|
||||
- ✅ 数据结构预留扩展字段
|
||||
- ✅ 辅助函数便于数据查询
|
||||
- ✅ 支持日期范围过滤
|
||||
|
||||
---
|
||||
|
||||
## 5. 测试验证
|
||||
|
||||
### 5.1 功能测试清单
|
||||
|
||||
#### 个人中心页面加载
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **页面初始加载** | 1. 登录系统<br>2. 访问 `/home/center` | 页面正常加载,显示所有板块 | ⬜ |
|
||||
| **统计卡片显示** | 查看顶部4个统计卡片 | 显示:自选股(5)、关注事件(5)、我的评论(5)、订阅状态(Pro版) | ⬜ |
|
||||
| **自选股列表** | 查看自选股板块 | 显示5只股票,包含股票代码、名称、价格、涨跌幅 | ⬜ |
|
||||
| **实时行情** | 等待实时行情加载 | 股票价格显示,涨跌幅有颜色标识(红涨绿跌) | ⬜ |
|
||||
| **关注事件列表** | 查看关注事件板块 | 显示5个事件,包含标题、标签、统计数据、热度分数 | ⬜ |
|
||||
| **我的评论列表** | 查看我的评论板块 | 显示5条评论,包含内容、时间、关联事件 | ⬜ |
|
||||
| **订阅信息卡片** | 查看订阅管理板块 | 显示Pro版,剩余90天,状态正常 | ⬜ |
|
||||
|
||||
#### 自选股功能
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **查看自选股详情** | 点击任一自选股 | 跳转到个股详情页 | ⬜ |
|
||||
| **刷新实时行情** | 点击刷新按钮 | 显示Loading,刷新完成后更新价格数据 | ⬜ |
|
||||
| **自动刷新行情** | 等待60秒 | 自动刷新实时行情(每分钟一次) | ⬜ |
|
||||
|
||||
#### 投资计划功能
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **查看投资计划** | 滚动到投资计划板块 | 显示4条记录(2个计划 + 2个复盘) | ⬜ |
|
||||
| **创建计划** | 1. 点击"新增计划"<br>2. 填写表单<br>3. 提交 | 计划创建成功,列表刷新 | ⬜ |
|
||||
| **编辑计划** | 1. 点击编辑按钮<br>2. 修改内容<br>3. 保存 | 计划更新成功,显示更新后的内容 | ⬜ |
|
||||
| **删除计划** | 1. 点击删除按钮<br>2. 确认删除 | 计划删除成功,列表刷新 | ⬜ |
|
||||
| **计划状态切换** | 切换计划状态(待进行/进行中/已完成) | 状态更新成功,显示对应标识 | ⬜ |
|
||||
|
||||
#### 投资日历功能
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **查看日历** | 查看投资日历板块 | 显示月视图,标记有事件的日期 | ⬜ |
|
||||
| **查看事件** | 点击有事件的日期 | 显示当天的事件列表(支持多个事件) | ⬜ |
|
||||
| **创建事件** | 1. 选择日期<br>2. 点击"添加事件"<br>3. 填写表单<br>4. 提交 | 事件创建成功,日历更新 | ⬜ |
|
||||
| **编辑事件** | 1. 点击事件<br>2. 修改信息<br>3. 保存 | 事件更新成功 | ⬜ |
|
||||
| **删除事件** | 1. 点击事件<br>2. 点击删除<br>3. 确认 | 事件删除成功,日历更新 | ⬜ |
|
||||
| **重复事件** | 创建一个重复事件(如每月20日) | 日历上多个日期显示该事件 | ⬜ |
|
||||
|
||||
#### 订阅管理功能
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **查看订阅详情** | 点击订阅卡片 | 跳转到订阅管理页面 | ⬜ |
|
||||
| **订阅权限检查** | 访问需要权限的功能 | Pro用户可访问,Free用户提示升级 | ⬜ |
|
||||
|
||||
### 5.2 数据一致性测试
|
||||
|
||||
| 测试项 | 验证方法 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **自选股与行情匹配** | 对比自选股列表和实时行情 | 每只自选股都有对应的行情数据 | ⬜ |
|
||||
| **评论与事件关联** | 点击评论中的事件链接 | 能正确跳转到对应事件 | ⬜ |
|
||||
| **日历事件与股票关联** | 查看带股票代码的日历事件 | 点击能跳转到对应股票详情 | ⬜ |
|
||||
| **订阅类型一致性** | 对比多处显示的订阅类型 | 统计卡片、订阅管理、权限检查一致 | ⬜ |
|
||||
|
||||
### 5.3 边界情况测试
|
||||
|
||||
| 测试项 | 测试步骤 | 预期结果 | 状态 |
|
||||
|-------|---------|---------|-----|
|
||||
| **空数据状态** | 1. 清空所有自选股<br>2. 刷新页面 | 显示"暂无自选股"提示,引导添加 | ⬜ |
|
||||
| **网络延迟** | 模拟慢速网络 | 显示Loading状态,300ms后加载完成 | ⬜ |
|
||||
| **未登录状态** | 未登录访问个人中心 | 返回401错误(被ProtectedRoute拦截) | ⬜ |
|
||||
| **大数据量** | 添加10+只自选股 | 前端只显示前10只,其他可查看全部 | ⬜ |
|
||||
| **日期范围查询** | 查询特定月份的日历事件 | 只返回该月份的事件 | ⬜ |
|
||||
|
||||
---
|
||||
|
||||
## 6. 附录
|
||||
|
||||
### 6.1 API 请求示例
|
||||
|
||||
#### 获取自选股列表
|
||||
```javascript
|
||||
// 请求
|
||||
GET /api/account/watchlist
|
||||
|
||||
// 响应
|
||||
{
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": 1,
|
||||
"user_id": 1,
|
||||
"stock_code": "600519.SH",
|
||||
"stock_name": "贵州茅台",
|
||||
"industry": "白酒",
|
||||
"current_price": 1650.50,
|
||||
"change_percent": 2.5,
|
||||
"added_at": "2025-01-10T10:30:00Z"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 创建投资计划
|
||||
```javascript
|
||||
// 请求
|
||||
POST /api/account/investment-plans
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"type": "plan",
|
||||
"title": "2025年Q1 新能源板块布局计划",
|
||||
"content": "计划在Q1分批建仓新能源板块...",
|
||||
"target_date": "2025-03-31",
|
||||
"status": "pending",
|
||||
"tags": ["新能源", "布局计划"]
|
||||
}
|
||||
|
||||
// 响应
|
||||
{
|
||||
"success": true,
|
||||
"message": "创建成功",
|
||||
"data": {
|
||||
"id": 305,
|
||||
"user_id": 1,
|
||||
"type": "plan",
|
||||
"title": "2025年Q1 新能源板块布局计划",
|
||||
"content": "计划在Q1分批建仓新能源板块...",
|
||||
"target_date": "2025-03-31",
|
||||
"status": "pending",
|
||||
"tags": ["新能源", "布局计划"],
|
||||
"created_at": "2025-01-19T10:00:00Z",
|
||||
"updated_at": "2025-01-19T10:00:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 获取日历事件(日期范围)
|
||||
```javascript
|
||||
// 请求
|
||||
GET /api/account/calendar/events?start_date=2025-01-01&end_date=2025-01-31
|
||||
|
||||
// 响应
|
||||
{
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": 403,
|
||||
"user_id": 1,
|
||||
"title": "央行货币政策委员会例会",
|
||||
"date": "2025-01-25",
|
||||
"type": "policy",
|
||||
"category": "macro_policy",
|
||||
"importance": "medium",
|
||||
"created_at": "2025-01-08T09:00:00Z"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 数据模型 ER 图
|
||||
|
||||
```
|
||||
User (用户)
|
||||
├─ 1:N → Watchlist (自选股)
|
||||
├─ 1:N → FollowingEvents (关注事件)
|
||||
├─ 1:N → EventComments (评论)
|
||||
├─ 1:N → InvestmentPlans (投资计划)
|
||||
├─ 1:N → CalendarEvents (日历事件)
|
||||
└─ 1:1 → Subscription (订阅信息)
|
||||
|
||||
Event (事件)
|
||||
├─ 1:N → EventComments (评论)
|
||||
└─ N:N → Users (关注用户)
|
||||
|
||||
Stock (股票)
|
||||
├─ 1:N → Watchlist (自选股)
|
||||
├─ 1:1 → RealtimeQuote (实时行情)
|
||||
└─ 1:N → CalendarEvents (日历事件)
|
||||
```
|
||||
|
||||
### 6.3 Mock 数据统计
|
||||
|
||||
| 数据类型 | 数量 | 字段数 | 总大小(估算) |
|
||||
|---------|-----|--------|--------------|
|
||||
| 自选股 | 5 | 8 | 约 0.5KB |
|
||||
| 实时行情 | 5 | 11 | 约 0.8KB |
|
||||
| 关注事件 | 5 | 10 | 约 2KB |
|
||||
| 评论 | 5 | 8 | 约 1.5KB |
|
||||
| 投资计划 | 4 | 10 | 约 3KB |
|
||||
| 日历事件 | 7 | 12 | 约 1.5KB |
|
||||
| **总计** | **31** | **59** | **约 9.3KB** |
|
||||
|
||||
### 6.4 前端组件映射
|
||||
|
||||
| 前端组件 | 使用的 API | Mock 数据来源 |
|
||||
|---------|-----------|-------------|
|
||||
| `Center.js` (主组件) | 4个并行API | `mockWatchlist`, `mockFollowingEvents`, `mockEventComments`, `mockSubscriptionCurrent` |
|
||||
| 自选股卡片 | `/api/account/watchlist` | `mockWatchlist` |
|
||||
| 实时行情刷新 | `/api/account/watchlist/realtime` | `mockRealtimeQuotes` |
|
||||
| 关注事件列表 | `/api/account/events/following` | `mockFollowingEvents` |
|
||||
| 我的评论列表 | `/api/account/events/comments` | `mockEventComments` |
|
||||
| 订阅信息卡片 | `/api/subscription/current` | `mockSubscriptionCurrent` |
|
||||
| `InvestmentCalendarChakra.js` | `/api/account/calendar/events` | `mockCalendarEvents` |
|
||||
| `InvestmentPlansAndReviews.js` | `/api/account/investment-plans` | `mockInvestmentPlans` |
|
||||
|
||||
### 6.5 常见问题 (FAQ)
|
||||
|
||||
**Q1: Mock 数据会持久化吗?**
|
||||
A: 不会。Mock 数据存储在内存中,刷新页面后会重置。如果需要持久化,可以考虑使用 localStorage。
|
||||
|
||||
**Q2: 如何切换到真实 API?**
|
||||
A: 在 `.env` 文件中设置 `REACT_APP_ENABLE_MOCK=false` 即可切换到真实 API。
|
||||
|
||||
**Q3: Mock 数据支持多用户吗?**
|
||||
A: 目前的 Mock 数据基于当前登录用户(`getCurrentUser()`),支持基本的多用户场景。
|
||||
|
||||
**Q4: 实时行情数据是真的实时吗?**
|
||||
A: Mock 模式下不是真实的实时数据,只是静态数据。真实环境下需要对接WebSocket或轮询API。
|
||||
|
||||
**Q5: 如何添加更多 Mock 数据?**
|
||||
A: 编辑 `src/mocks/data/account.js`,在对应的数组中添加新的数据对象即可。
|
||||
|
||||
### 6.6 后续优化建议
|
||||
|
||||
#### 短期优化(1周内)
|
||||
- [ ] 添加更多股票到自选股池(目前5只 → 10只)
|
||||
- [ ] 丰富事件类型和标签
|
||||
- [ ] 完善投资计划的标签系统
|
||||
- [ ] 添加日历事件的提醒功能Mock
|
||||
|
||||
#### 中期优化(1月内)
|
||||
- [ ] 实现 Mock 数据的 localStorage 持久化
|
||||
- [ ] 添加数据导入/导出功能
|
||||
- [ ] 模拟网络波动和错误场景
|
||||
- [ ] 添加更多的边界测试用例
|
||||
|
||||
#### 长期优化(3月内)
|
||||
- [ ] 实现完整的 Mock 数据生成器
|
||||
- [ ] 支持批量生成测试数据
|
||||
- [ ] 添加数据一致性校验工具
|
||||
- [ ] 完善 Mock 数据文档和最佳实践
|
||||
|
||||
---
|
||||
|
||||
## ✅ 总结
|
||||
|
||||
### 完成内容
|
||||
- ✅ 创建完整的 Mock 数据文件 (`src/mocks/data/account.js`)
|
||||
- ✅ 重写并扩展 Mock Handler (`src/mocks/handlers/account.js`)
|
||||
- ✅ 实现 20 个 API 接口的 Mock
|
||||
- ✅ 提供 31 条 Mock 数据记录
|
||||
- ✅ 验证 handlers/index.js 配置正确
|
||||
|
||||
### 覆盖功能
|
||||
- ✅ 自选股管理(查看、添加、删除、实时行情)
|
||||
- ✅ 事件关注(关注列表、我的评论)
|
||||
- ✅ 投资计划(增删改查、计划与复盘)
|
||||
- ✅ 投资日历(增删改查、日期范围查询)
|
||||
- ✅ 订阅信息(订阅详情、权限管理)
|
||||
- ✅ 用户资料(资料完整度、更新资料)
|
||||
|
||||
### 数据质量
|
||||
- ✅ 数据真实性:使用真实股票和合理价格
|
||||
- ✅ 数据关联性:评论关联事件、日历关联股票
|
||||
- ✅ 数据可扩展性:预留字段、支持动态操作
|
||||
- ✅ 数据完整性:包含所有必需字段
|
||||
|
||||
### 测试准备
|
||||
- ✅ 提供完整的测试用例清单
|
||||
- ✅ 覆盖功能、数据一致性、边界测试
|
||||
- ✅ 包含42个测试项
|
||||
- ✅ 提供测试步骤和预期结果
|
||||
|
||||
---
|
||||
|
||||
**文档版本**: 1.0
|
||||
**生成日期**: 2025-01-19
|
||||
**维护者**: Development Team
|
||||
**相关文档**:
|
||||
- `CONSOLE_LOG_REFACTOR_REPORT.md` - Console Log 重构文档
|
||||
- `LOGIN_MODAL_REFACTOR_PLAN.md` - 登录弹窗改造计划
|
||||
|
||||
Reference in New Issue
Block a user