Skip to content

QUICK_TEST_GUIDE.md

Latest commit

 

History

History
186 lines (135 loc) · 3.89 KB

QUICK_TEST_GUIDE.md

File metadata and controls

186 lines (135 loc) · 3.89 KB

🚀 快速測試指南 - Modifier 系統

立即開始測試

1️⃣ 啟動開發伺服器

npm run dev

打開瀏覽器訪問 http://localhost:5173

📋 5 分鐘測試清單

✅ 基礎測試（2 分鐘）

測試 1: Gaussian Blur（模糊）

  1. 點擊左側 Blur 分類
  2. 點擊 Gaussian Blur 添加
  3. 右側面板會出現新修飾器
  4. 點擊 ⬇️ 展開參數
  5. 拖動 Radius 滑桿 (0 → 50)

✓ 預期結果: 圖片即時變模糊

測試 2: Brightness/Contrast（亮度/對比度）

  1. 點擊左側 Core 分類
  2. 點擊 Bright/Contrast 添加
  3. 展開參數，調整兩個滑桿：
    • Brightness: -50 → +50
    • Contrast: -50 → +50

✓ 預期結果: 圖片亮度和對比度即時變化

測試 3: Hue/Saturation（色相/飽和度）

  1. 點擊左側 Color 分類
  2. 點擊 Hue/Saturation 添加
  3. 展開參數：
    • Hue: 0° → 360°（色相旋轉）
    • Saturation: -100% → +100%

✓ 預期結果: 顏色即時變化（0° 原色 → 180° 互補色）

🎨 進階測試（3 分鐘）

測試 4: 多重疊加（驗證順序）

添加順序:
#1 Gaussian Blur (radius: 10)
#2 Brightness (brightness: +30)
#3 Hue Rotate (hue: 180°)

✓ 預期結果:

  • 圖片先模糊
  • 然後變亮
  • 最後色相反轉（藍→橙）
  • 三個效果同時存在

測試 5: Solo 模式

  1. 保持上面 3 個修飾器
  2. 點擊第 2 個修飾器的 👁️ Solo 按鈕
  3. 觀察預覽：只顯示 Brightness 效果
  4. 再次點擊 👁️ 取消 Solo

✓ 預期結果:

  • Solo 時只有該修飾器有效果
  • 邊框變為青色
  • 預覽顯示 "(Solo 模式)"
  • 取消後恢復全部效果

測試 6: 啟用/停用

  1. 點擊第 1 個修飾器的 ⚡ Power 按鈕
  2. 觀察效果消失
  3. 再次點擊恢復

✓ 預期結果:

  • 停用時效果消失，卡片變灰
  • 啟用時效果恢復

🎭 推薦效果組合

組合 1: 夢幻濾鏡

1. Gaussian Blur (radius: 5)
2. Bloom (intensity: 40) [如果可用]
3. Hue Rotate (hue: 60°)

組合 2: 復古照片

1. Noise (amount: 20%)
2. Posterize (levels: 5)
3. Vignette (amount: 50) [如果可用]

組合 3: 故障藝術

1. Glitch (intensity: 70)
2. Chromatic Aberr (amount: 30)
3. Threshold (level: 100)

🔧 測試其他功能

可調整欄寬

  1. 將滑鼠移到分隔線上
  2. 拖拽左側分隔線（目錄欄 200-400px）
  3. 拖拽右側分隔線（操作欄 320-600px）

✓ 預期: 分隔線高亮，欄位寬度即時調整

展開/折疊

  1. 點擊修飾器右側的 ⬆️ / ⬇️ 按鈕
  2. 參數面板展開/折疊

✓ 預期: 平滑過渡動畫

移除修飾器

  1. 點擊修飾器的 🗑️ Delete 按鈕
  2. 或點擊右上角 清除全部

✓ 預期: 修飾器消失，預覽恢復原圖

❌ 已知限制

以下修飾器顯示虛線邊框，表示需要 WebGL/Canvas 實現：

  • Repeater, Liquify, Displacement Map
  • Kaleidoscope, Halftone Luma, Extrude
  • AI Fill, Remove BG, Split Layers
  • 等 15 個進階效果

這些修飾器的完整實現需要：

  • Three.js 或 PixiJS
  • WebGL Shaders
  • 後端 API（AI 功能）

🐛 如何回報問題

如果發現問題，請提供：

  1. 瀏覽器: Chrome 120 / Safari 17 / Firefox 120
  2. 操作步驟: 詳細重現步驟
  3. 預期結果 vs 實際結果
  4. 截圖/錄影: 如果可能的話

✨ 測試通過標準

  • ✅ 所有基礎修飾器（Blur, Brightness, Hue）正常工作
  • ✅ 多重疊加按順序生效
  • ✅ Solo 模式正確隔離
  • ✅ 參數滑桿即時更新
  • ✅ 啟用/停用按鈕正常
  • ✅ 展開/折疊動畫流暢
  • ✅ 可調整欄寬功能正常
  • ✅ 圖片錯誤處理（如果圖片無法載入）

測試時間: 約 5 分鐘 狀態: 🟢 準備測試

最後更新: 2025-11-25