雨霖铃
d401744739
- 新增 SearchInput、SearchDropdown、SearchResultItem 和 TopBarActions 组件，增强 TopBar 的搜索功能。 - 更新 useTopBar 钩子以支持最近搜索功能，并优化搜索历史管理。 - 修改 TopBar 组件以整合新组件，提升可读性和可维护性。 - 更新 README.md，反映新增组件和功能。
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { type FeatureConfig } from '@/config/features';
|
|
import SearchResultItem from './SearchResultItem';
|
|
|
|
interface SearchDropdownProps {
|
|
searchQuery: string;
|
|
searchResults: FeatureConfig[];
|
|
recentFeatures: FeatureConfig[];
|
|
selectedIndex: number;
|
|
onSelect: (feature: FeatureConfig) => void;
|
|
}
|
|
|
|
export default function SearchDropdown({
|
|
searchQuery,
|
|
searchResults,
|
|
recentFeatures,
|
|
selectedIndex,
|
|
onSelect,
|
|
}: SearchDropdownProps) {
|
|
const isSearching = searchQuery.trim().length > 0;
|
|
const items = isSearching ? searchResults : recentFeatures;
|
|
|
|
return (
|
|
<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">
|
|
{!isSearching && items.length > 0 && (
|
|
<div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
|
|
最近搜索
|
|
</div>
|
|
)}
|
|
{isSearching && items.length === 0 ? (
|
|
<li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
|
|
) : (
|
|
items.map((feature, index) => (
|
|
<SearchResultItem
|
|
key={feature.key}
|
|
feature={feature}
|
|
selected={selectedIndex === index}
|
|
onSelect={onSelect}
|
|
/>
|
|
))
|
|
)}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|