boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: share responsive filter panel scaffold

Browse Source
This commit is contained in:
Cita
2026-03-23 14:29:11 +08:00
parent dd914b327c
commit 7cc0a04b8b
13 changed files with 375 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/components/ResponsiveFilterPanel.tsx
+58
View File
@@ -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
+9 -3
View File
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import CenteredModal from '../components/CenteredModal.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 ResponsiveFormGrid from '../components/ResponsiveFormGrid.js';
import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js'; import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
import { useToast } from '../components/Toast.js'; import { useToast } from '../components/Toast.js';
@@ -976,7 +976,12 @@ export default function Accounts() {
{activeSegment === 'tokens' && embeddedTokenActions} {activeSegment === 'tokens' && embeddedTokenActions}
</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: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>排序方式</div> <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('刷新账户状态')} {actionLoading['health-refresh'] ? <><span className="spinner spinner-sm" />{tr('刷新状态中...')}</> : tr('刷新账户状态')}
</button> </button>
</div> </div>
</MobileFilterSheet> )}
/>
<div <div
style={{ style={{
src/web/pages/CheckinLog.tsx
+11 -21
View File
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { api } from "../api.js"; import { api } from "../api.js";
import { MobileCard, MobileField } from "../components/MobileCard.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 { useToast } from "../components/Toast.js";
import { useIsMobile } from "../components/useIsMobile.js"; import { useIsMobile } from "../components/useIsMobile.js";
import { import {
@@ -268,23 +268,13 @@ export default function CheckinLog() {
</button> </button>
</div> </div>
{isMobile ? ( <ResponsiveFilterPanel
<> isMobile={isMobile}
<div className="mobile-filter-row"> mobileOpen={showFilters}
<button onMobileOpen={() => setShowFilters(true)}
type="button" onMobileClose={() => setShowFilters(false)}
className="btn btn-ghost" mobileTitle="筛选签到记录"
style={{ border: "1px solid var(--color-border)" }} mobileContent={(
onClick={() => setShowFilters(true)}
>
筛选
</button>
</div>
<MobileFilterSheet
open={showFilters}
onClose={() => setShowFilters(false)}
title="筛选签到记录"
>
<div style={{ display: "flex", flexDirection: "column", gap: 12 }}> <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
{timeRangeControls} {timeRangeControls}
{hasInvalidTimeRange && ( {hasInvalidTimeRange && (
@@ -294,9 +284,8 @@ export default function CheckinLog() {
)} )}
{filterTabs} {filterTabs}
</div> </div>
</MobileFilterSheet> )}
</> desktopContent={(
) : (
<div className="toolbar" style={{ marginBottom: "12px" }}> <div className="toolbar" style={{ marginBottom: "12px" }}>
<div style={{ minWidth: 280 }}>{filterTabs}</div> <div style={{ minWidth: 280 }}>{filterTabs}</div>
<div <div
@@ -316,6 +305,7 @@ export default function CheckinLog() {
)} )}
</div> </div>
)} )}
/>
<div <div
className="card" className="card"
src/web/pages/Models.tsx
+15 -19
View File
@@ -5,7 +5,7 @@ import { BrandGlyph, getBrand, hashColor, BrandIcon, type BrandInfo } from '../c
import SiteBadgeLink from '../components/SiteBadgeLink.js'; import SiteBadgeLink from '../components/SiteBadgeLink.js';
import { useToast } from '../components/Toast.js'; import { useToast } from '../components/Toast.js';
import ModernSelect from '../components/ModernSelect.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 { useAnimatedVisibility } from '../components/useAnimatedVisibility.js';
import { useIsMobile } from '../components/useIsMobile.js'; import { useIsMobile } from '../components/useIsMobile.js';
import { mergeMarketplaceMetadata, shouldHydrateMarketplaceMetadata } from './helpers/modelsMarketplaceMetadata.js'; import { mergeMarketplaceMetadata, shouldHydrateMarketplaceMetadata } from './helpers/modelsMarketplaceMetadata.js';
@@ -522,15 +522,13 @@ export default function Models() {
)} )}
</div> </div>
</div> </div>
{isMobile && ( <ResponsiveFilterPanel
<MobileFilterSheet isMobile={isMobile}
open={showFilters} mobileOpen={showFilters}
onClose={() => setShowFilters(false)} onMobileClose={() => setShowFilters(false)}
title={tr('筛选模型')} mobileTitle={tr('筛选模型')}
> mobileContent={filterControls}
{filterControls} />
</MobileFilterSheet>
)}
{[...Array(4)].map((_, i) => <div key={i} className="skeleton" style={{ height: 100, marginBottom: 12, borderRadius: 12 }} />)} {[...Array(4)].map((_, i) => <div key={i} className="skeleton" style={{ height: 100, marginBottom: 12, borderRadius: 12 }} />)}
</div> </div>
</div> </div>
@@ -607,15 +605,13 @@ export default function Models() {
</div> </div>
</div> </div>
{isMobile && ( <ResponsiveFilterPanel
<MobileFilterSheet isMobile={isMobile}
open={showFilters} mobileOpen={showFilters}
onClose={() => setShowFilters(false)} onMobileClose={() => setShowFilters(false)}
title={tr('筛选模型')} mobileTitle={tr('筛选模型')}
> mobileContent={filterControls}
{filterControls} />
</MobileFilterSheet>
)}
{/* Toolbar */} {/* Toolbar */}
<div className="toolbar"> <div className="toolbar">
src/web/pages/ProgramLogs.tsx
+11 -21
View File
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { api } from '../api.js'; import { api } from '../api.js';
import { MobileCard, MobileField } from '../components/MobileCard.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 { useToast } from '../components/Toast.js';
import { useIsMobile } from '../components/useIsMobile.js'; import { useIsMobile } from '../components/useIsMobile.js';
import { formatDateTimeLocal } from './helpers/checkinLogTime.js'; import { formatDateTimeLocal } from './helpers/checkinLogTime.js';
@@ -213,23 +213,13 @@ export default function ProgramLogs() {
</div> </div>
</div> </div>
{isMobile ? ( <ResponsiveFilterPanel
<> isMobile={isMobile}
<div className="mobile-filter-row"> mobileOpen={showFilters}
<button onMobileOpen={() => setShowFilters(true)}
type="button" onMobileClose={() => setShowFilters(false)}
className="btn btn-ghost" mobileTitle="筛选程序日志"
style={{ border: '1px solid var(--color-border)' }} mobileContent={(
onClick={() => setShowFilters(true)}
>
筛选
</button>
</div>
<MobileFilterSheet
open={showFilters}
onClose={() => setShowFilters(false)}
title="筛选程序日志"
>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<ModernSelect <ModernSelect
size="sm" size="sm"
@@ -257,9 +247,8 @@ export default function ProgramLogs() {
共 {visibleRows.length} 条 共 {visibleRows.length} 条
</div> </div>
</div> </div>
</MobileFilterSheet> )}
</> desktopContent={(
) : (
<div className="card" style={{ padding: 14, marginBottom: 12, display: 'flex', gap: 10, alignItems: 'center' }}> <div className="card" style={{ padding: 14, marginBottom: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
<div style={{ minWidth: 170 }}> <div style={{ minWidth: 170 }}>
<ModernSelect <ModernSelect
@@ -292,6 +281,7 @@ export default function ProgramLogs() {
</div> </div>
</div> </div>
)} )}
/>
<div className="card" style={{ overflowX: 'auto' }}> <div className="card" style={{ overflowX: 'auto' }}>
{loading ? ( {loading ? (
src/web/pages/ProxyLogs.tsx
+10 -22
View File
@@ -13,7 +13,7 @@ import { useToast } from '../components/Toast.js';
import { ModelBadge } from '../components/BrandIcon.js'; import { ModelBadge } from '../components/BrandIcon.js';
import SiteBadgeLink from '../components/SiteBadgeLink.js'; import SiteBadgeLink from '../components/SiteBadgeLink.js';
import { MobileCard, MobileField } from '../components/MobileCard.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 { useIsMobile } from '../components/useIsMobile.js';
import { formatDateTimeLocal } from './helpers/checkinLogTime.js'; import { formatDateTimeLocal } from './helpers/checkinLogTime.js';
import ModernSelect from '../components/ModernSelect.js'; import ModernSelect from '../components/ModernSelect.js';
@@ -661,31 +661,19 @@ export default function ProxyLogs() {
</div> </div>
</div> </div>
{isMobile ? ( <ResponsiveFilterPanel
<> isMobile={isMobile}
<div className="mobile-filter-row"> mobileOpen={showFilters}
<button onMobileOpen={() => setShowFilters(true)}
type="button" onMobileClose={() => setShowFilters(false)}
className="btn btn-ghost" mobileTitle={tr('筛选日志')}
style={{ border: '1px solid var(--color-border)' }} mobileContent={filterControls}
onClick={() => setShowFilters(true)} desktopContent={(
>
筛选
</button>
</div>
<MobileFilterSheet
open={showFilters}
onClose={() => setShowFilters(false)}
title={tr('筛选日志')}
>
{filterControls}
</MobileFilterSheet>
</>
) : (
<div className="toolbar" style={{ marginBottom: 12 }}> <div className="toolbar" style={{ marginBottom: 12 }}>
{filterControls} {filterControls}
</div> </div>
)} )}
/>
{hasInvalidTimeRange && ( {hasInvalidTimeRange && (
<div className="alert alert-error" style={{ marginBottom: 12 }}> <div className="alert alert-error" style={{ marginBottom: 12 }}>
src/web/pages/Sites.tsx
+9 -3
View File
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom'; import { useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import CenteredModal from '../components/CenteredModal.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 ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
import { useToast } from '../components/Toast.js'; import { useToast } from '../components/Toast.js';
import ModernSelect from '../components/ModernSelect.js'; import ModernSelect from '../components/ModernSelect.js';
@@ -660,7 +660,12 @@ export default function Sites() {
</div> </div>
</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: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>排序方式</div> <div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>排序方式</div>
@@ -687,7 +692,8 @@ export default function Sites() {
{allVisibleSitesSelected ? '取消全选可见项' : '全选可见项'} {allVisibleSitesSelected ? '取消全选可见项' : '全选可见项'}
</button> </button>
</div> </div>
</MobileFilterSheet> )}
/>
{selectedSiteIds.length > 0 && ( {selectedSiteIds.length > 0 && (
<ResponsiveBatchActionBar <ResponsiveBatchActionBar
src/web/pages/TokenRoutes.tsx
+13 -14
View File
@@ -7,7 +7,7 @@ import { BrandGlyph, getBrand, InlineBrandIcon, type BrandInfo } from '../compon
import { useToast } from '../components/Toast.js'; import { useToast } from '../components/Toast.js';
import ModernSelect from '../components/ModernSelect.js'; import ModernSelect from '../components/ModernSelect.js';
import { MobileCard, MobileField } from '../components/MobileCard.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 { useIsMobile } from '../components/useIsMobile.js';
import { tr } from '../i18n.js'; import { tr } from '../i18n.js';
import { import {
@@ -1113,16 +1113,15 @@ export default function TokenRoutes() {
</div> </div>
{/* Collapsible filter panel */} {/* Collapsible filter panel */}
{isMobile ? ( <ResponsiveFilterPanel
<> isMobile={isMobile}
<button mobileOpen={showFilters}
className="btn btn-ghost" onMobileOpen={() => setShowFilters(true)}
style={{ border: '1px solid var(--color-border)', padding: '8px 14px', marginBottom: 12 }} onMobileClose={() => setShowFilters(false)}
onClick={() => setShowFilters(true)} mobileTitle={tr('筛选路由')}
> mobileTriggerWrapperClassName=""
{tr('筛选')} mobileTriggerButtonStyle={{ border: '1px solid var(--color-border)', padding: '8px 14px', marginBottom: 12 }}
</button> mobileContent={(
<MobileFilterSheet open={showFilters} onClose={() => setShowFilters(false)} title={tr('筛选路由')}>
<RouteFilterBar <RouteFilterBar
totalRouteCount={listVisibleRoutes.length} totalRouteCount={listVisibleRoutes.length}
activeBrand={activeBrand} activeBrand={activeBrand}
@@ -1140,9 +1139,8 @@ export default function TokenRoutes() {
collapsed={false} collapsed={false}
onToggle={() => setShowFilters(false)} onToggle={() => setShowFilters(false)}
/> />
</MobileFilterSheet> )}
</> desktopContent={(
) : (
<RouteFilterBar <RouteFilterBar
totalRouteCount={listVisibleRoutes.length} totalRouteCount={listVisibleRoutes.length}
activeBrand={activeBrand} activeBrand={activeBrand}
@@ -1161,6 +1159,7 @@ export default function TokenRoutes() {
onToggle={() => setFilterCollapsed((prev) => !prev)} onToggle={() => setFilterCollapsed((prev) => !prev)}
/> />
)} )}
/>
{/* Info tip */} {/* Info tip */}
<div className="info-tip" style={{ marginBottom: 12 }}> <div className="info-tip" style={{ marginBottom: 12 }}>
src/web/pages/Tokens.tsx
+9 -3
View File
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Navigate, useLocation, useNavigate } from 'react-router-dom'; import { Navigate, useLocation, useNavigate } from 'react-router-dom';
import { api } from '../api.js'; import { api } from '../api.js';
import CenteredModal from '../components/CenteredModal.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 ResponsiveFormGrid from '../components/ResponsiveFormGrid.js';
import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js'; import ResponsiveBatchActionBar from '../components/ResponsiveBatchActionBar.js';
import { useToast } from '../components/Toast.js'; import { useToast } from '../components/Toast.js';
@@ -825,7 +825,12 @@ export function TokensPanel({ embedded = false, onEmbeddedActionsChange }: Token
</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: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ fontSize: 12, color: 'var(--color-text-muted)' }}>同步账号</div> <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" /> 同步中...</> : '同步全部账号'} {syncingAll ? <><span className="spinner spinner-sm" /> 同步中...</> : '同步全部账号'}
</button> </button>
</div> </div>
</MobileFilterSheet> )}
/>
<div className="info-tip" style={{ marginBottom: 12 }}> <div className="info-tip" style={{ marginBottom: 12 }}>
新增令牌会调用站点 API 创建新密钥，再自动同步到本地。支持设置分组、额度、过期时间和 IP 白名单；已存在密钥可直接用“同步站点令牌”读取。 新增令牌会调用站点 API 创建新密钥，再自动同步到本地。支持设置分组、额度、过期时间和 IP 白名单；已存在密钥可直接用“同步站点令牌”读取。
src/web/pages/checkin.mobile.test.tsx
+3 -2
View File
@@ -3,9 +3,10 @@ import { readFileSync } from 'node:fs';
import { resolve } from 'node:path'; import { resolve } from 'node:path';
describe('CheckinLog mobile layout', () => { 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'); 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', () => { it('uses the shared mobile card header and footer action slots', () => {
src/web/pages/logs.mobile.test.tsx
+2 -1
View File
@@ -6,7 +6,8 @@ describe('ProxyLogs mobile layout', () => {
it('renders compact mobile summary cards for proxy logs', () => { it('renders compact mobile summary cards for proxy logs', () => {
const source = readFileSync(resolve(process.cwd(), 'src/web/pages/ProxyLogs.tsx'), 'utf8'); const source = readFileSync(resolve(process.cwd(), 'src/web/pages/ProxyLogs.tsx'), 'utf8');
expect(source).toContain('MobileCard'); 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('compact');
expect(source).toContain('mobile-summary-grid'); expect(source).toContain('mobile-summary-grid');
expect(source).toContain("subtitle={formatDateTimeLocal(log.createdAt)}"); expect(source).toContain("subtitle={formatDateTimeLocal(log.createdAt)}");
src/web/pages/programLogs.mobile-layout.test.tsx
+2 -2
View File
@@ -6,11 +6,11 @@ describe('ProgramLogs mobile layout', () => {
it('uses the shared mobile primitives for filters and list cards', () => { it('uses the shared mobile primitives for filters and list cards', () => {
const source = readFileSync(resolve(process.cwd(), 'src/web/pages/ProgramLogs.tsx'), 'utf8'); 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 { MobileCard, MobileField } from '../components/MobileCard.js'");
expect(source).toContain("import { useIsMobile } from '../components/useIsMobile.js'"); expect(source).toContain("import { useIsMobile } from '../components/useIsMobile.js'");
expect(source).toContain('const isMobile = useIsMobile()'); expect(source).toContain('const isMobile = useIsMobile()');
expect(source).toContain('mobile-card-list'); expect(source).toContain('mobile-card-list');
expect(source).toContain('<MobileFilterSheet'); expect(source).toContain('<ResponsiveFilterPanel');
}); });
}); });
src/web/pages/responsiveFilterPanel.architecture.test.ts
+27
View File
@@ -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');
}
});
});