今天我們要將這些體驗洞察與防呆邏輯，落實為具體的 Low-Fi Wireframe（低擬真線框稿）與 React 前端元件規格（Component Spec）。在寫下第一行程式碼之前完成這一步，能確保前端畫面排版順暢、完全符合行動端（Mobile-First）體驗，並讓後續與 Google Apps Script (GAS) API 接軌時零浪費。

一、 Mobile-First 無障礙與防呆設計四大原則

為了同時照顧到習慣手機操作的職工與老花眼的資深志工，我們確立了四大介面設計原則：

1. 零彈窗頁面流（No-Modal Flow）： 所有新增表單與查詢面板，點擊後皆於頁面內「自然向下展開/收合」。即使手機軟鍵盤跳起，頁面也會順暢上推，絕不遮擋「確認送出」按鈕，徹底解決 Mobile 端的 Viewport 滾動卡死與 z-index 層級問題。
2. 雙時制無縫切換（Time-Format Adaptability）： 頂部設有顯眼的「12H / 24H 模式切換鈕」，支援一鍵切換（例如：下午 02:00 vs. 14:00），並自動記憶於瀏覽器的 localStorage 中。
3. 雙重狀態標示（Dual-Status Signaling）： 擺脫單純依賴「紅/綠」色彩區分的傳統設計，所有場地格子均強制加上文字標籤（如 [空閒可預約]、[已佔用]），照顧色弱與高齡志工。
4. 大觸控熱區（Touch-Friendly Targets）： 所有按鈕與可點擊卡片，最少維持 48x48 px 的點擊面積，防止志工在平板或手機上誤觸。

二、 核心介面 Low-Fi Wireframe 原型繪製

我們將系統收斂為一個核心主視窗與兩個手風琴內嵌卡片（可展開/收合）：

1. 主看板與頂部控制區 (Main Dashboard)

頂部呈現全局開關與 90 天預約邊界提示。中間設有主要功能卡片的展開按鈕。

+-----------------------------------------------------------------------------------+
| [NGO 資源預約系統]   [📢 僅開放 90 天內預約]         [顯示時制: 下午02:00 (12H) v] |
+-----------------------------------------------------------------------------------+
|  < 2026 年 09 月 >   [前往今天]                                                    |
|  [ ➕ 新增預約 (展開/收合卡片) v ]   [ 🔍 查詢改期令牌 (展開/收合卡片) v ]           |
+-----------------------------------------------------------------------------------+
| 📅 預約日曆矩陣                                                                   |
| 星期 / 場地  | 活動室 A1 (綠色)      | 活動室 B1 (藍色)      | 移動設備庫存 (投影機/電視) |
+--------------+-----------------------+-----------------------+--------------------+
| 09/23 (三)   | 09:00-12:00 專案會議  | [ 空 閒 可 預 約 ]    | 投影機: 0/1 (已被借用) |
|              | 02:00-04:00 下午茶會  | 02:00-05:00 志工培訓  | 移動電視: 1/1      |
+--------------+-----------------------+-----------------------+--------------------+
| 09/24 (四)   | [ 空 閒 可 預 約 ]    | 10:00-12:00 董事會    | 投影機: 1/1        |
|              |                       |                       | 移動電視: 1/1      |
+-----------------------------------------------------------------------------------+

2. 內嵌式「新增預約與 AI 語意輸入」展開面板 (Inline Booking Card)

當使用者點擊「➕ 新增預約」時，此卡片會向下推開頁面展開。內部整合了 Gemini 3.6 Flash 自然語言一鍵解析與標準表單欄位。

