---
title: 使用设计模式
description: 选择店面元素并安全地使用 Runner 的可视化编辑控件。
---

**入口路径：** 工作区 → 选择商店 → **店面** → **设计模式**

![Runner 商店预览和控件](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## 本指南内容

在最新店面版本上打开设计模式，选择一个可见元素，进行受控更改，并将其保存为当前项目的一部分。

## 为什么以及何时使用设计模式

使用设计模式进行有针对性的可视化更改，这些更改比从头描述更容易指向：重写标题、替换图像、调整间距、更改排版或删除可见元素。

使用 Runner 聊天进行跨越多个页面、改变商店行为或需要新功能的更广泛工作。

## 可用性和先决条件

设计模式是条件性的。在以下情况下可用：

- 您使用桌面布局；
- 最新店面版本已准备好并被选中；
- 您未预览较旧版本；
- Runner 当前未处理另一个请求；并且
- 为工作区启用了设计模式功能。

如果预览仍在准备中、选择了历史版本或 Runner 正在工作，按钮可能被隐藏或禁用。

## 打开设计模式

1. 打开您的项目。
2. 选择 **店面**。
3. 确保版本标签显示 **当前** 且预览已准备好。
4. 在店面工具栏中选择 **设计模式**。
5. 如果底部编辑栏出现另一个 **设计模式** 控件，选择它以启用元素选择。
6. 在店面上移动并选择要更改的元素。

## 设计模式控件

| 控件 | 使用原因 | 选择时发生的情况 |
| --- | --- | --- |
| 店面工具栏中的 **设计模式** | 进入专用编辑视图。 | Runner 在设计面板中打开当前店面。 |
| 底部栏中的 **设计模式** | 打开或关闭元素检查。 | 打开时，可选元素被勾勒出来，选择一个会打开其编辑栏。关闭它会清除当前编辑会话。 |
| **询问 Runner AI** 字段和发送箭头 | 为选定的元素描述更改。 | Runner 接收带有选定元素的指令。当 Runner 启动时，它清除选择并重置未保存的直接编辑及其撤销/重做历史，因此在发送前保存任何待处理的直接编辑。 |
| **间距** | 更改元素内部或周围的空间。 | 面板打开以显示水平和垂直边距和填充。 |
| **图像** | 替换选定的图像或背景图像。 | 当该元素支持媒体编辑时，面板打开 **上传** 和 **AI 生成** 选项。 |
| **文本** | 更改类型样式。 | 当支持时，面板打开字体大小、粗细、系列、颜色、不透明度和对齐。 |
| **删除元素** | 从当前编辑中删除选定的元素。 | 元素立即在编辑器中消失。如果这是意外的，使用 **撤销**，并在保存前查看。 |
| **撤销** | 反转最新的未保存可视化编辑。 | Runner 通过当前设计模式编辑历史向后步进。 |
| **重做** | 重新应用您刚刚撤销的编辑。 | Runner 通过当前设计模式编辑历史向前步进。 |
| **保存** | 保留当前的可视化编辑。 | Runner 写入待处理的更改，在可能时记录新版本快照，清除此会话的撤销/重做历史，并重新加载预览。当没有要保存的内容时，按钮被禁用。 |
| **关闭** | 离开专用设计面板。 | Runner 返回到正常店面预览并清除未保存的编辑和命令历史。如果要保留更改，请先保存。 |

## 进行安全的可视化更改

1. 在打开设计模式前在正常预览中导航到目标页面。
2. 进入设计模式并选择一个元素。
3. 为此更改选择一个路径：
   - 对于直接编辑，使用 **间距**、**图像**、**文本** 或 **删除元素**，然后使用 **撤销** 或 **重做** 查看它并选择 **保存**。
   - 对于 AI 请求，首先保存任何待处理的直接编辑，如果需要重新选择元素，在 **询问 Runner AI** 中输入指令，然后发送它。当 Runner 启动时，选择和未保存的直接编辑历史被清除。
4. 等待选定的保存或 Runner 请求完成，然后在正常预览中查看页面。
5. 再次在 **电脑**、**平板** 和 **手机** 布局中检查页面。
6. 仅在保存的预览通过您的审查后发布。

## 状态、限制和故障排除

| 您看到的内容 | 含义 | 要做什么 |
| --- | --- | --- |
| **启动设计模式…** | Runner 正在准备可编辑的预览。 | 保持最新版本选中。 |
| **设计模式未启动** | 可编辑的预览未准备好。 | 选择 **重试**。如果重复，返回正常预览并刷新。 |
| **Iframe 仍在加载** | 元素检查未准备好。 | 等待店面完成加载。 |
| **AI 处理时禁用可视化编辑器** | Runner 正在处理另一个请求。 | 等待请求完成，然后再次选择元素。 |
| **询问 Runner AI** 请求后 Runner 启动 | 可视化编辑器为新任务重置。 | 任何未保存的直接编辑及其撤销/重做历史被丢弃。在发送请求前保存直接编辑。 |
| **AI 编辑不适用于动态内容** | 选定的内容无法通过该控件更改。 | 在常规 Runner 聊天中描述页面和所需结果。 |
| **没有要撤销/重做/保存的内容** | 当前设计模式会话没有匹配的操作。 | 首先选择可编辑元素并进行更改。 |
| **保存对源文件的更改** | Runner 完成了设计模式保存。 | 等待预览重新加载，然后再次查看更改的页面。 |
| 编辑已保存但不是实时的 | 保存更改更新项目，而不是已发布的店面。 | 查看当前版本，然后选择 **发布更改**。 |

## 相关指南

- [编辑内容、页面和媒体](./edit-content-pages-and-media)
- [预览您的商店](./preview-your-store)
- [使用版本历史](./version-history)