Panda Web 模块深度分析

src/panda_web 包含了 Panda Quantflow 的前端静态资源。这是一个现代化的单页应用 (SPA)，负责提供可视化的工作流编排、回测结果展示和实盘监控界面。

1. 目录结构概览

src/panda_web/
├── index.html              # 应用入口 HTML
├── favicon.ico             # 网站图标
├── assets/                 # 构建产物目录
│   ├── index-*.js          # 应用主逻辑 (Vue/React)
│   ├── index-*.css         # 全局样式表
│   ├── monacoeditorwork/   # Monaco Editor Worker (代码编辑器支持)
│   └── ...                 # 字体与图片资源
└── data/                   # 静态配置数据 (如 i18n)

2. 功能解析

2.1 工作流编辑器 (Workflow Editor)

这是 Web 端的核心功能模块。

节点画布: 基于 HTML5 Canvas 或 SVG（通常使用 X6 或 LogicFlow 等库），允许用户从左侧组件栏拖拽节点到画布。
动态表单: 根据后端 panda_plugins 返回的 Schema（由 @ui 装饰器定义），动态渲染节点的配置面板（输入框、下拉选、代码编辑器）。
连线逻辑: 验证节点间的输入输出类型匹配，禁止非法连接。

2.2 代码编辑体验

Monaco Editor 集成: assets/monacoeditorwork 目录的存在表明前端集成了 VS Code 同款的编辑器核心。
功能: 用于在“代码节点”或“因子公式”中提供 Python 语法高亮、智能提示和错误检查。

2.3 数据可视化

图表库: 集成 ECharts 或 AntV。
场景:
- 回测结果：绘制累计收益率曲线、最大回撤图。
- 实盘监控：实时刷新账户权益和持仓饼图。

2.4 与后端的交互

前端通过 RESTful API 与 panda_server 进行通信：

元数据同步: 启动时请求 /api/plugins 获取最新节点定义。
运行控制: POST /api/workflow/run 提交 DAG 图结构。
日志轮询: 定时拉取 /api/workflow/logs 展示运行进度。

2.5 静态资源构成分析

通过对 src/panda_web/assets/ 目录下的构建产物文件名（Name-Hash.ext）分析，可以清晰地映射出前端的模块划分与功能实现：

核心框架 (Core Framework)
- index-*, main-*: 应用入口与主业务逻辑包，包含 Vue/React 运行时、路由配置与全局状态管理。
- Header-*: 顶部导航栏组件，集成全局设置与视图切换功能。
业务组件 (Feature Components)
- Quantflow-*: 工作流编辑器核心。对应文档 2.1 节，包含画布渲染引擎（X6/LogicFlow）、节点拖拽交互与 DAG 图管理逻辑。
- ChartsView-*: 可视化图表视图。对应文档 2.3 节，封装了 ECharts/AntV，负责回测净值曲线、最大回撤图及实盘实时数据的渲染。
- QuantflowTable-*: 高性能数据表格。用于展示海量交易记录、持仓明细或因子数据预览。
代码编辑器引擎 (Code Editor Engine)
- monacoeditorwork/: Monaco Editor 的 Web Worker 目录。
- codicon.ttf: 编辑器专用图标字体。
- python-*, jsonMode-*, sql-*, yaml-*, javascript-*: 包含 Python、JSON、SQL、YAML 等多种语言的语法高亮与词法分析规则，确保在 Web 端提供类 VS Code 的编写体验。
静态与交互资源 (Static Assets)
- logo-*.png: 品牌标识。
- no-data-*.png, no-use-*.png: 空状态与缺省页插图。
- chat-*.png, avatar-*.png: 用户交互与头像资源。

3. 构建与部署

技术栈: 推测为 Vue 3 + Vite 或 React + Webpack。
部署方式: 后端 FastAPI 通过 StaticFiles 将此目录挂载到 /quantflow 路径，实现前后端同源部署，无需独立配置 Nginx 跨域。