頁面線框（Page Wireframes）

本檔角色：各頁面 wireframe / 版面結構與互動規則的細化。 頁面路由清單以 程式架構.md §13 為唯一權威（本檔不重定義路由）；比賽 HUD 細節見 賽內機制.md §2.4；版面參考與驗收來源見 美術資源.md §6。

1. 登入 /login

桌面：品牌 Hero（背景慢轉範例車 + 賽道起點）+ 三入口卡（新玩家建立身份 / 已有備份碼輸入 / PIN 解鎖本機）。高風險提示（助記詞遺失=資產全失）放在建立流程的確認步驟，不只底部小字。

新玩家流程：新建身份 → 顯示 24 字備份碼（一次性）→ 隨機字位抄寫驗證 → 設 PIN（必填、兩次一致）→ 引導裝配第一台車 → 本機測試一場 → 通過才解鎖上鏈。

1.1 公開首頁 /

根路徑是未登入可瀏覽的公開入口，不載入玩家帳本、車庫或 Race Bench provider。首屏保留品牌 Hero、四驅車遊戲定位與頁內唯一主「開始遊戲」CTA；解鎖後導 /home，未解鎖導 /login?returnUrl=/home。後續依序呈現核心玩法、去中心化說明、公告與公版資產展示；公告區 顯示所有有效置頂加最新 3 則未置頂，空 catalog 仍保留穩定版面。公開導覽不得混入餘額、 車庫或正式賽操作。一般頁首左側品牌固定回 /；中間依 route family 顯示公開導覽 「公告／UGC／關於／說明」或玩家導覽「Home／Garage／Race Config／Editor／UGC／Inbox」。 公開頁右側「進入遊戲」恆顯示並與首頁 CTA 共用目的地解析；Settings 與 Identity 固定在 右側，Identity 依身分導向 Login 或本人 Creator。

1.2 賽事工作台 /home

登入後首頁是 Race Bench，不是資訊 dashboard：Stage 只展示最近的正式車位組裝車， 不得把固定本機測試車位誤當正式主車。有車時唯一主 CTA 依連線狀態進正式賽或本機測試； 無正式車時改為前往車庫。important／critical 公告使用非 modal compact strip，放在主操作 之後且不得推走 CTA；normal 公告不出現在 Race Bench。手機順序固定為 Stage → 主操作 → 高優先公告。

1.3 公告列表／詳情 /announcements、/announcements/:id

兩頁皆使用 public shell。列表提供 localized search、tag chips、置頂 ／priority 的文字與 SVG 雙重標示，以及空 catalog／ 無結果狀態；URL query 可還原篩選。詳情的 title 是唯一 H1， 其下依序為發布 ／ 更新時間、狀態、tags、結構化 content、取代連結與返回列表。retracted、 expired 歷史可直接開啟；離線未快取與資料損壞必須是不同狀態。版面需通過 320 px、200% 字級、鍵盤 focus 與 responsive table，不得使用任意 HTML。

2. 車庫 /garage

採 Vehicle Bay：桌面約 65/35，左側 Stage 必須先看到大型 3D 四驅車（旋轉 / 拍照 / 試跑），右側 Pit Board 顯示名稱、車位用途（正式 ／ 本機測試）、本機資源完整性、Mass、Accel／Grip／Stability 與 chip 技能，唯一主 CTA 進入調校。下方 model shelf 只負責快速切車；PeerId、CID、完整槽位等放 Tool Drawer。手機先 Stage，再 Pit Board，最後模型架。不得把本機 loadout 標為 On-chain。

3. 車間 /garage/edit/:id

採 Tuning Mat：桌面左 = 零件 Tool Drawer（底盤 / 車殼 / 車軸 / 輪胎 / 馬達 / 電池 / 晶片 / 武器）、中 = 大型 3D Stage（拖曳旋轉 + mount / collider / 重心 overlay）、右 = 變更預覽 Pit Board。數值必須同時顯示改裝前、改裝後與 delta，底部固定操作列保留 測試 / 儲存。

規則：中央 3D canvas 桌面不得低於可用寬度 50%；左右面板可折疊（折疊後 canvas 擴展）；屬性面板用 stat bar + 數值（不只星等）。行動端折疊為單欄（3D canvas + 折疊面板 + 底部 測試/儲存）。

