From 2cb5b0c1e7048a68e5cbb82f82a139446dd3599c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Thu, 28 May 2026 21:25:47 +0800
Subject: [PATCH] feat: replace ToolCard grid with compact icon+name grid on
 Dashboard

- Replace large ToolCard layout with dense grid (3-6 columns responsive)
- Each item shows icon + tool name in a compact tile
- Hover highlights icon and text with smooth transitions
- Remove ToolCard import from Dashboard (component retained for reuse)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/pages/Dashboard/index.tsx | 46 ++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 29220a1..15b8210 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,5 +1,4 @@
 import { useRouter } from '@/providers/RouterProvider';
-import ToolCard from '@/pages/Dashboard/ToolCard';
 import { getFeatureByKey } from '@/config/features';
 import type { PageType } from '@/types/storage';
 import { useMemo, useState } from 'react';
@@ -89,26 +88,39 @@ export default function DashboardPage() {
         </div>
       )}
 
-      {/* 全部工具 */}
+      {/* 全部工具 — 紧凑 Grid */}
       <div className="flex flex-col gap-2">
         <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
           {t('dashboard_allTools')}
         </h3>
-        <div
-          className={cn(
-            'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(290px,1fr))] auto-rows-auto gap-3.5',
-          )}
-        >
-          {filteredFeatures.map(({ key, feature }) => (
-            <ToolCard
-              key={key}
-              title={t(feature!.labelKey)}
-              description={t(feature!.descriptionKey)}
-              colorKey={feature!.themeColorKey!}
-              icon={feature!.icon!}
-              onNavigate={() => navigateTo(key as PageType)}
-            />
-          ))}
+        <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 }) => {
+            const IconComponent = feature!.icon!;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => navigateTo(key as PageType)}
+                className={cn(
+                  '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
+                  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">
+                  {t(feature!.labelKey)}
+                </span>
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>