Today Stock Finance

一款基于 TypeScript + Koa2 + React + Deepseek V4 Pro 所搭建的股票分析工具

2026年5月28日

TypeScript

Vibe Coding

Docs

本文所聚焦的业务需求是：搭建一个本地化的股票市场分析平台

文档的主要目的是讲如何使用Vibe Coding搭建一个相对专业的工程，因此不去讲任何安装Node.JS环境的内容，直接默认开发电脑存在了node环境

项目技术栈选择

后端技术栈：TypeScript + Koa2

这便是大名鼎鼎的Koa2框架，一直在看别人使用里面的洋葱模型，很厉害，包括中间层等等内容。
一直是自己想上手实际写一下，但是古法编程时代的自己太懒了，没有动力去从0到1学习一门技术的完全体，简单写一两个脚本，也没有孜孜不倦的毅力和动力沿着一个确定性的目标像一只仓鼠一样，搭出一个震惊中外的项目。
现在有了Vibe Coding的加持，多少都要试一下威震八方的Koa2到底有多厉害。

前端技术栈：TypeScript + React + RTK

这个项目是前后端绝对分离的一个项目，Koa2项目运行在6500端口，React项目运行在6501端口。采用CORS的形式，进行两个项目的交互行为。

Vibe Coding技术栈：

Trae CN + Deepseek V4 Pro

初始框架的搭建

新建一个空白的文件夹，并打开你的Trae CN，接入Deepseek V4 Pro的API。

User:

新建一个股票分析项目，其前端部分基于Vite和React实现，前端部分使用RTK进行构建页面的路由跳转模式。后端部分使用Koa2实现。技术部分完全使用TypeScript实现，该项目为：提供股票的基本术语查询、基本面的查看，后续考虑使用AI工具进行股票的查询。需要实现项目的数据分层，核心数据放在Koa2后端实现，React层仅作为页面展示部分。

Multi Task:

初始化项目根目录结构和配置文件
搭建后端 Koa2 + TypeScript 骨架（路由、控制器、服务、数据层）
实现后端股票术语查询和基本面数据 API
搭建前端 Vite + React + TypeScript + React Router 骨架
实现前端页面（术语查询、基本面查看）和 RTK 状态管理
安装依赖并验证项目运行
配置前后端联调与代理

Result: 在这一轮的Agent模式之中，基本上整一个Scaffold就能完整搭建起来。包括后端的API，以及前端简易的UI页面（这一块可以自己之后慢慢调试，沿着自己喜欢的UI审美风格进行多轮对话进行调整）

z_finance_stock/
├── package.json                  # 根配置，concurrently 一键启动前后端
├── server/                       # 后端 Koa2 + TypeScript
│   ├── src/
│   │   ├── index.ts              # 入口，端口 6500
│   │   ├── types/index.ts        # 类型定义
│   │   ├── middleware/errorHandler.ts
│   │   ├── controllers/          # termController, stockController
│   │   ├── services/             # termService, stockService（业务逻辑层）
│   │   ├── routes/               # termRoutes, stockRoutes
│   │   └── data/                 # 静态 mock 数据（后续替换为数据库）
│   ├── package.json
│   └── tsconfig.json
├── client/                       # 前端 Vite + React + TypeScript
│   ├── src/
│   │   ├── main.tsx / App.tsx    # 入口
│   │   ├── router/index.tsx      # React Router 路由配置
│   │   ├── store/                # RTK 状态管理
│   │   │   ├── store.ts          # store 配置
│   │   │   ├── stockSlice.ts     # 股票/术语数据 slice
│   │   │   └── hooks.ts          # typed hooks
│   │   ├── services/api.ts       # API 请求层
│   │   ├── pages/                # 页面组件
│   │   │   ├── Home.tsx          # 首页（功能导航卡片）
│   │   │   ├── TermSearch.tsx    # 术语查询（搜索+分类筛选）
│   │   │   ├── StockList.tsx     # 股票列表（关键词搜索）
│   │   │   └── StockDetail.tsx   # 股票基本面详情
│   │   ├── components/Layout.tsx # 布局（导航栏+内容区）
│   │   └── types/index.ts        # 前端类型
│   ├── vite.config.ts            # Vite 配置（含 API 代理到 6501）
│   └── package.json

[React 页面]  ←只做展示，通过 hooks 触发 action
     ↕
[RTK Store]   ←状态管理中心，dispatch asyncThunk
     ↕
[API Service]  ←前端请求层（fetch）
     ↕
[Koa2 路由]   ←/api/terms, /api/stocks
     ↕
[Controller]  ←参数解析、响应封装
     ↕
[Service]     ←核心业务逻辑（搜索、过滤、聚合）
     ↕
[Data Layer]  ←静态数据，后续可替换为数据库/AI接口

接入真实的股票数据查询

User:

stocks.ts 接入真实的股票数据查询

MultiTask:

1. 创建东方财富 API 数据层（搜索、行情、财务报表）
2. 将 StockService 改为异步，接入真实数据
3. 更新 StockController 适配异步调用
4. 验证真实数据 API 正常工作

Result:

Controller (async) → Service (async)
  ├── 优先: 东方财富 API (push2 + 财报)
  ├── 回退: 腾讯行情 API (qt.gtimg.cn)
  └── 兜底: 本地 mock 数据 (stocks.ts)

在这一轮的对话中，把真实数据接入进来，整个项目基本可行，至于验证数据到底是否为真实数据，就自己去看一下股价是否和当日的数据对得上与否？

修复部分BUG

user:

1. StockDetail.tsx 类型“unknown”上不存在属性“currentFundamental”。ts(2339) 
2. 检测端口是否已经打开，如果已经开发，先释放掉可用端口，再去启动这个项目，Backend的端口在6500，frontend的端口在6501
3. 详情页面出现乱码问题 
4. 股票不是最新的数据，数据更新时间不是实时
5. 缺失最新股价的内容

MultiTask:

1. 修复 StockDetail.tsx useAppSelector 类型推断
2. 修改端口：后端 6500、前端 6501，更新所有配置
3. 启动脚本增加端口检测释放逻辑，重启验证
4. 修复腾讯 GBK 编码乱码（fetchTencentQuote 用 TextDecoder('gbk')）
5. StockFundamental 类型增加 price、changePercent 字段
6. eastmoney.ts 从 push2 接口提取股价与涨跌幅
7. 前端 StockDetail 页面展示最新股价和涨跌幅
8. 端口释放后重启验证

user:

<p className="update-info">财报数据更新日期: {fund.updateDate}</p> (这里的updateDate出错了！)
数据出现错误，目前一直展示的是2026.03.31，预期是实时时间

MultiTask:

问题在 stockSlice.ts —— loadFundamental 的 createAsyncThunk 缺少泛型参数，导致 action.payload 被推断为 unknown ，进而 currentFundamental 变成 unknown | null 。
updateDate 取的是财报报告日期，不是数据获取的实时时间。需要将二者分开。