fix: refine mobile workbench sheets

src/features/agent/components/agent-command-panel.tsx

@@ -2,7 +2,6 @@ import {
   Activity,
   CheckCircle2,
   ChevronsUpDown,
-  ChevronDown,
   ChevronLeft,
   DatabaseZap,
   History,
@@ -16,7 +15,8 @@ import {
   Shield,
   ShieldCheck,
   Square,
-  Volume2
+  Volume2,
+  X
 } from "lucide-react";
 import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
@@ -292,19 +292,29 @@ export function AgentCommandPanel({
               >
                 <History size={17} aria-hidden="true" />
               </button>
-              <button
-                type="button"
-                aria-label={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
-                title={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
-                onClick={onCollapse}
-                className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
-              >
-                {presentation === "mobile-sheet" ? (
-                  <ChevronDown size={17} aria-hidden="true" />
-                ) : (
+              {presentation === "mobile-sheet" ? (
+                <button
+                  type="button"
+                  aria-label="关闭 Agent 面板"
+                  title="关闭 Agent 面板"
+                  onClick={onCollapse}
+                  className="group grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-500"
+                >
+                  <span className="surface-control grid h-9 w-9 place-items-center rounded-full shadow-[inset_0_0_0_1px_rgba(148,163,184,0.26),0_4px_12px_rgba(15,33,55,0.10)] transition-[color,background-color,scale] group-active:scale-95 [@media(hover:hover)]:group-hover:bg-blue-50 [@media(hover:hover)]:group-hover:text-blue-700">
+                    <X size={17} strokeWidth={2.25} aria-hidden="true" />
+                  </span>
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  aria-label="折叠 Agent 面板"
+                  title="折叠 Agent 面板"
+                  onClick={onCollapse}
+                  className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
+                >
                   <ChevronLeft size={17} aria-hidden="true" />
-                )}
-              </button>
+                </button>
+              )}
             </div>
             <AnimatePresence initial={false}>
               {historyOpen ? (