feat: 支援 Telegram 風格底部固定 Tab 導航（IndexedStack）

[abc873693]

背景

目前 HomePageScaffold 以 Drawer（側邊欄） 作為主要導航，底部 NavigationBar 的項目點擊後會以 Navigator.push 推出新頁面。

這與現代 App（如 Telegram、Instagram）的底部 Tab 導航體驗有明顯落差：

• 切換 Tab 後狀態不保留
• 功能入口深藏在 Drawer 的巢狀展開選單
• 返回鍵會離開 Tab，而非回到上一層

目標

讓 HomePageScaffold（或新增對應元件）支援 Telegram 風格的底部固定 Tab 導航：

• 使用 IndexedStack 保留各 Tab 狀態，切換不重建
• 每個 Tab 擁有獨立的 Navigator，支援 Tab 內部頁面堆疊
• 底部 NavigationBar 作為主要導航，Drawer 退為輔助或移除
• 手機版採底部 Tab，桌面/平板版可改用 NavigationRail

提議的 API 方向

HomePageScaffold(
  // 現有欄位保留向下相容
  tabs: [
    HomeTab(
      icon: Icon(Icons.home),
      label: '首頁',
      builder: (_) => HomeContentPage(),
    ),
    HomeTab(
      icon: Icon(Icons.school),
      label: '課業',
      builder: (_) => StudyPage(),
    ),
    // ...
  ],
)

或透過新增 navigationMode 參數切換行為：

HomePageScaffold(
  navigationMode: NavigationMode.bottomTabs, // vs NavigationMode.drawer
  ...
)

使用情境（來自 NKUST AP）

預期 Tab 結構：

Tab	內容
首頁	公告 + 今日課表卡片
課業	課表 / 成績 / 計算學分 / 期中預警
缺曠	申請 / 紀錄
校車	預約 / 記錄（條件顯示）
更多	使用者資訊 / 設定 / 關於

注意事項

• 需保持向下相容，不破壞既有使用 HomePageScaffold 的專案
• 桌面版（shortestSide >= 680）建議維持 NavigationRail 或 Drawer 布局
• Android back gesture 應正確處理 Tab 內 Navigator 的 pop 行為

[abc873693]

補充資料
https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass#Navigation

[abc873693]

實作摘要（PR #182）

已完成

核心功能

• HomeTab 類別：定義每個 Tab（icon, activeIcon, label, builder）
• HomePageScaffold.tabs 參數：傳入即啟用 Tab 模式，不傳則維持現有 Drawer 模式
• IndexedStack + 每個 Tab 獨立 Navigator：切換保留狀態，支援 Tab 內部頁面堆疊
• Android 返回鍵：pop Tab 內頁面 → 回首頁 Tab → 退出對話框

Telegram 風格底部導航

• 懸浮圓角毛玻璃設計（BackdropFilter blur + 半透明背景）
• 寬度自適應 Tab 數量（Row(mainAxisSize: min)）
• 選中：primary 色 + 粗體 / 未選中：onSurfaceVariant
• 無指示器背景，顏色全讀 ColorScheme，可用 Theme 統一管理

響應式佈局

• 手機：底部懸浮 Tab Bar
• 平板（shortestSide >= 680）：側邊 NavigationRail

範例

• apps/example/lib/pages/tab_example/tab_home_page.dart — 4 個 Tab（首頁/課表/成績/更多）使用既有頁面

向下相容

• state、announcements、isLogin 改為有預設值，既有程式碼無需修改
• 不傳 tabs 時行為與現有版本完全一致

[abc873693]

實作進度更新

PR #182 已完成本 issue 的核心訴求（IndexedStack + per-tab Navigator + Telegram-style 浮動 bar），並擴充到 iOS 26 Liquid Glass 風格的 modern UX。

對照 issue 原始需求

原始需求	狀態	說明
IndexedStack 保留 tab 狀態	✅	切換 tab 不重建
每個 tab 獨立 Navigator	✅	tab 內 push 子頁面與其他 tab 隔離
底部 NavigationBar 為主導航	✅	浮動 frosted glass pill
Drawer 退為輔助/移除	✅	tabs 模式下手機端 drawer 預設隱藏（showDrawerOnMobileWhenTabbed: false），tablet 仍可作 sidebar
平板用 NavigationRail	✅	shortestSide >= 680 自動切換，寬度 ≥ 1200 自動 extended=true
HomePageScaffold 支援 tabs 參數	✅	List<HomeTab>?，傳入即啟用
向下相容	✅	不傳 tabs 行為與既有版本完全一致

額外擴充（超出 issue 原始 scope）

• iOS 26 Liquid Glass 雙膠囊版型：tab pill 左對齊縮版、與內層 FAB 同基線並排
• Scroll-aware minimize：往下滑收起、往上滑展開（iOS 26 旗艦體感）
• 重複點 tab → pop / scroll to top：Telegram / Instagram 操作慣例
• Haptic feedback：切 tab 觸感回饋
• Modal sheet / dialog 自動避讓：PopupRoute-aware NavigatorObserver，下游呼叫端不用改 code
• HomeTab.role = .search：iOS 26 search tab slot 對應的語意旗標
• 底部 scrim 漸層：類似 iOS Music / Maps，bar 浮在淡出背景上

後續延伸

開了 #184 規劃把 trailing FAB 拉到 bottom bar 同層，以支援 tab 切換時 FAB 的轉場動畫（為 M3 + Liquid Glass 共用 model 鋪路）。