BossAgents BossAgents

前端重构方案（三栏壳 + 全局可召唤面板）—— 2026-07-24

👤 BossAgents 团队 📅 2026-08-11 👁️ 阅读 28 👍 点赞 0 ☕ 42 分钟阅读

前端重构方案（三栏壳 + 全局可召唤面板）—— 2026-07-24

基于已查证的代码现状（src/ 为真实运行源码，老版 index-vue.html 已删除，见 frontend-current-state-audit_20260723.md）。

目标：界面“以对话为中心、业务/设置可召出”，并支持对话中随时召唤任意业务详情/编辑面板。

一、用户诉求拆解

  1. 默认简洁对话界面（类通用大模型/智能体应用）。
  2. 会话历史。
  3. 业务 / 设置单独打开（不常驻主导航）。
  4. 类 QClaw 左栏：顶部导航 + 底下对话记录。
  5. 【新增】动态召唤面板：业务界面中的“详情/编辑”弹窗，应能在对话界面随时调用、随时弹出；用户创建新对象后，可立即把结果面板弹出来看，不必跳到业务列表去查。

二、现状关键事实（已查证）

  • 默认 / 已是 /ai-workbench（对话界面），AiWorkbench.vue 已有：左侧会话列表（从 messages 实时聚合）、主聊天区、6 大数字员工快捷栏、内联召唤参数面板。
  • AiWorkbench 的会话历史是组件内内存态（messages 为本地 ref），刷新即丢，无独立持久化。
  • 三个详情组件已存在且自包含，但全仓库零引用（沉淀未接线）：
  • src/components/ObjectDetailPanel.vue —— 通用对象详情/编辑面板，props={visible, itemTypeName, itemId}，内部自己拼 AML 向 SCSAI 取数，含编辑保存/刷新/关联跳转。是最关键的复用对象。
  • src/components/PartDetailPanel.vue —— 零件详情（BOM/治理/估值）。
  • src/components/BomDetailModal.vue —— BOM 结构详情（含 AI 分析）。
  • 全局浮层已有先例：GlobalAnySearchModal 挂在 App.vue（），证明“App 根挂全局 Teleport 浮层”模式可行。
  • 创建对象的 itemType+itemId 提取工具已就绪：useCapabilityCreate.js 的 extractItemId(item) / extractItemName(item)。
  • 导航分组配置 src/constants/navGroups.js（5 组约 45 项）可直接复用于“业务壳”二级导航。
  • 45 个业务/系统视图全部存在且经 router 注册（dashboard / product-list / bom-assistant / digital-staff / itemtype-management / rules-templates / llm-config / staff-capabilities 等）——重构必须 100% 保留可用。

三、总体架构：三栏壳 + 面板总线（推荐方案 A 的增强版）

┌──────┬────────────┬──────────────────────────────┐
│ 图标 │  会话历史   │   主区（随模式切换）          │
│ 导航 │  列（对话   │   - chat：ChatView（纯聊天）  │
│ 栏   │    模式时） │   - business：BusinessWork-   │
│(最左)│  （业务/设置│     bench（二级导航+视图）    │
│      │    模式隐藏）│   - settings：SettingsHub     │
└──────┴────────────┴──────────────────────────────┘
        ▲ 任意位置可 openPanel(...) → 全局浮层（详情/编辑）
  • 最左图标栏（IconRail）：上=对话/业务/设置；下=语言/主题/头像/退出。由 shell store 驱动 mode。
  • 中间会话列：仅对话模式显示，复用现有 groupedSessions 逻辑（抽到 useChatSessions）。
  • 主区：按 mode 渲染上面三态之一。
  • 全局面板总线（第四支柱，本方案新增）：任何视图/聊天结果均可 openPanel({kind:'object'|'part'|'bom', itemType, itemId})，由挂在 App 根的 GlobalPanelHost 渲染对应已沉淀面板。

四、待拍板 2 点（影响范围）

  1. 会话持久化：P5 是否做“刷新不丢”（localStorage 或后端）？建议先界面重构、持久化后置可选。
  2. 业务壳导航形态：直接复用 navGroups.js 的 5 组平铺为二级菜单（零新增分类成本）？建议是。

