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

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、onNavigatefrontend/src/styles.css新增.homePage、.homeHero、.homeFeatureGrid等样式frontend/src/App.tsxHomePage传入onNavigate{setActive}4. 已知限制与后续可做背景图依赖外网当前 Hero 使用 Unsplash 链接若部署环境无外网可改为public/下静态图并替换background-image。内容仍偏「说明型」后续可接入真实指标演示数据、最近任务摘要等让首页更具「仪表盘」属性。