first commit

docs/frontend/VISUAL_EDITOR_SPEC.md

@@ -0,0 +1,68 @@
+# Visual Editor Spec
+
+## 目標
+
+提供行銷可直接操作的同頁編輯體驗，對齊 Google Optimize / Optimize99 的使用感。
+
+## 核心互動規則
+
+### 1. 選取回饋
+
+- hover 顯示藍色虛線框
+- selected 顯示藍色實線框
+- 滑鼠移動時可快速預覽可選區域
+
+### 2. 直接編輯
+
+- 點選元素後可直接開啟編輯泡泡
+- 支援文字、按鈕文字、按鈕連結、圖片來源、樣式
+- 編輯為即時同步（不用再按套用）
+
+### 3. 結構操作
+
+- 上移 / 下移 / 拖移
+- 隱藏 / 顯示
+- 複製 / 刪除
+- 前插 / 後插
+
+### 4. 歷史機制
+
+- 內容編輯與結構操作都必須可 undo/redo
+- restore 後畫布狀態、選取狀態、泡泡狀態要一致
+
+## 編輯泡泡規格
+
+- 可拖拉、可關閉、固定於視窗可用位置
+- Header 保持簡潔：拖拉點 + 關閉
+- 內容區為可捲動區塊
+- icon hover 要有 tooltip（清楚告知作用）
+
+## Bridge Protocol（頁面與 editor）
+
+### page -> editor
+
+- ready
+- hover/selection 變更
+- structure change 結果
+- history 狀態更新
+
+### editor -> page
+
+- focus selector
+- start inline edit
+- set text / attr / style
+- structure actions
+- restore state
+
+## Selector 與定位策略
+
+- 頁面載入時補唯一 `data-mkt-selector`
+- 插入與複製後重建 selector，避免衝突
+- 相似兄弟節點必須可各自選取
+
+## 不做事項（此階段）
+
+- 不走 Chrome Extension 路線
+- 不增加大型資訊面板干擾畫面
+- 不先做自由版面拖拉排版（以區塊重排為主）
+