多假期功能測試指南

功能概覽

將假期系統從「一日一假期」升級為「一日多假期」。

已完成的修改

1. 資料庫結構升級

• 新增 20250811200000_support_multiple_holidays_per_date.sql migration
• 將 date 從 primary key 改為普通索引
• 新增 id (uuid) 作為新的 primary key
• 新增 holiday_type, priority, description 等欄位
• 更新觸發器和同步函數支援多假期

2. TypeScript 類型定義更新

• 更新 Holiday 介面支援新欄位
• 新增 HolidayType, HolidayEditForm, HolidaysByDate 類型
• 新增假期類型和優先級選項

3. 前端 Composable 重構

• useHoliday.ts 完全重寫支援新的資料結構
• 新增 holidaysByDate computed 按日期分組
• API 方法改為使用 ID-based CRUD 操作
• 新增便利方法：getHolidaysByDate, isHoliday, getHolidayNames

4. UI 組件更新

• HolidayCalendar.vue: 支援多假期顯示，包含類型色彩標示
• HolidayList.vue: 新增假期類型、優先級、說明欄位的表單和顯示
• HolidayView.vue: 更新事件處理器使用新的 ID-based API

5. 國際化支援

• 新增假期相關翻譯：type, priority, description 等
• 支援中文和英文介面

測試步骤

準備工作

1. 執行 migration 升級資料庫：

   npx supabase db push

2. 確保 Supabase 服務正在運行

基本功能測試

1. 新增假期

• 點擊「新增假期」按鈕
• 填寫表單：
  • 日期：選擇任意日期
  • 名稱：輸入假期名稱
  • 類型：選擇假期類型 (國定假日、公司假期等)
  • 優先級：選擇 1-10 的優先級
  • 說明：填寫可選說明
• 確認可以成功新增

2. 同一天新增多個假期

• 選擇相同日期
• 新增不同名稱和類型的假期
• 確認不再出現「duplicate key」錯誤

3. 日曆顯示測試

• 查看日曆，確認假期日期正確標示
• 單一假期：顯示完整名稱
• 多個假期：顯示多行，每行前有色點表示類型
• 驗證優先級排序 (高優先級在前)

4. 假期列表測試

• 右側列表顯示當月所有假期
• 確認顯示假期類型色點和優先級
• 確認說明文字正確顯示

5. 編輯功能

• 點擊「編輯」按鈕
• 修改假期資訊 (名稱、類型、優先級等)
• 確認修改成功並即時反映在日曆和列表

6. 刪除功能

• 點擊「刪除」按鈕刪除單一假期
• 確認只刪除指定假期，同日其他假期保持不變

進階測試

1. 效能測試

• 新增大量假期資料 (>100筆)
• 確認日曆載入和操作流暢

2. 邊界測試

• 測試同日期最大假期數量
• 測試長假期名稱顯示
• 測試特殊字符在假期名稱中

3. 資料完整性測試

-- 在資料庫中執行完整性檢查
SELECT * FROM check_holiday_data_integrity();

預期結果

✅ 成功指標

1. 可以在同一天新增多個不同的假期
2. 日曆正確顯示所有假期，支援色彩和優先級排序
3. 列表完整顯示假期詳細資訊
4. 編輯和刪除操作準確 (基於 ID 而非日期)
5. 國際化正確顯示
6. 沒有 TypeScript 類型錯誤

🔄 向後相容性

• 現有假期資料自動遷移到新結構
• 所有 API 接口保持向後相容

效能改進

• 優化的按日期分組查詢
• 智能的狀態管理避免不必要的重新渲染

故障排除

常見問題

1. Migration 失敗: 檢查 Supabase 連接和權限
2. TypeScript 錯誤: 確認所有類型定義正確導入
3. UI 顯示異常: 檢查 computed 屬性和 watch 監聽
4. 資料不同步: 驗證觸發器是否正確執行

除錯工具

• 瀏覽器開發者工具檢查 console 錯誤
• Vue DevTools 檢查組件狀態
• Supabase Dashboard 檢查資料庫狀態