用途:说明 OrcaQ 主侧边栏(Primary Sidebar)的标签页机制,指导如何添加、更新和移除侧边栏标签。
架构:侧边栏由 Pinia store 中单一 active 标签值驱动。流程为 ActivityBarItemType 枚举(标签身份)→ useActivityBarStore.activityActive(当前激活标签,持久化)→ PrimarySideBar.vue(监听并渲染对应组件)→ Management***.vue(实际面板内容,被 KeepAlive 包裹)。左侧 Activity Bar 调用 setActivityActive(type),侧边栏响应并切换面板,所有面板用 KeepAlive 保留状态。
关键文件:标签枚举与 store 位于 core/stores/useActivityBarStore.ts;侧边栏外壳位于 components/modules/app-shell/primary-side-bar/components/PrimarySideBar.vue;公共 API 位于同目录 index.ts;管理面板位于 components/modules/management/(含 Explorer、Schemas、ERD Diagram、Users & Roles、Export、Agent 等面板);共享头部组件为 ManagementSidebarHeader.vue。
添加新标签步骤:一、在 useActivityBarStore.ts 的 ActivityBarItemType 枚举中加入新值;二、在 components/modules/management/ 下创建同名文件夹,含 index.ts、入口 .vue 及可选的 components、hooks、services;三、在 management/index.ts 中重导出该模块;四、在 PrimarySideBar.vue 中以 #components 导入该组件,并在 watch 中增加对应分支(watch 使用 immediate: true);五、在 Activity Bar 图标区添加按钮,调用 activityStore.setActivityActive(新枚举值)。
更新现有面板:面板位于 components/modules/management/<tab-name>/Management<Tab>.vue;业务逻辑放入该目录 hooks/ 下的 hook;静态结构放入 components/;需持久化的 UI 状态(如展开节点、滚动位置)放入 useActivityBarStore。
共享头部 ManagementSidebarHeader 的 props 包括 title(必填)、showConnection、showSchema、workspaceId(showConnection 为 true 时必填)、showSearch、searchPlaceholder;支持 v-model:search 双向搜索绑定与 #actions 插槽。
程序化控制:导入 useActivityBarStore 与 ActivityBarItemType,调用 setActivityActive 切换标签,读取 activityActive 判断当前标签;侧边栏可见性由 appConfigStore.layoutSize[0] 控制,应使用 useAppConfigStore 的 onToggleActivityBarPanel() 开关,不要直接修改 layoutSize。
约束:PrimarySideBar.vue 是纯切换器,不得加入业务逻辑;当前组件必须使用 shallowRef;必须用 KeepAlive 包裹动态组件以保留滚动位置与展开状态;持久化树状态放入 useActivityBarStore;PrimarySideBar.vue 使用 #components 自动导入;每个子模块须有自身 index.ts 并从 management/index.ts 重导出。