优化复刻视频脚本和下拉框样式

core/frontend/src/routes/account.tsx

@@ -7,6 +7,7 @@ import type { NavigateFn } from "./route-config";
 import { money, pts, stageMeta, yuan } from "./stage-config";
 import { pageWindow } from "../components/pager";
 import { useBodyScrollLock, useOverlayTransition } from "../components/overlays";
+import { CustomSelect } from "../components/custom-select";
 
 const ROLE_LABEL: Record<string, string> = { owner: "超管", admin: "团管", member: "成员", viewer: "访客" };
 const STATUS_LABEL: Record<string, string> = { active: "活跃", invited: "待激活", disabled: "已停用" };
@@ -466,19 +467,31 @@ export function AccountPage({ billing, projects, team, onRecharge, onNotify }: {
 
       <div className={`tab-panel ${tab === "bills" ? "active" : ""}`}>
         <div className="filter-bar">
-          <select value={billType} onChange={(e) => { setBillType(e.target.value); setBillPage(1); }} aria-label="按类型筛选">
-            <option value="all">全部类型</option>
-            <option value="charge">扣费</option>
-            <option value="recharge">充值</option>
-            <option value="reserve">预扣</option>
-            <option value="release">释放</option>
-            <option value="adjustment">调整</option>
-            <option value="refund">退款</option>
-          </select>
-          <select value={billMember} onChange={(e) => { setBillMember(e.target.value); setBillPage(1); }} aria-label="按成员筛选">
-            <option value="all">全部成员</option>
-            {billMemberOptions.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
-          </select>
+          <CustomSelect
+            size="sm"
+            aria-label="按类型筛选"
+            value={billType}
+            onChange={(next) => { setBillType(next); setBillPage(1); }}
+            options={[
+              { value: "all", label: "全部类型" },
+              { value: "charge", label: "扣费" },
+              { value: "recharge", label: "充值" },
+              { value: "reserve", label: "预扣" },
+              { value: "release", label: "释放" },
+              { value: "adjustment", label: "调整" },
+              { value: "refund", label: "退款" },
+            ]}
+          />
+          <CustomSelect
+            size="sm"
+            aria-label="按成员筛选"
+            value={billMember}
+            onChange={(next) => { setBillMember(next); setBillPage(1); }}
+            options={[
+              { value: "all", label: "全部成员" },
+              ...billMemberOptions.map((m) => ({ value: m.id, label: m.label })),
+            ]}
+          />
           {billFiltered && (
             <button className="filter-reset" type="button" onClick={() => { setBillType("all"); setBillMember("all"); setBillPage(1); }}>清除筛选</button>
           )}
@@ -539,12 +552,18 @@ export function AccountPage({ billing, projects, team, onRecharge, onNotify }: {
 
       <div className={`tab-panel ${tab === "by-project" ? "active" : ""}`}>
         <div className="filter-bar">
-          <select value={projStatus} onChange={(e) => setProjStatus(e.target.value as typeof projStatus)} aria-label="按状态筛选">
-            <option value="all">全部状态</option>
-            <option value="wip">进行中</option>
-            <option value="ok">已完成</option>
-            <option value="fail">失败 · 待重跑</option>
-          </select>
+          <CustomSelect
+            size="sm"
+            aria-label="按状态筛选"
+            value={projStatus}
+            onChange={(next) => setProjStatus(next as typeof projStatus)}
+            options={[
+              { value: "all", label: "全部状态" },
+              { value: "wip", label: "进行中" },
+              { value: "ok", label: "已完成" },
+              { value: "fail", label: "失败 · 待重跑" },
+            ]}
+          />
           {projFiltered && (
             <button className="filter-reset" type="button" onClick={() => setProjStatus("all")}>清除筛选</button>
           )}
@@ -578,12 +597,18 @@ export function AccountPage({ billing, projects, team, onRecharge, onNotify }: {
 
       <div className={`tab-panel ${tab === "by-member" ? "active" : ""}`}>
         <div className="filter-bar">
-          <select value={memRole} onChange={(e) => setMemRole(e.target.value as typeof memRole)} aria-label="按角色筛选">
-            <option value="all">全部角色</option>
-            <option value="owner">超管</option>
-            <option value="admin">团管</option>
-            <option value="member">成员</option>
-          </select>
+          <CustomSelect
+            size="sm"
+            aria-label="按角色筛选"
+            value={memRole}
+            onChange={(next) => setMemRole(next as typeof memRole)}
+            options={[
+              { value: "all", label: "全部角色" },
+              { value: "owner", label: "超管" },
+              { value: "admin", label: "团管" },
+              { value: "member", label: "成员" },
+            ]}
+          />
           {memFiltered && (
             <button className="filter-reset" type="button" onClick={() => setMemRole("all")}>清除筛选</button>
           )}