From 80c2091baf61ffe36b115fc4f045639eb1300cff Mon Sep 17 00:00:00 2001
From: john <cynell@139.com>
Date: Mon, 24 Aug 2026 11:36:13 +0800
Subject: [PATCH] feat(billing): add all/A/B tabs for formula user filter

Replace the formula assignment dropdown with tab buttons so admins can
quickly view all users or filter by billing formula A or B.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/admin/pages/BillingPage.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/admin/pages/BillingPage.tsx b/src/admin/pages/BillingPage.tsx
index f454682..f313159 100644
--- a/src/admin/pages/BillingPage.tsx
+++ b/src/admin/pages/BillingPage.tsx
@@ -390,6 +390,20 @@ function FormulaAssignmentSection() {
       <p className="muted">勾选用户后分配到公式 A 或 B。未分配用户默认使用公式 A。</p>
       {error && <p className="banner banner-error">{error}</p>}
       {message && <p className="banner banner-info">{message}</p>}
+      <div className="admin-tabs billing-formula-filter-tabs" role="tablist" aria-label="按计量公式筛选用户">
+        {(['all', 'A', 'B'] as const).map((key) => (
+          <button
+            key={key}
+            type="button"
+            role="tab"
+            aria-selected={formulaFilter === key}
+            className={`admin-tab${formulaFilter === key ? ' active' : ''}`}
+            onClick={() => setFormulaFilter(key)}
+          >
+            {key === 'all' ? '全部' : `公式 ${key}`}
+          </button>
+        ))}
+      </div>
       <div className="billing-toolbar">
         <input
           className="users-search-input"
@@ -397,15 +411,6 @@ function FormulaAssignmentSection() {
           value={search}
           onChange={(event) => setSearch(event.target.value)}
         />
-        <select
-          className="billing-filter-select"
-          value={formulaFilter}
-          onChange={(event) => setFormulaFilter(event.target.value as 'all' | BillingFormulaKey)}
-        >
-          <option value="all">全部公式</option>
-          <option value="A">公式 A</option>
-          <option value="B">公式 B</option>
-        </select>
         <button type="button" className="ghost-btn" onClick={() => void reload()} disabled={assigning}>
           刷新用户
         </button>