2026-05-24 08:55:38 +08:00
|
|
|
|
# JRXML Agent 前端
|
2026-05-21 20:04:27 +08:00
|
|
|
|
|
2026-05-24 08:55:38 +08:00
|
|
|
|
Vue 3 + TypeScript + Vite + Pinia — JRXML 报表生成代理的 Web UI。
|
2026-05-21 20:04:27 +08:00
|
|
|
|
|
2026-05-24 08:55:38 +08:00
|
|
|
|
## 技术栈
|
|
|
|
|
|
|
|
|
|
|
|
- **Vue 3** (Composition API + `<script setup>`)
|
|
|
|
|
|
- **TypeScript** 6.x
|
|
|
|
|
|
- **Vite** 8.x
|
|
|
|
|
|
- **Pinia** 3.x (状态管理)
|
|
|
|
|
|
- **SSE** (Server-Sent Events) 流式响应
|
|
|
|
|
|
|
|
|
|
|
|
## 组件结构
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
src/
|
|
|
|
|
|
├── api/client.ts SSE 客户端 + fetch 封装
|
|
|
|
|
|
├── stores/
|
|
|
|
|
|
│ ├── chat.ts Pinia: 消息/流式/节点进度/文件
|
|
|
|
|
|
│ ├── session.ts Pinia: 会话 CRUD
|
|
|
|
|
|
│ └── kb.ts Pinia: 多租户知识库管理
|
|
|
|
|
|
├── components/
|
|
|
|
|
|
│ ├── Sidebar.vue 会话列表 + 下载 + 历史版本
|
|
|
|
|
|
│ ├── ChatMessages.vue 消息列表渲染
|
2026-05-24 22:46:48 +08:00
|
|
|
|
│ ├── ProcessSection.vue 处理过程折叠区（<details>/<summary>）
|
|
|
|
|
|
│ ├── StreamingMessage.vue 流式消息显示
|
|
|
|
|
|
│ ├── NodeProgress.vue 节点进度指示器
|
2026-05-24 08:55:38 +08:00
|
|
|
|
│ ├── UnifiedInput.vue 统一输入框（文本+文件拖拽/粘贴）
|
|
|
|
|
|
│ ├── SummaryCard.vue 结果摘要卡片
|
|
|
|
|
|
│ ├── KbSelector.vue KB 下拉选择器
|
|
|
|
|
|
│ └── KbManager.vue KB 管理面板（创建/上传/构建/删除）
|
|
|
|
|
|
└── utils/format.ts 工具函数
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 开发
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm run dev # 启动开发服务器 (localhost:5173)
|
|
|
|
|
|
npm run build # 生产构建
|
|
|
|
|
|
npx playwright test # E2E 测试
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## SSE 事件流
|
|
|
|
|
|
|
|
|
|
|
|
前端通过 `api.chat()` 发起 POST 请求，后端返回 `text/event-stream`：
|
|
|
|
|
|
|
|
|
|
|
|
| 事件 | 说明 |
|
|
|
|
|
|
|------|------|
|
|
|
|
|
|
| `node_start` | 节点开始执行（含 node/label/step_index） |
|
|
|
|
|
|
| `node_complete` | 节点执行完成（含 detail） |
|
|
|
|
|
|
| `stream_token` | LLM 逐字输出 |
|
|
|
|
|
|
| `agent_complete` | 全图执行完成（含 intent/status/jrxml_length/error 等） |
|
|
|
|
|
|
| `agent_error` | 执行异常 |
|
