SECTION 05

5. 數據列表與卡片展示模塊

對應來源:功能修改對照表 - 資料列;體育欄位定義表

5.1 視圖模式切換

📌 預設視圖規格:系統進入與載入時,默認展示為 “列表模式”

本次改版將二維高密度的「列表模式 (Flat List View)」定為初始載入之默認視圖,核心定位為盡可能讓畫面一次展示多條數據之間的橫向比較,且點擊左側箭頭展開即可查閱更多資訊卡片;而「巢狀樹狀模式」則專注於盡可能展示單一用戶所有的相關完整資訊與代理階層。操作員切換後的偏好將自動由前端持久化記憶。

🖥️視圖切換:
當前:列表模式 | 🔍 點擊檢視原圖
圖一 列表模式介面截圖 (Flat List Table View - 點擊展開卡片示範) 默認展示
↗開新分頁檢視原圖
📋列表模式核心介面特徵與交互規範:
  • 1. 表頭固定吸頂 (Sticky Header) 與篩選列收起:列表表頭固定在頂部。當畫面向上滑動(頁面向下瀏覽數據)時,上方多欄位篩選表單會自動向上收起隱藏(連動 4.5 節規範),以最大化表格資料列的垂直檢視空間,操作員仍可持續對齊各欄位表頭。
  • 2. 列表展開按鈕與橫向滑動瀏覽:列表模式每列最前面均配有展開按鈕(> / v)。點擊展開後即可看到詳細卡片(包含「基本資料」、「存取款資料」、「成長與積分」、「推薦關係」、「餘額寶」與「用戶標籤」等小卡及下方備註列),詳細卡片支援左右滑動瀏覽 (Horizontal Scrollable),確保在有限寬度下完整容納所有維度資訊。
  • 3. 右上角自訂欄位功能與下方抽屜:列表右上角配置自訂欄位按鈕(圖示為 自訂欄位按鈕 [ ▯▯ ]),點擊後由畫面底部滑出「自訂欄位設定」抽屜(抽屜高度嚴格限制不會超過表頭),可自訂顯示欄位與卡片是否呈現於一級主表或卡片內(詳見下方 5.3 節專題)。
  • 4. 金額表頭排序功能 (Amount Header Sorting):所有金額與餘額相關之一級表頭(如可用額度、存款總額、取款總額、三方餘額等)均內建排序功能(參照圖三:存款总额 ▲ 📌)。排序圖標原本隱藏,鼠標移入表頭即出現降序指示圖示;點擊依「降序 (▼) → 升序 (▲) → 還原隱藏」順序依序切換,啟動時箭頭高亮顯示,並自動重置至第 1 頁發送查詢(詳見 5.2.1 節)。
  • 5. 欄位釘選固定在最前面 (Freeze/Pin Column to Front 📌):每個表頭右側均配有釘選圖示按鈕(📌)。點擊後該欄位即時「固定在最前面」(凍結於表格左側,接續在展開列與勾選列後方,參照圖四:用户ID 📌 與 可用额度 📌),並在右邊界呈現立體垂直分隔線;當右側其餘欄位進行橫向水平滾動時,已固定欄位始終吸附在左側保持可視,再次點擊即可解鎖還原原位(詳見 5.2.1 節)。

5.2 一級欄位定義與特殊展示邏輯

📌 一級主表欄位通用功能規範
• 全欄位固定功能 📌 支援固定:每一個一級欄位均配有「固定功能 (Pin/Freeze)」。操作員可視審核習慣將特定欄位鎖定於表格左側,橫向水平捲動時該欄位始終保持凍結可視,防範寬表格檢視時脫焦。
• 金額排序功能 ▼ / ▲ 支援排序:所有與「金額相關」之一級欄位均配有「排序功能 (Sort)」(如:可用額度、佣金餘額、三方餘額、存款總額、提款總額等)。排序圖標原本隱藏,鼠標移入表頭時即浮現降序圖示,點擊即可依「降序 (▼) → 升序 (▲) → 還原隱藏」依序切換,方便財務與風控人員快速篩選高資產或大額充提會員。

5.2.1 表頭金額排序與欄位固定在最前前端交互規格 (Header Sorting & Freeze Columns Interaction)

