> ## 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.
# 手動編輯
> 在不改動程式碼的前提下,透過「手動編輯（Manul Edit）」以所見即所得的方式微調單一頁面的佈局,樣式與文案,並選擇套用或放棄這次修改.
## 功能總覽
**手動編輯（Manul Edit）** 讓你在 AI 已經生成頁面之後,對**單一頁面**做更細緻的手動調整.
你可以:
* 在可視化介面中調整佈局與樣式（顏色,字級,對齊,邊框,圖片編輯等）
* 直接修改文案內容,所見即所得
* 決定這次修改是要真正套用到專案,還是只在本次會話中試試看
> **手動編輯是免費功能,不會消耗任何算力值.**\
> 目前只針對**當前頁面**生效,不會自動同步到其他頁面.
***
## 如何進入手動編輯（Manul Edit）
### 1. 從預覽頁進入
在專案頁面切換到 **「預覽（Preview）」** 分頁,等待頁面載入完成.
右上角工具列中可以看到一個入口按鈕:
* **「選擇元素並編輯」** 按鈕（圖示在工具列右上）
### 2. 選擇要編輯的元素
點擊 **「選擇元素並編輯」** 後,游標移到畫面中:
* 可編輯的元素會出現綠色虛線框
* 點擊其中一個元素時,旁邊會彈出一個小對話框
在對話框中點擊 **「手動編輯」** 按鈕,即可針對目前這個頁面與元素進入手動編輯介面.
> 只有在你具備編輯權限（擁有者 / 編輯者）,且預覽已載入完成時,這個入口才會啟用.
***
## 什麼情況下可以使用手動編輯?
**手動編輯（Manul Edit）入口** 會在以下條件都滿足時才會被點亮:
* **權限條件**
* 目前登入帳號在專案中的角色為 **擁有者（Owner）** 或 **編輯者（Editor）**
* 如果你只是 **檢視者（Viewer）**,可以看頁面但無法開啟手動編輯
* **頁面狀態條件**
* 頁面預覽已載入完成,可以正常滾動與操作
* 這個專案在本次會話中已經成功生成過畫面（不是還在「空白專案,尚未生成」狀態）
* 不在「風格待選擇」引導畫面,而是已經進入正常使用的頁面
* **編輯流程條件**
* 目前沒有處於另一個編輯流程中（畫面右上角沒有顯示「退出編輯」）
* 系統不是「正在進入編輯」的載入中狀態
* 剛才沒有一個仍在進行中的「應用修改 / 更新產品」動作
第一次使用時,系統會先跳出一個 **「編輯提示」對話框**,提醒你先完整瀏覽當前頁面（否則只能保證目前視窗範圍內可編輯）,點擊確認後才真正進入編輯模式.
***
## 什麼情況下不能使用手動編輯?
以下情境中,「選擇元素並編輯」與「Manul Edit」會被禁用,或點擊後不會打開編輯器.此時畫面右上角的「選擇元素並編輯」入口會顯示為禁用狀態,待對話或系統流程結束,頁面準備完成後才會恢復可點:
* **沒有編輯權限**
* 目前使用者不是擁有者（Owner）或編輯者（Editor）,例如以只讀成員身分被分享進專案
* **頁面尚未準備好**
* 頁面仍在載入中,或剛發布完,預覽服務還在啟動
* 這個專案還沒有生成任何畫面,例如剛建立專案但尚未完成第一次生成
* 仍停留在「選擇風格 / 主題」畫面,系統要求先完成風格選擇
* **對話流仍在進行中**
* 當前有一個尚未結束的 AI 對話 / 生成流程正在執行
* **編輯流程衝突**
* 上一次點擊「手動編輯」仍在開啟中（尚未完全進入編輯介面）
* 系統正在套用上一輪修改,更新產品
* 你已經在編輯介面裡,再次點按鈕只會被視為「退出編輯」,而不是開啟新的編輯
***
## 手動編輯介面說明
進入手動編輯介面後,畫面大致分為三個區塊:
* **左側面板**:當前選中元素的樣式控制項,例如:
* 文字顏色,背景顏色
* 字級,字重,對齊方式
* 邊框寬度,邊框樣式,邊框顏色
* 其他佈局與外觀設定
* **右側**:當前頁面的即時預覽
* **右上角**:**「應用修改」** 按鈕
調整左側的設定值時,右側預覽會即時反映變化.當有樣式或內容變更時,畫面下方會出現 **「恢復原樣」** 與 **「暫存修改」** 兩個按鈕,方便你先暫存本次編輯再決定是否套用.
> **注意**:左側面板中可用的樣式控制項會根據選中的元素類型動態顯示.
>
> * **此處內容由產品功能動態控制,請退出後透過對話修改會有這種情況是正常的**
### 範例:強調某個按鈕
例如在估價頁面中,選中「手機 / 數碼」這個按鈕,並將:
* 背景顏色改為醒目的紅色
* 邊框顏色改為同色系加強提示
***
## 編輯器中的操作:恢復原樣,暫存修改,應用修改,退出
在畫面下方與右上角,會看到幾個關鍵操作按鈕,它們決定這次修改**何時**,**以什麼方式**真正寫入專案.
### 1）恢復原樣
* **作用**:撤銷本次編輯會話中尚未「應用」的所有改動
* **效果**:頁面回到剛進入手動編輯介面時的狀態
* **範圍**:只影響本次手動編輯產生的變更,**不會**回滾之前已經套用到專案裡的歷史修改
### 2）暫存修改
* **作用**:將左側面板中對樣式,顏色,文案等的更改,暫時保存到本次編輯會話中
* **效果**:右側預覽立即反映這些修改,但**尚未寫回專案**
* 可以多次點擊,分多次調整;每成功暫存一次,右上角 **「應用修改」** 按鈕上的計數會加一
### 3）應用修改 / 應用 N 處修改
* 初始狀態:當沒有任何暫存修改時,按鈕為灰色「應用修改」,不可點
* 至少有一次 **「暫存修改」** 後:
* 會變成「應用 1 處修改」「應用 2 處修改」等,並高亮可點
* 點擊後:
* 系統會將這 N 處修改真正寫入專案,更新對應頁面的原型 / 代碼
* 右上角會出現類似 **「變更已儲存」** 的提示
* 計數歸零,按鈕回到灰色的「應用修改」
### 4）退出
* **作用**:退出設計編輯器,回到一般預覽畫面
* **若沒有未應用修改**:
* 直接退出,不再額外提示
* **若存在尚未「應用」的暫存修改**:
* 會跳出確認對話框,可選擇:
* **「直接退出」**:放棄本次編輯會話中所有未應用的修改
* **「應用修改並退出」**:先執行一次「應用 N 處修改」,再自動退出編輯器
***
## 套用 / 放棄修改後會發生什麼?
### 選擇「應用修改」
* 手動編輯會把你調整後的 UI 結構傳回 superun
* 當前專案此頁面的原型 / 產品會被更新:
* 之後的預覽都以這個版本為準
* Build 代碼視圖也會基於這個版本生成
* 日後再讓 AI 繼續修改時,也會以這次手動編輯後的結果為起點
換句話說:從這一刻起,這個頁面的「真相」就是你在手動編輯介面裡調好的那一版,而不是最初純 AI 生成的版本.
### 選擇「放棄更改」
* 本次編輯會話的所有修改都不會寫回專案
* 頁面恢復為進入編輯器之前的狀態
* 不影響後續的 AI 生成或既有代碼
### 中途異常或強制關閉
* 若在「啟動編輯器」或「更新產品」過程中關閉視窗或網路中斷:
* 這一輪編輯可能不會被保存
* 系統會重置「正在進入編輯」等中間狀態
* 之後再次點擊「選擇元素並編輯 / 手動編輯」即可重新開始
* 若你已經 **暫存修改但尚未「應用修改」**,此時直接重新整理頁面或中途離開,再次回到該頁面時,可能會出現以下狀況:
* **預覽畫面** 顯示的是「暫存之前」的版本
* 重新啟動手動編輯後,編輯器內看到的是「暫存之後」的版本
* 也就是說,同一頁面在「預覽」與「手動編輯介面」中,會短暫出現內容不一致的情況
若遇到這種情況,你可以用以下方式處理:
* **使用版本歷史回滾功能**:透過 **版本歷史回滾** 到你確認無誤的版本.這是推薦的解決方式,可以安全地還原到之前穩定的狀態.
* 在對話輸入框中提交指令:**「直接部署,略過檢測」**,讓系統跳過除錯檢測流程（這個流程通常會花一點時間）,以目前版本直接部署
***
前往 superun 官方網站,了解更多功能與實際範例.