SECTION 04
對應來源:功能修改對照表 - 頂部按鈕與篩選列;權限對照表
4. 上方按鈕與搜尋篩選模塊
📍
模塊涵蓋範圍說明:
本章節專門規範會員管理介面最上方的「頂部功能快捷與批量按鈕區」以及下方雙排展開之「搜尋條件與進階篩選模塊」。
🖼️
介面對應區域截圖 (頂部快捷按鈕列與篩選搜尋區域)
對應介面區塊
🔍 點擊圖片可於新分頁展開檢視高解析度原始截圖
⚡第一部分:頂部功能快捷與批量按鈕
4.1 獨立快捷按鈕
「視圖模式切換」按鈕(頂部左側:巢狀 vs 列表)
位於頂部操作列最左側。提供操作員快速切換「巢狀樹狀模式」(點擊方格圖示)與「扁平列表模式」(點擊雙橫條圖示)。系統具備前端狀態持久化記憶,重新整理或重新登入時自動還原前次設定。
原型切換按鈕樣式
「新增會員」按鈕
頂部右側主按鈕。連動『新增會員』權限(無權限時按鈕隱藏)。點擊滑出「新增會員一級抽屜」,可配置代理線、帳號類型、初始等級與密碼。
「批量操作 ▾」選單
頂部次要功能按鈕。點擊展開下拉選單,收納「批量更新用戶數據」與「批量更新用戶資訊」按鈕,點擊後出現操作彈窗照舊。
「導出數據」按鈕
頂部獨立操作按鈕。連動『導出用戶數據』權限(無權限時按鈕隱藏)。點擊後觸發後台用戶數據匯出,點擊後出現彈窗照舊。
4.2 批量操作收納選單
頂部右側「批量操作 ▾」下拉選單收納以下 2 項批量功能按鈕:
1. 批量更新用戶數據
點擊後出現對應操作彈窗照舊。勾選列表會員後,點擊進入批量加款、扣款、餘額或信用配置彈窗執行處理。
2. 批量更新用戶資訊
點擊後出現對應操作彈窗照舊。勾選列表會員後,點擊進入批量指派或維護聯絡方式、標籤等資訊彈窗執行處理。
💡
按鈕自適應隱藏規則: 操作員對上述兩項批量功能全無授權時,主「批量操作」按鈕直接隱藏;若擁有部分授權,下拉清單內僅顯示受權子項。
4.3 批量操作業務流程與權限連動
| 批量功能項目 | 對應權限項 | 觸發條件與交互流程(點擊後彈窗照舊) |
|---|---|---|
| 批量更新用戶數據 | 批量更新用户余额 | 勾選會員 > 點擊「批量操作」下拉選單中的「批量更新用戶數據」 > 出現彈窗照舊,輸入金額/變更設定後提交 |
| 批量更新用戶資訊 | 批量更新用户联系方式 | 勾選會員 > 點擊「批量操作」下拉選單中的「批量更新用戶資訊」 > 出現彈窗照舊,批次更新聯繫資料或標籤後提交 |
🔍第二部分:搜尋與篩選列模塊
🖼️
搜尋與篩選列介面對照截圖
篩選區域詳圖
🔍 點擊圖片可於新分頁展開檢視高解析度原始截圖
💡
模塊功能概述: 篩選列提供營運與客服人員透過多維度條件快速檢索會員資料的能力,支援精確搜尋、狀態過濾、各項進階查詢條件、動態標籤收摺以及極限狀態處理,以提升後台管理與營運效率。
📐
搜尋列一鍵收起與展開互動機制 (Filter Bar Collapse & Expand)
支援點擊收起 / 展開
點擊此按鈕可以收起或者展開上面的整個搜尋列。圖一與圖三為展開/收起控制按鈕,圖二為收起後下方數據表格展開的真實全貌樣式:
4.4 篩選欄位字典與控制項規格
篩選列採用多維度彈性網格排版,依據業務查詢頻率與使用場景,共規劃 12 大篩選維度控制項。本表已全面整合「自訂篩選欄位清單(11 項)」與核心常駐控制項,並規範系統初始與重置時「默認全部勾選顯示」之業務需求:
💡
自訂篩選欄位整合與「默認全部勾選顯示」規範:
• 全維度預設開啟:項次 01 ~ 11 共 11 項可配製篩選維度,在系統初始載入或點擊「重置」時,規格要求全部默認勾選顯示(Default All Checked)於頂部篩選面板,使管理員初次進入即掌握最完整檢索條件。
• 自主精簡與狀態保存:管理員若需簡化畫面,可隨時點擊頂部自訂篩選按鈕開啟彈窗(詳見 4.8)自由取消勾選非必要條件,系統將自動透過
• 核心常駐必顯項:項次 12「帳號與身分複合檢索」為全局高頻核心中樞,強制常駐於頂部面板,不納入自訂彈窗勾選隱藏清單。
• 全維度預設開啟:項次 01 ~ 11 共 11 項可配製篩選維度,在系統初始載入或點擊「重置」時,規格要求全部默認勾選顯示(Default All Checked)於頂部篩選面板,使管理員初次進入即掌握最完整檢索條件。
• 自主精簡與狀態保存:管理員若需簡化畫面,可隨時點擊頂部自訂篩選按鈕開啟彈窗(詳見 4.8)自由取消勾選非必要條件,系統將自動透過
LocalStorage 持久化儲存個人設定。• 核心常駐必顯項:項次 12「帳號與身分複合檢索」為全局高頻核心中樞,強制常駐於頂部面板,不納入自訂彈窗勾選隱藏清單。
| 序號 | 篩選欄位名稱 | 控制項類型 | 自訂篩選預設狀態 | 預設值 | 選項值 / 輸入佔位符 (Placeholder) | 極限狀態描述 |
|---|---|---|---|---|---|---|
| 01 | 狀態 状态 |
下拉選單 | ☑️ 預設勾選顯示 | 全部 | 全部、正常、凍結、停用 |
照舊 |
| 02 | 用戶層級 用户层级 |
下拉選單 | ☑️ 預設勾選顯示 | 請選擇用戶層級 | 動態拉取後台已設定之用戶層級清單 | 照舊 |
| 03 | 用戶等級 用户等级 |
下拉選單 | ☑️ 預設勾選顯示 | 請選擇用戶等級 | VIP 成長體系等級清單 | 照舊 |
| 04 | 標籤篩選 标签筛选 |
下拉選單 | ☑️ 預設勾選顯示 | 請選擇 | 標籤字典選單(支援關鍵字快搜過濾標籤) | 極限狀態顯示規範(超過 2 個選項加上數量):當任一篩選字段選取或帶入超過 2 個選項時,介面控制項與動態標籤需自動折疊收納,僅顯示前 2 個選項並在後方標註數量(如:選項1, 選項2 +N 或 已選 N 項),避免多選撐破面板寬度。 |
| 05 | 排除條件 排除条件 |
標籤移除式選單 | ☑️ 預設勾選顯示 | 測試账号 (預設帶入) |
測試账号、未充值账号 |
極限狀態顯示規範(超過 2 個選項加上數量):當任一篩選字段選取或帶入超過 2 個選項時,介面控制項與動態標籤需自動折疊收納,僅顯示前 2 個選項並在後方標註數量(如:選項1, 選項2 +N 或 已選 N 項),避免多選撐破面板寬度。 |
| 06 | 設備類型 设备类型 |
下拉選單 | ☑️ 預設勾選顯示 | 請選擇設備類型 | 全部、PC、H5、Android、iOS 等終端類型 |
照舊 |
| 07 | 國家 国家 |
下拉選單 | ☑️ 預設勾選顯示 | 請選擇國家 | 各地區國家清單(如馬來西亞、越南、泰國、中國等) | 照舊 |
| 08 | 推廣人帳號 推广人账号 |
單行文字輸入框 | ☑️ 預設勾選顯示 | (空值) | 请输入推广人账号 |
照舊 |
| 09 | 未登入天數 未登入天数 (大于) |
數值輸入框 | ☑️ 預設勾選顯示 | (空值) | 请输入天数 (後綴單位:天) |
照舊 |
| 10 | 三方額度 三方额度 大于 |
數值輸入框 | ☑️ 預設勾選顯示 | (空值) | 请输入金额 (後綴單位:元) |
照舊 |
| 11 | 註冊時間範圍 注册时间 |
日期時間區間選擇器 | ☑️ 預設勾選顯示 | (空值 / 今日) | 年 / 月 / 日 -- : -- ~ 年 / 月 / 日 -- : -- |
照舊 |
| 12 | 帳號與身分複合檢索 账号 ▾ |
複合控制項 (下拉選單 + 動態輸入框) | 📌 核心常駐 (不可隱藏) | 模式:帳號 (精準匹配)(輸入框預設空值) |
預設:请输入精确账号(隨 19 項子選項即時動態切換,詳見 4.4.1) |
照舊 |
🔍 4.4.1 帳號與身份複合檢索選單 (19 項) 完整規格與動態佔位符字典
複合搜尋核心規範本控制項為營運與客服之高頻檢索中樞,整合帳號、身分標識、敏感通訊社群管道、安全驗證與網路軌跡。點擊左側選單切換時,右側輸入框自動清除前值並即時切換對應佔位符 (Placeholder);其中聯絡資料項目(郵箱、手機號、zalo、facebook、WhatsApp、tg)嚴格連動『查看会员解密详情』與『查看会员详情』權限,啟用才會看到,無權限時自動從下拉選單中剔除隱藏:
| 序號 | 下拉選單選項名稱 | 分類維度 | 輸入框動態佔位符 | 後台權限連動規則 |
|---|---|---|---|---|
| 01 | 帳號 | 帳號檢索 | 请输入账号 |
無權限限制 |
| 02 | 帳號(精确匹配) 預設 | 帳號檢索 | 请输入精确账号 |
無權限限制 |
| 03 | 会员ID | 系統唯一碼 | 请输入会员ID |
無權限限制 |
| 04 | 绑定银行卡 | 財務資產 | 请输入绑定银行卡号 |
無權限限制 |
| 05 | CPF | 身分資訊 | 请输入CPF |
無權限限制 |
| 06 | 昵称 | 身分資訊 | 请输入昵称 |
無權限限制 |
| 07 | 真实姓名 | 身分資訊 | 请输入真实姓名 |
無權限限制 |
| 08 | 邀请码 | 推廣歸屬 | 请输入邀请码 |
無權限限制 |
| 09 | 邮箱 🔒 | 敏感聯絡資料 | 请输入邮箱 |
連動『查看会员解密详情』(含子權限『查看会员解密邮箱详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 10 | 手机号 🔒 | 敏感聯絡資料 | 请输入手机号 |
連動『查看会员解密详情』(含子權限『查看会员解密电话详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 11 | zalo 🔒 | 敏感聯絡資料 | 请输入zalo |
連動『查看会员解密详情』(含子權限『查看会员解密zalo详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 12 | facebook 🔒 | 敏感聯絡資料 | 请输入facebook |
連動『查看会员解密详情』(含子權限『查看会员解密facebook详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 13 | WhatsApp 🔒 | 敏感聯絡資料 | 请输入WhatsApp |
連動『查看会员解密详情』(含子權限『查看会员解密whatsapp详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 14 | tg 🔒 | 敏感聯絡資料 | 请输入tg |
連動『查看会员解密详情』(含子權限『查看会员解密telegram详情』)與『查看会员详情』權限,啟用才會看到;無權限時選項自下拉清單剔除隱藏。 |
| 15 | 安全问题 | 安全防護 | 请输入安全问题 |
無權限限制 |
| 16 | 谷歌账号 | 第三方綁定 | 请输入谷歌账号 |
無權限限制 |
| 17 | 注册IP | 網路軌跡 | 请输入注册IP |
無權限限制 |
| 18 | 当前登录IP | 網路軌跡 | 请输入当前登录IP |
無權限限制 |
| 19 | 上次登录IP | 網路軌跡 | 请输入上次登录IP |
無權限限制 |
4.5 操作按鈕、動態搜尋標籤與收摺互動
🔍 搜尋 (Search) 按鈕
點擊後觸發 API 請求,帶入所有已填寫或選取的篩選條件,重新載入會員列表並將分頁歸至第 1 頁。同時即時更新下方「已生效搜尋標籤列」。
🔄 重置 (Reset) 按鈕
點擊後清空所有輸入框、下拉選單還原為初始預設值、清除所有動態產生的搜尋標籤(排除條件還原為預設),並自動重新整理列表。
🎛️ 自訂篩選維度控制
點擊彈出「自訂篩選欄位」彈窗,用戶可勾選或隱藏次要篩選條件(例如:未登入天數、主錢包幣種、生日月份等)。收起未勾選維度以最大化表格可視空間(詳見下方 4.8 節)。
🏷️動態搜尋標籤 (Search Tags) 互動規範
支援極限狀態收起與展開
- 標籤觸發機制:當使用者於篩選列填寫或選取條件後,點擊「搜尋」按鈕,系統會在篩選列下方即時動態生成對應的搜尋標籤(例如:
排除条件: 测试账号 ×、状态: 正常 ×)。 - 極限狀態收起與展開機制(Overflow Folding):當勾選或帶入過多標籤(極限情境),標籤數量超過兩行時,系統會自動出現「數量+展開」按鈕(例如
+7 个条件 ⌵)折疊隱藏超出兩行的標籤;點擊該按鈕後平滑展開全部標籤,並將按鈕切換為收起 ⌃,再次點擊即可折疊復原。 - 獨立標籤解除 (×):每個產生的標籤右側均配有刪除(
×)圖示。點擊特定標籤的刪除按鈕時,該項篩選條件會被即時解除、表單對應欄位清空還原,且列表會自動連動更新。 - 一鍵清空所有標籤 (🗑️):標籤列最右側配置「清空圖示」,點擊後可一鍵移除所有生效標籤,等同於觸發重置行為。
📐畫面滾動與表單收摺互動 (Collapse on Scroll)
- 表單滾動收摺機制:當頁面往下滾動時,完整的「多欄位篩選表單」會自動向上平滑收起隱藏,僅保留「已生效的搜尋標籤列」與右側「展開/收起控制圖示」固定於畫面上方,以釋放更多檢視表格的垂直空間。
- 手動切換控制:使用者可隨時透過標籤列右側的收摺/展開雙箭頭按鈕(圖一
︽/ 圖三︾,詳見「第二部分:搜尋與篩選列模塊」介面展示)手動切換進階篩選表單的顯示與隱藏,收起後下方數據表格自動向上展開(圖二樣式)。
4.6 特殊篩選條件規範與極限情境
🏷️ 用戶標籤精準搜尋
下拉選單支援標籤選擇,後端匹配邏輯僅支援精準搜尋。
💱 主錢包幣種加權過濾
支援體育多幣種帳號過濾(CNY, USDT, VND, THB 等)。預設為「全部幣種」,選擇特定幣種後,列表財務匯總將自動加權該幣種。
🚫 排除條件整合
具備標籤移除式選單與快捷開關:
1. 排除測試帳號(默認勾選)
2. 排除未充值帳號
1. 排除測試帳號(默認勾選)
2. 排除未充值帳號
⚡極限情境處理機制 (Extreme Scenarios)
- 多條件標籤溢位處理:當使用者勾選或帶入過多篩選條件,導致產生的搜尋標籤數量超過兩行時,標籤列支援折疊收合(顯示
+N 个条件 ⌵數量按鈕,詳見 4.5 節圖示規範)與多行平鋪展開(收起 ⌃),確保所有已生效的條件皆能清晰檢視或隨時一鍵清空(🗑️)。 - 超長欄位內容與字串截斷:當輸入框文字過長或特定標籤文字超出版面時,前端自動進行文字截斷(Ellipsis
...),並支援滑鼠懸停 (Tooltip) 顯示完整內容。
4.7 篩選欄位之權限連動隱藏機制
🔒
隱私安全防線: 操作員未獲授權之數據權限,對應之篩選搜尋條件直接從篩選列隱藏,嚴防透過檢索反覆盲猜碰撞敏感個資。
| 篩選條件 / 下拉選項項目 | 舊版現況 | 改版後依賴之權限項目 | 權限判斷與前端表現 | 合規與業務說明 |
|---|---|---|---|---|
| 登錄 IP 篩選輸入框 | 無權限連動 | 修改會員 與 會員詳情 | 勾選具其一會顯示;兩者皆無權限時輸入框整列隱藏,不可按 IP 搜尋 | 風控核心維度,非審核與編輯角色不可探測同 IP 會員分佈。 |
| 複合檢索下拉選項:敏感聯絡資料 『郵箱、手機號、zalo、facebook、WhatsApp、tg』 |
無權限連動 | 查看会员解密详情 與 查看会员详情 | 兩者均啟用才會顯示;未同時啟用或缺乏任一權限時,此 6 項聯絡通訊方式直接從複合下拉選單中剔除隱藏 | 極高安全等級:防範外部非授權人員或一般客服透過輸入號碼/帳號盲猜碰撞會員社群敏感個資與通訊方式。 |
| 生日月份篩選 | 無權限連動 | 查看會員生日 / 敏感個資 | 勾選會顯示;無權限時該篩選項直接隱藏,自訂維度中置灰禁選 | 保護個資隱私,避免非授權批次篩選當月壽星名單進行私下行銷。 |
| 綁定銀行卡號篩選 | 無權限連動 | 修改會員 或 會員詳情 | 勾選具其一會顯示;無權限時不提供銀行卡號篩選輸入框 | 金融防洗錢與銀行帳戶安全隔離,防止外部探測卡號綁定關聯。 |
4.8 自訂篩選欄位
📋1. 模組概述
「自訂篩選欄位」允許管理員根據日常維運習慣與檢索需求,自定義頂部篩選面板中顯示的搜尋條件欄位,隱藏不常用的篩選項目以保持介面清爽,提升資料查詢效率。
⚙️2. 介面佈局與互動元件
• 觸發入口:點擊頂部篩選區旁的自訂按鈕(圖二:三直槓調節器圖示按鈕
)開啟「自訂篩選欄位」彈窗。
)開啟「自訂篩選欄位」彈窗。
• 彈窗結構(圖一):
- 標題與關閉:頂部標題「自定义筛选列」,右上角配置關閉圖示(
✕)。 - 選項列表:以多選框(Checkbox)列表形式垂直呈現所有 11 項可用的篩選條件(狀態、用戶層級、用戶等級、標籤篩選、排除條件、設備類型、國家、推廣人帳號、未登入天數、三方額度、註冊時間範圍)。
- 底部操作按鈕:右下角配置
[取消]與[確認]按鈕。
☑️3. 可勾選之篩選欄位清單規格(已整合至 4.4 字典大表)
默認全部勾選顯示 (Default All Checked)
為提升規格維護一致性與閱讀效率,11 項可勾選篩選維度之完整控制項類型、預設值、佔位符、輸入校驗與維運說明已全面整合至 4.4 篩選欄位字典與控制項規格。
📌 4.8 核心業務與「默認全部勾選顯示」規範:
- 默認全部勾選顯示:系統初始載入或點擊「重置」時,彈窗內全部 11 項篩選欄位(狀態、用戶層級、用戶等級、標籤篩選、排除條件、設備類型、國家、推廣人帳號、未登入天數、三方額度、註冊時間範圍)預設狀態皆為勾選(☑)並在頂部篩選面板完整顯示。
- 自主精簡與持久記憶:管理員可隨時透過本彈窗取消勾選不常用欄位,點擊 [確認] 後即時自頂部面板隱藏,並由前端
LocalStorage持久化儲存個人自訂偏好。 - 核心常駐必顯控制項:第 12 項「帳號與身分複合檢索」為核心檢索中樞,不納入自訂勾選列表,強制常駐於頂部面板,不可隱藏。
⚡4. 核心互動功能需求
4.1 顯示與隱藏切換
互動行為:
• 每個篩選條件左側皆配有勾選框(Checkbox)。
• 勾選(☑):該篩選欄位即時或確認後呈現在頂部篩選面板中。
• 取消勾選(☐):該篩選欄位從頂部篩選面板中隱藏。
互動行為:
• 每個篩選條件左側皆配有勾選框(Checkbox)。
• 勾選(☑):該篩選欄位即時或確認後呈現在頂部篩選面板中。
• 取消勾選(☐):該篩選欄位從頂部篩選面板中隱藏。
4.2 確認與儲存
互動行為:
• 點擊 [確認]:系統儲存當前管理員的勾選偏好(透過前端
• 點擊 [取消] 或右上角 ✕:放棄本次變更,關閉彈窗,篩選面板保持原樣不變。
互動行為:
• 點擊 [確認]:系統儲存當前管理員的勾選偏好(透過前端
LocalStorage 持久化儲存),關閉彈窗,並即時動態刷新頂部篩選面板的佈局。• 點擊 [取消] 或右上角 ✕:放棄本次變更,關閉彈窗,篩選面板保持原樣不變。