Files
easy_tdx_max/web-ui
awayingsandClaude Code fb35677802 feat: 自选列表新增「近3日/近1周/近2周」涨跌幅三列(issue #7)
交易日偏移口径:T = 上证指数日线(交易日历)中 <= 今天的最后一天,
D_n = T 往前 n 个交易日,锚点 = 个股日线(/bars 同款 QFQ)中
date <= D_n 的最后一根 bar。后端只回锚点收盘价,涨跌幅由前端用
SSE 实时价现算,盘中三列随报价免费跳动、无需轮询本接口。

- 新增 GET /watchlist/returns + 纯计算模块 web/returns.py(零 IO,单测覆盖
  停牌回退/次新 null/除权日 QFQ/非交易日回退等口径)
- 个股日线与交易日历均进程内缓存(当日不变、次日失效),重复刷新零行情请求;
  日历缺今天(serve 盘前启动)时按 60s 间隔重取,避免 T 整体前移
- 取数并发 ≤ 4(TDX 防封红线);单只失败只落 error,不影响整表
- 前端 +3 列(着色复用 dirClass/fmtPctSigned),e2e 同步断言

与 issue 定稿的两处偏差(/simplify 收敛,"减少不必要的改动"):
- 删除 windows 查询参数:列名与窗口一一对应(issue 亦将"用户自定义窗口"
  列为 out of scope),固定 3/5/10
- 个股缓存由磁盘 JSON 改为进程内 dict:可观测行为不变(当日不重复请求),
  但 serve 重启后当天首次请求会重取一次

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-11 11:39:10 +08:00
..

easy-tdx 回测 Web UI

单标的策略回测的可视化前端(Vue3 + ECharts)。对应后端回测 REST API/api/v1/backtest/*)。

快速开始

需要两个进程:后端 FastAPI(提供回测 + 行情 API+ 前端 Vite dev server。

# 1. 启动后端(仓库根目录,使用 venv)
venv/Scripts/easy-tdx serve --port 8000

# 2. 启动前端(本目录)
npm install      # 首次
npm run dev      # 启动在 http://localhost:5173

浏览器打开 http://localhost:5173。开发期 /api 请求由 vite proxy 转发到后端 127.0.0.1:8000,无需处理跨域。

功能(MVP-A

  • 选标的取行情:沪深北市场,日线/周线/分钟线,调 /api/v1/bars
  • 策略选择 + 动态参数表单:下拉选预置策略(MA交叉/MACD/布林/RSI/KDJ),参数表单按后端 schema 自动渲染
  • 回测报告
    • K线主图 + 买卖点标注(ECharts candlestick + markPoint
    • 净值曲线 + 回撤双轴图
    • 19 项绩效指标表(收益/风险/交易分组)
    • 成交记录表

技术栈

技术 说明
框架 Vue 3.5 + TypeScript Composition API + <script setup>
构建 Vite 8 dev proxy 解决跨域
状态 Pinia 策略列表 / OHLCV / 回测结果
路由 Vue Router 4 MVP 仅 /,预留组合/寻优/对比
图表 ECharts(按需引入) candlestick / line / markPoint

目录结构

src/
├── main.ts               # 入口(Pinia + Router
├── App.vue               # 根布局
├── router.ts             # 路由
├── api.ts                # fetch 封装(strategies/bars/backtest
├── types.ts              # 后端 schema 的 TS 镜像
├── echarts-setup.ts      # ECharts 按需注册
├── style.css             # 深色金融主题
├── stores/backtest.ts    # 状态管理
├── views/BacktestView.vue    # 主页面(左配置 / 右报告)
└── components/
    ├── StrategyPicker.vue    # 策略下拉 + 动态参数表单
    ├── SymbolPicker.vue      # 选标的取行情
    ├── KlineChart.vue        # K线 + 买卖点
    ├── EquityChart.vue       # 净值 + 回撤
    ├── MetricTable.vue       # 绩效指标表
    └── TradeTable.vue        # 成交记录表

生产构建

npm run build    # 产物在 dist/,由 FastAPI 同源托管(待后续配置)

注意事项

  • 取行情需要网络/api/v1/bars 通过 TDX 协议取真实行情,需后端能连通行情服务器。无网络时可手动构造 OHLCV(后续可加内联数据粘贴入口)。
  • A股配色惯例:红涨绿跌(与 ECharts 默认相反),见 echarts-setup.ts