跳轉到

主題審查計畫

非 canon：本檔只安排審查樣本、原型與驗收工作，不建立新的產品行為或主題契約。 穩定規格以 主題外觀與 RWD.md 為準；前端落地以 程式架構/ui-frontend.md 為準。

2. RWD 驗收 viewport 與風險面

下列 viewport 是自動與人工驗收矩陣；房間／比賽／結算頁還必須使用 populated-state 測試資料完成真機視覺驗收，只有模板或空狀態不構成通過。

類型 審查尺寸
超寬桌面 3440×1440、2560×1440
一般桌面 1920×1080、1366×768、1366×1024
平板／高解析直向 1024×1366、1080×1920、1440×2560
手機橫向 844×390、667×375
手機直向 390×844、320×700

每個尺寸都必須驗證：文件無水平溢位、導覽依實際可用空間切換、Stage 有高度上限、主要操作初始可達、orientation／aspect-ratio 轉換不丟狀態、內部橫捲有可辨識提示、超寬遊戲頁善用空間而閱讀／工具頁維持可讀行長，以及離線／缺資料／不可用狀態仍形成完整可操作場景。Default 與月兔都必須在按鈕、卡片、導覽、設定與空狀態呈現自己的完整形狀文法。

9. 代表頁概念與靜態原型

Angular 移植前，先完成下列三頁的 Default／ 月兔雙主題原型；同一份 HTML 結構只切換 token 與資產：

9.1 公開首頁

驗證公開入口是否真正進入遊戲世界、Hero 是否以固定宣傳用迷你四驅車 ／ 工坊展示台為主體，以及 Moon 主題是否不只換背景色。公開首頁不放軌道、人物或真人工作區，不讀車庫、不載入 GLB、不建立 WebGL context；完整 Hero key art 直接整合車體、封閉式零件展示牆、平台、前景與燈光，避免分層縮放或 RWD 裁切造成錯誤尺寸暗示。

┌──────────────────────── public navigation ────────────────────────┐
│ [主題世界 Stage / 四驅車工坊展示台]    [一句定位 + 開始遊戲 CTA] │
├──────── 核心玩法實物／流程 ────────┬──── 最新公告／狀態 ───────┤
│ 去中心化說明延後，不搶首屏主目標                              │
└──────────────────────────────────────────────────────────────────┘

9.2 車庫

驗證最複雜的 Stage、Pit Board、車位架、主 CTA、3D／ 背景焦點，以及高直向、超寬與手機 Stage-first。

┌──────────────────── Vehicle Bay Stage ───────────┬─ Pit Board ──┐
│                  組裝後四驅車                     │ 名稱／狀態   │
│          舞台導引紋／主題角件／場景               │ 數值／主 CTA │
├──────────────────────── model shelf ─────────────┴──────────────┤
└─────────────────────────────────────────────────────────────────┘

9.3 顯示設定

驗證一般 shell、卡片、按鈕、表單、主題選擇與支援 Skin 強度；月兔必須可愛但不能犧牲表單可讀性。

┌──────── settings navigation ───────┬──────── current section ───┐
│ Audio / Display / Gameplay / …     │ 主題卡、字級、色彩、特效    │
│                                    │ 一個目前主要操作             │
└────────────────────────────────────┴─────────────────────────────┘

9.4 原型與視覺驗證

每頁至少檢查 1440×900、1080×1920、667×375、390×844；3440×1440 以實際 HTML／SCSS 截圖驗證。概念圖、靜態原型與 Angular 實作必須共享本檔的尺寸、操作與主題契約。

原型必須使用接近正式的真實繁體中文文案與狀態，不使用 lorem ipsum；GLB 未就緒時用已核准背景、CSS／SVG 舞台與明確模型 fallback，不偽裝正式 3D 成品。

11. 整合守門

  • 單一 HTML／Angular 結構必須同時支援兩套 token 與資產，不為主題分岔模板。
  • theme manifest Style API、stylesheet、token、asset key、default fallback、生成器與 themes:validate 必須原子一致。
  • o4-button、o4-card、表單控制、shell、navbar、page background、empty／error state 與 game scene 只能透過 Skin Layer 接受主題外觀。
  • 完整 Skin、支援 Skin 與精密 Skin 都必須遵守 §5；精密頁只改外框，不破壞工作面。
  • fit navigation、低高度橫向、高直向 Stage、超寬遊戲面與內部橫捲提示都屬全域 RWD 守門。
  • 自動 E2E、截圖比較、鍵盤、reduced-motion、safe-area 與實機旋轉測試共同構成驗收，不以純視覺截圖取代功能測試。

12. 驗收矩陣

12.1 全域硬條件

  • §2 的所有 viewport，document.documentElement.scrollWidth <= clientWidth。
  • 667×375 使用 compact navigation，設定與身分控制不被裁切。
  • 1080×1920、1440×2560 的車庫 Stage 有明確高度上限，車 ／ 背景焦點完整，Pit Board 可在合理捲動內到達。
  • 1080×1920 編輯器主要送出操作可見，或以明確的 compact「送出」選單呈現。
  • 3440×1440 的遊戲頁善用寬度；工具／閱讀頁仍維持可讀行長。
  • 旋轉前後沒有資料、選取與表單狀態遺失；fixed UI 不遮住主要操作。
  • 內部橫捲區可被辨識、可鍵盤操作，且不造成文件水平溢位。

12.2 主題硬條件

  • 同一路由即時切換 Default／ 月兔，不 reload、不改 DOM 順序、不丟失狀態。
  • 切換先完成 stylesheet candidate 準備，成功後才原子提交 CSS、token 與 active snapshot；抓取或 persist 失敗不得留下混合主題。
  • 公開首頁、車庫、顯示設定在遮住大型背景後，仍能從標題、卡片、按鈕、表面與角件辨認主題。
  • 月兔具備 Q 版形狀、輪廓與 Pit Crew／ 新月舞台導引紋記憶點，不只是靛色 ＋ 金色版 Default；導引紋無刻度、無數字且不暗示量測。
  • Default 保持專業迷你四驅車工坊，不退回 SaaS dashboard 或一般賽車介面。
  • 所有文字、focus、disabled、loading、error 與 empty state 在兩個主題皆可讀。
  • Theme fallback、離線缺資產與 renderProfile 降級不造成 broken image、console error 或不可操作頁面。
  • 每個正式主題只能修改自己的資料夾；Angular／ 共用 SCSS 不得出現特定 theme id、festival／chromeSkin 類分支或主題專屬 class。

12.3 自動與人工驗證

  • E2E viewport 覆蓋 §2 矩陣，至少對公開首頁、車庫、顯示設定、Race Config、Editor 做 overflow 與主操作可達測試。
  • Default／ 月兔對三個代表頁建立穩定截圖；動態 3D／ 時間內容需固定測試資料或遮罩，避免假失敗。
  • 加入 theme switch token／asset 套用與狀態保留測試。
  • 以鍵盤完成公開首頁 → 登入、車庫切車 → 調校、設定切主題；檢查 focus 與 modal／drawer 關閉。
  • Chromium／Firefox／WebKit 皆跑自動 RWD；iOS Safari 的 safe area、網址列高度與 orientation change 在公開前做實機人工驗證。
  • 房間／比賽／結算的 release gate 必須包含正式 GLB 與可控測試 session 的 populated-state 視覺驗收；靜態與 fake provider 通過不等於 release gate 通過。