Appearance
AI 编程环境
AI 编程环境是一个运行在浏览器中的云端开发工作区。进入项目后，你可以在同一页面中与编程 Agent 对话、查看项目文件、编辑代码、预览项目效果、执行终端命令、查看运行输出，以及管理版本、部署和发布。
本文只介绍当前界面的组成和功能，不要求跟随示例进行实操。智能体、工作流和技能项目使用相同的工作区框架，但预览区域会按项目类型显示不同内容。
什么是 AI 编程环境
每个 AI 编程项目都有独立的项目文件和运行环境。编程 Agent 根据自然语言需求读取、创建和修改项目文件，开发者则可以在工作区中检查修改结果，并通过预览、终端和运行记录验证项目状态。
核心能力包括：
- AI 协同开发：通过自然语言、图片、文档和日志描述需求，由编程 Agent 分析并修改项目。
- 项目文件管理：查看目录结构，创建、上传、下载和检索文件。
- 代码编辑：使用内置编辑器查看或修改代码，支持行号、语法高亮和编辑器辅助功能。
- 云端运行环境：使用项目终端执行构建、测试、依赖安装和其他命令。
- 效果预览与试运行：应用项目可预览页面；智能体、工作流和技能显示各自的测试界面。
- 版本与交付：查看代码变更和版本记录，创建副本、分享、部署并发布项目。
- 集成与托管：按需打开环境变量、数据库、对象存储、日志、数据分析和用量管理等能力。
用户界面
AI 编程环境主要由 AI 对话区、项目文件区、工作区和底部输出面板组成。
| 编号 | 区域 | 功能 |
|---|---|---|
| 1 | AI 对话区 | 向编程 Agent 提出需求，查看执行步骤、结果、版本和用量信息，并继续迭代项目。 |
| 2 | 项目文件区 | 查看项目目录和文件，切换文件、搜索和源代码管理，并进行下载、新建和上传。 |
| 3 | 工作区 | 通过页签打开预览、代码文件、版本控制、部署、设置、集成服务和托管功能。 |
| 4 | 底部输出面板 | 使用终端，并查看控制台、输出或项目类型支持的运行记录。 |
调整界面布局
| 控件 | 功能 |
|---|---|
| 左上角侧栏按钮 | 展开或收起 AI 对话区。 |
| 文件夹按钮 | 打开或关闭项目文件区。 |
| AI 对话区右侧分隔线 | 水平拖动，改变对话区宽度。 |
| 底部面板最大化按钮 | 增大终端、控制台或输出区域的高度。 |
| 底部面板收起按钮 | 隐藏底部面板；再次展开后恢复显示。 |
页签上的 × | 关闭对应工作区页签，不会删除文件或项目。 |
AI 对话区
AI 对话区用于向编程 Agent 描述开发目标和修改要求。这里的消息会影响项目代码，与智能体或技能“预览”页签中的测试对话不是同一个会话。
| 编号 | 区域 | 功能 |
|---|---|---|
| 1 | 项目与面板控制 | 返回平台页面、收起侧栏、查看项目信息、打开版本历史或文件面板。 |
| 2 | 任务与版本记录 | 显示用户需求、Agent 执行步骤、完成结果、代码版本、修改记录、耗时和用量。 |
| 3 | 需求输入区 | 输入新需求，并配置附件、对话模式、技能、插件、模型和发送操作。 |
顶部项目控制
| 按钮 | 功能 |
|---|---|
| 返回 | 返回进入工作区之前的平台页面。 |
| 展开/收起侧栏 | 改变 AI 对话区的显示状态。 |
| 项目名称与下拉箭头 | 查看当前项目名称和项目信息。 |
| 历史 | 查看项目的 Git 版本历史。 |
| 文件夹 | 打开或关闭项目文件区。 |
任务与版本记录
每轮需求通常包含用户消息、Agent 执行过程和完成结果。任务结束后，如果产生代码提交，还会显示对应版本卡片。
| 元素或按钮 | 功能 |
|---|---|
| 展开/收起所有步骤 | 查看或隐藏 Agent 在本轮任务中的执行步骤。 |
| 完成结果 | 汇总本轮创建、修改、验证和需要注意的内容。 |
| 版本卡片 | 显示本轮任务产生的代码版本和提交说明。 |
| 回到该版本 | 将项目恢复到该版本对应的代码状态。这会改变项目文件，操作前应确认目标版本。 |
| 查看修改记录 | 查看本轮任务修改了哪些文件和代码。 |
| 复制该会话 | 复制本轮会话，便于基于同一需求继续处理。 |
| 重新发起该会话 | 使用原始需求重新启动一次任务。新任务会基于当前项目状态执行。 |
| 时钟与用量信息 | 显示任务耗时以及令牌、积分等消耗信息。 |
版本恢复会修改项目
“回到该版本”不是普通的查看操作。恢复前建议先查看修改记录，并确认当前未保存内容和后续版本是否仍需保留。
需求输入与对话工具栏
| 按钮 | 功能 |
|---|---|
+ 添加附件 | 向本轮需求添加图片、文档、代码、日志等参考文件。 |
| 对话设置 | 选择协作模式和权限模式。计划模式侧重生成方案，Agent 模式可执行开发任务，问答模式用于讨论和解释。 |
| 技能 | 选择当前编程任务可使用的技能。 |
| 插件/API | 为编程 Agent 选择可用插件和外部工具能力。 |
| 模型 | 选择本轮任务使用的模型；“自动”表示由平台选择。 |
| 发送箭头 | 发送当前需求；任务执行期间会切换为停止按钮。 |
| 停止 | 中断当前任务。已经写入文件的变更是否保留，以任务停止时的实际状态为准。 |
添加附件
附件可以帮助 Agent 识别界面效果、读取参考资料或结合错误信息定位问题。可以使用以下方式添加：
- 单击输入区底部的
+，从本地选择文件。 - 将文件拖入项目对话输入区。
- 复制本地文件或截图，将光标放在输入区后粘贴；macOS 使用
Command + V，Windows 使用Ctrl + V。
当前每次发送支持 1 个附件；一次粘贴多个文件时只会选择第一个。图片不能超过 10 MiB，其他文件不能超过 100 MiB。附件显示上传成功后再发送需求；不要上传账号密码、访问令牌、密钥或其他敏感信息。
项目文件区
项目文件区用于查看当前项目的目录结构。单击文件名会在工作区中打开代码编辑页签。
| 编号 | 区域 | 功能 |
|---|---|---|
| 1 | 文件、搜索和源代码管理 | 在项目目录、全文搜索和代码变更视图之间切换。 |
| 2 | 项目文件树 | 浏览目录和文件，并使用下载、新建、上传和展开等管理按钮。 |
| 3 | 工作区页签与项目操作 | 切换预览、代码文件、版本控制、部署和设置页签，并使用复制、分享、部署和发布。 |
| 4 | 代码编辑器 | 查看或修改当前打开文件的内容。 |
| 5 | 终端与输出 | 执行命令，查看控制台、服务输出和其他运行信息。 |
文件、搜索和源代码管理
| 入口 | 功能 |
|---|---|
| 文件 | 显示项目文件树。 |
| 搜索 | 在项目文件中搜索文本或代码。 |
| 源代码管理 | 查看 Git 文件变更和版本控制状态。 |
文件树工具栏
| 按钮 | 功能 |
|---|---|
| 下载 | 将项目文件打包下载到本地。 |
| 新建文件 | 在当前项目中创建文件。 |
| 添加目录 | 创建项目目录。 |
| 上传 | 从本地上传文件到项目。 |
| 展开 | 展开文件树中的目录。 |
| 目录左侧箭头 | 展开或收起单个目录。 |
| 文件行 | 单击后在代码编辑器中打开文件。部分文件在行尾提供单独下载入口。 |
文件变更会影响项目
新建、上传、重命名、移动或删除项目文件都会改变项目内容。对于批量操作，可以在 AI 对话区说明目标，让编程 Agent 处理并在完成后查看修改记录。
代码编辑器与工作区页签
代码编辑器用于查看或手动修改 Agent 生成的项目文件。打开文件后，工作区顶部会增加带文件名的页签。
代码编辑器
| 功能 | 说明 |
|---|---|
| 文件信息 | 编辑器顶部显示文件名和文件类型。 |
| 行号与语法高亮 | 根据文件类型显示行号、代码颜色和结构。 |
| 文本编辑 | 可以直接修改代码或文档内容。 |
| 自动补全 | 在全局设置中开启后，输入时显示代码提示与建议。 |
| 括号自动闭合 | 在全局设置中开启后，自动补全成对括号和引号。 |
| 页签切换 | 在多个已打开文件和功能页面之间切换。 |
| 关闭页签 | 单击文件页签上的 ×，关闭当前编辑视图；不会删除文件。 |
顶部常用页签和项目操作
| 按钮 | 功能 |
|---|---|
| 预览 | 打开当前项目类型对应的预览或测试页面。 |
| 新标签页 | 打开开发工具、集成服务和托管功能入口。 |
| 版本控制 | 查看文件变更、暂存状态和提交记录。 |
| 部署页签 | 查看部署配置、执行状态和部署历史。 |
| 全局设置 | 打开编辑器设置页。 |
| 创建副本 | 复制当前项目，生成一个独立项目。 |
| 分享项目链接 | 打开分享入口并复制可用链接。 |
| 部署 | 生成可运行的部署版本。 |
| 发布 | 将最近成功部署的版本发布到项目支持的渠道；条件未满足时不可用。 |
不同项目类型的预览页面并不相同：
| 项目类型 | 预览内容 | 详细说明 |
|---|---|---|
| 网页应用、移动应用、小程序 | 应用页面预览和服务控制 | 参见项目工作区图标与按钮。 |
| 智能体 | Agent 对话效果测试 | 参见智能体预览图标与按钮。 |
| 工作流 | 节点画布和试运行 | 参见工作流预览图标与按钮。 |
| 技能 | 独立技能测试会话 | 参见技能预览图标与按钮。 |
终端、控制台与输出
底部面板用于执行命令和查看项目运行信息。实际显示的页签会根据项目类型和运行状态变化。
| 页签或按钮 | 功能 |
|---|---|
| 终端 | 使用项目云端环境的命令行。可执行构建、测试、依赖安装和项目脚本。 |
| 控制台 | 查看网页预览产生的浏览器控制台消息。 |
| 输出 | 查看项目服务、构建和运行输出。 |
| 运行记录 | 智能体和工作流等项目可在对应入口查看试运行历史、输入输出和状态。 |
| 新建终端 | 在支持多终端的项目中增加终端会话。 |
| 清理 | 清空当前面板允许清理的显示内容。 |
| 最大化/还原 | 切换底部面板高度。 |
| 收起/展开 | 隐藏或恢复底部面板。 |
终端命令直接作用于当前项目的云端环境。执行安装、删除、覆盖、Git 或进程管理命令前，应确认命令目标和影响范围。终端关闭或项目重新创建运行实例后，临时进程和未持久化状态可能发生变化。
全局设置
单击工作区顶部的“全局设置”按钮，会打开“设置”页签。当前设置主要用于调整代码编辑器的显示样式和输入行为。
| 编号 | 区域 | 功能 |
|---|---|---|
| 1 | 设置页签和全局设置入口 | 打开或关闭设置页，并可继续切换其他工作区页签。 |
| 2 | 设置分类 | 选择要配置的设置类别；当前提供编辑器设置。 |
| 3 | 设置内容 | 配置编辑器主题、字体、字号、行高和代码编辑行为。 |
| 4 | 底部输出面板 | 打开设置页时，终端、控制台和输出仍可使用。 |
编辑器设置项
| 设置 | 功能 |
|---|---|
| 编辑器主题 | 在 VSCode、GitHub 和 Duotone 等代码高亮风格之间切换。 |
| 字体家族 | 选择代码编辑器使用的字体。 |
| 字号 | 设置编辑器文字大小。 |
| 行高 | 设置代码行之间的垂直间距。 |
| 自动补全 | 控制输入时是否显示代码提示和建议。 |
| 括号自动闭合 | 控制是否自动补全成对括号和引号。 |
| 制表符大小 | 设置按下 Tab 键时使用的缩进空格数。 |
设置修改会影响代码编辑器的显示和输入体验，不会直接改变项目业务代码。
新标签页中的工具与服务
单击“新标签页”后，可以按功能打开新的工作区页签。
| 分组 | 包含的主要入口 |
|---|---|
| 开发工具 | 预览、编辑器、终端、版本控制。 |
| 集成服务 | 环境变量、数据库、对象存储。 |
| 托管 | 部署、数据分析、日志、用量管理。 |
完整入口说明参见开发工具与集成入口。环境变量、数据库和对象存储等入口是否显示，取决于项目类型、企业权限和服务状态。
常见状态说明
| 状态 | 含义 |
|---|---|
| 按钮变灰 | 当前前置条件未满足，例如没有输入内容、没有成功部署版本或服务尚未准备好。 |
| 页签出现加载状态 | 工作区正在加载文件、服务或数据；等待完成后再操作。 |
| 预览空白或不可用 | 预览服务可能尚未启动、启动失败或当前项目类型使用其他测试界面。 |
| 文件树为空 | 项目运行实例或文件数据尚未准备好，可以稍后刷新或检查项目状态。 |
| 终端无响应 | 命令可能仍在运行；检查当前进程、输出和停止操作。 |
| 发布不可用 | 通常表示尚无成功部署版本，或当前项目类型、权限和渠道不支持发布。 |