feat: refine agent workflow layout and settings

components/agents/AgentGenerationWorkspaceDarkV2.tsx

@@ -228,6 +228,7 @@ export function AgentGenerationWorkspaceDarkV2({
     () => selectableModels.find((model) => model.id === selectedModelId) || selectableModels[0],
     [selectableModels, selectedModelId]
   );
+  const shouldShowFullWidthPresetPanel = Boolean(!selectedAgentPreset && presetPanel);
 
   const { messages, setMessages, sendMessage, status } = useChat<ChatMessage>({
     id: chatId,
@@ -549,12 +550,35 @@ export function AgentGenerationWorkspaceDarkV2({
 
       {/* Main Content */}
       <main className="flex-1 overflow-y-auto overscroll-contain pt-16 lg:overflow-hidden">
-        <div className="mx-auto flex min-h-full max-w-[1480px] flex-col px-6 py-6 lg:h-full lg:px-8 xl:px-10">
+        <div className="mx-auto flex min-h-full max-w-[1480px] flex-col gap-6 px-6 py-6 lg:h-full lg:px-8 xl:px-10">
+          {shouldShowFullWidthPresetPanel ? (
+            <motion.section
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+            >
+              <div className="mb-4 flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
+                <div>
+                  <h3 className="text-base font-semibold text-white">选择生图模式</h3>
+                  <p className="mt-1 text-sm text-white/42">
+                    先选一个模式，再继续配置图片槽位、素材图和生成参数。
+                  </p>
+                </div>
+                <div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-xs text-white/50">
+                  支持搜索、预览与新建模式
+                </div>
+              </div>
+              <div className="agent-dark-scrollbar max-h-[420px] overflow-y-auto pr-1">
+                {presetPanel}
+              </div>
+            </motion.section>
+          ) : null}
+
           <div className="grid min-h-0 flex-1 grid-cols-1 gap-6 lg:grid-cols-[400px_minmax(0,1fr)]">
             {/* Left Panel - Controls */}
             <div className="agent-dark-scrollbar min-h-0 space-y-4 lg:h-full lg:overflow-y-auto lg:pr-2">
               {/* 嵌入的智能体选择面板 */}
-              {!selectedAgentPreset && presetPanel && (
+              {!shouldShowFullWidthPresetPanel && !selectedAgentPreset && presetPanel && (
                 <motion.div
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
@@ -873,7 +897,7 @@ export function AgentGenerationWorkspaceDarkV2({
                       <p className="mt-2 text-sm text-white/30">
                         {selectedAgentPresetId
                           ? "配置图片槽位后点击开始生成"
-                          : "从左侧选择一个生图模式后继续"}
+                          : "从上方选择一个生图模式后继续"}
                       </p>
                     </motion.div>
                   )}

components/agents/AgentPresetPanelDarkV2.tsx

@@ -153,7 +153,7 @@ export function AgentPresetPanelDarkV2({
     return (
       <>
         {/* 搜索栏 */}
-        <div className="mb-4 flex items-center gap-2">
+        <div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
             <Input
@@ -171,7 +171,7 @@ export function AgentPresetPanelDarkV2({
             type="button"
             onClick={() => (onCreateClick ? onCreateClick() : setShowCreateDialog(true))}
             className={cn(
-              "h-9 shrink-0 gap-1.5 rounded-lg px-3",
+              "h-9 shrink-0 gap-1.5 rounded-lg px-3 sm:w-auto",
               "bg-gradient-to-r from-emerald-500 to-teal-500 text-white",
               "hover:from-emerald-400 hover:to-teal-400"
             )}
@@ -182,7 +182,7 @@ export function AgentPresetPanelDarkV2({
         </div>
 
         {/* 导航标签（简化版） */}
-        <div className="mb-4 flex gap-1">
+        <div className="mb-4 flex flex-wrap gap-1">
           {navTabs.slice(0, 2).map((tab) => (
             <button
               key={tab.id}
@@ -200,9 +200,9 @@ export function AgentPresetPanelDarkV2({
         </div>
 
         {/* 卡片网格 */}
-        <div className="grid grid-cols-1 gap-3">
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-3">
           {isLoading ? (
-            <div className="flex items-center justify-center py-8">
+            <div className="flex items-center justify-center py-8 md:col-span-2 2xl:col-span-3">
               <Loader2 className="h-6 w-6 animate-spin text-violet-500" />
             </div>
           ) : filteredPresets.length > 0 ? (
@@ -221,7 +221,7 @@ export function AgentPresetPanelDarkV2({
               ))}
             </AnimatePresence>
           ) : (
-            <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center">
+            <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="text-sm text-white/40">暂无{embeddedEntityLabel}</div>
               <Button
                 type="button"