tauri-shadcn-vite-project/src/pages/Search.tsx

import { useState, useEffect, useMemo, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import Fuse from "fuse.js";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Keyboard } from "lucide-react";
import { SearchResult } from "@/components/search/SearchResult";
import { features } from "@/features/registry";

export function Search() {
  const navigate = useNavigate();
  const [query, setQuery] = useState("");
  const [selectedIndex, setSelectedIndex] = useState(0);

  // 使用 Fuse.js 进行模糊搜索
  const fuse = useMemo(() => {
    return new Fuse(features, {
      keys: [
        { name: 'name', weight: 2 },
        { name: 'description', weight: 1.5 },
        { name: 'tags', weight: 1 },
      ],
      threshold: 0.4,
      ignoreLocation: true,
    });
  }, []);

  // 搜索结果
  const searchResults = useMemo(() => {
    if (!query.trim()) {
      return features;
    }
    return fuse.search(query).map(result => result.item);
  }, [query, fuse]);

  // 键盘导航
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setSelectedIndex((prev) =>
          prev < searchResults.length - 1 ? prev + 1 : prev
        );
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
      } else if (e.key === 'Enter' && searchResults.length > 0) {
        e.preventDefault();
        const selected = searchResults[selectedIndex];
        if (selected.implemented) {
          navigate(selected.route);
        }
      } else if (e.key === 'Escape') {
        navigate('/');
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [searchResults, selectedIndex, navigate]);

  // 重置选中索引
  useEffect(() => {
    setSelectedIndex(0);
  }, [query]);

  const handleResultClick = useCallback((index: number) => {
    setSelectedIndex(index);
  }, []);

  return (
    <div className="flex flex-col h-screen bg-background overflow-hidden">
      {/* 顶部导航栏 */}
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 flex-shrink-0">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-3 mb-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigate('/')}
            >
              <ArrowLeft className="w-4 h-4" />
            </Button>
            <h1 className="text-xl font-bold">功能搜索</h1>
          </div>

          {/* 大搜索框 */}
          <div className="relative">
            <Keyboard className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="输入关键词搜索功能..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              className="pl-12 h-14 text-lg"
              autoFocus
            />
          </div>
        </div>
      </header>

      {/* 主内容区 */}
      <main className="flex-1 container mx-auto px-4 py-6 overflow-y-auto">
        {/* 结果统计 */}
        <div className="mb-4">
          <p className="text-sm text-muted-foreground">
            {query.trim() ? (
              <>
                找到 <span className="font-semibold text-foreground">{searchResults.length}</span> 个匹配结果
              </>
            ) : (
              <>
                共 <span className="font-semibold text-foreground">{features.length}</span> 个功能
              </>
            )}
          </p>
        </div>

        {/* 搜索结果列表 */}
        <div className="space-y-3 max-h-[calc(100vh-250px)] overflow-y-auto">
          {searchResults.length > 0 ? (
            searchResults.map((feature, index) => (
              <SearchResult
                key={feature.id}
                feature={feature}
                isHighlighted={index === selectedIndex}
                onClick={() => handleResultClick(index)}
              />
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                <span className="text-3xl">🔍</span>
              </div>
              <h3 className="text-lg font-semibold mb-2">没有找到匹配的功能</h3>
              <p className="text-sm text-muted-foreground">
                尝试使用不同的关键词
              </p>
            </div>
          )}
        </div>

        {/* 键盘提示 */}
        {searchResults.length > 0 && (
          <div className="mt-4 p-3 bg-muted/50 rounded-lg">
            <p className="text-xs text-muted-foreground text-center">
              <span className="font-semibold">↑↓</span> 导航 •
              <span className="font-semibold ml-2">Enter</span> 打开 •
              <span className="font-semibold ml-2">Esc</span> 返回
            </p>
          </div>
        )}
      </main>
    </div>
  );
}