- 平台当前缺少针对理财小白的落地页面,用户难以理解「指数基金」这一资产类别并做出选择。
- 国内指数基金数量众多,缺乏以风险/波动友好视角进行筛选的工具。
- 目标:推出一个一屏解释、一屏筛选的理财产品页面,帮助用户基于客观数据挑选国内主流指数基金,并引导至基金详情或购买渠道。
| 用户类型 | 需求 | 痛点 |
|---|---|---|
| 新手理财用户(25-35 岁白领) | 想开始定投,但不了解指数基金差异 | 术语过多、没有直观风险提示 |
| 进阶用户(有 1-3 年基金经验) | 需要快速对比指数基金表现 | 需要最新净值/回撤数据和多维排序 |
| 内容消费用户 | 想要理解指数基金逻辑 | 缺乏简单的知识卡片和案例 |
- 首次进入: 通过首页 Banner/文章跳转到理财产品页,先阅读指数基金为何适合长期定投,再挑选产品。
- 每日查看: 用户关注 2-3 只指数基金,查看实时涨跌、近期表现及风险信号。
- 策略对比: 用户在页面内对比宽基 vs 行业指数,组合不同风险等级产品。
- Hero 讲解区:一句话卖点 + 国内指数基金长期收益对比图 + CTA(开始挑选)。
- 筛选器:分类(宽基/行业/主题)、风险级别、跟踪误差、成立年限、基金规模、费率。
- 指数基金卡片列表:每张卡片包含基金简称、跟踪指数、近 1/3/5 年年化、最大回撤、规模、费率、风险标签、趋势小图。
- 精选组合推荐:根据风险偏好自动推荐 3 套组合(保守/平衡/进取)。
- 教育内容区:FAQ、指数基金 vs 主动基金、定投策略提示。
- CTA 区:跳转到基金详情页、模拟组合或第三方购买链接。
- 覆盖 30-50 个国内核心指数基金(宽基 + 主要行业指数)。
- 筛选功能支持「风险等级」「年化收益」「最大回撤」排序与多条件过滤。
- 每只基金提供历史净值曲线(近 5 年)、实时涨跌幅及跟踪指数概览。
- 集成 AKShare 指数数据 API,支持每日自动更新和历史回测展示。
| 功能 | AKShare 接口 | 关键字段 | 使用说明 |
|---|---|---|---|
| 实时指数行情(宽基/行业) | stock_zh_index_spot_em |
代码、名称、最新价、涨跌幅、成交额、振幅、量比 | 传入 symbol="上证系列指数" / "深证系列指数" 获取国内指数实时行情;用于列表实时价格。 |
| 新浪实时指数补充 | stock_zh_index_spot_sina |
名称、最新价、涨跌额、成交量 | 兜底数据源,避免单一供应商不可用。 |
| 历史日线 | stock_zh_index_daily_em |
日期、开收高低、成交量、成交额、换手率 | 用于绘制近 1/3/5 年走势图、计算年化收益/回撤。 |
| 深度历史(中证指数) | stock_zh_index_hist_csindex |
日期、收盘、涨跌幅、换手率、PE、PB | 适配 2005 年前/稀有指数历史,支持长周期回测。 |
| 指数估值 | stock_zh_index_value_csindex |
PE、PB、股息率、ROE | 用于显示估值温度计,作为风险提示。 |
若需要关联具体基金,可与「公募基金数据」章节中的
fund_etf_spot_em、fund_open_fund_daily_em结合,建立「基金 ↔ 跟踪指数」映射表。
- 数据同步服务(CRON 或 serverless job)调用 AKShare 接口,存入
index_snapshots(实时)和index_history(日线)表。 - 数据层计算指标:近 n 年年化收益、最大/最近回撤、波动率、夏普比率、跟踪误差(需要基金净值数据)。
- API 层提供
/api/finance/index-funds(列表 + 筛选)和/api/finance/index-funds/{id}(详情)两个端点,前端页面直接消费。 - 数据更新频率:实时行情每 1 分钟刷新、历史日线每日收盘后更新、估值数据每日 23:00 同步。
| 页面字段 | 计算逻辑 | 数据来源 |
|---|---|---|
| 最新净值/点位 | 最新价 |
stock_zh_index_spot_em |
| 近 1/3/5 年年化 | CAGR(stock_zh_index_daily_em 收盘价) |
历史日线 |
| 最大回撤 | 以 stock_zh_index_daily_em 收盘价计算 |
历史日线 |
| 风险等级 | 基于波动率、最大回撤阈值映射(例:波动率 < 15% → 保守) | 数据计算层 |
| 估值温度计 | 当前 PE/PB vs 历史百分位 | stock_zh_index_value_csindex |
- 文案:「长期定投指数基金,抓住经济增长红利」。
- 可切换两张图表(沪深 300 vs 中证 500 累计收益)。
- 类别:宽基(沪深300、中证500、创业板指)、行业(消费、科技、医药等)、主题。
- 风险等级:保守(年化波动<12%)、稳健(12%-20%)、进取(>20%)。
- 更多条件:成立年限、基金规模、管理费、跟踪误差、近一年回撤。
- 支持「预设组合」快速按钮(保守定投/成长定投)。
- 顶部显示基金简称 + 基金代码 + 「指数/ETF」标签。
- 中部展示:最新价、日涨跌、近 1/3/5 年年化(可切换)、最大回撤、估值温度条。
- 底部 CTA:「查看详情」「加入对比」「加入定投计划」。
- 卡片右侧 Mini Chart:7D/30D 走势,使用日线数据。
- 用户可勾选最多 3 支基金进入对比抽屉,展示指标雷达图和关键表格。
- 收藏逻辑存储在本地(未登录)或账号(已登录)。
- 基于推荐算法(见 §8)输出三套组合,显示资产占比、预期波动、历史最大回撤。
- CTA 引导至组合策略文章/模拟盘。
- FAQ 包含:「什么是指数基金」「如何判断适合自己的风险等级」「定投 vs 一次性买入」。
- 风险提示固定展示在页面底部:指数基金存在市场风险,过往表现不代表未来等。
- 评分维度:长期收益(40%)、波动/回撤(25%)、规模与流动性(20%)、费用(10%)、估值合理性(5%)。
- 输入数据:年化收益、最大回撤、日均成交额、管理费率、估值百分位。
- 输出:综合得分 0-100,映射为「入门优选/稳健优选/进取优选」标签。
- 组合建议:使用现代投资组合理论(MPT)或经验权重(保守 70% 宽基债、30% 宽基股;进取 80% 行业/主题 + 20% 宽基)。
- 色彩:Hero 区使用品牌主色,数据卡片背景浅灰,风险等级使用信号色(绿/黄/橙)。 |- 表格滚动:列表默认展示 10 条,滚动加载。
- Skeleton/loading:使用骨架屏 + 最近一次缓存数据,避免白屏。
- 响应式:移动端以纵向卡片排列,筛选器折叠为 Drawer;桌面端使用并排布局。
- PV/UV:页面独立访客、回访率。
- 转化:点击「查看详情」/「加入定投」人数。
- 互动:筛选器使用率、对比抽屉打开率、收藏数。
- 数据准确度:定时监控接口失败率、数据延迟。
- 数据接口需具备重试/降级策略:主源(东方财富)失败时切换新浪接口。
- 缓存策略:实时行情 60 秒缓存,历史数据 CDN 缓存 24h。
- SEO:页面提供中文 meta、OG 信息,结构化 FAQ(JSON-LD)。
- 可访问性:颜色对比度符合 WCAG AA,图表提供数值读屏。
| 阶段 | 时间 | 主要输出 |
|---|---|---|
| 需求冻结 | T+3 天 | PRD、API 合同、指标口径 |
| 设计交付 | T+10 天 | 低保真 + 高保真、响应式规格 |
| 开发联调 | T+20 天 | 前后端开发、数据同步、冒烟测试 |
| Beta | T+26 天 | 小流量灰度,监控数据准确性 |
| 全量上线 | T+30 天 | 对外发布,监控指标 |
- 数据接口变动:AKShare 接口参数或字段变化 → 对接版本监控,配置化字段映射。
- 指数/基金映射不全:补充人工维护的白名单表,并根据用户搜索行为动态扩充。
- 用户认知不足:教育内容区加入短视频/图解链接、常见问题提示。
- 性能压力:列表分页 + 懒加载 mini chart;历史数据预计算。
- 是否需要在页面内直接引导交易?如果需要,需确认合规与合作渠道。
- 推荐算法是否可以接入已有的智能投顾引擎?抑或仅基于规则。
- 是否支持用户登录后的个性化提醒(价格提醒、定投日推送)。
- 数据与服务
- 新增
/pages/api/finance/index-funds.ts,封装调用stock_zh_index_spot_em、stock_zh_index_daily_em的逻辑,返回基础字段(名称、代码、最新价、涨跌幅、近 1 年收益、最大回撤占位)。 - 设计
types/finance.ts(或类似文件)统一前端字段定义,方便后续扩展估值、回测指标。 - 加入简单内存缓存(60s)避免接口过度调用。
- 新增
- 前端页面结构
- 新建
pages/finance/index.tsx,沿用全局布局,包含 Hero、筛选器占位、基金列表三大模块。 - 创建
components/finance/FundCard.tsx复用卡片 UI,展示名称、指数、最新价、日涨跌、近 1 年收益、风险标签。 - 筛选器 MVP 仅支持「类别」和「风险」两个条件,下钻逻辑后续扩展。
- 数据请求通过
SWR或自定义 hook(models目录)调用/api/finance/index-funds,支持 loading/skeleton。
- 新建
- 交互与样式
- 使用 Bootstrap 栅格 + 自定义 SCSS(
styles/finance.module.scss)完成响应式布局。 - 提供空数据与错误兜底提示,保留 CTA 占位。
- 使用 Bootstrap 栅格 + 自定义 SCSS(
- 测试与验收
pnpm lint通过。- 本地
next dev打开/finance页面验证数据渲染。 - 文档更新:在
README或导航处加入入口说明(若需要)。