FinAgent 前端进度博客六站内使用说明书模块系列说明本系列按「首页 → 登录 → 各功能页」记录前端进度。本文为第 6 篇侧栏第六模块「使用说明书」与帮助文档产品化日期2026-06-08模块web→ManualPage/App.tsx导航与路由 /styles.css负责模块前端与可视化含帮助文档信息架构本周任务在侧栏新增第六大模块「使用说明书」将分散在 README、联调踩坑中的「第一次怎么用」收敛为可点击跳转的站内文档与第 5 篇界面精简形成互补——页面内少说说明集中在独立模块。1. 背景与目标第 5 篇完成报告阅读与界面精简后各功能页顶栏、卡片下的灰色说明文案被大量删除界面更干净但带来新问题新用户不知道先看哪README 在仓库里演示时老师/同学不会边用边翻 Markdown。重复答疑「摘要是空的算不算失败」「单股页下方有没有报告」「要不要去分析报告页才能看结果」「empty OHLCV 怎么办」——同类问题在联调中多次出现。帮助文档与产品脱节docs/guides/新成员-项目完整说明.md面向开发者缺少已登录 Web 用户视角的操作说明。本次目标可发现侧栏固定入口与首页 / 单股 / 走势 / 报告 / 模拟交易并列成为第六主模块。可跳转说明书内链到各路由Link to/single等FAQ 覆盖真实踩坑。可维护纯前端静态页不新增 API说明内容集中在/manual不回流到各业务页标题下。2. 改造概览区域本次升级侧栏导航新增第 6 项/manual「使用说明书」图标?使用说明书页ManualPage.tsxHero 目录锚点 8 个章节卡片章节内容平台简介、快速开始、功能模块表、单股流程、读结果、报告与 PDF 说明、环境变量表、FAQ站内跳转功能模块表与正文使用react-router-dom的Link外链/api/health、Swaggerhttp://127.0.0.1:8000/docs新标签打开样式.manualPage、.manualToc、.manualFaq等titleIconManual夜间目录链接#93c5fd3. 实现要点3.1 信息架构为什么放在侧栏第六项主导航保持业务模块优先分析、看板、报告、交易说明书放在最后不抢占主流程但随时可查与第 5 篇删除的各页homeSectionLead、副标题形成分工页面内少说说明书里说全未采用顶栏帮助按钮的原因顶栏目前仅保留主题切换56px 高度适合放全局控件说明书内容较长独立页面比下拉面板更合适。3.2ManualPage结构常量SECTIONS定义 8 节与锚点id顶部nav classNamemanualToc渲染有序列表链接#overview…#faq。复用现有 UI 约定外层container manualPage最大宽度约 820px便于长文阅读每节card manualSectionsectionTitle titleWithIcon titleIconManual列表.manualList/.manualListOrdered表格.table manualTableFAQ 用dl classNamemanualFaq。内部组件ManualSection统一包裹id、title、children避免八段重复 markup。3.3 章节设计与 FAQ 来源章节要点平台简介LangGraph 流水线一句话、登录与 JWT、主题与个人中心入口快速开始.env→ 启动 API /start-dev.bat→ 5173 登录 → 单股分析功能模块五模块表格 Link明确各页职责单股分析代码格式、分析日期、进度与终止等操作说明面向用户非实现细节阅读分析结果七 Tab 分工强调摘要 RAG 记忆非执行摘要收盘--说明报告与 PDF说明在单股页与报告页如何查看、导出用户向指引环境配置常用.env变量表指向config.py/ README常见问题empty OHLCV、running 慢、401、摘要空、改 env 不生效FAQ 条目来自联调真实反馈含行情预检失败、.env需重启 API 等而非泛泛占位文案。3.4 路由与导航接入App.tsx{ to: /manual, label: 使用说明书, icon: ? } Route path/manual element{ManualPage /} /登录后与其他业务页相同走appShell侧栏 顶栏布局未登录用户仍跳转登录页说明书不对匿名开放与全站鉴权一致。3.5 样式与夜间模式titleIconManual::before { content: ?; }与系列titleWithIcon图标体系一致目录链接使用主题色暗色下.manualTocList a { color: #93c5fd; }正文manualSectionBody使用var(--text-color)与第 4、5 篇主题变量体系一致。4. 涉及文件文件变更说明web/src/pages/ManualPage.tsx新增站内使用说明书全文与目录锚点web/src/App.tsx侧栏第六项导航路由/manualweb/src/styles.cssmanual*系列样式titleIconManual5. 小结本篇在界面精简第 5 篇之后补上「帮助去哪里看」的答案侧栏第六模块「使用说明书」把快速开始、功能地图、读结果要点、环境变量与联调 FAQ 收进一个可锚点跳转的页面。整体策略是主流程页面保持干净说明文档产品化、可演示、可迭代降低实训演示与同学自助上手的沟通成本。FinAgent 项目实训进度记录 · 使用说明书模块篇
FinAgent 前端进度博客（六）｜站内使用说明书模块
发布时间：2026/6/9 2:02:19
FinAgent 前端进度博客六站内使用说明书模块系列说明本系列按「首页 → 登录 → 各功能页」记录前端进度。本文为第 6 篇侧栏第六模块「使用说明书」与帮助文档产品化日期2026-06-08模块web→ManualPage/App.tsx导航与路由 /styles.css负责模块前端与可视化含帮助文档信息架构本周任务在侧栏新增第六大模块「使用说明书」将分散在 README、联调踩坑中的「第一次怎么用」收敛为可点击跳转的站内文档与第 5 篇界面精简形成互补——页面内少说说明集中在独立模块。1. 背景与目标第 5 篇完成报告阅读与界面精简后各功能页顶栏、卡片下的灰色说明文案被大量删除界面更干净但带来新问题新用户不知道先看哪README 在仓库里演示时老师/同学不会边用边翻 Markdown。重复答疑「摘要是空的算不算失败」「单股页下方有没有报告」「要不要去分析报告页才能看结果」「empty OHLCV 怎么办」——同类问题在联调中多次出现。帮助文档与产品脱节docs/guides/新成员-项目完整说明.md面向开发者缺少已登录 Web 用户视角的操作说明。本次目标可发现侧栏固定入口与首页 / 单股 / 走势 / 报告 / 模拟交易并列成为第六主模块。可跳转说明书内链到各路由Link to/single等FAQ 覆盖真实踩坑。可维护纯前端静态页不新增 API说明内容集中在/manual不回流到各业务页标题下。2. 改造概览区域本次升级侧栏导航新增第 6 项/manual「使用说明书」图标?使用说明书页ManualPage.tsxHero 目录锚点 8 个章节卡片章节内容平台简介、快速开始、功能模块表、单股流程、读结果、报告与 PDF 说明、环境变量表、FAQ站内跳转功能模块表与正文使用react-router-dom的Link外链/api/health、Swaggerhttp://127.0.0.1:8000/docs新标签打开样式.manualPage、.manualToc、.manualFaq等titleIconManual夜间目录链接#93c5fd3. 实现要点3.1 信息架构为什么放在侧栏第六项主导航保持业务模块优先分析、看板、报告、交易说明书放在最后不抢占主流程但随时可查与第 5 篇删除的各页homeSectionLead、副标题形成分工页面内少说说明书里说全未采用顶栏帮助按钮的原因顶栏目前仅保留主题切换56px 高度适合放全局控件说明书内容较长独立页面比下拉面板更合适。3.2ManualPage结构常量SECTIONS定义 8 节与锚点id顶部nav classNamemanualToc渲染有序列表链接#overview…#faq。复用现有 UI 约定外层container manualPage最大宽度约 820px便于长文阅读每节card manualSectionsectionTitle titleWithIcon titleIconManual列表.manualList/.manualListOrdered表格.table manualTableFAQ 用dl classNamemanualFaq。内部组件ManualSection统一包裹id、title、children避免八段重复 markup。3.3 章节设计与 FAQ 来源章节要点平台简介LangGraph 流水线一句话、登录与 JWT、主题与个人中心入口快速开始.env→ 启动 API /start-dev.bat→ 5173 登录 → 单股分析功能模块五模块表格 Link明确各页职责单股分析代码格式、分析日期、进度与终止等操作说明面向用户非实现细节阅读分析结果七 Tab 分工强调摘要 RAG 记忆非执行摘要收盘--说明报告与 PDF说明在单股页与报告页如何查看、导出用户向指引环境配置常用.env变量表指向config.py/ README常见问题empty OHLCV、running 慢、401、摘要空、改 env 不生效FAQ 条目来自联调真实反馈含行情预检失败、.env需重启 API 等而非泛泛占位文案。3.4 路由与导航接入App.tsx{ to: /manual, label: 使用说明书, icon: ? } Route path/manual element{ManualPage /} /登录后与其他业务页相同走appShell侧栏 顶栏布局未登录用户仍跳转登录页说明书不对匿名开放与全站鉴权一致。3.5 样式与夜间模式titleIconManual::before { content: ?; }与系列titleWithIcon图标体系一致目录链接使用主题色暗色下.manualTocList a { color: #93c5fd; }正文manualSectionBody使用var(--text-color)与第 4、5 篇主题变量体系一致。4. 涉及文件文件变更说明web/src/pages/ManualPage.tsx新增站内使用说明书全文与目录锚点web/src/App.tsx侧栏第六项导航路由/manualweb/src/styles.cssmanual*系列样式titleIconManual5. 小结本篇在界面精简第 5 篇之后补上「帮助去哪里看」的答案侧栏第六模块「使用说明书」把快速开始、功能地图、读结果要点、环境变量与联调 FAQ 收进一个可锚点跳转的页面。整体策略是主流程页面保持干净说明文档产品化、可演示、可迭代降低实训演示与同学自助上手的沟通成本。FinAgent 项目实训进度记录 · 使用说明书模块篇