原型對照截圖 金額排序指示器 (▲/▼) 與欄位釘選固定在最前面 (📌) 效果對照
圖三:金額表頭排序狀態 (▲) 與釘選按鈕 (📌) 表頭局部特寫
視覺標示: 表頭名稱(如 存款总额)後方配備排序三角指示器(當前為升序 ▲)與釘選按鈕(📌)。
圖四:固定在最前面表格橫向滾動效果 左側凍結 + 右側水平捲動
佈局特徵: 用户ID 📌 與 可用额度 📌 被鎖定固定在最左側(接在展開按鈕與勾選列後);右側呈現立體垂直分隔線,其餘欄位(在線、會員名、上級代理、狀態等)橫向滾動穿透。
交互功能項 控制圖標 視覺反饋
金額表頭排序
(Amount Sorting)
▼ / ▲
• 原本隱藏:預設不顯示圖標
• 鼠標移入:浮現降序 ▼
• 點擊啟用:高亮 ▼ / ▲,排序列淺色高亮
欄位固定在最前
(Freeze Column 📌)
📌
• 未固定:半透明弱化 📌
• 已固定:實心高亮 📌
• 右側邊界帶垂直投影線

5.2.2 主表一級欄位默認定義清單

一級分組 欄位名稱 欄位功能圖標 業務定義與展示規範
1. 帳號信息 在線
在线
📌 支援固定
顯示會員當前的登入連線狀態(綠色圓點標示在線,灰色標示離線)。
用戶ID
用户ID
📌 支援固定 🔒 核心鎖定
系統為每位會員派發的唯一數字識別編號(如 1239361225),右側附有一鍵複製圖示。
會員名
会员名
📌 支援固定 🔒 核心鎖定
會員登入帳號名稱(如 mingv0717001),點擊可觸發快捷檢視,右側附外部鏈接/詳情跳轉圖示。
用戶幣別
用户币别
📌 支援固定
會員主帳號結算使用的法定貨幣或加密貨幣單位標識(如 RMB、USDT、PHP 等)。
國家
国家
📌 支援固定
會員帳號歸屬或註冊之國家/地區標籤(如 中国、越南、菲律宾),以藍色可點擊連結樣式呈現。
上級代理
上级代理
📌 支援固定
該會員所歸屬的上級代理商帳號代碼(如 dl888、AG888、ag123)。
狀態
状态
📌 支援固定
帳戶當前的運作狀態膠囊標籤(如 正常、停用、冻结),正常狀態右側附有停用/禁用快捷操作圖示(⊘)。
2. 等級 VIP等級
VIP等级
📌 支援固定
會員在平台中所處的 VIP 級別(如數字 3、2、1 或 VIP 1)。
支付層級
支付层级
📌 支援固定
會員分配之出入款金流/支付層級配置(如 默认层)。
3. 額度 可用額度
可用额度
📌 支援固定 ⇅ 支援排序
主錢包中目前可供會員自由使用或投注的可用餘額(如 5,000、10,000、6,000.00)。金額指標支援點擊表頭排序。
三方餘額
三方余额
📌 支援固定 ⇅ 支援排序
會員留存於各外部第三方遊戲場館之總餘額(如 24,800、16,320),右側配有即時刷新圖示(🔄)。金額指標支援點擊表頭排序。
4. 存取款 存款總額
存款总额
📌 支援固定 ⇅ 支援排序
會員歷史累計成功充值入款的總金額(如 158,000、232,000),以藍色數值字體呈現。金額指標支援點擊表頭排序。
提取總額
提取总额
📌 支援固定 ⇅ 支援排序
會員歷史累計成功提現出款的總金額(如 45,000、85,000),以藍色數值字體呈現。金額指標支援點擊表頭排序。
5. 日期信息 當前登錄IP
当前登录IP
📌 支援固定
會員最近一次成功登入系統之來源 IP 地址(如 54.199.37.35、114.119.130.45),以藍色字體顯示,右側配有一鍵複製圖示與穿透查詢圖示(🔗)。
註冊時間
注册时间
📌 支援固定 ⇅ 時間排序
該會員帳號建立註冊的確切時間戳記(格式為 YYYY-MM-DD HH:mm:ss,如 2026-10-20 22:51:00)。表頭支援點擊依時間升序/降序排列。