+-----------------------------------------------------------------------------------+
| 🔽 【新增預約表單】 (點擊標題可向上收合 ^)                                          |
+-----------------------------------------------------------------------------------+
| 🤖 Gemini 3.6 Flash 智慧輸入 (貼上需求，例：「下週三下午兩點借 A1 房和投影機 2 小時」) |
| [ 下週三下午兩點要借活動室 A1 與投影機 2 小時...                            ] |
|                                                               [ ✨ AI 一鍵解析帶入 ]|
|-----------------------------------------------------------------------------------|
| 預約部門 / 申請人 : [ 青年服務部 - Alex                      ]                    |
| 選擇場地          : (o) 活動室 A1   ( ) 活動室 B1   ( ) 多功能會議室              |
| 預約日期          : [ 2026-09-23 ] (自動限制只能選 90 天內合法日期)               |
| 開始 / 結束時間   : [ 下午 02:00 v ] 至 [ 下午 04:00 v ] (隨 12H/24H 時制動態切換)  |
| 附加移動設備     : [x] 投影機 (剩餘 1 台)   [ ] 移動電視 (剩餘 1 台)            |
| 折抵改期 Token    : [ TK-20260901-8A                     ] [ 驗證 Token ]     |
|                   (提示：輸入有效 Reschedule Token 可免除新增借用額度)             |
|                                                                                   |
|                                                     [ 收起表單 ]  [ 確認送出預約 ] |
+-----------------------------------------------------------------------------------+

3. 內嵌式「改期令牌 (Reschedule Token) 查詢與核銷」展開面板 (Inline Token Card)

透明化展示所有因故取消但仍在 60 天效期內的 Token，供志工核銷抵用，徹底封殺人工套單疑慮。

+-----------------------------------------------------------------------------------+
| 🔽 【改期令牌 (Reschedule Token) 管理與核銷】 (點擊標題可向上收合 ^)                |
+-----------------------------------------------------------------------------------+
| 🔍 快速搜尋 Token 碼或部門：[                                       ] [搜尋]      |
|-----------------------------------------------------------------------------------|
| 令牌代碼       | 申請部門   | 原預約日期 | 效期剩餘 | 已改期次數 | 當前狀態 | 操作   |
|----------------+------------+------------+----------+------------+----------+--------|
| TK-20260901-8A | 青年服務部 | 09/01 (二) | 剩 42 天 | 1 / 2 次   | 有效     | [套用] |
| TK-20260810-3F | 社區關懷組 | 08/10 (一) | 剩  2 天 | 2 / 2 次   | 已達上限 | [失效] |
|-----------------------------------------------------------------------------------|
| 💡 業務規則提醒：1 天前取消方可獲得 Token，效期 60 天，單一 Token 最多允許改期 2 次。 |
|                                                                     [ 收起面板 ]  |
+-----------------------------------------------------------------------------------+

三、 React 前端元件樹與 State 規格拆解

基於上述手風琴內嵌卡片結構，我們將前端系統拆解為模組化的 React 元件樹（Component Hierarchy）與 State 管理規格：

App (主容器)
├── Navbar (標頭與全域設定)
│   ├── TimeFormatToggle (12H/24H 雙時制開關)
│   └── BoundaryNotice (90 天預約上限邊界提示)
├── DashboardContainer (主面板容器)
│   ├── ActionToolbar (卡片展開/收合控制按鈕組)
│   ├── InlineBookingCard (手風琴內嵌預約表單卡片 - state: isBookingOpen)
│   │   ├── AIPromptInput (Gemini 3.6 Flash 智慧解析欄位)
│   │   └── ResourcePicker (場地與影音設備選取器)
│   ├── InlineTokenCard (手風琴內嵌 Token 管理卡片 - state: isTokenOpen)
│   │   └── TokenTable (Token 狀態與一鍵套用列表)
│   └── ResourceCalendarGrid (場地與設備日曆看板)
└── Footer (頁尾與 Excel 報表匯出按鈕)

全域與元件層級 State 規劃：

四、 防呆與狀態觸發（UI Validation）細節

為了防範操作失誤，元件介面設定了以下幾項硬性 UI 鎖定機制：

1. 90 天日期閘門鎖定：

• 日期選擇器 (<input type="date">) 與日曆格子的 max 屬性，強制設定為 today + 90 days。超過 90 天的日期呈灰底（opacity-50）且不可點擊。

2. 1 天前最晚取消鎖定：

• 預約卡片中的「申請取消/改期」按鈕，若系統偵測離預約開始時間小於 24 小時，自動轉為置灰狀態（disabled），並浮現提示：[已過最晚取消時限 (1天前)]。

3. AI 帶入載入中狀態 (Loading State)：

• 當使用者點擊 [ ✨ AI 一鍵解析帶入 ] 時，按鈕轉為轉圈載入動畫，暫時停用 [ 送出預約 ]，避免資料解析尚未完成前被重複提交。

明天繼續…