4. 編輯器 /editor

PC：頂部工具列（返回・資產名 ｜undo／redo／ 清空 ｜ 編輯 ↔ 預覽 ｜3D 預覽 ｜ 三出口「本機測試」「上鏈」「可編輯 GLB」右錨）＋banner 計數帶（可展開）＋ 左側直向頁籤欄（可收合；零件集 ／ 場地集）＋ 中央 top-down 正交 viewport＋ 右側欄四子分頁（屬性 ／ 圖層 ／ 統計 ／ 拒收清單）＋ 底部狀態列（座標 ／ 選中 ／ 紅黃計數）。 Mobile：精簡頂列（SVG menu／ 名稱 ／ 預覽 ／ 送出〔點開選目的地：本機測試／上鏈／可編輯 GLB〕）＋banner 單條 ＋ 全幅 viewport（右下浮動 undo／redo／3D）＋ 三段式 bottom sheet（頂緣子分頁同 PC 右欄）＋ 底部頁籤列（拇指區、可橫捲）。 版面權威 = 編輯器操作.md §0.5；互動細節同檔 §1–§5。

5. 公開 UGC /ugc、/ugc/:cid

展示廳以全部／場地／零件切換公開 UGC，Provider 對聯集負責排序、總數與分頁。搜尋、tag、 作者與排序共用；場地顯示地形／人數等專屬篩選，零件改顯示零件類別。卡片依 kind 顯示 對應摘要並統一導向 /ugc/:cid；詳情載入後依 kind 切換資訊、SEO 與操作。頁內工具提供 版權／DMCA 入口，但 /dmca 維持獨立頁面、不顯示 UGC 麵包屑。本機測試資產不進公開 UGC 聯集。

6. 賽制 /race-config

/race-config 是正式賽事與本機測試共用的唯一設定頁，URL 不加 ?mode=local。一般入口沒有產品 History State；從車庫／場地等本機測試入口進入時，以 Browser History State { mode: 'local', track?, loadout? } 帶入偏好資產。頁面以同一套一般／本機狀態模型切換內容，快速比賽、建房與邀請加入各有明確入口。

頁首固定提供「自動配對」、「加入房間」與「觀戰」三個快捷動作；後兩者只在非本機狀態 顯示，分別以 dialog 貼上 participant invitation 或 spectator invitation。UI 從 fragment 取得 RoomId、 role 與 192-bit secret 後立即清除 fragment；成功完成對應 admission 才導向共用 /room/:roomId， secret 不進 query、history、referrer 或一般 join payload。 主要設定面保留建房流程與單一主 CTA。自動配對只會搜尋並加入其他玩家已建立、公開、允許 Quick Match 且 participant open 的 waiting 房；沿用該房 host 與賽制，找不到時等到逾時提示， 不得自動建立預設房。搜尋一啟動即開啟不可由背景、Escape 或關閉鈕撤銷的 alertdialog， 只能用對話框內取消動作結束搜尋。加入房間使用可關閉的 invitation 對話框； 送出期間進入 busy lock，暫時禁止背景 dismiss、關閉與重複送出，待命令完成後才恢復。 建房命令必須明確送出 visibility 與 quickMatchEnabled；目前一般建房入口建立 public、允許 Quick Match 的房。若房主啟用 participant 保護，UI 以 CSPRNG 產生 invitation 並提供 fragment 分享連結，該房仍可建立但不會成為 Quick Match 候選；不得讓玩家自訂低熵密碼。建房內容包含人數 （2–8、≤ 各回合場地 auto_player_max 最小值）、回合數 1–5、逐回合 場地 ／ 車輛 ／ 圈數 ／ 時限 ／ disallowChip，並可另行產生 spectator invitation；一般狀態不得列出 local-test 車位或 local: 場地。回合卡固定寬並顯示所選場地與車輛圖，不因回合數量拉伸。

本機狀態只顯示一組可用車輛與場地選擇：車位必須符合 localTest.allowed，場地必須已有可供本機使用的 bytes（builtin／鏈上快取／local:）。唯一主 CTA「開始本機測試」建立新的 local-session-<uuid> 並進入 /race/:sessionId（所選 loadout／track 作為該 shared race page 的啟動參數），不建立房間、不配對、不產生正式 ledger 結果。本機與正式分支共用同一 RacePage／race runtime；本機測試不是另一套比賽頁。回合 / 結算見 賽內機制.md §1.5·§3。

