refactor: 重构 TopBar 组件并更新项目结构
- 删除原有的 TopBar 组件，重构为布局组件并移动至 layout/ 目录。 - 更新相关文档，反映 TopBar 组件的新位置。 - 引入新的 useTopBar 钩子以管理 TopBar 的状态和逻辑。 - 添加 TopBar 组件的单元测试，确保功能正常。
This commit is contained in:
雨霖铃
@@ -0,0 +1,76 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goHome: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: () => mockRouterValue,
|
||||
RouterProvider: ({ children }: { children: React.ReactNode }) => children,
|
||||
}));
|
||||
|
||||
describe('TopBar 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const renderWithProvider = (ui: React.ReactElement) => {
|
||||
return render(
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{ui}</RouterProvider>
|
||||
</ThemeModeProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar />);
|
||||
expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击返回按钮时应调用 goHome', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('返回首页'));
|
||||
expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,2 @@
|
||||
export const SEARCH_HISTORY_LIMIT = 10;
|
||||
export const SEARCH_HISTORY_DISPLAY = 5;
|
||||
@@ -0,0 +1,180 @@
|
||||
import React from 'react';
|
||||
import { ArrowLeft, ExternalLink, Search, X } from 'lucide-react';
|
||||
import { type FeatureConfig } from '@/config/features';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useTopBar } from './useTopBar';
|
||||
|
||||
export default function TopBar() {
|
||||
const {
|
||||
searchQuery,
|
||||
showResults,
|
||||
searchResults,
|
||||
displayedHistory,
|
||||
selectedIndex,
|
||||
isDashboard,
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
containerRef,
|
||||
inputRef,
|
||||
setSearchQuery,
|
||||
setShowResults,
|
||||
setSelectedIndex,
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
} = useTopBar();
|
||||
|
||||
return (
|
||||
<header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
|
||||
<div className="flex w-10 items-center justify-start">
|
||||
{!isDashboard && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goHome}
|
||||
aria-label="返回首页"
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div ref={containerRef} className="relative mx-4 max-w-md flex-1">
|
||||
<div className="group relative">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder="搜索工具..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setShowResults(true);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
onFocus={() => setShowResults(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label="搜索工具..."
|
||||
className="h-9 w-full rounded-lg border border-border/60 bg-muted/40 pl-9 pr-16 text-sm transition-all placeholder:text-muted-foreground/50 focus:border-input focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
<kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
|
||||
⌘K
|
||||
</kbd>
|
||||
)}
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSearch}
|
||||
aria-label="清除搜索"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
|
||||
<div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<ul role="listbox" className="p-1.5">
|
||||
{searchQuery.trim() ? (
|
||||
searchResults.length > 0 ? (
|
||||
searchResults.map((feature, index) => (
|
||||
<SearchResultItem
|
||||
key={feature.key}
|
||||
feature={feature}
|
||||
selected={selectedIndex === index}
|
||||
onSelect={handleSelectFeature}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
未找到相关工具
|
||||
</li>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
||||
最近搜索
|
||||
</div>
|
||||
{displayedHistory.map((item, index) =>
|
||||
item.feature ? (
|
||||
<SearchResultItem
|
||||
key={item.key}
|
||||
feature={item.feature}
|
||||
selected={selectedIndex === index}
|
||||
onSelect={handleSelectFeature}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<IconButton onClick={cycleThemeMode} title={themeTitle}>
|
||||
<ThemeIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleOpenInTab} title="在标签页打开">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
interface SearchResultItemProps {
|
||||
feature: FeatureConfig;
|
||||
selected: boolean;
|
||||
onSelect: (feature: FeatureConfig) => void;
|
||||
}
|
||||
|
||||
function SearchResultItem({ feature, selected, onSelect }: SearchResultItemProps) {
|
||||
return (
|
||||
<li
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
onClick={() => onSelect(feature)}
|
||||
className={cn(
|
||||
'flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors',
|
||||
selected ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted/80 text-muted-foreground">
|
||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-medium text-foreground">{feature.label}</p>
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">{feature.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function IconButton({
|
||||
children,
|
||||
onClick,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
onClick: () => void;
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
|
||||
import { Monitor, Moon, Sun } from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { type FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';
|
||||
|
||||
export interface HistoryItem {
|
||||
key: string;
|
||||
feature?: FeatureConfig;
|
||||
}
|
||||
|
||||
export interface UseTopBarReturn {
|
||||
searchQuery: string;
|
||||
showResults: boolean;
|
||||
searchResults: FeatureConfig[];
|
||||
displayedHistory: HistoryItem[];
|
||||
selectedIndex: number;
|
||||
isDashboard: boolean;
|
||||
ThemeIcon: typeof Sun;
|
||||
themeTitle: string;
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
inputRef: RefObject<HTMLInputElement | null>;
|
||||
setSearchQuery: (value: string) => void;
|
||||
setShowResults: (value: boolean) => void;
|
||||
setSelectedIndex: (value: number | ((prev: number) => number)) => void;
|
||||
handleSelectFeature: (feature: FeatureConfig) => void;
|
||||
handleKeyDown: (e: React.KeyboardEvent) => void;
|
||||
cycleThemeMode: () => void;
|
||||
handleOpenInTab: () => Promise<void>;
|
||||
goHome: () => void;
|
||||
clearSearch: () => void;
|
||||
}
|
||||
|
||||
export function useTopBar(): UseTopBarReturn {
|
||||
const { currentPage, goHome, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [searchHistory, setSearchHistory] = useState<string[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleOpenInTab = async () => {
|
||||
await openExtensionPage('popup.html', { mode: 'tab' });
|
||||
window.close();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleGlobalKeyDown = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
setShowResults(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleGlobalKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleGlobalKeyDown);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
storageUtil
|
||||
.get('app/searchHistory', [])
|
||||
.then((history) => {
|
||||
if (cancelled || !history) return;
|
||||
setSearchHistory(history);
|
||||
})
|
||||
.catch((err) => console.error('加载搜索历史失败:', err));
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return FEATURES.filter((f) => {
|
||||
if (f.key === 'dashboard') return false;
|
||||
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
|
||||
});
|
||||
}, [searchQuery]);
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory
|
||||
.slice(0, SEARCH_HISTORY_DISPLAY)
|
||||
.map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
|
||||
.filter((item) => item.feature && item.feature.key !== 'dashboard');
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
const saveToHistory = async (featureKey: string) => {
|
||||
if (!featureKey.trim()) return;
|
||||
const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
|
||||
0,
|
||||
SEARCH_HISTORY_LIMIT,
|
||||
);
|
||||
setSearchHistory(nextHistory);
|
||||
await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(feature.key);
|
||||
setSearchQuery('');
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const cycleThemeMode = () => {
|
||||
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
|
||||
setMode(nextMap[mode]);
|
||||
};
|
||||
|
||||
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
|
||||
|
||||
const themeTitle =
|
||||
mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0 && selectedIndex < totalItems) {
|
||||
if (searchQuery.trim()) {
|
||||
handleSelectFeature(searchResults[selectedIndex]);
|
||||
} else {
|
||||
const selected = displayedHistory[selectedIndex];
|
||||
if (selected?.feature) {
|
||||
handleSelectFeature(selected.feature);
|
||||
}
|
||||
}
|
||||
} else if (searchQuery.trim() && searchResults.length > 0) {
|
||||
handleSelectFeature(searchResults[0]);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
setShowResults(false);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
showResults,
|
||||
searchResults,
|
||||
displayedHistory,
|
||||
selectedIndex,
|
||||
isDashboard: currentPage === 'dashboard',
|
||||
ThemeIcon,
|
||||
themeTitle,
|
||||
containerRef,
|
||||
inputRef,
|
||||
setSearchQuery,
|
||||
setShowResults,
|
||||
setSelectedIndex,
|
||||
handleSelectFeature,
|
||||
handleKeyDown,
|
||||
cycleThemeMode,
|
||||
handleOpenInTab,
|
||||
goHome,
|
||||
clearSearch,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user