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 |
📌 支援固定
🔒 核心鎖定
|
系統為每位會員派發的唯一識別編號(如 1239361225)。 |
|
| 會員名 |
📌 支援固定
🔒 核心鎖定
|
會員登入或顯示使用的帳號名稱(如 mingv0717001)。 |
|
| 代理 |
📌 支援固定
|
該會員所歸屬的上級代理商代號(如 dl)。 |
|
| 狀態 |
📌 支援固定
|
帳戶目前的運作狀態(如正常、凍結、停用)。 | |
| 2. 等級 | VIP等級 |
📌 支援固定
|
會員在平台中所處的 VIP 級別(如 VIP 1 或數字級別)。 |
| 支付層級 |
📌 支援固定
|
會員被分配到的金流/支付層級配置(如預設層)。 | |
| 3. 額度 | 主錢包幣種 |
📌 支援固定
|
會員主錢包所使用的結算貨幣單位(如 RMB、VND、USDT 等)。 |
| 可用額度 |
📌 支援固定
⇅ 支援排序
|
主錢包中目前可供玩家自由使用或投注的餘額。金額相關欄位,支援點擊表頭排序。 | |
| 三方餘額 |
📌 支援固定
⇅ 支援排序
|
綁定或轉入第三方遊戲平台中的總餘額。金額相關欄位,支援點擊表頭排序。 | |
| 4. 存取款資料 | 主錢包 (取款總額) |
📌 支援固定
⇅ 支援排序
|
自主錢包歷史累計成功提領的總金額。金額相關欄位,支援點擊表頭排序。 |
| 主錢包 (存款總額) |
📌 支援固定
⇅ 支援排序
|
自主錢包歷史累計成功充值的總金額。金額相關欄位,支援點擊表頭排序。 | |
| 5. 彙總 (USDT) | 彙總 (USDT) - 取款總額 |
📌 支援固定
⇅ 支援排序
|
將各幣種或帳戶資產換算為 USDT 後的累計取款總額。金額相關欄位,支援點擊表頭排序。 |
| 彙總 (USDT) - 存款總額 |
📌 支援固定
⇅ 支援排序
|
將各幣種或帳戶資產換算為 USDT 後的累計存款總額。金額相關欄位,支援點擊表頭排序。 | |
| 6. 日期信息 | 登入IP |
📌 支援固定
|
會員最近一次登入系統時的來源 IP 位址。 |
| 新增時間 |
📌 支援固定
⇅ 時間排序
|
該會員帳號建立註冊的確切時間點。 | |
| 登入時間 |
📌 支援固定
⇅ 時間排序
|
會員最近一次登入系統的時間記錄。 |
5.2.3 列表模式展開卡片規格
本章節之「展開卡片」規格專屬於列表模式(List Mode)。操作員在二維表格中點擊每列展開按鈕時向下展開此卡片;而巢狀模式(Nested Tree Mode)架構則照舊維持既有代理體系卡片樣式,僅整合「頭像與在線狀態」欄位顯示。
「展開卡片」是用於會員列表中的詳細資訊面板。當管理員點擊表格左側的展開按鈕(> /
▾)時,該行下方會向外展開一個結構化的卡片容器,完整呈現該會員的綜合維度數據與標籤管理,方便管理員在不跳轉頁面的情況下進行快速審核與資料檢視。
展開卡片內部採用多欄式區塊(Grid / Flex 佈局)進行資訊封裝,主要劃分為以下資料模組(包含 6 大常規模組與 1 個默認隱藏的信貸卡片模組):
- 頭像與暱稱:左側展示會員頭像與加密顯示的用戶暱稱(如
mi***01)。 - 真實姓名:會員綁定的真實姓名(若未填寫則顯示 -)。
- 生日:會員的出生年月日(如
1986-01-08)。 - 帳號類型:如「普通帳號」。
- 會員類型:如「代理會員」。
- 等級:對應的 VIP 等級標示(如
VIP 1)。 - 註冊模式:系統註冊管道或模式(如「一般登録」)。
- 手機號:綁定狀態(如「已綁定」或「未綁定」)。
- 存款總額 / 存款次數:歷史累計充值金額與成功次數。
- 取款總額 / 取款次數:歷史累計提領金額與成功次數。
- 提款預扣金額:因稽核或流水未達標而暫時預扣的金額。
- 后台加款總額:由客服或管理員手動後台補入的總金額。
- 后台扣款總額:由後台手動扣除的總金額。
- 成長值:當前累積的活躍成長點數。
- VIP成長值:推動 VIP 升級專用的成長累積值。
- 會員積分:可用於商城或活動兌換的積分餘額。
- 幣種單位:明確標示當前計算的幣種(如
單位: RMB或VND)。 - 邀請人 / 邀請碼:上級推薦人的帳號與綁定代碼。
- 下級/團隊:直屬下線與團隊總人數統計(如
0/0)。 - 佣金余额:透過推薦返利累積可提領的佣金金額。
- 幣種單位:對應的結算貨幣。
- 餘額:存入理財帳戶中的本金總額。
- 利息:已產生或累計派發的收益利息。
- 用戶標籤:動態展示多個維運標籤(如
VIP 客戶、高頻交易、大戶、新註冊等)。 - 備註:管理員手動填寫的長期備註(支援長文本截斷與檢視)。
- 回访备注:客服或電銷團隊的回訪紀錄備忘。
- 借貸金額 (欠款):默認不顯示 會員目前累計借貸尚未還款之本金總額(欠款數值,如
50,000.00),支援借款流水追溯。 - 信用值:默認不顯示 會員在平台內部評定之信用評分或信貸額度指標(如信用分數
85分或信用評級)。
點擊表格最左側的展開列圖示(
> / ▾),觸發向下展開動畫;再次點擊則收合卡片。系統支援「單行展開」或「多行同時展開」,預設允許多個會員卡片同時展開以方便跨用戶比對數據。
卡片中的金額數字(如存款總額、佣金餘額等)若帶有底線或互動樣式,點擊後應可直接導向對應的明細報表或流水紀錄頁面,縮短操作路徑。
針對「備註」等可能出現極長字串的欄位,介面需支援自動斷行、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、會員名、代理、狀態、VIP等級),預設固定在主表格列,不可隨意隱藏,防範操作員檢索定位遺失。
包含基本資料、額度、信貸、成長與積分、推薦關係等多個卡片。可以自訂顯示字段卡片是否顯示,以及自訂該欄位是要呈現在「一級主表欄位」(標示
已在主表)或「卡片內」(標示 + 號加入卡片),提供高度彈性之個人化排版。
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)」。該列固定置底,上下捲動表格時始終保持可視,並提供手動收起/展開與已排除測試帳號之數據說明 Tooltip。
下方為底部固定列之真實交互模擬:請嘗試將滑鼠移入 ❓ 圖示查看提示,或點擊中間 ⌵ 按鈕體驗收起與展開。
📐5.4 底部金額匯總列核心機制與互動規格
• 常駐位置:匯總列固定置於視窗或表格容器最下方(
position: sticky; bottom: 0;),確保操作員在向下滾動瀏覽數百條會員資料時,隨時掌握大盤核心財務與新增註冊人數。• 響應式橫向捲動:若螢幕寬度較小,匯總列內部支援平滑橫向滾動或彈性排列,確保所有指標均可被完整檢視,不發生文字遮擋。
• 收起按鈕:匯總列中間上方配有圓形收起按鈕(圖示為
⌵)。• 收起狀態:操作員點擊收起按鈕後,匯總列向下滑動摺疊收合,轉為貼底微型展開按鈕(
[ ⌃ 展開金額匯總 ]),最大化表格資料行的垂直展示空間。• 狀態記憶:收起或展開之偏好設定可持久化保存於前端
LocalStorage,刷新頁面後維持先前的收合狀態。
• 提示內容:在金額相關指標(用戶餘額寶總金額、用戶總額度、三方遊戲總餘額)旁配置圖示(
❓ 或 ⓘ),當滑鼠懸停(Hover)時,立即浮現 Tooltip 提示文字:「已排除測試帳號」。• 業務對齊:與 4.6 節「排除條件整合」(預設勾選「排除測試帳號」)保持完全口徑一致,明確告知管理員當前大盤數據已自動扣除白名單與內部測試帳號之數據干擾。
| 指標名稱 | 介面展示範例 | 統計口徑定義與連動邏輯 |
|---|---|---|
| 用户余额宝总金额 | 41.25 USDT |
照舊 |
| 用户总额度 | 25,818.78 USDT |
照舊 |
| 三方游戏总余额 | 0 USDT |
照舊 |
| 当日注册 | 2 人 | 照舊 |
| 当日注册有效用户(首充) | 0 人 | 照舊 |
| 收起 / 展開按鈕 | ⌵ / ⌃ |
照舊 |