# Handoff:ArenaMate 教練系統(28 畫面)

> 給接手的 Claude Code 開發者。目標:把本包的 HTML 設計稿實作進 **ArenaMate 正式 App(Flutter,`Apps/arena_mate`)**,接上背後的真實邏輯。這份 README 自給自足 —— 沒參與這場對話的人也能照著做完。

---

## 1. Overview

ArenaMate 教練排課 / 金流系統的四個角色端,共 28 個畫面:

| 端 | 檔案(本包 `designs/`) | 角色色 | 形式 |
|---|---|---|---|
| 學員端 S1–S7 | `ArenaMate 學員端 S1-S7.dc.html` | 藍 `AC.blue` | 手機 |
| 教練端 C1–C8 | `ArenaMate 教練端 C1-C8.dc.html` | 金 `AC.gold` | 手機 |
| 場館端 G1–G8 | `ArenaMate 場館端 G1-G8.dc.html` | 綠 `AC.green` | 手機 |
| 平台端 P1–P5 | `ArenaMate 平台端 P1-P5.dc.html` | 紫 `#9FA8F0`(operator) | 桌面寬版 console |

原始交付規格書:`https://docs.chefsmate.app/arena-coach-design-spec`
行為參照 prototype:`https://docs.chefsmate.app/arena-coach-prototype.html`
規則正本:`docs/Arena_流程邏輯圖.md` §9 + 三方架構報告。

---

## 2. About the Design Files

本包 `designs/` 內的 `.dc.html` 是**設計參照稿(HTML prototype)**,呈現「長怎樣 + 怎麼互動」,**不是拿去直接上線的程式碼**。

你的任務是**在 `Apps/arena_mate` 既有的 Flutter 環境裡重建這些畫面** —— 用該 codebase 既有的元件、token、Riverpod provider 與資料層,而不是搬 HTML。

**老闆鐵則(務必遵守):**
1. **套設計只換視覺,不動佈局邏輯**(restyle 不 redesign)。
2. **只用現有 token,不自創色票**(`lib/design/tokens.dart` 的 `AC`)。
3. **動到 `lib/data/` 前先讀** `docs/Arena_流程邏輯圖.md` §9。
4. **新畫面一律掛 feature flag**(見各畫面「Flag」欄)。
5. **UI 不用 emoji**,一律 Material single-color icon。
6. 新增畫面必同 commit 更新:`docs/Arena_流程邏輯圖.md` §9 + `docs-site/public/arena-testing-data.js`(scenario 編號見各畫面)。

`.dc.html` 開啟方式:任意瀏覽器直接打開即可互動(chips 可選、stepper 可加減、sheet 會彈、翻面卡會翻)。

---

## 3. Fidelity:**High-fidelity**

顏色、字體、間距、圓角、互動皆為最終值,請**像素級重建**。所有數值都能對應到 `lib/design/` 既有 token —— 見 §5 Design Tokens。設計稿裡的示範資料(羽球/排球、陳世豪/林佳穎等)是 placeholder,實作時接真實資料。

---

## 4. 既有元件庫(直接用,別重畫)

| 資源 | 位置 | 用途 |
|---|---|---|
| 色票 `AC` | `lib/design/tokens.dart` | 所有顏色的唯一真相 |
| 字體 `AText` | `lib/design/typography.dart` | `AText.body()` 內文(Noto Sans TC);`AText.display()` 數字/金額(Saira,自帶 tabular)。**金額一律 display** |
| 圓角/間距 `AR` | `lib/design/tokens.dart` | `cardRadius 24 / btnRadius 18 / sheetRadius 28 / pagePad 16` |
| `ArButton` / `ArChip` / `ArCard` / `ArAvatar` / `SectionHeader` | `lib/design/widgets.dart` | 按鈕(pill,solid 依亮度決定字色)/膠囊標籤/卡片/頭像縮寫/區段標題 |
| `AAvatar` | `lib/redesign/ui/a_avatar.dart` | **人一律用它**(有照片+性別 fallback,CachedNetworkImage 下採樣) |
| `courseCover()` | `coach_course_pages.dart` | 課程封面(cover_url 斷點回填),課程圖只准用它 |
| `StickerWallCard` / `showStickerPicker` / `stickerIcon` | `lib/redesign/toy/sticker_widgets.dart` | 貼紙牆 / 送貼紙 picker(上限 3) |
| `TodayClassCapsule` | `lib/redesign/toy/today_class_capsule.dart` | 當日課倒數膠囊 |
| 場館頁 token `TF/TT` | `toy_venue.dart` | 場館頁(toy_venue)自成一套,在該檔內用 TF/TT,**不要混 AC** |

