Google Integration Modal Demo

1. 初始連接流程

首次連接 Google 帳戶的完整流程

2. 帳戶管理

管理已連接的 Google 帳戶設定

設計說明

彈窗流程:

  1. 歡迎頁面 - 說明將存取的資料和隱私保護
  2. 連接帳戶 - 模擬 Google OAuth 授權流程
  3. 同步設定 - 選擇要同步的資料類型和歷史範圍
  4. 選擇聯絡人 - 指定要追蹤的聯絡人
  5. 完成頁面 - 顯示成功訊息

設計特色:

  • 採用您的設計系統:rounded-[20px]、#252540 主色調
  • 完全繁體中文介面
  • 清晰的步驟導航與返回功能
  • 隱私保護提示(類似 Clay 的設計)
  • 響應式設計,適配各種螢幕尺寸

實際實作時需要:

  • 整合真實的 Google OAuth 2.0 流程
  • 從資料庫載入實際的聯絡人列表
  • 實作後端 API 來處理同步邏輯
  • 加入載入狀態和錯誤處理
  • 實作資料同步的背景任務