feat: make workflow stage full screen

app/canvas/[id]/page.tsx

@@ -925,35 +925,38 @@ export default function CanvasEditorPage({ params }: PageProps) {
           {agentDisabledNotice}
           <div className="absolute left-0 right-0 top-[72px] z-10 border-t border-black/10 dark:border-white/10" />
 
-          <div className="absolute inset-0 flex pt-[72px]">
-            <div className="min-w-0 flex-1 border-r bg-white dark:bg-zinc-950">
-              {currentAgentStage === "workflow" ? (
-                <div className="h-full">
-                  <AgentWorkflowPanel
-                    embedded
-                    config={resolvedWorkflowUiConfig}
-                    inputs={workflowInputs}
-                    onInputsChange={setWorkflowInputs}
-                    materials={workflowMaterials}
-                    onMaterialsChange={setWorkflowMaterials}
-                    selections={workflowSelections}
-                    onSelectionsChange={setWorkflowSelections}
-                    onNextStep={() => setCurrentAgentStage("mode")}
-                    onReset={() => {
-                      setWorkflowInputs({
-                        primarySku: "",
-                        secondarySku: "",
-                        brand: "",
-                        store: "",
-                      });
-                      setWorkflowMaterials(createEmptyAgentWorkflowMaterialSelections());
-                      setWorkflowSelections({});
-                      setSelectedAgentPresetId(null);
-                      setCurrentAgentStage("workflow");
-                    }}
-                  />
-                </div>
-              ) : (
+          {currentAgentStage === "workflow" ? (
+            <div className="absolute inset-0 pt-[72px]">
+              <div className="h-full bg-white dark:bg-zinc-950">
+                <AgentWorkflowPanel
+                  embedded
+                  config={resolvedWorkflowUiConfig}
+                  inputs={workflowInputs}
+                  onInputsChange={setWorkflowInputs}
+                  materials={workflowMaterials}
+                  onMaterialsChange={setWorkflowMaterials}
+                  selections={workflowSelections}
+                  onSelectionsChange={setWorkflowSelections}
+                  onNextStep={() => setCurrentAgentStage("mode")}
+                  onSkipStep={() => setCurrentAgentStage("mode")}
+                  onReset={() => {
+                    setWorkflowInputs({
+                      primarySku: "",
+                      secondarySku: "",
+                      brand: "",
+                      store: "",
+                    });
+                    setWorkflowMaterials(createEmptyAgentWorkflowMaterialSelections());
+                    setWorkflowSelections({});
+                    setSelectedAgentPresetId(null);
+                    setCurrentAgentStage("workflow");
+                  }}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="absolute inset-0 flex pt-[72px]">
+              <div className="min-w-0 flex-1 border-r bg-white dark:bg-zinc-950">
                 <div className="flex h-full flex-col">
                   <div className="border-b p-4">
                     <div className="flex items-start justify-between gap-3">
@@ -981,45 +984,45 @@ export default function CanvasEditorPage({ params }: PageProps) {
                     </div>
                     {!workflowProgress.isComplete ? (
                       <div className="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
-                        第一步尚未完成，请先返回补全工作流环节。
+                        第一步尚未完成，你也可以在当前直接继续生图模式选择。
                       </div>
                     ) : null}
                   </div>
                   <div className="min-h-0 flex-1">
-                  <AgentPresetPanel
-                    embedded
-                    selectedPresetId={selectedAgentPresetId}
-                    onSelectPreset={setSelectedAgentPresetId}
-                    title="生图模式"
-                    description="先选择生图模式，右侧会出现对应槽位和 SKU / SPU 搜图入口"
-                    searchPlaceholder="搜索生图模式"
-                    publicTitle="公共生图模式"
-                    privateTitle="我的生图模式"
+                    <AgentPresetPanel
+                      embedded
+                      selectedPresetId={selectedAgentPresetId}
+                      onSelectPreset={setSelectedAgentPresetId}
+                      title="生图模式"
+                      description="先选择生图模式，右侧会出现对应槽位和 SKU / SPU 搜图入口"
+                      searchPlaceholder="搜索生图模式"
+                      publicTitle="公共生图模式"
+                      privateTitle="我的生图模式"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div
+                className="shrink-0 border-l bg-white dark:bg-zinc-950"
+                style={{ width: FLOATING_PANEL_WIDTH }}
+              >
+                <div className="h-full overflow-hidden">
+                  <CanvasChatPanel
+                    chatId={`canvas-${id}`}
+                    onClose={() => {}}
+                    selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
+                    chatScope="agent"
+                    workflowContext={workflowContext}
+                    workflowInputs={workflowInputs}
+                    onWorkflowInputsChange={setWorkflowInputs}
+                    workflowMaterials={workflowMaterials}
+                    onWorkflowMaterialsChange={setWorkflowMaterials}
                   />
                 </div>
-                </div>
-              )}
-            </div>
-
-            <div
-              className="shrink-0 border-l bg-white dark:bg-zinc-950"
-              style={{ width: FLOATING_PANEL_WIDTH }}
-            >
-              <div className="h-full overflow-hidden">
-                <CanvasChatPanel
-                  chatId={`canvas-${id}`}
-                  onClose={() => {}}
-                  selectedAgentPresetId={isAgentFeatureEnabled ? selectedAgentPresetId : null}
-                  chatScope="agent"
-                  workflowContext={workflowContext}
-                  workflowInputs={workflowInputs}
-                  onWorkflowInputsChange={setWorkflowInputs}
-                  workflowMaterials={workflowMaterials}
-                  onWorkflowMaterialsChange={setWorkflowMaterials}
-                />
               </div>
             </div>
-          </div>
+          )}
         </div>
       </TooltipProvider>
     );

components/agents/AgentWorkflowPanel.tsx

@@ -39,6 +39,7 @@ interface AgentWorkflowPanelProps {
   onReset?: () => void;
   embedded?: boolean;
   onNextStep?: () => void;
+  onSkipStep?: () => void;
 }
 
 function buildSelectionSummary(params: {
@@ -77,6 +78,7 @@ export function AgentWorkflowPanel({
   onReset,
   embedded = false,
   onNextStep,
+  onSkipStep,
 }: AgentWorkflowPanelProps) {
   const brandOptions = useMemo(
     () => config?.inputOptions?.brands || defaultAgentWorkflowUiConfig.inputOptions?.brands || [],
@@ -149,7 +151,7 @@ export function AgentWorkflowPanel({
               智能体工作流
             </div>
             <div className="mt-1 text-xs text-muted-foreground">
-              左侧完成步骤选择，右侧执行与追调。
+              先完成工作流设定，下一步再进入生图模式执行。
             </div>
             <div className="mt-2 inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-[11px] text-muted-foreground">
               已完成 {progress.completed}/{progress.total} 个环节
@@ -358,7 +360,13 @@ export function AgentWorkflowPanel({
               className="resize-none bg-background"
             />
             {onNextStep ? (
-              <div className="flex justify-end">
+              <div className="flex flex-wrap justify-end gap-2">
+                {onSkipStep ? (
+                  <Button type="button" variant="outline" onClick={onSkipStep}>
+                    跳过选择，直接进入下一步
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </Button>
+                ) : null}
                 <Button type="button" onClick={onNextStep} disabled={!progress.isComplete}>
                   下一步：选择生图模式
                   <ArrowRight className="ml-2 h-4 w-4" />