40 lines
2.0 KiB
Markdown
40 lines
2.0 KiB
Markdown
# 前端组件化 Phase 2 – 侧栏与文件面板
|
||
|
||
## 交付内容
|
||
|
||
1. **对话侧栏组件化**
|
||
- 新增 `static/src/components/ConversationSidebar.vue`，集成 Pinia `useConversationStore`，提供对话列表、搜索、新建、复制、删除、加载更多等操作。
|
||
- `useConversationStore`（`static/src/stores/conversation.ts`）负责对话分页、当前对话、调用 `/api/conversations` 系列接口；`App.vue` 显示当前选中对话的概要。
|
||
|
||
2. **左侧文件/面板骨架**
|
||
- `static/src/components/LeftPanel.vue` + `components/atoms/FileNode.vue` 渲染项目文件树，并预留待办/子智能体 Tab。
|
||
- `useFileStore`（`static/src/stores/files.ts`）封装 `/api/files` 加载逻辑并构建递归节点；FileNode 支持展开/收起与快捷下载。
|
||
|
||
3. **页面布局重构**
|
||
- `App.vue` 替换临时占位，组装 `ConversationSidebar + LeftPanel + MainArea` 布局；`base.css` 补充基础样式。
|
||
- `static/index.html` 中的新入口逻辑不变，依旧可通过 `localStorage.useNewFrontend` 切换。
|
||
|
||
4. **实用工具**
|
||
- `static/src/utils/api.ts` 提供统一 fetch 包装，简化 CSRF/错误处理。
|
||
|
||
## 使用说明
|
||
|
||
```bash
|
||
npm install # 如未安装依赖
|
||
npm run build # 生成 static/dist 供 Flask 加载
|
||
# 或 npm run dev 以 watch 方式重建
|
||
```
|
||
|
||
在浏览器执行 `localStorage.setItem('useNewFrontend','1')` 后刷新即可体验组件化侧栏；删除该键即可回退 legacy UI。
|
||
|
||
## 回归清单
|
||
|
||
1. 登录后启用新前端，确认：
|
||
- 对话列表可加载/搜索/分页，新建/复制/删除接口有反馈；
|
||
- 选中某个对话后，主区域显示标题与元数据；
|
||
- `localStorage` 清除后回到旧版 UI。
|
||
2. 左侧面板刷新文件树成功，点击文件的“下载”按钮可触发下载。
|
||
3. `npm run build` 通过（已验证），构建产物位于 `static/dist/assets/`。
|
||
|
||
Phase 3 将把聊天区、消息流和快捷菜单迁移到组件化架构中。
|