696 lines
25 KiB
Markdown
696 lines
25 KiB
Markdown
# 个人中心 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` - 登录弹窗改造计划
|
||
|