refactor: 移除无意义的 cn() 包装

对仅含静态类名或单一三元表达式的 className 改用普通字符串，保留有条件合并或 prop 覆盖场景下的 cn() 用法。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-30 21:05:10 +08:00
parent 149883565d
commit d0825c5ec0
8 changed files with 49 additions and 65 deletions
@@ -16,16 +16,16 @@ export default function SearchDropdown({
  selectedIndex,
  onSelect,
 }: SearchDropdownProps) {
-  const isSearching = searchQuery.trim().length > 0;
+  const isSearching = !!searchQuery.trim();
  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">
+          <li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
            最近搜索
-          </div>
+          </li>
        )}
        {isSearching && items.length === 0 ? (
          <li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { type KeyboardEvent, type RefObject } from 'react';
 import { Search, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -9,7 +9,7 @@ interface SearchInputProps {
  searchQuery: string;
  onSearchQueryChange: (value: string) => void;
  onFocus: () => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
+  onKeyDown: (e: KeyboardEvent) => void;
  onClear: () => void;
 }

@@ -26,7 +26,6 @@ export default function SearchInput({
      <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)}
@@ -35,12 +34,7 @@ export default function SearchInput({
        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 && (
+      {searchQuery ? (
        <Button
          type="button"
          variant="ghost"
@@ -51,6 +45,10 @@ export default function SearchInput({
        >
          <X className="h-3 w-3" />
        </Button>
+      ) : (
+        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center 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>
      )}
    </div>
  );
@@ -33,9 +33,7 @@ export default function TopBar() {
      id: 'open-in-tab',
      icon: ExternalLink,
      title: '在标签页打开',
-      onClick: () => {
-        void handleOpenInTab();
-      },
+      onClick: () => void handleOpenInTab(),
    },
  ];

@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type RefObject,
+} from 'react';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
@@ -21,7 +28,7 @@ export interface UseTopBarReturn {
  handleSearchQueryChange: (value: string) => void;
  handleSearchFocus: () => void;
  handleSelectFeature: (feature: FeatureConfig) => void;
-  handleKeyDown: (e: React.KeyboardEvent) => void;
+  handleKeyDown: (e: ReactKeyboardEvent) => void;
  cycleThemeMode: () => void;
  handleOpenInTab: () => Promise<void>;
  goHome: () => void;
@@ -80,7 +87,7 @@ export function useTopBar(): UseTopBarReturn {
    });
  }, [searchQuery]);

-  const displayedHistory = useMemo(() => {
+  const recentFeatures = useMemo(() => {
    if (searchQuery.trim()) return [];
    return searchHistory
      .slice(0, SEARCH_HISTORY_DISPLAY)
@@ -111,8 +118,10 @@ export function useTopBar(): UseTopBarReturn {
  const themeTitle =
    mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';

-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
+  const handleKeyDown = (e: ReactKeyboardEvent) => {
+    const isSearching = !!searchQuery.trim();
+    const items = isSearching ? searchResults : recentFeatures;
+    const totalItems = items.length;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
@@ -122,13 +131,12 @@ export function useTopBar(): UseTopBarReturn {
      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
    } else if (e.key === 'Enter') {
      e.preventDefault();
-      const items = searchQuery.trim() ? searchResults : displayedHistory;
-      const feature =
-        selectedIndex >= 0 && selectedIndex < totalItems
-          ? items[selectedIndex]
-          : searchQuery.trim() && searchResults.length > 0
-            ? searchResults[0]
-            : undefined;
+      let feature: FeatureConfig | undefined;
+      if (selectedIndex >= 0 && selectedIndex < totalItems) {
+        feature = items[selectedIndex];
+      } else if (isSearching && searchResults.length > 0) {
+        feature = searchResults[0];
+      }
      if (feature) handleSelectFeature(feature);
    } else if (e.key === 'Escape') {
      setShowResults(false);
@@ -149,13 +157,12 @@ export function useTopBar(): UseTopBarReturn {

  const handleSearchFocus = () => setShowResults(true);

-  const showDropdown =
-    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
+  const showDropdown = showResults && (!!searchQuery.trim() || recentFeatures.length > 0);

  return {
    searchQuery,
    searchResults,
-    recentFeatures: displayedHistory,
+    recentFeatures,
    selectedIndex,
    showDropdown,
    isDashboard: currentPage === 'dashboard',