5.2.3 列表模式展開卡片規格

💡 視圖模式適用性說明

本章節之「展開卡片」規格專屬於列表模式(List Mode)。操作員在二維表格中點擊每列展開按鈕時向下展開此卡片;而巢狀模式(Nested Tree Mode)架構則照舊維持既有代理體系卡片樣式,僅整合「頭像與在線狀態」欄位顯示。

📋1. 模組概述

「展開卡片」是用於會員列表中的詳細資訊面板。當管理員點擊表格左側的展開按鈕(> / ▾)時,該行下方會向外展開一個結構化的卡片容器,完整呈現該會員的綜合維度數據與標籤管理,方便管理員在不跳轉頁面的情況下進行快速審核與資料檢視。

🧩2. 介面佈局與資料分區

展開卡片內部採用多欄式區塊(Grid / Flex 佈局)進行資訊封裝,主要由「左側獨立大頭像」、「中央多維度卡片群」(包含 6 大常規模組與 1 個默認隱藏的信貸卡片模組,支援水平滾動瀏覽)以及「底部全寬備註橫幅」三大部分構成:

📐 展開容器佈局劃分: ① 左側大頭像錨點 + ② 中央卡片群 (2.1 ~ 2.7 橫向滾動) + ③ 底部全寬備註區 (2.8)
呼應上方《圖一:會員管理列表模式展開卡片示範》
👤2.1 基本資料
10 項核心維度
呈現會員真實身分、帳號屬性與設備狀態(採雙欄緊湊平鋪排版):
  • 真實姓名:會員綁定的真實姓名(如 李小明,若未填寫則顯示 -)。
  • 註冊模式:系統註冊管道與模式(如 一般註冊、快捷註冊、代理開戶)。
  • 生日:會員出生年月日(如 1991-02-11,若未設定顯示 -)。
  • 暱稱:會員自訂暱稱(如 小明)。
  • 帳號類型:帳號營運性質(如 普通帳號、測試帳號)。
  • 手機號:綁定狀態膠囊(如 已綁定 或 未綁定)。
  • 會員類型:平台體系身分類型(如 代理會員、普通會員)。
  • 設備類型:用戶常用或註冊設備端(如 iOS、Android、PC)。
  • 等級:對應的 VIP 等級標示(如 VIP 3)。
  • 離開天數:距離上次離線未登入的天數(如 0天)。
💡 頭像與主表連動:展開行左側設有專屬大頭像容器(展示如字母頭像 M 或用戶頭像);若 國家 欄位已放置於主表顯示,卡片內則自動反灰標記為 已在主表 或由主表優先呈現。
💳2.2 存取款資料
單位:用戶幣種
採用三欄式對比排列,完整展示會員歷史儲值、提現、後台加扣款與免提直充軌跡:
  • 存提款常規匯總 (4 項):
    • 存款總額:歷史累計充值金額(藍色高亮,如 158,000)。
    • 提款總額:歷史累計提現金額(藍色高亮,如 45,000)。
    • 存款次數:歷史充值成功總筆數(如 12)。
    • 提款次數:歷史提款成功總筆數(如 3)。
  • 後台加扣款與活動 (6 項):
    • 後台加款總額:人工後台補款金額(綠色高亮,如 50,000)。
    • 後台扣款總額:人工後台扣除金額(如 - 或數值)。
    • 後台活動加款總額:活動獎勵加款總金額(綠色高亮,如 500)。
    • 後台加款次數:人工加款次數(如 1)。
    • 後台扣款次數:人工扣款次數(如 0)。
    • 後台活動加款次數:活動加款次數(如 1)。
  • 免提直充專區 (4 項):
    • 免提直充充值總額:免提直充充值金額(藍色高亮,如 15,000)。
    • 免提直充充值次數:免提直充充值筆數(如 3)。
    • 免提直充提款總額:免提直充提款金額(藍色高亮,如 5,000)。
    • 免提直充提款次數:免提直充提款筆數(如 1)。
📈2.3 成長與積分
活躍度指標
展示會員在平台的活躍度與成長體系核心數據:
  • 成長值:當前累積的活躍成長點數(如 2800)。
  • VIP成長值:推動 VIP 等級晉階專用的累積成長值(如 8500)。
  • 會員積分:可用於點數商城或活動兌換的積分餘額(如 3,500)。
