refactor: share responsive filter panel scaffold

src/web/components/ResponsiveFilterPanel.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import MobileFilterSheet from './MobileFilterSheet.js';
+
+type ResponsiveFilterPanelProps = {
+  isMobile: boolean;
+  mobileOpen: boolean;
+  onMobileOpen?: () => void;
+  onMobileClose: () => void;
+  mobileTitle: string;
+  mobileContent: React.ReactNode;
+  desktopContent?: React.ReactNode;
+  mobileTrigger?: React.ReactNode;
+  mobileTriggerLabel?: string;
+  mobileTriggerWrapperClassName?: string;
+  mobileTriggerWrapperStyle?: React.CSSProperties;
+  mobileTriggerButtonClassName?: string;
+  mobileTriggerButtonStyle?: React.CSSProperties;
+};
+
+export default function ResponsiveFilterPanel({
+  isMobile,
+  mobileOpen,
+  onMobileOpen,
+  onMobileClose,
+  mobileTitle,
+  mobileContent,
+  desktopContent = null,
+  mobileTrigger,
+  mobileTriggerLabel = '筛选',
+  mobileTriggerWrapperClassName = 'mobile-filter-row',
+  mobileTriggerWrapperStyle,
+  mobileTriggerButtonClassName = 'btn btn-ghost',
+  mobileTriggerButtonStyle = { border: '1px solid var(--color-border)' },
+}: ResponsiveFilterPanelProps) {
+  if (!isMobile) {
+    return <>{desktopContent}</>;
+  }
+
+  return (
+    <>
+      {mobileTrigger ?? (onMobileOpen ? (
+        <div className={mobileTriggerWrapperClassName} style={mobileTriggerWrapperStyle}>
+          <button
+            type="button"
+            className={mobileTriggerButtonClassName}
+            style={mobileTriggerButtonStyle}
+            onClick={onMobileOpen}
+          >
+            {mobileTriggerLabel}
+          </button>
+        </div>
+      ) : null)}
+      <MobileFilterSheet open={mobileOpen} onClose={onMobileClose} title={mobileTitle}>
+        {mobileContent}
+      </MobileFilterSheet>
+    </>
+  );
+}

src/web/pages/Accounts.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { api } from '../api.js';
 import CenteredModal from '../components/CenteredModal.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import ResponsiveFormGrid from '../components/ResponsiveFormGrid.js';
 import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
 import { useToast } from '../components/Toast.js';
