@gadmin2n/schematics 0.0.144 → 0.0.146

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

@@ -1,21 +1,33 @@
 import React, {
+  useCallback,
   forwardRef,
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { Alert, Input, message } from 'antd';
-import type { WorkflowDSL } from '../types';
-
-const { TextArea } = Input;
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { message } from 'antd';
+import type {
+  CallableWorkflowOption,
+  WorkflowDSL,
+  WorkflowNodeType,
+} from '../types';
+import { validateWorkflowDsl } from '../utils/validateWorkflowDsl';
+import { WorkflowCodeEditor } from './WorkflowCodeEditor';
 
 const EMPTY_TEMPLATE = '{\n  "nodes": [],\n  "edges": []\n}';
+const AUTO_APPLY_DELAY_MS = 300;
 
 interface DslViewProps {
   dsl: WorkflowDSL | null;
   readonly?: boolean;
   onApply?: (newDsl: WorkflowDSL) => void;
+  onDirtyChange?: (dirty: boolean) => void;
+  nodeTypes?: WorkflowNodeType[];
+  referencedConfigs?: Record<string, Record<string, any>>;
+  callableWorkflows?: CallableWorkflowOption[];
 }
 
 export interface DslViewHandle {
@@ -33,49 +45,6 @@ function stringifyDsl(dsl: WorkflowDSL | null): string {
   return JSON.stringify(dsl, null, 2);
 }
 
-/** 形状级校验：只检查必需字段，深层字段（position/config 等）由画布或保存时暴露 */
-function validateDsl(
-  parsed: any,
-): { ok: true; dsl: WorkflowDSL } | { ok: false; error: string } {
-  if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
-    return { ok: false, error: '根必须是对象 { nodes, edges }' };
-  }
-  if (!Array.isArray(parsed.nodes)) {
-    return { ok: false, error: '字段 nodes 必须是数组' };
-  }
-  if (!Array.isArray(parsed.edges)) {
-    return { ok: false, error: '字段 edges 必须是数组' };
-  }
-  for (let i = 0; i < parsed.nodes.length; i++) {
-    const n = parsed.nodes[i];
-    if (!n || typeof n !== 'object') {
-      return { ok: false, error: `节点 [${i}] 必须是对象` };
-    }
-    if (typeof n.id !== 'string' || !n.id) {
-      return { ok: false, error: `节点 [${i}] 缺少必需字段：id` };
-    }
-    if (typeof n.type !== 'string' || !n.type) {
-      return { ok: false, error: `节点 [${i}] 缺少必需字段：type` };
-    }
-  }
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const e = parsed.edges[i];
-    if (!e || typeof e !== 'object') {
-      return { ok: false, error: `连线 [${i}] 必须是对象` };
-    }
-    if (typeof e.id !== 'string' || !e.id) {
-      return { ok: false, error: `连线 [${i}] 缺少必需字段：id` };
-    }
-    if (typeof e.source !== 'string' || !e.source) {
-      return { ok: false, error: `连线 [${i}] 缺少必需字段：source` };
-    }
-    if (typeof e.target !== 'string' || !e.target) {
-      return { ok: false, error: `连线 [${i}] 缺少必需字段：target` };
-    }
-  }
-  return { ok: true, dsl: parsed as WorkflowDSL };
-}
-
 async function copyToClipboard(text: string): Promise<boolean> {
   try {
     if (navigator.clipboard?.writeText) {
@@ -102,110 +71,205 @@ async function copyToClipboard(text: string): Promise<boolean> {
 }
 
 export const DslView = forwardRef<DslViewHandle, DslViewProps>(function DslView(
-  { dsl, readonly = false, onApply },
+  {
+    dsl,
+    readonly = false,
+    onApply,
+    onDirtyChange,
+    nodeTypes,
+    referencedConfigs,
+    callableWorkflows,
+  },
   ref,
 ) {
   const initial = useMemo(() => stringifyDsl(dsl), [dsl]);
   const [text, setText] = useState(initial);
+  const textRef = useRef(text);
+  const autoApplyTimerRef = useRef<ReturnType<typeof setTimeout>>();
   const [error, setError] = useState<string | null>(null);
 
   // dsl prop 变化时重置 text（应用、版本切换、AI 生成等场景）
   useEffect(() => {
+    if (autoApplyTimerRef.current !== undefined) {
+      clearTimeout(autoApplyTimerRef.current);
+      autoApplyTimerRef.current = undefined;
+    }
+    if (normalizeDslText(textRef.current) === initial) {
+      setError(null);
+      onDirtyChange?.(false);
+      return;
+    }
+    textRef.current = initial;
     setText(initial);
     setError(null);
-  }, [initial]);
+    onDirtyChange?.(false);
+  }, [initial, onDirtyChange]);
+
+  useEffect(
+    () => () => {
+      if (autoApplyTimerRef.current !== undefined)
+        clearTimeout(autoApplyTimerRef.current);
+    },
+    [],
+  );
 
-  function handleTextChange(next: string) {
-    setText(next);
+  function handleTextChange(next: string | undefined) {
+    const nextText = next ?? '';
+    textRef.current = nextText;
+    setText(nextText);
+    if (autoApplyTimerRef.current !== undefined) {
+      clearTimeout(autoApplyTimerRef.current);
+      autoApplyTimerRef.current = undefined;
+    }
     if (error) setError(null);
+    const result = parseAndValidateDsl(nextText, {
+      nodeTypes,
+      referencedConfigs,
+      callableWorkflows,
+    });
+    if (!result.ok) {
+      onDirtyChange?.(nextText !== initial);
+      return;
+    }
+    const normalized = JSON.stringify(result.dsl, null, 2);
+    if (normalized === initial) {
+      onDirtyChange?.(false);
+      return;
+    }
+    onDirtyChange?.(true);
+    autoApplyTimerRef.current = setTimeout(() => {
+      autoApplyTimerRef.current = undefined;
+      onApply?.(result.dsl);
+      onDirtyChange?.(false);
+    }, AUTO_APPLY_DELAY_MS);
   }
 
-  function handleApply(): boolean {
+  const handleApply = useCallback((): boolean => {
+    if (autoApplyTimerRef.current !== undefined) {
+      clearTimeout(autoApplyTimerRef.current);
+      autoApplyTimerRef.current = undefined;
+    }
+    const currentText = textRef.current;
     // 文本未变更：no-op success（无需重复应用，避免无意义重渲染）
-    if (text === initial) {
+    if (currentText === initial) {
       setError(null);
+      onDirtyChange?.(false);
       return true;
     }
-    let parsed: any;
-    try {
-      parsed = JSON.parse(text);
-    } catch (e: any) {
-      setError(`JSON 解析失败：${e?.message ?? String(e)}`);
-      return false;
-    }
-    const result = validateDsl(parsed);
+    const result = parseAndValidateDsl(currentText, {
+      nodeTypes,
+      referencedConfigs,
+      callableWorkflows,
+    });
     if (!result.ok) {
       setError(result.error);
       return false;
     }
     const normalized = JSON.stringify(result.dsl, null, 2);
+    if (normalized === initial) {
+      textRef.current = normalized;
+      setText(normalized);
+      setError(null);
+      onDirtyChange?.(false);
+      return true;
+    }
+    textRef.current = normalized;
     setText(normalized);
     setError(null);
+    onDirtyChange?.(false);
     onApply?.(result.dsl);
     return true;
-  }
+  }, [
+    callableWorkflows,
+    initial,
+    nodeTypes,
+    onApply,
+    onDirtyChange,
+    referencedConfigs,
+  ]);
 
-  async function handleCopy() {
-    const ok = await copyToClipboard(text);
+  const handleCopy = useCallback(async () => {
+    const ok = await copyToClipboard(textRef.current);
     if (ok) {
       message.success('已复制到剪贴板');
     } else {
       message.error('复制失败，请手动选择文本复制');
     }
-  }
+  }, []);
 
   useImperativeHandle(
     ref,
     () => ({
       apply: handleApply,
       copy: handleCopy,
-      isDirty: () => text !== initial,
+      isDirty: () => normalizeDslText(textRef.current) !== initial,
       clear: () => {
+        if (autoApplyTimerRef.current !== undefined) {
+          clearTimeout(autoApplyTimerRef.current);
+          autoApplyTimerRef.current = undefined;
+        }
+        textRef.current = EMPTY_TEMPLATE;
         setText(EMPTY_TEMPLATE);
         setError(null);
+        onDirtyChange?.(EMPTY_TEMPLATE !== initial);
       },
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [text, initial, onApply],
+    [handleApply, handleCopy, initial, onDirtyChange],
   );
 
   return (
-    <div
-      style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: 0,
-        background: 'var(--ant-color-bg-container)',
-        padding: 16,
-      }}
-    >
-      {error && (
-        <Alert
-          type="error"
-          message={error}
-          showIcon
-          closable
-          onClose={() => setError(null)}
-          style={{ marginBottom: 8, flexShrink: 0 }}
+    <div className="workflow-dsl">
+      <div className="workflow-dsl__shell">
+        {error && (
+          <div className="workflow-dsl__error" role="alert">
+            <ExclamationCircleFilled />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <WorkflowCodeEditor
+          language="json"
+          value={text}
+          onChange={handleTextChange}
+          readOnly={readonly}
+          height="100%"
+          variant="plain"
+          wordWrap="off"
         />
-      )}
-
-      <TextArea
-        value={text}
-        onChange={(e) => handleTextChange(e.target.value)}
-        readOnly={readonly}
-        spellCheck={false}
-        autoSize={false}
-        style={{
-          flex: 1,
-          fontFamily:
-            'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-          fontSize: 13,
-          lineHeight: 1.5,
-          resize: 'none',
-        }}
-      />
+      </div>
     </div>
   );
 });
+
+function normalizeDslText(text: string): string | null {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return null;
+  }
+}
+
+function parseAndValidateDsl(
+  text: string,
+  options: {
+    nodeTypes?: WorkflowNodeType[];
+    referencedConfigs?: Record<string, Record<string, any>>;
+    callableWorkflows?: CallableWorkflowOption[];
+  },
+) {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch (error) {
+    return {
+      ok: false as const,
+      error: `JSON 解析失败：${
+        error instanceof Error ? error.message : String(error)
+      }`,
+    };
+  }
+  return validateWorkflowDsl(parsed, {
+    ...options,
+    validationMode: 'draft',
+  });
+}