🤝2.4 推薦關係
單位:用戶幣種
展示下線歸屬、推廣代碼與佣金分潤關係:
  • 邀請人:直屬上級推薦人的會員帳號(若無推薦人則顯示 -)。
  • 邀請碼:會員專屬推薦碼(如 INV001,附帶一鍵複製 📋 功能)。
  • 下級/團隊:直屬下線人數與團隊總人數統計(如 5/2,支援藍色高亮點擊直接穿透跳轉至下級會員明細列表)。
  • 佣金餘額:透過下線推薦返利累積之可提領佣金金額(紅色/橘色高亮數值,如 1,280)。
💰2.5 餘額寶
單位:用戶幣種
展示會員存入平台理財增值帳戶之本金與收益數據:
  • 餘額:存入理財增值帳戶中的本金總額(如 15,000)。
  • 利息:已產生或累計派發的收益利息金額(綠色高亮數值,如 35)。
🏷️2.6 用戶標籤
獨立卡片
獨立專屬標籤卡片,集中展示會員目前所屬的所有分類、客群與行為特徵標籤膠囊(依類別柔和著色,防折行排版):
體育偏好 大戶 VIP 客戶 高頻交易 正常
涵蓋場館偏好([體育偏好]/[真人偏好])、客群分類([大戶])、交易特徵([高頻交易]/[高消費])與狀態標記([正常]/[活躍])。
💳2.7 信貸
⚠️ 默認隱藏
展示會員授信借貸與信用評級數據。考量敏感風控資產安全,本卡片及內部字段系統預設隱藏,需具權限者於自訂欄位抽屜主動勾選開啟:
  • 借貸金額 (欠款):默認不顯示 會員目前累計借貸尚未還款之本金總額(欠款數值,如 0 RMB 或 50,000.00),支援借款流水追溯。
  • 信用值:默認不顯示 會員在平台內部評定之信用評分或信貸額度指標(如信用分數 2,000 分或信用評級)。
  • 可用額度:默認不顯示 授信可用借貸額度(如 5,000 RMB;若操作員已在主表中勾選配置該欄位,則此處標記已在主表並由主表優先呈現)。
📝2.8 底部全寬備註區(備註與回訪備註)
全寬橫幅
位於所有多維度卡片正下方的全寬獨立橫幅(以虛線分隔),提供長期管理備忘與客服最新聯絡進度:
• 備註: 管理員或風控人員手動維護之會員長期專屬備註(如 大戶需重點跟進維護,近期活躍度高)。支援文本溢出自動換行與 Hover Tooltip 完整檢視。
• 回訪備註: 客服或電銷團隊的最新電話回訪紀錄與客訴反饋(如 2026-06-15 客服電話回訪:用戶對出款速度與活動返水滿意)。紀錄最新一次跟進歷史,利於跨部門協作。
⚡3. 互動行為與需求
• 收合與展開控制:
點擊表格最左側的展開列圖示(> / ▾),觸發向下展開動畫;再次點擊則收合卡片。系統支援「單行展開」或「多行同時展開」,預設允許多個會員卡片同時展開以方便跨用戶比對數據。
• 數據快捷連結:
卡片中的金額數字(如存款總額、佣金餘額等)若帶有底線或互動樣式,點擊後應可直接導向對應的明細報表或流水紀錄頁面,縮短操作路徑。
• 文本溢出處理:
針對「備註」等可能出現極長字串的欄位,介面需支援自動斷行、CSS 省略號(Ellipsis)顯示,或滑鼠懸停(Hover)時透過 Tooltip 浮層顯示完整文字內容,避免版面變形。

5.3.4 特殊欄位合併與彈層展示邏輯

特殊欄位設計 整合呈現規則
在線狀態與頭像合併 在會員頭像右下角疊加狀態圓點(以顏色區分:在線 / 離線 / 閒置),Hover 顯示「最後活動於 5分鐘前」。
主錢包幣種與存取款匯總 存款總額與取款總額垂直並列於同一單元格,下方標示主幣種與「淨充值 (存 - 取)」區塊(以顏色區分正負值)。
多錢包彈層 單擊「三方餘額」數值,即時展開小浮層展示各場館錢包明細(真人、體育、電子、彩票場館與餘額寶)。
邀請人與邀請碼規則 一律顯示字段。無數據時一律統一顯示為 -(以顏色區分弱化);有數據時正常帶入數值並附帶「一鍵複製 📋」圖標。