五、实施分期（每期可独立验证、可回退）

  • P0 冻结现状：45 视图清单 + demo 开关（磷化工/Samsung）归属。✅ 已有 audit 文档。
  • P1 脚手架零破坏：建 src/stores/shell.js（mode 状态 + feature-flag）、IconRail.vue、新三栏 App.vue；默认仍走老布局，新壳用 ?shell=v2 或 localStorage 开关并行。验证 pnpm build 通过、45 视图可达。
  • P2 抽会话逻辑：useChatSessions.js + SessionHistoryColumn.vue；AiWorkbench.vue 拆出 ChatView.vue（纯聊天，不再自带侧栏）。
  • P3 业务/设置壳：BusinessWorkbench.vue（头部 + 二级导航复用 navGroups.js + ）；SettingsHub.vue（聚合 LLM/飞书/日志/建模/系统对象/规则/对象类/巡检/数字员工能力/定制中心）。
  • P4 切默认 & 清理：默认 mode=chat；旧常驻侧边栏收进“业务”壳；demo 开关迁到新壳顶栏；旧 App.vue 布局保留为回退路径不删。
  • P5 会话持久化（可选）：messages 提到 store（+localStorage/后端）。
  • P6 全局面板总线（本次新增核心）：见第六节。

六、P6 全局可召唤面板（动态召唤）—— 可行性结论：高，零破坏

可行性依据（已查证）

  1. ObjectDetailPanel / PartDetailPanel / BomDetailModal 已存在且自包含：喂 visible+itemType+itemId 即自行取数带编辑，当前零引用 → 纯新增接线，不破坏任何现有视图。
  2. 全局浮层先例 GlobalAnySearchModal 已挂在 App.vue → 模式可复制。
  3. 创建对象后 itemType+itemId 提取函数已在 useCapabilityCreate.js（extractItemId/extractItemName）就绪。

实施要点

  • 新建 src/stores/panelBus.js（或 composables/usePanelBus.js）：单例 reactive 状态 activePanel = { kind, itemType, itemId, title } + openPanel(payload) / closePanel()。
  • 新建 src/components/layout/GlobalPanelHost.vue：挂在 App.vue 根（与 GlobalAnySearchModal 并列），监听 panelBus.activePanel，按 kind 渲染 ObjectDetailPanel / PartDetailPanel / BomDetailModal，透传 visible/itemTypeName/itemId。
  • 接线点（新增，不改现有逻辑）：
  • 聊天“创建对象成功”落点：在能力执行完成、拿到 itemType+itemId 后调用 openPanel({kind: mapType(itemType), itemType, itemId})；用户可“立即看到刚创建的对象”。
  • 业务列表行点击：复用同一条总线（如 ProductList 行 → openPanel({kind:'part',...})），统一体验。
  • 数字员工执行结果：若结果含 createdItems，批量 openPanel 或列表内联召唤。
  • 不改动：三个详情组件的内部取数/编辑逻辑不动；45 个视图的现有打开方式保留（面板总线是“额外通道”，不是替换）。

验证

  • 在对话中触发一次“创建 Part”→ 断言自动弹出 PartDetailPanel 且数据正确。
  • 在业务列表点开任意对象 → 断言走面板总线弹出，且编辑保存有效。
  • pnpm build 通过；45 视图仍全可达。

七、关键文件索引

  • 布局外壳：src/App.vue（将改三栏 + 挂 GlobalPanelHost）
  • 导航配置：src/constants/navGroups.js
  • 路由：src/router/index.js（45 视图已注册，不动）
  • 对话界面：src/views/AiWorkbench.vue（将拆 ChatView.vue）
  • 已沉淀详情组件（复用，零改）：src/components/ObjectDetailPanel.vue、PartDetailPanel.vue、BomDetailModal.vue
  • 全局浮层先例：src/components/anysearch/GlobalAnySearchModal.vue
  • 创建结果提取：src/composables/useCapabilityCreate.js（extractItemId/extractItemName）
  • 新增：src/stores/shell.js、src/stores/panelBus.js、src/components/layout/IconRail.vue、SessionHistoryColumn.vue、GlobalPanelHost.vue、src/views/BusinessWorkbench.vue、SettingsHub.vue、src/composables/useChatSessions.js
← 返回案例列表
分享：
🤖 Try Now →
🤖
🎁