---

## 5. Design Tokens(重建時的精確值,對應 `lib/design/tokens.dart`)

### 色票 `AC`(黑灰玻璃深色系 + 土耳其藍)
```
bg       #0C0D0F   頁底
bg2      #141619   輸入框 / 導覽列底
surface  #16181C   卡片
surface2 #1B1E22   次級卡片
raised   #22262B   toast / 浮起(膠囊實底)
line     rgba(255,255,255,.09)   邊框
line2    rgba(255,255,255,.13)   次邊框
fill     rgba(255,255,255,.05)   淡填色
track    rgba(255,255,255,.08)   進度軌
text     #F1F3F4   主文字
sub      #AAB0B3   次要文字
dim      #787E82   最淡 / hint
green    #35D6C4   主互動色(土耳其藍)· soft = 同色 @ .15
coral    #E8A08C   對手 / 危險 / 敗
gold     #E6B980   金(教練角色色 / 鎖定中金額 / 待確認)
blue     #8FB8CE   銀藍(學員角色色 / 已入帳金額)
pink     #E89BB0   ♀ / 頭像 tint
violet   #9FA8F0   平台角色色(tokens.dart 無此色 → 本設計沿用 futsal 藍紫;若要正式化建議加 AC.violet)
```
角色色慣例:**教練=gold、場館=green、學員=blue、平台=violet(缺就近用 blue)**。
「來源層章」配色:**平台=紫 / 場館=綠 / 課程=金**。

### 字體
- 內文:**Noto Sans TC**(`GoogleFonts.notoSansTc`),常用 w500/w700/w800。
- 數字/金額/計時/比分:**Saira**(`GoogleFonts.saira`),w700/w800/w900,tabular。

### 圓角 / 陰影
- 卡片 radius 24(內層小卡 12–16);按鈕 pill(height/2);sheet 頂部 20–28。
- 卡片柔投影(捏麵卡):`0 24px 40px -14px rgba(70,50,30,.22)` + `0 8px 18px -8px rgba(70,50,30,.10)`。
- solid 主鈕柔投影:`accent @ .40, blur 14, offset(0,9), spread -6`。

---

## 6. 醒目度四級制(反單調系統 —— 每畫面驗收必檢)

- **A 全場焦點(每畫面 0–1 個):** 色底 banner / 大數字卡(主色 10% 底 + 45% 框、標題 w800)。**沒有 A 級=不合格**。
- **B 主要行動(每畫面 ≤2 個):** solid 主色鈕(`ArButton solid`)。一頁最多兩顆實心鈕;第三個以上降 C。
- **C 內容卡(不限量):** surface 底 + line 框 + radius 12–14;kv 兩欄(左灰標籤右粗體值)。
- **D 輔助說明(每卡 ≤1 行):** hint 小字(10.5–11px dim)。超過一行改成「?」icon 點開 sheet。

反單調三招(每頁至少一招):①狀態用形狀(pill 章/色點/進度環)不只用字;②數字放大(`AText.display` 18–24px 配色);③帶 icon 的 section 標題,不要連續 4 張以上同構卡。

---

## 7. 表單鐵則