5.2.5 頁面骨架屏加載規格 (Skeleton Screen Loading Interaction Specification) 前端交互核心 CLS = 0 零佈局偏移

⚡ 非同步數據載入體驗原則:骨架屏優先 (Skeleton First)

為避免表格數據在非同步載入期間出現「整頁白屏」或「傳統轉圈菊花 (Spinner) 遮蔽導致的版面劇烈下沉跳動」,系統在數據請求中(搜尋篩選、排序切換、分頁跳轉、視圖切換)統一採用「高仿真灰階流光骨架屏 (Shimmer Skeleton)」。骨架屏嚴格按照實際表格佈局佔位,實現 CLS (Cumulative Layout Shift) = 0 的平滑過渡。

動態視覺模擬 列表數據載入中:灰階流光骨架屏 (Shimmer Pulse) 仿真示意
✨ 包含固定列、文字區塊、金額數值與操作膠囊佔位
展開
用戶ID 📌
可用額度 📌
在線狀態
會員名
存款總額 ▲
快捷操作
骨架屏技術要點: 表頭吸頂常駐不消失;數據行嚴格鎖定行高與欄位寬度比例;採用 CSS linear-gradient 流光掠過動畫,消除文字跳動;後端數據抵達時以 200ms 原地淡入替換。

5.3 自訂欄位與卡片配置

⚙️ 自訂欄位與卡片抽屜架構

操作員點擊列表右上角之 自訂欄位按鈕 自訂欄位按鈕 後,系統由畫面下方平滑滑出「自訂欄位設定」抽屜。抽屜向上展開之最大高度嚴格限制不會超過表頭,維持背景列表的清晰可視性與操作上下文。

