Today Stock Finance：Vibe Coding 驱动的股票分析平台
基于 TypeScript + Koa2 + React + DeepSeek 的本地化股票分析工具，记录从脚手架到真实行情与 AI 研报的全流程工程实践
概述
Today Stock Finance 是一款本地运行的股票市场分析平台，目标能力包括：
- 炒股术语查询与分类浏览
- A 股基本面与实时行情查看
- 基于 DeepSeek 的多维度 AI 研报（短线 / 长线、持仓感知）
本文重点不在 Node.js 环境安装，而是记录如何借助 Vibe Coding（Trae CN + DeepSeek V4 Pro）在较短时间内搭出前后端分离、分层清晰的可运行工程，并逐步接入真实数据源与 AI 分析模块。
免责声明
本项目仅供个人学习与技术验证，不构成任何投资建议。
AI 生成的分析报告可能存在事实错误或滞后信息，请勿用于实际交易决策。
技术栈
| 层级 | 选型 | 说明 |
|---|---|---|
| 后端 | TypeScript + Koa2 | 洋葱模型中间件、Controller / Service 分层 |
| 前端 | TypeScript + React + RTK | Vite 构建，Redux Toolkit 管理异步数据流 |
| AI | DeepSeek V4 Pro API | System Prompt 驱动的结构化研报生成 |
| 工具链 | Trae CN | Agent 多任务模式，批量生成脚手架与联调代码 |
| 联调 | CORS + Vite Proxy | 后端 :6500，前端 :6501 |
前后端完全分离：React 仅负责展示与交互，核心数据与业务逻辑收敛在 Koa2 服务端。
系统架构
┌─────────────────────────────────────────────────────────────┐
│ Client :6501 (Vite + React + RTK) │
│ ┌──────────┐ ┌────────────┐ ┌─────────────────────────┐ │
│ │ Pages │→ │ RTK Store │→ │ api.ts (fetch) │ │
│ └──────────┘ └────────────┘ └────────────┬────────────┘ │
└─────────────────────────────────────────────┼──────────────┘
│ /api/*
▼
┌─────────────────────────────────────────────────────────────┐
│ Server :6500 (Koa2 + TypeScript) │
│ Routes → Controllers → Services → Data Layer │
│ ├─ 东方财富 API (优先) │
│ ├─ 腾讯行情 API (回退) │
│ ├─ 本地 mock (兜底) │
│ └─ DeepSeek API (AI 分析) │
└─────────────────────────────────────────────────────────────┘数据流：页面通过 RTK createAsyncThunk 触发请求 → api.ts 调用后端 REST → Controller 解析参数 → Service 聚合业务逻辑 → Data Layer 拉取外部 API 或 mock。
项目结构
Agent 首轮对话即可生成完整 Scaffold：
z_finance_stock/ ├── package.json # 根配置，concurrently 一键启动前后端 ├── server/ # 后端 Koa2 + TypeScript │ ├── src/ │ │ ├── index.ts # 入口，端口 6500 │ │ ├── types/index.ts │ │ ├── middleware/errorHandler.ts │ │ ├── controllers/ # termController, stockController, aiController │ │ ├── services/ # termService, stockService, aiService │ │ ├── routes/ │ │ └── data/ # mock + eastmoney.ts 等外部数据源 │ └── tsconfig.json ├── client/ # 前端 Vite + React + TypeScript │ ├── src/ │ │ ├── router/index.tsx │ │ ├── store/ # store.ts, stockSlice.ts, hooks.ts │ │ ├── services/api.ts │ │ ├── pages/ # Home, TermSearch, StockList, StockDetail, AIAnalysis │ │ └── components/Layout.tsx │ └── vite.config.ts # 开发代理 → localhost:6500
开发历程（Vibe Coding 工作流）
以下按迭代阶段整理实际 Prompt 与产出，可作为类似项目的参考模板。
Phase 1：脚手架搭建
Prompt 要点：
新建股票分析项目：前端 Vite + React + RTK + React Router；
后端 Koa2 + TypeScript。实现术语查询、基本面查看；
数据分层，核心逻辑在后端，React 仅展示。Agent 任务拆分：初始化目录 → 后端骨架（路由 / 控制器 / 服务 / 数据层）→ 术语与股票 API → 前端页面与 RTK → 依赖安装与联调代理。
产出：可运行的前后端项目，含 mock 数据与基础 UI。
Phase 2：接入真实行情
Prompt：stocks.ts 接入真实的股票数据查询
数据源策略（三级回退）：
| 优先级 | 来源 | 能力 |
|---|---|---|
| 1 | 东方财富 API（push2 + 财报） | 搜索、行情、财务报表 |
| 2 | 腾讯行情 API（qt.gtimg.cn） | 实时报价回退 |
| 3 | 本地 mock（stocks.ts） | 离线兜底 |
Service 层改为 async，Controller 同步适配。验证方式：对比页面展示股价与当日行情是否一致。
Phase 3：Bug 修复与类型加固
典型问题与修复：
| 问题 | 根因 | 修复 |
|---|---|---|
currentFundamental 类型为 unknown | createAsyncThunk 缺少泛型 | 为 thunk 补充 <ReturnType, ArgType> |
| 端口占用 | 重复启动 | 启动脚本检测并释放 6500 / 6501 |
| 腾讯 API 乱码 | 响应为 GBK 编码 | TextDecoder('gbk') 解码 |
| 缺少实时股价 | push2 字段未映射 | StockFundamental 增加 price、changePercent |
updateDate 显示财报日期 | 字段语义混淆 | 拆分「财报报告期」与「数据拉取时间」 |
Phase 4：UI 现代化
Prompt：整体风格现代化，暗色主题 + Glassmorphism。
迭代范围：全局 Layout、Home Hero、StockList 表格、StockDetail 指标卡片、TermSearch 术语卡片。Agent 按页面分批提交 CSS 与组件改动，最后统一构建验证。
Phase 5：AI 分析模块
能力需求：
- 调用 DeepSeek V4 Pro，从基本面、情绪面、买卖时机、暴涨暴跌应对等维度输出研报
- 支持短线 / 长线策略切换
- 可选填持仓信息（是否持仓、成本价、数量），使分析更贴近个人情况
- 报告以 Markdown 渲染；System Prompt 在报告上方单独展示（不计入导出内容）
- 支持导出报告到本地
后端：aiService 构建专业 System Prompt + User Prompt → POST /api/ai/analyze → 返回 { report, systemPrompt }。
前端：react-markdown 渲染报告；AIAnalysis 页面含策略切换与持仓表单；StockDetail 入口按钮跳转。
API 概览
| 路径 | 方法 | 功能 |
|---|---|---|
/api/terms | GET | 术语搜索与分类 |
/api/stocks | GET | 股票列表 / 关键词搜索 |
/api/stocks/:code/fundamental | GET | 基本面 + 实时行情 |
/api/ai/analyze | POST | AI 研报生成（含策略与持仓参数） |
效果预览
Trae CN IDE 工程视图
Web 运行效果
| 页面 | 截图 |
|---|---|
| 首页 |  |
| 术语查询 |  |
| 股票列表 |  |
| 基本面详情 |  |
| 复盘笔记 |  |
| 股价与指标 |  |
| AI 分析中 |  |
| AI 分析报告 |  |
后续规划
Docker 化部署
若项目稳定且愿意对外分享，可打包为 Docker 镜像发布至 Docker Hub，降低他人部署门槛。参考 MT Photos 的容器化分发模式（Docker 仓库）。
商业化思路（探索）
| 模块 | 策略 |
|---|---|
| 行情 / 术语查询 | 免费开放，降低使用门槛 |
| 定制 Prompt 模板 | 付费板块，差异化研报质量 |
| 能力赋能分成 | 若工具可量化提升用户收益，可探索约定分成机制 |
核心难点不在技术，而在 Prompt 工程与产品运营：什么样的领域知识 + 模型组合，能持续产出有价值的分析报告。
内容爬取与知识增强
股票社区（公众号、论坛等）存在大量主观但可提炼的分析思路。后续可探索：
- 应用层：爬取优质文章 → LLM 提取分析框架 → 生成可复用 Skills → 结合当日行情输出决策辅助
- 架构层：将文章作为训练 / RAG 语料 → 定制分析 Workflow → 搭配 Hooks 做量化信号
两条路径均处于构想阶段，需额外考虑版权合规与数据质量。
小结
Today Stock Finance 是一次 Vibe Coding 工程化实践：用 Agent 快速生成 Koa2 + React 分层骨架，再按「真实数据 → 类型修复 → UI → AI 模块」分阶段迭代。Koa2 洋葱模型、RTK 异步流、多级数据源回退、DeepSeek Prompt 工程，构成了项目的核心技术点。
关于 Vibe Coding 方法论的个人思考，见 Vibe Coding 的一些看法。