1. **每個欄位都有預設值**(優先序:上次填的 > 模板/合約帶入 > 參數解析值 > 全平台常見值)。打開即「可直接送出」。
2. **控件選擇順位**(能上面就不用下面):2–8 選項→chips;2–3 互斥→segmented;有步階數字→stepper(時數 30 分階 / 抽成 5% 階 / 堂數 1 階);範圍數字→slider+即時值;日期→月曆點格或系統 picker;清單挑一→picker sheet(帶頭像/摘要,可搜尋);自由文字**只允許**名稱/備註/留言,金額用數字鍵盤+千分位。
3. **選填欄位明顯可跳過** —— 給「不指定(說明後果)」chip(例:代課「不指定 → 缺席時跨館代課池遞補」)。
4. **超過 5 欄=分步精靈**(頂部進度點,最後一步可回改的摘要確認卡)。

---

## 8. 工程陷阱(這 codebase 踩過的坑,實作時避開)

- 內嵌 widget 的 key 別綁 FutureProvider 值(閃 null 會毀 state);動畫元件尤其注意。
- 深色面板忌近黑:surface 要亮過 bg + 帶 line 框;空 list ≠ null(都要有空態文案)。
- Supabase `.order()` 預設降冪,一律明寫 `ascending`。
- per-id family StreamProvider 一律 `autoDispose`(否則漏 websocket)。
- id→名字一律走 `directory.dart` 全域撈;人=`user_profile_id`,禁 per-gym 身分。
- alert 少術語、能背景處理就別彈;錯誤要講人話 + 下一步。
- **金流顯示:費率/金額永遠讀 server 快照欄位,client 不得自算後顯示不同值。**
- 每顆 async 按鈕:按下立即 spinner / 樂觀更新,禁止按了沒反應;批次讀取用 `Future.wait` 併行。

---

## 9. 命名 / 檔案 / Flag 規範

- 畫面檔:`lib/redesign/toy/`(三端用戶面)、`lib/redesign/admin/`(場館後台 / 平台主控台),snake_case。
- 資料層:`lib/data/` —— Gate 純函數(必配 `test/gates/*_test.dart`)+ Repository + Provider,不碰 UI。
- Flag:`lib/data/feature_flags.dart`,`const bool.fromEnvironment('FLAG_XXX', defaultValue: true)`(dogfood 預設開)。
- 命名沿用既有詞彙:課程=course、堂=slot、報名=enrollment、分錄=ledger、撥款批=payout —— 不要換字。

---

## 10. 畫面總表 + 實作對照(狀態:已有=只需視覺升級 / 改造=既有檔加區塊 / 新建=新檔)

> 「醒目度」= A 級焦點元素;「要接的真實邏輯」= 這畫面在正式 App 要 wire 的 Gate / Repository / Provider。詳細互動見各 `.dc.html` 對應畫面。

### 學員端 S(角色色=blue)
| # | 畫面 | Class · 檔案 | Flag | 狀態 | 測試 | A 級焦點 | 要接的真實邏輯 |
|---|---|---|---|---|---|---|---|
| S1 | 開課月曆(行銷) | `GymCalendarPage(marketMode:true)` · `toy/gym_calendar_page.dart` | `kGymCalendarMarket` | 改造 | S40 | 本月摘要 banner + 「看可報名」chip | `gymCalendarProvider` + `CalendarMarketGates`(已建);空態轉灰 |
| S2 | 課程詳情/報名 | `CourseDetailPage` · `toy/coach_course_pages.dart` | `kCourseTermsCard`(新) | 改造 | S41(新) | 課程 hero(courseCover 滿寬+chips+教練列) | 報名三步 sheet:①條款快照卡(4 行,來源層章讀 `resolveParams`)②付款 chips(課包折抵優先/綠界)③成功=分帳入帳;既有 providers + `resolveParams`(P2 建好後接);已報名/截止兩種主鈕狀態 |
| S3 | 我的課程+請假 | `MyCoursesPage` · `toy/coach_course_pages.dart` | `kCourseLeaveDm` + `kMakeupCredit`(新) | 改造 | S42 | 下一堂倒數膠囊(`TodayClassCapsule` 學員版) | 完成率進度環;請假 sheet 讀報名快照時限,超時 disabled + `too_late`;請假成功→S7 補課 credit(僅同課程,法遵) |
| S4 | 成長頁+貼紙 | `MyGrowthPage` · `toy/coach_course_pages.dart` | `kStickerReviewsV2` | 已有 | — | 成就帶(貼紙數大字+streak+技能曲線) | `StickerWallCard`(綠系);picker 選中放大 1.1、送出 confetti(尊重 reduce motion) |
| S5 | 課程推薦區塊 | `CourseRecsSection` · `toy/course_recs.dart`(新) | `kCourseRecsV1` | 新建 | S43 | 橫捲推薦卡列 + 理由 chip | `RecsGates` 純函數:同教練>同館>同類型>程度階梯,各附「因為…」理由字串;空態整段隱藏 |
| S6 | 送貼紙 picker | `showStickerPicker` · `toy/sticker_widgets.dart` | `kStickerReviewsV2` | 已有 | — | 貼紙選擇 grid(上限 3) | `StickerGates`(direction=student_to_coach→gold);送出計數 |
| S7 | 補課 credit sheet | `MakeupCreditSheet` · `coach_course_pages.dart` 內 | `kMakeupCredit`(新) | 新建 | S42 | 「獲得 1 張補課 credit」 | 可用堂次 chips(同課程未滿的未來堂,預設最近一堂);**不做學程券** |