抽屜介面對照截圖 自訂欄位設定:主表欄位與展開卡片雙欄設定抽屜
↗開新分頁檢視原圖
自訂欄位設定下方抽屜介面截圖
截圖特徵解析:
• 背景主表與抽屜佈局:操作員點擊右上角 [ ◫ ] 按鈕後,抽屜由畫面下方平滑滑出,高度嚴格限制不遮蔽上方主表格表頭;右上角配置 ↻ 重置、↕ 向上延伸按鈕 與 ✕ 關閉。
• 左側「= 主表欄位(上方表格列)」: - :: 账号信息 🔒:包含 👁 在线、👁 用户ID 🔒(核心鎖定不可隱藏)、👁 会员名 🔒(核心鎖定不可隱藏)、👁 用户币别、👁 国家、👁 上级代理、👁 状态 等膠囊。
- :: 等级 🔒:包含 👁 VIP等级、👁 支付层级;向下可滾動配置 :: 额度 🔒 等分類。
• 右側「▢ 展开卡片(列表底展开內容)」: - :: 基本资料:包含 大头像、真实姓名、生日、账号类型、会员类型、等级、注册模式、昵称、手机号、设备类型、离开天数(附 + 快捷新增);其中 国家 標示 已在主表 並附流轉指示。
- :: 额度:已在一級主表啟用的金額欄位(用户币别、可用额度、三方余额)在卡片區自動反灰並標示 已在主表,具備清晰的跨區防重複與流轉引導機制。
- :: 存取款资料:卡片模組收合與欄位維護。
📋
主表欄位(上方表格列)
呼應抽屜左側:主表欄位與排序控制
左側主欄位控制
• 包含分類與操作方式:
包含帳號信息、等級、額度等多個維度分類。操作員可按住 :: 手柄微調前後順序,或點擊眼睛圖示切換顯隱。
🔒 核心關鍵欄位鎖定防線:
系統核心身分識別欄位標註為 🔒 鎖定(如:用戶ID 🔒、會員名 🔒,對應截圖左側帳號信息內帶鎖標示),預設固定在主表格列,不可隨意隱藏,防範操作員檢索定位遺失。
📑
展開卡片(列表底展開內容)
呼應抽屜右側:卡片模組與次分組歸屬
右側卡片與欄位歸屬
• 模組卡片歸屬與靈活流轉:
包含基本資料、額度、存取款資料等多個卡片。可以自訂各卡片內部欄位顯示,以及自訂該欄位是要呈現在「一級主表欄位」或「展開卡片內」(標示 + 號加入卡片);若某欄位已設定於主表(如截圖右側的 国家、用户币别、可用额度、三方余额),在卡片區即反灰標記為 已在主表,提供清晰防重機制與靈活排版。
⚠️ 信貸卡片: 重要預設規則
欠款 (Debt) 與信用值 (Credit Score) 字段默認不顯示。
📐 抽屜高度限制與重置記憶
邊界與狀態保存 抽屜右上角配置「重置」、「向上延伸按鈕 (↕)」與「關閉 (×)」按鈕
1. 高度限制與向上延伸按鈕:抽屜由畫面下方向上彈出,右上角配置「向上延伸按鈕 (↕)」供操作員展開獲取更多可視操作區塊。無論是預設展開狀態或點擊向上延伸按鈕,抽屜延伸之高度均嚴格限制「都不會超過表頭的高度」,確保主表格頂部之固定表頭始終清晰可見,絕不覆蓋遮蔽關鍵表頭資訊。
2. 重置機制:點擊「重置」一鍵將所有主表欄位與展開卡片顯隱順序還原為預設狀態。
3. 本地記憶:所有調整即時寫入 LocalStorage 持久化保存,頁面重整或切換後自動還原。
元件樣式對照截圖 自訂欄位控制項:微調排序、快捷新增、敏感欄位啟用與分組收合
↗開新分頁檢視原圖
自訂欄位與卡片配置:核心操作按鈕與階層控制項示意圖
截圖特徵解析: 由左至右分別為:欄位控制膠囊(包含 :: 拖曳手柄、👁 顯隱開關、< > 左右位移微調箭頭與 ✕ 移除按鈕)、常規待選欄位(+ 快捷新增)、預設隱藏敏感欄位(👁‍🗨 欠款/信用值 + 授權啟用點亮)、模組卡片與次分組階層管理(:: 存取款资料 🔒 與 ^ v 獨立收合展開箭頭)。
⚡ 核心互動功能需求
互動功能項 控制項與交互元件 業務規格與詳細互動行為規則
3.1 欄位膠囊控制項與微調排序
(圖 A 示範)
:: 👁 / 👁‍🗨 < / > ✕
互動邏輯與功能說明:
• 拖曳排序 (Drag & Drop):按住最左側六點手柄(::)可在同一群組容器內自由拖動,即時產生佔位預覽推擠效果。
• 步進微調排序 (Step Left / Right):膠囊內配備 <(向左移動一位)與 >(向右移動一位)微調按鈕。針對不便進行滑鼠長距離拖曳的操作員,提供精準步進位移;邊界防呆機制:當欄位處於首位時 < 自動置灰禁用(如圖 A 中 存款总额),處於末位時 > 自動置灰禁用。
• 可視切換 (Visibility):點擊眼睛 👁 即刻切換為隱藏 👁‍🗨,主表或卡片同步隱藏。
• 快速移除 (Remove):點擊淡紅色背景之 ✕ 按鈕,即刻將該欄位自當前配置區域中移除,並歸還至待選欄位庫。
• 常態與懸停反饋:未懸停時維持簡潔膠囊樣式(如圖 A 右側 👁 取款总额);滑鼠懸停 (Hover) 時平滑展開位移微調與移除按鈕組。
3.2 待選欄位快捷新增
(圖 B 示範)
+
互動邏輯與功能說明:
• 常規待選池欄位:庫中尚未配置之常態可用欄位(如圖 B 用户标签)右側配備 + 按鈕。
• 一鍵快捷加入:點擊 + 按鈕後,系統自動將該欄位加入至目標展示區塊(主表或卡片內部末位),該按鈕即時變更為已加入狀態或轉入已啟用容器中。
3.3 預設隱藏敏感欄位啟用
(圖 C 示範)
👁‍🗨 +
互動邏輯與功能說明:
• 預設隱藏保護:信貸卡片等敏感欄位(如圖 C 欠款、信用值)預設維持不顯示狀態,圖示以斜線眼睛(👁‍🗨)明確標示。
• 手動授權啟用:具備相關管理權限之操作員點擊 + 按鈕後,系統將該敏感欄位加入卡片,且圖示立即點亮切換為正常顯示狀態 👁;若後續點擊 👁 或 ✕ 移除,則重新還原為 👁‍🗨 預設隱藏狀態。
3.4 模組卡片與次分組階層收合管理
(圖 D 示範)
:: 🔒 ^ / v
互動邏輯與功能說明:
• 模組整組拖曳:卡片最左側配有六點手柄(如圖 D :: 存取款资料 🔒),操作員可按住手柄上下拖動,調整各模組卡片在列表展開時的先後展示順序。
• 核心分類鎖定保護:關鍵核心業務模組標註 🔒 鎖定圖示,不可整組隨意刪除或關閉,保障基本帳戶數據結構健全。
• 階層次分組結構:卡片內部支援次分組架構(如存取款資料內分設「主錢包」與「彙總 (USDT)」兩大子分組),各自收納所屬子欄位膠囊,資訊層次清晰。
• 獨立收合與展開:大卡片頂部與各次分組右側均配置 ^(收起)與 v(展開)按鈕。操作員可快速摺疊暫不調整的分組,極大縮短垂直滾動長度,提升高密度介面配置效率。
3.5 欄位跨區流轉與防重引導
[已在主表]
互動邏輯與功能說明:
• 跨區流轉:部分欄位支援在「主表欄位」與「展開卡片」之間進行流轉。
• 防重引導:若某欄位已被放置於主表中,其在展開卡片設定區會標註為 [已在主表],防止重複顯示或提供一鍵移回/引導。
• 模組增刪:每個區塊內支援透過帶有加號(+)或減號(-)的按鈕來快速新增或移除特定欄位模組(例如信貸、使用者標籤、備註等)。

