Mutual_Fund/需求文档.md

华夏基金 PC 前端需求文档

1. 文档信息

项目	内容
项目名称	华夏基金 PC 网页平台
文档类型	前端产品需求文档
当前版本	V1.0
编制日期	2026-09-13
开发范围	PC 网页端前端
后端范围	不修改现有后端代码、接口和数据库结构

2. 项目背景

本项目面向华夏基金建设一套 PC 网页平台，包含两类使用场景：

1. 面向普通用户的基金金融官网和用户服务页面。
2. 面向公司员工的基金业务后台管理系统。

用户端强调品牌展示、专业信任和基金产品转化；员工端强调业务效率、数据查看、客户服务和风险控制。两端使用统一的品牌色体系，但采用不同的信息架构和交互方式。

3. 产品目标

• 建设具有金融专业感和品牌识别度的华夏基金 PC 官网。
• 为用户提供基金产品浏览、基金详情、历史净值和登录注册入口。
• 为员工提供投顾、风控及通用员工工作台。
• 展示来自现有 API 或数据库的真实基金数据。
• 复用现有 FastAPI 后端能力，不改变后端业务逻辑。
• 建立统一、清晰、可扩展的前端页面结构。

4. 用户角色

4.1 普通用户

• 浏览首页和基金产品。
• 查看基金净值、收益、风险等级和历史走势。
• 注册账号、登录账号。
• 查看个人账户、持仓和相关业务信息。
• 根据后端已有能力进行基金申购、赎回和风险测评。

4.2 员工角色

前端显示名称统一为以下三类：

前端显示名称	前端可见功能方向
投顾专员	投顾工作台、客户管理、客户持仓、组合诊断、投顾报告、回访与待办
风控专员	风险预警、风险审核、放行、拦截、冻结、风控工单
员工通用	基础仪表盘、公共基金数据、通知、个人设置

前端只负责角色显示和页面访问控制，不修改后端实际角色值和接口权限逻辑。

5. 产品结构

华夏基金 PC 网页平台
├── 用户端
│   ├── 首页
│   ├── 基金产品列表
│   ├── 基金详情
│   ├── 登录
│   ├── 注册
│   ├── 用户中心
│   ├── 账户与持仓
│   ├── 风险测评
│   └── 员工后台入口
│
└── 员工后台
    ├── 工作台首页
    ├── 客户管理
    ├── 基金产品与数据
    ├── 投顾服务
    ├── 风控中心
    ├── 消息与通知
    └── 系统设置

6. 用户端需求

6.1 首页

首页采用 RemitBank 金融官网的整体表达方式，突出品牌、专业服务和投资价值。

首屏要求：

• 展示“华夏基金”品牌名称。
• 使用金融城市、地球、金色基金和增长箭头作为背景视觉参考。
• 背景风格以深蓝夜景、全球金融和长期增长为核心意象。
• 文案区域需要保证文字清晰，背景应增加适度深色遮罩。
• 提供基金产品入口、登录和注册入口。
• 提供员工后台入口，但视觉权重低于用户端主要业务入口。

建议首屏内容：

华夏基金
让财富管理更智能、更普惠
专业基金投资服务，陪伴每一段长期成长
[查看基金产品] [登录 / 注册]

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 失效等状态均有明确反馈。
• 全部页面只涉及前端改动，不修改现有后端代码。