fix: unify capability settings navigation
Skills and MCP previously occupied separate top-level settings categories. They now share one Capabilities and tools category with accessible horizontal tabs, while the unimplemented tool environment remains hidden until its settings are usable. Prevent nested PageTabs wrappers from collapsing to zero height in scrollable Flex layouts, add a CSS regression guard, and document the shared rule plus the planned local Node.js and Python environment. Release note: 设置中心将 Skills 和 MCP 合并到“能力与工具”,并修复水平页签可能被压缩而不可见的问题;尚未实现的工具执行环境暂不显示。
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# 本机工具环境 UI 设计
|
||||
# 工具执行环境 UI 设计
|
||||
|
||||
## 文档信息
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
| 状态 | 计划 |
|
||||
| 版本 | 0.1 |
|
||||
| 日期 | 2026-09-01 |
|
||||
| 关联 PRD | [本机工具环境 PRD](./prd.md) |
|
||||
| 功能逻辑 | [本机工具环境功能逻辑设计](./logic-design.md) |
|
||||
| 关联 PRD | [工具执行环境 PRD](./prd.md) |
|
||||
| 功能逻辑 | [工具执行环境功能逻辑设计](./logic-design.md) |
|
||||
| 全局规范 | [GoodBuddy 统一界面设计系统](../../../UI-DESIGN.md) |
|
||||
|
||||
本文只定义本功能的界面结构和交互。颜色、字体、间距、通知、Switch、焦点和响应式行为以
|
||||
@@ -16,36 +16,122 @@
|
||||
|
||||
## 1. 信息架构
|
||||
|
||||
“本机工具环境”位于 `Agent Runtime` 设置分类,处于默认工作区之后、具体 Runtime 高级
|
||||
设置之前。它是本机 OpenCode、Continue、DeepSeek Harness 和 stdio MCP 的共享设置,
|
||||
不放入任一 Runtime 专属卡片。
|
||||
设置中心把现有 `Skills`、`MCP` 一级分类和新增的工具执行环境合并为一个“能力与工具”
|
||||
一级分类。内容区使用三个水平 Tab:
|
||||
|
||||
区块顶部持续显示:
|
||||
```text
|
||||
[ Skills ] [ MCP ] [ 工具执行环境 ]
|
||||
```
|
||||
|
||||
一级分类副标题固定为:
|
||||
|
||||
> 管理 Skills、MCP 和本机工具执行环境
|
||||
|
||||
“工具执行环境”不放入任一 Runtime 专属卡片。该 Tab 顶部持续显示:
|
||||
|
||||
> 用于新启动的本机 Runtime 和 stdio MCP;不修改系统环境,也不应用于普通终端或远程主机。
|
||||
|
||||
### 1.1 分阶段显示
|
||||
|
||||
第一阶段只实现统一菜单和现有能力页签:
|
||||
|
||||
```text
|
||||
[ Skills ] [ MCP ]
|
||||
```
|
||||
|
||||
此阶段不显示“工具执行环境”禁用 Tab、空页面或“开发中”占位。Node.js、Python 和工具下载源
|
||||
真实可用后,再按本设计追加第三个水平 Tab。
|
||||
|
||||
“能力与工具”的页签条位于独立滚动的 Flex 设置内容区,直接包装层必须保持
|
||||
`flex: 0 0 auto`,避免被下方长列表压缩到零高度。该规则同时服从根
|
||||
[`UI-DESIGN.md`](../../../UI-DESIGN.md) 的 `PageTabs` 规范。
|
||||
|
||||
## 2. 页面结构
|
||||
|
||||
```text
|
||||
本机工具环境
|
||||
范围说明
|
||||
能力与工具
|
||||
管理 Skills、MCP 和本机工具执行环境
|
||||
|
||||
Node.js 卡片
|
||||
来源
|
||||
当前状态
|
||||
自定义候选或路径操作
|
||||
测试环境
|
||||
[ Skills ] [ MCP ] [ 工具执行环境 ]
|
||||
|
||||
Python 卡片
|
||||
来源
|
||||
当前状态
|
||||
安装/更新/删除或自定义路径操作
|
||||
测试环境
|
||||
Skills 面板
|
||||
现有 Skill 启停、导入、状态和 Runtime 分配
|
||||
|
||||
MCP 面板
|
||||
现有 MCP 配置、凭据、状态和 Runtime 分配
|
||||
[内置 MCP] [直连模型] [自定义 MCP] [电脑控制]
|
||||
|
||||
工具执行环境面板
|
||||
范围说明
|
||||
|
||||
工具下载源
|
||||
原生地址 / OSS 镜像
|
||||
|
||||
Node.js 卡片
|
||||
来源
|
||||
当前状态
|
||||
自定义候选或路径操作
|
||||
测试环境
|
||||
|
||||
Python 卡片
|
||||
来源
|
||||
当前状态
|
||||
安装/更新/删除或自定义路径操作
|
||||
测试环境
|
||||
```
|
||||
|
||||
卡片顺序固定为 Node.js、Python。页面不增加二级页签。
|
||||
工具执行环境面板内的区块顺序固定为工具下载源、Node.js、Python,不再增加页签。
|
||||
|
||||
## 3. 来源选择
|
||||
## 3. 三个水平 Tab
|
||||
|
||||
外层页签使用共享 `PageTabs` 的 `segmented` 视觉变体,不使用页面自定义 Tab 或普通
|
||||
`SegmentedControl`:
|
||||
|
||||
```tsx
|
||||
<PageTabs
|
||||
ariaLabel="能力与工具设置"
|
||||
idPrefix="capabilities-and-tools"
|
||||
tabs={[
|
||||
{ id: 'skills', label: 'Skills' },
|
||||
{ id: 'mcp', label: 'MCP' },
|
||||
{ id: 'tool-environment', label: '工具执行环境' }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
交互规则:
|
||||
|
||||
- 普通入口默认打开 `Skills`。
|
||||
- 现有 Skills/MCP 应用内入口分别定位到对应水平 Tab。
|
||||
- 切换外层 Tab 不保存为产品设置,不修改任何 Skill、MCP 或工具环境值。
|
||||
- 三个面板在同一次设置面板会话中保留编辑状态;切换后返回不得重置草稿。
|
||||
- MCP 原有四个内层页签继续保留,外层和内层使用不同的 `aria-label` 与 `idPrefix`。
|
||||
- 窄屏时外层页签保持单行并允许水平滚动,不折成多行,不替换为下拉框。
|
||||
|
||||
## 4. 工具下载源
|
||||
|
||||
使用原生 Radio Group:
|
||||
|
||||
```text
|
||||
工具下载源
|
||||
选择 GoodBuddy 受管 Runtime 和工具链的下载通道。
|
||||
|
||||
● 原生地址(默认)
|
||||
从各工件的固定上游地址下载。
|
||||
|
||||
○ OSS 镜像
|
||||
从 GoodBuddy OSS 下载相同工件。
|
||||
```
|
||||
|
||||
邻近说明:
|
||||
|
||||
> 下载开始后会固定本次来源;失败时不会自动切换。该设置不影响模型、应用更新、Agent、
|
||||
> pip/npm 依赖或用户配置的网络地址。
|
||||
|
||||
切换设置即时保存,不触发下载,不取消活动任务。成功通过应用通知反馈;保存失败恢复最后
|
||||
确认值并在 Radio Group 附近显示错误。
|
||||
|
||||
## 5. 工具环境来源选择
|
||||
|
||||
每张卡片使用原生单选语义,只提供:
|
||||
|
||||
@@ -64,7 +150,7 @@ Python 3.13.2 · C:\Python313\python.exe
|
||||
|
||||
版本和绝对路径不能只放在 Tooltip 中。
|
||||
|
||||
## 4. Node.js 卡片
|
||||
## 6. Node.js 卡片
|
||||
|
||||
```text
|
||||
Node.js
|
||||
@@ -84,7 +170,7 @@ Node.js
|
||||
Node 成功代替整套组合成功。找不到配套 npm/npx 时,自定义 Node 可以保存,但状态显示
|
||||
“Node.js 已就绪,npm/npx 不可用”。
|
||||
|
||||
## 5. Python 卡片
|
||||
## 7. Python 卡片
|
||||
|
||||
托管 Python 未安装:
|
||||
|
||||
@@ -121,7 +207,7 @@ Python
|
||||
> 删除后,依赖托管 Python 的本机 SKILL 和 stdio MCP 将不可用。系统 Python、自定义环境
|
||||
> 和项目文件不会被删除。
|
||||
|
||||
## 6. 两层状态
|
||||
## 8. 两层状态
|
||||
|
||||
每张工具卡展示工具环境状态:
|
||||
|
||||
@@ -142,7 +228,7 @@ SKILL/MCP 的能力详情展示能力依赖状态:
|
||||
|
||||
不得把工具卡的“已就绪”复用为某个 SKILL 或 MCP 的“完全可用”。
|
||||
|
||||
## 7. 生效与刷新
|
||||
## 9. 生效与刷新
|
||||
|
||||
保存后在卡片中持续显示:
|
||||
|
||||
@@ -151,7 +237,7 @@ SKILL/MCP 的能力详情展示能力依赖状态:
|
||||
设置保存成功、安装成功、删除成功和重新检测成功使用应用通知。版本、路径、安装进度和
|
||||
阻塞错误留在卡片内,不同时显示重复通知。
|
||||
|
||||
## 8. 错误与恢复
|
||||
## 10. 错误与恢复
|
||||
|
||||
- 自定义路径失效:保留路径和来源选择,显示“重新检测”和“选择其他文件”。
|
||||
- 下载失败:保留已验证旧安装和安装按钮。
|
||||
@@ -159,9 +245,12 @@ SKILL/MCP 的能力详情展示能力依赖状态:
|
||||
- 取消安装:恢复“尚未安装”或原已安装版本。
|
||||
- 字段错误:就地关联到选择控件。
|
||||
- Runtime/MCP 已运行:不显示为错误,只说明新进程生效。
|
||||
- 工具下载源失败:保留当前选择,显示实际来源和重试,不提示自动回退。
|
||||
|
||||
## 9. 无障碍与键盘
|
||||
## 11. 无障碍与键盘
|
||||
|
||||
- 外层使用 `tablist`/`tab`/`tabpanel`,支持左右方向键、Home、End 和 roving focus。
|
||||
- 每个外层 `tab` 通过共享组件准确关联自己的 `tabpanel`。
|
||||
- 来源使用 `radiogroup`/`radio` 语义。
|
||||
- 安装、测试、更新、删除和文件选择使用语义按钮。
|
||||
- 下载进度使用可命名的 `progressbar`。
|
||||
@@ -171,17 +260,23 @@ SKILL/MCP 的能力详情展示能力依赖状态:
|
||||
- 对话框关闭后焦点回到触发操作。
|
||||
- 窄屏时卡片操作换行,不压缩版本和路径到不可读宽度。
|
||||
|
||||
## 10. 文案词汇
|
||||
## 12. 文案词汇
|
||||
|
||||
固定使用:
|
||||
|
||||
- 本机工具环境
|
||||
- 能力与工具
|
||||
- Skills
|
||||
- MCP
|
||||
- 工具执行环境
|
||||
- GoodBuddy 托管
|
||||
- 自定义环境
|
||||
- 工具环境已就绪
|
||||
- 能力依赖已验证
|
||||
- 新启动的本机 Runtime 和 stdio MCP
|
||||
- 不应用于远程主机
|
||||
- 工具下载源
|
||||
- 原生地址
|
||||
- OSS 镜像
|
||||
|
||||
不使用:
|
||||
|
||||
@@ -190,3 +285,4 @@ SKILL/MCP 的能力详情展示能力依赖状态:
|
||||
- 内置开发机
|
||||
- 全局 Python
|
||||
- 远程托管环境
|
||||
- 开发环境
|
||||
|
||||
Reference in New Issue
Block a user