mcpField
A
agent-sessions-layout

agent-sessions-layout

github.com/microsoft设计与 UI194.4k911 次安装今天更新
代码仓库

关于 agent-sessions-layout

为修改 Agents 工作台布局的贡献者提供规范,强调先阅读并同步更新权威布局说明,并遵循结构约定,通过构建和行为检查验证改动。

主要功能

  1. 01要求先阅读布局规范
  2. 02保持 LAYOUT.md 与代码同步
  3. 03规定布局和组件约定
  4. 04列出关键实现文件
  5. 05提供构建与行为检查

适用场景

  1. 01规划 Agents 工作台布局改动
  2. 02按项目规则审查布局贡献
  3. 03验证可见性切换和模态编辑器行为

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/microsoft/vscode --skill agent-sessions-layout

安装后在 Claude Code 中输入/agent-sessions-layout确认已加载。

详细介绍

处理 Agents 工作台布局时,请始终遵循以下指南:

1. 先阅读规范

Agents 布局的权威规范位于:

src/vs/sessions/LAYOUT.md

在修改布局代码之前,请先阅读并理解当前规范。其中定义了:

  • 固定的布局结构(网格树、部件位置、默认大小)
  • 包含和排除的部件及其默认可见性
  • 标题栏配置和自定义菜单 ID
  • 编辑器模态叠加层的行为和尺寸
  • 部件可见性 API 和事件
  • Agent 会话部件类和存储键
  • 工作台扩展和生命周期
  • CSS 类和文件结构

2. 保持规范同步

如果修改布局实现,必须更新 LAYOUT.md,以反映这些更改。规范应始终与代码保持一致,包括:

  • 添加或移除部件,或更改其位置
  • 更改默认可见性或尺寸
  • 添加新操作、菜单或扩展
  • 修改网格结构
  • 更改标题栏配置
  • 添加新的 CSS 类或更改文件结构

更新 LAYOUT.md 底部的修订历史表格,添加一条带日期的记录来说明更改内容。

3. 实现原则

提出或实现更改时,请遵循规范中的以下规则:

  1. 保持固定位置 — 不要添加基于设置的位置自定义功能
  2. 面板必须横跨右侧区域的宽度 — 网格结构将面板放在仅位于聊天栏和辅助栏下方的位置
  3. 侧边栏横跨整个高度 — 侧边栏位于主内容分支中,从顶部延伸到底部
  4. 新部件放在右侧区域 — 任何新部件都应添加到与聊天栏和辅助栏并列的水平分支中
  5. 保留空操作方法 — 不支持的功能(禅模式、居中布局等)应继续保持空操作,不要抛出错误
  6. 处理窗格组合项的生命周期 — 隐藏或显示部件时,管理关联的窗格组合项
  7. 使用 Agent 会话部件 — 新部件功能应放在 Agent 会话部件类(SidebarPart、AuxiliaryBarPart、PanelPart、ChatBarPart、ProjectBarPart)中,而不是标准工作台部件中
  8. 使用独立的存储键 — Agent 会话部件使用自己的存储键(前缀为 workbench.agentsession. 或 workbench.chatbar.),以避免与常规工作台状态冲突
  9. 使用 Agent 会话菜单 ID — 操作应使用 Menus.* 菜单 ID(来自 sessions/browser/menus.ts),而不是共享的 MenuId.* 常量

4. 关键文件

文件用途
sessions/LAYOUT.md权威布局规范
sessions/browser/workbench.ts主要布局实现(Workbench 类)
sessions/browser/menus.tsAgents 菜单 ID(Menus 导出项)
sessions/browser/layoutActions.ts布局操作(切换侧边栏、面板、辅助侧边栏)
sessions/browser/paneCompositePartService.tsAgenticPaneCompositePartService
sessions/browser/media/style.css布局专属样式
sessions/browser/parts/parts.tsAgenticParts 枚举
sessions/browser/parts/titlebarPart.ts标题栏部件、MainTitlebarPart、AuxiliaryTitlebarPart、TitleService
sessions/browser/parts/sidebarPart.ts侧边栏部件(含页脚和 macOS 交通灯间隔区)
sessions/browser/parts/chatBarPart.tsChat Bar 部件
sessions/browser/parts/auxiliaryBarPart.tsAuxiliary Bar 部件(含运行脚本下拉菜单)
sessions/browser/parts/panelPart.ts面板部件
sessions/browser/parts/projectBarPart.tsProject Bar 部件(文件夹条目、图标自定义)
sessions/contrib/configuration/browser/configuration.contribution.ts将 workbench.editor.useModal 设为 'all',启用模态编辑器覆盖层
sessions/contrib/sessions/browser/sessionsTitleBarWidget.ts标题栏小部件和 Agent 选择器
sessions/contrib/chat/browser/runScriptAction.ts标题栏的运行脚本分割按钮
sessions/contrib/accountMenu/browser/account.contribution.ts侧边栏页脚的账户小部件
sessions/electron-browser/parts/titlebarPart.ts桌面版(Electron)标题栏部件

5. 测试更改

修改布局代码后:

  1. 通过 VS Code - Build 任务确认构建无错误
  2. 确保网格结构与规范中的视觉表示一致
  3. 确认部件可见性切换(显示/隐藏/最大化)正常工作
  4. 测试编辑器能否在 ModalEditorPart 覆盖层中打开并正常关闭
  5. 确认侧边栏页脚能正确显示账户小部件

评论

支持 Markdown