@@ -976,7 +976,12 @@ export default function Accounts() {
         {activeSegment === 'tokens' && embeddedTokenActions}
       </div>
 
-      <MobileFilterSheet open={showMobileTools} onClose={() => setShowMobileTools(false)} title="连接排序与操作">
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showMobileTools}
+        onMobileClose={() => setShowMobileTools(false)}
+        mobileTitle="连接排序与操作"
+        mobileContent={(
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               <div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>排序方式</div>
@@ -1016,7 +1021,8 @@ export default function Accounts() {
               {actionLoading['health-refresh'] ? <><span className="spinner spinner-sm" />{tr('刷新状态中...')}</> : tr('刷新账户状态')}
             </button>
           </div>
-      </MobileFilterSheet>
+        )}
+      />
 
       <div
         style={{

src/web/pages/CheckinLog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { api } from "../api.js";
 import { MobileCard, MobileField } from "../components/MobileCard.js";
-import MobileFilterSheet from "../components/MobileFilterSheet.js";
+import ResponsiveFilterPanel from "../components/ResponsiveFilterPanel.js";
 import { useToast } from "../components/Toast.js";
 import { useIsMobile } from "../components/useIsMobile.js";
 import {
@@ -268,23 +268,13 @@ export default function CheckinLog() {
         </button>
       </div>
 
-      {isMobile ? (
-        <>
-          <div className="mobile-filter-row">
-            <button
-              type="button"
-              className="btn btn-ghost"
-              style={{ border: "1px solid var(--color-border)" }}
-              onClick={() => setShowFilters(true)}
-            >
-              筛选
-            </button>
-          </div>
-          <MobileFilterSheet
-            open={showFilters}
-            onClose={() => setShowFilters(false)}
-            title="筛选签到记录"
-          >
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showFilters}
+        onMobileOpen={() => setShowFilters(true)}
+        onMobileClose={() => setShowFilters(false)}
+        mobileTitle="筛选签到记录"
+        mobileContent={(
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
             {timeRangeControls}
             {hasInvalidTimeRange && (
@@ -294,9 +284,8 @@ export default function CheckinLog() {
             )}
             {filterTabs}
           </div>
-          </MobileFilterSheet>
-        </>
-      ) : (
+        )}
+        desktopContent={(
           <div className="toolbar" style={{ marginBottom: "12px" }}>
             <div style={{ minWidth: 280 }}>{filterTabs}</div>
             <div
@@ -316,6 +305,7 @@ export default function CheckinLog() {
             )}
           </div>
         )}
+      />
 
       <div
         className="card"

src/web/pages/Models.tsx

@@ -5,7 +5,7 @@ import { BrandGlyph, getBrand, hashColor, BrandIcon, type BrandInfo } from '../c
 import SiteBadgeLink from '../components/SiteBadgeLink.js';
 import { useToast } from '../components/Toast.js';
 import ModernSelect from '../components/ModernSelect.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import { useAnimatedVisibility } from '../components/useAnimatedVisibility.js';
 import { useIsMobile } from '../components/useIsMobile.js';
 import { mergeMarketplaceMetadata, shouldHydrateMarketplaceMetadata } from './helpers/modelsMarketplaceMetadata.js';
@@ -522,15 +522,13 @@ export default function Models() {
               )}
             </div>
           </div>
-          {isMobile && (
-            <MobileFilterSheet
-              open={showFilters}
-              onClose={() => setShowFilters(false)}
-              title={tr('筛选模型')}
-            >
-              {filterControls}
-            </MobileFilterSheet>
-          )}
+          <ResponsiveFilterPanel
+            isMobile={isMobile}
+            mobileOpen={showFilters}
+            onMobileClose={() => setShowFilters(false)}
+            mobileTitle={tr('筛选模型')}
+            mobileContent={filterControls}
+          />
           {[...Array(4)].map((_, i) => <div key={i} className="skeleton" style={{ height: 100, marginBottom: 12, borderRadius: 12 }} />)}
         </div>
       </div>
@@ -607,15 +605,13 @@ export default function Models() {
           </div>
         </div>
 
-        {isMobile && (
-          <MobileFilterSheet
-            open={showFilters}
-            onClose={() => setShowFilters(false)}
-            title={tr('筛选模型')}
-          >
-            {filterControls}
-          </MobileFilterSheet>
-        )}
+        <ResponsiveFilterPanel
+          isMobile={isMobile}
+          mobileOpen={showFilters}
+          onMobileClose={() => setShowFilters(false)}
+          mobileTitle={tr('筛选模型')}
+          mobileContent={filterControls}
+        />
 
         {/* Toolbar */}
         <div className="toolbar">

src/web/pages/ProgramLogs.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { api } from '../api.js';
 import { MobileCard, MobileField } from '../components/MobileCard.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import { useToast } from '../components/Toast.js';
 import { useIsMobile } from '../components/useIsMobile.js';
 import { formatDateTimeLocal } from './helpers/checkinLogTime.js';
@@ -213,23 +213,13 @@ export default function ProgramLogs() {
         </div>
       </div>
 
-      {isMobile ? (
-        <>
-          <div className="mobile-filter-row">
-            <button
-              type="button"
-              className="btn btn-ghost"
-              style={{ border: '1px solid var(--color-border)' }}
-              onClick={() => setShowFilters(true)}
-            >
-              筛选
-            </button>
-          </div>
-          <MobileFilterSheet
-            open={showFilters}
-            onClose={() => setShowFilters(false)}
-            title="筛选程序日志"
-          >
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showFilters}
+        onMobileOpen={() => setShowFilters(true)}
+        onMobileClose={() => setShowFilters(false)}
+        mobileTitle="筛选程序日志"
+        mobileContent={(
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             <ModernSelect
               size="sm"
@@ -257,9 +247,8 @@ export default function ProgramLogs() {
               共 {visibleRows.length} 条
             </div>
           </div>
-          </MobileFilterSheet>
-        </>
-      ) : (
+        )}
+        desktopContent={(
           <div className="card" style={{ padding: 14, marginBottom: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
             <div style={{ minWidth: 170 }}>
               <ModernSelect
@@ -292,6 +281,7 @@ export default function ProgramLogs() {
             </div>
           </div>
         )}
+      />
 
       <div className="card" style={{ overflowX: 'auto' }}>
         {loading ? (

src/web/pages/ProxyLogs.tsx

@@ -13,7 +13,7 @@ import { useToast } from '../components/Toast.js';
 import { ModelBadge } from '../components/BrandIcon.js';
 import SiteBadgeLink from '../components/SiteBadgeLink.js';
 import { MobileCard, MobileField } from '../components/MobileCard.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import { useIsMobile } from '../components/useIsMobile.js';
 import { formatDateTimeLocal } from './helpers/checkinLogTime.js';
 import ModernSelect from '../components/ModernSelect.js';
@@ -661,31 +661,19 @@ export default function ProxyLogs() {
         </div>
       </div>
 
-      {isMobile ? (
-        <>
-          <div className="mobile-filter-row">
-            <button
-              type="button"
-              className="btn btn-ghost"
-              style={{ border: '1px solid var(--color-border)' }}
-              onClick={() => setShowFilters(true)}
-            >
-              筛选
-            </button>
-          </div>
-          <MobileFilterSheet
-            open={showFilters}
-            onClose={() => setShowFilters(false)}
-            title={tr('筛选日志')}
-          >
-            {filterControls}
-          </MobileFilterSheet>
-        </>
-      ) : (
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showFilters}
+        onMobileOpen={() => setShowFilters(true)}
+        onMobileClose={() => setShowFilters(false)}
+        mobileTitle={tr('筛选日志')}
+        mobileContent={filterControls}
+        desktopContent={(
           <div className="toolbar" style={{ marginBottom: 12 }}>
             {filterControls}
           </div>
         )}
+      />
 
       {hasInvalidTimeRange && (
         <div className="alert alert-error" style={{ marginBottom: 12 }}>

src/web/pages/Sites.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { api } from '../api.js';
 import CenteredModal from '../components/CenteredModal.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
 import { useToast } from '../components/Toast.js';
 import ModernSelect from '../components/ModernSelect.js';
@@ -660,7 +660,12 @@ export default function Sites() {
         </div>
       </div>
 
-      <MobileFilterSheet open={showMobileTools} onClose={() => setShowMobileTools(false)} title="站点排序与操作">
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showMobileTools}
+        onMobileClose={() => setShowMobileTools(false)}
+        mobileTitle="站点排序与操作"
+        mobileContent={(
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               <div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>排序方式</div>
@@ -687,7 +692,8 @@ export default function Sites() {
               {allVisibleSitesSelected ? '取消全选可见项' : '全选可见项'}
             </button>
           </div>
-      </MobileFilterSheet>
+        )}
+      />
 
       {selectedSiteIds.length > 0 && (
         <ResponsiveBatchActionBar

src/web/pages/TokenRoutes.tsx

@@ -7,7 +7,7 @@ import { BrandGlyph, getBrand, InlineBrandIcon, type BrandInfo } from '../compon
 import { useToast } from '../components/Toast.js';
 import ModernSelect from '../components/ModernSelect.js';
 import { MobileCard, MobileField } from '../components/MobileCard.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import { useIsMobile } from '../components/useIsMobile.js';
 import { tr } from '../i18n.js';
 import {
@@ -1113,16 +1113,15 @@ export default function TokenRoutes() {
       </div>
 
       {/* Collapsible filter panel */}
-      {isMobile ? (
-        <>
-          <button
-            className="btn btn-ghost"
-            style={{ border: '1px solid var(--color-border)', padding: '8px 14px', marginBottom: 12 }}
-            onClick={() => setShowFilters(true)}
-          >
-            {tr('筛选')}
-          </button>
-          <MobileFilterSheet open={showFilters} onClose={() => setShowFilters(false)} title={tr('筛选路由')}>
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showFilters}
+        onMobileOpen={() => setShowFilters(true)}
+        onMobileClose={() => setShowFilters(false)}
+        mobileTitle={tr('筛选路由')}
+        mobileTriggerWrapperClassName=""
+        mobileTriggerButtonStyle={{ border: '1px solid var(--color-border)', padding: '8px 14px', marginBottom: 12 }}
+        mobileContent={(
           <RouteFilterBar
             totalRouteCount={listVisibleRoutes.length}
             activeBrand={activeBrand}
@@ -1140,9 +1139,8 @@ export default function TokenRoutes() {
             collapsed={false}
             onToggle={() => setShowFilters(false)}
           />
-          </MobileFilterSheet>
-        </>
-      ) : (
+        )}
+        desktopContent={(
           <RouteFilterBar
             totalRouteCount={listVisibleRoutes.length}
             activeBrand={activeBrand}
@@ -1161,6 +1159,7 @@ export default function TokenRoutes() {
             onToggle={() => setFilterCollapsed((prev) => !prev)}
           />
         )}
+      />
 
       {/* Info tip */}
       <div className="info-tip" style={{ marginBottom: 12 }}>

src/web/pages/Tokens.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { api } from '../api.js';
 import CenteredModal from '../components/CenteredModal.js';
-import MobileFilterSheet from '../components/MobileFilterSheet.js';
+import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js';
 import ResponsiveFormGrid from '../components/ResponsiveFormGrid.js';
 import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
 import { useToast } from '../components/Toast.js';
@@ -825,7 +825,12 @@ export function TokensPanel({ embedded = false, onEmbeddedActionsChange }: Token
         </div>
       )}
 
-      <MobileFilterSheet open={showMobileTools} onClose={() => setShowMobileTools(false)} title="令牌同步与筛选">
+      <ResponsiveFilterPanel
+        isMobile={isMobile}
+        mobileOpen={showMobileTools}
+        onMobileClose={() => setShowMobileTools(false)}
+        mobileTitle="令牌同步与筛选"
+        mobileContent={(
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               <div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>同步账号</div>
@@ -859,7 +864,8 @@ export function TokensPanel({ embedded = false, onEmbeddedActionsChange }: Token
               {syncingAll ? <><span className="spinner spinner-sm" /> 同步中...</> : '同步全部账号'}
             </button>
           </div>
-      </MobileFilterSheet>
+        )}
+      />
 
       <div className="info-tip" style={{ marginBottom: 12 }}>
         新增令牌会调用站点 API 创建新密钥，再自动同步到本地。支持设置分组、额度、过期时间和 IP 白名单；已存在密钥可直接用“同步站点令牌”读取。

src/web/pages/checkin.mobile.test.tsx

@@ -3,9 +3,10 @@ import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
 describe('CheckinLog mobile layout', () => {
-  it('uses the shared mobile filter sheet for mobile filters', () => {
+  it('uses the shared responsive filter scaffold for mobile filters', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/web/pages/CheckinLog.tsx'), 'utf8');
-    expect(source).toContain('MobileFilterSheet');
+    expect(source).toMatch(/import\s+ResponsiveFilterPanel\s+from\s+['"]\.\.\/components\/ResponsiveFilterPanel\.js['"]/);
+    expect(source).toContain('<ResponsiveFilterPanel');
   });
 
   it('uses the shared mobile card header and footer action slots', () => {

src/web/pages/logs.mobile.test.tsx

@@ -6,7 +6,8 @@ describe('ProxyLogs mobile layout', () => {
   it('renders compact mobile summary cards for proxy logs', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/web/pages/ProxyLogs.tsx'), 'utf8');
     expect(source).toContain('MobileCard');
-    expect(source).toContain('MobileFilterSheet');
+    expect(source).toContain("import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js'");
+    expect(source).toContain('<ResponsiveFilterPanel');
     expect(source).toContain('compact');
     expect(source).toContain('mobile-summary-grid');
     expect(source).toContain("subtitle={formatDateTimeLocal(log.createdAt)}");

src/web/pages/programLogs.mobile-layout.test.tsx

@@ -6,11 +6,11 @@ describe('ProgramLogs mobile layout', () => {
   it('uses the shared mobile primitives for filters and list cards', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/web/pages/ProgramLogs.tsx'), 'utf8');
 
-    expect(source).toContain("import MobileFilterSheet from '../components/MobileFilterSheet.js'");
+    expect(source).toContain("import ResponsiveFilterPanel from '../components/ResponsiveFilterPanel.js'");
     expect(source).toContain("import { MobileCard, MobileField } from '../components/MobileCard.js'");
     expect(source).toContain("import { useIsMobile } from '../components/useIsMobile.js'");
     expect(source).toContain('const isMobile = useIsMobile()');
     expect(source).toContain('mobile-card-list');
-    expect(source).toContain('<MobileFilterSheet');
+    expect(source).toContain('<ResponsiveFilterPanel');
   });
 });

src/web/pages/responsiveFilterPanel.architecture.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const pages = [
+  'src/web/pages/Accounts.tsx',
+  'src/web/pages/CheckinLog.tsx',
+  'src/web/pages/DownstreamKeys.tsx',
+  'src/web/pages/Models.tsx',
+  'src/web/pages/ProgramLogs.tsx',
+  'src/web/pages/ProxyLogs.tsx',
+  'src/web/pages/Sites.tsx',
+  'src/web/pages/TokenRoutes.tsx',
+  'src/web/pages/Tokens.tsx',
+];
+
+describe('ResponsiveFilterPanel adoption', () => {
+  it('routes page-level filter sheets through the shared scaffold component', () => {
+    for (const page of pages) {
+      const source = readFileSync(resolve(process.cwd(), page), 'utf8').replace(/\r\n/g, '\n');
+
+      expect(source, page).toMatch(/import\s+ResponsiveFilterPanel\s+from\s+['"]\.\.\/components\/ResponsiveFilterPanel\.js['"]/);
+      expect(source, page).not.toContain("import MobileFilterSheet from '../components/MobileFilterSheet.js'");
+      expect(source, page).not.toContain('<MobileFilterSheet');
+    }
+  });
+});