### 教練端 C(角色色=gold)
| # | 畫面 | Class · 檔案 | Flag | 狀態 | 測試 | A 級焦點 | 要接的真實邏輯 |
|---|---|---|---|---|---|---|---|
| C1 | 教練工作室 hub | `CoachStudioSections` · `toy/coach_studio.dart` | — | 改造 | — | 當日膠囊 + 邀約膠囊(有 pending 時金色) | 2×2 磁貼(履歷/模板/開課/行事曆)badge=模板數/待審課數;第五列三小卡→C6/C7/C8 |
| C2 | 模板編輯(每堂價) | `TemplateStudio` · `toy/template_studio.dart` | `kPerSlotPrice` | 改造 | S44 | 頂部總價即時條 | ⚠️ 依賴 DB migration:`coach_course_slots.price` + 模板 sessions jsonb 加 price;分帳/退款/pass 三處連動(批δ)。逐堂 stepper 50 元階;快速工具 chips;拖拉排序(既有 group pattern) |
| C3 | 開課精靈(+代課+截止) | `CourseOpenFlowPage` · `toy/coach_studio.dart` | `kCourseSubGuarantee` | 改造 | S45 | 指定代課後摘要卡亮「代課保障」藍章 | 維持三步骨架,第 2/3 步間插「保障與規則」;segmented 包場/場邊(各帶費用試算);月曆點空閒格;代課 picker(第一 chip=不指定→跨館池);報名截止 chips(讀參數解析,標來源層) |
| C4 | 邀約協商收件匣 | `CoachInvitePage` · `toy/coach_invite_page.dart`(新) | `kInviteNegotiation` | 新建 | S46 | 接受成功=全螢幕動效+push C3(預填) | ⚠️ 依賴 DB 新表 `arena_coach_invites`(gym/coach/slot_text/template_hint/note/status);翻面卡三鈕(接受→生成草稿/回訊→DM/婉拒);通知 kind `coach_schedule_invite` 落點 |
| C5 | 點名+遲到閘門 | `CourseRollCallPage` · `toy/coach_course_pages.dart` | `kLateGate` | 改造 | S47 | 規則膠囊「本館遲到判定 N 分」(讀參數解析) | ⚠️ 依賴:遲到自動判缺席 server RPC(現只有 UI 顯示分鐘);遲到分鐘進度條(綠→黃→紅);超 N 分「完成本堂」變紅「視同缺席(全退+記警)」+ 二次確認列後果三行 |
| C6 | 記帳本+月結算單 | `CoachLedgerPage` · `toy/coach_ledger_page.dart`(新,自 sheet 升級) | — | 新建 | S48 | 三格金額帶(鎖定中金/可撥綠/已入帳藍,`AText.display` 20px) | 月結算單卡(本期應收+複製對帳文字+預計撥款日=參數 payday);分錄按課程分組收合,場地費負項紅字;「已撥款分錄不可異動」 |
| C7 | 我的合約與參數 | `CoachContractPage` · `toy/coach_contract_page.dart`(新) | `kPolicyParams` | 新建 | S49 | 合約狀態帶(三份合約各一狀態章) | 與 P2 同批;「對你生效的參數」表每列=參數名/值大字/來源層章(把「合約=程式同一組數字」可視化);條款全文 = 展開列(`kAgreementText` 唯讀) |
| C8 | 貼紙牆(品牌區) | `StickerWallCard` · `toy/sticker_widgets.dart` | `kStickerReviewsV2` | 已有 | — | 品牌 hero + 三格指標 | 既有 `StickerWallCard`(gold 系),前 3 名;掛 CoachSettingsPage / 品牌頁 coach.html |

