> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wuji.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# 概览

可视化视图是 Wuji Studio 的核心工作区。连接设备后，实时数据通过 Topic 发布，使用不同面板类型查看和分析数据。

## 进入可视化

在[设备管理](/docs/wuji-studio/device-connection)页连接设备后，Bottom action area 出现 **Enter Visualization** 按钮，点击即可切换到可视化视图开始查看实时数据。也可直接点击 Activity bar 的 **Visualization** 图标 <svg width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{verticalAlign: 'middle', display: 'inline'}}><rect width="18" height="18" x="3" y="3" rx="2" /><path d="M17 12h-2l-2 5-2-10-2 5H7" /></svg> 进入。

## 可视化视图概览

可视化视图的四个区域以不同颜色框线标注，各区域的功能与打开、收起方式见下表。<span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #FBBF24', borderRadius: '4px', verticalAlign: '-1px'}} /> 框线标注的 Panel area 为默认布局。当布局调整后，右键点击顶部预设栏的当前预设标签（下图中的 **Tactile Monitor**），选择 **Reset to Default** 即可恢复默认布局，详见[故障排查 > 恢复默认布局](/docs/wuji-studio/troubleshooting#恢复默认布局)。

<img src="https://mintcdn.com/wuji-0bbde051/Q08CII5VOvpQDcUt/assets/source/images/zh/wuji-studio/visualization-overview.png?fit=max&auto=format&n=Q08CII5VOvpQDcUt&q=85&s=bd5d8b5f69d8cadc09d5c2765962c0d2" alt="数据可视化" width="1438" height="898" data-path="assets/source/images/zh/wuji-studio/visualization-overview.png" />

可视化视图由以下区域组成：

| 区域 | 打开方式 | 说明 |
| - | - | - |
| Left Sidebar | 点击右上角 <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.122 13.878 1 12.5 1H3.5C2.122 1 1 2.122 1 3.5ZM12.5 14H7V2H12.5C13.327 2 14 2.673 14 3.5V12.5C14 13.327 13.327 14 12.5 14ZM2 3.5C2 2.673 2.673 2 3.5 2H6V14H3.5C2.673 14 2 13.327 2 12.5V3.5Z" /></svg> 图标，<span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #38BDF8', borderRadius: '4px', verticalAlign: '-1px'}} /> 区域将会展开 | 左侧栏，包含 2 个面板：<ul><li>**Devices**：显示已连接设备的状态信息</li><li>**Panel Settings**：编辑当前选中面板的配置参数（详见[面板类型](/docs/wuji-studio/visualization/panel-types)）</li></ul> |
| Panel area | <span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #FBBF24', borderRadius: '4px', verticalAlign: '-1px'}} /> 区域始终显示 | 数据可视化工作区，支持自由拖拽和分屏布局：<ul><li>添加面板：点击工作区的 **+** 按钮，选择面板类型</li><li>移除面板：点击面板标题栏的关闭按钮</li><li>移动面板：拖拽面板标题栏到目标位置</li><li>分屏：将面板拖拽到工作区边缘，实现水平或垂直分屏</li><li>调整大小：拖拽面板之间的分隔线</li></ul> |
| Right Sidebar | 点击右上角 <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M12.5 1H3.5C2.122 1 1 2.122 1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.122 13.878 1 12.5 1ZM2 12.5V3.5C2 2.673 2.673 2 3.5 2H9V14H3.5C2.673 14 2 13.327 2 12.5ZM14 12.5C14 13.327 13.327 14 12.5 14H10V2H12.5C13.327 2 14 2.673 14 3.5V12.5Z" /></svg> 图标，<span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #F472B6', borderRadius: '4px', verticalAlign: '-1px'}} /> 区域将会展开 | 右侧栏，包含 2 个面板：<ul><li>**Variables**：管理 Studio 内的全局变量</li><li>**Topics**：浏览可用的数据 Topic 树（详见 [Topic 树](#topic-树)）</li></ul> |
| Bottom bar | 点击右上角 <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" style={{verticalAlign: 'middle', display: 'inline'}}><path d="M12.5 1H3.5C2.122 1 1 2.121 1 3.5V12.5C1 13.879 2.122 15 3.5 15H12.5C13.878 15 15 13.879 15 12.5V3.5C15 2.121 13.878 1 12.5 1ZM14 12.5C14 13.327 13.327 14 12.5 14H3.5C2.673 14 2 13.327 2 12.5V11H14V12.5ZM14 10H2V3.5C2 2.673 2.673 2 3.5 2H12.5C13.327 2 14 2.673 14 3.5V10Z" /></svg> 图标，<span style={{display: 'inline-block', width: '13px', height: '13px', border: '3px solid #4ADE80', borderRadius: '4px', verticalAlign: '-1px'}} /> 区域将会展开 | 底部栏，默认收起。包含 3 个 tab：<ul><li>**RECORDING**：数据录制（详见[数据录制](/docs/wuji-studio/visualization/recording)）</li><li>**PLAYER**：数据回放（详见[数据回放](/docs/wuji-studio/visualization/recording#数据回放)）</li><li>**DEVICE LOG**：设备日志（详见[设备日志](/docs/wuji-studio/visualization/device-logs)）</li></ul> |

## Topic 树

Right Sidebar 的 **Topics** 面板显示当前所有可用的数据 Topic。Topic 按 `/` 分隔的命名空间以树形结构组织，展开后看到 Schema 字段层级（按 `.` 分隔），支持数组和结构体嵌套展示。点击 Topic 查看详细信息，拖拽到面板中可快速订阅数据。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.