Google Integration Modal Demo
1. 初始連接流程
首次連接 Google 帳戶的完整流程
2. 帳戶管理
管理已連接的 Google 帳戶設定
設計說明
彈窗流程:
- 歡迎頁面 - 說明將存取的資料和隱私保護
- 連接帳戶 - 模擬 Google OAuth 授權流程
- 同步設定 - 選擇要同步的資料類型和歷史範圍
- 選擇聯絡人 - 指定要追蹤的聯絡人
- 完成頁面 - 顯示成功訊息
設計特色:
- 採用您的設計系統:rounded-[20px]、#252540 主色調
- 完全繁體中文介面
- 清晰的步驟導航與返回功能
- 隱私保護提示(類似 Clay 的設計)
- 響應式設計,適配各種螢幕尺寸
實際實作時需要:
- 整合真實的 Google OAuth 2.0 流程
- 從資料庫載入實際的聯絡人列表
- 實作後端 API 來處理同步邏輯
- 加入載入狀態和錯誤處理
- 實作資料同步的背景任務