From 87a6e6561dae22e164c00dc0bc06bc779e36155e Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Thu, 19 Mar 2026 13:18:10 +0800
Subject: [PATCH] fix: compact embedded agent preset cards

---
 components/agents/AgentPresetCardDark.tsx    | 51 ++++++++++++++++++++
 components/agents/AgentPresetPanelDarkV2.tsx |  7 +--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/components/agents/AgentPresetCardDark.tsx b/components/agents/AgentPresetCardDark.tsx
index bd1dfefcb..343d28593 100644
--- a/components/agents/AgentPresetCardDark.tsx
+++ b/components/agents/AgentPresetCardDark.tsx
@@ -14,6 +14,7 @@ interface AgentPresetCardDarkProps {
   onEdit?: (preset: AgentPreset) => void;
   onDelete?: (preset: AgentPreset) => void;
   index?: number;
+  compact?: boolean;
 }
 
 export function AgentPresetCardDark({
@@ -24,6 +25,7 @@ export function AgentPresetCardDark({
   onEdit,
   onDelete,
   index = 0,
+  compact = false,
 }: AgentPresetCardDarkProps) {
   const previewUrl =
     preset.avatarUrl ||
@@ -81,6 +83,55 @@ export function AgentPresetCardDark({
           ? "场景图"
           : null;
 
+  if (compact) {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          duration: 0.35,
+          delay: index * 0.03,
+          ease: [0.25, 0.46, 0.45, 0.94],
+        }}
+        whileHover={{ y: -3, scale: 1.01 }}
+        whileTap={{ scale: 0.98 }}
+        className={cn(
+          "group relative cursor-pointer overflow-hidden rounded-2xl border p-2.5 transition-all duration-300",
+          selected
+            ? "border-emerald-400/40 bg-emerald-500/[0.08] shadow-[0_0_24px_rgba(16,185,129,0.14)]"
+            : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]"
+        )}
+        onClick={() => onSelect(preset.id)}
+      >
+        <div className="relative mx-auto h-[70px] w-[70px] overflow-hidden rounded-2xl border border-white/10 bg-black/30">
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt={preset.name}
+              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          ) : (
+            <div className={cn("flex h-full w-full items-center justify-center bg-gradient-to-br", typeInfo.gradient)}>
+              <TypeIcon className="h-7 w-7 text-white" />
+            </div>
+          )}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/35 to-transparent" />
+        </div>
+
+        <div className="mt-2 space-y-1 text-center">
+          <div className="line-clamp-2 min-h-[2.5rem] text-[12px] font-medium leading-5 text-white">
+            {preset.name}
+          </div>
+          <div className="text-[10px] text-white/45">{imageModeLabel || typeInfo.label}</div>
+        </div>
+
+        {selected ? (
+          <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-emerald-300/40" />
+        ) : null}
+      </motion.div>
+    );
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 30 }}
diff --git a/components/agents/AgentPresetPanelDarkV2.tsx b/components/agents/AgentPresetPanelDarkV2.tsx
index 82c342892..7d10cf6ad 100644
--- a/components/agents/AgentPresetPanelDarkV2.tsx
+++ b/components/agents/AgentPresetPanelDarkV2.tsx
@@ -200,9 +200,9 @@ export function AgentPresetPanelDarkV2({
         </div>
 
         {/* 卡片网格 */}
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-3">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-2.5">
           {isLoading ? (
-            <div className="flex items-center justify-center py-8 md:col-span-2 2xl:col-span-3">
+            <div className="col-span-full flex items-center justify-center py-8">
               <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
             </div>
           ) : filteredPresets.length > 0 ? (
@@ -217,11 +217,12 @@ export function AgentPresetPanelDarkV2({
                   onEdit={setEditingPreset}
                   onDelete={handleDeletePreset}
                   index={index}
+                  compact
                 />
               ))}
             </AnimatePresence>
           ) : (
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center md:col-span-2 2xl:col-span-3">
+            <div className="col-span-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center">
               <div className="text-sm text-white/40">暂无{embeddedEntityLabel}</div>
               <Button
                 type="button"