# 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` | 执行异常 |