feat: refactor artifact analysis workspace

src/features/workbench/map-workbench-page.tsx

@@ -44,9 +44,9 @@ import {
 } from "./components/toolbar-panel";
 import { WorkbenchTopBar } from "./components/workbench-top-bar";
 import {
-  WorkbenchMainFrame,
-  type WorkbenchMainFrameHandle
+  WorkbenchMainFrame
 } from "./workspace/workbench-main-frame";
+import { useArtifactWorkspace } from "./workspace/use-artifact-workspace";
 import { WORKBENCH_SCENARIOS, WORKBENCH_USER } from "./data/workbench-session";
 import { useWorkbenchAgent } from "./hooks/use-workbench-agent";
 import { useWorkbenchDrawing, type WorkbenchDrawMode } from "./hooks/use-workbench-drawing";
@@ -104,7 +104,6 @@ export function MapWorkbenchPage({
   const hasMapboxToken = Boolean(env.TJWATER_MAPBOX_ACCESS_TOKEN);
   const devPanelEnabled = env.TJWATER_ENABLE_DEV_PANEL;
   const mapContainerRef = useRef<HTMLDivElement | null>(null);
-  const mainFrameRef = useRef<WorkbenchMainFrameHandle | null>(null);
   const [detailFeature, setDetailFeature] = useState<DetailFeature | null>(null);
   const [devPanelOpen, setDevPanelOpen] = useState(false);
   const [impactVisible, setImpactVisible] = useState(false);
@@ -147,6 +146,8 @@ export function MapWorkbenchPage({
     onFrontendAction: handleFrontendAction,
     getAccessToken
   });
+  const collapseAgentPanel = agent.collapsePanel;
+  const expandAgentPanel = agent.expandPanel;
   const clearActiveTool = useCallback(() => {
     setActiveToolId(null);
   }, []);
@@ -173,10 +174,22 @@ export function MapWorkbenchPage({
     activeToolOpen: activeToolId !== null,
     agentPanelOpen: agent.panelOpen,
     devPanelOpen,
-    collapseAgentPanel: agent.collapsePanel,
-    expandAgentPanel: agent.expandPanel,
+    collapseAgentPanel,
+    expandAgentPanel,
     onClearActiveTool: clearActiveTool
   });
+  const artifactWorkspace = useArtifactWorkspace(viewportWidth);
+  const artifactActive = artifactWorkspace.activeArtifact !== null;
+  const agentOverlaysWorkspace = artifactActive && leftPanelOpen;
+
+  useEffect(() => {
+    if (artifactActive) {
+      collapseAgentPanel();
+      setDetailFeature(null);
+      return;
+    }
+    expandAgentPanel();
+  }, [artifactActive, collapseAgentPanel, expandAgentPanel]);
 
   function openAgentWorkspaceForViewport() {
     openAgentPanelForViewport();
@@ -199,7 +212,7 @@ export function MapWorkbenchPage({
   const { controller: mapController, state: mapControllerState } = useWorkbenchMapController({
     mapRef,
     mapReady,
-    leftPanelOpen,
+    leftPanelOpen: agentOverlaysWorkspace,
     rightPanelOpen,
     conditionPanelExpanded: rightPanelExpanded,
     agentPanelWidth
@@ -238,7 +251,11 @@ export function MapWorkbenchPage({
   });
   const taskTickerAvailable = runningTickerConditions.length > 0;
   const shouldShowTaskTicker =
-    mobileSheet === null && !conditionFeedExpanded && taskTickerVisible && taskTickerAvailable;
+    !artifactActive
+    && mobileSheet === null
+    && !conditionFeedExpanded
+    && taskTickerVisible
+    && taskTickerAvailable;
   const taskTickerEnterState = prefersReducedMotion
     ? {
         opacity: 1,
@@ -618,7 +635,7 @@ export function MapWorkbenchPage({
         zoom: trustedAction.zoom ?? Math.max(map.getZoom(), 14),
         padding: getResponsiveWorkbenchPadding(
           map,
-          leftPanelOpen,
+          agentOverlaysWorkspace,
           rightPanelOpen,
           rightPanelExpanded,
           agentPanelWidth
@@ -776,7 +793,11 @@ export function MapWorkbenchPage({
         {
           ...WORKBENCH_LAYOUT_CSS_VARIABLES,
           "--workbench-agent-current-width": `${
-            leftPanelOpen ? agentPanelWidth : WORKBENCH_LAYOUT.collapsedAgentWidth
+            artifactActive
+              ? WORKBENCH_LAYOUT.collapsedAgentWidth
+              : leftPanelOpen
+                ? agentPanelWidth
+                : WORKBENCH_LAYOUT.collapsedAgentWidth
           }px`
         } as CSSProperties
       }
@@ -802,7 +823,7 @@ export function MapWorkbenchPage({
         onCompareScenario={handleCompareScenario}
         onExportScenarioReport={handleExportScenarioReport}
         onAnalyzeAlertsWithAgent={handleAnalyzeAlertsWithAgent}
-        onCreateTestAnalysis={devPanelEnabled ? () => mainFrameRef.current?.openTestAnalysis() : undefined}
+        onCreateTestAnalysis={artifactWorkspace.createTestArtifactPreview}
         onShowDataStatus={handleShowDataStatus}
         onRefreshTiles={handleRefreshTiles}
         onShowShortcuts={handleShowShortcuts}
@@ -811,7 +832,15 @@ export function MapWorkbenchPage({
       />
 
       <WorkbenchMainFrame
-        ref={mainFrameRef}
+        activeArtifact={artifactWorkspace.activeArtifact}
+        pendingArtifact={artifactWorkspace.pendingArtifact}
+        surfaceMode={artifactWorkspace.surfaceMode}
+        mapSplitAvailable={artifactWorkspace.mapSplitAvailable}
+        onOpenPendingArtifact={artifactWorkspace.openPreview}
+        onDestroyPendingArtifact={artifactWorkspace.destroyPreview}
+        onSetArtifactView={artifactWorkspace.setView}
+        onCollapseArtifact={artifactWorkspace.collapseArtifact}
+        onDestroyArtifact={artifactWorkspace.destroyArtifact}
         mapContent={(
           <div
             ref={mapContainerRef}
@@ -842,6 +871,7 @@ export function MapWorkbenchPage({
         panelProps={agentPanelProps}
         panelOpen={agent.panelOpen}
         panelCollapsing={agent.panelCollapsing}
+        artifactActive={artifactActive}
         conditionExpanded={shouldShowConditionFeed && conditionFeedExpanded}
         personaState={agent.personaState}
         statusLabel={agent.statusLabel}
@@ -880,7 +910,7 @@ export function MapWorkbenchPage({
         />
       ) : null}
 
-      {mobileSheet === null ? (
+      {mobileSheet === null && artifactWorkspace.surfaceMode !== "focus" ? (
         <div className="absolute bottom-16 left-3 right-3 z-30 lg:hidden">
           <ToolbarPanel
             {...toolbarPanelProps}
@@ -912,7 +942,7 @@ export function MapWorkbenchPage({
         ) : null}
       </AnimatePresence>
 
-      <div className="absolute bottom-3 left-3 right-3 z-30 lg:hidden">
+      <div className={`absolute z-30 lg:hidden ${artifactWorkspace.surfaceMode === "focus" ? "bottom-[4.25rem] right-3" : "bottom-3 left-3 right-3"}`}>
         {mobileSheet === null ? (
           <div className="flex items-center justify-center gap-2">
             <button
@@ -924,11 +954,13 @@ export function MapWorkbenchPage({
             >
               <AgentPersona className="pointer-events-none h-8 w-8" state={agent.personaState} />
             </button>
-            <MapToolbar
-              items={toolbarItems}
-              orientation="horizontal"
-              className="h-11 justify-center"
-            />
+            {artifactWorkspace.surfaceMode !== "focus" ? (
+              <MapToolbar
+                items={toolbarItems}
+                orientation="horizontal"
+                className="h-11 justify-center"
+              />
+            ) : null}
             <button
               type="button"
               aria-label="打开工况任务"