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

对仅含静态类名或单一三元表达式的 className 改用普通字符串，保留有条件合并或 prop 覆盖场景下的 cn() 用法。

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ErrorFallback.tsx

@@ -57,7 +57,11 @@ export function ErrorFallback({
           <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
         )}
 
-        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
+        <p
+          className={
+            isApp ? 'text-sm text-muted-foreground mb-6' : 'text-xs text-muted-foreground mb-5'
+          }
+        >
           {description}
         </p>
 
@@ -83,7 +87,7 @@ export function ErrorFallback({
           variant="destructive"
           size={isApp ? 'default' : 'sm'}
           onClick={onAction}
-          className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
+          className={isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm'}
         >
           <RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
           {actionLabel}

src/components/ui/checkbox.tsx

@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
+    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>

src/layout/TopBar/SearchDropdown.tsx

@@ -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>

src/layout/TopBar/SearchInput.tsx

@@ -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 && (
+      {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"
@@ -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>
   );

src/layout/TopBar/index.tsx

@@ -33,9 +33,7 @@ export default function TopBar() {
       id: 'open-in-tab',
       icon: ExternalLink,
       title: '在标签页打开',
-      onClick: () => {
+      onClick: () => void handleOpenInTab(),
-        void handleOpenInTab();
-      },
     },
   ];
 

src/layout/TopBar/useTopBar.ts

@@ -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 handleKeyDown = (e: ReactKeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
+    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;
+      let feature: FeatureConfig | undefined;
-      const feature =
+      if (selectedIndex >= 0 && selectedIndex < totalItems) {
-        selectedIndex >= 0 && selectedIndex < totalItems
+        feature = items[selectedIndex];
-          ? items[selectedIndex]
+      } else if (isSearching && searchResults.length > 0) {
-          : searchQuery.trim() && searchResults.length > 0
+        feature = searchResults[0];
-            ? searchResults[0]
+      }
-            : undefined;
       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 =
+  const showDropdown = showResults && (!!searchQuery.trim() || recentFeatures.length > 0);
-    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
 
   return {
     searchQuery,
     searchResults,
-    recentFeatures: displayedHistory,
+    recentFeatures,
     selectedIndex,
     showDropdown,
     isDashboard: currentPage === 'dashboard',

src/pages/Base64Converter/components/Base64ConverterSection.tsx

@@ -50,10 +50,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
     setDirection(next);
   };
 
-  const handleDownload = () => {
-    if (decoded) downloadBlob(decoded.blob, decodedFileName);
-  };
-
   return (
     <div className="w-full flex flex-col space-y-4 px-2">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
@@ -115,7 +111,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                     />
                   </div>
                 )}
-                <Upload className={cn('w-8 h-8 text-primary')} />
+                <Upload className="w-8 h-8 text-primary" />
                 <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                   {info.name}
                 </span>
@@ -137,11 +133,11 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
                 </span>
                 <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {`最大文件大小：${maxFileSizeStr}`}
+                  最大文件大小：{maxFileSizeStr}
                 </span>
                 {mode === 'image' && (
                   <span className="text-[10px] font-medium text-muted-foreground/50">
-                    {'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
+                    支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式
                   </span>
                 )}
               </div>
@@ -231,7 +227,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               blobSize={decoded.blob.size}
               fileName={decodedFileName}
               onFileNameChange={setCustomFileName}
-              onDownload={handleDownload}
+              onDownload={() => downloadBlob(decoded.blob, decodedFileName)}
             >
               {mode === 'image' && (
                 <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">

src/pages/Dashboard/index.tsx

@@ -1,11 +1,10 @@
-import { cn } from '@/lib/utils';
 import { useDashboard } from './useDashboard';
 
 export default function Index() {
   const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
 
   return (
-    <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
+    <div className="flex flex-col gap-4 p-3.5 w-full h-auto select-none">
       {showRecent && (
         <div className="flex flex-col gap-2">
           <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
@@ -19,12 +18,7 @@ export default function Index() {
                   key={key}
                   type="button"
                   onClick={() => navigateTo(key)}
-                  className={cn(
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border border-border/60 bg-card text-card-foreground hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
-                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
-                    'border border-border/60 bg-card text-card-foreground',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
                 >
                   <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
                   {feature.label}
@@ -42,9 +36,7 @@ export default function Index() {
         {visibleFeatures.length === 0 ? (
           <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
         ) : (
-          <div
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
-            className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
-          >
             {visibleFeatures.map(({ key, feature }) => {
               const IconComponent = feature.icon;
               return (
@@ -52,20 +44,9 @@ export default function Index() {
                   key={key}
                   type="button"
                   onClick={() => navigateTo(key)}
-                  className={cn(
+                  className="group flex flex-col items-center justify-center gap-1.5 py-3 px-2 rounded-xl border border-border/50 bg-card hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
-                    'group flex flex-col items-center justify-center gap-1.5',
-                    'py-3 px-2 rounded-xl border border-border/50 bg-card',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
                 >
-                  <IconComponent
+                  <IconComponent className="h-5 w-5 text-muted-foreground/70 group-hover:text-foreground transition-colors" />
-                    className={cn(
-                      'h-5 w-5 text-muted-foreground/70',
-                      'group-hover:text-foreground',
-                      'transition-colors',
-                    )}
-                  />
                   <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
                     {feature.label}
                   </span>