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

标题栏
标题栏固定在顶部,支持拖动窗口。
左侧区域
左侧包含侧边栏切换按钮。macOS 平台由于交通灯按钮(红黄绿)占用空间,会自动预留额外空间。
中间区域
居中显示「WinCode」文字和版本号,同样支持拖动窗口。
右侧区域
从右到左依次为:
- Gateway 状态灯 -- 三种状态:
- 绿色 + 脉冲动画 = 已连接
- 灰色 + 脉冲 = 连接中
- 红色 = 未连接
- 配对按钮 -- 发起 Gateway 设备配对
- 企业认证按钮 -- 未登录显示登录图标 + 「企业认证」;已登录显示认证图标 + 姓名 + 登出图标
- 主题切换 -- 太阳/月亮图标,点击切换明暗主题
- 右侧面板切换 -- 面板图标,仅当当前标签为 chat 且有关联项目时可点击
- 设置按钮 -- 设置图标,快捷键
Cmd+,相同操作
标签栏
标签栏在标签数超过 1 时自动显示。
标签以胶囊形状排列,支持横向滚动。鼠标悬停时底部显示细滚动条,离开后隐藏,保持视觉简洁。
标签项
每个标签:
- 标题超出最大宽度时自动截断
- 活跃标签使用强调色高亮背景
- 非活跃标签使用浅色文字
- 可关闭的标签右侧显示关闭按钮,非活跃状态下鼠标悬停时才显示
点击标签切换,点击关闭按钮关闭标签。
内容区域
内容区域根据每个标签的类型渲染对应的工作区。所有标签同时保持状态,切换时不会丢失内部状态(如滚动位置、输入内容、流式传输状态等)。
当前支持的视图类型:
| 类型 | 说明 |
|---|---|
welcome | 欢迎页 |
chat | 会话界面 |
extension-center | 扩展中心 |
online-documents | 在线文档 |
tfs-work-items | TFS 工作项 |
skills | 技能页 |