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