需求:Mac 端 installer 體驗類比 Windows .exe — 進 DMG 就看到漂亮的視窗
背景 + 拖到 Applications 的視覺引導。
實作:
- installer/macos/ 新資料夾
- make-dmg-background.py:動態生成 640×400 深色背景,配色對齊 Wails
控制台 splash(#111827→#0B0F19 漸層 + #38BDF8 accent)
- background.png + background@2x.png(1x + 2x Retina)
- Makefile dmg 拆三 target:
- dmg:auto-detect,有 create-dmg 走 fancy,沒有 fallback plain(CI 無痛)
- dmg-fancy:強制美化版(需 `brew install create-dmg`)
- dmg-plain:原 hdiutil UDZO(保留為 fallback)
- Windows / Linux 流程零改動
驗證:
- `make dmg-fancy` 產出 157MB DMG,mount 後內容:app + Applications 捷徑
+ .background/background.png + .DS_Store(視窗樣式)
- `hdiutil verify` 通過
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
macOS DMG 美化資源
檔案
| 檔案 | 用途 |
|---|---|
make-dmg-background.py |
生成背景圖的 Python script(需 Pillow) |
background.png |
640×400 DMG 背景圖(1x) |
background@2x.png |
1280×800 DMG 背景圖(Retina,create-dmg 自動挑用) |
使用
# 一次性安裝
brew install create-dmg
# Build 美化 DMG
make dmg
make dmg 會自動偵測 create-dmg:
- 有裝 → 產出美化版(深色背景 + 拖曳示意)
- 沒裝 → fallback 到
make dmg-plain(原本的 hdiutil UDZO,CI 友善)
可直接指定 target:
make dmg-fancy— 強制美化版(create-dmg未裝會報錯)make dmg-plain— 強制 plain 版
重新生成背景圖
改配色或文案時:
python3 installer/macos/make-dmg-background.py
會同時輸出 background.png 與 background@2x.png。
設計對齊
背景圖配色對齊 Wails 控制台深色 splash(#111827 → #0B0F19 漸層 + #38BDF8 accent)。
左側 app icon 位於 (180, 200),右側 Applications 捷徑位於 (460, 200),箭頭在中間。