agent-Specialization/doc/frontend/phase2_sidebar.md

前端组件化 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/错误处理。

使用说明

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