5.4 底部金額與數據匯總固定列規範 (Sticky Bottom Summary Bar)

為利於營運與風控人員在瀏覽海量會員數據時隨時掌握整體資金大盤與註冊動態,列表畫面最底部配置常駐之「金額與數據匯總固定列 (Fixed Bottom Summary Bar)」。該列固定置底,上下捲動表格時始終保持可視,內建敏感資金脫敏遮蔽與 👁 一鍵顯隱切換、顯性排除測試帳號標記、當日註冊及有效首充即時統計,並配備上方居中之圓形收起/展開按鈕(⌵)。

示意圖 底部金額匯總固定列介面截圖 (Sticky Bottom Summary Bar)
↗開新分頁檢視原圖
底部金額匯總固定列介面截圖
截圖特徵解析: 固定置底呈現 4 大即時統計指標:用户总金额(不含测试用户)(預設以 *** 掩碼脫敏遮蔽,點擊眼睛圖示 👁 可解除/恢復遮蔽)、三方游戏总余额(参考值)(預設以 *** 掩碼脫敏遮蔽,點擊眼睛圖示 👁 可解除/恢復遮蔽)、当日注册(以藍色醒目數值標註註冊人數)、当日注册有效用户(首充)(以綠色醒目數值標註首充人數);上方中央配置圓形收起/展開按鈕 ⌵。
⚡ 底部匯總列即時互動效果模擬 (Live Interactive Demo) 支援點擊收起與眼睛圖示脫敏切換

下方為底部固定列之真實交互模擬:請嘗試點擊 👁 圖示切換金額遮蔽/明文,或點擊上方 ⌵ 按鈕體驗收起與展開。

(上方為會員數據列表資料展示區,數據行水平/垂直捲動時,下方匯總列始終浮動固定在畫面最底層)
用户总金额(不含测试用户) ***
|
三方游戏总余额(参考值) ***
|
当日注册 7
|
当日注册有效用户(首充) 0

📐5.4 底部金額匯總列核心機制與互動規格

