Day 30: 【前端 #9】建立大門與鑰匙：根據流程圖實現前端使用者認證

# 角色 (Role)
你是一位頂尖的資安前端架構師 (Principal Frontend Engineer & Security Advocate)，精通 JWT 認證機制、狀態管理、API 客戶端設計與單頁應用程式 (SPA) 的路由管理。你擅長將複雜的認證規格，轉化為一個安全、穩固、可擴展且具備卓越使用者體驗的完整前端架構。

# 目標 (Objective)
請**嚴格依據**《前端認證架構藍圖》，對我現有的前端專案進行一次全面的**架構性重構與功能實作**，為其注入一個完整的「使用者認證」系統。

# 上下文與關鍵資訊 (Context & Key Information)
* **唯一真理來源**: `@docs/AUTH_FLOW.md` (所有流程、狀態、路由決策的最終依據)。
* **目標修改檔案**: `@frontend/index.html`, `@frontend/script.js`, `@frontend/api.js`, `@frontend/style.css`。

# 核心架構決策 (Key Architectural Decisions)
1.  **API 客戶端攔截器**: `api.js` 必須被重構，使其包含一個**集中的 `apiFetch` 函式**。未來所有需要認證的 API 請求，都必須透過此函式發出，它會自動處理 `Authorization` 標頭的附加。
2.  **SPA 路由模擬**: 我們將透過一個簡單的 `router` 物件來管理頁面的顯示與隱藏，模擬單頁應用的路由行為。
3.  **應用程式啟動程序 (Bootstrap Sequence)**: `script.js` 的執行入口將是一個名為 `initializeApp` 的函式，它負責協調「檢查本地 Token -> 設定初始狀態 -> 執行首次路由」的完整啟動流程。

---
## 產出格式與要求 (Your Task & Output Requirements)

### **Part 1: 重構 `api.js` (實現 Token 感知的 API 客戶端)**
1.  **新增 `loginUser` 和 `registerUser` 函式**，它們不需要 Token，可以直接發送請求。
2.  **建立 `apiFetch` 攔截器**:
    * 建立一個**新的 `apiFetch` 函式** (可參考之前的優化版本)。
    * **關鍵**: 在發送請求前，此函式必須先從 `localStorage` 讀取 Token。如果 Token 存在，就將其附加到 `Authorization: 'Bearer ' + token` 的標頭中。
    * 未來所有需要登入後才能存取的 API 函式（如 `fetchHabits`），都應**重構**為透過 `apiFetch` 來發送請求。

### **Part 2: 重構 `index.html` (搭建 SPA 舞台)**
1.  **建立頁面容器**:
    * 建立 `<div id="auth-page-container">`，並在其中放入登入和註冊的表單結構。
    * 將現有的 `<div class="app-layout">`，用 `<div id="app-page-container">` 包裹起來。
2.  **預設狀態**: 在 CSS 或 JS 中，確保這兩個容器預設都是隱藏的 (`display: none`)。

### **Part 3: 全面升級 `script.js` (注入認證核心)**
1.  **升級狀態中心 (`state`)**:
    * 根據規格書，擴充 `state` 物件，加入完整的認證狀態機：`authStatus: 'idle'`, `user: null`, `authToken: getTokenFromStorage()` (從本地初始化)。
2.  **實作 Token 管理**: 建立 `saveToken(token)` 和 `clearToken()` 等函式，封裝 `localStorage` 操作。
3.  **實作「路由」模組**:
    * 建立一個 `router` 物件，包含 `showAuthPage()` 和 `showAppPage()` 方法，用於切換頁面容器的顯示。
4.  **實作「認證動作 (Auth Actions)」**:
    * 建立 `handleLogin`, `handleRegister`, `handleLogout` 等 `async` 函式。
    * **嚴格遵循**規格書中的流程圖撰寫，完整包含**狀態更新 (`setState`)**、**API 呼叫**、**Token 操作**、**錯誤處理**、以及**最終的路由跳轉** (`router.show...`)。
    * **使用者體驗**: 在 API 請求期間 (`authStatus: 'loading'`)，**必須**禁用相關的表單提交按鈕。
5.  **建立「應用程式啟動器 (App Initializer)」**:
    * 建立一個名為 `initializeApp` 的主 `async` 函式。
    * **啟動流程**:
        1. 檢查 `state.authToken` 是否存在。
        2. (可選，但建議) 如果存在，可以呼叫一個 `/auth/verify` 之類的 API 來驗證其有效性。
        3. 根據驗證結果，設定最終的初始狀態 (`authenticated` 或 `unauthenticated`)。
        4. 呼叫 `render()` 進行首次渲染。
        5. 呼叫 `router` 顯示正確的初始頁面。
6.  **升級渲染引擎 (`render`)**:
    * `render` 函式現在需要根據 `state.authStatus` 和 `state.user` 來決定 UI 的顯示方式（例如，在 `app-page` 的 header 中顯示使用者名稱和登出按鈕）。
    * 監聽登出按鈕的點擊事件，觸發 `handleLogout`。

### **Part 4: 修改 `style.css` (美化新介面)**
* 為新的登入/註冊頁面 (`#auth-page-container`)，追加符合《風格指南》的 CSS 樣式。
* 為按鈕的 `:disabled` 狀態，加入明確的視覺樣式（例如 `opacity: 0.5; cursor: not-allowed;`）。