Skip to content

终端仪表板

一句话概述

终端仪表板提供以终端为首的工作空间,具有可调整大小的窗格、浮动面板和用于会话监控与编排的集成工具。


解决的痛点

痛点当前状态终端仪表板解决方案
终端分散多个终端窗口统一的 tmux 风格网格布局
无上下文关联无法将终端输出与问题关联关联高亮提供程序
面板过多固定布局浪费空间浮动面板(互斥)
缺少工具在应用间切换集成问题、队列、检查器、调度器
工作空间有限无法同时查看代码和终端可调整大小的三列布局

概述

位置: ccw/frontend/src/pages/TerminalDashboardPage.tsx

用途: 用于多终端会话管理的终端优先布局,配备集成工具和可调整大小的面板。

访问方式: 导航 → 终端仪表板 (/terminal-dashboard)

布局:

+--------------------------------------------------------------------------+
|  仪表板工具栏(面板切换、布局预设、全屏)                                    |
+--------------------------------------------------------------------------+
|  +----------------+-------------------------------------------+------------+ |
|  | 会话           |  终端网格(tmux 风格)               | 文件       | |
|  | 分组树         |  +----------+  +----------+              | 侧边栏     | |
|  | (可调整大小) |  | 终端 1   |  | 终端 2   |              |(可调整大小)| |
|  |                |  +----------+  +----------+              |            | |
|  |                |  +----------+  +----------+              |            | |
|  |                |  | 终端 3   |  | 终端 4   |              |            | |
|  |                |  +----------+  +----------+              |            | |
|  +----------------+-------------------------------------------+------------+ |
+--------------------------------------------------------------------------+
|  [浮动面板: 问题+队列 或 检查器 或 执行 或 调度器]                         |
+--------------------------------------------------------------------------+

实时演示

TerminalDashboardOverview
加载中...
demo TerminalLayoutPresets #TerminalLayoutPresets.tsx :::

浮动面板演示

FloatingPanelsDemo
加载中...
demo ResizablePanesDemo #ResizablePanesDemo.tsx :::

配置

功能标志

标志控制
dashboardQueuePanelEnabled队列面板可见性
dashboardInspectorEnabled检查器面板可见性
dashboardExecutionMonitorEnabled执行监控器面板可见性

布局预设

预设布局
单格一个终端窗格
水平分割两个窗格并排
垂直分割两个窗格垂直堆叠
2x2 网格2x2 网格中的四个窗格

面板类型

面板内容位置功能标志
问题+队列组合的问题面板 + 队列列表列左侧(叠加)-
队列完整的队列管理面板右侧(叠加)dashboardQueuePanelEnabled
检查器关联链检查器右侧(叠加)dashboardInspectorEnabled
执行监控器实时执行跟踪右侧(叠加)dashboardExecutionMonitorEnabled
调度器队列调度器控制右侧(叠加)-

可访问性

  • 键盘导航:

    • Tab - 在工具栏按钮之间导航
    • Enter/Space - 激活工具栏按钮
    • Escape - 关闭浮动面板
    • F11 - 切换全屏模式
  • ARIA 属性:

    • 工具栏按钮上的 aria-label
    • 侧边栏切换上的 aria-expanded
    • 非活动浮动面板上的 aria-hidden
    • 浮动面板上的 role="dialog"
  • 屏幕阅读器支持:

    • 切换面板时宣布面板状态
    • 布局更改被宣布
    • 面板打开/关闭时的焦点管理

相关链接

Released under the MIT License.