這篇回顧目前的架構、使用的技術以及資料流，留下一份紀錄。

架構與技術堆疊

專案核心是一個輕量化計時器，前端採用 Vue 3 + TypeScript，透過 Vite 打包，以 Vue Router 管理路由，狀態由 Pinia 負責。介面設計使用Tailwind CSS進行 RWD，確保在手機、平板與桌機上都有良好體驗。

三維互動使用 Three.js，在倒數頁中呈現一顆隨呼吸起伏的 3D 球體與星塵。主要邏輯是建立場景、燈光與粒子效果，透過 requestAnimationFrame 更新動畫，並支援滑鼠互動。

後端與資料持久化則交給 Firebase

• Authentication：提供 Google 登入、Email 註冊登入，登入狀態會同步到 Pinia 並載入或遷移本機紀錄。
• Firestore：計時完成後的紀錄會存到 sessions 集合，未登入的狀態則暫存於瀏覽器，等登入後批次上傳。
• Posts：貼文牆的資料存於 posts 集合，包含內容、完成秒數等欄位。

核心功能與頁面

目前已完成的主要頁面有：

• 歡迎頁：簡潔的介紹與進入按鈕。
• 設定頁 (/setup)：選擇專注時長（預設 15、30、45 分鐘或自訂）、環境音樂與標題。進度環與顏色會隨專注意圖改變，設定與音量會寫入 localStorage。
• 計時頁 (/timer)：從路由 query 讀取分鐘數與音樂參數，並啟動倒數。倒數邏輯封裝在 useCountdown，包含計算進度、格式化時間與完成事件。
• 完成頁 (/done)：顯示本次計時的標題與實際完成時間，並提供返回或分享至貼文牆的選項。
• 留言牆 (/wall)：列出完成紀錄，支援按讚與留言，互動邏輯由 posts.ts 提供。

資料流與互動

整體資料流大致分為三部分：

1. 前端狀態
   設定頁使用 ref 與 computed 管理選擇的時長、自訂分鐘數、音樂 ID，最後彙總為 effectiveMinutes，再透過 Vue Router 導向計時頁。

2. 計時與記錄
   計時頁讀取 query 建立倒數，並即時更新進度與時間顯示。倒數結束會呼叫 sessions.logCompletion 將結果寫入 Firestore 或本地，接著可以選擇輸入分享文字並透過 postAchievement 將貼文存到 posts。

3. 背景音樂
   全域透過 useBgm 管理 audio 元件，讀取 localStorage 的設定，在路由切換時保持不中斷。如果串流播放失敗，會自動切換備用電台來源。

目前 FlowNest 已具備的功能：專注計時、動畫引導、環境音樂，以及完成後分享到留言牆；明天再繼續進展專案進度。