FinAgent 前端进度博客（七）｜单股页迷你走势与 PDF 导出

系列说明：本系列按「首页 → 登录 → 各功能页」记录前端进度。本文为 第 7 篇：单股分析配置区「近期走势」迷你图与「分析结果」PDF 下载

日期：2026-06-08
模块：web → SingleStockMiniTrend / SingleStockAnalysisPage / downloadReportPdf / ReportPage

---

负责模块：前端与可视化

本周任务：在单股分析「分析配置」右侧增加近 60 日收盘迷你走势图，输入代码即可预览走势并跳转看板；在单股页「分析结果」区补齐「下载 PDF」；将 PDF 导出逻辑从报告页抽出为共用工具。

---

1. 背景与目标

第 3 篇搭建单股分析主流程后，配置区左侧仅有 股票代码 + 分析日期，右侧留白明显；用户填完代码后往往要先去「走势看板」确认 K 线，再回来点「开始分析」，路径割裂。

另一方面，第 5 篇优化报告阅读后，PDF 导出仅存在于「分析报告」历史列表；单股任务跑完后，最自然的动作是在 当前页 直接导出，此前缺少入口。

本次目标：

• 配置区平衡：左右两列网格，右侧展示轻量走势预览，不增加分析接口负担之外的复杂交互。
• 走势可延续：迷你图可一键跳转走势看板（/trend），并带上当前代码。
• PDF 就近导出：单股「分析结果」标题旁增加「下载 PDF」，与报告列表行为一致。
• 逻辑复用：downloadReportPdf 供 ReportPage 与 SingleStockAnalysisPage 共用，避免双份 html2pdf 代码。

---

2. 改造概览

区域	本次升级
迷你走势	新增 SingleStockMiniTrend.tsx，嵌入 singleFormGrid 右栏
数据	getTickerTrend(ticker, 60)，展示最新价、日涨跌幅、ECharts 折线面积图
代码解析	normalizeTickerForTrend 支持 000001 / sh600519 / 000001.SZ 等
主题	监听 document.documentElement[data-theme]，图表配色随日间/夜间切换
跳转	「在看板中查看」→ navigate('/trend', { state: { prefilledTicker } })
单股 PDF	分析结果 标题右侧「下载 PDF」；markdown 空时回退 getReportMarkdown(taskId)
PDF 工具	web/src/utils/downloadReportPdf.ts 从 ReportPage 抽出

---

3. 实现要点

3.1 布局位置

SingleStockAnalysisPage 的 singleFormGrid 为两列：

• 左栏 singleInnerCard：股票代码、公司名称识别、分析日期；
• 右栏 SingleStockMiniTrend：与左栏同高视觉权重，减少「分析日期下方大块空白」的观感。

未在左栏堆叠更多说明文案（与第 5、6 篇策略一致），走势图承担 信息填充 + 实用预览 双重作用。

3.2 SingleStockMiniTrend 行为

• 防抖拉数：ticker 变化后 350ms 再请求，避免输入过程中频繁打接口。
• 无效代码：未解析出六位 A 股时显示「输入有效 A 股代码后显示迷你走势」。
• 空数据 / 错误：展示 暂无走势数据 或接口错误文案，不阻断左侧表单。
• 图表：ReactECharts 平滑折线 + 浅色面积填充；X 轴为 MM-DD 简写，Y 轴 scale: true。
• 统计行：最新收盘价、日涨跌百分比（红涨绿跌配色）。

常量 MINI_TREND_DAYS = 60，与看板默认回看量级接近，便于心智一致。

3.3 单股页「下载 PDF」

在 singleResultWrapHead 中，当 report 非空时展示 secondaryButton：

1. 优先使用任务结果中的 markdown 状态；
2. 若为空且存在 taskId，调用 getReportMarkdown(taskId)；
3. 调用 downloadReportPdf(\KaTeX parse error: Expected group after '_' at position 13: {safeTicker}_̲{analysis_date}_report.pdf`, md)`。

pdfBusy 态按钮文案为「生成 PDF…」，失败错误写入页面现有 error 区域。

3.4 PDF 工具抽取（downloadReportPdf.ts）

自 ReportPage.tsx 抽出：

• marked 解析 Markdown（GFM + breaks）；
• inlineReferenceLinks 处理引用链接样式；
• html2pdf.js 生成 A4 PDF（pdfExportRoot / singleMarkdown 样式类）。

ReportPage 列表「下载 PDF」改为引用同一工具，单股页与历史报告导出效果一致。

3.5 样式

styles.css 中 singleMiniTrend* 系列：

• 卡片头「近期走势」+ meta「近 60 日收盘」；
• .singleMiniTrendStats 统计格；
• .singleMiniTrendChart 固定高度约 200px；
• .singleMiniTrendLink 复用 homeGhostBtn 幽灵按钮风格。

singleResultWrapHead 与第 6 篇说明书无耦合，仅结果区标题行 space-between 排布标题与 PDF 按钮。

---

4. 涉及文件

文件	变更说明
web/src/components/SingleStockMiniTrend.tsx	新增：迷你走势组件与 normalizeTickerForTrend
web/src/pages/SingleStockAnalysisPage.tsx	接入右栏迷你图；handleDownloadPdf 与结果区按钮
web/src/utils/downloadReportPdf.ts	新增：PDF 导出共用函数
web/src/pages/ReportPage.tsx	改为引用 downloadReportPdf 工具
web/src/styles.css	singleMiniTrend*、singleResultWrapHead

---

5. 小结

本篇补齐单股页 配置区右侧走势预览 与 结果区 PDF 导出 两块体验：迷你图让用户在发起分析前即可感知价格走势并顺滑进入看板；PDF 按钮让「分析完即导出」无需绕道历史列表；downloadReportPdf 抽取避免报告页与单股页维护双份导出逻辑。与第 6 篇使用说明书配合：功能在页面上可用，说明在 /manual 可查。

---

（FinAgent 项目实训进度记录 · 单股页迷你走势与 PDF 导出篇）