前端现状核实（2026-07-23 23:16 查证，规划前置）

目的：在规划"界面优化"前，先把真实运行的前端搞清楚。本文档基于代码实际查证，纠正了早期基于老版 index-vue.html 的误判。

一、技术栈真相（重要更正）

| 项 | 真实情况 |

|---|---|

| 默认 / 加载哪个界面 | 现代 Vite 版：dist/index.html → 引用 /assets/index-mclj9IVm.js 等真实构建产物（dist/assets/ 共 180 文件，齐全可用） |

| 真实可维护源码位置 | src/ —— Vue 3 + Vite + Vue Router(hash) + Pinia，80+ 视图、200+ 组件/composables |

| index-vue.html 是什么 | 老版本回退，仅 /old 或 /legacy 访问；其依赖的 frontend/app.js(14776行) 与现代版 src/ 并存且互不相关 |

| frontend/ 目录 | 遗留死代码区（除 i18n.js 被 src/App.vue 复用外，其余不该再动） |

| 服务器版本选择 | server.js：/ 与 /modern 先试 dist/index.html；/old /legacy 才用 index-vue.html |

结论：规划与改动应基于 src/（Vite 工程），而非 frontend/index-vue.html（老版全局构建）。

二、布局现状（src/App.vue）

登录层 → main-layout：

• sidebar 侧边栏（200px，可折叠，折叠后 56px 图标态）
• 5 个导航分组（src/constants/navGroups.js）：

1. AI智能体（ai-workbench / digital-staff / anysearch / content-center / help-center）
2. 定制中心（customization-center）
3. 业务（dashboard / product-list / bom-assistant / process-management / private-library / change-management / vendor / customer / order / project / inventory / quality / document-center / chipwise-engine / file-business / workflow / itemtype-management，共 17 项）
4. 数据资产（industrial-asset-overview / data-scattered / metadata-collection / relation-graph / process-spec-studio / data-asset-dashboard / data-asset-platform / process-optimization / cross-industry-validation / vision-closing，共 10 项）
5. 系统（modeling-center / system-objects / rules-templates / inspection-history / staff-capabilities / llm-config / feishu-config / system-log，共 8 项）

• 合计约 45 个导航项，业务/数据资产占绝大多数。
• content-wrapper（顶栏 + router-view）：
• 顶栏：品牌 + 面包屑 + Samsung/磷化工 Demo 开关 + 语言切换 + 主题切换 + 连接状态 + 头像 + 导入导出 + 退出。
• 右下角悬浮 AI 助手按钮（⚡，点击跳 /ai-workbench）。
• 另有全局 AnySearch 模态框、全局导入导出、Onboarding 引导。

三、默认入口现状（关键发现）

• src/router/index.js：path: '/' → redirect: '/ai-workbench'。
• src/App.vue handleLogin / handleRegister 成功后均 router.push('/ai-workbench')。
• 因此现状已经是"默认进入对话界面" —— src/views/AiWorkbench.vue（3205 行）。

AiWorkbench.vue 已具备的能力（无需从零造）

• 左侧会话列表（session-sidebar）：sessions 按 source（feishu / web）分组，显示条数/时间，可切换/新建。
• 主聊天区：Tab 切换（对话 / 日志 / 技能 / Integration）、聊天头部、清空、员工在线数。
• 快捷员工工具栏（quick-staff-bar）：一键召唤 6 大数字员工。
• 内联召唤参数面板（summon-panel）：替代 prompt()，支持意图输入 + 动态参数表单。
• 对话驱动执行流（确认/取消）能力已存在。

四、用户诉求 vs 现状差距

| 用户诉求 | 现状 |

|---|---|

| 简洁的对话界面（类通用大模型/智能体应用） | ✅ 已有（/ai-workbench 即默认入口，会话列表+聊天区+快捷员工） |

| 会话历史 | ✅ 已有（session 列表，按飞书/网页分组；持久化机制待查） |

| 业务 / 设置单独打开（不常驻主导航） | ⚠️ 现状是45 项巨型业务侧边栏常驻全展开，AI 只是其中一项 |

| 类 QClaw 左栏：顶部导航 + 底下对话记录 | ❌ 现状是"传统侧边栏分组导航 + 内容区"，AI 对话被埋在导航体系里 |

| 默认直接进入对话、按钮唤出业务/设置 | ⚠️ 默认确实进对话，但布局仍是"侧边栏主导"，没有"对话为主、业务为从"的信息架构 |

核心判断：问题不是没有对话界面，而是信息架构——整个产品被一个 45 项的业务/数据/系统侧边栏主导，AI 对话只是其中一个视图，不够"干净/以对话为中心"。要做的是信息架构重构（对话为主、业务/设置可召出），而非重建聊天能力（聊天引擎已存在且较完整）。

五、规划前需确认的开放问题（待用户拍板）

1. 采用哪套架构？

• A. 类 QClaw 左栏双态：窄左栏（顶部品牌/对话/业务/设置 4 图标 + 底部会话历史列表），主区默认对话、可切"业务/设置"全屏承载现有 45 视图。
• B. 双窗口/双路由：默认全屏纯净对话；按钮新开传统界面（现有侧边栏布局整体作为"工作台"）。

1. 会话历史持久化：复用现有 AiWorkbench session 机制（持久化方式待查，可能在 localStorage 或后端），还是需要接服务端？
2. 现有 45 个业务视图必须 100% 保留可用（客户重点在 200 万资产库 + 六大数字员工演示），重构不能破坏它们——方案应"加壳不改视图"。
3. frontend/ 遗留老版（index-vue.html + app.js）是否还服务于某些入口？需确认能否在重构后废弃，避免双前端长期并存。

六、关键文件索引

• 布局外壳：src/App.vue
• 导航配置：src/constants/navGroups.js
• 路由：src/router/index.js
• 默认对话界面：src/views/AiWorkbench.vue（含会话/session/多员工召唤）
• 数字员工页：src/views/DigitalStaff.vue、src/components/ai/AiStaffPanel.vue、src/components/ai/AiCapabilityBar.vue
• 现代版入口 HTML：dist/index.html（构建产物）；源码入口 src/main.js
• 老版（勿改动基准）：index-vue.html、frontend/app.js（除非确认废弃）