fix: remove redundant search input from Dashboard (header already has one)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,15 +1,13 @@
|
|||||||
import { useRouter } from '@/providers/RouterProvider';
|
import { useRouter } from '@/providers/RouterProvider';
|
||||||
import { getFeatureByKey } from '@/config/features';
|
import { getFeatureByKey } from '@/config/features';
|
||||||
import type { PageType } from '@/types/storage';
|
import type { PageType } from '@/types/storage';
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { useI18n } from '@/utils/chromeI18n';
|
import { useI18n } from '@/utils/chromeI18n';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Search } from 'lucide-react';
|
|
||||||
|
|
||||||
export default function DashboardPage() {
|
export default function DashboardPage() {
|
||||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||||
const { t } = useI18n(['features']);
|
const { t } = useI18n(['features']);
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
|
||||||
|
|
||||||
const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
|
const visibleSet = useMemo(() => new Set<string>(visiblePages), [visiblePages]);
|
||||||
|
|
||||||
@@ -20,16 +18,6 @@ export default function DashboardPage() {
|
|||||||
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
||||||
}, [pageOrder, visibleSet]);
|
}, [pageOrder, visibleSet]);
|
||||||
|
|
||||||
const filteredFeatures = useMemo(() => {
|
|
||||||
if (!searchQuery.trim()) return visibleFeatures;
|
|
||||||
const query = searchQuery.toLowerCase();
|
|
||||||
return visibleFeatures.filter(
|
|
||||||
(item) =>
|
|
||||||
t(item.feature!.labelKey).toLowerCase().includes(query) ||
|
|
||||||
t(item.feature!.descriptionKey).toLowerCase().includes(query),
|
|
||||||
);
|
|
||||||
}, [visibleFeatures, searchQuery, t]);
|
|
||||||
|
|
||||||
const recentFeatures = useMemo(() => {
|
const recentFeatures = useMemo(() => {
|
||||||
return recentlyUsedTools
|
return recentlyUsedTools
|
||||||
.filter((key) => visibleSet.has(key))
|
.filter((key) => visibleSet.has(key))
|
||||||
@@ -37,27 +25,10 @@ export default function DashboardPage() {
|
|||||||
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
.filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
|
||||||
}, [recentlyUsedTools, visibleSet]);
|
}, [recentlyUsedTools, visibleSet]);
|
||||||
|
|
||||||
const showRecent = !searchQuery.trim() && recentFeatures.length > 0;
|
const showRecent = recentFeatures.length > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
|
<div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
|
||||||
{/* 搜索栏 */}
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60" />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
|
||||||
placeholder={t('dashboard_searchPlaceholder')}
|
|
||||||
className={cn(
|
|
||||||
'w-full h-9 pl-9 pr-3 rounded-lg border border-border/70 bg-background text-sm',
|
|
||||||
'placeholder:text-muted-foreground/50 outline-none',
|
|
||||||
'focus:border-primary/50 focus:ring-1 focus:ring-primary/20',
|
|
||||||
'transition-colors',
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 最近使用 */}
|
{/* 最近使用 */}
|
||||||
{showRecent && (
|
{showRecent && (
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
@@ -94,7 +65,7 @@ export default function DashboardPage() {
|
|||||||
{t('dashboard_allTools')}
|
{t('dashboard_allTools')}
|
||||||
</h3>
|
</h3>
|
||||||
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
||||||
{filteredFeatures.map(({ key, feature }) => {
|
{visibleFeatures.map(({ key, feature }) => {
|
||||||
const IconComponent = feature!.icon!;
|
const IconComponent = feature!.icon!;
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in New Issue
Block a user