panda
573ce012e7
- README.md: complete overhaul — project structure, architecture, env vars, test listing, Java/JDBC pipeline - CLAUDE.md: fix field count (~28→~40), migrate Streamlit references to Vue 3, update known issues - frontend/README.md: add missing StreamingMessage.vue and NodeProgress.vue components
55 lines
1.8 KiB
Markdown
55 lines
1.8 KiB
Markdown
# JRXML Agent 前端
|
||
|
||
Vue 3 + TypeScript + Vite + Pinia — JRXML 报表生成代理的 Web UI。
|
||
|
||
## 技术栈
|
||
|
||
- **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 消息列表渲染
|
||
│ ├── ProcessSection.vue 处理过程折叠区（<details>/<summary>）
|
||
│ ├── StreamingMessage.vue 流式消息显示
|
||
│ ├── NodeProgress.vue 节点进度指示器
|
||
│ ├── 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` | 执行异常 |
|