1. 固定置底機制 (Fixed / Sticky Bottom)
• 常駐位置:匯總列固定置於視窗或表格容器最下方(position: sticky; bottom: 0;),確保操作員在向下滾動瀏覽數百條會員資料時,隨時掌握大盤核心財務與新增註冊人數。
• 響應式橫向捲動:若螢幕寬度較小,匯總列內部支援平滑橫向滾動或彈性排列,確保所有指標均可被完整檢視,不發生文字遮擋。
2. 點擊收起與展開機制 (Collapsible Interaction)
• 收起按鈕:匯總列中間上方配有圓形收起按鈕(圖示為 ⌵)。
• 收起狀態:操作員點擊收起按鈕後,匯總列向下滑動摺疊收合,轉為貼底微型展開按鈕([ ⌃ 展開金額匯總 ]),最大化表格資料行的垂直展示空間。
• 狀態記憶:收起或展開之偏好設定可持久化保存於前端 LocalStorage,刷新頁面後維持先前的收合狀態。
3. 敏感金額脫敏保護與眼睛圖示顯隱切換 (Data Masking & Visibility Toggle)
• 預設脫敏遮蔽:財務敏感指標(用户总金额(不含测试用户) 與 三方游戏总余额(参考值))預設以密碼掩碼 *** 遮蔽展示,防範個資外洩。
• 眼睛按鈕切換 (👁):數值旁配有眼睛圖示按鈕,點擊可一鍵解除掩碼檢視即時匯總金額,再次點擊切換回遮蔽狀態。
• 口徑名稱顯性化:指標標題直接標記 (不含测试用户) 與 (参考值),直觀標明大盤統計範圍已自動過濾測試帳號,兼具嚴謹性與易讀性。
4. 底部匯總各項統計指標口徑規格表
指標名稱 (介面標籤) 截圖展示範例 色彩與脫敏/互動控制 統計業務口徑定義與連動邏輯
用户总金额(不含测试用户) *** 👁
明文範例:128,450.00
👁 支援明文/遮蔽切換 預設 *** 掩碼脫敏
全站真實會員主錢包總金額加總。
• 自動排除測試:標題直接標註 (不含测试用户),系統在匯總統計時已自動過濾所有內部測試帳號及白名單帳號。
• 敏感資金脫敏保護:屬財務高度敏感指標,預設以 *** 遮蔽;點擊數值旁眼睛圖示 👁 可一鍵切換展示真實匯總金額,再次點擊恢復遮蔽。
三方游戏总余额(参考值) *** 👁
明文範例:36,820.50
👁 支援明文/遮蔽切換 預設 *** 掩碼脫敏
會員在各外部第三方遊戲場館錢包留存之總餘額。
• 參考值特性標註:標題直接標註 (参考值),因各外部三方遊戲商(體育、真人、電子、棋牌等)錢包受 API 查詢排程與接口延遲影響可能存在秒級差異,故供大盤參考。
• 排除測試與脫敏保護:同樣自動排除內部測試帳號;預設以 *** 遮蔽,點擊 👁 圖示切換明文/遮蔽。
当日注册 7 藍色粗體醒目數值 當日新增註冊會員總人數。
• 統計時間範圍:以今日自然日 00:00:00 起至當前時刻為止,全站新增註冊成功的會員總人數。
• 介面展示風格:無多餘單位後綴,以藍色醒目加粗字體直接呈現人數計數(如截圖中的 7)。
当日注册有效用户(首充) 0 綠色粗體醒目數值 當日註冊且已完成首筆充值入款之有效會員人數。
• 引流轉化核心指標:統計今日新註冊且已成功入款(首充)的會員人數,作為營運與推廣人員評估當日獲客轉化質量與效率的關鍵數據。
• 介面展示風格:標籤使用半形括號 (首充),以綠色醒目加粗字體直接呈現人數計數(如截圖中的 0)。
收起 / 展開按鈕 (折疊控制項) ⌵(收起) / ⌃(展開) 居中懸浮圓形按鈕 底部匯總列折疊收合控制開關。
• 外觀與定位:圓形白底按鈕(28x28px,帶陰影),半懸浮嵌入於匯總固定列上方邊框正中央處。
• 互動行為:點擊 ⌵ 向下滑動摺疊收起匯總列,轉為貼底微型按鈕 [ ⌃ 展開金額匯總 ],釋放更多垂直表格瀏覽空間;點擊可一鍵還原展開。狀態透過前端 LocalStorage 持久化記憶。