fix: animate analysis workspace transitions

src/features/workbench/workspace/workbench-main-frame.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeft, Map as MapIcon } from "lucide-react";
+import { ArrowLeft, Focus, Map as MapIcon } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import type { ReactNode } from "react";
 import { cn } from "@/shared/ui/cn";
@@ -50,19 +50,28 @@ export function WorkbenchMainFrame({
 }: WorkbenchMainFrameProps) {
   const prefersReducedMotion = useReducedMotion();
   const showMap = surfaceMode !== "focus";
-  const showArtifact = activeArtifact && surfaceMode !== "map_only";
+  const showArtifact = Boolean(activeArtifact && surfaceMode !== "map_only");
   const showArtifactViewControl = Boolean(
     activeArtifact &&
-    activeArtifact.mapRelation !== "none" &&
-    (surfaceMode === "focus" || surfaceMode === "map_only")
+    activeArtifact.mapRelation !== "none"
   );
   const mapOnly = surfaceMode === "map_only";
+  const mapSplit = surfaceMode === "map_split";
+  const viewControlLabel = mapOnly
+    ? "返回分析成果"
+    : mapSplit
+      ? "专注分析"
+      : "显示地图";
+  const viewControlLeft = mapSplit ? "calc(50% + 24px)" : "24px";
   const timelineTransition = prefersReducedMotion
     ? { duration: 0 }
     : { duration: 0.28, ease: [0.22, 1, 0.36, 1] as const };
   const viewControlTransition = prefersReducedMotion
     ? { duration: 0 }
     : { duration: 0.18, ease: [0.22, 1, 0.36, 1] as const };
+  const artifactTransition = prefersReducedMotion
+    ? { duration: 0 }
+    : { duration: 0.24, ease: [0.22, 1, 0.36, 1] as const };
 
   return (
     <div
@@ -92,25 +101,39 @@ export function WorkbenchMainFrame({
           {mapOverlay}
         </section>
 
-        {activeArtifact ? (
-          <section
-            id="artifact-workspace"
-            aria-label={`${activeArtifact.title}工作区`}
-            aria-hidden={!showArtifact}
-            className={cn(
-              "relative z-30 min-h-0 min-w-0 overflow-hidden",
-              !showArtifact && "hidden"
-            )}
-          >
-            <AnalysisArtifactWorkspace
-              artifact={activeArtifact}
-              surfaceMode={surfaceMode}
-              onSetView={onSetArtifactView}
-              onCollapse={onCollapseArtifact}
-              onDestroy={onDestroyArtifact}
-            />
-          </section>
-        ) : null}
+        <AnimatePresence initial={false} mode="popLayout">
+          {activeArtifact ? (
+            <motion.section
+              key={activeArtifact.id}
+              id="artifact-workspace"
+              aria-label={`${activeArtifact.title}工作区`}
+              aria-hidden={!showArtifact}
+              className={cn(
+                "z-30 min-h-0 min-w-0 overflow-hidden",
+                showArtifact ? "relative" : "pointer-events-none absolute inset-0"
+              )}
+              initial={prefersReducedMotion ? false : { opacity: 0, y: 10, scale: 0.992 }}
+              animate={showArtifact
+                ? { opacity: 1, y: 0, scale: 1, visibility: "visible" }
+                : {
+                    opacity: 0,
+                    y: 8,
+                    scale: 0.994,
+                    transitionEnd: { visibility: "hidden" }
+                  }}
+              exit={prefersReducedMotion
+                ? { opacity: 0 }
+                : { opacity: 0, y: 10, scale: 0.992 }}
+              transition={artifactTransition}
+            >
+              <AnalysisArtifactWorkspace
+                artifact={activeArtifact}
+                onCollapse={onCollapseArtifact}
+                onDestroy={onDestroyArtifact}
+              />
+            </motion.section>
+          ) : null}
+        </AnimatePresence>
 
         {pendingArtifact ? (
           <ArtifactPeekBar
@@ -125,31 +148,43 @@ export function WorkbenchMainFrame({
           {showArtifactViewControl ? (
             <motion.div
               className={cn(
-                "pointer-events-auto absolute left-6 top-4 z-40 lg:left-[max(1.5rem,calc(6rem-var(--workbench-agent-current-width)))]",
+                "pointer-events-auto absolute bottom-[72px] z-40 lg:bottom-6",
                 ARTIFACT_VIEW_CONTROL_SHELL_CLASS_NAME
               )}
-              initial={prefersReducedMotion ? false : { opacity: 0, y: 6, scale: 0.98 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
+              initial={prefersReducedMotion
+                ? false
+                : { opacity: 0, y: 6, scale: 0.98, left: viewControlLeft }}
+              animate={{ opacity: 1, y: 0, scale: 1, left: viewControlLeft }}
               exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 5, scale: 0.98 }}
               transition={viewControlTransition}
             >
               <button
                 type="button"
-                aria-label={mapOnly ? "返回分析成果" : "显示地图"}
-                onClick={() => onSetArtifactView(mapOnly ? "focus" : mapSplitAvailable ? "map_split" : "map_only")}
+                aria-label={viewControlLabel}
+                onClick={() => onSetArtifactView(
+                  surfaceMode === "focus"
+                    ? mapSplitAvailable ? "map_split" : "map_only"
+                    : "focus"
+                )}
                 className={ARTIFACT_VIEW_CONTROL_BUTTON_CLASS_NAME}
               >
                 <AnimatePresence initial={false} mode="wait">
                   <motion.span
-                    key={mapOnly ? "return-analysis" : "show-map"}
+                    key={surfaceMode}
                     className="inline-flex items-center gap-1.5"
                     initial={prefersReducedMotion ? false : { opacity: 0, x: mapOnly ? 5 : -5 }}
                     animate={{ opacity: 1, x: 0 }}
                     exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, x: mapOnly ? -5 : 5 }}
                     transition={viewControlTransition}
                   >
-                    {mapOnly ? <ArrowLeft size={13} aria-hidden="true" /> : <MapIcon size={13} aria-hidden="true" />}
-                    {mapOnly ? "返回分析成果" : "显示地图"}
+                    {mapOnly ? (
+                      <ArrowLeft size={13} aria-hidden="true" />
+                    ) : mapSplit ? (
+                      <Focus size={13} aria-hidden="true" />
+                    ) : (
+                      <MapIcon size={13} aria-hidden="true" />
+                    )}
+                    {viewControlLabel}
                   </motion.span>
                 </AnimatePresence>
               </button>