5. 數據列表與卡片展示模塊
5.1 視圖模式切換
本次改版將二維高密度的「列表模式 (Flat List View)」定為初始載入之默認視圖,核心定位為盡可能讓畫面一次展示多條數據之間的橫向比較,且點擊左側箭頭展開即可查閱更多資訊卡片;而「巢狀樹狀模式」則專注於盡可能展示單一用戶所有的相關完整資訊與代理階層。操作員切換後的偏好將自動由前端持久化記憶。
5.2 一級欄位定義與特殊展示邏輯
5.2.1 表頭金額排序與欄位固定在最前前端交互規格 (Header Sorting & Freeze Columns Interaction)
| 交互功能項 | 控制圖標 | 視覺反饋 |
|---|---|---|
| 金額表頭排序 (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)架構則照舊維持既有代理體系卡片樣式,僅整合「頭像與在線狀態」欄位顯示。
「展開卡片」是用於會員列表中的詳細資訊面板。當管理員點擊表格左側的展開按鈕(> /
▾)時,該行下方會向外展開一個結構化的卡片容器,完整呈現該會員的綜合維度數據與標籤管理,方便管理員在不跳轉頁面的情況下進行快速審核與資料檢視。
展開卡片內部採用多欄式區塊(Grid / Flex 佈局)進行資訊封裝,主要由「左側獨立大頭像」、「中央多維度卡片群」(包含 6 大常規模組與 1 個默認隱藏的信貸卡片模組,支援水平滾動瀏覽)以及「底部全寬備註橫幅」三大部分構成:
- 真實姓名:會員綁定的真實姓名(如
李小明,若未填寫則顯示 -)。 - 註冊模式:系統註冊管道與模式(如
一般註冊、快捷註冊、代理開戶)。 - 生日:會員出生年月日(如
1991-02-11,若未設定顯示 -)。 - 暱稱:會員自訂暱稱(如
小明)。 - 帳號類型:帳號營運性質(如
普通帳號、測試帳號)。 - 手機號:綁定狀態膠囊(如 已綁定 或 未綁定)。
- 會員類型:平台體系身分類型(如
代理會員、普通會員)。 - 設備類型:用戶常用或註冊設備端(如
iOS、Android、PC)。 - 等級:對應的 VIP 等級標示(如
VIP 3)。 - 離開天數:距離上次離線未登入的天數(如
0天)。
M 或用戶頭像);若 國家 欄位已放置於主表顯示,卡片內則自動反灰標記為 已在主表 或由主表優先呈現。
- 存提款常規匯總 (4 項):
• 存款總額:歷史累計充值金額(藍色高亮,如
158,000)。• 提款總額:歷史累計提現金額(藍色高亮,如45,000)。• 存款次數:歷史充值成功總筆數(如12)。• 提款次數:歷史提款成功總筆數(如3)。 - 後台加扣款與活動 (6 項):
• 後台加款總額:人工後台補款金額(綠色高亮,如
50,000)。• 後台扣款總額:人工後台扣除金額(如 - 或數值)。• 後台活動加款總額:活動獎勵加款總金額(綠色高亮,如500)。• 後台加款次數:人工加款次數(如1)。• 後台扣款次數:人工扣款次數(如0)。• 後台活動加款次數:活動加款次數(如1)。 - 免提直充專區 (4 項):
• 免提直充充值總額:免提直充充值金額(藍色高亮,如
15,000)。• 免提直充充值次數:免提直充充值筆數(如3)。• 免提直充提款總額:免提直充提款金額(藍色高亮,如5,000)。• 免提直充提款次數:免提直充提款筆數(如1)。
- 成長值:當前累積的活躍成長點數(如
2800)。 - VIP成長值:推動 VIP 等級晉階專用的累積成長值(如
8500)。 - 會員積分:可用於點數商城或活動兌換的積分餘額(如
3,500)。
- 邀請人:直屬上級推薦人的會員帳號(若無推薦人則顯示 -)。
- 邀請碼:會員專屬推薦碼(如
INV001,附帶一鍵複製 📋 功能)。 - 下級/團隊:直屬下線人數與團隊總人數統計(如 5/2,支援藍色高亮點擊直接穿透跳轉至下級會員明細列表)。
- 佣金餘額:透過下線推薦返利累積之可提領佣金金額(紅色/橘色高亮數值,如
1,280)。
- 餘額:存入理財增值帳戶中的本金總額(如
15,000)。 - 利息:已產生或累計派發的收益利息金額(綠色高亮數值,如
35)。
[體育偏好]/[真人偏好])、客群分類([大戶])、交易特徵([高頻交易]/[高消費])與狀態標記([正常]/[活躍])。
- 借貸金額 (欠款):默認不顯示 會員目前累計借貸尚未還款之本金總額(欠款數值,如
0 RMB或50,000.00),支援借款流水追溯。 - 信用值:默認不顯示 會員在平台內部評定之信用評分或信貸額度指標(如信用分數
2,000分或信用評級)。 - 可用額度:默認不顯示 授信可用借貸額度(如
5,000 RMB;若操作員已在主表中勾選配置該欄位,則此處標記已在主表並由主表優先呈現)。
大戶需重點跟進維護,近期活躍度高)。支援文本溢出自動換行與 Hover Tooltip 完整檢視。
2026-06-15 客服電話回訪:用戶對出款速度與活動返水滿意)。紀錄最新一次跟進歷史,利於跨部門協作。
點擊表格最左側的展開列圖示(
> / ▾),觸發向下展開動畫;再次點擊則收合卡片。系統支援「單行展開」或「多行同時展開」,預設允許多個會員卡片同時展開以方便跨用戶比對數據。
卡片中的金額數字(如存款總額、佣金餘額等)若帶有底線或互動樣式,點擊後應可直接導向對應的明細報表或流水紀錄頁面,縮短操作路徑。
針對「備註」等可能出現極長字串的欄位,介面需支援自動斷行、CSS 省略號(
Ellipsis)顯示,或滑鼠懸停(Hover)時透過 Tooltip 浮層顯示完整文字內容,避免版面變形。
5.3.4 特殊欄位合併與彈層展示邏輯
| 特殊欄位設計 | 整合呈現規則 |
|---|---|
| 在線狀態與頭像合併 | 在會員頭像右下角疊加狀態圓點(以顏色區分:在線 / 離線 / 閒置),Hover 顯示「最後活動於 5分鐘前」。 |
| 主錢包幣種與存取款匯總 | 存款總額與取款總額垂直並列於同一單元格,下方標示主幣種與「淨充值 (存 - 取)」區塊(以顏色區分正負值)。 |
| 多錢包彈層 | 單擊「三方餘額」數值,即時展開小浮層展示各場館錢包明細(真人、體育、電子、彩票場館與餘額寶)。 |
| 邀請人與邀請碼規則 | 一律顯示字段。無數據時一律統一顯示為 -(以顏色區分弱化);有數據時正常帶入數值並附帶「一鍵複製 📋」圖標。 |
5.2.5 頁面骨架屏加載規格 (Skeleton Screen Loading Interaction Specification) 前端交互核心 CLS = 0 零佈局偏移
為避免表格數據在非同步載入期間出現「整頁白屏」或「傳統轉圈菊花 (Spinner) 遮蔽導致的版面劇烈下沉跳動」,系統在數據請求中(搜尋篩選、排序切換、分頁跳轉、視圖切換)統一採用「高仿真灰階流光骨架屏 (Shimmer Skeleton)」。骨架屏嚴格按照實際表格佈局佔位,實現 CLS (Cumulative Layout Shift) = 0 的平滑過渡。
5.3 自訂欄位與卡片配置
操作員點擊列表右上角之
自訂欄位按鈕 後,系統由畫面下方平滑滑出「自訂欄位設定」抽屜。抽屜向上展開之最大高度嚴格限制不會超過表頭,維持背景列表的清晰可視性與操作上下文。
包含帳號信息、等級、額度等多個維度分類。操作員可按住
:: 手柄微調前後順序,或點擊眼睛圖示切換顯隱。
系統核心身分識別欄位標註為 🔒 鎖定(如:
用戶ID 🔒、會員名 🔒,對應截圖左側帳號信息內帶鎖標示),預設固定在主表格列,不可隨意隱藏,防範操作員檢索定位遺失。
包含基本資料、額度、存取款資料等多個卡片。可以自訂各卡片內部欄位顯示,以及自訂該欄位是要呈現在「一級主表欄位」或「展開卡片內」(標示
+ 號加入卡片);若某欄位已設定於主表(如截圖右側的 国家、用户币别、可用额度、三方余额),在卡片區即反灰標記為 已在主表,提供清晰防重機制與靈活排版。
LocalStorage 持久化保存,頁面重整或切換後自動還原。
| ⚡ 核心互動功能需求 | ||
|---|---|---|
| 互動功能項 | 控制項與交互元件 | 業務規格與詳細互動行為規則 |
| 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)」。該列固定置底,上下捲動表格時始終保持可視,內建敏感資金脫敏遮蔽與 👁 一鍵顯隱切換、顯性排除測試帳號標記、當日註冊及有效首充即時統計,並配備上方居中之圓形收起/展開按鈕(⌵)。
下方為底部固定列之真實交互模擬:請嘗試點擊 👁 圖示切換金額遮蔽/明文,或點擊上方 ⌵ 按鈕體驗收起與展開。
📐5.4 底部金額匯總列核心機制與互動規格
• 常駐位置:匯總列固定置於視窗或表格容器最下方(
position: sticky; bottom: 0;),確保操作員在向下滾動瀏覽數百條會員資料時,隨時掌握大盤核心財務與新增註冊人數。• 響應式橫向捲動:若螢幕寬度較小,匯總列內部支援平滑橫向滾動或彈性排列,確保所有指標均可被完整檢視,不發生文字遮擋。
• 收起按鈕:匯總列中間上方配有圓形收起按鈕(圖示為
⌵)。• 收起狀態:操作員點擊收起按鈕後,匯總列向下滑動摺疊收合,轉為貼底微型展開按鈕(
[ ⌃ 展開金額匯總 ]),最大化表格資料行的垂直展示空間。• 狀態記憶:收起或展開之偏好設定可持久化保存於前端
LocalStorage,刷新頁面後維持先前的收合狀態。
• 預設脫敏遮蔽:財務敏感指標(
用户总金额(不含测试用户) 與 三方游戏总余额(参考值))預設以密碼掩碼 *** 遮蔽展示,防範個資外洩。• 眼睛按鈕切換 (👁):數值旁配有眼睛圖示按鈕,點擊可一鍵解除掩碼檢視即時匯總金額,再次點擊切換回遮蔽狀態。
• 口徑名稱顯性化:指標標題直接標記
(不含测试用户) 與 (参考值),直觀標明大盤統計範圍已自動過濾測試帳號,兼具嚴謹性與易讀性。
| 指標名稱 (介面標籤) | 截圖展示範例 | 色彩與脫敏/互動控制 | 統計業務口徑定義與連動邏輯 |
|---|---|---|---|
| 用户总金额(不含测试用户) |
*** 👁明文範例:128,450.00 |
👁 支援明文/遮蔽切換
預設 *** 掩碼脫敏
|
全站真實會員主錢包總金額加總。 • 自動排除測試:標題直接標註 (不含测试用户),系統在匯總統計時已自動過濾所有內部測試帳號及白名單帳號。• 敏感資金脫敏保護:屬財務高度敏感指標,預設以 *** 遮蔽;點擊數值旁眼睛圖示 👁 可一鍵切換展示真實匯總金額,再次點擊恢復遮蔽。
|
| 三方游戏总余额(参考值) |
*** 👁明文範例:36,820.50 |
👁 支援明文/遮蔽切換
預設 *** 掩碼脫敏
|
會員在各外部第三方遊戲場館錢包留存之總餘額。 • 參考值特性標註:標題直接標註 (参考值),因各外部三方遊戲商(體育、真人、電子、棋牌等)錢包受 API 查詢排程與接口延遲影響可能存在秒級差異,故供大盤參考。• 排除測試與脫敏保護:同樣自動排除內部測試帳號;預設以 *** 遮蔽,點擊 👁 圖示切換明文/遮蔽。
|
| 当日注册 | 7 | 藍色粗體醒目數值 |
當日新增註冊會員總人數。 • 統計時間範圍:以今日自然日 00:00:00 起至當前時刻為止,全站新增註冊成功的會員總人數。• 介面展示風格:無多餘單位後綴,以藍色醒目加粗字體直接呈現人數計數(如截圖中的 7)。
|
| 当日注册有效用户(首充) | 0 | 綠色粗體醒目數值 |
當日註冊且已完成首筆充值入款之有效會員人數。 • 引流轉化核心指標:統計今日新註冊且已成功入款(首充)的會員人數,作為營運與推廣人員評估當日獲客轉化質量與效率的關鍵數據。 • 介面展示風格:標籤使用半形括號 (首充),以綠色醒目加粗字體直接呈現人數計數(如截圖中的 0)。
|
| 收起 / 展開按鈕 (折疊控制項) |
⌵(收起) / ⌃(展開)
|
居中懸浮圓形按鈕 |
底部匯總列折疊收合控制開關。 • 外觀與定位:圓形白底按鈕( 28x28px,帶陰影),半懸浮嵌入於匯總固定列上方邊框正中央處。• 互動行為:點擊 ⌵ 向下滑動摺疊收起匯總列,轉為貼底微型按鈕 [ ⌃ 展開金額匯總 ],釋放更多垂直表格瀏覽空間;點擊可一鍵還原展開。狀態透過前端 LocalStorage 持久化記憶。
|