### 場館端 G(角色色=green)
| # | 畫面 | Class · 檔案 | Flag | 狀態 | 測試 | A 級焦點 | 要接的真實邏輯 |
|---|---|---|---|---|---|---|---|
| G1 | 後台總覽 hub | `AdminHub`/`AdminTab` · `admin/admin_hub.dart` | — | 改造 | — | 待辦帶(課程待審/教練申請/招募應徵/邀約已回覆 四數字磁貼) | 非零亮紅 badge,全零綠帶;`allManagedPendingCoursesProvider` / `allManagedPendingCoachesProvider` / `allManagedTicketsProvider`;功能磁貼加招募/平台合約/邀約開課 |
| G2 | 課程審核 | `CourseReviewAdmin` · `toy/coach_course_pages.dart` | — | 已有 | — | 審核卡(翻面對照館內月曆,`showPendingCourseCard`) | 代課安排行(有指定藍章/未指定灰);核准=`coachCourseRepo.setStatus('published')`;退回選原因 chips(時段衝突/資料不全/其他)→ `setStatus('rejected', rejectReason)`;核准後 `invalidateCourseViews` |
| G3 | 管理教練+行為指標 | `CoachAdmin` · `toy/coach_pages.dart` | `kStickerReviewsV2` | 改造 | — | header「邀約開課」solid 鈕(→G4) | 每教練:完課率迷你進度環+退款率+請假數+貼紙數;警示 chips 只在樣本夠時亮(報名≥5/堂數≥5,Gate 已建);抽成 stepper 5% 階(0–30)「開課時快照,不溯及」;點列展開近 5 門課 |
| G4 | 邀約教練(協商) | `GymInviteComposer` · `admin/gym_invite.dart`(新,bottom sheet) | `kInviteNegotiation` | 新建 | S46 | 送出鈕帶預覽「陳教練將收到:…」 | 與 C4 同批(寫 `arena_coach_invites`);對象 picker(本館優先+跨館池)、營運月曆點空閒格(重用 ops calendar 資料)、重複 chips、建議模板 chips、條件備註(唯一自由文字) |
| G5 | 招募教練貼文 | `GymRecruitPage` · `admin/gym_recruit.dart`(新) | `kRecruitBoard` | 新建 | S50 | 貼文預覽卡=實際公開樣(編輯即時反映) | ⚠️ DB `arena_gym_recruit_posts` + applies;應徵接受後**復用既有 coach_apply 核准流**;場地 chips(從 `gym_venues` 自動生成)、時段 chips、證照/程度 chips、抽成 stepper(場地費唯讀從場地設定帶) |
| G6 | 公休連鎖決策 sheet | `ClosureCascadeSheet` · `admin/ops_calendar.dart` 內 | `kClosureCascade` | 新建 | S51 | 受影響清單卡大字 | ⚠️ 依賴 cascade orchestrator(改期/代課/退款批次副作用);營運日曆標暫停送出後**自動彈**(有受影響課堂時);決策卡三選一(全改期/有代課照上其餘改期/全取消退款—紅+二次確認列退款總額);退款走**單一退款函數**;零受影響只 toast |
| G7 | 館帳本+撥款確認 | `GymLedgerAdmin` · `admin/gym_ledger_page.dart` | — | 已有 | — | 三格金額帶(累積中/待確認金閃/已入帳藍) | 待確認撥款卡(批金額+逐筆來源+「確認入戶」solid=記銀行收入,既有 RPC);帳本流水 in/out 雙色 + source_type 章(場地費/分潤/退款/平台費) |
| G8 | 開站合約+參數覆蓋 | `GymAgreementPage` · `admin/gym_agreement.dart`(新) | `kGymAgreement` | 新建 | S52 | 合約狀態卡(版本+雙方簽章) | ⚠️ DB `arena_gym_agreements`(版本化,複製教練合約 pattern);條款 kv 唯讀;「本館參數覆蓋」每列=平台預設(灰)→本館值 stepper(v1 即改+審計 log);「改參數只影響之後新報名」toast |

