從「寫程式碼」到「堆積木」
傳統建站需要寫 HTML、調 CSS、接 API——一個首頁往往耗費數天。而本專案的頁面建構器將此流程徹底顛覆：你只需要拖曳模組，像堆積木一樣拼出頁面。左側是分類清晰的元件面板，右側是所見即所得的即時畫布。從輪播圖到文章列表，從評論區到課程播放器——拖過來，設定一下，頁面就活了。
更驚人的是，它不只是「靜態擺放」。每個模組背後都是一個完整的資料管道：選擇「文章列表」模組，設定好分類、排序、分頁，系統會自動從 WordPress 拉取資料渲染。你調整的是規則，不是死資料。
七大模組體系，覆蓋全場景
建構器的工具列按功能分為七個分組，覆蓋了從內容展示到使用者互動的完整鏈路：
| 分組 | 模組數 | 典型用途 |
|---|---|---|
| 佈局 | 1 | 巢狀容器——實現任意複雜的柵格佈局 |
| 輪播圖 | 2 | 首頁焦點圖、分類輪播 |
| 常規 | 4 | 側邊欄、背景圖、麵包屑、公告欄 |
| 歸檔 | 5 | 文章列表、分類篩選、搜尋、時間歸檔 |
| 文章 | 22 | 正文、作者、評論、問答、打賞、按讚、課程、產品、作品集、團隊、活動等 |
| 頁面 | 3 | 分類目錄頁、連結頁、使用者列表頁 |
| 模組 | 12 | 影片、圖片、關於我們、計數器、評價、標語、連結、加入我們等 |
這四十餘個模組不是固定模板——每個都有獨立的設定表單。僅「文章列表」一個模組就能衍生出數十種不同的展示形態。
即時多裝置預覽
桌面端設計完，手機端效果如何？建構器內建三種裝置預覽——Desktop、Tablet、Mobile——一鍵切換，即時縮放畫布到對應寬度。配合頂部工具列的縮放滑桿（25%~200%），每一個像素的響應式表現都盡在掌控。
資料匯入匯出：頁面即檔案
最體現「強大」的功能莫過於資料匯入匯出。你精心設定的頁面可以一鍵匯出為 JSON——包含所有模組的設定資料。換個站點、換個環境，匯入即還原。
- 多站點部署：主站設定好首頁，匯出後批量部署到分站
- A/B 測試：匯出兩個版本，快速切換對比
- 版本回滾：每次大改前匯出一份，改壞了秒還原
- 團隊協作：設計師匯出設定給開發，開發一鍵匯入
每頁獨立設定
| 設定項 | 說明 |
|---|---|
| SEO | 標題、關鍵字、描述 |
| 間距 | Margin、Padding、Border |
| 樣式 | 背景色、自訂 CSS |
| 導航 | 自動生成模組錨點導航 |
| 狀態 | 發佈/草稿 |
| 設為首頁 | 一鍵替換網站首頁 |
技術亮點
markRaw 記憶體最佳化：每個模組的 JSON Schema 表單設定可能非常龐大。建構器使用 Vue 的 markRaw API 將這些設定物件標記為永不代理，避免 reactive 的遞迴追蹤。頁面上有 50 個模組時，記憶體佔用降低 90% 以上。
遞迴重組：匯入/克隆的資料需要合併模組原型 Schema，建構器透過 reorganizePageData 遞迴遍歷所有模組及其子項，智慧合併。
效果作用域隔離：所有資料監聽使用 effectScope 包裹，元件卸載時一次性清理所有副作用，零記憶體洩漏。
總結
這個頁面建構器是一套完整的頁面編排引擎。拖曳模組定義結構，設定表單注入資料規則，匯出 JSON 完成遷移。
適合的網站類型：企業官網、電商商城、線上教育平台、知識付費社群、作品展示站、活動落地頁、文件中心、團隊介紹頁、SaaS 產品頁——幾乎任何內容站都能用它搭建。
