雨霖铃
c98d09d14c
- 新增 getSearchShortcutLabel 函数，根据平台返回搜索框的快捷键提示文案。 - 更新 SearchInput 组件，使用 getSearchShortcutLabel 显示正确的快捷键。 - 新增 constants.test.ts 测试文件，验证 getSearchShortcutLabel 函数在不同操作系统下的行为。 - 新增 features.lazy.test.ts 文件，测试懒加载功能，确保页面模块按需加载。
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { type RefObject } from 'react';
|
|
import { Search, X } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { getSearchShortcutLabel } from './constants';
|
|
|
|
interface SearchInputProps {
|
|
inputRef: RefObject<HTMLInputElement | null>;
|
|
searchQuery: string;
|
|
onSearchQueryChange: (value: string) => void;
|
|
onFocus: () => void;
|
|
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
onClear: () => void;
|
|
}
|
|
|
|
export default function SearchInput({
|
|
inputRef,
|
|
searchQuery,
|
|
onSearchQueryChange,
|
|
onFocus,
|
|
onKeyDown,
|
|
onClear,
|
|
}: SearchInputProps) {
|
|
return (
|
|
<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) => onSearchQueryChange(e.target.value)}
|
|
onFocus={onFocus}
|
|
onKeyDown={onKeyDown}
|
|
aria-label="搜索工具..."
|
|
className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
|
|
/>
|
|
{!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">
|
|
{getSearchShortcutLabel()}
|
|
</kbd>
|
|
)}
|
|
{searchQuery && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onClear}
|
|
aria-label="清除搜索"
|
|
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|