### 平台端 P(角色色=violet;operator 專屬寬版 console)
| # | 畫面 | Class · 檔案 | Flag | 狀態 | 測試 | A 級焦點 | 要接的真實邏輯 |
|---|---|---|---|---|---|---|---|
| P1 | 平台總帳 v2(+P5) | `PlatformMoneyConsole` · `admin/platform_money.dart` | `kPlatformLedgerV2` | 改造 | — | 應付彙總帶(欠教練/欠場館/代管+「代管中」進度條) | header 加齒輪→P2/盾牌→P3/喇叭→P4;撥款節奏卡(過 15 號紅底催辦→產生撥款批);逐筆勾稽貼上框+四桶結果色計數;合約分成總表可排序(已收/課程數)+搜尋;綠界手動結算保留 |
| P2 | 參數中央管理 | `PolicyParamsConsole` · `admin/policy_params.dart`(新) | `kPolicyParams` | 新建 | S49 | 「解析示範」即時卡(選課→每參數最終值+來源層章) | ⚠️ DB `arena_policy_params` 三層表 + `PolicyGates.resolve` + 報名快照欄位(批α,本畫面=操作台);平台預設層 stepper 表(請假 4h/截止 24h/流課窗 24h/遲到 15 分/月結日 chips/缺席停權 2/佔位釋出 3 天/退款三段);儲存=版本化(記 who/when/舊值,列影響範圍);場館覆蓋一覽(比平台嚴/鬆箭頭) |
| P3 | 風控台 | `RiskConsole` · `admin/risk_console.dart`(新) | `kRiskConsole` | 新建 | S53 | 代管資金自證卡(代管中總額大數字+逐筆可列) | ⚠️ 課包轉讓 Gate(轉讓後不可退/限轉 1)要進 pass 引擎 server 端,本畫面=開關+事件流;三 toggle(轉讓後不可退/限轉 1/冷卻 72h,預設全開)各一行理由;風險事件流(被 Gate 擋的操作,空態綠帶);留存價值 checklist(金流保障/履歷/報稅/團保,各狀態章) |
| P4 | 推銷決策 | `PromoteConsole` · `admin/promote_console.dart`(新) | `kPromoteConsole` | 新建 | S54 | 教練排行卡列(四指標迷你條) | 綜合排序(完課率/續約/貼紙/累積學費,權重 Gate 可調);「加入推薦位」toggle=名師駐館機制;推薦位現況(拖拉排序);**有記警/停權者自動不可推**(Gate 擋,toggle disabled) |
| P5 | 撥款批管理 | (P1 內區塊) · `admin/platform_money.dart` | `kPlatformLedgerV2` | 已有 | — | 撥款批列 | 批列(批號/對象/筆數/金額/狀態章),P1 捲動區 |

---

## 11. 互動 / 行為(通用)

- **翻面卡 FlipCard**:`Matrix4 rotateY` + 透明路由,正面精華 / 背面詳情;點卡或水平拖拉翻面。用於課程審核卡(G2)、邀約卡(C4)、月曆活動卡。設計稿裡 `transform:rotateY(180deg)` + `transform-style:preserve-3d`,Flutter 用既有 `_CalendarEventCard` / `_FlipCoachCard` pattern。
- **倒數膠囊**:`AC.raised` 實底 + 彩色框(上課中=coral,未上課=green),點開 bottom sheet 學員名單。
- **chips 選擇器**:選中態=主色底 16% + 主色框 1.6px;多選有上限(貼紙=3)。
- **stepper**:半小時制 / 整數 / 5% 階;`remove_circle` / `add_circle` icon + 中間大數字;鍵盤輸入是 fallback 不是預設。
- **月曆格+色點**:課綠/賽金/揪藍/休灰;開課精靈選時段=點月曆空閒格,不是 date picker 列表。
- **bottom sheet**:圓角 20 頂部把手;所有次級流程(確認/表單/picker)。避免 full-page push 除非可回訪目的地。
- **決策卡三選一**:三個大按鈕直排,每顆帶一行後果說明,危險選項紅色放最後 + 二次確認。
- **樂觀更新+轉圈**:每顆 async 按鈕按下立即反應。
- 進場動效輕微(reduce motion 要尊重);confetti 只一次。

