说明：Web IDE 采用三栏布局，左侧为文件树，中间为代码编辑器，右侧为调试面板。

左侧文件树

文件树显示当前工作目录的文件结构，支持：

• 文件浏览：展开/折叠目录，查看所有文件
• 文件选择：点击文件可在编辑器中打开
• 文件操作：创建、重命名、删除文件（通过右键菜单）
• 实时同步：通过 WebSocket 实时同步本地文件变更

中间代码编辑器

基于 Monaco Editor 的代码编辑器，提供：

• 语法高亮：支持 JavaScript/TypeScript 等多种语言
• 代码补全：智能代码提示和自动补全
• 多文件编辑：支持标签页切换多个文件
• 自动保存：编辑后自动保存到本地文件系统
• 代码导航：支持跳转到函数定义、查找引用等

快捷键：

右侧调试面板

右侧面板包含三个主要标签页：

1. 在线调试标签页

用于配置请求参数和执行调试：

函数选择：

• 从
  agent-cloudbase-functions.json
  配置文件中选择要调试的函数
• 函数列表自动从配置文件的
  functions
  字段解析
• 切换函数后会自动跳转到对应的函数入口代码位置

请求配置：

• HTTP Method：选择请求方法（GET、POST）
• 端形态：选择应用类型（小程序、Web）
• Body 参数：JSON 格式的请求体（支持格式化）
  • 提供 AI 分析按钮（🪄），可自动分析函数代码并生成 Body 参数
• Query 参数：URL 查询参数（键值对形式）
• Headers：HTTP 请求头（键值对形式，默认包含
  Content-Type: application/json
  ）

运行调试：

• 点击"调试"按钮执行函数
• 结果会显示在"运行结果"卡片中

2. 发布记录标签页

记录函数发布历史，支持查看所有已发布的函数版本：

功能特性：

• 历史记录列表：按时间倒序显示所有发布记录，最新的记录显示在最上方
• 记录信息：每条记录包含：
  • 序号：记录序号（从最新到最旧）
  • 发布描述：部署时填写的备注信息
  • $LATEST 标签：最新发布的记录会标记为
    $LATEST
  • 发布时间：显示相对时间（如"2小时前"、"3天前"）
  • 发布人：执行部署的用户名称
  • 发布状态：显示发布状态（成功/失败）
• 分页查询：支持分页浏览历史记录，可自定义每页显示数量
• 记录总数：显示总记录数，便于了解发布频率

使用说明：

• 需要先配置云环境 ID，否则会提示"未检测到云环境 ID"
• 如果没有发布记录，会显示"暂无发布记录"
• 记录按发布时间倒序排列，方便查看最新版本

注意：查看详情和回滚功能正在开发中，当前操作菜单暂时禁用。