预览和修改QingBuilder项目
一、功能简介
QingBuilder 支持一边生成、一边预览，并可通过多轮对话持续修改应用。项目工作区还提供代码、数据、上下文管理、响应式预览、设计模式和版本管理功能，方便用户检查生成结果并逐步完善应用。
项目工作区主要分为以下区域：
| 区域 | 作用 |
|---|---|
| 左侧对话区 | 查看需求、处理过程、版本记录和本轮修改，继续输入调整要求，并查看上下文用量、压缩上下文、开启新会话或查找先前的对话记录 |
| 「预览」 | 查看和操作当前页面 |
| 「代码」 | 查看项目文件和代码，并进行代码级调整 |
| 「数据」 | 查看项目当前引用的轻流数据表 |
| 顶部工具栏 | 隐藏对话栏、切换响应式宽度、在新标签页打开、刷新、发布及开启设计模式 |
二、使用场景
- 在生成过程中提前查看页面方向。
- 通过多轮对话继续增加功能或调整页面。
- 检查桌面、平板和手机宽度下的页面布局。
- 精确选择某个文字、图标、按钮或卡片并提出修改要求。
- 查看生成代码或核对项目引用的轻流数据。
- 对比历史版本，或恢复到先前结果后继续修改。
- 查看上下文用量，在长对话中压缩上下文或开启新会话，并从折叠的对话记录中快速跳转到目标内容。
三、操作步骤
3.1 使用「预览」检查页面
点击顶部「预览」，查看当前页面的布局、内容和交互，确认页面是否符合需求。
需要更大的查看区域或页面卡顿时，可使用以下功能：
| 功能 | 操作 |
|---|---|
| 隐藏或显示对话栏 | 点击「预览」左侧的对话栏按钮 |
| 在新标签页打开 | 点击预览区顶部的「在新标签页打开」按钮 |
| 刷新预览 | 点击预览区顶部的刷新按钮 |
隐藏或显示对话栏：
在新标签页打开： 
刷新预览：
3.2 检查不同设备宽度
预览区顶部提供桌面、平板和手机断点。点击当前设备图标并切换断点，即可检查不同宽度下的页面。
| 断点 | 预览宽度 | 建议检查 |
|---|---|---|
| 桌面 | 1280 px | 整体布局、多栏内容、完整导航 |
| 平板 | 768 px | 卡片换行、菜单折叠和中等宽度布局 |
| 手机 | 390 px | 单列布局、文字换行、按钮和移动端导航 |
如果某个断点下显示异常，可在左侧输入具体修改要求，例如：“请优化手机端布局，将顶部数据卡片改为单列展示，桌面端布局保持不变。”
3.3 查看处理过程、本轮修改和任务信息
生成过程中，左侧会显示当前正在进行的读取、思考和写入等处理记录。该记录默认折叠，点击记录左侧的展开按钮，可以查看该步骤的详细说明。
这些记录用于了解当前进度，无需进行额外操作。生成完成后，再回到「预览」检查最终页面是否符合需求。
每轮生成或修改完成后，左侧会显示对应版本和代码变更数量：
- 绿色
+数字表示本轮增加的代码行数。 - 红色
-数字表示本轮删除的代码行数。
点击本轮任务下方的工作时间，可以展开查看本轮任务的流币消耗、使用模型和工作时间等信息。
3.4 查看和管理对话上下文
随着多轮对话逐渐增加，可以查看当前上下文用量，并根据需要压缩上下文或开启新会话。对话区左侧还会按照用户发送的消息显示导航标记，便于快速回看先前内容。
查看上下文用量
输入区底部、模型名称右侧的圆形标识会显示当前上下文用量。将鼠标移到该标识上，可以查看：
| 内容 | 说明 |
|---|---|
| 已用比例 | 当前上下文窗口已经使用的比例 |
| 剩余比例 | 当前上下文窗口还可以使用的比例 |
| 已用量和总量 | 当前已经使用的上下文用量，以及上下文窗口总量 |
压缩上下文
需要继续使用当前会话时，可以压缩当前上下文：
- 点击输入区上方的「压缩上下文」。
- 等待压缩完成。
- 在对话记录中查看「上下文已压缩」提示，以及本次压缩用时和消耗的流币。
压缩上下文会消耗流币，具体消耗以压缩完成后显示的信息为准。
开始新会话
需要清空当前对话上下文并继续修改同一项目时，可以开启新会话：
- 点击输入区上方的「新会话」。
- 界面显示「新会话已开始」后，在输入区填写新的修改要求。
- 继续预览和修改当前项目。
开启新会话会清空先前会话的上下文，但不会清除先前已经生成的页面和代码。可以在保留当前项目结果的基础上继续修改。
通过对话导航标记跳转
对话区左侧会显示对话导航标记（横杠），每条用户发送的消息对应一个标记。例如，用户发送了 3 条消息，左侧就会显示 3 个标记。
将鼠标移到标记上，可以查看对应对话内容的预览；点击任一标记，即可跳转到该条用户消息在对话记录中的位置。
「压缩上下文」和「新会话」的区别如下：
| 功能 | 适合情况 | 操作结果 |
|---|---|---|
| 「压缩上下文」 | 希望继续沿用当前会话 | 压缩当前上下文，完成后显示压缩用时和流币消耗 |
| 「新会话」 | 希望清空先前对话上下文后继续处理同一项目 | 开启新的对话上下文，已经生成的页面和代码继续保留 |
3.5 使用设计模式修改具体元素
当页面内容较多、难以只用文字说明修改位置时，可以使用设计模式定位元素。
- 保持顶部「预览」处于选中状态。
- 点击右上角的设计模式按钮。
- 在预览页面中选择需要修改的文字、图标、按钮、卡片或其他元素。
- 将所选元素的信息粘贴带入左侧输入区。
- 补充具体修改要求并发送。
3.6 查看或调整页面代码
点击顶部「代码」，可以查看项目的文件目录和具体代码。
- 熟悉开发的用户可以打开文件查看或调整代码。
- 不熟悉代码的用户可以返回「预览」，继续通过对话或设计模式提出修改要求。
- 调整后返回「预览」，检查页面是否符合预期。
3.7 查看项目引用的数据
点击顶部「数据」，可以查看当前项目引用的轻流数据。
- 在左侧「数据表」列表中选择需要检查的表单。
- 在右侧查看字段和记录。
- 数据较多时，使用底部分页切换页面。
- 字段较多时，使用横向滚动条查看其他字段。
建议确认项目引用的数据表是否完整、表单是否正确，以及页面需要的字段和记录是否存在。
3.8 唤醒休眠的预览环境
5分钟不操作后，预览区会显示「开发环境已休眠」。点击「唤醒并继续」，等待环境恢复后可继续预览。
3.9 预览历史版本
每轮生成或修改完成后，QingBuilder 会保留对应版本。只想查看先前效果时，可以预览历史版本：
- 点击项目顶部左侧的历史版本按钮。
- 在列表中查看各次修改和版本编号。
- 选择需要查看的版本。
- 在右侧「预览」中检查该版本的页面。
3.10 恢复先前版本
确认需要以某个历史版本为基础继续修改时，可以恢复该版本：
- 先预览并确认目标版本。
- 点击目标版本右侧的恢复按钮。
- 等待恢复完成。
- 在新生成的当前版本中检查页面。
恢复不会直接覆盖或删除后续版本，而是以所选历史版本为基础创建一个新版本。例如，从 v1 恢复后，界面会显示“已通过恢复 v1 创建 v3”。
四、注意事项
- 页面仍在生成时，预览内容可能尚未完成；等待本轮结束后再进行最终检查。
- 压缩上下文会显示本次压缩用时和流币消耗，执行前请根据当前上下文用量判断是否需要压缩。
- 「新会话」只会开启新的对话上下文，先前已经生成的页面和代码仍会保留在当前项目中。
- 设计模式只负责定位元素，选择元素后仍需写清楚希望如何修改。
- 手动调整代码前，先确认当前版本已保留在历史记录中；修改后返回「预览」检查结果。
- 预览环境休眠不表示项目被删除。唤醒后页面未立即显示时，可稍等片刻或刷新预览。
- 发布前应同时检查当前版本的页面、数据和不同设备宽度下的显示效果。