Phase 0 驗收頁
本頁用於確認 shell 注入、mock data 讀取、格式化函式、元件樣式皆正常。 開發新頁面時可複製這裡的 markup。
環境自我檢查
全部應顯示為 PASS
檢查項目結果值
Stat（數據卡）
資產餘額
來自 MOCK.balances，依 topbar 子帳戶切換器連動
資產類別網路 餘額TWD 等值 近 20 期走勢24h
交易列表
狀態 badge、金額格式化、地址縮短
交易編號類型金額 收款地址白名單狀態
審核流程分流判斷
App.resolveFlow() — 對應規格 §6 分流邏輯
情境判定理由關卡
Button
Badge / 風險標示
Topbar 圖示與頭像選單
設定、通知、使用者頭像固定在右上角。圓形外框讓它們看起來是 一組可點擊的控制；未讀數疊在鈴鐺角上，數字本身就是「有事要處理」的訊號
圖示按鈕（34×34，圓形外框）
SVG 自帶 width／height —— 只靠 CSS 設尺寸的話， 樣式未載入時會撐滿容器。
頭像選單（點擊展開，點外面或 Esc 收起）
身分、個人相關設定與登出集中在這裡，所以側邊欄底部 不再重複放一次使用者區塊。
設計規範：設定頁版面寬度
修改或新增設定頁時必須遵守。規範由 CSS 與執行期檢查 共同強制，不是靠記得
規則
  1. 設定頁一律使用 <main class="content" data-settings>， 不可加 .content-narrow。寬度由 --w-settings 統一決定（目前 1280px）。
  2. 寬度套用在 .content[data-settings] 上， 所以只要標了 data-settings 就自動符合， 不會因為忘記加 class 而寬度不一致。
  3. 要調整設定區寬度時只改 --w-settings， 不要在個別頁面覆蓋。
  4. 表格一律放在 .card.card-flush 裡；欄位過多時橫向捲動， 不要壓縮欄位（中文會被排成一字一行）。
  5. 並排卡片（.grid-2）只適合窄內容。內含表格時改用 .stack 垂直排列 —— 並排會讓每張卡片只有一半寬度。
  6. 彈窗一律用 .modal-head / .modal-body / .modal-foot 三段結構。.modal 以 92vh 為高度 上限、內文自己捲動；把表單直接塞在 .modal 底下（不包 .modal-body）就會失去捲動，內容一長就超出視窗、按鈕也按不到。
違規會怎樣
頁面若在 data-settings 上加了 .content-narrow，layout.js 會在渲染時移除它、 在 console 警告，並寫進 window.__ccbErrors —— shared/_check.html 會因此失敗。規範能被機器抓到， 才不會隨時間腐化。
Alert
此地址尚未加入白名單
本筆付款將套用三層審核流程，並加嚴 AML 規則檢核。
地址風險評分過高（86/100）
付款已封鎖，並自動建立 AML 案件送交風控審查。
已放行並廣播至鏈上
TxHash 0x9f3a…bc12 — 6/6 confirmations
這是 TX004 的重送
退回原因：收款地址請確認，與合約所列不符。內容已整份帶入。
看原單 清空重填
Timeline（審核歷程）
三層流程進行中：Checker 已核准，待 Releaser 放行
編輯（Maker）已完成
陳美玲 · 2026-08-17 09:00
審核（Checker）已核准
陳美玲 · 2026-08-17 10:30 · 串簽 1/1
已核對收款地址與合約附件一致。
放行（Releaser）待處理
林志遠 · 會簽 0/1 · 驗證方式 OTP
Progress（鏈上確認 / 報價倒數）
鏈上確認進度
4 / 6 confirmations 確認中
報價有效時間
1 USDT = 32.28 TWD —
Form
請確認地址與網路相符，鏈上交易一經放行無法撤回。
USDT
≈ US$ 80,000 · 可用餘額 250,000 USDT
收款地址尚未加入白名單，將套用三層審核。
Summary（確認頁摘要）
付款資產
USDT 穩定幣 · ERC-20
收款地址
0xAbC1234567890def
白名單狀態
非白名單
手續費
US$ 3.20（Gas）
付款總額
80,000 USDT ≈ US$ 80,003.20
Modal + OTP 驗證
mock：任意 6 位數字即通過
圖表
除 K 線外都是自己刻的 inline SVG（shared/js/charts.js）； K 線用 lightweight-charts，檔案 vendor 在本地，file:// 一樣可用；同一資產在各圖為同一顏色
資產淨值趨勢
Charts.line — 近 30 日 TWD 等值，y 軸用「萬」
資產配置
Charts.donut
餘額組成
Charts.meter
各關卡平均處理時效
Charts.hbars
收付流量
Charts.bar — 分組長條，y 軸一律從 0 起
BTC / USDT
Charts.kline — lightweight-charts，可切換時間尺度、拖曳平移、滾輪縮放
簡版 K 線
Charts.candles — 內嵌用（無互動），也是套件載入失敗時的 fallback
量表
Charts.gauge — 風險分、額度、健康度
AML 案件分布
Charts.hbars — 近 90 日
Dropdown
全站不使用原生 <select>，純文字選單也走 .dropdown；markup 由 App.dropdownHtml() 產生；高度走 --ctl-h 三檔，與 .btn / .input 同高
表單欄位用 field: true，邊框與 .input 對齊
最後一次選取：—
Tabs / Filters
全部 7
待審核 1
待放行 2
已完成 3
目前沒有符合條件的資料