@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/editor.tsx

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import {
   Button,
-  Card,
   Input,
   message,
   Modal,
@@ -19,53 +18,241 @@ import {
   Typography,
 } from 'antd';
 import {
-  ArrowLeftOutlined,
+  ApartmentOutlined,
+  CodeOutlined,
+  DeleteOutlined,
   EditOutlined,
   RobotOutlined,
   RocketOutlined,
   SaveOutlined,
+  UploadOutlined,
 } from '@ant-design/icons';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import stableStringify from 'json-stable-stringify';
 import { customRequest } from 'helpers/http';
 import { FlowRenderer } from './components/FlowRenderer';
-import { NodePropertyPanel } from './components/NodePropertyPanel';
+import {
+  NodePropertyPanel,
+  type NodePropertyPanelHandle,
+} from './components/NodePropertyPanel';
+import { WorkflowWorkspaceHeader } from './components/WorkflowWorkspaceHeader';
 import { DslView, type DslViewHandle } from './components/DslView';
 import { useWorkflowAgent } from './hooks/useWorkflowAgent';
+import { useReferencedNodeInstanceConfigs } from './hooks/useReferencedNodeInstanceConfigs';
 import { useIsAgentAllowed } from 'config/agentAllowed';
+import { useReferenceUpload } from 'hooks';
+import { removeDeletedParallelBranchPipelines } from './utils/removeWorkflowEdges';
+import { resolveWorkflowDisplay } from './utils/resolveWorkflowDisplay';
+import {
+  emptyWorkflowHistory,
+  pushWorkflowHistory,
+  redoWorkflowHistory,
+  undoWorkflowHistory,
+} from './utils/workflowHistory';
 import type {
+  CallableWorkflowOption,
   Workflow,
   WorkflowDSL,
   WorkflowNode,
   WorkflowNodeType,
   WorkflowVersion,
 } from './types';
+import './workflow-ui.css';
 
 const { Title } = Typography;
 const { TextArea } = Input;
 
 const NEW_DRAFT_KEY = 'workflow_new_draft';
-const EDIT_DRAFT_KEY = (id: string) => `workflow_draft_${id}`;
+
+type NodePropertyUpdates = Parameters<
+  React.ComponentProps<typeof NodePropertyPanel>['onSave']
+>[1];
+
+function applyNodePropertyUpdates(
+  dsl: WorkflowDSL,
+  nodeId: string,
+  updates: NodePropertyUpdates,
+): WorkflowDSL {
+  let changed = false;
+  const nodes = dsl.nodes.map((node) => {
+    if (node.id !== nodeId) return node;
+    const updated = {
+      ...node,
+      label: updates.label ?? node.label,
+      config: updates.config ?? node.config,
+    };
+    if (updates.instanceRef === null) {
+      delete updated.instanceRef;
+    } else if (updates.instanceRef !== undefined) {
+      updated.instanceRef = updates.instanceRef;
+    }
+    if (updates.configOverride === null) {
+      delete updated.configOverride;
+    } else if (updates.configOverride !== undefined) {
+      updated.configOverride = updates.configOverride;
+    }
+    if (stableStringify(updated) === stableStringify(node)) return node;
+    changed = true;
+    return updated;
+  });
+  return changed ? { ...dsl, nodes } : dsl;
+}
 
 export default function WorkflowEditorPage() {
   const { t } = useTranslation('workflow');
-  const { id } = useParams<{ id: string }>();
-  const isNewMode = !id;
+  const { id: routeWorkflowId } = useParams<{ id: string }>();
+  const [searchParams] = useSearchParams();
+  const requestedVersion = useMemo(() => {
+    const value = Number(searchParams.get('version'));
+    return Number.isInteger(value) && value > 0 ? value : null;
+  }, [searchParams]);
+  const [workflowId, setWorkflowId] = useState(routeWorkflowId);
+  const isNewMode = !workflowId;
   const navigate = useNavigate();
 
   const [workflow, setWorkflow] = useState<Workflow | null>(null);
   const [versions, setVersions] = useState<WorkflowVersion[]>([]);
   const [nodeTypes, setNodeTypes] = useState<WorkflowNodeType[]>([]);
+  const [nodeTypesError, setNodeTypesError] = useState(false);
+  const [callableWorkflows, setCallableWorkflows] = useState<
+    CallableWorkflowOption[]
+  >([]);
+  const [callableCatalogStatus, setCallableCatalogStatus] = useState<
+    'loading' | 'ready' | 'error'
+  >('loading');
   const [loading, setLoading] = useState(!isNewMode);
   const isDev = useIsAgentAllowed();
 
   const [dsl, setDsl] = useState<WorkflowDSL | null>(null);
+  const dslRef = useRef<WorkflowDSL | null>(null);
+  const [dslHistory, setDslHistory] = useState(() =>
+    emptyWorkflowHistory<WorkflowDSL>(),
+  );
+  const dslHistoryRef = useRef(dslHistory);
+  const dslTransactionStartRef = useRef<WorkflowDSL | null>(null);
   const [currentVersion, setCurrentVersion] = useState<number | null>(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const referencedNodeConfigs = useReferencedNodeInstanceConfigs(dsl);
 
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [viewMode, setViewMode] = useState<'canvas' | 'dsl'>('canvas');
+  const [dslTextDirty, setDslTextDirty] = useState(false);
   const dslViewRef = useRef<DslViewHandle>(null);
+  const nodePropertyPanelRef = useRef<NodePropertyPanelHandle>(null);
+
+  const updateDslHistory = useCallback(
+    (nextHistory: ReturnType<typeof emptyWorkflowHistory<WorkflowDSL>>) => {
+      dslHistoryRef.current = nextHistory;
+      setDslHistory(nextHistory);
+    },
+    [],
+  );
+
+  const replaceDslWithoutHistory = useCallback(
+    (nextDsl: WorkflowDSL | null) => {
+      dslRef.current = nextDsl;
+      setDsl(nextDsl);
+      dslTransactionStartRef.current = null;
+      updateDslHistory(emptyWorkflowHistory());
+    },
+    [updateDslHistory],
+  );
+
+  const applyDslChange = useCallback(
+    (nextDsl: WorkflowDSL) => {
+      const currentDsl = dslRef.current;
+      if (currentDsl === nextDsl) return;
+      if (!dslTransactionStartRef.current) {
+        updateDslHistory(
+          pushWorkflowHistory(
+            dslHistoryRef.current,
+            currentDsl ?? { nodes: [], edges: [] },
+          ),
+        );
+      }
+      dslRef.current = nextDsl;
+      setDsl(nextDsl);
+      setHasUnsavedChanges(true);
+    },
+    [updateDslHistory],
+  );
+
+  const beginDslTransaction = useCallback(() => {
+    if (dslTransactionStartRef.current) return;
+    dslTransactionStartRef.current = dslRef.current ?? {
+      nodes: [],
+      edges: [],
+    };
+  }, []);
+
+  const finishDslTransaction = useCallback(() => {
+    const startDsl = dslTransactionStartRef.current;
+    const currentDsl = dslRef.current;
+    dslTransactionStartRef.current = null;
+    if (!startDsl || !currentDsl) return;
+    if (JSON.stringify(startDsl) === JSON.stringify(currentDsl)) return;
+    updateDslHistory(pushWorkflowHistory(dslHistoryRef.current, startDsl));
+  }, [updateDslHistory]);
+
+  const handleUndo = useCallback(() => {
+    const currentDsl = dslRef.current ?? { nodes: [], edges: [] };
+    const result = undoWorkflowHistory(dslHistoryRef.current, currentDsl);
+    if (!result) return;
+    dslRef.current = result.value;
+    setDsl(result.value);
+    updateDslHistory(result.history);
+    setHasUnsavedChanges(true);
+    setSelectedNodeId((current) =>
+      current && result.value.nodes.some((node) => node.id === current)
+        ? current
+        : null,
+    );
+  }, [updateDslHistory]);
+
+  const handleRedo = useCallback(() => {
+    const currentDsl = dslRef.current ?? { nodes: [], edges: [] };
+    const result = redoWorkflowHistory(dslHistoryRef.current, currentDsl);
+    if (!result) return;
+    dslRef.current = result.value;
+    setDsl(result.value);
+    updateDslHistory(result.history);
+    setHasUnsavedChanges(true);
+    setSelectedNodeId((current) =>
+      current && result.value.nodes.some((node) => node.id === current)
+        ? current
+        : null,
+    );
+  }, [updateDslHistory]);
+
+  useEffect(() => {
+    dslRef.current = dsl;
+  }, [dsl]);
+
+  useEffect(() => {
+    if (viewMode !== 'canvas') return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (
+        target?.closest(
+          'input, textarea, [contenteditable="true"], .monaco-editor',
+        )
+      )
+        return;
+      const modifier = event.metaKey || event.ctrlKey;
+      if (!modifier) return;
+      if (event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        if (event.shiftKey) handleRedo();
+        else handleUndo();
+      } else if (event.key.toLowerCase() === 'y') {
+        event.preventDefault();
+        handleRedo();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleRedo, handleUndo, viewMode]);
 
   // Title editing state
   const [title, setTitle] = useState(isNewMode ? t('editor.untitled') : '');
@@ -80,6 +267,18 @@ export default function WorkflowEditorPage() {
   // AI generate modal
   const [aiModalOpen, setAiModalOpen] = useState(false);
   const [aiPromptText, setAiPromptText] = useState('');
+  const aiFileInputRef = useRef<HTMLInputElement>(null);
+  // ── 工作流参考图（可选，仅一张）──
+  const {
+    file: aiImgFile,
+    previewUrl: aiImgPreviewUrl,
+    uploadedPath: aiUploadedImgPath,
+    uploading: aiImgUploading,
+    error: aiImgUploadError,
+    select: selectAiImgFile,
+    upload: handleAiImgUpload,
+    reset: resetAiImg,
+  } = useReferenceUpload({ withPreview: true });
 
   const nodeTypeMap = useMemo(() => {
     const map: Record<
@@ -106,24 +305,52 @@ export default function WorkflowEditorPage() {
     abort: abortAgent,
     loading: agentLoading,
     error: agentError,
-  } = useWorkflowAgent({ nodeTypes });
+  } = useWorkflowAgent({
+    nodeTypes,
+    referencedConfigs: referencedNodeConfigs.configs,
+    callableWorkflows:
+      callableCatalogStatus === 'ready' ? callableWorkflows : undefined,
+  });
 
   // --- Load logic ---
-  useEffect(() => {
-    // Load node types for both modes
-    customRequest<WorkflowNodeType[]>('workflow-node-types', 'GET')
-      .then(setNodeTypes)
-      .catch(() => {});
+  const loadNodeTypes = useCallback(async () => {
+    try {
+      setNodeTypes(
+        await customRequest<WorkflowNodeType[]>('workflow-node-types', 'GET'),
+      );
+      setNodeTypesError(false);
+    } catch {
+      setNodeTypesError(true);
+    }
+  }, []);
+
+  useEffect(() => void loadNodeTypes(), [loadNodeTypes]);
+
+  const loadCallableWorkflows = useCallback(async () => {
+    setCallableCatalogStatus('loading');
+    try {
+      const items = await customRequest<CallableWorkflowOption[]>(
+        'workflow/callable',
+        'GET',
+      );
+      setCallableWorkflows(Array.isArray(items) ? items : []);
+      setCallableCatalogStatus('ready');
+    } catch {
+      setCallableWorkflows([]);
+      setCallableCatalogStatus('error');
+    }
   }, []);
 
+  useEffect(() => void loadCallableWorkflows(), [loadCallableWorkflows]);
+
   useEffect(() => {
-    if (isNewMode) {
+    if (!routeWorkflowId) {
       // New mode: load from localStorage
       const saved = localStorage.getItem(NEW_DRAFT_KEY);
       if (saved) {
         try {
           const parsed = JSON.parse(saved);
-          setDsl(parsed.dsl || null);
+          replaceDslWithoutHistory(parsed.dsl || null);
           setTitle(parsed.title || 'Untitled Workflow');
         } catch {
           localStorage.removeItem(NEW_DRAFT_KEY);
@@ -136,26 +363,28 @@ export default function WorkflowEditorPage() {
     setLoading(true);
     setHasUnsavedChanges(false);
     Promise.all([
-      customRequest<Workflow>(`workflow/${id}`, 'GET'),
-      customRequest<WorkflowVersion[]>(`workflow/${id}/versions`, 'GET'),
+      customRequest<Workflow>(`workflow/${routeWorkflowId}`, 'GET'),
+      customRequest<WorkflowVersion[]>(
+        `workflow/${routeWorkflowId}/versions`,
+        'GET',
+      ),
+      requestedVersion === null
+        ? Promise.resolve(null)
+        : customRequest<WorkflowVersion>(
+            `workflow/${routeWorkflowId}/versions/${requestedVersion}`,
+            'GET',
+          ),
     ])
-      .then(([wf, vers]) => {
-        setWorkflow(wf);
+      .then(([wf, vers, selectedVersion]) => {
         setVersions(vers);
         setTitle(wf.name);
-        // getVersions only returns metadata (no dsl) for the version selector
-        const latestVersion = (wf as any).versions?.[0];
-        // wf.dsl is the draft (source of truth for in-progress edits, same
-        // precedence as backend publish()); fall back to the last published
-        // version only when no draft has ever been saved.
-        if (wf.dsl) {
-          setDsl(wf.dsl);
-        } else if (latestVersion?.dsl) {
-          setDsl(latestVersion.dsl);
-        }
-        if (latestVersion?.version) {
-          setCurrentVersion(latestVersion.version);
-        }
+        const display = resolveWorkflowDisplay(wf);
+        const databaseDsl = selectedVersion?.dsl ?? display.dsl;
+        const publishedVersion = selectedVersion?.version ?? display.version;
+        setWorkflow(wf);
+        replaceDslWithoutHistory(databaseDsl);
+        setCurrentVersion(publishedVersion);
+        setHasUnsavedChanges(publishedVersion !== null);
       })
       .catch((e) => {
         message.error(e?.message ?? t('editor.loadFailed'));
@@ -163,46 +392,52 @@ export default function WorkflowEditorPage() {
       .finally(() => {
         setLoading(false);
       });
-  }, [id, isNewMode]);
+  }, [replaceDslWithoutHistory, requestedVersion, routeWorkflowId, t]);
 
-  // --- Edit buffer: write to localStorage on every change ---
+  // A new Workflow has no database row yet, so keep only that temporary draft
+  // in the browser. Existing Workflows are persisted exclusively by Save.
   useEffect(() => {
-    if (!hasUnsavedChanges) return;
-    if (isNewMode) {
-      localStorage.setItem(NEW_DRAFT_KEY, JSON.stringify({ dsl, title }));
-    } else if (id && dsl) {
-      localStorage.setItem(EDIT_DRAFT_KEY(id), JSON.stringify(dsl));
-    }
-  }, [dsl, title, hasUnsavedChanges, isNewMode, id]);
+    if (!hasUnsavedChanges || !isNewMode) return;
+    localStorage.setItem(NEW_DRAFT_KEY, JSON.stringify({ dsl, title }));
+  }, [dsl, title, hasUnsavedChanges, isNewMode]);
 
   // --- Canvas edit callback ---
-  const handleDslChange = useCallback((newDsl: WorkflowDSL) => {
-    setDsl(newDsl);
-    setHasUnsavedChanges(true);
-  }, []);
+  const handleDslChange = useCallback(
+    (newDsl: WorkflowDSL) => {
+      applyDslChange(newDsl);
+    },
+    [applyDslChange],
+  );
 
   // --- AI edit workflow ---
   const handlePromptSubmit = useCallback(
     async (promptText: string) => {
       if (!promptText.trim()) return;
+      if (referencedNodeConfigs.status !== 'ready') {
+        message.error(t('editor.templateConfigLoadingHint'));
+        return;
+      }
       const result = await generate({
         action: dsl ? 'edit_workflow' : 'create',
         prompt: promptText.trim(),
         currentDsl: dsl || undefined,
       });
       if (result && 'dsl' in result) {
-        setDsl(result.dsl);
-        setHasUnsavedChanges(true);
+        applyDslChange(result.dsl);
         message.success(result.changeSummary || t('editor.updated'));
       }
     },
-    [dsl, generate],
+    [applyDslChange, dsl, generate, referencedNodeConfigs.status, t],
   );
 
   // --- AI edit single node ---
   const handleNodeAiEdit = useCallback(
     async (nodeId: string, nodePrompt: string) => {
       if (!dsl) return;
+      if (referencedNodeConfigs.status !== 'ready') {
+        message.error(t('editor.templateConfigLoadingHint'));
+        return;
+      }
       const result = await generate({
         action: 'edit_node',
         prompt: nodePrompt,
@@ -210,12 +445,11 @@ export default function WorkflowEditorPage() {
         targetNodeId: nodeId,
       });
       if (result && 'dsl' in result) {
-        setDsl(result.dsl);
-        setHasUnsavedChanges(true);
+        applyDslChange(result.dsl);
         message.success(result.changeSummary || t('editor.nodeUpdated'));
       }
     },
-    [dsl, generate],
+    [applyDslChange, dsl, generate, referencedNodeConfigs.status, t],
   );
 
   // --- Node label change ---
@@ -225,25 +459,9 @@ export default function WorkflowEditorPage() {
       const newNodes = dsl.nodes.map((n) =>
         n.id === nodeId ? { ...n, label: newLabel } : n,
       );
-      setDsl({ ...dsl, nodes: newNodes });
-      setHasUnsavedChanges(true);
-    },
-    [dsl],
-  );
-
-  // --- Delete node ---
-  const handleNodeDelete = useCallback(
-    (nodeId: string) => {
-      if (!dsl) return;
-      const newNodes = dsl.nodes.filter((n) => n.id !== nodeId);
-      const newEdges = dsl.edges.filter(
-        (e) => e.source !== nodeId && e.target !== nodeId,
-      );
-      setDsl({ nodes: newNodes, edges: newEdges });
-      setHasUnsavedChanges(true);
-      setSelectedNodeId(null);
+      applyDslChange({ ...dsl, nodes: newNodes });
     },
-    [dsl],
+    [applyDslChange, dsl],
   );
 
   // --- Node property save ---
@@ -257,31 +475,42 @@ export default function WorkflowEditorPage() {
         instanceRef?: WorkflowNode['instanceRef'] | null;
       },
     ) => {
-      if (!dsl) return;
-      const newNodes = dsl.nodes.map((n) => {
-        if (n.id !== nodeId) return n;
-        const updated = {
-          ...n,
-          label: updates.label ?? n.label,
-          config: updates.config ?? n.config,
-        };
-        if (updates.instanceRef === null) {
-          delete updated.instanceRef;
-        } else if (updates.instanceRef !== undefined) {
-          updated.instanceRef = updates.instanceRef;
-        }
-        if (updates.configOverride === null) {
-          delete updated.configOverride;
-        } else if (updates.configOverride !== undefined) {
-          updated.configOverride = updates.configOverride;
-        }
-        return updated;
-      });
-      setDsl({ ...dsl, nodes: newNodes });
-      setHasUnsavedChanges(true);
+      const currentDsl = dslRef.current ?? dsl;
+      if (!currentDsl) return;
+      const nextConfig = updates.configOverride ?? updates.config;
+      const cleanedDsl = nextConfig
+        ? removeDeletedParallelBranchPipelines(
+            currentDsl,
+            nodeId,
+            nextConfig,
+            referencedNodeConfigs.configs,
+          )
+        : currentDsl;
+      applyDslChange(applyNodePropertyUpdates(cleanedDsl, nodeId, updates));
       message.success('节点属性已更新');
     },
-    [dsl],
+    [applyDslChange, dsl, referencedNodeConfigs.configs],
+  );
+
+  const handleNodeConfigDraftChange = useCallback(
+    (nodeId: string, config: Record<string, any>) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl) return;
+      const node = currentDsl.nodes.find((item) => item.id === nodeId);
+      const nextDsl = removeDeletedParallelBranchPipelines(
+        currentDsl,
+        nodeId,
+        config,
+        referencedNodeConfigs.configs,
+      );
+      applyDslChange(
+        applyNodePropertyUpdates(nextDsl, nodeId, {
+          config,
+          ...(node?.instanceRef && { configOverride: config }),
+        }),
+      );
+    },
+    [applyDslChange, referencedNodeConfigs.configs],
   );
 
   // --- Title editing ---
@@ -303,6 +532,34 @@ export default function WorkflowEditorPage() {
   async function handleSave() {
     if (!dsl) return;
 
+    if (viewMode === 'dsl') {
+      if (referencedNodeConfigs.status !== 'ready') {
+        message.error(
+          referencedNodeConfigs.status === 'error'
+            ? t('editor.templateConfigLoadFailedHint')
+            : t('editor.templateConfigLoadingHint'),
+        );
+        return;
+      }
+      if (!(dslViewRef.current?.apply() ?? true)) return;
+    }
+
+    if (currentVersion !== null) {
+      const confirmed = await new Promise<boolean>((resolve) => {
+        Modal.confirm({
+          title: t('editor.replaceDraftTitle'),
+          content: t('editor.replaceDraftContent', {
+            version: currentVersion,
+          }),
+          okText: t('editor.replaceDraftConfirm'),
+          cancelText: t('common.cancel'),
+          onOk: () => resolve(true),
+          onCancel: () => resolve(false),
+        });
+      });
+      if (!confirmed) return;
+    }
+
     if (title === 'Untitled Workflow') {
       setSaveName('');
       setNameModalOpen(true);
@@ -325,30 +582,54 @@ export default function WorkflowEditorPage() {
 
   async function doSave(name: string) {
     if (!dsl) return;
+    const dslToSave = dslRef.current ?? dsl;
     setSaving(true);
     try {
       if (isNewMode) {
         // Create new workflow with DSL
-        const wf = await customRequest<{ id: number }>('workflow', 'POST', {
+        const wf = await customRequest<Workflow>('workflow', 'POST', {
           name,
           description: '',
-          dsl,
+          dsl: dslToSave,
         });
+        const createdWorkflowId = String(wf.id);
+        setWorkflowId(createdWorkflowId);
+        setWorkflow({ ...wf, id: createdWorkflowId, name, dsl: dslToSave });
+        setHasUnsavedChanges(false);
         localStorage.removeItem(NEW_DRAFT_KEY);
         message.success(t('editor.saveSuccess'));
-        navigate(`/admin/workflow/edit/${wf.id}`, { replace: true });
+        window.history.replaceState(
+          window.history.state,
+          '',
+          `/admin/workflow/edit/${createdWorkflowId}`,
+        );
       } else {
         // Update existing: save draft
         // If name changed from DB, patch it
         if (workflow && name !== workflow.name) {
-          await customRequest(`workflow/${id}`, 'PATCH', { name });
+          await customRequest(`workflow/${workflowId}`, 'PATCH', { name });
           setWorkflow((prev) => (prev ? { ...prev, name } : prev));
         }
-        await customRequest(`workflow/${id}/save`, 'PATCH', { dsl });
-        localStorage.removeItem(EDIT_DRAFT_KEY(id!));
+        const savedWorkflow = await customRequest<Workflow>(
+          `workflow/${workflowId}/save`,
+          'PATCH',
+          { dsl: dslToSave },
+        );
+        setWorkflow((previous) =>
+          previous
+            ? {
+                ...previous,
+                ...savedWorkflow,
+                dsl: dslToSave,
+              }
+            : savedWorkflow,
+        );
+        setCurrentVersion(null);
         setHasUnsavedChanges(false);
+        navigate(`/admin/workflow/edit/${workflowId}`, { replace: true });
         message.success(t('editor.saved'));
       }
+      nodePropertyPanelRef.current?.markSaved();
     } catch (e: any) {
       message.error(e?.message ?? t('editor.saveFailed'));
     } finally {
@@ -358,11 +639,22 @@ export default function WorkflowEditorPage() {
 
   // --- Version selector ---
   async function handleSelectVersion(version: number) {
-    if (!id) return;
+    if (!workflowId) return;
 
     const dslDirty =
       viewMode === 'dsl' && (dslViewRef.current?.isDirty() ?? false);
 
+    const loadSelectedVersion = () => {
+      if (version === 0 && workflow?.dsl) {
+        replaceDslWithoutHistory(workflow.dsl);
+        setCurrentVersion(null);
+        setHasUnsavedChanges(false);
+        setSelectedNodeId(null);
+        return;
+      }
+      return doLoadVersion(version);
+    };
+
     if (hasUnsavedChanges || dslDirty) {
       Modal.confirm({
         title: hasUnsavedChanges ? '未保存的修改' : 'DSL 有未应用的编辑',
@@ -371,26 +663,25 @@ export default function WorkflowEditorPage() {
           : 'DSL 视图中有未应用到画布的编辑，切换版本将丢弃这些内容。确定要继续吗？',
         okText: '确定切换',
         cancelText: '取消',
-        onOk: () => doLoadVersion(version),
+        onOk: loadSelectedVersion,
       });
       return;
     }
 
-    await doLoadVersion(version);
+    await loadSelectedVersion();
   }
 
   async function doLoadVersion(version: number) {
-    if (!id) return;
+    if (!workflowId) return;
     try {
       const v = await customRequest<WorkflowVersion>(
-        `workflow/${id}/versions/${version}`,
+        `workflow/${workflowId}/versions/${version}`,
         'GET',
       );
-      setDsl(v.dsl);
+      replaceDslWithoutHistory(v.dsl);
       setCurrentVersion(v.version);
-      setHasUnsavedChanges(false);
+      setHasUnsavedChanges(true);
       setSelectedNodeId(null);
-      localStorage.removeItem(EDIT_DRAFT_KEY(id));
     } catch (e: any) {
       message.error(e?.message ?? t('editor.versionLoadFailed'));
     }
@@ -402,6 +693,14 @@ export default function WorkflowEditorPage() {
 
   function handleViewModeChange(next: 'canvas' | 'dsl') {
     if (next === 'canvas' && viewMode === 'dsl') {
+      if (referencedNodeConfigs.status !== 'ready') {
+        message.error(
+          referencedNodeConfigs.status === 'error'
+            ? t('editor.templateConfigLoadFailedHint')
+            : t('editor.templateConfigLoadingHint'),
+        );
+        return;
+      }
       // 切回画布前自动应用 textarea 中的 DSL；校验失败则阻止切换
       const success = dslViewRef.current?.apply() ?? true;
       if (!success) {
@@ -421,16 +720,39 @@ export default function WorkflowEditorPage() {
           '当前已有工作流内容，AI 自动生成将覆盖现有内容。确定要继续吗？',
         okText: '确定继续',
         cancelText: '取消',
-        onOk: () => setAiModalOpen(true),
+        onOk: () => {
+          resetAiImg();
+          setAiModalOpen(true);
+        },
       });
       return;
     }
+    resetAiImg();
     setAiModalOpen(true);
   }
 
+  // 提交 AI 生成：选了参考图但未上传时拦截；已上传则把路径附进 prompt
+  function submitAiPrompt() {
+    const trimmed = aiPromptText.trim();
+    if (!trimmed) return;
+    if (aiImgFile && !aiUploadedImgPath) {
+      message.warning('请先点击"上传"，待参考图上传成功后再生成');
+      return;
+    }
+    let prompt = trimmed;
+    if (aiUploadedImgPath) {
+      prompt +=
+        '\n\n我提供了一张工作流参考图，请用 Read 工具读取它，作为工作流结构和节点设计的参考：\n' +
+        aiUploadedImgPath;
+    }
+    handlePromptSubmit(prompt);
+    setAiPromptText('');
+    resetAiImg();
+    setAiModalOpen(false);
+  }
+
   function handleDslApply(newDsl: WorkflowDSL) {
-    setDsl(newDsl);
-    setHasUnsavedChanges(true);
+    applyDslChange(newDsl);
     setSelectedNodeId(null);
   }
 
@@ -450,30 +772,13 @@ export default function WorkflowEditorPage() {
   }
 
   return (
-    <div
-      style={{
-        height: 'calc(100vh - 96px)',
-        display: 'flex',
-        flexDirection: 'column',
-        background: 'var(--ant-color-bg-layout)',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Header */}
-      <Card style={{ marginBottom: 16, flexShrink: 0 }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Space>
-            <Button
-              type="text"
-              icon={<ArrowLeftOutlined />}
-              onClick={() => navigate('/admin/workflow')}
-            ></Button>
+    <div className="workflow-workspace">
+      <WorkflowWorkspaceHeader
+        eyebrow={t('editor.workspaceEyebrow')}
+        onBack={() => navigate('/admin/workflow')}
+        backLabel={t('common.back')}
+        title={
+          <div className="workflow-workspace__title-row">
             {editingTitle ? (
               <Input
                 ref={titleInputRef}
@@ -499,18 +804,25 @@ export default function WorkflowEditorPage() {
             {hasUnsavedChanges && (
               <Tag color="orange">{t('editor.unsaved')}</Tag>
             )}
-          </Space>
-          <Space>
+          </div>
+        }
+        actions={
+          <Space wrap={false}>
             {!isNewMode && versions.length > 0 && (
               <Select
-                value={currentVersion}
+                value={currentVersion ?? 0}
                 onChange={handleSelectVersion}
                 style={{ width: 200 }}
                 placeholder={t('editor.selectVersion')}
-                options={versions.map((v) => ({
-                  label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || t('editor.saved')}`,
-                  value: v.version,
-                }))}
+                options={[
+                  ...(workflow?.hasUnpublishedChanges && workflow.dsl
+                    ? [{ label: t('viewer.savedDraft'), value: 0 }]
+                    : []),
+                  ...versions.map((v) => ({
+                    label: `v${v.version} - ${v.changeSummary?.slice(0, 20) || t('editor.saved')}`,
+                    value: v.version,
+                  })),
+                ]}
               />
             )}
             {isDev && (
@@ -525,81 +837,153 @@ export default function WorkflowEditorPage() {
             <Button
               type="primary"
               icon={<SaveOutlined />}
-              disabled={!dsl || !hasUnsavedChanges}
+              disabled={!dsl || (!hasUnsavedChanges && !dslTextDirty)}
               loading={saving}
               onClick={handleSave}
             >
               {t('common.save')}
             </Button>
           </Space>
-        </div>
-      </Card>
+        }
+      />
 
       {/* View toggle row */}
-      <div
-        style={{
-          marginBottom: 12,
-          flexShrink: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Segmented
-          value={viewMode}
-          onChange={(v) => handleViewModeChange(v as 'canvas' | 'dsl')}
-          options={[
-            { label: '画布', value: 'canvas' },
-            { label: 'DSL', value: 'dsl' },
-          ]}
-        />
-        <Button
-          danger
-          size="small"
-          style={{ marginRight: 8 }}
-          onClick={() => {
-            if (viewMode === 'dsl') {
-              dslViewRef.current?.clear();
-            } else {
-              setDsl({ nodes: [], edges: [] });
-              setHasUnsavedChanges(true);
-              setSelectedNodeId(null);
-            }
-          }}
-        >
-          清空
-        </Button>
+      <div className="workflow-workspace__toolbar">
+        <div className="workflow-workspace__view-switcher">
+          <Segmented
+            className="workflow-workspace__segmented"
+            aria-label={t('editor.viewMode')}
+            value={viewMode}
+            onChange={(v) => handleViewModeChange(v as 'canvas' | 'dsl')}
+            options={[
+              {
+                label: t('editor.canvas'),
+                value: 'canvas',
+                icon: <ApartmentOutlined />,
+              },
+              {
+                label: t('editor.dsl'),
+                value: 'dsl',
+                icon: <CodeOutlined />,
+              },
+            ]}
+          />
+        </div>
+        <Space className="workflow-workspace__toolbar-actions" size={8}>
+          {nodeTypesError && (
+            <span className="workflow-inline-error">
+              {t('editor.nodeTypesLoadFailed')}{' '}
+              <Button type="link" size="small" onClick={loadNodeTypes}>
+                {t('common.retry')}
+              </Button>
+            </span>
+          )}
+          {referencedNodeConfigs.status === 'loading' && (
+            <span className="workflow-template-sync-state">
+              <Spin size="small" />
+              {t('editor.templateConfigLoading')}
+            </span>
+          )}
+          {referencedNodeConfigs.status === 'error' && (
+            <span className="workflow-inline-error">
+              {t('editor.templateConfigLoadFailed')}{' '}
+              <Button
+                type="link"
+                size="small"
+                onClick={referencedNodeConfigs.retry}
+              >
+                {t('common.retry')}
+              </Button>
+            </span>
+          )}
+          {callableCatalogStatus === 'error' && (
+            <span className="workflow-inline-error">
+              {t('editor.callableCatalogLoadFailed')}{' '}
+              <Button type="link" size="small" onClick={loadCallableWorkflows}>
+                {t('common.retry')}
+              </Button>
+            </span>
+          )}
+          {agentError && (
+            <span className="workflow-inline-error">{agentError}</span>
+          )}
+          <Button
+            className="workflow-workspace__clear"
+            type="text"
+            danger
+            size="small"
+            icon={<DeleteOutlined />}
+            onClick={() => {
+              if (viewMode === 'dsl') {
+                dslViewRef.current?.clear();
+              } else {
+                applyDslChange({ nodes: [], edges: [] });
+                setSelectedNodeId(null);
+              }
+            }}
+          >
+            {t('editor.clear')}
+          </Button>
+        </Space>
       </div>
 
       {/* Main area: Flow + Property Panel */}
-      <div
-        style={{ flex: 1, display: 'flex', overflow: 'hidden', minHeight: 0 }}
-      >
+      <div className="workflow-workspace__body">
         {viewMode === 'canvas' ? (
           <>
-            <div style={{ flex: 1, position: 'relative' }}>
+            <div className="workflow-workspace__canvas">
               <FlowRenderer
                 dsl={dsl}
                 nodeTypeMap={nodeTypeMap}
                 selectedNodeId={selectedNodeId}
                 onNodeClick={handleNodeClick}
                 onDslChange={handleDslChange}
+                canUndo={dslHistory.past.length > 0}
+                canRedo={dslHistory.future.length > 0}
+                onUndo={handleUndo}
+                onRedo={handleRedo}
+                onNodeDragStart={beginDslTransaction}
+                onNodeDragStop={finishDslTransaction}
+                referencedConfigs={referencedNodeConfigs.configs}
+                referencedConfigStatus={referencedNodeConfigs.status}
+                onRetryReferencedConfigs={referencedNodeConfigs.retry}
+                readonly={false}
               />
             </div>
             <NodePropertyPanel
+              ref={nodePropertyPanelRef}
               node={selectedNode}
               nodeTypes={nodeTypes}
-              currentWorkflowId={id}
+              nodes={dsl?.nodes ?? []}
+              edges={dsl?.edges ?? []}
+              currentWorkflowId={workflowId}
+              referencedConfigs={referencedNodeConfigs.configs}
+              referencedConfigStatus={referencedNodeConfigs.status}
+              onRetryReferencedConfigs={referencedNodeConfigs.retry}
+              callableWorkflows={callableWorkflows}
+              callableCatalogStatus={callableCatalogStatus}
+              onRetryCallableCatalog={loadCallableWorkflows}
               onSave={handleNodePropertySave}
+              onConfigDraftChange={handleNodeConfigDraftChange}
               onLabelChange={handleNodeLabelChange}
               onAiEdit={handleNodeAiEdit}
-              onDelete={handleNodeDelete}
               onAbort={abortAgent}
               aiLoading={agentLoading}
             />
           </>
         ) : (
-          <DslView ref={dslViewRef} dsl={dsl} onApply={handleDslApply} />
+          <DslView
+            ref={dslViewRef}
+            dsl={dsl}
+            nodeTypes={nodeTypes}
+            referencedConfigs={referencedNodeConfigs.configs}
+            callableWorkflows={
+              callableCatalogStatus === 'ready' ? callableWorkflows : undefined
+            }
+            onApply={handleDslApply}
+            onDirtyChange={setDslTextDirty}
+            readonly={false}
+          />
         )}
       </div>
 
@@ -643,23 +1027,110 @@ export default function WorkflowEditorPage() {
           placeholder={t('editor.changePlaceholder')}
           autoSize={{ minRows: 6, maxRows: 12 }}
           onPressEnter={(e) => {
-            if (e.ctrlKey && aiPromptText.trim()) {
-              handlePromptSubmit(aiPromptText.trim());
-              setAiPromptText('');
-              setAiModalOpen(false);
+            if (e.ctrlKey) {
+              submitAiPrompt();
             }
           }}
         />
+        {/* 工作流参考图（可选，仅一张） */}
+        <div style={{ marginTop: 12 }}>
+          <Typography.Text strong style={{ fontSize: 14 }}>
+            工作流参考图
+          </Typography.Text>
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, marginLeft: 4 }}
+          >
+            （可选）
+          </Typography.Text>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              marginTop: 8,
+            }}
+          >
+            <input
+              ref={aiFileInputRef}
+              type="file"
+              accept=".png,.jpg,.jpeg,.webp,.gif"
+              style={{ display: 'none' }}
+              onChange={(e) => {
+                const f = e.target.files?.[0] ?? null;
+                e.target.value = '';
+                selectAiImgFile(f);
+              }}
+            />
+            <Button
+              icon={<UploadOutlined />}
+              onClick={() => aiFileInputRef.current?.click()}
+            >
+              选择文件
+            </Button>
+            <Typography.Text
+              type={aiImgFile ? undefined : 'secondary'}
+              style={{
+                fontSize: 14,
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {aiImgFile ? aiImgFile.name : '未选择任何文件'}
+            </Typography.Text>
+            <Button
+              onClick={handleAiImgUpload}
+              loading={aiImgUploading}
+              disabled={!aiImgFile || !!aiUploadedImgPath}
+            >
+              {aiUploadedImgPath ? '已上传' : '上传'}
+            </Button>
+          </div>
+          {aiUploadedImgPath && (
+            <Typography.Text
+              type="success"
+              style={{ fontSize: 12, display: 'block', marginTop: 4 }}
+            >
+              ✓ 已上传：{aiImgFile?.name}
+            </Typography.Text>
+          )}
+          {aiImgUploadError && (
+            <Typography.Text
+              type="danger"
+              style={{ fontSize: 12, display: 'block', marginTop: 4 }}
+            >
+              {aiImgUploadError}
+            </Typography.Text>
+          )}
+          {aiImgPreviewUrl && (
+            <img
+              src={aiImgPreviewUrl}
+              alt="工作流参考图预览"
+              style={{
+                marginTop: 8,
+                maxWidth: '100%',
+                maxHeight: 160,
+                borderRadius: 6,
+                border: '1px solid var(--ant-color-border-secondary)',
+                objectFit: 'contain',
+                display: 'block',
+              }}
+            />
+          )}
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, display: 'block', marginTop: 4 }}
+          >
+            仅支持一张图片（png/jpg/webp/gif），不超过 5MB，AI
+            会读取它作为工作流设计参考
+          </Typography.Text>
+        </div>
         <Button
           type="primary"
           icon={<RocketOutlined />}
-          onClick={() => {
-            if (aiPromptText.trim()) {
-              handlePromptSubmit(aiPromptText.trim());
-              setAiPromptText('');
-              setAiModalOpen(false);
-            }
-          }}
+          onClick={submitAiPrompt}
           disabled={!aiPromptText.trim()}
           loading={agentLoading}
           style={{ marginTop: 12 }}