---

## 12. State Management(Riverpod;每畫面主要 provider)

- 課程 / 堂次 / 報名:`courseSlotsProvider`、`gymCalendarProvider`、既有 enrollment providers、`coachCourseRepo`。
- 待審總覽:`allManagedPendingCoursesProvider`、`allManagedPendingCoachesProvider`、`allManagedTicketsProvider`。
- 當日課:`myTodayCoachSlotsProvider` / `gymTodayCoachSlotsProvider` + `CourseGates`(countdownLabel 有 L0 測試)。
- 身分/權限:`myProfileIdProvider`、`myRoleAtGymProvider`、`PermissionGates`。
- 貼紙:`stickersOfProvider` + `StickerGates`。
- 參數解析(批α):`PolicyGates.resolve`(三層:平台<場館<課程)+ 報名快照欄位 —— S2 條款卡 / C5 遲到 / C7 參數表 / G8 覆蓋 / P2 操作台 全接這條。
- per-id family StreamProvider 一律 `autoDispose`。

---

## 13. Assets

- 頭像:`user_profiles.avatar_url`(真相源)+ 性別預設照 `assets/defaults/player_male.jpg` / `player_female.jpg`,一律走 `AAvatar`。
- 課程封面:`courseCover()`(cover_url 斷點回填)。
- 圖示:Material Symbols / Material Icons(single-color,無 emoji)。設計稿用 `Material Symbols Outlined` web font 的 ligature(如 `school`/`event`/`payments`),Flutter 端對應 `Icons.*`。
- 字型:Google Fonts `Noto Sans TC` + `Saira`(已在 `typography.dart` 引用)。

---

## 14. 交付施工順序(依 DB 依賴)

- **第 1 批(純視覺,無 DB):** S1 / S2(除條款卡)/ S4 / S6 / C1 / C5(UI)/ C6 / G1 / G2 / G3 / G7 / P1。
- **第 2 批(小 DB):** C4+G4(邀約表)/ G5(招募表)/ S5(推薦 Gate)/ S7(補課 credit)。
- **第 3 批(批α 工程後):** P2 / C7 / G8 / S2 條款卡(參數系統)+ C5 遲到 RPC + G6 cascade + P3 pass Gate + C2 每堂價(批δ)。

**每畫面驗收三關(全過才算完):** ①flag 開/關各跑 `flutter test` 全綠 + 對應 scenario 進測試地圖;②醒目度檢查(有 A 級、solid 鈕 ≤2、每欄有預設值且無多餘打字);③dogfood 實機點得到→真讀寫→跟 prototype 行為一致。

---

## 15. Files(本包內容)

```
design_handoff_arena_coach/
├── README.md                              ← 本檔(自給自足)
└── designs/
    ├── ArenaMate 學員端 S1-S7.dc.html      ← 藍 · 手機(瀏覽器直接開可互動)
    ├── ArenaMate 教練端 C1-C8.dc.html      ← 金 · 手機
    ├── ArenaMate 場館端 G1-G8.dc.html      ← 綠 · 手機
    └── ArenaMate 平台端 P1-P5.dc.html      ← 紫 · 桌面寬版 console
```
每個 `.dc.html` 是單檔 streaming Design Component;直接用瀏覽器打開即可平移縮放看全部畫面、點 chips/stepper/sheet/翻面卡互動。實作時對照對應畫面的視覺與行為,在 Flutter 重建。