From 49c892b3172b29331dec2c2010f16a77bf2f4871 Mon Sep 17 00:00:00 2001
From: Justin Gu <97915@qq.com>
Date: Fri, 3 Jul 2026 12:04:15 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=89=A9=E5=85=85=20README=20Web=20UI?=
 =?UTF-8?q?=20=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=EF=BC=88=E5=89=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=9D=A1=E4=BB=B6/=E5=90=AF=E5=8A=A8/=E5=9B=9B?=
 =?UTF-8?q?=E9=A1=B5=E6=93=8D=E4=BD=9C=E6=AD=A5=E9=AA=A4/=E6=B3=A8?=
 =?UTF-8?q?=E6=84=8F=E4=BA=8B=E9=A1=B9=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 57 ++++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index fd4480d..ed6ce54 100644
--- a/README.md
+++ b/README.md
@@ -438,25 +438,60 @@ easy-tdx portfolio --stocks SZ:000001,SH:600519 \
 
 不想写命令行？用浏览器。`easy-tdx serve` 启动后端，`web-ui/` 目录跑前端，浏览器打开就是完整的回测可视化界面。
 
+**前置条件：**
+
 ```bash
-# 终端 1：启动后端
+# 后端需安装 web 可选依赖（FastAPI + Uvicorn）
+pip install -e ".[web]"
+
+# 前端需 Node.js 18+（首次运行需装依赖）
+cd web-ui && npm install
+```
+
+**启动（两个终端）：**
+
+```bash
+# 终端 1：启动后端 API 服务（提供行情数据 + 回测计算）
 easy-tdx serve --port 8000
 
-# 终端 2：启动前端（web-ui/ 目录）
-cd web-ui && npm install && npm run dev
+# 终端 2：启动前端开发服务器（web-ui/ 目录）
+cd web-ui && npm run dev
 # 浏览器打开 http://localhost:5173
 ```
 
-四个功能页，全程零代码：
+> 前端开发服务器通过 Vite proxy 把 `/api` 请求转发到后端 `127.0.0.1:8000`，无需处理跨域。后端行情连接失败时回测路由仍可用（用内联数据），但取行情功能需要后端连通通达信服务器。
 
-| 页面 | 功能 |
-|------|------|
-| **单标的回测** | 选标的取行情，挑 18 个内置策略之一，调参数，K 线主图标买卖点，净值回撤双轴图，19 项绩效指标，成交明细 |
-| **组合回测** | 多只股票等权组合，组合净值曲线（按日期对齐求和），各标的净值叠加对比，横向绩效表 |
-| **参数寻优** | 勾选 1-2 个参数，填取值列表，网格遍历所有组合，排名表 + 二维热力图，最优点一键跳转回测 |
-| **结果对比** | 选 2-4 个已完成回测，归一化净值叠加，8 项指标横向 PK |
+打开浏览器后，顶部导航栏有四个页面：
 
-取行情支持日期范围选择，超过 800 根自动翻页拼接。技术栈：Vue 3 + Vite + TypeScript + Pinia + ECharts（按需引入）。
+**1. 单标的回测**（首页 `/`）
+
+左侧配置面板从上到下填写，右侧自动出图：
+
+- **取行情**：选市场（深/沪/北），填 6 位代码，选周期（日线/周线/分钟线），设日期范围（默认最近 3 年），点「取行情」。超过 800 根会自动翻页拼接
+- **选策略**：下拉选 18 个内置策略之一（双均线交叉、MACD、布林带、RSI、KDJ、唐安奇通道、CCI 等），选中后参数表单自动出现，按推荐范围调参
+- **资金与成本**：初始资金、佣金率、滑点、成交模式（默认 next_open 下一根开盘成交）
+- 点「开始回测」，右侧依次出：K 线主图（红三角=买入、绿钉=卖出）、净值曲线与回撤双轴图、19 项绩效指标表（总收益/夏普/最大回撤/胜率/盈亏比等）、成交记录明细
+
+**2. 组合回测**（`/portfolio`）
+
+- 添加多只标的（如 SZ:000001、SH:600519），选策略和日期范围
+- 点「开始组合回测」，右侧出：组合整体绩效（加权收益率）、组合净值曲线（各标的按日期对齐求和）、各标的净值归一化叠加对比图、各标的绩效横向对比表
+
+**3. 参数寻优**（`/optimize`）
+
+- 先取行情（同单标的），选策略
+- 勾选 1-2 个想寻优的参数，填入取值列表（逗号分隔，如 fast 填 `5,10,20,30`），页面实时显示网格点数（上限 200）
+- 点「开始寻优」，右侧出：最优结果摘要、参数热力图（2 参数时，颜色映射收益率）、所有网格点排名表
+- 排名表每行有「查看」按钮，点击跳转单标的回测页，自动填充该参数组合跑完整回测
+
+**4. 结果对比**（`/compare`）
+
+- 左侧列出最近 20 个已完成的回测任务（含单标的和组合）
+- 勾选 2-4 个，右侧出：归一化净值叠加图（初始=1，看相对走势）、8 项核心指标横向对比表（总收益/夏普/最大回撤/胜率/盈亏比/交易数/年化/波动率）
+
+> ⚠️ **任务不持久化**：回测结果存在后端进程内存，重启 `easy-tdx serve` 后清空。对比页只能选当前运行期间产生的任务。
+
+技术栈：Vue 3 + Vite + TypeScript + Pinia + ECharts（按需引入，构建产物约 725KB）。前端代码在 `web-ui/` 目录，独立 `package.json`，不依赖 Python 环境。