E2E harness／fixture 的狀態切換或故障注入控制只用於測試，不是此頁產品 UI、路由或互動合約。

7. 房間 /room/:roomId

採 Start Gate：Stage 顯示回合帶、各回合 disallowChip 與參賽四驅車起跑格，Pit Board 顯示就緒數、玩家數、回合數與網路摘要；participant 的主 CTA 只在 [準備]／[取消準備] 間切換，全員驗證完成後由系統進入 5 秒自動倒數，沒有房主開始按鈕。房主與加入者都能選定逐回合 carRotation；晶片車排入禁用回合只顯示警告、不禁止選取。P2P 診斷仍是遊戲 UX，但逐人 PeerId、TS、ping、direct／TURN、資源載入 % 收進 Tool Drawer，摘要與卡住原因留在主畫面；聊天位於邊緣抽屜。

spectator 使用同一 RoomPage，但不顯示 ready、選車或開賽操作；仍顯示房間狀態、觀戰政策，並與 participant 共用同一個等待房文字聊天。刷新時若存在此分頁保存的最小 RoomSession hint，頁面先向房主重新 admission，成功後才恢復房間視圖與聊天。

8. 比賽 /race/:sessionId

3D 比賽畫面為主體、HUD 疊加邊角拇指區。HUD：左上排名 / 圈數 / 時間，右上 NET + mini-map，下方 ENDURANCE（電量）+ Chip/Motor/Batt thermal + Fatigue worst-part widget + Skill 按鈕（依 chip slot 1–4，含 weapon 技能）。390px 基準的四個技能同列等寬、每個至少 72×72px；meters 與 skills 分列並避開 safe area。無 cooldown timer、無「即將過熱」預警（殺手鐧靠玩家判斷溫度餘額）。完整 HUD 規格見 賽內機制.md §2.4。比賽頁不得上下切版壓縮 3D；全域 topbar / bottom nav 不渲染，也不提供自由文字聊天入口。

同一 RacePage 依已驗 RoomSession 角色選 adapter。participant 顯示輸入、車況、技能、賽中圖示九宮格與「類型／跟車／自己」相機鍵；spectator 不啟動本機物理或輸入，只顯示 snapshot 排名、participant 圖示訊息 HUD 與「類型／跟車」。RacePage 不提供任何自由文字或 spectator chat。產品模式只有跟車、自由、巡禮；淘汰不自動切鏡。兩角色共用 viewport、場地載入、離場確認與 /result/:resultId 終局導頁，角色不得出現在 route。

9. 結算 /result/:resultId

採 Display Plinth：有真實 winner 時先顯示冠軍展示台、玩家成績與無刻度舞台導引紋，再顯示完整排名 Pit Board；導引紋只作構圖引導，不得使用數字、單位、等距刻度或比例值。正式分支的 match ID、可驗結束原因與破壞統計置於 Tool Drawer；本機分支使用 opaque local result id，不顯示或查詢 ledger 證明。verified MatchResult 尚未到達時只顯示驗證中，不得製造假冠軍；驗證失敗返回原 RoomPage。participant 可再戰並手動回房，spectator 只顯示手動回原房，回車庫為 secondary。本機資料缺失則回 Race Config。

10. 創作者頁 /creator/:peerId

name #1a2b3c4d + peer_id + 信譽分 / 作品數 / 使用次數 / 累計獲幣 + 代表作品（場地 / 零件縮圖）。 只有 route PeerId 等於已解鎖身分時才另顯示「可用餘額」；查看他人頁不得讀取或顯示本人 餘額，累計獲幣與可用餘額維持不同標籤。

11. 說明 /help

採調校手冊：第一層固定依「開始比賽 → 建立車輛 → 調校 → 製作賽道 → 排除連線」排列；搜尋保留。PeerId、OrbitDB address、治理、CID 與 binary glTF（.glb）等精確術語收進 Technical Chapter，避免先於玩家任務出現，但不得省略或改成模糊用語。

12. 設定 /settings/:section?

