feat: refine generation workspace experience

src/features/agent/AgentPage.tsx

@@ -13,7 +13,7 @@ import {
   SendOutlined,
   ThunderboltOutlined,
 } from "@ant-design/icons";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import "../../styles/pages/agent.css";
 import WorkspacePageShell from "../../components/WorkspacePageShell";
 import type { WebGenerationPreviewTask } from "../../types";
@@ -73,6 +73,24 @@ const agentModes = [
   },
 ];
 
+const agentModelOptions = [
+  { id: "gemini-3.1-pro", label: "Gemini 3.1 Pro" },
+  { id: "gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+  { id: "gpt-4o", label: "GPT-4o" },
+];
+
+const thinkingSpeedOptions = [
+  { id: "fast", label: "快速" },
+  { id: "balanced", label: "均衡" },
+  { id: "precise", label: "精细" },
+];
+
+const thinkingDepthOptions = [
+  { id: "concise", label: "简洁" },
+  { id: "standard", label: "标准" },
+  { id: "deep", label: "深度" },
+];
+
 const quickStarts = ["「新品发布」全链路运营", "「销售日报」自动分析", "「竞品监控」每周报告"];
 
 function getTaskSourceLabel(task: WebGenerationPreviewTask): string | null {
@@ -94,6 +112,21 @@ function AgentPage({
   const [prompt, setPrompt] = useState("让 Omni Agent 帮我规划「新品发布会全流程」");
   const [isRunning, setIsRunning] = useState(false);
   const [notice, setNotice] = useState("选择一个 Agent 模式，输入目标后即可开始。");
+  const [agentModel, setAgentModel] = useState(agentModelOptions[0].id);
+  const [thinkingSpeed, setThinkingSpeed] = useState(thinkingSpeedOptions[1].id);
+  const [thinkingDepth, setThinkingDepth] = useState(thinkingDepthOptions[1].id);
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const controlsRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (controlsRef.current && !controlsRef.current.contains(event.target as Node)) {
+        setActiveDropdown(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
   const selectedMode = agentModes.find((item) => item.id === activeMode) ?? agentModes[0];
   const recentTasks = tasks.slice(0, 3);
@@ -204,15 +237,85 @@ function AgentPage({
               />
 
               <div className="agent-composer__footer">
-                <div className="agent-composer__controls" aria-label="输入设置">
+                <div className="agent-composer__controls" aria-label="输入设置" ref={controlsRef}>
                   <button type="button" className="agent-tool-icon" aria-label="上传附件">
                     <PaperClipOutlined />
                   </button>
-                  <button type="button" className="agent-tool-pill">
-                    <ThunderboltOutlined />
-                    自动模式
-                    <DownOutlined />
-                  </button>
+                  <div className="agent-tool-pills">
+                    <button
+                      type="button"
+                      className={`agent-tool-pill${activeDropdown === "model" ? " is-open" : ""}`}
+                      onClick={() => setActiveDropdown(activeDropdown === "model" ? null : "model")}
+                    >
+                      <RobotOutlined />
+                      {agentModelOptions.find((m) => m.id === agentModel)?.label ?? "模型选择"}
+                      <DownOutlined />
+                    </button>
+                    {activeDropdown === "model" && (
+                      <div className="agent-dropdown">
+                        {agentModelOptions.map((m) => (
+                          <button
+                            key={m.id}
+                            type="button"
+                            className={`agent-dropdown__item${agentModel === m.id ? " is-active" : ""}`}
+                            onClick={() => { setAgentModel(m.id); setActiveDropdown(null); }}
+                          >
+                            {m.label}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <div className="agent-tool-pills">
+                    <button
+                      type="button"
+                      className={`agent-tool-pill${activeDropdown === "speed" ? " is-open" : ""}`}
+                      onClick={() => setActiveDropdown(activeDropdown === "speed" ? null : "speed")}
+                    >
+                      <ThunderboltOutlined />
+                      {thinkingSpeedOptions.find((s) => s.id === thinkingSpeed)?.label ?? "思考速度"}
+                      <DownOutlined />
+                    </button>
+                    {activeDropdown === "speed" && (
+                      <div className="agent-dropdown">
+                        {thinkingSpeedOptions.map((s) => (
+                          <button
+                            key={s.id}
+                            type="button"
+                            className={`agent-dropdown__item${thinkingSpeed === s.id ? " is-active" : ""}`}
+                            onClick={() => { setThinkingSpeed(s.id); setActiveDropdown(null); }}
+                          >
+                            {s.label}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <div className="agent-tool-pills">
+                    <button
+                      type="button"
+                      className={`agent-tool-pill${activeDropdown === "depth" ? " is-open" : ""}`}
+                      onClick={() => setActiveDropdown(activeDropdown === "depth" ? null : "depth")}
+                    >
+                      <ApartmentOutlined />
+                      {thinkingDepthOptions.find((d) => d.id === thinkingDepth)?.label ?? "思考深度"}
+                      <DownOutlined />
+                    </button>
+                    {activeDropdown === "depth" && (
+                      <div className="agent-dropdown">
+                        {thinkingDepthOptions.map((d) => (
+                          <button
+                            key={d.id}
+                            type="button"
+                            className={`agent-dropdown__item${thinkingDepth === d.id ? " is-active" : ""}`}
+                            onClick={() => { setThinkingDepth(d.id); setActiveDropdown(null); }}
+                          >
+                            {d.label}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                   <button type="button" className="agent-tool-icon" aria-label="工具集">
                     <AppstoreOutlined />
                   </button>