FinAgent 前端进度博客（一）｜首页

系列说明：本系列按四个主页面加登录页各写一篇进度记录，本文为 第 1 篇：首页。其余篇目将对应单股分析、分析报告、任务中心。

日期：2026-04-04
模块：frontend → 首页（HomePage）

---

负责模块：前端与可视化

本周任务：完成页面路由骨架（首页 / 单股分析 / 分析报告 / 任务中心）；完成首页初版。

本周计划围绕两件事展开：搭好导航骨架（首页 / 单股分析 / 分析报告 / 任务中心）；完成首页的初步内容搭建。

一. 页面与「路由」骨架（首页 / 单股分析 / 分析报告 / 任务中心）

当前实现采用左侧固定导航 + 主内容区按选中项切换页面的方式，在 App.tsx 中维护 active 状态，对应四个入口：

导航项	主要内容
一、首页	项目介绍与能力说明
二、单股分析	股票代码、分析日期、开始/重新分析；免责声明、摘要、投资结论；可展开 Markdown 完整报告
三、分析报告	搜索、批量导出（JSON/Markdown/TXT）、报告列表与查看/下载/删除（删除先前端占位）
四、任务中心	状态汇总、按状态筛选、任务列表

二. 首页

• 信息结构：用一句话讲清产品定位，并分块展示「能做什么」「分析大致怎么走」。
• 视觉体验：增加 Hero 区 + 配图背景 + 渐变遮罩，与现有侧栏深色风格协调，同时保证正文可读性。
• 交互：首页按钮可直接 跳转 到「单股分析 / 任务中心 / 分析报告」，减少用户只在侧栏找入口的成本。

---

1. 页面结构概览

首页自上而下分为四块：

区块	作用
Hero	品牌标题、产品简介、主/次操作按钮、技术栈标签（FastAPI、AkShare、规则化 MVP）
核心能力	三张卡片：技术指标、新闻与情绪、风险与报告
分析流水线	四步说明，与后端编排思路（数据→舆情→辩论占位→风控结论）对齐
底部 CTA	再次引导进入单股分析

图标采用 内联 SVG，不引入额外图标库，便于控制样式与体积。

---

2. 实现要点

2.1 与 App 的导航衔接

首页不自行维护路由，通过 props 接收可选回调：

• onNavigate?: (page: 'single' | 'report' | 'tasks') => void

在 App.tsx 中传入 setActive，使首页按钮与侧栏使用 同一套页面状态，避免两套导航逻辑。

2.2 样式与背景图

样式集中在 styles.css，类名以 home* 为前缀，避免与表单页、表格页冲突。

• Hero 背景：使用 全幅背景图（Unsplash 金融/交易场景）叠加 深色线性渐变，并加一层径向高光，保证白字对比度。
• 正文区：浅紫灰纵向渐变底，卡片白底圆角 + 轻阴影；流水线在宽屏下为 四列栅格，窄屏下纵向堆叠并保留分隔线。

---

3. 涉及文件

文件	变更说明
frontend/src/pages/HomePage.tsx	首页组件：Hero、能力卡、流水线、CTA、onNavigate
frontend/src/styles.css	新增 .homePage、.homeHero、.homeFeatureGrid 等样式
frontend/src/App.tsx	HomePage 传入 onNavigate={setActive}

---

4. 已知限制与后续可做

• 背景图依赖外网：当前 Hero 使用 Unsplash 链接；若部署环境无外网，可改为 public/ 下静态图并替换 background-image。
• 内容仍偏「说明型」：后续可接入真实指标演示数据、最近任务摘要等，让首页更具「仪表盘」属性。

---