WinCode
Ui

标题栏与标签页系统

标题栏功能按钮、标签页切换、多视图切换

标题栏与标签页系统

WinCode 的顶部区域由标题栏和标签栏两部分组成。标题栏承载全局操作按钮,标签页系统支持多视图切换。

标题栏

标题栏

标题栏固定在顶部,支持拖动窗口。

左侧区域

左侧包含侧边栏切换按钮。macOS 平台由于交通灯按钮(红黄绿)占用空间,会自动预留额外空间。

中间区域

居中显示「WinCode」文字和版本号,同样支持拖动窗口。

右侧区域

从右到左依次为:

  1. Gateway 状态灯 -- 三种状态:
    • 绿色 + 脉冲动画 = 已连接
    • 灰色 + 脉冲 = 连接中
    • 红色 = 未连接
  2. 配对按钮 -- 发起 Gateway 设备配对
  3. 企业认证按钮 -- 未登录显示登录图标 + 「企业认证」;已登录显示认证图标 + 姓名 + 登出图标
  4. 主题切换 -- 太阳/月亮图标,点击切换明暗主题
  5. 右侧面板切换 -- 面板图标,仅当当前标签为 chat 且有关联项目时可点击
  6. 设置按钮 -- 设置图标,快捷键 Cmd+, 相同操作

标签栏

标签栏在标签数超过 1 时自动显示。

标签以胶囊形状排列,支持横向滚动。鼠标悬停时底部显示细滚动条,离开后隐藏,保持视觉简洁。

标签项

每个标签:

  • 标题超出最大宽度时自动截断
  • 活跃标签使用强调色高亮背景
  • 非活跃标签使用浅色文字
  • 可关闭的标签右侧显示关闭按钮,非活跃状态下鼠标悬停时才显示

点击标签切换,点击关闭按钮关闭标签。

内容区域

内容区域根据每个标签的类型渲染对应的工作区。所有标签同时保持状态,切换时不会丢失内部状态(如滚动位置、输入内容、流式传输状态等)。

当前支持的视图类型:

类型说明
welcome欢迎页
chat会话界面
extension-center扩展中心
online-documents在线文档
tfs-work-itemsTFS 工作项
skills技能页

相关文档

On this page