# 前端组件化 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 将把聊天区、消息流和快捷菜单迁移到组件化架构中。