> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 設計編輯器使用指南

> 設計編輯器的使用技巧和問題解決方案.

## 使用技巧

### 使用設計編輯器替換圖片

使用設計編輯器功能,可視化替換圖片,所見即所得.

**操作步驟**:

1. 點擊頂部導航欄的「設計編輯器」按鈕
2. 選擇要替換的圖片佔位符
3. 選擇新圖片完成替換

**優势**:

* 可視化操作,直觀明了
* 即時預覽效果
* 不需要修改代碼

***

### 使用設計編輯器快速調整樣式

使用設計編輯器功能,快速調整顏色,排版,間距等樣式.

**可調整內容**:

* 文本內容和樣式
* 顏色和背景
* 字體和字號
* 間距和佈局
* 響應式設置

**操作方式**:

1. 點擊頂部導航欄的「設計編輯器」按鈕
2. 選擇要修改的元素
3. 直接調整屬性
4. 即時查看效果

***

### 可視化編輯的優势

可視化編輯比改代碼更快更安全.

**優势**:

* **速度快**:直接操作,無需寫代碼
* **安全性高**:不會破壞現有功能
* **即時預覽**:立即看到效果
* **易於調整**:可以反覆修改

**適用場景**:

* 調整樣式和佈局
* 修改文本內容
* 替換圖片資源
* 優化響應式設計

***

## 問題解決

### 無法替換圖片

**問題現象**:

* 無法替換頁面中的圖片
* 上傳文件後無法使用

**解決方案**:

1. **使用選擇元素編輯**:點擊"選擇元素編輯"，選中圖片，在對話中提供新圖片地址
2. **使用 superun 文件存儲**:將圖片上傳到 superun 文件存儲，然後在對話中引用圖片鏈接
   * 進入"研發→服務→superun 文件存儲"
   * 上傳圖片文件到文件存儲
   * 獲取圖片鏈接後在對話中使用
3. **使用設計編輯器**:點擊頂部導航欄的"設計編輯器"按鈕，可視化替換圖片
   * 在設計編輯器中，如果選不中圖片，可以右鍵選擇正確的層級元素
   * 選擇圖片後，直接選擇新圖片完成替換
4. **在對話中描述**:截圖標註要替換的圖片位置，在對話中描述替換需求