@fudanda/workflow 0.0.0-stage → 2.20261024.1-beta.1

package/vendor/coze/original/sub-canvas-background.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 type { FC } from 'react';
+
+import { useNodeRender } from '@flowgram-adapter/free-layout-editor';
+
+import styles from './index.module.less';
+
+export const SubCanvasBackground: FC = () => {
+  const { node } = useNodeRender();
+  return (
+    <div
+      className={styles['sub-canvas-background']}
+      data-flow-editor-selectable="true"
+    >
+      <svg width="100%" height="100%">
+        <pattern
+          id="sub-canvas-dot-pattern"
+          width="20"
+          height="20"
+          patternUnits="userSpaceOnUse"
+        >
+          <circle cx="1" cy="1" r="1" stroke="#eceeef" fillOpacity="0.5" />
+        </pattern>
+        <rect
+          width="100%"
+          height="100%"
+          fill="url(#sub-canvas-dot-pattern)"
+          data-node-panel-container={node.id}
+        />
+      </svg>
+    </div>
+  );
+};

package/vendor/coze/original/sub-canvas-container.less

@@ -0,0 +1,16 @@
+.sub-canvas-container {
+  display: flex;
+  align-items: flex-start;
+
+  box-sizing: border-box;
+  min-width: 400px;
+  min-height: 300px;
+
+  background-color: #f2f3f5;
+  border-radius: 8px;
+  outline: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+
+  &:global(.selected) {
+    outline: 1px solid var(--coz-stroke-hglt, #4E40E5);
+  }
+}

package/vendor/coze/original/sub-canvas-container.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable react-hooks/exhaustive-deps -- custom */
+import { useEffect, useState, type FC, type ReactNode } from 'react';
+
+import classNames from 'classnames';
+import { FlowNodeTransformData } from '@flowgram-adapter/free-layout-editor';
+import {
+  useNodeRender,
+  useService,
+} from '@flowgram-adapter/free-layout-editor';
+
+import { WorkflowEditService } from '@/services';
+
+import { useParentNode, useSubCanvasRenderProps } from '../../hooks';
+
+import styles from './index.module.less';
+
+interface ISubCanvasContainer {
+  children: ReactNode[];
+}
+
+export const SubCanvasContainer: FC<ISubCanvasContainer> = ({ children }) => {
+  const { node, selected, selectNode, nodeRef } = useNodeRender();
+  const editService = useService(WorkflowEditService);
+  const nodeMeta = node.getNodeMeta();
+  const { size = { width: 300, height: 200 } } = nodeMeta;
+  const { style = {} } = useSubCanvasRenderProps();
+
+  const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  const [width, setWidth] = useState(size.width);
+  const [height, setHeight] = useState(size.height);
+
+  const parentNode = useParentNode();
+
+  useEffect(() => {
+    const updateSize = () => {
+      // When there is no sub-node
+      if (node.collapsedChildren.length === 0) {
+        const parentTransform = parentNode.getData<FlowNodeTransformData>(
+          FlowNodeTransformData,
+        );
+        setWidth(parentTransform.bounds.width ?? size.width);
+        setHeight(parentTransform.bounds.height ?? size.height);
+        return;
+      }
+      // When there is a sub-node, it only listens for width and height changes
+      if (width !== transform.bounds.width) {
+        setWidth(transform.bounds.width);
+      }
+      if (height !== transform.bounds.height) {
+        setHeight(transform.bounds.height);
+      }
+    };
+    updateSize();
+    const dispose = transform.onDataChange(() => {
+      updateSize();
+    });
+    return () => dispose.dispose();
+  }, [parentNode, transform]);
+
+  return (
+    <div
+      className={classNames(styles['sub-canvas-container'], {
+        selected,
+      })}
+      style={{
+        width,
+        height,
+        ...style,
+      }}
+      ref={nodeRef}
+      data-node-selected={String(selected)}
+      onMouseDown={selectNode}
+      onClick={e => {
+        selectNode(e);
+        editService.focusNode();
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/vendor/coze/original/sub-canvas-header.less

@@ -0,0 +1,75 @@
+.sub-canvas-header {
+  cursor: move;
+
+  z-index: 0;
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+
+  width: 100%;
+  height: 48px;
+  padding: 16px;
+
+  border-radius: 8px 8px 0 0;
+
+  .sub-canvas-logo {
+    position: relative;
+
+    flex-shrink: 0;
+
+    width: 24px;
+    height: 24px;
+
+    border-radius: 4px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px var(--coz-stroke-plus);
+    }
+
+    > img {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+    }
+  }
+
+  .sub-canvas-title {
+    margin: 0;
+    padding: 0;
+
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 22px;
+    color: var(--coz-fg-primary, rgba(6, 7, 9, 80%));
+    text-overflow: ellipsis;
+  }
+
+  .sub-canvas-tooltip {
+    height: 100%;
+  }
+
+  .sub-canvas-tooltip-icon {
+    display: flex;
+    align-items: center;
+
+    width: 16px;
+    height: 100%;
+
+    color: #A7A9B0;
+  }
+}

package/vendor/coze/original/sub-canvas-header.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { useMemo, type FC } from 'react';
+
+import { useNodeRender } from '@flowgram-adapter/free-layout-editor';
+import { WorkflowNodeData } from '@coze-workflow/nodes';
+import { useNodeTestId } from '@coze-workflow/base';
+import { IconInfo } from '@coze-arch/bot-icons';
+
+import AutoSizeTooltip from '@/ui-components/auto-size-tooltip';
+import { getBgColor } from '@/form-extensions/components/node-header/utils/get-bg-color';
+
+import { useParentNode, useSubCanvasRenderProps } from '../../hooks';
+import { NodeIcon } from '../../../node-icon';
+
+import styles from './index.module.less';
+
+export const SubCanvasHeader: FC = () => {
+  const { startDrag, onFocus, onBlur } = useNodeRender();
+  const { getNodeTestId, concatTestId } = useNodeTestId();
+
+  const { title, tooltip } = useSubCanvasRenderProps();
+
+  const parentNode = useParentNode();
+
+  const bgColor = useMemo(() => {
+    const parentNodeDataEntity =
+      parentNode.getData<WorkflowNodeData>(WorkflowNodeData);
+    const parentNodeData = parentNodeDataEntity.getNodeData();
+    if (parentNodeData?.mainColor) {
+      const OPACITY = 0.08;
+      return `linear-gradient(${getBgColor(
+        parentNodeData.mainColor,
+        OPACITY,
+      )} 0%, var(--coz-bg-plus) 100%)`;
+    } else {
+      return 'var(--coz-bg-plus)';
+    }
+  }, [parentNode]);
+
+  return (
+    <div
+      className={styles['sub-canvas-header']}
+      draggable={true}
+      onMouseDown={e => {
+        startDrag(e);
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      style={{
+        background: bgColor,
+      }}
+    >
+      <NodeIcon
+        className={styles['sub-canvas-logo']}
+        nodeId={parentNode.id}
+        size={24}
+        alt="logo"
+      />
+      <p
+        className={styles['sub-canvas-title']}
+        data-testid={concatTestId(getNodeTestId(), 'title')}
+      >
+        {title}
+      </p>
+      {tooltip ? (
+        <AutoSizeTooltip
+          showArrow
+          position="top"
+          content={<span>{tooltip}</span>}
+          className={styles['sub-canvas-tooltip']}
+        >
+          <IconInfo
+            className={styles['sub-canvas-tooltip-icon']}
+            data-testid={concatTestId(getNodeTestId(), 'tips')}
+          />
+        </AutoSizeTooltip>
+      ) : null}
+    </div>
+  );
+};

package/vendor/coze/original/test-form-sheet-header.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { useCallback } from 'react';
+
+import cls from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozCross } from '@coze-arch/coze-design/icons';
+import { IconButton } from '@coze-arch/coze-design';
+
+import { useFloatLayoutService } from '@/hooks/use-float-layout-service';
+import { useOpenTraceListPanel } from '@/hooks';
+import { useTestRunStatus } from '@/components/test-run/hooks/use-test-run-status';
+import { START_NODE_ID } from '@/components/test-run/constants';
+
+import { ExecuteState } from '../execute-result/execute-result-side-sheet/components/execute-state';
+
+import styles from './styles.module.less';
+
+export const TestFormSheetHeaderV2 = () => {
+  const { running } = useTestRunStatus(START_NODE_ID);
+
+  const floatLayoutService = useFloatLayoutService();
+
+  const { open } = useOpenTraceListPanel();
+
+  const handleOpenTraceBottomSheet = useCallback(() => {
+    // will support soon
+    if (IS_OPEN_SOURCE) {
+      return;
+    }
+    open();
+  }, [open]);
+
+  const handleClose = useCallback(() => {
+    floatLayoutService.close('right');
+  }, [floatLayoutService]);
+
+  return (
+    <div className={styles['test-form-sheet-header-v2']}>
+      <div className={cls(styles['header-title-v2'])}>
+        {I18n.t('workflow_detail_title_testrun')}
+      </div>
+
+      <div className="flex items-center">
+        {!running && (
+          <ExecuteState
+            onClick={handleOpenTraceBottomSheet}
+            hiddenStateText
+            extra={
+              // will support soon
+              !IS_OPEN_SOURCE && (
+                <span className={cls('cursor-pointer font-medium')}>
+                  {I18n.t('workflow_testset_view_log')}
+                </span>
+              )
+            }
+          />
+        )}
+        <IconButton
+          className={'ml-[4px]'}
+          icon={<IconCozCross className={'text-[18px]'} />}
+          color="secondary"
+          onClick={handleClose}
+        />
+      </div>
+    </div>
+  );
+};

package/vendor/coze/original/test-form-sheet.less

@@ -0,0 +1,178 @@
+.test-form-sheet-header-v2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 48px;
+  min-height: 48px;
+  padding: 0 8px 0 16px;
+
+  background: var(--coz-bg-plus, rgba(252, 252, 255, 100%));
+  border-bottom: 1px solid var(--coz-stroke-primary);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+
+  .header-title-v2 {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .animation-show-transform  {
+    animation: show-animation-transform 0.3s forwards;
+  }
+
+  .animation-hide-transform {
+    animation: hide-animation-transform 0.3s forwards;
+  }
+
+  @keyframes show-animation-transform {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes hide-animation-transform  {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+
+
+  .animation-show-opacity {
+    animation: show-animation-opacity 0.3s forwards;
+  }
+
+  .animation-hide-opacity {
+    animation: hide-animation-opacity 0.3s forwards;
+  }
+
+  @keyframes show-animation-opacity {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes hide-animation-opacity {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+.test-form-v2 {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  height: 100%;
+
+  background: var(--coz-bg-plus, rgba(252, 252, 255, 100%));
+  border: 1px solid #e6e8f2;
+  border-radius: 8px;
+}
+
+
+.test-form-content {
+  position: relative;
+
+  overflow-y: auto;
+  flex: 1;
+
+  width: 100%;
+  height: 100%;
+}
+
+.test-form-sheet-footer-v2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 56px;
+
+  background: var(--coz-bg-plus, rgba(252, 252, 255, 100%));
+  border-top: 1px solid var(--coz-stroke-primary);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+
+  button {
+    width: calc(100% - 32px);
+  }
+}
+
+
+.auto-gen-button {
+  background: linear-gradient(90deg, rgba(148, 152, 247, 44%) 0%, rgba(216, 138, 255, 46%) 100%);
+
+  svg {
+    color: #4E40E5;
+  }
+}
+
+.test-form-content-absolute {
+  position: absolute;
+  overflow: hidden;
+  height: 0;
+}
+
+.title-border-top {
+  border-top: 1px solid var(--coz-stroke-primary);
+}
+
+.title-border-bottom-show {
+  border-bottom: 1px solid var(--coz-stroke-primary);
+}
+
+.title-border-bottom-hidden {
+  border-bottom: 1px solid transparent;
+}
+
+.title-extra {
+  right: 16px;
+}
+
+.output-log {
+  min-height: calc(100% - 50px);
+}
+
+.blink {
+  animation: blink-bg-animation 1s ease-in-out;
+
+  @keyframes blink-bg-animation {
+    0%, 100% {
+      background-color: var(--coz-bg-plus, rgba(252, 252, 255, 100%));
+    }
+
+    50% {
+      background-color: rgba(116, 212, 149, 10%);
+    }
+  }
+}
+
+.content-bg-color {
+  background: var(--coz-bg-plus, rgba(252, 252, 255, 100%));
+}

package/vendor/coze/original/toolbar-add-node.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { useRef, type RefObject } from 'react';
+
+import { debounce } from 'lodash-es';
+import { I18n } from '@coze-arch/i18n';
+import { IconCozPlus } from '@coze-arch/coze-design/icons';
+import { Button } from '@coze-arch/coze-design';
+
+import type { ITool } from '../type';
+import { ADD_NODE_BUTTON_ID } from '../constants';
+export const AddNode = (
+  props: ITool & { toolbarRef?: RefObject<HTMLDivElement | undefined> },
+) => {
+  const { handlers, toolbarRef } = props;
+  const { addNode } = handlers;
+
+  const addNodePanelVisibleRef = useRef(false);
+
+  const handleAddNode = (rect: DOMRect) => {
+    if (addNodePanelVisibleRef.current) {
+      return;
+    }
+    addNodePanelVisibleRef.current = true;
+    const toolbarRect = toolbarRef?.current?.getBoundingClientRect();
+    toolbarRect ? (rect = toolbarRect) : null;
+
+    return addNode(rect).finally(
+      () => (addNodePanelVisibleRef.current = false),
+    );
+  };
+  const debounceAddNode = debounce(handleAddNode, 100);
+  return (
+    <Button
+      icon={<IconCozPlus />}
+      color="highlight"
+      id={ADD_NODE_BUTTON_ID}
+      onClick={event => {
+        debounceAddNode.cancel();
+        handleAddNode(event.currentTarget.getBoundingClientRect());
+      }}
+      onMouseEnter={event => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        debounceAddNode(rect);
+      }}
+      onMouseLeave={() => {
+        debounceAddNode.cancel();
+      }}
+      data-testid="workflow.detail.toolbar.add-node"
+    >
+      {I18n.t('workflow_toolbar_add_node')}
+    </Button>
+  );
+};