採遊戲暫停選單式雙欄布局：左側 / 行動端頂部為八分類 display、audio、gameplay、network、privacy、maintenance、account、about，右側一次只顯示目前分類。/settings 是不初始化玩家資料或 P2P 的 public route，預設 display；深連結可直接開指定分類。未登入仍可設定裝置級顯示、音訊、操作與維護項目；需 PeerId、PIN 或 secret 的單項顯示「登入後可用」原因。Display 必須實際套用語系、資料驅動主題藝廊、字級 small / medium / large、色盲配色、特效品質、3D 算圖解析度（50–100%，提供 50／75／100 快捷值）、反鋸齒 on／off 與減少動態效果；算圖解析度與反鋸齒彼此正交並即時套用，若裝置限制截斷實際比例則顯示實際值。減少動態提供「跟隨系統／減少動態」二態，OS 的 reduce 偏好永遠優先。Audio 保留 master / SFX / BGM 三軸，即使 default 音訊全為 null 也可正常操作且不報錯。

13. 收件匣 /inbox

已解鎖玩家的 Inbox 採 provider-scoped 分組，不把多個 pinning provider 合成一個官方全域信箱。目前顯示 dmca tab：列表保留 provider 名稱、事件類型、資產 CID、狀態與時間；本機已讀狀態不得改寫遠端事件。離線或刷新失敗時，可顯示已驗簽 stale snapshot，但必須明示來源、最後成功同步時間與 stale 狀態；切換 PeerId 時立即隔離前一身分的快照與已讀資料。

14. 關於 /about

使用 public shell 的靜態介紹頁，依序呈現專案定位、目前版本／pre-launch 階段、開源與治理入口、隱私／版權／說明連結。進頁不得初始化玩家 Ledger、車庫、APP_DATA 或 P2P；主要閱讀內容可在離線殼層中到達。

15. DMCA 表單 /dmca

使用獨立 public shell，不套 UGC 詳情麵包屑。Notice 與 Counter-Notice 以清楚分段的結構化表單呈現，欄位錯誤就地說明、送出前提供法律聲明與確認摘要；provider 選擇與受理 endpoint 必須可見，不把任何單一 provider 描述成全網官方機關。失敗保留非敏感輸入並提供可重試狀態，敏感欄位不寫入 URL。

16. DMCA 透明度 /dmca/transparency

公開頁先選 provider，再顯示該來源的簽章透明度資料；可提供明確標示來源的聯集摘要，但不得宣稱存在全域官方 log。卡片與表格顯示期間、notice／counter／恢復等分類、資料新鮮度與驗證狀態；空資料、provider 無法連線與簽章失敗是三種不同畫面。

17. RWD / 動畫 / 觸控

• 斷點與比例：寬度常數只見 ui.md §14；單位、content-fit、低高度、高直向與超寬行為只見 ui-frontend.md §10、主題外觀與 RWD.md §7 及非 canon 主題審查計畫.md §12。編輯器版面家族切換只見 編輯器操作.md §0.5。
• 動畫：頁面切換淡入淡出（時長走 motion token 級距，ui-frontend.md §7）；hover 不改尺寸；載入用 stat bar / skeleton；成功短 toast + badge；錯誤明確錯誤列 + 修復建議（不抖畫面）。
• 觸控：比賽 skill 按鈕 ≥ 72×72px、一般互動 ≥ 44×44px、支援滑動 / 長按、不用 hover 作唯一入口。
• 正式圖示：導覽、工具列、HUD、UGC 類型、狀態、空狀態與 CTA 全部使用 SVG sprite；emoji 只允許出現在玩家 UGC 文字內容，不得成為公版 UI 元件。
• 主次順序：所有行動版流程一律 Stage-first；每個 viewport 同時只允許一個橘色主 CTA。Pit Board 在主體之後，Tool Drawer 最後或預設收合。
• 算圖驗收：代表頁至少以 1440×900 desktop 與 390×844 mobile capture 驗收；3D canvas 另記錄 CSS viewport、device pixel ratio、實際 drawing-buffer ratio、render resolution scale 與 anti-alias 狀態，避免只看截圖尺寸而漏掉內部算圖降採樣或反鋸齒失效。

Room admission：Race Config 的加入與觀戰操作都必須明確選定 participant 或 spectator；spectator 在 waiting 先進共用 RoomPage，頁面不得顯示 ready、選車或開賽操作。match-start 後才切換 spectator stream 顯示（D-20260802-07）。