= ({ report }) => {
+ const { status: nodeStatus } = report;
+ const [currentSnapshotIndex, setCurrentSnapshotIndex] = useState(0);
+
+ const snapshots = report.snapshots || [];
+ const currentSnapshot = snapshots[currentSnapshotIndex] || snapshots[0];
+
+ // 节点 5 个状态
+ const isNodePending = nodeStatus === WorkflowStatus.Pending;
+ const isNodeProcessing = nodeStatus === WorkflowStatus.Processing;
+ const isNodeFailed = nodeStatus === WorkflowStatus.Failed;
+ const isNodeSucceed = nodeStatus === WorkflowStatus.Succeeded;
+ const isNodeCanceled = nodeStatus === WorkflowStatus.Canceled;
+
+ const tagColor = useMemo(() => {
+ if (isNodeSucceed) {
+ return 'node-status-succeed';
+ }
+ if (isNodeFailed) {
+ return 'node-status-failed';
+ }
+ if (isNodeProcessing) {
+ return 'node-status-processing';
+ }
+ }, [isNodeSucceed, isNodeFailed, isNodeProcessing]);
+
+ const renderIcon = () => {
+ if (isNodeProcessing) {
+ return (
+
+ );
+ }
+ if (isNodeSucceed) {
+ return ;
+ }
+ return ;
+ };
+ const renderDesc = () => {
+ const getDesc = () => {
+ if (isNodeProcessing) {
+ return 'Running';
+ } else if (isNodePending) {
+ return 'Run terminated';
+ } else if (isNodeSucceed) {
+ return 'Succeed';
+ } else if (isNodeFailed) {
+ return 'Failed';
+ } else if (isNodeCanceled) {
+ return 'Canceled';
+ }
+ };
+
+ const desc = getDesc();
+
+ return desc ? {desc}
: null;
+ };
+ const renderCost = () => (
+
+ {msToSeconds(report.timeCost)}
+
+ );
+
+ const renderSnapshotNavigation = () => {
+ if (snapshots.length <= 1) {
+ return null;
+ }
+
+ const count = (
+
+ Total: {snapshots.length}
+
+ );
+
+ if (snapshots.length <= displayCount) {
+ return (
+ <>
+ {count}
+
+ {snapshots.map((_, index) => (
+
+ ))}
+
+
+ );
+ }
+
+ // 超过5个时，前5个显示为按钮，剩余的放在下拉选择中
+ return (
+ <>
+ {count}
+
+ {snapshots.slice(0, displayCount).map((_, index) => (
+
+ ))}
+
+
+
+ );
+ };
+
+ if (!report) {
+ return null;
+ }
+
+ return (
+
+ {renderIcon()}
+ {renderDesc()}
+ {renderCost()}
+
+ }
+ >
+
+ {renderSnapshotNavigation()}
+
+
+
+
+
+
+ );
+};
diff --git a/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.css b/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.css
new file mode 100644
index 00000000..72625e64
--- /dev/null
+++ b/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.css
@@ -0,0 +1,137 @@
+.node-status-data-structure-viewer {
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ font-size: 14px;
+ line-height: 1.5;
+ color: #333;
+ background: #fafafa;
+ border-radius: 6px;
+ padding: 12px 12px 12px 0;
+ margin: 12px;
+ border: 1px solid #e1e4e8;
+ overflow: hidden;
+}
+
+.tree-node {
+ margin: 2px 0;
+}
+
+.tree-node-header {
+ display: flex;
+ align-items: flex-start;
+ gap: 4px;
+ min-height: 20px;
+ padding: 2px 0;
+ border-radius: 3px;
+ transition: background-color 0.15s ease;
+}
+
+.tree-node-header:hover {
+ background-color: rgba(0, 0, 0, 0.04);
+}
+
+.expand-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 10px;
+ color: #666;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 2px;
+ transition: all 0.15s ease;
+ padding: 0;
+ margin: 0;
+}
+
+.expand-button:hover {
+ background-color: rgba(0, 0, 0, 0.1);
+ color: #333;
+}
+
+.expand-button.expanded {
+ transform: rotate(90deg);
+}
+
+.expand-button.collapsed {
+ transform: rotate(0deg);
+}
+
+.expand-placeholder {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ flex-shrink: 0;
+}
+
+.node-label {
+ color: #0969da;
+ font-weight: 500;
+ cursor: pointer;
+ user-select: auto;
+ margin-right: 4px;
+}
+
+.node-label:hover {
+ text-decoration: underline;
+}
+
+.node-value {
+ margin-left: 4px;
+}
+
+.primitive-value-quote {
+ color: #8f8f8f;
+}
+
+.primitive-value {
+ cursor: pointer;
+ user-select: all;
+ padding: 1px 3px;
+ border-radius: 3px;
+ transition: background-color 0.15s ease;
+}
+
+.primitive-value:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.primitive-value.string {
+ color: #032f62;
+ background-color: rgba(3, 47, 98, 0.05);
+}
+
+.primitive-value.number {
+ color: #005cc5;
+ background-color: rgba(0, 92, 197, 0.05);
+}
+
+.primitive-value.boolean {
+ color: #e36209;
+ background-color: rgba(227, 98, 9, 0.05);
+}
+
+.primitive-value.null,
+.primitive-value.undefined {
+ color: #6a737d;
+ font-style: italic;
+ background-color: rgba(106, 115, 125, 0.05);
+}
+
+.tree-node-children {
+ margin-left: 8px;
+ padding-left: 8px;
+ position: relative;
+}
+
+.tree-node-children::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: #e1e4e8;
+}
diff --git a/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.tsx b/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.tsx
new file mode 100644
index 00000000..10e319ac
--- /dev/null
+++ b/apps/demo-free-layout/src/components/testrun/node-status-bar/viewer/index.tsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+
+import './index.css';
+import { Toast } from '@douyinfe/semi-ui';
+
+interface DataStructureViewerProps {
+ data: any;
+ level?: number;
+}
+
+interface TreeNodeProps {
+ label: string;
+ value: any;
+ level: number;
+ isLast?: boolean;
+}
+
+const TreeNode: React.FC = ({ label, value, level, isLast = false }) => {
+ const [isExpanded, setIsExpanded] = useState(true);
+
+ const handleCopy = (text: string) => {
+ navigator.clipboard.writeText(text);
+ Toast.success('Copied');
+ };
+
+ const isExpandable = (val: any) =>
+ val !== null &&
+ typeof val === 'object' &&
+ ((Array.isArray(val) && val.length > 0) ||
+ (!Array.isArray(val) && Object.keys(val).length > 0));
+
+ const renderPrimitiveValue = (val: any) => {
+ if (val === null) return null;
+ if (val === undefined) return undefined;
+
+ switch (typeof val) {
+ case 'string':
+ return (
+
+ {'"'}
+ handleCopy(val)}>
+ {val}
+
+ {'"'}
+
+ );
+ case 'number':
+ return (
+ handleCopy(String(val))}>
+ {val}
+
+ );
+ case 'boolean':
+ return (
+ handleCopy(val.toString())}
+ >
+ {val.toString()}
+
+ );
+ default:
+ return (
+ handleCopy(String(val))}>
+ {String(val)}
+
+ );
+ }
+ };
+
+ const renderChildren = () => {
+ if (Array.isArray(value)) {
+ return value.map((item, index) => (
+
+ ));
+ } else {
+ const entries = Object.entries(value);
+ return entries.map(([key, val], index) => (
+
+ ));
+ }
+ };
+
+ return (
+
+
+ {isExpandable(value) ? (
+
+ ) : (
+
+ )}
+
+ handleCopy(
+ JSON.stringify({
+ [label]: value,
+ })
+ )
+ }
+ >
+ {label}
+
+ {!isExpandable(value) && {renderPrimitiveValue(value)}}
+
+ {isExpandable(value) && isExpanded && (
+
{renderChildren()}
+ )}
+
+
+
+ );
+ }
+
+ const entries = Object.entries(data);
+
+ return (
+
+ {entries.map(([key, value], index) => (
+
+ ))}
+
+ );
+};
diff --git a/apps/demo-free-layout/src/components/testrun/testrun-button/index.tsx b/apps/demo-free-layout/src/components/testrun/testrun-button/index.tsx
new file mode 100644
index 00000000..c838f39f
--- /dev/null
+++ b/apps/demo-free-layout/src/components/testrun/testrun-button/index.tsx
@@ -0,0 +1,78 @@
+import { useState, useEffect, useCallback } from 'react';
+
+import { useClientContext, getNodeForm, FlowNodeEntity } from '@flowgram.ai/free-layout-editor';
+import { Button, Badge, SideSheet } from '@douyinfe/semi-ui';
+import { IconPlay } from '@douyinfe/semi-icons';
+
+import { TestRunSideSheet } from '../testrun-sidesheet';
+
+export function TestRunButton(props: { disabled: boolean }) {
+ const [errorCount, setErrorCount] = useState(0);
+ const clientContext = useClientContext();
+ const [visible, setVisible] = useState(false);
+
+ const updateValidateData = useCallback(() => {
+ const allForms = clientContext.document.getAllNodes().map((node) => getNodeForm(node));
+ const count = allForms.filter((form) => form?.state.invalid).length;
+ setErrorCount(count);
+ }, [clientContext]);
+
+ /**
+ * Validate all node and Save
+ */
+ const onTestRun = useCallback(async () => {
+ const allForms = clientContext.document.getAllNodes().map((node) => getNodeForm(node));
+ await Promise.all(allForms.map(async (form) => form?.validate()));
+ console.log('>>>>> save data: ', clientContext.document.toJSON());
+ setVisible(true);
+ }, [clientContext]);
+
+ /**
+ * Listen single node validate
+ */
+ useEffect(() => {
+ const listenSingleNodeValidate = (node: FlowNodeEntity) => {
+ const form = getNodeForm(node);
+ if (form) {
+ const formValidateDispose = form.onValidate(() => updateValidateData());
+ node.onDispose(() => formValidateDispose.dispose());
+ }
+ };
+ clientContext.document.getAllNodes().map((node) => listenSingleNodeValidate(node));
+ const dispose = clientContext.document.onNodeCreate(({ node }) =>
+ listenSingleNodeValidate(node)
+ );
+ return () => dispose.dispose();
+ }, [clientContext]);
+
+ const button =
+ errorCount === 0 ? (
+ }
+ style={{ backgroundColor: 'rgba(0,178,60,1)', borderRadius: '8px', color: '#fff' }}
+ >
+ Test Run
+
+ ) : (
+
+ }
+ style={{ backgroundColor: 'rgba(255,115,0, 1)', borderRadius: '8px', color: '#fff' }}
+ >
+ Test Run
+
+
+ );
+
+ return (
+ <>
+ {button}
+ setVisible((v) => !v)} />
+
+ );
+}
diff --git a/apps/demo-free-layout/src/components/testrun/testrun-sidesheet/index.tsx b/apps/demo-free-layout/src/components/testrun/testrun-sidesheet/index.tsx
new file mode 100644
index 00000000..5b9dd297
--- /dev/null
+++ b/apps/demo-free-layout/src/components/testrun/testrun-sidesheet/index.tsx
@@ -0,0 +1,138 @@
+import { FC, useEffect, useState } from 'react';
+
+import { WorkflowInputs, WorkflowOutputs } from '@flowgram.ai/runtime-interface';
+import { useService } from '@flowgram.ai/free-layout-editor';
+import { Button, JsonViewer, SideSheet } from '@douyinfe/semi-ui';
+import { IconPlay, IconSpin, IconStop } from '@douyinfe/semi-icons';
+
+import { NodeStatusGroup } from '../node-status-bar/group';
+import { WorkflowRuntimeService } from '../../../plugins/runtime-plugin/runtime-service';
+
+interface TestRunSideSheetProps {
+ visible: boolean;
+ onCancel: () => void;
+}
+
+export const TestRunSideSheet: FC = ({ visible, onCancel }) => {
+ const runtimeService = useService(WorkflowRuntimeService);
+ const [isRunning, setRunning] = useState(false);
+ const [value, setValue] = useState(`{}`);
+ const [error, setError] = useState();
+ const [result, setResult] = useState<
+ | {
+ inputs: WorkflowInputs;
+ outputs: WorkflowOutputs;
+ }
+ | undefined
+ >();
+
+ const onTestRun = async () => {
+ if (isRunning) {
+ await runtimeService.taskCancel();
+ return;
+ }
+ setResult(undefined);
+ setError(undefined);
+ setRunning(true);
+ try {
+ await runtimeService.taskRun(value);
+ } catch (e: any) {
+ setError(e.message);
+ }
+ };
+
+ const onClose = async () => {
+ await runtimeService.taskCancel();
+ setValue(`{}`);
+ setRunning(false);
+ onCancel();
+ };
+
+ useEffect(() => {
+ const disposer = runtimeService.onTerminated(({ result }) => {
+ setRunning(false);
+ setResult(result);
+ });
+ return () => disposer.dispose();
+ }, []);
+
+ const renderRunning = (
+
+ );
+
+ const renderForm = (
+
+
+ Input
+
+
+
+ {error}
+
+
+
+
+