il y a 6 mois · 6873c75e21
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,15 @@
 
																+const { defineConfig } = require('@flowgram.ai/eslint-config');
															
 
																+
															
 
																+module.exports = defineConfig({
															
 
																+  preset: 'web',
															
 
																+  packageRoot: __dirname,
															
 
																+  rules: {
															
 
																+    'no-console': 'off',
															
 
																+    'react/prop-types': 'off',
															
 
																+  },
															
 
																+  settings: {
															
 
																+    react: {
															
 
																+      version: 'detect', // 自动检测 React 版本
															
 
																+    },
															
 
																+  },
															
 
																+});
															
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
																+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
															
 
																+
															
 
																+# dependencies
															
 
																+/node_modules
															
 
																+/.pnp
															
 
																+.pnp.js
															
 
																+
															
 
																+# testing
															
 
																+/coverage
															
 
																+
															
 
																+# production
															
 
																+/build
															
 
																+
															
 
																+# misc
															
 
																+.DS_Store
															
 
																+.env.local
															
 
																+.env.development.local
															
 
																+.env.test.local
															
 
																+.env.production.local
															
 
																+
															
 
																+npm-debug.log*
															
 
																+yarn-debug.log*
															
 
																+yarn-error.log*
															
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
 
																+<!DOCTYPE html>
															
 
																+<html lang="en" data-bundler="rspack">
															
 
																+  <head>
															
 
																+    <meta charset="UTF-8" />
															
 
																+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
															
 
																+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
															
 
																+    <title>四维时代_思维图</title>
															
 
																+  </head>
															
 
																+  <body>
															
 
																+    <div id="root"></div>
															
 
																+  </body>
															
 
																+</html>
															
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,67 @@
 
																+{
															
 
																+  "name": "@flowgram.ai/demo-free-layout",
															
 
																+  "version": "0.1.48",
															
 
																+  "description": "",
															
 
																+  "keywords": [],
															
 
																+  "license": "MIT",
															
 
																+  "main": "./src/index.ts",
															
 
																+  "files": [
															
 
																+    "src/",
															
 
																+    ".eslintrc.js",
															
 
																+    ".gitignore",
															
 
																+    "index.html",
															
 
																+    "package.json",
															
 
																+    "rsbuild.config.ts",
															
 
																+    "tsconfig.json"
															
 
																+  ],
															
 
																+  "dependencies": {
															
 
																+    "@douyinfe/semi-icons": "^2.80.0",
															
 
																+    "@douyinfe/semi-ui": "^2.80.0",
															
 
																+    "lodash-es": "^4.17.21",
															
 
																+    "nanoid": "^4.0.2",
															
 
																+    "react": "^18",
															
 
																+    "react-dom": "^18",
															
 
																+    "styled-components": "^5",
															
 
																+    "@flowgram.ai/runtime-interface": "0.2.9",
															
 
																+    "@flowgram.ai/free-layout-editor": "0.2.9",
															
 
																+    "@flowgram.ai/free-snap-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/free-lines-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/free-node-panel-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/minimap-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/free-container-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/free-group-plugin": "0.2.9",
															
 
																+    "@flowgram.ai/form-materials": "0.2.9",
															
 
																+    "@flowgram.ai/runtime-js": "0.2.9"
															
 
																+  },
															
 
																+  "devDependencies": {
															
 
																+    "@rsbuild/core": "^1.2.16",
															
 
																+    "@rsbuild/plugin-react": "^1.1.1",
															
 
																+    "@rsbuild/plugin-less": "^1.1.1",
															
 
																+    "@types/lodash-es": "^4.17.12",
															
 
																+    "@types/node": "^18",
															
 
																+    "@types/react": "^18",
															
 
																+    "@types/react-dom": "^18",
															
 
																+    "@types/styled-components": "^5",
															
 
																+    "eslint": "^8.54.0",
															
 
																+    "cross-env": "~7.0.3",
															
 
																+    "@flowgram.ai/ts-config": "0.2.9",
															
 
																+    "@flowgram.ai/eslint-config": "0.2.9"
															
 
																+  },
															
 
																+  "publishConfig": {
															
 
																+    "access": "public",
															
 
																+    "registry": "https://registry.npmjs.org/"
															
 
																+  },
															
 
																+  "scripts": {
															
 
																+    "build": "exit 0",
															
 
																+    "build:fast": "exit 0",
															
 
																+    "build:watch": "exit 0",
															
 
																+    "clean": "rimraf dist",
															
 
																+    "dev": "cross-env MODE=app NODE_ENV=development rsbuild dev --open",
															
 
																+    "lint": "eslint ./src --cache",
															
 
																+    "lint:fix": "eslint ./src --fix",
															
 
																+    "start": "cross-env NODE_ENV=development rsbuild dev --open",
															
 
																+    "test": "exit",
															
 
																+    "test:cov": "exit",
															
 
																+    "watch": "exit 0"
															
 
																+  }
															
 
																+}
															
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -0,0 +1,21 @@
 
																+import { pluginReact } from '@rsbuild/plugin-react';
															
 
																+import { pluginLess } from '@rsbuild/plugin-less';
															
 
																+import { defineConfig } from '@rsbuild/core';
															
 
																+
															
 
																+export default defineConfig({
															
 
																+  plugins: [pluginReact(), pluginLess()],
															
 
																+  source: {
															
 
																+    entry: {
															
 
																+      index: './src/app.tsx',
															
 
																+    },
															
 
																+    /**
															
 
																+     * support inversify @injectable() and @inject decorators
															
 
																+     */
															
 
																+    decorators: {
															
 
																+      version: 'legacy',
															
 
																+    },
															
 
																+  },
															
 
																+  html: {
															
 
																+    title: '四维时代_思维图',
															
 
																+  },
															
 
																+});
															
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -0,0 +1,7 @@
 
																+import { createRoot } from 'react-dom/client';
															
 
																+
															
 
																+import { Editor } from './editor';
															
 
																+
															
 
																+const app = createRoot(document.getElementById('root')!);
															
 
																+
															
 
																+app.render(<Editor />);
															
