SECTION 02

2. 全局通用設計規範

對應來源:功能修改對照表頂部通用規範

2.1 交互佈局改版區塊說明

根據改版原型系統(pm-doc-new-sports.pages.dev),主作業畫面重塑為四大核心交互板塊:模式切換區塊、篩選區塊、列表區塊與底部吸底匯總數據區塊,消除舊版資訊擁擠與多層彈窗遮擋痛點,大幅提升營運與風控審核效率。

🖥️
改版主作業介面全景佈局
🔗 開啟線上原型 ↗
🔍 點擊圖片可於新分頁展開檢視原始高解析度大圖(涵蓋視圖切換、多維篩選、行卡片展開與吸底匯總)
🔲
1. 模式切換區塊
  • 位置與形式:位於左上方常駐控制項,支援「列表視圖」與「巢狀視圖」一鍵無縫切換。
  • 列表視圖:高密度平鋪會員完整數據,專為批量勾選、快速排序與運營維護設計。
  • 巢狀視圖:以彩票代理組織樹狀層級結構展示,清楚穿透上下級歸屬與代理線業績。
🔍
2. 篩選區塊
  • 雙排彈性佈局:首排整合狀態、層級、VIP等級、標籤、排除條件等高頻下拉;次排整合推廣人、未登入天數、三方額度、註冊時間區間及帳號複合檢索。
  • 已選條件標籤列:篩選區下方動態產生 Tag 標籤(如「排除: 測試帳號 ✕」),支援單項刪除與垃圾桶一鍵清空重置。
  • 折疊與自訂維度:右側配置折疊/展開箭頭 ⌃ 釋放縱向空間,並可透過自訂篩選欄位設置自訂維度。
📊
3. 列表區塊
  • 就地展開卡片摘要:點擊行首箭頭 v 免開彈窗就地展開 5 大維度卡片:基本資料、存取款資料、成長與積分、推薦關係、餘額寶。
  • 邏輯分組表頭:表頭清楚劃分「賬號信息」、「等級」、「額度」、「存取款」、「日期信息」,支援自訂欄位勾選與凍結。
  • 批量作業聯動:首列提供多選 Checkbox,勾選後連動頂部「批量操作」功能,支援批次維護。
💰
4. 匯總金額與數據區塊
  • 固定於底部展示:常駐固定吸底於瀏覽器視窗最下方,滾動列表時始終可視,利於隨時掌握大盤數據。
  • 點擊快捷收起/展開:中央提供收合按鈕(向下箭頭 ⌵),點擊即可快速收起該區塊,極大化表格縱向瀏覽視野。
  • 多維核心數據匯總:展示用戶總金額(不含測試用戶)、三方遊戲總餘額(參考值)、當日註冊人數、當日首充有效用戶等關鍵指標。
  • 敏感金額脫敏防護:關鍵金額旁配置眼睛圖示(👁️),支援點擊切換掩碼脫敏(如 ***),防止敏感營運資產外洩。

2.2 交互佈局與組件規範

全面統一交互標準:所有單筆修改與詳情檢視,皆採用右側滑出抽屜(Drawer),徹底取代多層 Modal 彈窗。

📐 抽屜層級架構 (Drawer Hierarchy)
Level 0: 背景主列表

寬度 100%。保留篩選與分頁視野,抽屜滑出時附帶半透明遮罩防止背景誤觸。

Viewport: 100% Width (Data Grid)
Level 1: 一級主抽屜

點擊「編輯」或「詳情」自右側滑入。頂部提供快捷關閉、會員摘要與 Tab 導航。

點擊「同IP: 8人」➜ 觸發二級抽屜
Level 2: 二級關聯抽屜

疊加於一級抽屜右側上方,承載同 IP / 同設備風控關聯帳號穿透分析。

🗂️
抽屜佈局範例 (Drawer Layout Examples)
原型佈局規範

全面以右側滑出抽屜取代傳統多層彈窗,確保主列表視野連續性。以下為一級主抽屜與二級關聯抽屜之實際原型範例:

📑 Level 1 一級主抽屜 用戶詳情
核心佈局特性:自右側滑入展開,保留背景列表半透明遮罩與視覺連續性。頂部包含狀態標籤、關閉按鈕與 Tab 分頁導航(會員信息、審核、提現、設備與IP)。
🔗 Level 2 二級關聯抽屜 風控穿透分析
核心佈局特性:點擊「同IP / 同設備」人數觸發,自右側疊加滑入二級抽屜,直接穿透展示關聯帳號名單與最後登錄紀錄,不跳頁且維持操作上下文。
🔍 點擊任一圖片可於新分頁展開檢視原始高解析度原型大圖

2.3 數據格式化與呈現規範

🔣
數值千分位
金額(存/提/佣金/欠款/三方餘額)及積分、成長值強制千分位展示。
1,234,567.89
0️⃣
數值為 0 顯性展示
數值為零時顯性顯示 0.00(金額)或 0(次數),嚴禁顯示為空或 "-"。
✂️
長文本超長截斷
文字超過 20 字符自動截斷補 ...,Hover 懸浮展示完整內容 Tooltip。
➖
空值顯性標記
數據空狀態以顏色區分弱化顯示:數值/無數據定義為 -,字符定義為 N/A;若有數據 0 定義為 0(金額為 0.00)正常展示即可,嚴禁留白、出現 undefined 或破圖。

2.4 前端狀態保存機制

💡

系統會自動儲存使用者的畫面設定,包含:篩選條件的展開狀態、欄位的顯示/隱藏與排序,以及列表/巢狀視圖的偏好。

無論是切換到其他頁面後返回、重新整理網頁,或是重新登入,系統都會自動還原先前的設定,無須重新調整。

⚙️ 實現機制:透過前端 LocalStorage 持久化儲存 (Key: LOTTERY_USER_MGT_CONFIG_v1)。