扩展详情与知识库评估工作台统一
状态:archived 类型:feature Owner:web/src/components/shared/ExtensionDetailLayout.vue
问题
Skill、MCP 与知识库详情分别维护标题栏、Tab、内容宽度和响应式规则,同类页面缺少稳定的展示边界。Skill 的文件、范围与依赖配置层级分散;知识库将思维导图、RAG 评估和评估基准全部作为一级 Tab,基准题目与逐题结果又依赖覆盖应用的浮层,用户无法通过稳定 URL 刷新、分享或返回当前对象。
共享详情布局位于 components/extensions/,知识库复用后目录不再表达真实边界。只读连接器不支持文档管理,却仍可进入以文档能力为核心的详情页。
决策
将详情布局收敛到 web/src/components/shared/ExtensionDetailLayout.vue。该组件只拥有全高页面、breadcrumb、actions、受控 Tabs、loading、empty、内容宽度和响应式装配,不读取业务数据、不判断权限、不发起 API。标准详情内容使用 768px 阅读宽度;知识库 panel 由调用方保持 100% 可用宽度。操作按钮颜色继续由 web/src/assets/css/extensions.less 持有,避免出现第二个视觉 Owner。
Skill 与 MCP 使用同一布局。Skill 将生效范围和运行依赖合并到“配置”页,但保留两个既有 API 的独立保存边界;项目结构默认隐藏,展开后作为唯一有完整边界的辅助区域。文件预览隐藏通用 header,由项目结构操作区调用 AgentFilePreview.startEditing,保存和取消仍由预览组件持有。MCP 信息、编辑和工具列表移除重复外层卡片,测试连接、编辑和工具开关仍由 McpDetailView.vue 持有。
知识库详情复用同一布局,并以 section query 保存当前分区。思维导图从一级 Tab 移到 FileTable 工具栏,通过大尺寸弹窗装配现有 MindMapSection;组件卸载时取消延迟渲染、销毁实例并断开观察器。只读连接器卡片不进入浏览详情;有管理权限时,列表菜单使用 ?action=edit 打开现有配置弹窗,弹窗关闭后返回知识库列表。
知识库二级详情只保留一个“评估”Tab,由 KnowledgeEvaluationWorkspace.vue 依次展示“评估基准”和“近期评估”,并分别提供创建入口。基准进入独立路由 /extensions/knowledgebase/:kbId/evaluation/:datasetId;EvaluationBenchmarkDetailView.vue 复用共享布局,提供“题目”和“评估结果”两个 Tab。view 保存三级 Tab,run 保存测试选择,近期评估直接进入对应基准的结果视图。
题目与结果继续使用现有分页接口。题目关键词和标注只筛选当前页,界面明确显示该范围;结果类型在服务端分页前筛选。结果类型协议由评估路由与服务持有,支持全部结果、答案评判错误、答案评判错误或 R@10 < 1,并精确保留原 error_only 查询参数的筛选语义;新旧参数同时出现时拒绝请求。三级页只展示当前基准关联运行;基准已删除的历史运行保留在二级列表,但不提供无对象详情跳转。运行中记录可进入三级页查看部分结果,页面每 3 秒串行静默刷新当前所选运行状态与当前分页;所选运行进入终态时,终态结果页成功刷新后停止轮询,切换到既有终态运行或组件卸载时立即停止。表格在自身边界内滚动,换行按钮控制单行或自然换行,检索指标使用两位小数和 R@k、P@k 简写。
替代方案
- 为 Skill、MCP 和知识库分别保留专用布局:改动局部,但会继续复制 header、Tabs、loading 和响应式规则,不采用。
- 让共享布局生成业务表单或合并保存:调用代码更少,但会耦合业务 API、权限和非原子保存语义,不采用。
- 保留思维导图、RAG 评估与评估基准三个一级入口:无需调整导航,但不能表达文件辅助视图和“基准拥有题目及结果”的对象层级,不采用。
- 使用抽屉或全屏 Modal 展示基准详情:可以复用旧实现,但刷新、返回、深链接和三级 breadcrumb 不稳定,不采用。
- 新增评估总览聚合接口:可以减少一次列表请求,但现有数据集和运行接口足以表达页面,当前没有扩大协议的收益。
后果
共享组件成为详情展示契约的 Owner,各调用方继续持有业务状态、权限、API 和持久化语义。Skill、MCP 与知识库共享导航和响应式行为,但知识库宽内容与标准阅读宽度仍由调用方显式区分。配置页减少一级切换,同时避免将两个独立保存操作伪装为原子成功。
知识库评估形成“总览 → 基准 → 题目/结果”的稳定层级。二级与三级状态分别写入 section、view 和 run,不会与扩展列表的 tab query 冲突。二级页仍读取知识库级基准和运行列表,并只展示最近八条运行;数据规模显著增长时,应由现有 API Owner 增加服务端分页。
只读连接器继续保留列表级配置、复制和删除能力,但没有无效浏览入口。思维导图只在文件管理上下文中出现,关闭弹窗后不继续渲染或反馈。
验证
| 验收主张 | 失败面 | 语义 Owner | 直接证据 | 负向案例 | 当前结果 |
|---|---|---|---|---|---|
| Skill、MCP 与知识库复用同一受控详情布局,标准内容和知识库宽内容边界明确 | 恢复独立 header/Tab、丢失 activeKey 转发或知识库被限制到 768px | 共享布局及三个调用方 | 布局 runtime/source unit、前端 build、宽窄屏页面 | 删除事件转发、动态 panel 或知识库宽度规则后测试失败 | Passed |
| Skill 配置、项目结构和文件编辑保留既有保存与预览语义 | 合并保存出现部分成功假象,或隐藏预览 header 后无法编辑 | SkillDetailView.vue、AgentFilePreview.vue | Skill 布局 unit、真实编辑交互 | 删除独立保存或 startEditing 装配后失败 | Passed |
| 思维导图只从文件工具栏打开,卸载后停止渲染;只读连接器不能进入无效详情 | 导图仍占一级 Tab、关闭后继续任务,或直接 URL 停留在空详情 | FileTable.vue、MindMapSection.vue、知识库列表与详情 | 知识库布局 unit、真实弹窗与路由检查 | 恢复 mindmap Tab、删除卸载守卫或只读回跳后失败 | Passed;真实 connector 数据未验证 |
| 评估二级页统一展示基准与近期运行,基准三级页可深链接、只读取关联结果并刷新运行中记录 | 两个一级评估 Tab、恢复浮层、混入其他基准运行、运行状态永久停滞或卸载后继续轮询 | 评估工作台、三级页与路由 | 评估 source unit;真实基准及多运行切换待补 | 恢复 benchmarks Tab、删除 dataset 过滤、串行轮询、迟到响应守卫或卸载清理后 source unit 失败 | Source unit passed;真实运行中页面未验证 |
| 三种结果筛选在服务端分页前执行并返回准确总数 | 前端只过滤当前页,或答案错误与低召回语义混淆 | 评估 router/service | 后端筛选分页 unit 与非法值负向测试 | 对同一结果集切换三种筛选并核对记录与总数 | Passed;真实 HTTP integration 未运行 |
| 改动符合 token、暗色、响应式、Lint、unit、build 与工程契约 | 硬编码主题、页面横向溢出、模板或决策链接失效 | web/、工程契约脚本 | 浅/深色与 375px 页面;Lint、153 个前端 Unit、1597 个后端 Unit、前端与文档 build、工程契约 | 任一 gate 或页面检查失败即拒绝交付 | Passed |