feat: add teleop panel, service panel, publish panel docs (#220)

* I must enjoy torturing myself

* some stuff working haha

* I'm sorry.

* Refactor and improve documentation for Publish, Service, and Teleop panels

- Enhanced clarity and readability of panel documentation
- Updated configuration and usage instructions
- Improved technical descriptions and formatting
- Added more precise explanations of panel functionalities
- Synchronized Chinese and English documentation

---------

Co-authored-by: Yujing Zheng <[email protected]>

Author: YunxianHua

docs/4-recipes/6-viz/12-publish-panel.md

@@ -0,0 +1,30 @@
+---
+sidebar_position: 12
+---
+
+# 发布面板
+
+![viz-12-1.png](../img/viz-12-1.png)
+
+发布面板（Publish Panel）是一个用于向「指定主题（Topic）」发布消息的工具，它通过 [coBridge](https://github.com/coscene-io/coBridge) 将信息传递给您的机器人系统。
+
+## 设置选项
+
+- 编辑模式（Editing Mode）：开启时可编辑消息内容，关闭时仅显示发布按钮
+- 按钮标题（Button Title）：自定义发布按钮的显示文本
+- 按钮提示（Button Tooltip）：设置鼠标悬停时显示的提示信息
+- 按钮颜色（Button Color）：自定义按钮的显示颜色
+
+## 使用步骤
+
+1. 输入主题：在主题栏中输入目标主题名称，系统会自动识别对应的消息架构并生成 JSON 模板
+2. 选择架构：点击架构选择框可查看常用 ROS 架构列表，选择后将自动生成对应的 JSON 模板
+3. 编辑消息：根据需求修改 JSON 模板内容
+4. 发送消息：点击发布按钮将消息发送至指定主题
+
+## 使用须知
+
+- Web 端必须连接至支持发布功能的机器端，否则发布按钮将处于禁用状态
+- 机器端的 coBridge 配置需要启用 clientPublish 功能，才能支持从 Web 端发布主题消息
+
+发布面板为您提供了一个直观的界面，让您能够方便地与机器人系统进行消息交互，提升操作效率。

docs/4-recipes/6-viz/13-service-panel.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 13
+---
+
+# 服务调用面板
+
+![viz-13-1.png](../img/viz-13-1.png)
+
+服务调用面板（Service Call Panel）允许您通过 [coBridge](https://github.com/coscene-io/coBridge) 调用机器端服务（Service）并查看其响应。
+
+## 配置选项
+
+### 基础配置
+
+- **服务名称** (Service name)：需要调用的服务名称
+- **布局方式** (Layout)：配置请求和响应区域的排列方式
+  - 垂直布局 (Vertical)：上下排列
+  - 水平布局 (Horizontal)：左右排列
+
+### 按钮配置
+
+- **按钮文本** (Title)：显示在按钮上的文字
+- **提示信息** (Tooltip)：鼠标悬停时显示的提示文本
+- **按钮颜色** (Color)：自定义按钮的显示颜色
+
+## 使用说明
+
+1. 首先需要确保已连接到支持的数据源，否则"调用服务"按钮将保持禁用状态
+2. 在请求输入区域中，使用标准 JSON 格式编写服务请求内容
+3. 点击"调用服务"按钮发送请求
+4. 服务的响应结果将自动显示在响应区域中
+
+服务调用面板为您提供了一个直观的界面，方便您与机器人系统进行服务（Service）级别的交互。通过这个面板，您可以轻松地测试各种服务调用，实时查看响应结果，有效地进行系统调试和功能验证。

docs/4-recipes/6-viz/14-teleop-panel.md

@@ -0,0 +1,25 @@
+---
+sidebar_position: 14
+---
+
+# 远程操控面板
+
+![viz-14-1.png](../img/viz-14-1.png)
+
+远程操控面板使您能够通过发布 `geometry_msgs/Twist` 或 `geometry_msgs/msg/Twist` 消息到指定主题（Topic）来控制机器人。要使用此面板远程操控机器人，您需要先通过 [coBridge](https://github.com/coscene-io/cobridge) 建立与机器人的通信连接。
+
+## 配置参数
+
+- 发布频率 (Publish rate)：控制 Twist 消息的发送频率
+- 主题名称 (Topic)：指定发布 Twist 消息的目标主题
+- 方向控制按钮：配置上/下/左/右按钮对应的运动参数
+  - 可分别设置线性速度（x、y、z）和角速度的对应数值
+
+## 支持的消息类型
+
+- ROS 1: `geometry_msgs/Twist`
+- ROS 2: `geometry_msgs/msg/Twist`
+
+## 技术实现
+
+远程操控面板是一个专用的发布器面板，其核心功能是通过 coBridge 向机器人发送控制指令。要实现远程操控功能，机器人端需要配置相应的组件来处理接收到的控制消息。

docs/4-recipes/img/viz-12-1.png

@@ -0,0 +1,30 @@
+---
+sidebar_position: 12
+---
+
+# Publish Panel
+
+![viz-12-1.png](../img/viz-12-1.png)
+
+The Publish Panel allows the users to publish messages to specified topics via [coBridge](https://github.com/coscene-io/coBridge).
+
+## Settings Options
+
+- Editing Mode: When enabled, you can edit the message content; when disabled, only the publish button is displayed
+- Button Title: Customize the display text of the publish button
+- Button Tooltip: Set the tooltip information displayed on mouse hover
+- Button Color: Customize the button's display color
+
+## Usage Steps
+
+1. Specify Topic: Enter the target topic name in the topic field, and the system will automatically recognize the corresponding message schema and generate a JSON template
+2. Select Schema: Click the schema selection box to view a list of common ROS schemas, selecting one will automatically generate the corresponding JSON template
+3. Edit Message: Modify the JSON template content according to your needs
+4. Send Message: Click the publish button to send the message to the specified topic
+
+## Notes
+
+- The web client must be connected to a machine that supports the publishing feature, otherwise the publish button will be disabled
+- The coBridge configuration on the machine must enable the clientPublish feature to support publishing topic messages from the web client
+
+The Publish Panel provides you with an intuitive interface to conveniently interact with your robot system, improving operational efficiency.

docs/4-recipes/img/viz-13-1.png

@@ -0,0 +1,33 @@
+---
+sidebar_position: 13
+---
+
+# Service Call Panel
+
+![viz-13-1.png](../img/viz-13-1.png)
+
+The Service Call Panel allows the users to call ROS services via [coBridge](https://github.com/coscene-io/coBridge) and view the responses.
+
+## Configuration Options
+
+### Basic Settings
+
+- **Service Name**: The name of the target service to be called
+- **Layout**: Configure the arrangement of request and response areas
+  - Vertical: Arranged top and bottom
+  - Horizontal: Arranged left and right
+
+### Button Settings
+
+- **Title**: The text displayed on the button
+- **Tooltip**: The hint text shown on mouse hover
+- **Color**: Customize the button's display color
+
+## Usage Instructions
+
+1. Make sure you are connected to a supported data source, otherwise the "Call Service" button will remain disabled
+2. In the request input area, write the service request content using standard JSON format
+3. Click the "Call Service" button to send the request
+4. The service response will automatically display in the response area
+
+The Service Call Panel provides you with an intuitive interface for service-level interaction with the robot system. Through this panel, you can easily test various service calls, view response results in real-time, and effectively perform system debugging and functionality verification.

docs/4-recipes/img/viz-14-1.png

@@ -0,0 +1,25 @@
+---
+sidebar_position: 14
+---
+
+# Teleop Panel
+
+![viz-14-1.png](../img/viz-14-1.png)
+
+The Teleop Panel allows you to remotely control your robot by publishing `geometry_msgs/Twist` or `geometry_msgs/msg/Twist` messages on a specified topic. To remotely operate a connected robot using this panel, you need to establish communication with the robot via [coBridge](https://github.com/coscene-io/cobridge).
+
+## Configuration Parameters
+
+- Publish Rate: Control the frequency of publishing Twist messages
+- Topic: Specify the topic for publishing Twist messages
+- Direction Control Buttons: Configure the movement parameters for Up/Down/Left/Right buttons
+  - You can set corresponding values for linear velocity (x, y, z) and angular velocity
+
+## Supported Message Types
+
+- ROS 1: `geometry_msgs/Twist`
+- ROS 2: `geometry_msgs/msg/Twist`
+
+## Technical Implementation
+
+The Teleop Panel is a specialized publish panel, with its core functionality being sending control commands to the robot via coBridge. To achieve remote control functionality, the robot side needs to have corresponding components configured to process the received control messages.