feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/workflow/feature-encapsulate/src/render/hooks/use-encapsulate.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useEffect, useState } from 'react';
+
+import { useService } from '@flowgram-adapter/free-layout-editor';
+
+import { EncapsulateRenderService } from '../encapsulate-render-service';
+import { EncapsulateService } from '../../encapsulate';
+
+export const useEncapsulate = () => {
+  const encapsulateService = useService<EncapsulateService>(EncapsulateService);
+  const encapsulateRenderService = useService<EncapsulateRenderService>(
+    EncapsulateRenderService,
+  );
+  const [loading, setLoading] = useState(encapsulateRenderService.loading);
+
+  useEffect(() => {
+    const disposable = encapsulateRenderService.onLoadingChange(setLoading);
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const handleEncapsulate = async () => {
+    encapsulateRenderService.setLoading(true);
+    try {
+      await encapsulateService.encapsulate();
+      encapsulateRenderService.closeModal();
+    } catch (e) {
+      console.error(e);
+    }
+    encapsulateRenderService.setLoading(false);
+  };
+
+  return {
+    handleEncapsulate,
+    loading,
+  };
+};

frontend/packages/workflow/feature-encapsulate/src/render/hooks/use-selected-nodes.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useEffect, useState } from 'react';
+
+import { useService } from '@flowgram-adapter/free-layout-editor';
+import { WorkflowSelectService } from '@flowgram-adapter/free-layout-editor';
+
+/**
+ * 选中节点
+ */
+export function useSelectedNodes() {
+  const selectService = useService<WorkflowSelectService>(
+    WorkflowSelectService,
+  );
+
+  const [selectedNodes, setSelectedNodes] = useState(
+    selectService.selectedNodes,
+  );
+
+  useEffect(() => {
+    const disposable = selectService.onSelectionChanged(() => {
+      setSelectedNodes(selectService.selectedNodes);
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  });
+
+  return {
+    selectedNodes,
+  };
+}

frontend/packages/workflow/feature-encapsulate/src/render/hooks/use-validate.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState, useRef } from 'react';
+
+import { useDebounceEffect } from 'ahooks';
+import { useService } from '@flowgram-adapter/free-layout-editor';
+
+import {
+  EncapsulateValidateErrorCode,
+  type EncapsulateValidateError,
+} from '../../validate';
+import { EncapsulateService } from '../../encapsulate';
+import { useVariableChange } from './use-variable-change';
+import { useSelectedNodes } from './use-selected-nodes';
+
+const DEBOUNCE_DELAY = 100;
+
+/**
+ * 校验
+ */
+export function useValidate() {
+  const { selectedNodes } = useSelectedNodes();
+  const encapsulateService = useService<EncapsulateService>(EncapsulateService);
+
+  const [validating, setValidating] = useState(false);
+  const [errors, setErrors] = useState<EncapsulateValidateError[]>([]);
+  const validationIdRef = useRef(0); // 新增校验ID跟踪
+
+  const handleValidate = async () => {
+    if (selectedNodes.length <= 1) {
+      return;
+    }
+
+    setValidating(true);
+    // 生成当前校验ID
+    const currentValidationId = ++validationIdRef.current;
+
+    try {
+      const validateResult = await encapsulateService.validate();
+
+      // 只处理最后一次校验结果
+      if (currentValidationId === validationIdRef.current) {
+        setErrors(validateResult.getErrors());
+        setValidating(false);
+      }
+    } catch (error) {
+      setErrors([
+        {
+          code: EncapsulateValidateErrorCode.VALIDATE_ERROR,
+          message: (error as Error).message,
+        },
+      ]);
+      setValidating(false);
+    }
+  };
+
+  const { version: variableVersion } = useVariableChange(selectedNodes);
+
+  useDebounceEffect(
+    () => {
+      handleValidate();
+    },
+    [selectedNodes, variableVersion],
+    {
+      wait: DEBOUNCE_DELAY,
+    },
+  );
+
+  return {
+    validating,
+    errors,
+  };
+}

frontend/packages/workflow/feature-encapsulate/src/render/hooks/use-variable-change.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useEffect, useState } from 'react';
+
+import { FlowNodeVariableData } from '@coze-workflow/variable';
+
+export const useVariableChange = nodes => {
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => {
+    const disposables = nodes
+      .filter(node => node.getData(FlowNodeVariableData)?.public?.available)
+      .map(node =>
+        node.getData(FlowNodeVariableData).public.available.onDataChange(() => {
+          setVersion(version + 1);
+        }),
+      );
+    return () => {
+      disposables.forEach(disposable => disposable?.dispose());
+    };
+  }, [nodes, version]);
+
+  return {
+    version,
+  };
+};