--- a/src/assets/icon-auto-layout.tsx
+++ b/src/assets/icon-auto-layout.tsx
--- a/src/assets/icon-comment.tsx
+++ b/src/assets/icon-comment.tsx
@@ -0,0 +1,19 @@
 
																+import { CSSProperties, FC } from 'react';
															
 
																+
															
 
																+interface IconCommentProps {
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const IconComment: FC<IconCommentProps> = ({ style }) => (
															
 
																+  <svg
															
 
																+    width="1em"
															
 
																+    height="1em"
															
 
																+    viewBox="0 0 24 24"
															
 
																+    fill="currentColor"
															
 
																+    xmlns="http://www.w3.org/2000/svg"
															
 
																+    style={style}
															
 
																+  >
															
 
																+    <path d="M6.5 9C5.94772 9 5.5 9.44772 5.5 10V11C5.5 11.5523 5.94772 12 6.5 12H7.5C8.05228 12 8.5 11.5523 8.5 11V10C8.5 9.44772 8.05228 9 7.5 9H6.5zM11.5 9C10.9477 9 10.5 9.44772 10.5 10V11C10.5 11.5523 10.9477 12 11.5 12H12.5C13.0523 12 13.5 11.5523 13.5 11V10C13.5 9.44772 13.0523 9 12.5 9H11.5zM15.5 10C15.5 9.44772 15.9477 9 16.5 9H17.5C18.0523 9 18.5 9.44772 18.5 10V11C18.5 11.5523 18.0523 12 17.5 12H16.5C15.9477 12 15.5 11.5523 15.5 11V10z"></path>
															
 
																+    <path d="M23 4C23 2.9 22.1 2 21 2H3C1.9 2 1 2.9 1 4V17.0111C1 18.0211 1.9 19.0111 3 19.0111H7.7586L10.4774 22C10.9822 22.5017 11.3166 22.6311 12 22.7009C12.414 22.707 13.0502 22.5093 13.5 22L16.2414 19.0111H21C22.1 19.0111 23 18.1111 23 17.0111V4ZM3 4H21V17.0111H15.5L12 20.6714L8.5 17.0111H3V4Z"></path>
															
 
																+  </svg>
															
 
																+);
															
--- a/src/assets/icon-condition.svg
+++ b/src/assets/icon-condition.svg
--- a/src/assets/icon-end.jpg
+++ b/src/assets/icon-end.jpg
--- a/src/assets/icon-llm.jpg
+++ b/src/assets/icon-llm.jpg
--- a/src/assets/icon-loop.jpg
+++ b/src/assets/icon-loop.jpg
--- a/src/assets/icon-minimap.tsx
+++ b/src/assets/icon-minimap.tsx
--- a/src/assets/icon-mouse.tsx
+++ b/src/assets/icon-mouse.tsx
--- a/src/assets/icon-pad.tsx
+++ b/src/assets/icon-pad.tsx
@@ -0,0 +1,51 @@
 
																+export function IconPad(props: { width?: number; height?: number }) {
															
 
																+  const { width, height } = props;
															
 
																+  return (
															
 
																+    <svg
															
 
																+      width={width || 48}
															
 
																+      height={height || 38}
															
 
																+      viewBox="0 0 48 38"
															
 
																+      fill="none"
															
 
																+      xmlns="http://www.w3.org/2000/svg"
															
 
																+    >
															
 
																+      <rect
															
 
																+        x="1.83317"
															
 
																+        y="1.49998"
															
 
																+        width="44.3333"
															
 
																+        height="35"
															
 
																+        rx="3.5"
															
 
																+        stroke="currentColor"
															
 
																+        strokeOpacity="0.8"
															
 
																+        strokeWidth="2.33333"
															
 
																+      />
															
 
																+      <path
															
 
																+        d="M14.6665 30.6667H33.3332"
															
 
																+        stroke="currentColor"
															
 
																+        strokeOpacity="0.8"
															
 
																+        strokeWidth="2.33333"
															
 
																+        strokeLinecap="round"
															
 
																+      />
															
 
																+    </svg>
															
 
																+  );
															
 
																+}
															
 
																+
															
 
																+export const IconPadTool = () => (
															
 
																+  <svg
															
 
																+    width="1em"
															
 
																+    height="1em"
															
 
																+    viewBox="0 0 24 24"
															
 
																+    fill="currentColor"
															
 
																+    xmlns="http://www.w3.org/2000/svg"
															
 
																+  >
															
 
																+    <path
															
 
																+      fillRule="evenodd"
															
 
																+      clipRule="evenodd"
															
 
																+      d="M20.8549 5H3.1451C3.06496 5 3 5.06496 3 5.1451V18.8549C3 18.935 3.06496 19 3.1451 19H20.8549C20.935 19 21 18.935 21 18.8549V5.1451C21 5.06496 20.935 5 20.8549 5ZM3.1451 3C1.96039 3 1 3.96039 1 5.1451V18.8549C1 20.0396 1.96039 21 3.1451 21H20.8549C22.0396 21 23 20.0396 23 18.8549V5.1451C23 3.96039 22.0396 3 20.8549 3H3.1451Z"
															
 
																+    ></path>
															
 
																+    <path
															
 
																+      fillRule="evenodd"
															
 
																+      clipRule="evenodd"
															
 
																+      d="M6.99991 16C6.99991 15.4477 7.44762 15 7.99991 15H15.9999C16.5522 15 16.9999 15.4477 16.9999 16C16.9999 16.5523 16.5522 17 15.9999 17H7.99991C7.44762 17 6.99991 16.5523 6.99991 16Z"
															
 
																+    ></path>
															
 
																+  </svg>
															
 
																+);
															
--- a/src/assets/icon-start.jpg
+++ b/src/assets/icon-start.jpg
--- a/src/assets/icon-switch-line.tsx
+++ b/src/assets/icon-switch-line.tsx
--- a/src/components/add-node/index.tsx
+++ b/src/components/add-node/index.tsx
@@ -0,0 +1,23 @@
 
																+import { Button } from '@douyinfe/semi-ui';
															
 
																+import { IconPlus } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { useAddNode } from './use-add-node';
															
 
																+
															
 
																+export const AddNode = (props: { disabled: boolean }) => {
															
 
																+  const addNode = useAddNode();
															
 
																+  return (
															
 
																+    <Button
															
 
																+      data-testid="demo.free-layout.add-node"
															
 
																+      icon={<IconPlus />}
															
 
																+      color="highlight"
															
 
																+      style={{ backgroundColor: 'rgba(171,181,255,0.3)', borderRadius: '8px' }}
															
 
																+      disabled={props.disabled}
															
 
																+      onClick={(e) => {
															
 
																+        const rect = e.currentTarget.getBoundingClientRect();
															
 
																+        addNode(rect);
															
 
																+      }}
															
 
																+    >
															
 
																+      Add Node
															
 
																+    </Button>
															
 
																+  );
															
 
																+};
															
--- a/src/components/add-node/use-add-node.ts
+++ b/src/components/add-node/use-add-node.ts
@@ -0,0 +1,85 @@
 
																+import { useCallback } from 'react';
															
 
																+
															
 
																+import { NodePanelResult, WorkflowNodePanelService } from '@flowgram.ai/free-node-panel-plugin';
															
 
																+import {
															
 
																+  useService,
															
 
																+  WorkflowDocument,
															
 
																+  usePlayground,
															
 
																+  PositionSchema,
															
 
																+  WorkflowNodeEntity,
															
 
																+  WorkflowSelectService,
															
 
																+  WorkflowNodeJSON,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+// hook to get panel position from mouse event - 从鼠标事件获取面板位置的 hook
															
 
																+const useGetPanelPosition = () => {
															
 
																+  const playground = usePlayground();
															
 
																+
															
 
																+  return useCallback(
															
 
																+    (targetBoundingRect: DOMRect): PositionSchema =>
															
 
																+      // convert mouse position to canvas position - 将鼠标位置转换为画布位置
															
 
																+      playground.config.getPosFromMouseEvent({
															
 
																+        clientX: targetBoundingRect.left + 64,
															
 
																+        clientY: targetBoundingRect.top - 7,
															
 
																+      }),
															
 
																+    [playground]
															
 
																+  );
															
 
																+};
															
 
																+
															
 
																+// hook to handle node selection - 处理节点选择的 hook
															
 
																+const useSelectNode = () => {
															
 
																+  const selectService = useService(WorkflowSelectService);
															
 
																+  return useCallback(
															
 
																+    (node?: WorkflowNodeEntity) => {
															
 
																+      if (!node) {
															
 
																+        return;
															
 
																+      }
															
 
																+      // select the target node - 选择目标节点
															
 
																+      selectService.selectNode(node);
															
 
																+    },
															
 
																+    [selectService]
															
 
																+  );
															
 
																+};
															
 
																+
															
 
																+// main hook for adding new nodes - 添加新节点的主 hook
															
 
																+export const useAddNode = () => {
															
 
																+  const workflowDocument = useService(WorkflowDocument);
															
 
																+  const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService);
															
 
																+  const playground = usePlayground();
															
 
																+  const getPanelPosition = useGetPanelPosition();
															
 
																+  const select = useSelectNode();
															
 
																+
															
 
																+  return useCallback(
															
 
																+    async (targetBoundingRect: DOMRect): Promise<void> => {
															
 
																+      // calculate panel position based on target element - 根据目标元素计算面板位置
															
 
																+      const panelPosition = getPanelPosition(targetBoundingRect);
															
 
																+      await new Promise<void>((resolve) => {
															
 
																+        // call the node panel service to show the panel - 调用节点面板服务来显示面板
															
 
																+        nodePanelService.callNodePanel({
															
 
																+          position: panelPosition,
															
 
																+          enableMultiAdd: true,
															
 
																+          panelProps: {},
															
 
																+          // handle node selection from panel - 处理从面板中选择节点
															
 
																+          onSelect: async (panelParams?: NodePanelResult) => {
															
 
																+            if (!panelParams) {
															
 
																+              return;
															
 
																+            }
															
 
																+            const { nodeType, nodeJSON } = panelParams;
															
 
																+            // create new workflow node based on selected type - 根据选择的类型创建新的工作流节点
															
 
																+            const node: WorkflowNodeEntity = workflowDocument.createWorkflowNodeByType(
															
 
																+              nodeType,
															
 
																+              undefined, // position undefined means create node in center of canvas - position undefined 可以在画布中间创建节点
															
 
																+              nodeJSON ?? ({} as WorkflowNodeJSON)
															
 
																+            );
															
 
																+            select(node); // select the newly created node - 选择新创建的节点
															
 
																+          },
															
 
																+          // handle panel close - 处理面板关闭
															
 
																+          onClose: () => {
															
 
																+            resolve();
															
 
																+          },
															
 
																+        });
															
 
																+      });
															
 
																+    },
															
 
																+    [getPanelPosition, nodePanelService, playground.config.zoom, workflowDocument, select]
															
 
																+  );
															
 
																+};
															
--- a/src/components/base-node/index.tsx
+++ b/src/components/base-node/index.tsx
@@ -0,0 +1,40 @@
 
																+import { useCallback } from 'react';
															
 
																+
															
 
																+import { FlowNodeEntity, useNodeRender } from '@flowgram.ai/free-layout-editor';
															
 
																+import { ConfigProvider } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { NodeStatusBar } from '../testrun/node-status-bar';
															
 
																+import { NodeRenderContext } from '../../context';
															
 
																+import { ErrorIcon } from './styles';
															
 
																+import { NodeWrapper } from './node-wrapper';
															
 
																+
															
 
																+export const BaseNode = ({ node }: { node: FlowNodeEntity }) => {
															
 
																+  /**
															
 
																+   * Provides methods related to node rendering
															
 
																+   * 提供节点渲染相关的方法
															
 
																+   */
															
 
																+  const nodeRender = useNodeRender();
															
 
																+  /**
															
 
																+   * It can only be used when nodeEngine is enabled
															
 
																+   * 只有在节点引擎开启时候才能使用表单
															
 
																+   */
															
 
																+  const form = nodeRender.form;
															
 
																+
															
 
																+  /**
															
 
																+   * Used to make the Tooltip scale with the node, which can be implemented by itself depending on the UI library
															
 
																+   * 用于让 Tooltip 跟随节点缩放, 这个可以根据不同的 ui 库自己实现
															
 
																+   */
															
 
																+  const getPopupContainer = useCallback(() => node.renderData.node || document.body, []);
															
 
																+
															
 
																+  return (
															
 
																+    <ConfigProvider getPopupContainer={getPopupContainer}>
															
 
																+      <NodeRenderContext.Provider value={nodeRender}>
															
 
																+        <NodeWrapper>
															
 
																+          {form?.state.invalid && <ErrorIcon />}
															
 
																+          {form?.render()}
															
 
																+        </NodeWrapper>
															
 
																+        <NodeStatusBar />
															
 
																+      </NodeRenderContext.Provider>
															
 
																+    </ConfigProvider>
															
 
																+  );
															
 
																+};
															
--- a/src/components/base-node/node-wrapper.tsx
+++ b/src/components/base-node/node-wrapper.tsx
@@ -0,0 +1,65 @@
 
																+import React, { useState, useContext } from 'react';
															
 
																+
															
 
																+import { WorkflowPortRender } from '@flowgram.ai/free-layout-editor';
															
 
																+import { useClientContext } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { useNodeRenderContext } from '../../hooks';
															
 
																+import { SidebarContext } from '../../context';
															
 
																+import { scrollToView } from './utils';
															
 
																+import { NodeWrapperStyle } from './styles';
															
 
																+
															
 
																+export interface NodeWrapperProps {
															
 
																+  isScrollToView?: boolean;
															
 
																+  children: React.ReactNode;
															
 
																+}
															
 
																+
															
 
																+/**
															
 
																+ * Used for drag-and-drop/click events and ports rendering of nodes
															
 
																+ * 用于节点的拖拽/点击事件和点位渲染
															
 
																+ */
															
 
																+export const NodeWrapper: React.FC<NodeWrapperProps> = (props) => {
															
 
																+  const { children, isScrollToView = false } = props;
															
 
																+  const nodeRender = useNodeRenderContext();
															
 
																+  const { selected, startDrag, ports, selectNode, nodeRef, onFocus, onBlur } = nodeRender;
															
 
																+  const [isDragging, setIsDragging] = useState(false);
															
 
																+  const sidebar = useContext(SidebarContext);
															
 
																+  const form = nodeRender.form;
															
 
																+  const ctx = useClientContext();
															
 
																+
															
 
																+  const portsRender = ports.map((p) => <WorkflowPortRender key={p.id} entity={p} />);
															
 
																+
															
 
																+  return (
															
 
																+    <>
															
 
																+      <NodeWrapperStyle
															
 
																+        className={selected ? 'selected' : ''}
															
 
																+        ref={nodeRef}
															
 
																+        draggable
															
 
																+        onDragStart={(e) => {
															
 
																+          startDrag(e);
															
 
																+          setIsDragging(true);
															
 
																+        }}
															
 
																+        onClick={(e) => {
															
 
																+          selectNode(e);
															
 
																+          if (!isDragging) {
															
 
																+            sidebar.setNodeId(nodeRender.node.id);
															
 
																+            // 可选：将 isScrollToView 设为 true，可以让节点选中后滚动到画布中间
															
 
																+            // Optional: Set isScrollToView to true to scroll the node to the center of the canvas after it is selected.
															
 
																+            if (isScrollToView) {
															
 
																+              scrollToView(ctx, nodeRender.node);
															
 
																+            }
															
 
																+          }
															
 
																+        }}
															
 
																+        onMouseUp={() => setIsDragging(false)}
															
 
																+        onFocus={onFocus}
															
 
																+        onBlur={onBlur}
															
 
																+        data-node-selected={String(selected)}
															
 
																+        style={{
															
 
																+          outline: form?.state.invalid ? '1px solid red' : 'none',
															
 
																+        }}
															
 
																+      >
															
 
																+        {children}
															
 
																+      </NodeWrapperStyle>
															
 
																+      {portsRender}
															
 
																+    </>
															
 
																+  );
															
 
																+};
															
--- a/src/components/base-node/styles.tsx
+++ b/src/components/base-node/styles.tsx
@@ -0,0 +1,35 @@
 
																+import styled from 'styled-components';
															
 
																+import { IconInfoCircle } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+export const NodeWrapperStyle = styled.div`
															
 
																+  align-items: flex-start;
															
 
																+  background-color: #fff;
															
 
																+  border: 1px solid rgba(6, 7, 9, 0.15);
															
 
																+  border-radius: 8px;
															
 
																+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02);
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  justify-content: center;
															
 
																+  position: relative;
															
 
																+  min-width: 360px;
															
 
																+  width: 100%;
															
 
																+  height: auto;
															
 
																+
															
 
																+  &.selected {
															
 
																+    border: 1px solid #4e40e5;
															
 
																+  }
															
 
																+`;
															
 
																+
															
 
																+export const ErrorIcon = () => (
															
 
																+  <IconInfoCircle
															
 
																+    style={{
															
 
																+      position: 'absolute',
															
 
																+      color: 'red',
															
 
																+      left: -6,
															
 
																+      top: -6,
															
 
																+      zIndex: 1,
															
 
																+      background: 'white',
															
 
																+      borderRadius: 8,
															
 
																+    }}
															
 
																+  />
															
 
																+);
															
--- a/src/components/base-node/utils.ts
+++ b/src/components/base-node/utils.ts
@@ -0,0 +1,18 @@
 
																+import { FreeLayoutPluginContext, FlowNodeEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+export function scrollToView(
															
 
																+  ctx: FreeLayoutPluginContext,
															
 
																+  node: FlowNodeEntity,
															
 
																+  sidebarWidth = 448
															
 
																+) {
															
 
																+  const bounds = node.transform.bounds;
															
 
																+  ctx.playground.scrollToView({
															
 
																+    bounds,
															
 
																+    scrollDelta: {
															
 
																+      x: sidebarWidth / 2,
															
 
																+      y: 0,
															
 
																+    },
															
 
																+    zoom: 1,
															
 
																+    scrollToCenter: true,
															
 
																+  });
															
 
																+}
															
--- a/src/components/comment/components/blank-area.tsx
+++ b/src/components/comment/components/blank-area.tsx
@@ -0,0 +1,43 @@
 
																+import type { FC } from 'react';
															
 
																+
															
 
																+import { useNodeRender, usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import type { CommentEditorModel } from '../model';
															
 
																+import { DragArea } from './drag-area';
															
 
																+
															
 
																+interface IBlankArea {
															
 
																+  model: CommentEditorModel;
															
 
																+}
															
 
																+
															
 
																+export const BlankArea: FC<IBlankArea> = (props) => {
															
 
																+  const { model } = props;
															
 
																+  const playground = usePlayground();
															
 
																+  const { selectNode } = useNodeRender();
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment-blank-area h-full w-full"
															
 
																+      onMouseDown={(e) => {
															
 
																+        e.preventDefault();
															
 
																+        e.stopPropagation();
															
 
																+        model.setFocus(false);
															
 
																+        selectNode(e);
															
 
																+        playground.node.focus(); // 防止节点无法被删除
															
 
																+      }}
															
 
																+      onClick={(e) => {
															
 
																+        model.setFocus(true);
															
 
																+        model.selectEnd();
															
 
																+      }}
															
 
																+    >
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'relative',
															
 
																+          width: '100%',
															
 
																+          height: '100%',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        stopEvent={false}
															
 
																+      />
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/border-area.tsx
+++ b/src/components/comment/components/border-area.tsx
@@ -0,0 +1,115 @@
 
																+import { type FC } from 'react';
															
 
																+
															
 
																+import type { CommentEditorModel } from '../model';
															
 
																+import { ResizeArea } from './resize-area';
															
 
																+import { DragArea } from './drag-area';
															
 
																+
															
 
																+interface IBorderArea {
															
 
																+  model: CommentEditorModel;
															
 
																+  overflow: boolean;
															
 
																+  onResize?: () => {
															
 
																+    resizing: (delta: { top: number; right: number; bottom: number; left: number }) => void;
															
 
																+    resizeEnd: () => void;
															
 
																+  };
															
 
																+}
															
 
																+
															
 
																+export const BorderArea: FC<IBorderArea> = (props) => {
															
 
																+  const { model, overflow, onResize } = props;
															
 
																+
															
 
																+  return (
															
 
																+    <div style={{ zIndex: 999 }}>
															
 
																+      {/* 左边 */}
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          left: -10,
															
 
																+          top: 10,
															
 
																+          width: 20,
															
 
																+          height: 'calc(100% - 20px)',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+      />
															
 
																+      {/* 右边 */}
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          right: -10,
															
 
																+          top: 10,
															
 
																+          height: 'calc(100% - 20px)',
															
 
																+          width: overflow ? 10 : 20, // 防止遮挡滚动条
															
 
																+        }}
															
 
																+        model={model}
															
 
																+      />
															
 
																+      {/* 上边 */}
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          top: -10,
															
 
																+          left: 10,
															
 
																+          width: 'calc(100% - 20px)',
															
 
																+          height: 20,
															
 
																+        }}
															
 
																+        model={model}
															
 
																+      />
															
 
																+      {/* 下边 */}
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          bottom: -10,
															
 
																+          left: 10,
															
 
																+          width: 'calc(100% - 20px)',
															
 
																+          height: 20,
															
 
																+        }}
															
 
																+        model={model}
															
 
																+      />
															
 
																+      {/** 左上角 */}
															
 
																+      <ResizeArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          left: 0,
															
 
																+          top: 0,
															
 
																+          cursor: 'nwse-resize',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        getDelta={({ x, y }) => ({ top: y, right: 0, bottom: 0, left: x })}
															
 
																+        onResize={onResize}
															
 
																+      />
															
 
																+      {/** 右上角 */}
															
 
																+      <ResizeArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          right: 0,
															
 
																+          top: 0,
															
 
																+          cursor: 'nesw-resize',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        getDelta={({ x, y }) => ({ top: y, right: x, bottom: 0, left: 0 })}
															
 
																+        onResize={onResize}
															
 
																+      />
															
 
																+      {/** 右下角 */}
															
 
																+      <ResizeArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          right: 0,
															
 
																+          bottom: 0,
															
 
																+          cursor: 'nwse-resize',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        getDelta={({ x, y }) => ({ top: 0, right: x, bottom: y, left: 0 })}
															
 
																+        onResize={onResize}
															
 
																+      />
															
 
																+      {/** 左下角 */}
															
 
																+      <ResizeArea
															
 
																+        style={{
															
 
																+          position: 'absolute',
															
 
																+          left: 0,
															
 
																+          bottom: 0,
															
 
																+          cursor: 'nesw-resize',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        getDelta={({ x, y }) => ({ top: 0, right: 0, bottom: y, left: x })}
															
 
																+        onResize={onResize}
															
 
																+      />
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/container.tsx
+++ b/src/components/comment/components/container.tsx
@@ -0,0 +1,45 @@
 
																+import type { ReactNode, FC, CSSProperties } from 'react';
															
 
																+
															
 
																+interface ICommentContainer {
															
 
																+  focused: boolean;
															
 
																+  children?: ReactNode;
															
 
																+  style?: React.CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const CommentContainer: FC<ICommentContainer> = (props) => {
															
 
																+  const { focused, children, style } = props;
															
 
																+
															
 
																+  const scrollbarStyle = {
															
 
																+    // 滚动条样式
															
 
																+    scrollbarWidth: 'thin',
															
 
																+    scrollbarColor: 'rgb(159 159 158 / 65%) transparent',
															
 
																+    // 针对 WebKit 浏览器（如 Chrome、Safari）的样式
															
 
																+    '&:WebkitScrollbar': {
															
 
																+      width: '4px',
															
 
																+    },
															
 
																+    '&::WebkitScrollbarTrack': {
															
 
																+      background: 'transparent',
															
 
																+    },
															
 
																+    '&::WebkitScrollbarThumb': {
															
 
																+      backgroundColor: 'rgb(159 159 158 / 65%)',
															
 
																+      borderRadius: '20px',
															
 
																+      border: '2px solid transparent',
															
 
																+    },
															
 
																+  } as unknown as CSSProperties;
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment-container"
															
 
																+      data-flow-editor-selectable="false"
															
 
																+      style={{
															
 
																+        // tailwind 不支持 outline 的样式，所以这里需要使用 style 来设置
															
 
																+        outline: focused ? '1px solid #FF811A' : '1px solid #F2B600',
															
 
																+        backgroundColor: focused ? '#FFF3EA' : '#FFFBED',
															
 
																+        ...scrollbarStyle,
															
 
																+        ...style,
															
 
																+      }}
															
 
																+    >
															
 
																+      {children}
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/content-drag-area.tsx
+++ b/src/components/comment/components/content-drag-area.tsx
@@ -0,0 +1,89 @@
 
																+import { type FC, useState, useEffect, type WheelEventHandler } from 'react';
															
 
																+
															
 
																+import { useNodeRender, usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import type { CommentEditorModel } from '../model';
															
 
																+import { DragArea } from './drag-area';
															
 
																+
															
 
																+interface IContentDragArea {
															
 
																+  model: CommentEditorModel;
															
 
																+  focused: boolean;
															
 
																+  overflow: boolean;
															
 
																+}
															
 
																+
															
 
																+export const ContentDragArea: FC<IContentDragArea> = (props) => {
															
 
																+  const { model, focused, overflow } = props;
															
 
																+  const playground = usePlayground();
															
 
																+  const { selectNode } = useNodeRender();
															
 
																+
															
 
																+  const [active, setActive] = useState(false);
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    // 当编辑器失去焦点时，取消激活状态
															
 
																+    if (!focused) {
															
 
																+      setActive(false);
															
 
																+    }
															
 
																+  }, [focused]);
															
 
																+
															
 
																+  const handleWheel: WheelEventHandler<HTMLDivElement> = (e) => {
															
 
																+    const editorElement = model.element;
															
 
																+    if (active || !overflow || !editorElement) {
															
 
																+      return;
															
 
																+    }
															
 
																+    e.stopPropagation();
															
 
																+    const maxScroll = editorElement.scrollHeight - editorElement.clientHeight;
															
 
																+    const newScrollTop = Math.min(Math.max(editorElement.scrollTop + e.deltaY, 0), maxScroll);
															
 
																+    editorElement.scroll(0, newScrollTop);
															
 
																+  };
															
 
																+
															
 
																+  const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
															
 
																+    if (active) {
															
 
																+      return;
															
 
																+    }
															
 
																+    mouseDownEvent.preventDefault();
															
 
																+    mouseDownEvent.stopPropagation();
															
 
																+    model.setFocus(false);
															
 
																+    selectNode(mouseDownEvent);
															
 
																+    playground.node.focus(); // 防止节点无法被删除
															
 
																+
															
 
																+    const startX = mouseDownEvent.clientX;
															
 
																+    const startY = mouseDownEvent.clientY;
															
 
																+
															
 
																+    const handleMouseUp = (mouseMoveEvent: MouseEvent) => {
															
 
																+      const deltaX = mouseMoveEvent.clientX - startX;
															
 
																+      const deltaY = mouseMoveEvent.clientY - startY;
															
 
																+      // 判断是拖拽还是点击
															
 
																+      const delta = 5;
															
 
																+      if (Math.abs(deltaX) < delta && Math.abs(deltaY) < delta) {
															
 
																+        // 点击后隐藏
															
 
																+        setActive(true);
															
 
																+      }
															
 
																+      document.removeEventListener('mouseup', handleMouseUp);
															
 
																+      document.removeEventListener('click', handleMouseUp);
															
 
																+    };
															
 
																+
															
 
																+    document.addEventListener('mouseup', handleMouseUp);
															
 
																+    document.addEventListener('click', handleMouseUp);
															
 
																+  };
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment-content-drag-area"
															
 
																+      onMouseDown={handleMouseDown}
															
 
																+      onWheel={handleWheel}
															
 
																+      style={{
															
 
																+        display: active ? 'none' : undefined,
															
 
																+      }}
															
 
																+    >
															
 
																+      <DragArea
															
 
																+        style={{
															
 
																+          position: 'relative',
															
 
																+          width: '100%',
															
 
																+          height: '100%',
															
 
																+        }}
															
 
																+        model={model}
															
 
																+        stopEvent={false}
															
 
																+      />
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/drag-area.tsx
+++ b/src/components/comment/components/drag-area.tsx
@@ -0,0 +1,40 @@
 
																+import { CSSProperties, type FC } from 'react';
															
 
																+
															
 
																+import { useNodeRender, usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { type CommentEditorModel } from '../model';
															
 
																+
															
 
																+interface IDragArea {
															
 
																+  model: CommentEditorModel;
															
 
																+  stopEvent?: boolean;
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const DragArea: FC<IDragArea> = (props) => {
															
 
																+  const { model, stopEvent = true, style } = props;
															
 
																+
															
 
																+  const playground = usePlayground();
															
 
																+
															
 
																+  const { startDrag: onStartDrag, onFocus, onBlur, selectNode } = useNodeRender();
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment-drag-area"
															
 
																+      data-flow-editor-selectable="false"
															
 
																+      draggable={true}
															
 
																+      style={style}
															
 
																+      onMouseDown={(e) => {
															
 
																+        if (stopEvent) {
															
 
																+          e.preventDefault();
															
 
																+          e.stopPropagation();
															
 
																+        }
															
 
																+        model.setFocus(false);
															
 
																+        onStartDrag(e);
															
 
																+        selectNode(e);
															
 
																+        playground.node.focus(); // 防止节点无法被删除
															
 
																+      }}
															
 
																+      onFocus={onFocus}
															
 
																+      onBlur={onBlur}
															
 
																+    />
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/editor.tsx
+++ b/src/components/comment/components/editor.tsx
@@ -0,0 +1,60 @@
 
																+import { type FC, type CSSProperties, useEffect, useRef, useState, useMemo } from 'react';
															
 
																+
															
 
																+import { usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { CommentEditorModel } from '../model';
															
 
																+import { CommentEditorEvent } from '../constant';
															
 
																+
															
 
																+interface ICommentEditor {
															
 
																+  model: CommentEditorModel;
															
 
																+  style?: CSSProperties;
															
 
																+  value?: string;
															
 
																+  onChange?: (value: string) => void;
															
 
																+}
															
 
																+
															
 
																+export const CommentEditor: FC<ICommentEditor> = (props) => {
															
 
																+  const { model, style, onChange } = props;
															
 
																+  const playground = usePlayground();
															
 
																+  const editorRef = useRef<HTMLTextAreaElement | null>(null);
															
 
																+  const placeholder = model.value || model.focused ? undefined : 'Enter a comment...';
															
 
																+
															
 
																+  // 同步编辑器内部值变化
															
 
																+  useEffect(() => {
															
 
																+    const disposer = model.on((params) => {
															
 
																+      if (params.type !== CommentEditorEvent.Change) {
															
 
																+        return;
															
 
																+      }
															
 
																+      onChange?.(model.value);
															
 
																+    });
															
 
																+    return () => disposer.dispose();
															
 
																+  }, [model, onChange]);
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    if (!editorRef.current) {
															
 
																+      return;
															
 
																+    }
															
 
																+    model.element = editorRef.current;
															
 
																+  }, [editorRef]);
															
 
																+
															
 
																+  return (
															
 
																+    <div className="workflow-comment-editor">
															
 
																+      <p className="workflow-comment-editor-placeholder">{placeholder}</p>
															
 
																+      <textarea
															
 
																+        className="workflow-comment-editor-textarea"
															
 
																+        ref={editorRef}
															
 
																+        style={style}
															
 
																+        readOnly={playground.config.readonly}
															
 
																+        onChange={(e) => {
															
 
																+          const { value } = e.target;
															
 
																+          model.setValue(value);
															
 
																+        }}
															
 
																+        onFocus={() => {
															
 
																+          model.setFocus(true);
															
 
																+        }}
															
 
																+        onBlur={() => {
															
 
																+          model.setFocus(false);
															
 
																+        }}
															
 
																+      />
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/index.css
+++ b/src/components/comment/components/index.css
@@ -0,0 +1,103 @@
 
																+.workflow-comment {
															
 
																+    width: auto;
															
 
																+    height: auto;
															
 
																+    min-width: 120px;
															
 
																+    min-height: 80px;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-container {
															
 
																+    display: flex;
															
 
																+    flex-direction: column;
															
 
																+    align-items: flex-start;
															
 
																+    justify-content: flex-start;
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+    border-radius: 8px;
															
 
																+    outline: 1px solid;
															
 
																+    padding: 6px 2px 6px 10px;
															
 
																+    overflow: hidden;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-drag-area {
															
 
																+    position: absolute;
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+    justify-content: center;
															
 
																+    cursor: move;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-content-drag-area {
															
 
																+    position: absolute;
															
 
																+    height: 100%;
															
 
																+    width: calc(100% - 22px);
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-resize-area {
															
 
																+    position: absolute;
															
 
																+    width: 10px;
															
 
																+    height: 10px;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-editor {
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-editor-placeholder {
															
 
																+    margin: 0;
															
 
																+    position: absolute;
															
 
																+    pointer-events: none;
															
 
																+    color: rgba(55, 67, 106, 0.38);
															
 
																+    font-weight: 500;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-editor-textarea {
															
 
																+    width: 100%;
															
 
																+    height: 100%;
															
 
																+    box-sizing: border-box;
															
 
																+    appearance: none;
															
 
																+    border: none;
															
 
																+    margin: 0;
															
 
																+    padding: 0;
															
 
																+    width: 100%;
															
 
																+    background: none;
															
 
																+    color: inherit;
															
 
																+    font-family: inherit;
															
 
																+    font-size: 16px;
															
 
																+    resize: none;
															
 
																+    outline: none;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button {
															
 
																+    position: absolute;
															
 
																+    right: 6px;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button > .semi-button {
															
 
																+    color: rgba(255, 255, 255, 0);
															
 
																+    background: none;
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button > .semi-button:hover {
															
 
																+    color: #ffa100;
															
 
																+    background: #fbf2d2cc;
															
 
																+    backdrop-filter: blur(1px);
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button-focused > .semi-button:hover {
															
 
																+    color: #ff811a;
															
 
																+    background: #ffe3cecc;
															
 
																+    backdrop-filter: blur(1px);
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button > .semi-button:active {
															
 
																+    color: #f2b600;
															
 
																+    background: #ede5c7cc;
															
 
																+    backdrop-filter: blur(1px);
															
 
																+}
															
 
																+
															
 
																+.workflow-comment-more-button-focused > .semi-button:active {
															
 
																+    color: #ff811a;
															
 
																+    background: #eed5c1cc;
															
 
																+    backdrop-filter: blur(1px);
															
 
																+}
															
--- a/src/components/comment/components/index.ts
+++ b/src/components/comment/components/index.ts
@@ -0,0 +1,3 @@
 
																+import './index.css';
															
 
																+
															
 
																+export { CommentRender } from './render';
															
--- a/src/components/comment/components/more-button.tsx
+++ b/src/components/comment/components/more-button.tsx
@@ -0,0 +1,21 @@
 
																+import { FC } from 'react';
															
 
																+
															
 
																+import { WorkflowNodeEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { NodeMenu } from '../../node-menu';
															
 
																+
															
 
																+interface IMoreButton {
															
 
																+  node: WorkflowNodeEntity;
															
 
																+  focused: boolean;
															
 
																+  deleteNode: () => void;
															
 
																+}
															
 
																+
															
 
																+export const MoreButton: FC<IMoreButton> = ({ node, focused, deleteNode }) => (
															
 
																+  <div
															
 
																+    className={`workflow-comment-more-button ${
															
 
																+      focused ? 'workflow-comment-more-button-focused' : ''
															
 
																+    }`}
															
 
																+  >
															
 
																+    <NodeMenu node={node} deleteNode={deleteNode} />
															
 
																+  </div>
															
 
																+);
															
--- a/src/components/comment/components/render.tsx
+++ b/src/components/comment/components/render.tsx
@@ -0,0 +1,78 @@
 
																+import { FC } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  Field,
															
 
																+  FieldRenderProps,
															
 
																+  FlowNodeFormData,
															
 
																+  Form,
															
 
																+  FormModelV2,
															
 
																+  useNodeRender,
															
 
																+  WorkflowNodeEntity,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { useOverflow } from '../hooks/use-overflow';
															
 
																+import { useModel } from '../hooks/use-model';
															
 
																+import { useSize } from '../hooks';
															
 
																+import { CommentEditorFormField } from '../constant';
															
 
																+import { MoreButton } from './more-button';
															
 
																+import { CommentEditor } from './editor';
															
 
																+import { ContentDragArea } from './content-drag-area';
															
 
																+import { CommentContainer } from './container';
															
 
																+import { BorderArea } from './border-area';
															
 
																+
															
 
																+export const CommentRender: FC<{
															
 
																+  node: WorkflowNodeEntity;
															
 
																+}> = (props) => {
															
 
																+  const { node } = props;
															
 
																+  const model = useModel();
															
 
																+
															
 
																+  const { selected: focused, selectNode, nodeRef, deleteNode } = useNodeRender();
															
 
																+
															
 
																+  const formModel = node.getData(FlowNodeFormData).getFormModel<FormModelV2>();
															
 
																+  const formControl = formModel?.formControl;
															
 
																+
															
 
																+  const { width, height, onResize } = useSize();
															
 
																+  const { overflow, updateOverflow } = useOverflow({ model, height });
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment"
															
 
																+      style={{
															
 
																+        width,
															
 
																+        height,
															
 
																+      }}
															
 
																+      ref={nodeRef}
															
 
																+      data-node-selected={String(focused)}
															
 
																+      onMouseEnter={updateOverflow}
															
 
																+      onMouseDown={(e) => {
															
 
																+        setTimeout(() => {
															
 
																+          // 防止 selectNode 拦截事件，导致 slate 编辑器无法聚焦
															
 
																+          selectNode(e);
															
 
																+          // eslint-disable-next-line @typescript-eslint/no-magic-numbers -- delay
															
 
																+        }, 20);
															
 
																+      }}
															
 
																+    >
															
 
																+      <Form control={formControl}>
															
 
																+        <>
															
 
																+          {/* 背景 */}
															
 
																+          <CommentContainer focused={focused} style={{ height }}>
															
 
																+            <Field name={CommentEditorFormField.Note}>
															
 
																+              {({ field }: FieldRenderProps<string>) => (
															
 
																+                <>
															
 
																+                  {/** 编辑器 */}
															
 
																+                  <CommentEditor model={model} value={field.value} onChange={field.onChange} />
															
 
																+                  {/* 内容拖拽区域（点击后隐藏） */}
															
 
																+                  <ContentDragArea model={model} focused={focused} overflow={overflow} />
															
 
																+                  {/* 更多按钮 */}
															
 
																+                  <MoreButton node={node} focused={focused} deleteNode={deleteNode} />
															
 
																+                </>
															
 
																+              )}
															
 
																+            </Field>
															
 
																+          </CommentContainer>
															
 
																+          {/* 边框 */}
															
 
																+          <BorderArea model={model} overflow={overflow} onResize={onResize} />
															
 
																+        </>
															
 
																+      </Form>
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/components/resize-area.tsx
+++ b/src/components/comment/components/resize-area.tsx
@@ -0,0 +1,73 @@
 
																+import { CSSProperties, type FC } from 'react';
															
 
																+
															
 
																+import { useNodeRender, usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import type { CommentEditorModel } from '../model';
															
 
																+
															
 
																+interface IResizeArea {
															
 
																+  model: CommentEditorModel;
															
 
																+  onResize?: () => {
															
 
																+    resizing: (delta: { top: number; right: number; bottom: number; left: number }) => void;
															
 
																+    resizeEnd: () => void;
															
 
																+  };
															
 
																+  getDelta?: (delta: { x: number; y: number }) => {
															
 
																+    top: number;
															
 
																+    right: number;
															
 
																+    bottom: number;
															
 
																+    left: number;
															
 
																+  };
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const ResizeArea: FC<IResizeArea> = (props) => {
															
 
																+  const { model, onResize, getDelta, style } = props;
															
 
																+
															
 
																+  const playground = usePlayground();
															
 
																+
															
 
																+  const { selectNode } = useNodeRender();
															
 
																+
															
 
																+  const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
															
 
																+    mouseDownEvent.preventDefault();
															
 
																+    mouseDownEvent.stopPropagation();
															
 
																+    if (!onResize) {
															
 
																+      return;
															
 
																+    }
															
 
																+    const { resizing, resizeEnd } = onResize();
															
 
																+    model.setFocus(false);
															
 
																+    selectNode(mouseDownEvent);
															
 
																+    playground.node.focus(); // 防止节点无法被删除
															
 
																+
															
 
																+    const startX = mouseDownEvent.clientX;
															
 
																+    const startY = mouseDownEvent.clientY;
															
 
																+
															
 
																+    const handleMouseMove = (mouseMoveEvent: MouseEvent) => {
															
 
																+      const deltaX = mouseMoveEvent.clientX - startX;
															
 
																+      const deltaY = mouseMoveEvent.clientY - startY;
															
 
																+      const delta = getDelta?.({ x: deltaX, y: deltaY });
															
 
																+      if (!delta || !resizing) {
															
 
																+        return;
															
 
																+      }
															
 
																+      resizing(delta);
															
 
																+    };
															
 
																+
															
 
																+    const handleMouseUp = () => {
															
 
																+      resizeEnd();
															
 
																+      document.removeEventListener('mousemove', handleMouseMove);
															
 
																+      document.removeEventListener('mouseup', handleMouseUp);
															
 
																+      document.removeEventListener('click', handleMouseUp);
															
 
																+    };
															
 
																+
															
 
																+    document.addEventListener('mousemove', handleMouseMove);
															
 
																+    document.addEventListener('mouseup', handleMouseUp);
															
 
																+    document.addEventListener('click', handleMouseUp);
															
 
																+  };
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-comment-resize-area"
															
 
																+      style={style}
															
 
																+      data-flow-editor-selectable="false"
															
 
																+      onMouseDown={handleMouseDown}
															
 
																+    />
															
 
																+  );
															
 
																+};
															
--- a/src/components/comment/constant.ts
+++ b/src/components/comment/constant.ts
@@ -0,0 +1,20 @@
 
																+/* eslint-disable @typescript-eslint/naming-convention -- enum */
															
 
																+
															
 
																+export enum CommentEditorFormField {
															
 
																+  Size = 'size',
															
 
																+  Note = 'note',
															
 
																+}
															
 
																+
															
 
																+/** 编辑器事件 */
															
 
																+export enum CommentEditorEvent {
															
 
																+  /** 内容变更事件 */
															
 
																+  Change = 'change',
															
 
																+  /** 多选事件 */
															
 
																+  MultiSelect = 'multiSelect',
															
 
																+  /** 单选事件 */
															
 
																+  Select = 'select',
															
 
																+  /** 失焦事件 */
															
 
																+  Blur = 'blur',
															
 
																+}
															
 
																+
															
 
																+export const CommentEditorDefaultValue = '';
															
--- a/src/components/comment/hooks/index.ts
+++ b/src/components/comment/hooks/index.ts
@@ -0,0 +1 @@
 
																+export { useSize } from './use-size';
															
--- a/src/components/comment/hooks/use-model.ts
+++ b/src/components/comment/hooks/use-model.ts
@@ -0,0 +1,50 @@
 
																+import { useEffect, useMemo } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  FlowNodeFormData,
															
 
																+  FormModelV2,
															
 
																+  useEntityFromContext,
															
 
																+  useNodeRender,
															
 
																+  WorkflowNodeEntity,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { CommentEditorModel } from '../model';
															
 
																+import { CommentEditorFormField } from '../constant';
															
 
																+
															
 
																+export const useModel = () => {
															
 
																+  const node = useEntityFromContext<WorkflowNodeEntity>();
															
 
																+  const { selected: focused } = useNodeRender();
															
 
																+
															
 
																+  const formModel = node.getData(FlowNodeFormData).getFormModel<FormModelV2>();
															
 
																+
															
 
																+  const model = useMemo(() => new CommentEditorModel(), []);
															
 
																+
															
 
																+  // 同步失焦状态
															
 
																+  useEffect(() => {
															
 
																+    if (focused) {
															
 
																+      return;
															
 
																+    }
															
 
																+    model.setFocus(focused);
															
 
																+  }, [focused, model]);
															
 
																+
															
 
																+  // 同步表单值初始化
															
 
																+  useEffect(() => {
															
 
																+    const value = formModel.getValueIn<string>(CommentEditorFormField.Note);
															
 
																+    model.setValue(value); // 设置初始值
															
 
																+    model.selectEnd(); // 设置初始化光标位置
															
 
																+  }, [formModel, model]);
															
 
																+
															
 
																+  // 同步表单外部值变化：undo/redo/协同
															
 
																+  useEffect(() => {
															
 
																+    const disposer = formModel.onFormValuesChange(({ name }) => {
															
 
																+      if (name !== CommentEditorFormField.Note) {
															
 
																+        return;
															
 
																+      }
															
 
																+      const value = formModel.getValueIn<string>(CommentEditorFormField.Note);
															
 
																+      model.setValue(value);
															
 
																+    });
															
 
																+    return () => disposer.dispose();
															
 
																+  }, [formModel, model]);
															
 
																+
															
 
																+  return model;
															
 
																+};
															
--- a/src/components/comment/hooks/use-overflow.ts
+++ b/src/components/comment/hooks/use-overflow.ts
@@ -0,0 +1,45 @@
 
																+import { useCallback, useState, useEffect } from 'react';
															
 
																+
															
 
																+import { usePlayground } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { CommentEditorModel } from '../model';
															
 
																+import { CommentEditorEvent } from '../constant';
															
 
																+
															
 
																+export const useOverflow = (params: { model: CommentEditorModel; height: number }) => {
															
 
																+  const { model, height } = params;
															
 
																+  const playground = usePlayground();
															
 
																+
															
 
																+  const [overflow, setOverflow] = useState(false);
															
 
																+
															
 
																+  const isOverflow = useCallback((): boolean => {
															
 
																+    if (!model.element) {
															
 
																+      return false;
															
 
																+    }
															
 
																+    return model.element.scrollHeight > model.element.clientHeight;
															
 
																+  }, [model, height, playground]);
															
 
																+
															
 
																+  // 更新 overflow
															
 
																+  const updateOverflow = useCallback(() => {
															
 
																+    setOverflow(isOverflow());
															
 
																+  }, [isOverflow]);
															
 
																+
															
 
																+  // 监听高度变化
															
 
																+  useEffect(() => {
															
 
																+    updateOverflow();
															
 
																+  }, [height, updateOverflow]);
															
 
																+
															
 
																+  // 监听 change 事件
															
 
																+  useEffect(() => {
															
 
																+    const changeDisposer = model.on((params) => {
															
 
																+      if (params.type !== CommentEditorEvent.Change) {
															
 
																+        return;
															
 
																+      }
															
 
																+      updateOverflow();
															
 
																+    });
															
 
																+    return () => {
															
 
																+      changeDisposer.dispose();
															
 
																+    };
															
 
																+  }, [model, updateOverflow]);
															
 
																+
															
 
																+  return { overflow, updateOverflow };
															
 
																+};
															
--- a/src/components/comment/hooks/use-size.ts
+++ b/src/components/comment/hooks/use-size.ts
@@ -0,0 +1,163 @@
 
																+import { useCallback, useEffect, useState } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  FlowNodeFormData,
															
 
																+  FormModelV2,
															
 
																+  FreeOperationType,
															
 
																+  HistoryService,
															
 
																+  TransformData,
															
 
																+  useCurrentEntity,
															
 
																+  usePlayground,
															
 
																+  useService,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { CommentEditorFormField } from '../constant';
															
 
																+
															
 
																+export const useSize = () => {
															
 
																+  const node = useCurrentEntity();
															
 
																+  const nodeMeta = node.getNodeMeta();
															
 
																+  const playground = usePlayground();
															
 
																+  const historyService = useService(HistoryService);
															
 
																+  const { size = { width: 240, height: 150 } } = nodeMeta;
															
 
																+  const transform = node.getData(TransformData);
															
 
																+  const formModel = node.getData(FlowNodeFormData).getFormModel<FormModelV2>();
															
 
																+  const formSize = formModel.getValueIn<{ width: number; height: number }>(
															
 
																+    CommentEditorFormField.Size
															
 
																+  );
															
 
																+
															
 
																+  const [width, setWidth] = useState(formSize?.width ?? size.width);
															
 
																+  const [height, setHeight] = useState(formSize?.height ?? size.height);
															
 
																+
															
 
																+  // 初始化表单值
															
 
																+  useEffect(() => {
															
 
																+    const initSize = formModel.getValueIn<{ width: number; height: number }>(
															
 
																+      CommentEditorFormField.Size
															
 
																+    );
															
 
																+    if (!initSize) {
															
 
																+      formModel.setValueIn(CommentEditorFormField.Size, {
															
 
																+        width,
															
 
																+        height,
															
 
																+      });
															
 
																+    }
															
 
																+  }, [formModel, width, height]);
															
 
																+
															
 
																+  // 同步表单外部值变化：初始化/undo/redo/协同
															
 
																+  useEffect(() => {
															
 
																+    const disposer = formModel.onFormValuesChange(({ name }) => {
															
 
																+      if (name !== CommentEditorFormField.Size) {
															
 
																+        return;
															
 
																+      }
															
 
																+      const newSize = formModel.getValueIn<{ width: number; height: number }>(
															
 
																+        CommentEditorFormField.Size
															
 
																+      );
															
 
																+      if (!newSize) {
															
 
																+        return;
															
 
																+      }
															
 
																+      setWidth(newSize.width);
															
 
																+      setHeight(newSize.height);
															
 
																+    });
															
 
																+    return () => disposer.dispose();
															
 
																+  }, [formModel]);
															
 
																+
															
 
																+  const onResize = useCallback(() => {
															
 
																+    const resizeState = {
															
 
																+      width,
															
 
																+      height,
															
 
																+      originalWidth: width,
															
 
																+      originalHeight: height,
															
 
																+      positionX: transform.position.x,
															
 
																+      positionY: transform.position.y,
															
 
																+      offsetX: 0,
															
 
																+      offsetY: 0,
															
 
																+    };
															
 
																+    const resizing = (delta: { top: number; right: number; bottom: number; left: number }) => {
															
 
																+      if (!resizeState) {
															
 
																+        return;
															
 
																+      }
															
 
																+
															
 
																+      const { zoom } = playground.config;
															
 
																+
															
 
																+      const top = delta.top / zoom;
															
 
																+      const right = delta.right / zoom;
															
 
																+      const bottom = delta.bottom / zoom;
															
 
																+      const left = delta.left / zoom;
															
 
																+
															
 
																+      const minWidth = 120;
															
 
																+      const minHeight = 80;
															
 
																+
															
 
																+      const newWidth = Math.max(minWidth, resizeState.originalWidth + right - left);
															
 
																+      const newHeight = Math.max(minHeight, resizeState.originalHeight + bottom - top);
															
 
																+
															
 
																+      // 如果宽度或高度小于最小值，则不更新偏移量
															
 
																+      const newOffsetX =
															
 
																+        (left > 0 || right < 0) && newWidth <= minWidth
															
 
																+          ? resizeState.offsetX
															
 
																+          : left / 2 + right / 2;
															
 
																+      const newOffsetY =
															
 
																+        (top > 0 || bottom < 0) && newHeight <= minHeight ? resizeState.offsetY : top;
															
 
																+
															
 
																+      const newPositionX = resizeState.positionX + newOffsetX;
															
 
																+      const newPositionY = resizeState.positionY + newOffsetY;
															
 
																+
															
 
																+      resizeState.width = newWidth;
															
 
																+      resizeState.height = newHeight;
															
 
																+      resizeState.offsetX = newOffsetX;
															
 
																+      resizeState.offsetY = newOffsetY;
															
 
																+
															
 
																+      // 更新状态
															
 
																+      setWidth(newWidth);
															
 
																+      setHeight(newHeight);
															
 
																+
															
 
																+      // 更新偏移量
															
 
																+      transform.update({
															
 
																+        position: {
															
 
																+          x: newPositionX,
															
 
																+          y: newPositionY,
															
 
																+        },
															
 
																+      });
															
 
																+    };
															
 
																+
															
 
																+    const resizeEnd = () => {
															
 
																+      historyService.transact(() => {
															
 
																+        historyService.pushOperation(
															
 
																+          {
															
 
																+            type: FreeOperationType.dragNodes,
															
 
																+            value: {
															
 
																+              ids: [node.id],
															
 
																+              value: [
															
 
																+                {
															
 
																+                  x: resizeState.positionX + resizeState.offsetX,
															
 
																+                  y: resizeState.positionY + resizeState.offsetY,
															
 
																+                },
															
 
																+              ],
															
 
																+              oldValue: [
															
 
																+                {
															
 
																+                  x: resizeState.positionX,
															
 
																+                  y: resizeState.positionY,
															
 
																+                },
															
 
																+              ],
															
 
																+            },
															
 
																+          },
															
 
																+          {
															
 
																+            noApply: true,
															
 
																+          }
															
 
																+        );
															
 
																+        formModel.setValueIn(CommentEditorFormField.Size, {
															
 
																+          width: resizeState.width,
															
 
																+          height: resizeState.height,
															
 
																+        });
															
 
																+      });
															
 
																+    };
															
 
																+
															
 
																+    return {
															
 
																+      resizing,
															
 
																+      resizeEnd,
															
 
																+    };
															
 
																+  }, [node, width, height, transform, playground, formModel, historyService]);
															
 
																+
															
 
																+  return {
															
 
																+    width,
															
 
																+    height,
															
 
																+    onResize,
															
 
																+  };
															
 
																+};
															
--- a/src/components/comment/index.ts
+++ b/src/components/comment/index.ts
@@ -0,0 +1 @@
 
																+export { CommentRender } from './components';
															
--- a/src/components/comment/model.ts
+++ b/src/components/comment/model.ts
@@ -0,0 +1,106 @@
 
																+import { Emitter } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { CommentEditorEventParams } from './type';
															
 
																+import { CommentEditorDefaultValue, CommentEditorEvent } from './constant';
															
 
																+
															
 
																+export class CommentEditorModel {
															
 
																+  private innerValue: string = CommentEditorDefaultValue;
															
 
																+
															
 
																+  private emitter: Emitter<CommentEditorEventParams> = new Emitter();
															
 
																+
															
 
																+  private editor: HTMLTextAreaElement;
															
 
																+
															
 
																+  /** 注册事件 */
															
 
																+  public on = this.emitter.event;
															
 
																+
															
 
																+  /** 获取当前值 */
															
 
																+  public get value(): string {
															
 
																+    return this.innerValue;
															
 
																+  }
															
 
																+
															
 
																+  /** 外部设置模型值 */
															
 
																+  public setValue(value: string = CommentEditorDefaultValue): void {
															
 
																+    if (!this.initialized) {
															
 
																+      return;
															
 
																+    }
															
 
																+    if (value === this.innerValue) {
															
 
																+      return;
															
 
																+    }
															
 
																+    this.innerValue = value;
															
 
																+    this.syncEditorValue();
															
 
																+    this.emitter.fire({
															
 
																+      type: CommentEditorEvent.Change,
															
 
																+      value: this.innerValue,
															
 
																+    });
															
 
																+  }
															
 
																+
															
 
																+  public set element(el: HTMLTextAreaElement) {
															
 
																+    if (this.initialized) {
															
 
																+      return;
															
 
																+    }
															
 
																+    this.editor = el;
															
 
																+  }
															
 
																+
															
 
																+  /** 获取编辑器 DOM 节点 */
															
 
																+  public get element(): HTMLTextAreaElement | null {
															
 
																+    return this.editor;
															
 
																+  }
															
 
																+
															
 
																+  /** 编辑器聚焦/失焦 */
															
 
																+  public setFocus(focused: boolean): void {
															
 
																+    if (!this.initialized) {
															
 
																+      return;
															
 
																+    }
															
 
																+    if (focused && !this.focused) {
															
 
																+      this.editor.focus();
															
 
																+    } else if (!focused && this.focused) {
															
 
																+      this.editor.blur();
															
 
																+      this.deselect();
															
 
																+      this.emitter.fire({
															
 
																+        type: CommentEditorEvent.Blur,
															
 
																+      });
															
 
																+    }
															
 
																+  }
															
 
																+
															
 
																+  /** 选择末尾 */
															
 
																+  public selectEnd(): void {
															
 
																+    if (!this.initialized) {
															
 
																+      return;
															
 
																+    }
															
 
																+    // 获取文本长度
															
 
																+    const length = this.editor.value.length;
															
 
																+    // 将选择范围设置为文本末尾(开始位置和结束位置都是文本长度)
															
 
																+    this.editor.setSelectionRange(length, length);
															
 
																+  }
															
 
																+
															
 
																+  /** 获取聚焦状态 */
															
 
																+  public get focused(): boolean {
															
 
																+    return document.activeElement === this.editor;
															
 
																+  }
															
 
																+
															
 
																+  /** 取消选择文本 */
															
 
																+  private deselect(): void {
															
 
																+    const selection: Selection | null = window.getSelection();
															
 
																+
															
 
																+    // 清除所有选择区域
															
 
																+    if (selection) {
															
 
																+      selection.removeAllRanges();
															
 
																+    }
															
 
																+  }
															
 
																+
															
 
																+  /** 是否初始化 */
															
 
																+  private get initialized(): boolean {
															
 
																+    return Boolean(this.editor);
															
 
																+  }
															
 
																+
															
 
																+  /**
															
 
																+   * 同步编辑器实例内容
															
 
																+   * > **NOTICE:** *为确保不影响性能，应仅在外部值变更导致编辑器值与模型值不一致时调用*
															
 
																+   */
															
 
																+  private syncEditorValue(): void {
															
 
																+    if (!this.initialized) {
															
 
																+      return;
															
 
																+    }
															
 
																+    this.editor.value = this.innerValue;
															
 
																+  }
															
 
																+}
															
--- a/src/components/comment/type.ts
+++ b/src/components/comment/type.ts
@@ -0,0 +1,24 @@
 
																+import type { CommentEditorEvent } from './constant';
															
 
																+
															
 
																+interface CommentEditorChangeEvent {
															
 
																+  type: CommentEditorEvent.Change;
															
 
																+  value: string;
															
 
																+}
															
 
																+
															
 
																+interface CommentEditorMultiSelectEvent {
															
 
																+  type: CommentEditorEvent.MultiSelect;
															
 
																+}
															
 
																+
															
 
																+interface CommentEditorSelectEvent {
															
 
																+  type: CommentEditorEvent.Select;
															
 
																+}
															
 
																+
															
 
																+interface CommentEditorBlurEvent {
															
 
																+  type: CommentEditorEvent.Blur;
															
 
																+}
															
 
																+
															
 
																+export type CommentEditorEventParams =
															
 
																+  | CommentEditorChangeEvent
															
 
																+  | CommentEditorMultiSelectEvent
															
 
																+  | CommentEditorSelectEvent
															
 
																+  | CommentEditorBlurEvent;
															
--- a/src/components/group/color.ts
+++ b/src/components/group/color.ts
@@ -0,0 +1,100 @@
 
																+type GroupColor = {
															
 
																+  '50': string;
															
 
																+  '300': string;
															
 
																+  '400': string;
															
 
																+};
															
 
																+
															
 
																+export const defaultColor = 'Blue';
															
 
																+
															
 
																+export const groupColors: Record<string, GroupColor> = {
															
 
																+  Red: {
															
 
																+    '50': '#fef2f2',
															
 
																+    '300': '#fca5a5',
															
 
																+    '400': '#f87171',
															
 
																+  },
															
 
																+  Orange: {
															
 
																+    '50': '#fff7ed',
															
 
																+    '300': '#fdba74',
															
 
																+    '400': '#fb923c',
															
 
																+  },
															
 
																+  Amber: {
															
 
																+    '50': '#fffbeb',
															
 
																+    '300': '#fcd34d',
															
 
																+    '400': '#fbbf24',
															
 
																+  },
															
 
																+  Yellow: {
															
 
																+    '50': '#fef9c3',
															
 
																+    '300': '#fde047',
															
 
																+    '400': '#facc15',
															
 
																+  },
															
 
																+  Lime: {
															
 
																+    '50': '#f7fee7',
															
 
																+    '300': '#bef264',
															
 
																+    '400': '#a3e635',
															
 
																+  },
															
 
																+  Green: {
															
 
																+    '50': '#f0fdf4',
															
 
																+    '300': '#86efac',
															
 
																+    '400': '#4ade80',
															
 
																+  },
															
 
																+  Emerald: {
															
 
																+    '50': '#ecfdf5',
															
 
																+    '300': '#6ee7b7',
															
 
																+    '400': '#34d399',
															
 
																+  },
															
 
																+  Teal: {
															
 
																+    '50': '#f0fdfa',
															
 
																+    '300': '#5eead4',
															
 
																+    '400': '#2dd4bf',
															
 
																+  },
															
 
																+  Cyan: {
															
 
																+    '50': '#ecfeff',
															
 
																+    '300': '#67e8f9',
															
 
																+    '400': '#22d3ee',
															
 
																+  },
															
 
																+  Sky: {
															
 
																+    '50': '#ecfeff',
															
 
																+    '300': '#7dd3fc',
															
 
																+    '400': '#38bdf8',
															
 
																+  },
															
 
																+  Blue: {
															
 
																+    '50': '#eff6ff',
															
 
																+    '300': '#93c5fd',
															
 
																+    '400': '#60a5fa',
															
 
																+  },
															
 
																+  Indigo: {
															
 
																+    '50': '#eef2ff',
															
 
																+    '300': '#a5b4fc',
															
 
																+    '400': '#818cf8',
															
 
																+  },
															
 
																+  Violet: {
															
 
																+    '50': '#f5f3ff',
															
 
																+    '300': '#c4b5fd',
															
 
																+    '400': '#a78bfa',
															
 
																+  },
															
 
																+  Purple: {
															
 
																+    '50': '#faf5ff',
															
 
																+    '300': '#d8b4fe',
															
 
																+    '400': '#c084fc',
															
 
																+  },
															
 
																+  Fuchsia: {
															
 
																+    '50': '#fdf4ff',
															
 
																+    '300': '#f0abfc',
															
 
																+    '400': '#e879f9',
															
 
																+  },
															
 
																+  Pink: {
															
 
																+    '50': '#fdf2f8',
															
 
																+    '300': '#f9a8d4',
															
 
																+    '400': '#f472b6',
															
 
																+  },
															
 
																+  Rose: {
															
 
																+    '50': '#fff1f2',
															
 
																+    '300': '#fda4af',
															
 
																+    '400': '#fb7185',
															
 
																+  },
															
 
																+  Gray: {
															
 
																+    '50': '#f9fafb',
															
 
																+    '300': '#d1d5db',
															
 
																+    '400': '#9ca3af',
															
 
																+  },
															
 
																+};
															
--- a/src/components/group/components/background.tsx
+++ b/src/components/group/components/background.tsx
@@ -0,0 +1,49 @@
 
																+import { CSSProperties, FC, useEffect } from 'react';
															
 
																+
															
 
																+import { useWatch, WorkflowNodeEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { GroupField } from '../constant';
															
 
																+import { defaultColor, groupColors } from '../color';
															
 
																+
															
 
																+interface GroupBackgroundProps {
															
 
																+  node: WorkflowNodeEntity;
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const GroupBackground: FC<GroupBackgroundProps> = ({ node, style }) => {
															
 
																+  const colorName = useWatch<string>(GroupField.Color) ?? defaultColor;
															
 
																+  const color = groupColors[colorName];
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    const styleElement = document.createElement('style');
															
 
																+
															
 
																+    // 使用独特的选择器
															
 
																+    const styleContent = `
															
 
																+      .workflow-group-render[data-group-id="${node.id}"] .workflow-group-background {
															
 
																+        border: 1px solid ${color['300']};
															
 
																+      }
															
 
																+
															
 
																+      .workflow-group-render.selected[data-group-id="${node.id}"] .workflow-group-background {
															
 
																+        border: 1px solid ${color['400']};
															
 
																+      }
															
 
																+    `;
															
 
																+
															
 
																+    styleElement.textContent = styleContent;
															
 
																+    document.head.appendChild(styleElement);
															
 
																+
															
 
																+    return () => {
															
 
																+      styleElement.remove();
															
 
																+    };
															
 
																+  }, [color]);
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-group-background"
															
 
																+      data-flow-editor-selectable="true"
															
 
																+      style={{
															
 
																+        ...style,
															
 
																+        backgroundColor: `${color['300']}29`,
															
 
																+      }}
															
 
																+    />
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/components/color.tsx
+++ b/src/components/group/components/color.tsx
@@ -0,0 +1,45 @@
 
																+import { FC } from 'react';
															
 
																+
															
 
																+import { Field } from '@flowgram.ai/free-layout-editor';
															
 
																+import { Popover, Tooltip } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { GroupField } from '../constant';
															
 
																+import { defaultColor, groupColors } from '../color';
															
 
																+
															
 
																+export const GroupColor: FC = () => (
															
 
																+  <Field<string> name={GroupField.Color}>
															
 
																+    {({ field }) => {
															
 
																+      const colorName = field.value ?? defaultColor;
															
 
																+      return (
															
 
																+        <Popover
															
 
																+          position="top"
															
 
																+          mouseLeaveDelay={300}
															
 
																+          content={
															
 
																+            <div className="workflow-group-color-palette">
															
 
																+              {Object.entries(groupColors).map(([name, color]) => (
															
 
																+                <Tooltip content={name} key={name} mouseEnterDelay={300}>
															
 
																+                  <span
															
 
																+                    className="workflow-group-color-item"
															
 
																+                    key={name}
															
 
																+                    style={{
															
 
																+                      backgroundColor: color['300'],
															
 
																+                      borderColor: name === colorName ? color['400'] : '#fff',
															
 
																+                    }}
															
 
																+                    onClick={() => field.onChange(name)}
															
 
																+                  />
															
 
																+                </Tooltip>
															
 
																+              ))}
															
 
																+            </div>
															
 
																+          }
															
 
																+        >
															
 
																+          <span
															
 
																+            className="workflow-group-color"
															
 
																+            style={{
															
 
																+              backgroundColor: groupColors[colorName]['300'],
															
 
																+            }}
															
 
																+          />
															
 
																+        </Popover>
															
 
																+      );
															
 
																+    }}
															
 
																+  </Field>
															
 
																+);
															
--- a/src/components/group/components/header.tsx
+++ b/src/components/group/components/header.tsx
@@ -0,0 +1,41 @@
 
																+import type { FC, ReactNode, MouseEvent, CSSProperties } from 'react';
															
 
																+
															
 
																+import { useWatch } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { GroupField } from '../constant';
															
 
																+import { defaultColor, groupColors } from '../color';
															
 
																+
															
 
																+interface GroupHeaderProps {
															
 
																+  onMouseDown: (e: MouseEvent) => void;
															
 
																+  onFocus: () => void;
															
 
																+  onBlur: () => void;
															
 
																+  children: ReactNode;
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const GroupHeader: FC<GroupHeaderProps> = ({
															
 
																+  onMouseDown,
															
 
																+  onFocus,
															
 
																+  onBlur,
															
 
																+  children,
															
 
																+  style,
															
 
																+}) => {
															
 
																+  const colorName = useWatch<string>(GroupField.Color) ?? defaultColor;
															
 
																+  const color = groupColors[colorName];
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="workflow-group-header"
															
 
																+      data-flow-editor-selectable="false"
															
 
																+      onMouseDown={onMouseDown}
															
 
																+      onFocus={onFocus}
															
 
																+      onBlur={onBlur}
															
 
																+      style={{
															
 
																+        ...style,
															
 
																+        backgroundColor: color['50'],
															
 
																+        borderColor: color['300'],
															
 
																+      }}
															
 
																+    >
															
 
																+      {children}
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/components/icon-group.tsx
+++ b/src/components/group/components/icon-group.tsx
--- a/src/components/group/components/index.ts
+++ b/src/components/group/components/index.ts
@@ -0,0 +1,2 @@
 
																+export { GroupNodeRender } from './node-render';
															
 
																+export { IconGroup } from './icon-group';
															
--- a/src/components/group/components/node-render.tsx
+++ b/src/components/group/components/node-render.tsx
@@ -0,0 +1,75 @@
 
																+import { useEffect } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  FlowNodeFormData,
															
 
																+  Form,
															
 
																+  FormModelV2,
															
 
																+  useNodeRender,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+import { useNodeSize } from '@flowgram.ai/free-container-plugin';
															
 
																+
															
 
																+import { HEADER_HEIGHT, HEADER_PADDING } from '../constant';
															
 
																+import { UngroupButton } from './ungroup';
															
 
																+import { GroupTools } from './tools';
															
 
																+import { GroupTips } from './tips';
															
 
																+import { GroupHeader } from './header';
															
 
																+import { GroupBackground } from './background';
															
 
																+
															
 
																+export const GroupNodeRender = () => {
															
 
																+  const { node, selected, selectNode, nodeRef, startDrag, onFocus, onBlur } = useNodeRender();
															
 
																+  const nodeSize = useNodeSize();
															
 
																+  const formModel = node.getData(FlowNodeFormData).getFormModel<FormModelV2>();
															
 
																+  const formControl = formModel?.formControl;
															
 
																+
															
 
																+  const { height, width } = nodeSize ?? {};
															
 
																+  const nodeHeight = height ?? 0;
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    // prevent lines in outside cannot be selected - 防止外层线条不可选中
															
 
																+    const element = node.renderData.node;
															
 
																+    element.style.pointerEvents = 'none';
															
 
																+  }, [node]);
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className={`workflow-group-render ${selected ? 'selected' : ''}`}
															
 
																+      ref={nodeRef}
															
 
																+      data-group-id={node.id}
															
 
																+      data-node-selected={String(selected)}
															
 
																+      onMouseDown={selectNode}
															
 
																+      onClick={(e) => {
															
 
																+        selectNode(e);
															
 
																+      }}
															
 
																+      style={{
															
 
																+        width,
															
 
																+        height,
															
 
																+      }}
															
 
																+    >
															
 
																+      <Form control={formControl}>
															
 
																+        <>
															
 
																+          <GroupHeader
															
 
																+            onMouseDown={(e) => {
															
 
																+              startDrag(e);
															
 
																+            }}
															
 
																+            onFocus={onFocus}
															
 
																+            onBlur={onBlur}
															
 
																+            style={{
															
 
																+              height: HEADER_HEIGHT,
															
 
																+            }}
															
 
																+          >
															
 
																+            <GroupTools />
															
 
																+          </GroupHeader>
															
 
																+          <GroupTips />
															
 
																+          <UngroupButton node={node} />
															
 
																+          <GroupBackground
															
 
																+            node={node}
															
 
																+            style={{
															
 
																+              top: HEADER_HEIGHT + HEADER_PADDING,
															
 
																+              height: nodeHeight - HEADER_HEIGHT - HEADER_PADDING,
															
 
																+            }}
															
 
																+          />
															
 
																+        </>
															
 
																+      </Form>
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/components/tips/global-store.ts
+++ b/src/components/group/components/tips/global-store.ts
@@ -0,0 +1,33 @@
 
																+/* eslint-disable @typescript-eslint/naming-convention -- no need */
															
 
																+
															
 
																+const STORAGE_KEY = 'workflow-move-into-group-tip-visible';
															
 
																+const STORAGE_VALUE = 'false';
															
 
																+
															
 
																+export class TipsGlobalStore {
															
 
																+  private static _instance?: TipsGlobalStore;
															
 
																+
															
 
																+  public static get instance(): TipsGlobalStore {
															
 
																+    if (!this._instance) {
															
 
																+      this._instance = new TipsGlobalStore();
															
 
																+    }
															
 
																+    return this._instance;
															
 
																+  }
															
 
																+
															
 
																+  private closed = false;
															
 
																+
															
 
																+  public isClosed(): boolean {
															
 
																+    return this.isCloseForever() || this.closed;
															
 
																+  }
															
 
																+
															
 
																+  public close(): void {
															
 
																+    this.closed = true;
															
 
																+  }
															
 
																+
															
 
																+  public isCloseForever(): boolean {
															
 
																+    return localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;
															
 
																+  }
															
 
																+
															
 
																+  public closeForever(): void {
															
 
																+    localStorage.setItem(STORAGE_KEY, STORAGE_VALUE);
															
 
																+  }
															
 
																+}
															
--- a/src/components/group/components/tips/icon-close.tsx
+++ b/src/components/group/components/tips/icon-close.tsx
@@ -0,0 +1,9 @@
 
																+export const IconClose = () => (
															
 
																+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
															
 
																+    <path
															
 
																+      fill="#060709"
															
 
																+      fillOpacity="0.5"
															
 
																+      d="M12.13 12.128a.5.5 0 0 0 .001-.706L8.71 8l3.422-3.423a.5.5 0 0 0-.001-.705.5.5 0 0 0-.706-.002L8.002 7.293 4.579 3.87a.5.5 0 0 0-.705.002.5.5 0 0 0-.002.705L7.295 8l-3.423 3.422a.5.5 0 0 0 .002.706c.195.195.51.197.705.001l3.423-3.422 3.422 3.422c.196.196.51.194.706-.001"
															
 
																+    ></path>
															
 
																+  </svg>
															
 
																+);
															
--- a/src/components/group/components/tips/index.tsx
+++ b/src/components/group/components/tips/index.tsx
@@ -0,0 +1,36 @@
 
																+import { useControlTips } from './use-control';
															
 
																+import { GroupTipsStyle } from './style';
															
 
																+import { isMacOS } from './is-mac-os';
															
 
																+import { IconClose } from './icon-close';
															
 
																+
															
 
																+export const GroupTips = () => {
															
 
																+  const { visible, close, closeForever } = useControlTips();
															
 
																+
															
 
																+  if (!visible) {
															
 
																+    return null;
															
 
																+  }
															
 
																+
															
 
																+  return (
															
 
																+    <GroupTipsStyle className={'workflow-group-tips'}>
															
 
																+      <div className="container">
															
 
																+        <div className="content">
															
 
																+          <p className="text">{`Hold ${isMacOS ? 'Cmd ⌘' : 'Ctrl'} to drag node out`}</p>
															
 
																+          <div
															
 
																+            className="space"
															
 
																+            style={{
															
 
																+              width: 0,
															
 
																+            }}
															
 
																+          />
															
 
																+        </div>
															
 
																+        <div className="actions">
															
 
																+          <p className="close-forever" onClick={closeForever}>
															
 
																+            Never Remind
															
 
																+          </p>
															
 
																+          <div className="close" onClick={close}>
															
 
																+            <IconClose />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </GroupTipsStyle>
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/components/tips/is-mac-os.ts
+++ b/src/components/group/components/tips/is-mac-os.ts
@@ -0,0 +1 @@
 
																+export const isMacOS = /(Macintosh|MacIntel|MacPPC|Mac68K|iPad)/.test(navigator.userAgent);
															
--- a/src/components/group/components/tips/style.ts
+++ b/src/components/group/components/tips/style.ts
@@ -0,0 +1,74 @@
 
																+import styled from 'styled-components';
															
 
																+
															
 
																+export const GroupTipsStyle = styled.div`
															
 
																+  position: absolute;
															
 
																+  top: 35px;
															
 
																+
															
 
																+  width: 100%;
															
 
																+  height: 28px;
															
 
																+  white-space: nowrap;
															
 
																+  pointer-events: auto;
															
 
																+
															
 
																+  .container {
															
 
																+    display: inline-flex;
															
 
																+    justify-content: center;
															
 
																+    height: 100%;
															
 
																+    width: 100%;
															
 
																+    background-color: rgb(255 255 255);
															
 
																+    border-radius: 8px 8px 0 0;
															
 
																+
															
 
																+    .content {
															
 
																+      overflow: hidden;
															
 
																+      display: inline-flex;
															
 
																+      align-items: center;
															
 
																+      justify-content: flex-start;
															
 
																+
															
 
																+      width: fit-content;
															
 
																+      height: 100%;
															
 
																+      padding: 0 12px;
															
 
																+
															
 
																+      .text {
															
 
																+        font-size: 14px;
															
 
																+        font-weight: 400;
															
 
																+        font-style: normal;
															
 
																+        line-height: 20px;
															
 
																+        color: rgba(15, 21, 40, 82%);
															
 
																+        text-overflow: ellipsis;
															
 
																+        margin: 0;
															
 
																+      }
															
 
																+
															
 
																+      .space {
															
 
																+        width: 128px;
															
 
																+      }
															
 
																+    }
															
 
																+
															
 
																+    .actions {
															
 
																+      display: flex;
															
 
																+      gap: 8px;
															
 
																+      align-items: center;
															
 
																+
															
 
																+      height: 28px;
															
 
																+      padding: 0 12px;
															
 
																+
															
 
																+      .close-forever {
															
 
																+        cursor: pointer;
															
 
																+
															
 
																+        padding: 0 3px;
															
 
																+
															
 
																+        font-size: 12px;
															
 
																+        font-weight: 400;
															
 
																+        font-style: normal;
															
 
																+        line-height: 12px;
															
 
																+        color: rgba(32, 41, 69, 62%);
															
 
																+        margin: 0;
															
 
																+      }
															
 
																+
															
 
																+      .close {
															
 
																+        display: flex;
															
 
																+        cursor: pointer;
															
 
																+        height: 100%;
															
 
																+        align-items: center;
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+`;
															
--- a/src/components/group/components/tips/use-control.ts
+++ b/src/components/group/components/tips/use-control.ts
@@ -0,0 +1,66 @@
 
																+import { useCallback, useEffect, useState } from 'react';
															
 
																+
															
 
																+import { useCurrentEntity, useService } from '@flowgram.ai/free-layout-editor';
															
 
																+import {
															
 
																+  NodeIntoContainerService,
															
 
																+  NodeIntoContainerType,
															
 
																+} from '@flowgram.ai/free-container-plugin';
															
 
																+
															
 
																+import { TipsGlobalStore } from './global-store';
															
 
																+
															
 
																+export const useControlTips = () => {
															
 
																+  const node = useCurrentEntity();
															
 
																+  const [visible, setVisible] = useState(false);
															
 
																+  const globalStore = TipsGlobalStore.instance;
															
 
																+
															
 
																+  const nodeIntoContainerService = useService<NodeIntoContainerService>(NodeIntoContainerService);
															
 
																+
															
 
																+  const show = useCallback(() => {
															
 
																+    if (globalStore.isClosed()) {
															
 
																+      return;
															
 
																+    }
															
 
																+
															
 
																+    setVisible(true);
															
 
																+  }, [globalStore]);
															
 
																+
															
 
																+  const close = useCallback(() => {
															
 
																+    globalStore.close();
															
 
																+    setVisible(false);
															
 
																+  }, [globalStore]);
															
 
																+
															
 
																+  const closeForever = useCallback(() => {
															
 
																+    globalStore.closeForever();
															
 
																+    close();
															
 
																+  }, [close, globalStore]);
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    // 监听移入
															
 
																+    const inDisposer = nodeIntoContainerService.on((e) => {
															
 
																+      if (e.type !== NodeIntoContainerType.In) {
															
 
																+        return;
															
 
																+      }
															
 
																+      if (e.targetContainer === node) {
															
 
																+        show();
															
 
																+      }
															
 
																+    });
															
 
																+    // 监听移出事件
															
 
																+    const outDisposer = nodeIntoContainerService.on((e) => {
															
 
																+      if (e.type !== NodeIntoContainerType.Out) {
															
 
																+        return;
															
 
																+      }
															
 
																+      if (e.sourceContainer === node && !node.blocks.length) {
															
 
																+        setVisible(false);
															
 
																+      }
															
 
																+    });
															
 
																+    return () => {
															
 
																+      inDisposer.dispose();
															
 
																+      outDisposer.dispose();
															
 
																+    };
															
 
																+  }, [nodeIntoContainerService, node, show, close, visible]);
															
 
																+
															
 
																+  return {
															
 
																+    visible,
															
 
																+    close,
															
 
																+    closeForever,
															
 
																+  };
															
 
																+};
															
--- a/src/components/group/components/title.tsx
+++ b/src/components/group/components/title.tsx
@@ -0,0 +1,33 @@
 
																+import { FC, useState } from 'react';
															
 
																+
															
 
																+import { Field } from '@flowgram.ai/free-layout-editor';
															
 
																+import { Input } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { GroupField } from '../constant';
															
 
																+
															
 
																+export const GroupTitle: FC = () => {
															
 
																+  const [inputting, setInputting] = useState(false);
															
 
																+  return (
															
 
																+    <Field<string> name={GroupField.Title}>
															
 
																+      {({ field }) =>
															
 
																+        inputting ? (
															
 
																+          <Input
															
 
																+            autoFocus
															
 
																+            className="workflow-group-title-input"
															
 
																+            size="small"
															
 
																+            value={field.value}
															
 
																+            onChange={field.onChange}
															
 
																+            onMouseDown={(e) => e.stopPropagation()}
															
 
																+            onBlur={() => setInputting(false)}
															
 
																+            draggable={false}
															
 
																+            onEnterPress={() => setInputting(false)}
															
 
																+          />
															
 
																+        ) : (
															
 
																+          <p className="workflow-group-title" onDoubleClick={() => setInputting(true)}>
															
 
																+            {field.value ?? 'Group'}
															
 
																+          </p>
															
 
																+        )
															
 
																+      }
															
 
																+    </Field>
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/components/tools.tsx
+++ b/src/components/group/components/tools.tsx
@@ -0,0 +1,14 @@
 
																+import { FC } from 'react';
															
 
																+
															
 
																+import { IconHandle } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { GroupTitle } from './title';
															
 
																+import { GroupColor } from './color';
															
 
																+
															
 
																+export const GroupTools: FC = () => (
															
 
																+  <div className="workflow-group-tools">
															
 
																+    <IconHandle className="workflow-group-tools-drag" />
															
 
																+    <GroupTitle />
															
 
																+    <GroupColor />
															
 
																+  </div>
															
 
																+);
															
--- a/src/components/group/components/ungroup.tsx
+++ b/src/components/group/components/ungroup.tsx
@@ -0,0 +1,31 @@
 
																+import { CSSProperties, FC } from 'react';
															
 
																+
															
 
																+import { CommandRegistry, useService, WorkflowNodeEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+import { WorkflowGroupCommand } from '@flowgram.ai/free-group-plugin';
															
 
																+import { Button, Tooltip } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { IconUngroup } from './icon-group';
															
 
																+
															
 
																+interface UngroupButtonProps {
															
 
																+  node: WorkflowNodeEntity;
															
 
																+  style?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const UngroupButton: FC<UngroupButtonProps> = ({ node, style }) => {
															
 
																+  const commandRegistry = useService(CommandRegistry);
															
 
																+  return (
															
 
																+    <Tooltip content="Ungroup">
															
 
																+      <div className="workflow-group-ungroup" style={style}>
															
 
																+        <Button
															
 
																+          icon={<IconUngroup size={14} />}
															
 
																+          style={{ height: 30, width: 30 }}
															
 
																+          theme="borderless"
															
 
																+          type="tertiary"
															
 
																+          onClick={() => {
															
 
																+            commandRegistry.executeCommand(WorkflowGroupCommand.Ungroup, node);
															
 
																+          }}
															
 
																+        />
															
 
																+      </div>
															
 
																+    </Tooltip>
															
 
																+  );
															
 
																+};
															
--- a/src/components/group/constant.ts
+++ b/src/components/group/constant.ts
@@ -0,0 +1,7 @@
 
																+export const HEADER_HEIGHT = 30;
															
 
																+export const HEADER_PADDING = 5;
															
 
																+
															
 
																+export enum GroupField {
															
 
																+  Title = 'title',
															
 
																+  Color = 'color',
															
 
																+}
															
--- a/src/components/group/index.css
+++ b/src/components/group/index.css
@@ -0,0 +1,109 @@
 
																+.workflow-group-render {
															
 
																+    border-radius: 8px;
															
 
																+    pointer-events: none;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-header {
															
 
																+    height: 30px;
															
 
																+    width: fit-content;
															
 
																+    background-color: #fefce8;
															
 
																+    border: 1px solid #facc15;
															
 
																+    border-radius: 8px;
															
 
																+    padding-right: 8px;
															
 
																+    pointer-events: auto;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-ungroup {
															
 
																+    display: flex;
															
 
																+    justify-content: center;
															
 
																+    align-items: center;
															
 
																+    height: 30px;
															
 
																+    width: 30px;
															
 
																+    position: absolute;
															
 
																+    top: 35px;
															
 
																+    right: 0;
															
 
																+    border-radius: 8px;
															
 
																+    cursor: pointer;
															
 
																+    pointer-events: auto;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-ungroup .semi-button {
															
 
																+    color: #9ca3af;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-ungroup:hover .semi-button {
															
 
																+    color: #374151;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-background {
															
 
																+    position: absolute;
															
 
																+    pointer-events: none;
															
 
																+    top: 0;
															
 
																+    background-color: #fddf4729;
															
 
																+    border: 1px solid #fde047;
															
 
																+    border-radius: 8px;
															
 
																+    width: 100%;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-render.selected .workflow-group-background {
															
 
																+    border: 1px solid #facc15;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-tools {
															
 
																+    display: flex;
															
 
																+    justify-content: flex-start;
															
 
																+    align-items: center;
															
 
																+    gap: 4px;
															
 
																+    height: 100%;
															
 
																+    cursor: move;
															
 
																+    color: oklch(44.6% 0.043 257.281);
															
 
																+    font-size: 14px;
															
 
																+}
															
 
																+.workflow-group-title {
															
 
																+    margin: 0;
															
 
																+    max-width: 242px;
															
 
																+    white-space: nowrap;
															
 
																+    overflow: hidden;
															
 
																+    text-overflow: ellipsis;
															
 
																+    font-weight: 500;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-tools-drag {
															
 
																+    height: 100%;
															
 
																+    display: flex;
															
 
																+    justify-content: center;
															
 
																+    align-items: center;
															
 
																+    padding-left: 4px;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-color {
															
 
																+    width: 16px;
															
 
																+    height: 16px;
															
 
																+    border-radius: 8px;
															
 
																+    background-color: #fde047;
															
 
																+    margin-left: 4px;
															
 
																+    cursor: pointer;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-title-input {
															
 
																+    width: 242px;
															
 
																+    border: none;
															
 
																+    color: #374151;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-color-palette {
															
 
																+    display: grid;
															
 
																+    grid-template-columns: repeat(6, 24px);
															
 
																+    gap: 12px;
															
 
																+    margin: 8px;
															
 
																+    padding: 8px;
															
 
																+}
															
 
																+
															
 
																+.workflow-group-color-item {
															
 
																+    width: 24px;
															
 
																+    height: 24px;
															
 
																+    border-radius: 50%;
															
 
																+    background-color: #fde047;
															
 
																+    cursor: pointer;
															
 
																+    border: 3px solid;
															
 
																+}
															
--- a/src/components/group/index.ts
+++ b/src/components/group/index.ts
@@ -0,0 +1,4 @@
 
																+import './index.css';
															
 
																+
															
 
																+export { GroupNodeRender } from './components';
															
 
																+export { IconGroup } from './components';
															
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -0,0 +1,5 @@
 
																+export * from './base-node';
															
 
																+export * from './line-add-button';
															
 
																+export * from './node-panel';
															
 
																+export * from './comment';
															
 
																+export * from './group';
															
--- a/src/components/line-add-button/button.tsx
+++ b/src/components/line-add-button/button.tsx
--- a/src/components/line-add-button/index.less
+++ b/src/components/line-add-button/index.less
@@ -0,0 +1,8 @@
 
																+.line-add-button {
															
 
																+  position: absolute;
															
 
																+  transform: translate(-50%, -60%);
															
 
																+  width: 24px;
															
 
																+  height: 24px;
															
 
																+  cursor: pointer;
															
 
																+  color: inherit;
															
 
																+}
															
--- a/src/components/line-add-button/index.tsx
+++ b/src/components/line-add-button/index.tsx
@@ -0,0 +1,126 @@
 
																+import { useCallback } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  WorkflowNodePanelService,
															
 
																+  WorkflowNodePanelUtils,
															
 
																+} from '@flowgram.ai/free-node-panel-plugin';
															
 
																+import { LineRenderProps } from '@flowgram.ai/free-lines-plugin';
															
 
																+import {
															
 
																+  delay,
															
 
																+  HistoryService,
															
 
																+  useService,
															
 
																+  WorkflowDocument,
															
 
																+  WorkflowDragService,
															
 
																+  WorkflowLinesManager,
															
 
																+  WorkflowNodeEntity,
															
 
																+  WorkflowNodeJSON,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import './index.less';
															
 
																+import { useVisible } from './use-visible';
															
 
																+import { IconPlusCircle } from './button';
															
 
																+
															
 
																+export const LineAddButton = (props: LineRenderProps) => {
															
 
																+  const { line, selected, hovered, color } = props;
															
 
																+  const visible = useVisible({ line, selected, hovered });
															
 
																+  const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService);
															
 
																+  const document = useService(WorkflowDocument);
															
 
																+  const dragService = useService(WorkflowDragService);
															
 
																+  const linesManager = useService(WorkflowLinesManager);
															
 
																+  const historyService = useService(HistoryService);
															
 
																+
															
 
																+  const { fromPort, toPort } = line;
															
 
																+
															
 
																+  const onClick = useCallback(async () => {
															
 
																+    // calculate the middle point of the line - 计算线条的中点位置
															
 
																+    const position = {
															
 
																+      x: (line.position.from.x + line.position.to.x) / 2,
															
 
																+      y: (line.position.from.y + line.position.to.y) / 2,
															
 
																+    };
															
 
																+
															
 
																+    // get container node for the new node - 获取新节点的容器节点
															
 
																+    const containerNode = WorkflowNodePanelUtils.getContainerNode({
															
 
																+      fromPort,
															
 
																+    });
															
 
																+
															
 
																+    // show node selection panel - 显示节点选择面板
															
 
																+    const result = await nodePanelService.singleSelectNodePanel({
															
 
																+      position,
															
 
																+      containerNode,
															
 
																+      panelProps: {
															
 
																+        enableScrollClose: true,
															
 
																+      },
															
 
																+    });
															
 
																+    if (!result) {
															
 
																+      return;
															
 
																+    }
															
 
																+
															
 
																+    const { nodeType, nodeJSON } = result;
															
 
																+
															
 
																+    // adjust position for the new node - 调整新节点的位置
															
 
																+    const nodePosition = WorkflowNodePanelUtils.adjustNodePosition({
															
 
																+      nodeType,
															
 
																+      position,
															
 
																+      fromPort,
															
 
																+      toPort,
															
 
																+      containerNode,
															
 
																+      document,
															
 
																+      dragService,
															
 
																+    });
															
 
																+
															
 
																+    // create new workflow node - 创建新的工作流节点
															
 
																+    const node: WorkflowNodeEntity = document.createWorkflowNodeByType(
															
 
																+      nodeType,
															
 
																+      nodePosition,
															
 
																+      nodeJSON ?? ({} as WorkflowNodeJSON),
															
 
																+      containerNode?.id
															
 
																+    );
															
 
																+
															
 
																+    // auto offset subsequent nodes - 自动偏移后续节点
															
 
																+    if (fromPort && toPort) {
															
 
																+      WorkflowNodePanelUtils.subNodesAutoOffset({
															
 
																+        node,
															
 
																+        fromPort,
															
 
																+        toPort,
															
 
																+        containerNode,
															
 
																+        historyService,
															
 
																+        dragService,
															
 
																+        linesManager,
															
 
																+      });
															
 
																+    }
															
 
																+
															
 
																+    // wait for node render - 等待节点渲染
															
 
																+    await delay(20);
															
 
																+
															
 
																+    // build connection lines - 构建连接线
															
 
																+    WorkflowNodePanelUtils.buildLine({
															
 
																+      fromPort,
															
 
																+      node,
															
 
																+      toPort,
															
 
																+      linesManager,
															
 
																+    });
															
 
																+
															
 
																+    // remove original line - 移除原始线条
															
 
																+    line.dispose();
															
 
																+  }, []);
															
 
																+
															
 
																+  if (!visible) {
															
 
																+    return <></>;
															
 
																+  }
															
 
																+
															
 
																+  return (
															
 
																+    <div
															
 
																+      className="line-add-button"
															
 
																+      style={{
															
 
																+        left: '50%',
															
 
																+        top: '50%',
															
 
																+        color,
															
 
																+      }}
															
 
																+      data-testid="sdk.workflow.canvas.line.add"
															
 
																+      data-line-id={line.id}
															
 
																+      onClick={onClick}
															
 
																+    >
															
 
																+      <IconPlusCircle />
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/line-add-button/use-visible.ts
+++ b/src/components/line-add-button/use-visible.ts
@@ -0,0 +1,23 @@
 
																+import { usePlayground, WorkflowLineEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import './index.less';
															
 
																+
															
 
																+export const useVisible = (params: {
															
 
																+  line: WorkflowLineEntity;
															
 
																+  selected?: boolean;
															
 
																+  hovered?: boolean;
															
 
																+}): boolean => {
															
 
																+  const playground = usePlayground();
															
 
																+  const { line, selected = false, hovered } = params;
															
 
																+  if (line.disposed) {
															
 
																+    // 在 dispose 后，再去获取 line.to | line.from 会导致错误创建端口
															
 
																+    return false;
															
 
																+  }
															
 
																+  if (playground.config.readonly) {
															
 
																+    return false;
															
 
																+  }
															
 
																+  if (!selected && !hovered) {
															
 
																+    return false;
															
 
																+  }
															
 
																+  return true;
															
 
																+};
															
--- a/src/components/node-menu/index.tsx
+++ b/src/components/node-menu/index.tsx
@@ -0,0 +1,118 @@
 
																+import { FC, useCallback, useState, type MouseEvent } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  delay,
															
 
																+  useClientContext,
															
 
																+  useService,
															
 
																+  WorkflowDragService,
															
 
																+  WorkflowNodeEntity,
															
 
																+  WorkflowSelectService,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+import { NodeIntoContainerService } from '@flowgram.ai/free-container-plugin';
															
 
																+import { IconButton, Dropdown } from '@douyinfe/semi-ui';
															
 
																+import { IconMore } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { FlowNodeRegistry } from '../../typings';
															
 
																+import { PasteShortcut } from '../../shortcuts/paste';
															
 
																+import { CopyShortcut } from '../../shortcuts/copy';
															
 
																+
															
 
																+interface NodeMenuProps {
															
 
																+  node: WorkflowNodeEntity;
															
 
																+  updateTitleEdit: (setEditing: boolean) => void;
															
 
																+  deleteNode: () => void;
															
 
																+}
															
 
																+
															
 
																+export const NodeMenu: FC<NodeMenuProps> = ({ node, deleteNode, updateTitleEdit }) => {
															
 
																+  const [visible, setVisible] = useState(true);
															
 
																+  const clientContext = useClientContext();
															
 
																+  const registry = node.getNodeRegistry<FlowNodeRegistry>();
															
 
																+  const nodeIntoContainerService = useService(NodeIntoContainerService);
															
 
																+  const selectService = useService(WorkflowSelectService);
															
 
																+  const dragService = useService(WorkflowDragService);
															
 
																+  const canMoveOut = nodeIntoContainerService.canMoveOutContainer(node);
															
 
																+
															
 
																+  const rerenderMenu = useCallback(() => {
															
 
																+    // force destroy component - 强制销毁组件触发重新渲染
															
 
																+    setVisible(false);
															
 
																+    requestAnimationFrame(() => {
															
 
																+      setVisible(true);
															
 
																+    });
															
 
																+  }, []);
															
 
																+
															
 
																+  const handleMoveOut = useCallback(
															
 
																+    async (e: MouseEvent) => {
															
 
																+      e.stopPropagation();
															
 
																+      const sourceParent = node.parent;
															
 
																+      // move out of container - 移出容器
															
 
																+      nodeIntoContainerService.moveOutContainer({ node });
															
 
																+      // clear invalid lines - 清除非法线条
															
 
																+      await nodeIntoContainerService.clearInvalidLines({
															
 
																+        dragNode: node,
															
 
																+        sourceParent,
															
 
																+      });
															
 
																+      rerenderMenu();
															
 
																+      await delay(16);
															
 
																+      // select node - 选中节点
															
 
																+      selectService.selectNode(node);
															
 
																+      // start drag node - 开始拖拽
															
 
																+      dragService.startDragSelectedNodes(e);
															
 
																+    },
															
 
																+    [nodeIntoContainerService, node, rerenderMenu]
															
 
																+  );
															
 
																+
															
 
																+  const handleCopy = useCallback(
															
 
																+    (e: React.MouseEvent) => {
															
 
																+      const copyShortcut = new CopyShortcut(clientContext);
															
 
																+      const pasteShortcut = new PasteShortcut(clientContext);
															
 
																+      const data = copyShortcut.toClipboardData([node]);
															
 
																+      pasteShortcut.apply(data);
															
 
																+      e.stopPropagation(); // Disable clicking prevents the sidebar from opening
															
 
																+    },
															
 
																+    [clientContext, node]
															
 
																+  );
															
 
																+
															
 
																+  const handleDelete = useCallback(
															
 
																+    (e: React.MouseEvent) => {
															
 
																+      deleteNode();
															
 
																+      e.stopPropagation(); // Disable clicking prevents the sidebar from opening
															
 
																+    },
															
 
																+    [clientContext, node]
															
 
																+  );
															
 
																+  const handleEditTitle = useCallback(() => {
															
 
																+    updateTitleEdit(true);
															
 
																+  }, [updateTitleEdit]);
															
 
																+
															
 
																+  if (!visible) {
															
 
																+    return <></>;
															
 
																+  }
															
 
																+
															
 
																+  return (
															
 
																+    <Dropdown
															
 
																+      trigger="hover"
															
 
																+      position="bottomRight"
															
 
																+      render={
															
 
																+        <Dropdown.Menu>
															
 
																+          <Dropdown.Item onClick={handleEditTitle}>Edit Title</Dropdown.Item>
															
 
																+          {canMoveOut && <Dropdown.Item onClick={handleMoveOut}>Move out</Dropdown.Item>}
															
 
																+          <Dropdown.Item onClick={handleCopy} disabled={registry.meta!.copyDisable === true}>
															
 
																+            Create Copy
															
 
																+          </Dropdown.Item>
															
 
																+          <Dropdown.Item
															
 
																+            onClick={handleDelete}
															
 
																+            disabled={!!(registry.canDelete?.(clientContext, node) || registry.meta!.deleteDisable)}
															
 
																+          >
															
 
																+            Delete
															
 
																+          </Dropdown.Item>
															
 
																+        </Dropdown.Menu>
															
 
																+      }
															
 
																+    >
															
 
																+      <IconButton
															
 
																+        color="secondary"
															
 
																+        size="small"
															
 
																+        theme="borderless"
															
 
																+        icon={<IconMore />}
															
 
																+        onClick={(e) => e.stopPropagation()}
															
 
																+      />
															
 
																+    </Dropdown>
															
 
																+  );
															
 
																+};
															
--- a/src/components/node-panel/index.less
+++ b/src/components/node-panel/index.less
@@ -0,0 +1,55 @@
 
																+.node-placeholder {
															
 
																+  width: 360px;
															
 
																+
															
 
																+  background-color: rgba(252, 252, 255, 1);
															
 
																+  border: 1px solid rgba(68, 83, 130, 0.25);
															
 
																+  border-radius: 8px;
															
 
																+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 2%), 0 2px 6px 0 rgba(0, 0, 0, 4%);
															
 
																+}
															
 
																+
															
 
																+
															
 
																+.node-placeholder-skeleton {
															
 
																+  width: 100%;
															
 
																+  padding: 12px;
															
 
																+  background-color: rgba(252, 252, 255, 1);
															
 
																+  border-radius: 8px;
															
 
																+
															
 
																+
															
 
																+  .semi-skeleton-avatar {
															
 
																+    background-color: rgba(68, 83, 130, 0.25);
															
 
																+  }
															
 
																+
															
 
																+  .semi-skeleton-title {
															
 
																+    height: 16px;
															
 
																+    background-color: rgba(82, 100, 154, 0.13);
															
 
																+    border-radius: 4px;
															
 
																+  }
															
 
																+}
															
 
																+
															
 
																+
															
 
																+.node-placeholder-hd {
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  margin-bottom: 12px;
															
 
																+}
															
 
																+
															
 
																+.node-placeholder-avatar {
															
 
																+  width: 24px;
															
 
																+  height: 24px;
															
 
																+  margin-right: 8px;
															
 
																+  border-radius: 6px;
															
 
																+}
															
 
																+
															
 
																+.node-placeholder-content {
															
 
																+  display: flex;
															
 
																+  flex-direction: column;
															
 
																+  align-items: flex-start;
															
 
																+  gap: 3px;
															
 
																+}
															
 
																+
															
 
																+.node-placeholder-footer {
															
 
																+  display: flex;
															
 
																+  flex-direction: row;
															
 
																+  align-items: center;
															
 
																+  gap: 2.5px;
															
 
																+}
															
--- a/src/components/node-panel/index.tsx
+++ b/src/components/node-panel/index.tsx
@@ -0,0 +1,49 @@
 
																+import { FC } from 'react';
															
 
																+
															
 
																+import { NodePanelRenderProps } from '@flowgram.ai/free-node-panel-plugin';
															
 
																+import { Popover } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { NodePlaceholder } from './node-placeholder';
															
 
																+import { NodeList } from './node-list';
															
 
																+import './index.less';
															
 
																+
															
 
																+export const NodePanel: FC<NodePanelRenderProps> = (props) => {
															
 
																+  const { onSelect, position, onClose, panelProps } = props;
															
 
																+  const { enableNodePlaceholder } = panelProps;
															
 
																+
															
 
																+  return (
															
 
																+    <Popover
															
 
																+      trigger="click"
															
 
																+      visible={true}
															
 
																+      onVisibleChange={(v) => (v ? null : onClose())}
															
 
																+      content={<NodeList onSelect={onSelect} />}
															
 
																+      placement="right"
															
 
																+      popupAlign={{ offset: [30, 0] }}
															
 
																+      overlayStyle={{
															
 
																+        padding: 0,
															
 
																+      }}
															
 
																+    >
															
 
																+      <div
															
 
																+        style={
															
 
																+          enableNodePlaceholder
															
 
																+            ? {
															
 
																+                position: 'absolute',
															
 
																+                top: position.y - 61.5,
															
 
																+                left: position.x,
															
 
																+                width: 360,
															
 
																+                height: 100,
															
 
																+              }
															
 
																+            : {
															
 
																+                position: 'absolute',
															
 
																+                top: position.y,
															
 
																+                left: position.x,
															
 
																+                width: 0,
															
 
																+                height: 0,
															
 
																+              }
															
 
																+        }
															
 
																+      >
															
 
																+        {enableNodePlaceholder && <NodePlaceholder />}
															
 
																+      </div>
															
 
																+    </Popover>
															
 
																+  );
															
 
																+};
															
--- a/src/components/node-panel/node-list.tsx
+++ b/src/components/node-panel/node-list.tsx
@@ -0,0 +1,88 @@
 
																+import React, { FC } from 'react';
															
 
																+
															
 
																+import styled from 'styled-components';
															
 
																+import { NodePanelRenderProps } from '@flowgram.ai/free-node-panel-plugin';
															
 
																+import { useClientContext } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { FlowNodeRegistry } from '../../typings';
															
 
																+import { visibleNodeRegistries } from '../../nodes';
															
 
																+
															
 
																+const NodeWrap = styled.div`
															
 
																+  width: 100%;
															
 
																+  height: 32px;
															
 
																+  border-radius: 5px;
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  cursor: pointer;
															
 
																+  font-size: 19px;
															
 
																+  padding: 0 15px;
															
 
																+  &:hover {
															
 
																+    background-color: hsl(252deg 62% 55% / 9%);
															
 
																+    color: hsl(252 62% 54.9%);
															
 
																+  }
															
 
																+`;
															
 
																+
															
 
																+const NodeLabel = styled.div`
															
 
																+  font-size: 12px;
															
 
																+  margin-left: 10px;
															
 
																+`;
															
 
																+
															
 
																+interface NodeProps {
															
 
																+  label: string;
															
 
																+  icon: JSX.Element;
															
 
																+  onClick: React.MouseEventHandler<HTMLDivElement>;
															
 
																+  disabled: boolean;
															
 
																+}
															
 
																+
															
 
																+function Node(props: NodeProps) {
															
 
																+  return (
															
 
																+    <NodeWrap
															
 
																+      data-testid={`demo-free-node-list-${props.label}`}
															
 
																+      onClick={props.disabled ? undefined : props.onClick}
															
 
																+      style={props.disabled ? { opacity: 0.3 } : {}}
															
 
																+    >
															
 
																+      <div style={{ fontSize: 14 }}>{props.icon}</div>
															
 
																+      <NodeLabel>{props.label}</NodeLabel>
															
 
																+    </NodeWrap>
															
 
																+  );
															
 
																+}
															
 
																+
															
 
																+const NodesWrap = styled.div`
															
 
																+  max-height: 500px;
															
 
																+  overflow: auto;
															
 
																+  &::-webkit-scrollbar {
															
 
																+    display: none;
															
 
																+  }
															
 
																+`;
															
 
																+
															
 
																+interface NodeListProps {
															
 
																+  onSelect: NodePanelRenderProps['onSelect'];
															
 
																+}
															
 
																+
															
 
																+export const NodeList: FC<NodeListProps> = (props) => {
															
 
																+  const { onSelect } = props;
															
 
																+  const context = useClientContext();
															
 
																+  const handleClick = (e: React.MouseEvent, registry: FlowNodeRegistry) => {
															
 
																+    const json = registry.onAdd?.(context);
															
 
																+    onSelect({
															
 
																+      nodeType: registry.type as string,
															
 
																+      selectEvent: e,
															
 
																+      nodeJSON: json,
															
 
																+    });
															
 
																+  };
															
 
																+  return (
															
 
																+    <NodesWrap style={{ width: 80 * 2 + 20 }}>
															
 
																+      {visibleNodeRegistries.map((registry) => (
															
 
																+        <Node
															
 
																+          key={registry.type}
															
 
																+          disabled={!(registry.canAdd?.(context) ?? true)}
															
 
																+          icon={
															
 
																+            <img style={{ width: 10, height: 10, borderRadius: 4 }} src={registry.info?.icon} />
															
 
																+          }
															
 
																+          label={registry.type as string}
															
 
																+          onClick={(e) => handleClick(e, registry)}
															
 
																+        />
															
 
																+      ))}
															
 
																+    </NodesWrap>
															
 
																+  );
															
 
																+};
															
--- a/src/components/node-panel/node-placeholder.tsx
+++ b/src/components/node-panel/node-placeholder.tsx
@@ -0,0 +1,26 @@
 
																+import { Skeleton } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+export const NodePlaceholder = () => (
															
 
																+  <div className="node-placeholder" data-testid="workflow.detail.node-panel.placeholder">
															
 
																+    <Skeleton
															
 
																+      className="node-placeholder-skeleton"
															
 
																+      loading={true}
															
 
																+      active={true}
															
 
																+      placeholder={
															
 
																+        <div className="">
															
 
																+          <div className="node-placeholder-hd">
															
 
																+            <Skeleton.Avatar shape="square" className="node-placeholder-avatar" />
															
 
																+            <Skeleton.Title style={{ width: 141 }} />
															
 
																+          </div>
															
 
																+          <div className="node-placeholder-content">
															
 
																+            <div className="node-placeholder-footer">
															
 
																+              <Skeleton.Title style={{ width: 85 }} />
															
 
																+              <Skeleton.Title style={{ width: 241 }} />
															
 
																+            </div>
															
 
																+            <Skeleton.Title style={{ width: 220 }} />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      }
															
 
																+    />
															
 
																+  </div>
															
 
																+);
															
--- a/src/components/selector-box-popover/index.tsx
+++ b/src/components/selector-box-popover/index.tsx
@@ -0,0 +1,98 @@
 
																+import { FunctionComponent } from 'react';
															
 
																+
															
 
																+import { SelectorBoxPopoverProps } from '@flowgram.ai/free-layout-editor';
															
 
																+import { WorkflowGroupCommand } from '@flowgram.ai/free-group-plugin';
															
 
																+import { Button, ButtonGroup, Tooltip } from '@douyinfe/semi-ui';
															
 
																+import { IconCopy, IconDeleteStroked, IconExpand, IconShrink } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { IconGroup } from '../group';
															
 
																+import { FlowCommandId } from '../../shortcuts/constants';
															
 
																+
															
 
																+const BUTTON_HEIGHT = 24;
															
 
																+
															
 
																+export const SelectorBoxPopover: FunctionComponent<SelectorBoxPopoverProps> = ({
															
 
																+  bounds,
															
 
																+  children,
															
 
																+  flowSelectConfig,
															
 
																+  commandRegistry,
															
 
																+}) => (
															
 
																+  <>
															
 
																+    <div
															
 
																+      style={{
															
 
																+        position: 'absolute',
															
 
																+        left: bounds.right,
															
 
																+        top: bounds.top,
															
 
																+        transform: 'translate(-100%, -100%)',
															
 
																+      }}
															
 
																+      onMouseDown={(e) => {
															
 
																+        e.stopPropagation();
															
 
																+      }}
															
 
																+    >
															
 
																+      <ButtonGroup
															
 
																+        size="small"
															
 
																+        style={{ display: 'flex', flexWrap: 'nowrap', height: BUTTON_HEIGHT }}
															
 
																+      >
															
 
																+        <Tooltip content={'Collapse'}>
															
 
																+          <Button
															
 
																+            icon={<IconShrink />}
															
 
																+            style={{ height: BUTTON_HEIGHT }}
															
 
																+            type="primary"
															
 
																+            theme="solid"
															
 
																+            onMouseDown={(e) => {
															
 
																+              commandRegistry.executeCommand(FlowCommandId.COLLAPSE);
															
 
																+            }}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+
															
 
																+        <Tooltip content={'Expand'}>
															
 
																+          <Button
															
 
																+            icon={<IconExpand />}
															
 
																+            style={{ height: BUTTON_HEIGHT }}
															
 
																+            type="primary"
															
 
																+            theme="solid"
															
 
																+            onMouseDown={(e) => {
															
 
																+              commandRegistry.executeCommand(FlowCommandId.EXPAND);
															
 
																+            }}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+
															
 
																+        <Tooltip content={'Create Group'}>
															
 
																+          <Button
															
 
																+            icon={<IconGroup size={14} />}
															
 
																+            style={{ height: BUTTON_HEIGHT }}
															
 
																+            type="primary"
															
 
																+            theme="solid"
															
 
																+            onClick={() => {
															
 
																+              commandRegistry.executeCommand(WorkflowGroupCommand.Group);
															
 
																+            }}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+
															
 
																+        <Tooltip content={'Copy'}>
															
 
																+          <Button
															
 
																+            icon={<IconCopy />}
															
 
																+            style={{ height: BUTTON_HEIGHT }}
															
 
																+            type="primary"
															
 
																+            theme="solid"
															
 
																+            onClick={() => {
															
 
																+              commandRegistry.executeCommand(FlowCommandId.COPY);
															
 
																+            }}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+
															
 
																+        <Tooltip content={'Delete'}>
															
 
																+          <Button
															
 
																+            type="primary"
															
 
																+            theme="solid"
															
 
																+            icon={<IconDeleteStroked />}
															
 
																+            style={{ height: BUTTON_HEIGHT }}
															
 
																+            onClick={() => {
															
 
																+              commandRegistry.executeCommand(FlowCommandId.DELETE);
															
 
																+            }}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+      </ButtonGroup>
															
 
																+    </div>
															
 
																+    <div>{children}</div>
															
 
																+  </>
															
 
																+);
															
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -0,0 +1,2 @@
 
																+export { SidebarProvider } from './sidebar-provider';
															
 
																+export { SidebarRenderer } from './sidebar-renderer';
															
--- a/src/components/sidebar/sidebar-node-renderer.tsx
+++ b/src/components/sidebar/sidebar-node-renderer.tsx
@@ -0,0 +1,14 @@
 
																+import { useNodeRender, FlowNodeEntity } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { NodeRenderContext } from '../../context';
															
 
																+
															
 
																+export function SidebarNodeRenderer(props: { node: FlowNodeEntity }) {
															
 
																+  const { node } = props;
															
 
																+  const nodeRender = useNodeRender(node);
															
 
																+
															
 
																+  return (
															
 
																+    <NodeRenderContext.Provider value={nodeRender}>
															
 
																+      {nodeRender.form?.render()}
															
 
																+    </NodeRenderContext.Provider>
															
 
																+  );
															
 
																+}
															
--- a/src/components/sidebar/sidebar-provider.tsx
+++ b/src/components/sidebar/sidebar-provider.tsx
@@ -0,0 +1,12 @@
 
																+import { useState } from 'react';
															
 
																+
															
 
																+import { SidebarContext } from '../../context';
															
 
																+
															
 
																+export function SidebarProvider({ children }: { children: React.ReactNode }) {
															
 
																+  const [nodeId, setNodeId] = useState<string | undefined>();
															
 
																+  return (
															
 
																+    <SidebarContext.Provider value={{ visible: !!nodeId, nodeId, setNodeId }}>
															
 
																+      {children}
															
 
																+    </SidebarContext.Provider>
															
 
																+  );
															
 
																+}
															
--- a/src/components/sidebar/sidebar-renderer.tsx
+++ b/src/components/sidebar/sidebar-renderer.tsx
@@ -0,0 +1,88 @@
 
																+import { useCallback, useContext, useEffect, useMemo } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  PlaygroundEntityContext,
															
 
																+  useRefresh,
															
 
																+  useClientContext,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+import { SideSheet } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { FlowNodeMeta } from '../../typings';
															
 
																+import { SidebarContext, IsSidebarContext } from '../../context';
															
 
																+import { SidebarNodeRenderer } from './sidebar-node-renderer';
															
 
																+
															
 
																+export const SidebarRenderer = () => {
															
 
																+  const { nodeId, setNodeId } = useContext(SidebarContext);
															
 
																+  const { selection, playground, document } = useClientContext();
															
 
																+  const refresh = useRefresh();
															
 
																+  const handleClose = useCallback(() => {
															
 
																+    setNodeId(undefined);
															
 
																+  }, []);
															
 
																+  const node = nodeId ? document.getNode(nodeId) : undefined;
															
 
																+  /**
															
 
																+   * Listen readonly
															
 
																+   */
															
 
																+  useEffect(() => {
															
 
																+    const disposable = playground.config.onReadonlyOrDisabledChange(() => {
															
 
																+      handleClose();
															
 
																+      refresh();
															
 
																+    });
															
 
																+    return () => disposable.dispose();
															
 
																+  }, [playground]);
															
 
																+  /**
															
 
																+   * Listen selection
															
 
																+   */
															
 
																+  useEffect(() => {
															
 
																+    const toDispose = selection.onSelectionChanged(() => {
															
 
																+      /**
															
 
																+       * 如果没有选中任何节点，则自动关闭侧边栏
															
 
																+       * If no node is selected, the sidebar is automatically closed
															
 
																+       */
															
 
																+      if (selection.selection.length === 0) {
															
 
																+        handleClose();
															
 
																+      } else if (selection.selection.length === 1 && selection.selection[0] !== node) {
															
 
																+        handleClose();
															
 
																+      }
															
 
																+    });
															
 
																+    return () => toDispose.dispose();
															
 
																+  }, [selection, handleClose, node]);
															
 
																+  /**
															
 
																+   * Close when node disposed
															
 
																+   */
															
 
																+  useEffect(() => {
															
 
																+    if (node) {
															
 
																+      const toDispose = node.onDispose(() => {
															
 
																+        setNodeId(undefined);
															
 
																+      });
															
 
																+      return () => toDispose.dispose();
															
 
																+    }
															
 
																+    return () => {};
															
 
																+  }, [node]);
															
 
																+
															
 
																+  const visible = useMemo(() => {
															
 
																+    if (!node) {
															
 
																+      return false;
															
 
																+    }
															
 
																+    const { sidebarDisable = false } = node.getNodeMeta<FlowNodeMeta>();
															
 
																+    return !sidebarDisable;
															
 
																+  }, [node]);
															
 
																+
															
 
																+  if (playground.config.readonly) {
															
 
																+    return null;
															
 
																+  }
															
 
																+  /**
															
 
																+   * Add "key" to rerender the sidebar when the node changes
															
 
																+   */
															
 
																+  const content =
															
 
																+    node && visible ? (
															
 
																+      <PlaygroundEntityContext.Provider key={node.id} value={node}>
															
 
																+        <SidebarNodeRenderer node={node} />
															
 
																+      </PlaygroundEntityContext.Provider>
															
 
																+    ) : null;
															
 
																+
															
 
																+  return (
															
 
																+    <SideSheet mask={false} visible={visible} onCancel={handleClose}>
															
 
																+      <IsSidebarContext.Provider value={true}>{content}</IsSidebarContext.Provider>
															
 
																+    </SideSheet>
															
 
																+  );
															
 
																+};
															
--- a/src/components/testrun/node-status-bar/group/index.css
+++ b/src/components/testrun/node-status-bar/group/index.css
@@ -0,0 +1,8 @@
 
																+.node-status-group {
															
 
																+    padding: 6px;
															
 
																+    font-weight: 500;
															
 
																+    color: #333;
															
 
																+    font-size: 15px;
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+}
															
--- a/src/components/testrun/node-status-bar/group/index.tsx
+++ b/src/components/testrun/node-status-bar/group/index.tsx
@@ -0,0 +1,61 @@
 
																+import { FC, useState } from 'react';
															
 
																+
															
 
																+import { IconSmallTriangleDown } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { DataStructureViewer } from '../viewer';
															
 
																+
															
 
																+import './index.css';
															
 
																+import { Tag } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+interface NodeStatusGroupProps {
															
 
																+  title: string;
															
 
																+  data: unknown;
															
 
																+  optional?: boolean;
															
 
																+  disableCollapse?: boolean;
															
 
																+}
															
 
																+
															
 
																+const isObjectHasContent = (obj: any = {}): boolean => Object.keys(obj).length > 0;
															
 
																+
															
 
																+export const NodeStatusGroup: FC<NodeStatusGroupProps> = ({
															
 
																+  title,
															
 
																+  data,
															
 
																+  optional = false,
															
 
																+  disableCollapse = false,
															
 
																+}) => {
															
 
																+  const hasContent = isObjectHasContent(data);
															
 
																+  const [isExpanded, setIsExpanded] = useState(true);
															
 
																+
															
 
																+  if (optional && !hasContent) {
															
 
																+    return null;
															
 
																+  }
															
 
																+
															
 
																+  return (
															
 
																+    <>
															
 
																+      <div className="node-status-group" onClick={() => hasContent && setIsExpanded(!isExpanded)}>
															
 
																+        {!disableCollapse && (
															
 
																+          <IconSmallTriangleDown
															
 
																+            style={{
															
 
																+              transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
															
 
																+              transition: 'transform 0.2s',
															
 
																+              cursor: 'pointer',
															
 
																+              marginRight: '4px',
															
 
																+              opacity: hasContent ? 1 : 0,
															
 
																+            }}
															
 
																+          />
															
 
																+        )}
															
 
																+        <span>{title}:</span>
															
 
																+        {!hasContent && (
															
 
																+          <Tag
															
 
																+            size="small"
															
 
																+            style={{
															
 
																+              marginLeft: 4,
															
 
																+            }}
															
 
																+          >
															
 
																+            null
															
 
																+          </Tag>
															
 
																+        )}
															
 
																+      </div>
															
 
																+      {hasContent && isExpanded ? <DataStructureViewer data={data} /> : null}
															
 
																+    </>
															
 
																+  );
															
 
																+};
															
--- a/src/components/testrun/node-status-bar/header/index.tsx
+++ b/src/components/testrun/node-status-bar/header/index.tsx
@@ -0,0 +1,52 @@
 
																+import React, { useState } from 'react';
															
 
																+
															
 
																+import { IconChevronDown } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { useNodeRenderContext } from '../../../../hooks';
															
 
																+import { NodeStatusHeaderContentStyle, NodeStatusHeaderStyle } from './style';
															
 
																+
															
 
																+interface NodeStatusBarProps {
															
 
																+  header?: React.ReactNode;
															
 
																+  defaultShowDetail?: boolean;
															
 
																+  extraBtns?: React.ReactNode[];
															
 
																+}
															
 
																+
															
 
																+export const NodeStatusHeader: React.FC<React.PropsWithChildren<NodeStatusBarProps>> = ({
															
 
																+  header,
															
 
																+  defaultShowDetail,
															
 
																+  children,
															
 
																+  extraBtns = [],
															
 
																+}) => {
															
 
																+  const [showDetail, setShowDetail] = useState(defaultShowDetail);
															
 
																+  const { selectNode } = useNodeRenderContext();
															
 
																+
															
 
																+  const handleToggleShowDetail = (e: React.MouseEvent) => {
															
 
																+    e.stopPropagation();
															
 
																+    selectNode(e);
															
 
																+    setShowDetail(!showDetail);
															
 
																+  };
															
 
																+
															
 
																+  return (
															
 
																+    <NodeStatusHeaderStyle
															
 
																+      // 必须要禁止 down 冒泡，防止判定圈选和 node hover（不支持多边形）
															
 
																+      onMouseDown={(e) => e.stopPropagation()}
															
 
																+    >
															
 
																+      <NodeStatusHeaderContentStyle
															
 
																+        className={showDetail ? 'status-header-opened' : ''}
															
 
																+        // 必须要禁止 down 冒泡，防止判定圈选和 node hover（不支持多边形）
															
 
																+        onMouseDown={(e) => e.stopPropagation()}
															
 
																+        // 其他事件统一走点击事件，且也需要阻止冒泡
															
 
																+        onClick={handleToggleShowDetail}
															
 
																+      >
															
 
																+        <div className="status-title">
															
 
																+          {header}
															
 
																+          {extraBtns.length > 0 ? extraBtns : null}
															
 
																+        </div>
															
 
																+        <div className="status-btns">
															
 
																+          <IconChevronDown className={showDetail ? 'is-show-detail' : ''} />
															
 
																+        </div>
															
 
																+      </NodeStatusHeaderContentStyle>
															
 
																+      {showDetail ? children : null}
															
 
																+    </NodeStatusHeaderStyle>
															
 
																+  );
															
 
																+};
															
--- a/src/components/testrun/node-status-bar/header/style.ts
+++ b/src/components/testrun/node-status-bar/header/style.ts
@@ -0,0 +1,56 @@
 
																+import styled from 'styled-components';
															
 
																+
															
 
																+export const NodeStatusHeaderStyle = styled.div`
															
 
																+  border: 1px solid rgba(68, 83, 130, 0.25);
															
 
																+  border-radius: 8px;
															
 
																+  background-color: #fff;
															
 
																+
															
 
																+  position: absolute;
															
 
																+  top: calc(100% + 8px);
															
 
																+  left: 0;
															
 
																+
															
 
																+  width: 100%;
															
 
																+`;
															
 
																+
															
 
																+export const NodeStatusHeaderContentStyle = styled.div`
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+  justify-content: space-between;
															
 
																+  padding: 6px;
															
 
																+
															
 
																+  &-opened {
															
 
																+    padding-bottom: 0;
															
 
																+  }
															
 
																+
															
 
																+  .status-title {
															
 
																+    height: 24px;
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+    column-gap: 8px;
															
 
																+    min-width: 0;
															
 
																+
															
 
																+    :global {
															
 
																+      .coz-tag {
															
 
																+        height: 20px;
															
 
																+      }
															
 
																+      .semi-tag-content {
															
 
																+        font-weight: 500;
															
 
																+        line-height: 16px;
															
 
																+        font-size: 12px;
															
 
																+      }
															
 
																+      .semi-tag-suffix-icon > div {
															
 
																+        font-size: 14px;
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+  .status-btns {
															
 
																+    height: 24px;
															
 
																+    display: flex;
															
 
																+    align-items: center;
															
 
																+    column-gap: 4px;
															
 
																+  }
															
 
																+
															
 
																+  .is-show-detail {
															
 
																+    transform: rotate(180deg);
															
 
																+  }
															
 
																+`;
															
--- a/src/components/testrun/node-status-bar/icon/success.tsx
+++ b/src/components/testrun/node-status-bar/icon/success.tsx
@@ -0,0 +1,32 @@
 
																+interface Props {
															
 
																+  className?: string;
															
 
																+  style?: React.CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const IconSuccessFill = ({ className, style }: Props) => (
															
 
																+  <svg
															
 
																+    className={className}
															
 
																+    style={style}
															
 
																+    xmlns="http://www.w3.org/2000/svg"
															
 
																+    width="20"
															
 
																+    height="20"
															
 
																+    fill="none"
															
 
																+    viewBox="0 0 20 20"
															
 
																+  >
															
 
																+    <g clipPath="url(#icon-workflow-run-success_svg__a)">
															
 
																+      <path
															
 
																+        fill="#3EC254"
															
 
																+        d="M.833 10A9.166 9.166 0 0 0 10 19.168a9.166 9.166 0 0 0 9.167-9.166A9.166 9.166 0 0 0 10 .834a9.166 9.166 0 0 0-9.167 9.167"
															
 
																+      ></path>
															
 
																+      <path
															
 
																+        fill="#fff"
															
 
																+        d="M6.077 9.755a.833.833 0 0 0 0 1.179l2.357 2.357a.833.833 0 0 0 1.179 0l4.714-4.714a.833.833 0 1 0-1.178-1.179l-4.125 4.125-1.768-1.768a.833.833 0 0 0-1.179 0"
															
 
																+      ></path>
															
 
																+    </g>
															
 
																+    <defs>
															
 
																+      <clipPath id="icon-workflow-run-success_svg__a">
															
 
																+        <path fill="#fff" d="M0 0h20v20H0z"></path>
															
 
																+      </clipPath>
															
 
																+    </defs>
															
 
																+  </svg>
															
 
																+);
															
--- a/src/components/testrun/node-status-bar/icon/warning.tsx
+++ b/src/components/testrun/node-status-bar/icon/warning.tsx
@@ -0,0 +1,22 @@
 
																+interface Props {
															
 
																+  className?: string;
															
 
																+  style?: React.CSSProperties;
															
 
																+}
															
 
																+
															
 
																+export const IconWarningFill = ({ className, style }: Props) => (
															
 
																+  <svg
															
 
																+    className={className}
															
 
																+    style={style}
															
 
																+    width="1em"
															
 
																+    height="1em"
															
 
																+    viewBox="0 0 24 24"
															
 
																+    fill="currentColor"
															
 
																+    xmlns="http://www.w3.org/2000/svg"
															
 
																+  >
															
 
																+    <path
															
 
																+      fillRule="evenodd"
															
 
																+      clipRule="evenodd"
															
 
																+      d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V8ZM11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16Z"
															
 
																+    ></path>
															
 
																+  </svg>
															
 
																+);
															
--- a/src/components/testrun/node-status-bar/index.tsx
+++ b/src/components/testrun/node-status-bar/index.tsx
@@ -0,0 +1,42 @@
 
																+import { useEffect, useState } from 'react';
															
 
																+
															
 
																+import { NodeReport } from '@flowgram.ai/runtime-interface';
															
 
																+import { useCurrentEntity, useService } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { WorkflowRuntimeService } from '../../../plugins/runtime-plugin/runtime-service';
															
 
																+import { NodeStatusRender } from './render';
															
 
																+
															
 
																+const useNodeReport = () => {
															
 
																+  const node = useCurrentEntity();
															
 
																+  const [report, setReport] = useState<NodeReport>();
															
 
																+
															
 
																+  const runtimeService = useService(WorkflowRuntimeService);
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    const reportDisposer = runtimeService.onNodeReportChange((nodeReport) => {
															
 
																+      if (nodeReport.id !== node.id) {
															
 
																+        return;
															
 
																+      }
															
 
																+      setReport(nodeReport);
															
 
																+    });
															
 
																+    const resetDisposer = runtimeService.onReset(() => {
															
 
																+      setReport(undefined);
															
 
																+    });
															
 
																+    return () => {
															
 
																+      reportDisposer.dispose();
															
 
																+      resetDisposer.dispose();
															
 
																+    };
															
 
																+  }, []);
															
 
																+
															
 
																+  return report;
															
 
																+};
															
 
																+
															
 
																+export const NodeStatusBar = () => {
															
 
																+  const report = useNodeReport();
															
 
																+
															
 
																+  if (!report) {
															
 
																+    return null;
															
 
																+  }
															
 
																+
															
 
																+  return <NodeStatusRender report={report} />;
															
 
																+};
															
--- a/src/components/testrun/node-status-bar/render/index.css
+++ b/src/components/testrun/node-status-bar/render/index.css
@@ -0,0 +1,14 @@
 
																+.node-status-succeed {
															
 
																+    background-color: rgba(105, 209, 140, 0.3);
															
 
																+    color: rgba(0, 178, 60, 1);
															
 
																+}
															
 
																+
															
 
																+.node-status-processing {
															
 
																+    background-color: rgba(153, 187, 255, 0.3);
															
 
																+    color: rgba(61, 121, 242, 1);
															
 
																+}
															
 
																+
															
 
																+.node-status-failed {
															
 
																+    background-color: rgba(255, 163, 171, 0.3);
															
 
																+    color: rgba(229, 50, 65, 1);
															
 
																+}
															
--- a/src/components/testrun/node-status-bar/render/index.tsx
+++ b/src/components/testrun/node-status-bar/render/index.tsx
@@ -0,0 +1,233 @@
 
																+import { FC, useMemo, useState } from 'react';
															
 
																+
															
 
																+import { NodeReport, WorkflowStatus } from '@flowgram.ai/runtime-interface';
															
 
																+import { Tag, Button, Select } from '@douyinfe/semi-ui';
															
 
																+import { IconSpin } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { IconWarningFill } from '../icon/warning';
															
 
																+import { IconSuccessFill } from '../icon/success';
															
 
																+import { NodeStatusHeader } from '../header';
															
 
																+import './index.css';
															
 
																+import { NodeStatusGroup } from '../group';
															
 
																+
															
 
																+interface NodeStatusRenderProps {
															
 
																+  report: NodeReport;
															
 
																+}
															
 
																+
															
 
																+const msToSeconds = (ms: number): string => (ms / 1000).toFixed(2) + 's';
															
 
																+const displayCount = 6;
															
 
																+
															
 
																+export const NodeStatusRender: FC<NodeStatusRenderProps> = ({ 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 (
															
 
																+        <IconSpin
															
 
																+          spin
															
 
																+          style={{
															
 
																+            color: 'rgba(77,83,232,1',
															
 
																+          }}
															
 
																+        />
															
 
																+      );
															
 
																+    }
															
 
																+    if (isNodeSucceed) {
															
 
																+      return <IconSuccessFill />;
															
 
																+    }
															
 
																+    return <IconWarningFill className={tagColor} />;
															
 
																+  };
															
 
																+  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 ? <p style={{ margin: 0 }}>{desc}</p> : null;
															
 
																+  };
															
 
																+  const renderCost = () => (
															
 
																+    <Tag size="small" className={tagColor}>
															
 
																+      {msToSeconds(report.timeCost)}
															
 
																+    </Tag>
															
 
																+  );
															
 
																+
															
 
																+  const renderSnapshotNavigation = () => {
															
 
																+    if (snapshots.length <= 1) {
															
 
																+      return null;
															
 
																+    }
															
 
																+
															
 
																+    const count = (
															
 
																+      <p
															
 
																+        style={{
															
 
																+          fontWeight: 500,
															
 
																+          color: '#333',
															
 
																+          fontSize: '15px',
															
 
																+          marginLeft: 12,
															
 
																+        }}
															
 
																+      >
															
 
																+        Total: {snapshots.length}
															
 
																+      </p>
															
 
																+    );
															
 
																+
															
 
																+    if (snapshots.length <= displayCount) {
															
 
																+      return (
															
 
																+        <>
															
 
																+          {count}
															
 
																+          <div
															
 
																+            style={{
															
 
																+              margin: '12px',
															
 
																+              display: 'flex',
															
 
																+              gap: '8px',
															
 
																+              alignItems: 'center',
															
 
																+              flexWrap: 'wrap',
															
 
																+            }}
															
 
																+          >
															
 
																+            {snapshots.map((_, index) => (
															
 
																+              <Button
															
 
																+                key={index}
															
 
																+                size="small"
															
 
																+                type={currentSnapshotIndex === index ? 'primary' : 'tertiary'}
															
 
																+                onClick={() => setCurrentSnapshotIndex(index)}
															
 
																+                style={{
															
 
																+                  minWidth: '32px',
															
 
																+                  height: '32px',
															
 
																+                  padding: '0',
															
 
																+                  borderRadius: '4px',
															
 
																+                  fontSize: '12px',
															
 
																+                  border: '1px solid',
															
 
																+                  borderColor:
															
 
																+                    currentSnapshotIndex === index ? '#4d53e8' : 'rgba(29, 28, 35, 0.08)',
															
 
																+                  fontWeight: currentSnapshotIndex === index ? '800' : '500',
															
 
																+                }}
															
 
																+              >
															
 
																+                {index + 1}
															
 
																+              </Button>
															
 
																+            ))}
															
 
																+          </div>
															
 
																+        </>
															
 
																+      );
															
 
																+    }
															
 
																+
															
 
																+    // 超过5个时，前5个显示为按钮，剩余的放在下拉选择中
															
 
																+    return (
															
 
																+      <>
															
 
																+        {count}
															
 
																+        <div
															
 
																+          style={{
															
 
																+            margin: '12px',
															
 
																+            display: 'flex',
															
 
																+            gap: '8px',
															
 
																+            alignItems: 'center',
															
 
																+            flexWrap: 'wrap',
															
 
																+          }}
															
 
																+        >
															
 
																+          {snapshots.slice(0, displayCount).map((_, index) => (
															
 
																+            <Button
															
 
																+              key={index}
															
 
																+              size="small"
															
 
																+              type="tertiary"
															
 
																+              onClick={() => setCurrentSnapshotIndex(index)}
															
 
																+              style={{
															
 
																+                minWidth: '32px',
															
 
																+                height: '32px',
															
 
																+                padding: '0',
															
 
																+                borderRadius: '4px',
															
 
																+                fontSize: '12px',
															
 
																+                border: '1px solid',
															
 
																+                borderColor: currentSnapshotIndex === index ? '#4d53e8' : 'rgba(29, 28, 35, 0.08)',
															
 
																+                fontWeight: currentSnapshotIndex === index ? '800' : '500',
															
 
																+              }}
															
 
																+            >
															
 
																+              {index + 1}
															
 
																+            </Button>
															
 
																+          ))}
															
 
																+          <Select
															
 
																+            value={currentSnapshotIndex >= displayCount ? currentSnapshotIndex : undefined}
															
 
																+            onChange={(value) => setCurrentSnapshotIndex(value as number)}
															
 
																+            style={{
															
 
																+              width: '100px',
															
 
																+              height: '32px',
															
 
																+              border: '1px solid',
															
 
																+              borderColor:
															
 
																+                currentSnapshotIndex >= displayCount ? '#4d53e8' : 'rgba(29, 28, 35, 0.08)',
															
 
																+            }}
															
 
																+            size="small"
															
 
																+            placeholder="Select"
															
 
																+          >
															
 
																+            {snapshots.slice(displayCount).map((_, index) => {
															
 
																+              const actualIndex = index + displayCount;
															
 
																+              return (
															
 
																+                <Select.Option key={actualIndex} value={actualIndex}>
															
 
																+                  {actualIndex + 1}
															
 
																+                </Select.Option>
															
 
																+              );
															
 
																+            })}
															
 
																+          </Select>
															
 
																+        </div>
															
 
																+      </>
															
 
																+    );
															
 
																+  };
															
 
																+
															
 
																+  if (!report) {
															
 
																+    return null;
															
 
																+  }
															
 
																+
															
 
																+  return (
															
 
																+    <NodeStatusHeader
															
 
																+      header={
															
 
																+        <>
															
 
																+          {renderIcon()}
															
 
																+          {renderDesc()}
															
 
																+          {renderCost()}
															
 
																+        </>
															
 
																+      }
															
 
																+    >
															
 
																+      <div
															
 
																+        style={{
															
 
																+          width: '100%',
															
 
																+          height: '100%',
															
 
																+          padding: '0px 2px 10px 2px',
															
 
																+        }}
															
 
																+      >
															
 
																+        {renderSnapshotNavigation()}
															
 
																+        <NodeStatusGroup title="Inputs" data={currentSnapshot?.inputs} />
															
 
																+        <NodeStatusGroup title="Outputs" data={currentSnapshot?.outputs} />
															
 
																+        <NodeStatusGroup title="Branch" data={currentSnapshot?.branch} optional />
															
 
																+        <NodeStatusGroup title="Data" data={currentSnapshot?.data} optional />
															
 
																+      </div>
															
 
																+    </NodeStatusHeader>
															
 
																+  );
															
 
																+};
															
--- a/src/components/testrun/node-status-bar/viewer/index.css
+++ b/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;
															
 
																+}
															
--- a/src/components/testrun/node-status-bar/viewer/index.tsx
+++ b/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<TreeNodeProps> = ({ 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 <span className="primitive-value null">null</span>;
															
 
																+    if (val === undefined) return <span className="primitive-value undefined">undefined</span>;
															
 
																+
															
 
																+    switch (typeof val) {
															
 
																+      case 'string':
															
 
																+        return (
															
 
																+          <span className="string">
															
 
																+            <span className="primitive-value-quote">{'"'}</span>
															
 
																+            <span className="primitive-value" onDoubleClick={() => handleCopy(val)}>
															
 
																+              {val}
															
 
																+            </span>
															
 
																+            <span className="primitive-value-quote">{'"'}</span>
															
 
																+          </span>
															
 
																+        );
															
 
																+      case 'number':
															
 
																+        return (
															
 
																+          <span className="primitive-value number" onDoubleClick={() => handleCopy(String(val))}>
															
 
																+            {val}
															
 
																+          </span>
															
 
																+        );
															
 
																+      case 'boolean':
															
 
																+        return (
															
 
																+          <span
															
 
																+            className="primitive-value boolean"
															
 
																+            onDoubleClick={() => handleCopy(val.toString())}
															
 
																+          >
															
 
																+            {val.toString()}
															
 
																+          </span>
															
 
																+        );
															
 
																+      default:
															
 
																+        return (
															
 
																+          <span className="primitive-value" onDoubleClick={() => handleCopy(String(val))}>
															
 
																+            {String(val)}
															
 
																+          </span>
															
 
																+        );
															
 
																+    }
															
 
																+  };
															
 
																+
															
 
																+  const renderChildren = () => {
															
 
																+    if (Array.isArray(value)) {
															
 
																+      return value.map((item, index) => (
															
 
																+        <TreeNode
															
 
																+          key={index}
															
 
																+          label={`${index + 1}.`}
															
 
																+          value={item}
															
 
																+          level={level + 1}
															
 
																+          isLast={index === value.length - 1}
															
 
																+        />
															
 
																+      ));
															
 
																+    } else {
															
 
																+      const entries = Object.entries(value);
															
 
																+      return entries.map(([key, val], index) => (
															
 
																+        <TreeNode
															
 
																+          key={key}
															
 
																+          label={`${key}:`}
															
 
																+          value={val}
															
 
																+          level={level + 1}
															
 
																+          isLast={index === entries.length - 1}
															
 
																+        />
															
 
																+      ));
															
 
																+    }
															
 
																+  };
															
 
																+
															
 
																+  return (
															
 
																+    <div className="tree-node">
															
 
																+      <div className="tree-node-header">
															
 
																+        {isExpandable(value) ? (
															
 
																+          <button
															
 
																+            className={`expand-button ${isExpanded ? 'expanded' : 'collapsed'}`}
															
 
																+            onClick={() => setIsExpanded(!isExpanded)}
															
 
																+          >
															
 
																+            ▶
															
 
																+          </button>
															
 
																+        ) : (
															
 
																+          <span className="expand-placeholder"></span>
															
 
																+        )}
															
 
																+        <span
															
 
																+          className="node-label"
															
 
																+          onClick={() =>
															
 
																+            handleCopy(
															
 
																+              JSON.stringify({
															
 
																+                [label]: value,
															
 
																+              })
															
 
																+            )
															
 
																+          }
															
 
																+        >
															
 
																+          {label}
															
 
																+        </span>
															
 
																+        {!isExpandable(value) && <span className="node-value">{renderPrimitiveValue(value)}</span>}
															
 
																+      </div>
															
 
																+      {isExpandable(value) && isExpanded && (
															
 
																+        <div className="tree-node-children">{renderChildren()}</div>
															
 
																+      )}
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
 
																+
															
 
																+export const DataStructureViewer: React.FC<DataStructureViewerProps> = ({ data, level = 0 }) => {
															
 
																+  if (data === null || data === undefined || typeof data !== 'object') {
															
 
																+    return (
															
 
																+      <div className="node-status-data-structure-viewer">
															
 
																+        <TreeNode label="value" value={data} level={0} />
															
 
																+      </div>
															
 
																+    );
															
 
																+  }
															
 
																+
															
 
																+  const entries = Object.entries(data);
															
 
																+
															
 
																+  return (
															
 
																+    <div className="node-status-data-structure-viewer">
															
 
																+      {entries.map(([key, value], index) => (
															
 
																+        <TreeNode
															
 
																+          key={key}
															
 
																+          label={key}
															
 
																+          value={value}
															
 
																+          level={0}
															
 
																+          isLast={index === entries.length - 1}
															
 
																+        />
															
 
																+      ))}
															
 
																+    </div>
															
 
																+  );
															
 
																+};
															
--- a/src/components/testrun/testrun-button/index.tsx
+++ b/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 ? (
															
 
																+      <Button
															
 
																+        disabled={props.disabled}
															
 
																+        onClick={onTestRun}
															
 
																+        icon={<IconPlay size="small" />}
															
 
																+        style={{ backgroundColor: 'rgba(0,178,60,1)', borderRadius: '8px', color: '#fff' }}
															
 
																+      >
															
 
																+        Test Run
															
 
																+      </Button>
															
 
																+    ) : (
															
 
																+      <Badge count={errorCount} position="rightTop" type="danger">
															
 
																+        <Button
															
 
																+          type="danger"
															
 
																+          disabled={props.disabled}
															
 
																+          onClick={onTestRun}
															
 
																+          icon={<IconPlay size="small" />}
															
 
																+          style={{ backgroundColor: 'rgba(255,115,0, 1)', borderRadius: '8px', color: '#fff' }}
															
 
																+        >
															
 
																+            Test Run
															
 
																+        </Button>
															
 
																+      </Badge>
															
 
																+    );
															
 
																+
															
 
																+  return (
															
 
																+    <>
															
 
																+      {button}
															
 
																+      <TestRunSideSheet visible={visible} onCancel={() => setVisible((v) => !v)} />
															
 
																+    </>
															
 
																+  );
															
 
																+}
															
--- a/src/components/testrun/testrun-sidesheet/index.tsx
+++ b/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<TestRunSideSheetProps> = ({ visible, onCancel }) => {
															
 
																+  const runtimeService = useService(WorkflowRuntimeService);
															
 
																+  const [isRunning, setRunning] = useState(false);
															
 
																+  const [value, setValue] = useState<string>(`{}`);
															
 
																+  const [error, setError] = useState<string | undefined>();
															
 
																+  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 = (
															
 
																+    <div
															
 
																+      style={{
															
 
																+        width: '100%',
															
 
																+        height: '80%',
															
 
																+        display: 'flex',
															
 
																+        flexDirection: 'column',
															
 
																+        justifyContent: 'center',
															
 
																+        alignItems: 'center',
															
 
																+        gap: 16,
															
 
																+      }}
															
 
																+    >
															
 
																+      <IconSpin spin size="large" />
															
 
																+      <div
															
 
																+        style={{
															
 
																+          fontSize: '18px',
															
 
																+        }}
															
 
																+      >
															
 
																+        Running...
															
 
																+      </div>
															
 
																+    </div>
															
 
																+  );
															
 
																+
															
 
																+  const renderForm = (
															
 
																+    <div>
															
 
																+      <div
															
 
																+        style={{
															
 
																+          fontSize: '15px',
															
 
																+          fontWeight: '500',
															
 
																+          marginBottom: '10px',
															
 
																+          color: '#333',
															
 
																+        }}
															
 
																+      >
															
 
																+        Input
															
 
																+      </div>
															
 
																+      <JsonViewer showSearch={false} height={300} value={value} onChange={setValue} />
															
 
																+      <div
															
 
																+        style={{
															
 
																+          color: 'red',
															
 
																+          fontSize: '14px',
															
 
																+          marginTop: '30px',
															
 
																+        }}
															
 
																+      >
															
 
																+        {error}
															
 
																+      </div>
															
 
																+
															
 
																+      <NodeStatusGroup title="Inputs" data={result?.inputs} optional disableCollapse />
															
 
																+      <NodeStatusGroup title="Outputs" data={result?.outputs} optional disableCollapse />
															
 
																+    </div>
															
 
																+  );
															
 
																+
															
 
																+  const renderButton = (
															
 
																+    <Button
															
 
																+      onClick={onTestRun}
															
 
																+      icon={isRunning ? <IconStop size="small" /> : <IconPlay size="small" />}
															
 
																+      style={{
															
 
																+        backgroundColor: isRunning ? 'rgba(87,104,161,0.08)' : 'rgba(0,178,60,1)',
															
 
																+        borderRadius: '8px',
															
 
																+        color: isRunning ? 'rgba(15,21,40,0.82)' : '#fff',
															
 
																+        marginBottom: '16px',
															
 
																+        width: '100%',
															
 
																+        height: '40px',
															
 
																+      }}
															
 
																+    >
															
 
																+      {isRunning ? 'Cancel' : 'Test Run'}
															
 
																+    </Button>
															
 
																+  );
															
 
																+
															
 
																+  return (
															
 
																+    <SideSheet
															
 
																+      title="Test Run"
															
 
																+      visible={visible}
															
 
																+      mask={false}
															
 
																+      onCancel={onClose}
															
 
																+      footer={renderButton}
															
 
																+    >
															
 
																+      {isRunning ? renderRunning : renderForm}
															
 
																+    </SideSheet>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/auto-layout.tsx
+++ b/src/components/tools/auto-layout.tsx
@@ -0,0 +1,26 @@
 
																+import { useCallback } from 'react';
															
 
																+
															
 
																+import { usePlayground, usePlaygroundTools } from '@flowgram.ai/free-layout-editor';
															
 
																+import { IconButton, Tooltip } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { IconAutoLayout } from '../../assets/icon-auto-layout';
															
 
																+
															
 
																+export const AutoLayout = () => {
															
 
																+  const tools = usePlaygroundTools();
															
 
																+  const playground = usePlayground();
															
 
																+  const autoLayout = useCallback(async () => {
															
 
																+    await tools.autoLayout();
															
 
																+  }, [tools]);
															
 
																+
															
 
																+  return (
															
 
																+    <Tooltip content={'Auto Layout'}>
															
 
																+      <IconButton
															
 
																+        disabled={playground.config.readonly}
															
 
																+        type="tertiary"
															
 
																+        theme="borderless"
															
 
																+        onClick={autoLayout}
															
 
																+        icon={IconAutoLayout}
															
 
																+      />
															
 
																+    </Tooltip>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/comment.tsx
+++ b/src/components/tools/comment.tsx
@@ -0,0 +1,76 @@
 
																+import { useState, useCallback } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  delay,
															
 
																+  usePlayground,
															
 
																+  useService,
															
 
																+  WorkflowDocument,
															
 
																+  WorkflowDragService,
															
 
																+  WorkflowSelectService,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+import { IconButton, Tooltip } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { WorkflowNodeType } from '../../nodes';
															
 
																+import { IconComment } from '../../assets/icon-comment';
															
 
																+
															
 
																+export const Comment = () => {
															
 
																+  const playground = usePlayground();
															
 
																+  const document = useService(WorkflowDocument);
															
 
																+  const selectService = useService(WorkflowSelectService);
															
 
																+  const dragService = useService(WorkflowDragService);
															
 
																+
															
 
																+  const [tooltipVisible, setTooltipVisible] = useState(false);
															
 
																+
															
 
																+  const calcNodePosition = useCallback(
															
 
																+    (mouseEvent: React.MouseEvent<HTMLButtonElement>) => {
															
 
																+      const mousePosition = playground.config.getPosFromMouseEvent(mouseEvent);
															
 
																+      return {
															
 
																+        x: mousePosition.x,
															
 
																+        y: mousePosition.y - 75,
															
 
																+      };
															
 
																+    },
															
 
																+    [playground]
															
 
																+  );
															
 
																+
															
 
																+  const createComment = useCallback(
															
 
																+    async (mouseEvent: React.MouseEvent<HTMLButtonElement>) => {
															
 
																+      setTooltipVisible(false);
															
 
																+      const canvasPosition = calcNodePosition(mouseEvent);
															
 
																+      // 创建节点
															
 
																+      const node = document.createWorkflowNodeByType(WorkflowNodeType.Comment, canvasPosition);
															
 
																+      // 等待节点渲染
															
 
																+      await delay(16);
															
 
																+      // 选中节点
															
 
																+      selectService.selectNode(node);
															
 
																+      // 开始拖拽
															
 
																+      dragService.startDragSelectedNodes(mouseEvent);
															
 
																+    },
															
 
																+    [selectService, calcNodePosition, document, dragService]
															
 
																+  );
															
 
																+
															
 
																+  return (
															
 
																+    <Tooltip
															
 
																+      trigger="custom"
															
 
																+      visible={tooltipVisible}
															
 
																+      onVisibleChange={setTooltipVisible}
															
 
																+      content="Comment"
															
 
																+    >
															
 
																+      <IconButton
															
 
																+        disabled={playground.config.readonly}
															
 
																+        icon={
															
 
																+          <IconComment
															
 
																+            style={{
															
 
																+              width: 16,
															
 
																+              height: 16,
															
 
																+            }}
															
 
																+          />
															
 
																+        }
															
 
																+        type="tertiary"
															
 
																+        theme="borderless"
															
 
																+        onClick={createComment}
															
 
																+        onMouseEnter={() => setTooltipVisible(true)}
															
 
																+        onMouseLeave={() => setTooltipVisible(false)}
															
 
																+      />
															
 
																+    </Tooltip>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/fit-view.tsx
+++ b/src/components/tools/fit-view.tsx
@@ -0,0 +1,17 @@
 
																+import { usePlaygroundTools } from '@flowgram.ai/free-layout-editor';
															
 
																+import { IconButton, Tooltip } from '@douyinfe/semi-ui';
															
 
																+import { IconExpand } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+export const FitView = () => {
															
 
																+  const tools = usePlaygroundTools();
															
 
																+  return (
															
 
																+    <Tooltip content="FitView">
															
 
																+      <IconButton
															
 
																+        icon={<IconExpand />}
															
 
																+        type="tertiary"
															
 
																+        theme="borderless"
															
 
																+        onClick={() => tools.fitView()}
															
 
																+      />
															
 
																+    </Tooltip>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/index.tsx
+++ b/src/components/tools/index.tsx
@@ -0,0 +1,77 @@
 
																+import { useState, useEffect } from 'react';
															
 
																+
															
 
																+import { useRefresh } from '@flowgram.ai/free-layout-editor';
															
 
																+import { useClientContext } from '@flowgram.ai/free-layout-editor';
															
 
																+import { Tooltip, IconButton, Divider } from '@douyinfe/semi-ui';
															
 
																+import { IconUndo, IconRedo } from '@douyinfe/semi-icons';
															
 
																+
															
 
																+import { TestRunButton } from '../testrun/testrun-button';
															
 
																+import { AddNode } from '../add-node';
															
 
																+import { ZoomSelect } from './zoom-select';
															
 
																+import { SwitchLine } from './switch-line';
															
 
																+import { ToolContainer, ToolSection } from './styles';
															
 
																+import { Readonly } from './readonly';
															
 
																+import { MinimapSwitch } from './minimap-switch';
															
 
																+import { Minimap } from './minimap';
															
 
																+import { Interactive } from './interactive';
															
 
																+import { FitView } from './fit-view';
															
 
																+import { Comment } from './comment';
															
 
																+import { AutoLayout } from './auto-layout';
															
 
																+
															
 
																+export const DemoTools = () => {
															
 
																+  const { history, playground } = useClientContext();
															
 
																+  const [canUndo, setCanUndo] = useState(false);
															
 
																+  const [canRedo, setCanRedo] = useState(false);
															
 
																+  const [minimapVisible, setMinimapVisible] = useState(true);
															
 
																+  useEffect(() => {
															
 
																+    const disposable = history.undoRedoService.onChange(() => {
															
 
																+      setCanUndo(history.canUndo());
															
 
																+      setCanRedo(history.canRedo());
															
 
																+    });
															
 
																+    return () => disposable.dispose();
															
 
																+  }, [history]);
															
 
																+  const refresh = useRefresh();
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    const disposable = playground.config.onReadonlyOrDisabledChange(() => refresh());
															
 
																+    return () => disposable.dispose();
															
 
																+  }, [playground]);
															
 
																+
															
 
																+  return (
															
 
																+    <ToolContainer className="demo-free-layout-tools">
															
 
																+      <ToolSection>
															
 
																+        <Interactive />
															
 
																+        <AutoLayout />
															
 
																+        <SwitchLine />
															
 
																+        <ZoomSelect />
															
 
																+        <FitView />
															
 
																+        <MinimapSwitch minimapVisible={minimapVisible} setMinimapVisible={setMinimapVisible} />
															
 
																+        <Minimap visible={minimapVisible} />
															
 
																+        <Readonly />
															
 
																+        <Comment />
															
 
																+        <Tooltip content="Undo">
															
 
																+          <IconButton
															
 
																+            type="tertiary"
															
 
																+            theme="borderless"
															
 
																+            icon={<IconUndo />}
															
 
																+            disabled={!canUndo || playground.config.readonly}
															
 
																+            onClick={() => history.undo()}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+        <Tooltip content="Redo">
															
 
																+          <IconButton
															
 
																+            type="tertiary"
															
 
																+            theme="borderless"
															
 
																+            icon={<IconRedo />}
															
 
																+            disabled={!canRedo || playground.config.readonly}
															
 
																+            onClick={() => history.redo()}
															
 
																+          />
															
 
																+        </Tooltip>
															
 
																+        <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
															
 
																+        <AddNode disabled={playground.config.readonly} />
															
 
																+        <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
															
 
																+        <TestRunButton disabled={playground.config.readonly} />
															
 
																+      </ToolSection>
															
 
																+    </ToolContainer>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/interactive.tsx
+++ b/src/components/tools/interactive.tsx
@@ -0,0 +1,96 @@
 
																+import { useEffect, useState } from 'react';
															
 
																+
															
 
																+import {
															
 
																+  usePlaygroundTools,
															
 
																+  type InteractiveType as IdeInteractiveType,
															
 
																+} from '@flowgram.ai/free-layout-editor';
															
 
																+import { Tooltip, Popover } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { MousePadSelector } from './mouse-pad-selector';
															
 
																+
															
 
																+export const CACHE_KEY = 'workflow_prefer_interactive_type';
															
 
																+export const SHOW_KEY = 'show_workflow_interactive_type_guide';
															
 
																+export const IS_MAC_OS = /(Macintosh|MacIntel|MacPPC|Mac68K|iPad)/.test(navigator.userAgent);
															
 
																+
															
 
																+export const getPreferInteractiveType = () => {
															
 
																+  const data = localStorage.getItem(CACHE_KEY) as string;
															
 
																+  if (data && [InteractiveType.Mouse, InteractiveType.Pad].includes(data as InteractiveType)) {
															
 
																+    return data;
															
 
																+  }
															
 
																+  return IS_MAC_OS ? InteractiveType.Pad : InteractiveType.Mouse;
															
 
																+};
															
 
																+
															
 
																+export const setPreferInteractiveType = (type: InteractiveType) => {
															
 
																+  localStorage.setItem(CACHE_KEY, type);
															
 
																+};
															
 
																+
															
 
																+export enum InteractiveType {
															
 
																+  Mouse = 'MOUSE',
															
 
																+  Pad = 'PAD',
															
 
																+}
															
 
																+
															
 
																+export const Interactive = () => {
															
 
																+  const tools = usePlaygroundTools();
															
 
																+  const [visible, setVisible] = useState(false);
															
 
																+
															
 
																+  const [interactiveType, setInteractiveType] = useState<InteractiveType>(
															
 
																+    () => getPreferInteractiveType() as InteractiveType
															
 
																+  );
															
 
																+
															
 
																+  const [showInteractivePanel, setShowInteractivePanel] = useState(false);
															
 
																+
															
 
																+  const mousePadTooltip =
															
 
																+    interactiveType === InteractiveType.Mouse ? 'Mouse-Friendly' : 'Touchpad-Friendly';
															
 
																+
															
 
																+  useEffect(() => {
															
 
																+    tools.setMouseScrollDelta((zoom) => zoom / 20);
															
 
																+
															
 
																+    // read from localStorage
															
 
																+    const preferInteractiveType = getPreferInteractiveType();
															
 
																+    tools.setInteractiveType(preferInteractiveType as IdeInteractiveType);
															
 
																+  }, []);
															
 
																+
															
 
																+  const handleClose = () => {
															
 
																+    setVisible(false);
															
 
																+  };
															
 
																+
															
 
																+  return (
															
 
																+    <Popover trigger="custom" position="top" visible={visible} onClickOutSide={handleClose}>
															
 
																+      <Tooltip
															
 
																+        content={mousePadTooltip}
															
 
																+        style={{ display: showInteractivePanel ? 'none' : 'block' }}
															
 
																+      >
															
 
																+        <div className="workflow-toolbar-interactive">
															
 
																+          <MousePadSelector
															
 
																+            value={interactiveType}
															
 
																+            onChange={(value) => {
															
 
																+              setInteractiveType(value);
															
 
																+              setPreferInteractiveType(value);
															
 
																+              tools.setInteractiveType(value as unknown as IdeInteractiveType);
															
 
																+            }}
															
 
																+            onPopupVisibleChange={setShowInteractivePanel}
															
 
																+            containerStyle={{
															
 
																+              border: 'none',
															
 
																+              height: '32px',
															
 
																+              width: '32px',
															
 
																+              justifyContent: 'center',
															
 
																+              alignItems: 'center',
															
 
																+              gap: '2px',
															
 
																+              padding: '4px',
															
 
																+              borderRadius: 'var(--small, 6px)',
															
 
																+            }}
															
 
																+            iconStyle={{
															
 
																+              margin: '0',
															
 
																+              width: '16px',
															
 
																+              height: '16px',
															
 
																+            }}
															
 
																+            arrowStyle={{
															
 
																+              width: '12px',
															
 
																+              height: '12px',
															
 
																+            }}
															
 
																+          />
															
 
																+        </div>
															
 
																+      </Tooltip>
															
 
																+    </Popover>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/minimap-switch.tsx
+++ b/src/components/tools/minimap-switch.tsx
@@ -0,0 +1,21 @@
 
																+import { Tooltip, IconButton } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { UIIconMinimap } from './styles';
															
 
																+
															
 
																+export const MinimapSwitch = (props: {
															
 
																+  minimapVisible: boolean;
															
 
																+  setMinimapVisible: (visible: boolean) => void;
															
 
																+}) => {
															
 
																+  const { minimapVisible, setMinimapVisible } = props;
															
 
																+
															
 
																+  return (
															
 
																+    <Tooltip content="Minimap">
															
 
																+      <IconButton
															
 
																+        type="tertiary"
															
 
																+        theme="borderless"
															
 
																+        icon={<UIIconMinimap visible={minimapVisible} />}
															
 
																+        onClick={() => setMinimapVisible(!minimapVisible)}
															
 
																+      />
															
 
																+    </Tooltip>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/minimap.tsx
+++ b/src/components/tools/minimap.tsx
@@ -0,0 +1,33 @@
 
																+import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
															
 
																+import { useService } from '@flowgram.ai/free-layout-editor';
															
 
																+
															
 
																+import { MinimapContainer } from './styles';
															
 
																+
															
 
																+export const Minimap = ({ visible }: { visible?: boolean }) => {
															
 
																+  const minimapService = useService(FlowMinimapService);
															
 
																+  if (!visible) {
															
 
																+    return <></>;
															
 
																+  }
															
 
																+  return (
															
 
																+    <MinimapContainer>
															
 
																+      <MinimapRender
															
 
																+        service={minimapService}
															
 
																+        panelStyles={{}}
															
 
																+        containerStyles={{
															
 
																+          pointerEvents: 'auto',
															
 
																+          position: 'relative',
															
 
																+          top: 'unset',
															
 
																+          right: 'unset',
															
 
																+          bottom: 'unset',
															
 
																+          left: 'unset',
															
 
																+        }}
															
 
																+        inactiveStyle={{
															
 
																+          opacity: 1,
															
 
																+          scale: 1,
															
 
																+          translateX: 0,
															
 
																+          translateY: 0,
															
 
																+        }}
															
 
																+      />
															
 
																+    </MinimapContainer>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/mouse-pad-selector.less
+++ b/src/components/tools/mouse-pad-selector.less
@@ -0,0 +1,112 @@
 
																+/* stylelint-disable no-descending-specificity */
															
 
																+/* stylelint-disable selector-class-pattern */
															
 
																+.ui-mouse-pad-selector {
															
 
																+  position: relative;
															
 
																+
															
 
																+  display: flex;
															
 
																+  align-items: center;
															
 
																+
															
 
																+  box-sizing: border-box;
															
 
																+  width: 68px;
															
 
																+  height: 32px;
															
 
																+  padding: 8px 12px;
															
 
																+
															
 
																+  border: 1px solid rgba(29, 28, 35, 8%);
															
 
																+  border-radius: 8px;
															
 
																+
															
 
																+  &-icon {
															
 
																+    height: 20px;
															
 
																+    margin-right: 12px;
															
 
																+  }
															
 
																+
															
 
																+  &-arrow {
															
 
																+    height: 16px;
															
 
																+    font-size: 12px;
															
 
																+  }
															
 
																+
															
 
																+  &-popover {
															
 
																+    padding: 16px;
															
 
																+
															
 
																+    &-options {
															
 
																+      display: flex;
															
 
																+      gap: 12px;
															
 
																+      margin-top: 12px;
															
 
																+    }
															
 
																+
															
 
																+    .mouse-pad-option {
															
 
																+      box-sizing: border-box;
															
 
																+      width: 220px;
															
 
																+      padding-bottom: 20px;
															
 
																+
															
 
																+      text-align: center;
															
 
																+
															
 
																+      background: var(--coz-mg-card, #FFF);
															
 
																+      border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
															
 
																+      border-radius: var(--default, 8px);
															
 
																+
															
 
																+      &-icon {
															
 
																+        padding-top: 26px;
															
 
																+      }
															
 
																+
															
 
																+      &-title {
															
 
																+        padding-top: 8px;
															
 
																+      }
															
 
																+
															
 
																+      &-subTitle {
															
 
																+        padding: 4px 12px 0;
															
 
																+      }
															
 
																+
															
 
																+      &-icon-selected {
															
 
																+        color: rgb(19 0 221);
															
 
																+      }
															
 
																+
															
 
																+      &-title-selected {
															
 
																+        color: var(--coz-fg-hglt, #4E40E5);
															
 
																+      }
															
 
																+
															
 
																+      &-subTitle-selected {
															
 
																+        color: var(--coz-fg-hglt, #4E40E5);
															
 
																+      }
															
 
																+
															
 
																+      &-selected {
															
 
																+        cursor: pointer;
															
 
																+        background-color: var(--coz-mg-hglt, rgba(186, 192, 255, 20%));
															
 
																+        border: 1px solid var(--coz-stroke-hglt, #4E40E5);
															
 
																+        border-radius: var(--default, 8px);
															
 
																+      }
															
 
																+
															
 
																+      &:hover:not(&-selected) {
															
 
																+        cursor: pointer;
															
 
																+
															
 
																+        background-color: var(--coz-mg-card-hovered, #FFF);
															
 
																+        border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
															
 
																+        border-radius: var(--default, 8px);
															
 
																+        box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 16%), 0 16px 48px 0 rgba(0, 0, 0, 8%);
															
 
																+      }
															
 
																+
															
 
																+      &:active:not(&-selected) {
															
 
																+        background-color: rgba(46, 46, 56, 12%);
															
 
																+      }
															
 
																+
															
 
																+      &:last-of-type {
															
 
																+        padding-top: 13px;
															
 
																+      }
															
 
																+    }
															
 
																+  }
															
 
																+
															
 
																+  &:hover {
															
 
																+    cursor: pointer;
															
 
																+    background-color: rgba(46, 46, 56, 8%);
															
 
																+    border-color: rgba(77, 83, 232, 100%);
															
 
																+  }
															
 
																+
															
 
																+  &:active,
															
 
																+  &:focus {
															
 
																+    background-color: rgba(46, 46, 56, 12%);
															
 
																+    border-color: rgba(77, 83, 232, 100%);
															
 
																+  }
															
 
																+
															
 
																+  &-active {
															
 
																+    border-color: rgba(77, 83, 232, 100%);
															
 
																+  }
															
 
																+}
															
--- a/src/components/tools/mouse-pad-selector.tsx
+++ b/src/components/tools/mouse-pad-selector.tsx
@@ -0,0 +1,117 @@
 
																+import React, { type CSSProperties, useState } from 'react';
															
 
																+
															
 
																+import { Popover, Typography } from '@douyinfe/semi-ui';
															
 
																+
															
 
																+import { IconPad, IconPadTool } from '../../assets/icon-pad';
															
 
																+import { IconMouse, IconMouseTool } from '../../assets/icon-mouse';
															
 
																+
															
 
																+import './mouse-pad-selector.less';
															
 
																+
															
 
																+const { Title, Paragraph } = Typography;
															
 
																+
															
 
																+export enum InteractiveType {
															
 
																+  Mouse = 'MOUSE',
															
 
																+  Pad = 'PAD',
															
 
																+}
															
 
																+
															
 
																+export interface MousePadSelectorProps {
															
 
																+  value: InteractiveType;
															
 
																+  onChange: (value: InteractiveType) => void;
															
 
																+  onPopupVisibleChange?: (visible: boolean) => void;
															
 
																+  containerStyle?: CSSProperties;
															
 
																+  iconStyle?: CSSProperties;
															
 
																+  arrowStyle?: CSSProperties;
															
 
																+}
															
 
																+
															
 
																+const InteractiveItem: React.FC<{
															
 
																+  title: string;
															
 
																+  subTitle: string;
															
 
																+  icon: React.ReactNode;
															
 
																+  value: InteractiveType;
															
 
																+  selected: boolean;
															
 
																+  onChange: (value: InteractiveType) => void;
															
 
																+}> = ({ title, subTitle, icon, onChange, value, selected }) => (
															
 
																+  <div
															
 
																+    className={`mouse-pad-option ${selected ? 'mouse-pad-option-selected' : ''}`}
															
 
																+    onClick={() => onChange(value)}
															
 
																+  >
															
 
																+    <div className={`mouse-pad-option-icon ${selected ? 'mouse-pad-option-icon-selected' : ''}`}>
															
 
																+      {icon}
															
 
																+    </div>
															
 
																+    <Title
															
 
																+      heading={6}
															
 
																+      className={`mouse-pad-option-title ${selected ? 'mouse-pad-option-title-selected' : ''}`}
															
 
																+    >
															
 
																+      {title}
															
 
																+    </Title>
															
 
																+    <Paragraph
															
 
																+      type="tertiary"
															
 
																+      className={`mouse-pad-option-subTitle ${
															
 
																+        selected ? 'mouse-pad-option-subTitle-selected' : ''
															
 
																+      }`}
															
 
																+    >
															
 
																+      {subTitle}
															
 
																+    </Paragraph>
															
 
																+  </div>
															
 
																+);
															
 
																+
															
 
																+export const MousePadSelector: React.FC<
															
 
																+  MousePadSelectorProps & React.RefAttributes<HTMLDivElement>
															
 
																+> = ({ value, onChange, onPopupVisibleChange, containerStyle, iconStyle, arrowStyle }) => {
															
 
																+  const isMouse = value === InteractiveType.Mouse;
															
 
																+  const [visible, setVisible] = useState(false);
															
 
																+
															
 
																+  return (
															
 
																+    <Popover
															
 
																+      trigger="custom"
															
 
																+      position="topLeft"
															
 
																+      closeOnEsc
															
 
																+      visible={visible}
															
 
																+      onVisibleChange={(v) => {
															
 
																+        onPopupVisibleChange?.(v);
															
 
																+      }}
															
 
																+      onClickOutSide={() => {
															
 
																+        setVisible(false);
															
 
																+      }}
															
 
																+      spacing={20}
															
 
																+      content={
															
 
																+        <div className={'ui-mouse-pad-selector-popover'}>
															
 
																+          <Typography.Title heading={4}>{'Interaction mode'}</Typography.Title>
															
 
																+          <div className={'ui-mouse-pad-selector-popover-options'}>
															
 
																+            <InteractiveItem
															
 
																+              title={'Mouse-Friendly'}
															
 
																+              subTitle={'Drag the canvas with the left mouse button, zoom with the scroll wheel.'}
															
 
																+              value={InteractiveType.Mouse}
															
 
																+              selected={value === InteractiveType.Mouse}
															
 
																+              icon={<IconMouse />}
															
 
																+              onChange={onChange}
															
 
																+            />
															
 
																+
															
 
																+            <InteractiveItem
															
 
																+              title={'Touchpad-Friendly'}
															
 
																+              subTitle={
															
 
																+                'Drag with two fingers moving in the same direction, zoom by pinching or spreading two fingers.'
															
 
																+              }
															
 
																+              value={InteractiveType.Pad}
															
 
																+              selected={value === InteractiveType.Pad}
															
 
																+              icon={<IconPad />}
															
 
																+              onChange={onChange}
															
 
																+            />
															
 
																+          </div>
															
 
																+        </div>
															
 
																+      }
															
 
																+    >
															
 
																+      <div
															
 
																+        className={`ui-mouse-pad-selector ${visible ? 'ui-mouse-pad-selector-active' : ''}`}
															
 
																+        onClick={() => {
															
 
																+          setVisible(!visible);
															
 
																+        }}
															
 
																+        style={containerStyle}
															
 
																+      >
															
 
																+        <div className={'ui-mouse-pad-selector-icon'} style={iconStyle}>
															
 
																+          {isMouse ? <IconMouseTool /> : <IconPadTool />}
															
 
																+        </div>
															
 
																+      </div>
															
 
																+    </Popover>
															
 
																+  );
															
 
																+};
															
--- a/src/components/tools/readonly.tsx
+++ b/src/components/tools/readonly.tsx
	`@@ -0,0 +1 @@`
			`+export { CommentRender } from './components';`
	`@@ -0,0 +1,2 @@`
			`+export { GroupNodeRender } from './node-render';`
			`+export { IconGroup } from './icon-group';`
	`@@ -0,0 +1 @@`
			`+export const isMacOS = /(Macintosh\|MacIntel\|MacPPC\|Mac68K\|iPad)/.test(navigator.userAgent);`
	`@@ -0,0 +1,2 @@`
			`+export { SidebarProvider } from './sidebar-provider';`
			`+export { SidebarRenderer } from './sidebar-renderer';`