feat:前端
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
# 华夏基金 PC 前端需求文档
|
||||
|
||||
## 1. 文档信息
|
||||
|
||||
| 项目 | 内容 |
|
||||
|---|---|
|
||||
| 项目名称 | 华夏基金 PC 网页平台 |
|
||||
| 文档类型 | 前端产品需求文档 |
|
||||
| 当前版本 | V1.0 |
|
||||
| 编制日期 | 2026-09-13 |
|
||||
| 开发范围 | PC 网页端前端 |
|
||||
| 后端范围 | 不修改现有后端代码、接口和数据库结构 |
|
||||
|
||||
## 2. 项目背景
|
||||
|
||||
本项目面向华夏基金建设一套 PC 网页平台，包含两类使用场景：
|
||||
|
||||
1. 面向普通用户的基金金融官网和用户服务页面。
|
||||
2. 面向公司员工的基金业务后台管理系统。
|
||||
|
||||
用户端强调品牌展示、专业信任和基金产品转化；员工端强调业务效率、数据查看、客户服务和风险控制。两端使用统一的品牌色体系，但采用不同的信息架构和交互方式。
|
||||
|
||||
## 3. 产品目标
|
||||
|
||||
- 建设具有金融专业感和品牌识别度的华夏基金 PC 官网。
|
||||
- 为用户提供基金产品浏览、基金详情、历史净值和登录注册入口。
|
||||
- 为员工提供投顾、风控及通用员工工作台。
|
||||
- 展示来自现有 API 或数据库的真实基金数据。
|
||||
- 复用现有 FastAPI 后端能力，不改变后端业务逻辑。
|
||||
- 建立统一、清晰、可扩展的前端页面结构。
|
||||
|
||||
## 4. 用户角色
|
||||
|
||||
### 4.1 普通用户
|
||||
|
||||
- 浏览首页和基金产品。
|
||||
- 查看基金净值、收益、风险等级和历史走势。
|
||||
- 注册账号、登录账号。
|
||||
- 查看个人账户、持仓和相关业务信息。
|
||||
- 根据后端已有能力进行基金申购、赎回和风险测评。
|
||||
|
||||
### 4.2 员工角色
|
||||
|
||||
前端显示名称统一为以下三类：
|
||||
|
||||
| 前端显示名称 | 前端可见功能方向 |
|
||||
|---|---|
|
||||
| 投顾专员 | 投顾工作台、客户管理、客户持仓、组合诊断、投顾报告、回访与待办 |
|
||||
| 风控专员 | 风险预警、风险审核、放行、拦截、冻结、风控工单 |
|
||||
| 员工通用 | 基础仪表盘、公共基金数据、通知、个人设置 |
|
||||
|
||||
前端只负责角色显示和页面访问控制，不修改后端实际角色值和接口权限逻辑。
|
||||
|
||||
## 5. 产品结构
|
||||
|
||||
```text
|
||||
华夏基金 PC 网页平台
|
||||
├── 用户端
|
||||
│ ├── 首页
|
||||
│ ├── 基金产品列表
|
||||
│ ├── 基金详情
|
||||
│ ├── 登录
|
||||
│ ├── 注册
|
||||
│ ├── 用户中心
|
||||
│ ├── 账户与持仓
|
||||
│ ├── 风险测评
|
||||
│ └── 员工后台入口
|
||||
│
|
||||
└── 员工后台
|
||||
├── 工作台首页
|
||||
├── 客户管理
|
||||
├── 基金产品与数据
|
||||
├── 投顾服务
|
||||
├── 风控中心
|
||||
├── 消息与通知
|
||||
└── 系统设置
|
||||
```
|
||||
|
||||
## 6. 用户端需求
|
||||
|
||||
### 6.1 首页
|
||||
|
||||
首页采用 RemitBank 金融官网的整体表达方式，突出品牌、专业服务和投资价值。
|
||||
|
||||
首屏要求：
|
||||
|
||||
- 展示“华夏基金”品牌名称。
|
||||
- 使用金融城市、地球、金色基金和增长箭头作为背景视觉参考。
|
||||
- 背景风格以深蓝夜景、全球金融和长期增长为核心意象。
|
||||
- 文案区域需要保证文字清晰，背景应增加适度深色遮罩。
|
||||
- 提供基金产品入口、登录和注册入口。
|
||||
- 提供员工后台入口，但视觉权重低于用户端主要业务入口。
|
||||
|
||||
建议首屏内容：
|
||||
|
||||
```text
|
||||
华夏基金
|
||||
让财富管理更智能、更普惠
|
||||
专业基金投资服务，陪伴每一段长期成长
|
||||
[查看基金产品] [登录 / 注册]
|
||||
```
|
||||
|
||||
### 6.2 基金产品列表
|
||||
|
||||
- 展示真实基金产品数据。
|
||||
- 支持按关键词搜索。
|
||||
- 支持按基金类型筛选。
|
||||
- 支持按风险等级筛选。
|
||||
- 支持分页或加载更多。
|
||||
- 展示基金代码、名称、类型、风险等级、最新净值、净值日期、基金经理和在售状态。
|
||||
- 产品卡片或表格均可采用，但需要保持金融产品信息的可扫描性。
|
||||
|
||||
### 6.3 基金详情
|
||||
|
||||
- 展示基金基本信息。
|
||||
- 展示最新单位净值和累计净值。
|
||||
- 展示净值日期和数据更新时间。
|
||||
- 展示历史净值走势图。
|
||||
- 支持按时间范围查看历史数据。
|
||||
- 展示区间收益、最大收益和最大回撤等后端返回指标。
|
||||
- 明确提示基金投资风险，不承诺收益。
|
||||
- 根据后端返回状态展示申购、赎回或登录后操作入口。
|
||||
|
||||
### 6.4 登录与注册
|
||||
|
||||
- 用户名和密码登录。
|
||||
- 用户注册。
|
||||
- 注册时支持手机号、用户名、密码和真实姓名。
|
||||
- 登录成功后保存后端返回的 JWT Token。
|
||||
- 登录后根据用户类型跳转用户中心或员工后台。
|
||||
- Token 失效时清理本地状态并跳转登录页。
|
||||
- 表单需要提供输入校验、错误提示、加载状态和成功反馈。
|
||||
|
||||
### 6.5 用户中心
|
||||
|
||||
- 展示当前用户基本信息。
|
||||
- 展示账户余额。
|
||||
- 展示基金持仓。
|
||||
- 展示申购和赎回入口。
|
||||
- 展示风险测评状态。
|
||||
- 展示业务消息或客服入口。
|
||||
|
||||
### 6.6 官网页面形态与 Agent 入口
|
||||
|
||||
- 用户端官网采用可纵向下滑的长页面展示形式。
|
||||
- 页面按照首屏、品牌介绍、核心服务、基金产品、数据亮点、客户评价、风险提示和联系入口等模块分段展示。
|
||||
- 顶部导航可以在页面滚动时保持可见，方便用户快速跳转到不同模块。
|
||||
- 页面底部保留登录、注册、员工后台入口和必要的合规信息。
|
||||
- Agent 入口固定在页面右下角，不遮挡主要内容和关键操作按钮。
|
||||
- 用户点击 Agent 入口后，展开聊天框形式的对话面板；再次点击可收起聊天框。
|
||||
- 聊天框需要支持消息列表、输入框、发送按钮、加载状态、错误提示和关闭/收起操作。
|
||||
- Agent 聊天框的颜色、字体、圆角、边框、阴影和按钮样式与官网及统一品牌色体系保持一致。
|
||||
- 聊天框在展开状态下应具有稳定尺寸，不能因消息内容变化导致页面主要布局跳动。
|
||||
- Agent 接口由前端调用现有后端接口，前端不修改 Agent 业务逻辑。
|
||||
|
||||
## 7. 员工后台需求
|
||||
|
||||
后台整体参考 `admin-panel-template`：
|
||||
|
||||
- 深色固定侧边栏。
|
||||
- 顶部工具栏。
|
||||
- 白色内容区和浅灰页面背景。
|
||||
- 统计卡片、数据表格、筛选器、标签、弹窗和表单。
|
||||
- 使用 Lucide 风格线性图标。
|
||||
- 页面强调数据密度、操作效率和状态反馈。
|
||||
|
||||
### 7.1 工作台首页
|
||||
|
||||
- 展示业务统计数据。
|
||||
- 展示待办事项。
|
||||
- 展示客户数量、资产规模、风险预警和近期活动。
|
||||
- 投顾专员查看个人客户和个人绩效概览。
|
||||
- 风控专员查看风险预警和待审核业务。
|
||||
- 员工通用查看公共业务数据和通知。
|
||||
|
||||
### 7.2 客户管理
|
||||
|
||||
投顾专员可查看后端授权范围内的客户：
|
||||
|
||||
- 客户列表。
|
||||
- 客户关键词搜索。
|
||||
- 客户状态筛选。
|
||||
- 客户详情。
|
||||
- 客户持仓。
|
||||
- 客户历史投顾报告。
|
||||
- 客户风险等级。
|
||||
- 客户关系状态。
|
||||
- 敏感信息按照后端返回结果展示和脱敏。
|
||||
|
||||
### 7.3 投顾服务
|
||||
|
||||
投顾专员可使用：
|
||||
|
||||
- 客户组合诊断。
|
||||
- 基金产品筛选。
|
||||
- 标准策略查看。
|
||||
- 投顾建议草稿。
|
||||
- 沟通话术草稿。
|
||||
- 回访记录。
|
||||
- 待办处理。
|
||||
- 个人绩效报告。
|
||||
|
||||
### 7.4 风控中心
|
||||
|
||||
风控专员可使用：
|
||||
|
||||
- 风险预警列表。
|
||||
- 按状态筛选预警。
|
||||
- 查看风险详情。
|
||||
- 放行风险事件。
|
||||
- 拦截风险事件。
|
||||
- 冻结相关业务或账户。
|
||||
- 查看风控工单和处理状态。
|
||||
|
||||
### 7.5 公共基金数据
|
||||
|
||||
- 员工可查看基金产品列表。
|
||||
- 支持基金搜索、类型筛选、风险等级筛选和状态筛选。
|
||||
- 支持查看历史净值与业绩走势。
|
||||
- 数据来源和更新时间需要在页面中明确展示。
|
||||
|
||||
## 8. 数据与接口约束
|
||||
|
||||
前端不直接连接 MySQL，统一通过现有 FastAPI 接口获取数据。
|
||||
|
||||
当前已确认可复用的接口能力包括：
|
||||
|
||||
- `POST /api/auth/login`
|
||||
- `POST /api/auth/register`
|
||||
- `GET /api/auth/me`
|
||||
- `GET /api/products`
|
||||
- `GET /api/products/{product_code}/history`
|
||||
- `GET /api/account/balance`
|
||||
- `GET /api/holdings`
|
||||
- `POST /api/purchase`
|
||||
- `POST /api/redeem`
|
||||
- `POST /api/risk-assessment/submit`
|
||||
- `/api/advisor/*` 投顾工作台接口
|
||||
- `/api/risk/*` 风控接口
|
||||
|
||||
基金数据主要来自：
|
||||
|
||||
- `fin_product`：基金产品基础信息和最新净值。
|
||||
- `fund_nav_history`：基金历史净值、累计净值和日涨跌幅。
|
||||
- `fund_performance`：基金区间业绩指标缓存。
|
||||
|
||||
前端需要统一处理：
|
||||
|
||||
- 加载中状态。
|
||||
- 空数据状态。
|
||||
- 接口错误状态。
|
||||
- Token 失效状态。
|
||||
- 数据更新时间。
|
||||
- 网络超时和重试提示。
|
||||
|
||||
## 9. 视觉设计规范
|
||||
|
||||
### 9.1 统一配色
|
||||
|
||||
用户端与后台使用同一套品牌色变量：
|
||||
|
||||
- 主色：沿用后台管理系统的品牌主色，用于按钮、链接、选中状态和关键交互。
|
||||
- 中性色：白色、浅灰、灰色和深灰，用于背景、边框、正文和辅助文字。
|
||||
- 深蓝：主要用于用户端首屏背景和金融氛围。
|
||||
- 金色：用于收益、资产、重点数据和视觉强调，不作为主要操作按钮颜色。
|
||||
- 绿色、红色、黄色：分别表示成功、风险/错误和提醒状态。
|
||||
|
||||
### 9.2 用户端风格
|
||||
|
||||
- 大面积留白和清晰的信息层级。
|
||||
- 金融城市或业务相关图片作为首屏视觉主体。
|
||||
- 大标题、简洁说明和明显的行动按钮。
|
||||
- 使用真实基金数据增强可信度。
|
||||
- 内容区采用简洁卡片或宽幅信息模块，避免过度装饰。
|
||||
|
||||
### 9.3 后台风格
|
||||
|
||||
- 深色侧边栏和浅色内容区。
|
||||
- 细边框、轻阴影、小圆角。
|
||||
- 表格优先保证信息对齐和可扫描性。
|
||||
- 使用标签区分基金状态、风险等级和业务状态。
|
||||
- 操作按钮需要明确区分普通操作、主要操作和危险操作。
|
||||
|
||||
## 10. 技术边界
|
||||
|
||||
- 只开发 PC 网页端，不做移动端适配。
|
||||
- 不修改 Python/FastAPI 后端代码。
|
||||
- 不修改 API 路由、后端权限判断和业务逻辑。
|
||||
- 不修改数据库表结构和数据内容。
|
||||
- 不在前端硬编码真实基金净值、收益率或规模数据。
|
||||
- 前端通过 API 获取实时或数据库中的基金数据。
|
||||
- 后端返回的角色值由前端映射为统一显示名称。
|
||||
- 前端需要保留接口适配层，便于后续 API 地址、鉴权方式或字段变化时集中调整。
|
||||
|
||||
## 11. 非功能需求
|
||||
|
||||
- 页面适配常见 PC 浏览器和桌面分辨率。
|
||||
- 重要操作提供加载、成功、失败和确认反馈。
|
||||
- 表格和基金数据支持清晰排序、筛选和查看详情。
|
||||
- 用户敏感信息不在前端额外解密或绕过后端脱敏逻辑。
|
||||
- 关键页面需要处理接口异常和无数据情况。
|
||||
- 代码按照用户端、员工后台、公共组件和 API 服务层进行拆分。
|
||||
|
||||
## 12. 当前风险与待确认事项
|
||||
|
||||
1. 当前仓库没有现成 PC 前端工程，需要新建前端目录或前端应用。
|
||||
2. 当前未发现外部基金 API 同步模块，前端首先依赖已有数据库查询接口。
|
||||
3. 真实基金数据的 API 地址、鉴权方式、字段说明和更新时间规则仍需确认。
|
||||
4. 后端代码中部分员工角色命名与前端显示名称可能不一致，前端只做显示映射，不修改后端权限逻辑。
|
||||
5. 首页背景图目前作为视觉参考使用，是否直接作为正式素材需要确认版权和清晰度。
|
||||
6. 登录后用户端和员工后台的跳转规则需要结合后端实际 `user_type` 和权限返回值确定。
|
||||
7. 基金详情页是否开放申购、赎回和风险测评，需要根据实际业务流程最终确认。
|
||||
|
||||
## 13. 验收标准
|
||||
|
||||
- 用户可以在 PC 浏览器打开华夏基金首页。
|
||||
- 首页具有金融官网视觉风格，并使用指定背景图方向。
|
||||
- 用户可以完成登录和注册流程。
|
||||
- 基金列表能够从 API 加载真实数据。
|
||||
- 基金详情能够展示历史净值和收益走势。
|
||||
- 员工可以进入后台管理系统。
|
||||
- 投顾专员、风控专员和员工通用看到符合权限的前端菜单和页面。
|
||||
- 后台整体风格与 `admin-panel-template` 一致。
|
||||
- 用户端和后台使用统一品牌色体系。
|
||||
- API 加载失败、无数据、Token 失效等状态均有明确反馈。
|
||||
- 全部页面只涉及前端改动，不修改现有后端代码。
|
||||
Reference in New Issue
Block a user