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

package/vendor/coze/original/node-panel.less

@@ -0,0 +1,183 @@
+.node-panel {
+  overflow: hidden;
+
+  .node-search {
+    position: relative;
+    z-index: 100;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding: 12px;
+
+    transition: all 0.3s ease-in-out;
+
+    &.node-search-shadow {
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 2%), 0 2px 6px 0 rgba(0, 0, 0, 4%);
+    }
+  }
+
+  .node-list {
+    overflow: hidden;
+    height: calc(100% - 56px);
+
+    .viewport {
+      width: 100%;
+      height: 100%;
+
+      .list-wrapper {
+        @apply pb-4 px-3 pt-0;
+
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+    }
+
+    .scrollbar {
+    	/* disable browser handling of all panning and zooming gestures on touch devices */
+    	touch-action: none;
+
+    	/* ensures no selection */
+    	user-select: none;
+
+      z-index: 200;
+
+      display: flex;
+
+      width: 10px;
+      padding: 4px 3px;
+
+      background-color: transparent;
+
+      transition: background-color 160ms ease-out;
+    }
+
+    .scrollbar-thumb {
+    	position: relative;
+      flex: 1;
+      background: var(--coz-fg-dim);
+      border-radius: 2px;
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        width: 100%;
+        min-width: 44px;
+        height: 100%;
+        min-height: 44px;
+      }
+    }
+  }
+}
+
+.base-node-card {
+  cursor: pointer;
+
+  // 避免渲染bug
+  transform: translate3d(0, 0, 0);
+
+  display: flex;
+  gap: 6px;
+  align-items: center;
+
+  width: 204px;
+  height: 32px;
+  padding: 0 6px;
+}
+
+.node-card {
+  .base-node-card();
+
+  .node-title {
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--coz-fg-primary);
+  }
+
+}
+
+.node-card:hover {
+  background-color: var(--coz-mg-primary);
+}
+
+
+.card {
+  cursor: grab;
+  overflow: hidden;
+  background: var(--coz-bg-plus);
+  border-radius: var(--coze-8);
+
+  &.preview-card {
+    position: relative;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    background: var(--coz-bg-plus);
+    box-shadow: none;
+  }
+
+  &.drag-card {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+  }
+
+  &.grabbing {
+    cursor: grabbing;
+  }
+
+  &.not-allowed {
+    cursor: not-allowed;
+  }
+
+}
+
+.node-placeholder {
+  width: 360px;
+
+  background-color: var(--coz-bg-plus);
+  border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+  border-radius: var(--coze-8);
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 2%), 0 2px 6px 0 rgba(0, 0, 0, 4%);
+
+}
+
+.load-more {
+  .base-node-card();
+
+  .load-more-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+
+    background-color: var(--coz-bg-secondary);
+    border-radius: var(--coze-4);
+
+    .icon {
+      font-size: 16px;
+      color: var(--coz-fg-secondary);
+    }
+  }
+
+  .load-more-text {
+    line-height: 20px;
+    color: var(--coz-fg-primary);
+  }
+
+  &:hover {
+    background-color: var(--coz-mg-primary);
+    border-radius: var(--coze-8);
+  }
+
+}
+

package/vendor/coze/original/node-render.less

@@ -0,0 +1,20 @@
+.node-render {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  width: 360px;
+
+  background-color: var(--coz-bg-plus);
+  border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+  border-radius: 8px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 4%), 0 4px 12px 0 rgba(0, 0, 0, 2%);
+
+  &.activated,
+  &.selected {
+    border: 1px solid var(--coz-stroke-hglt, #4E40E5);
+  }
+}

package/vendor/coze/original/node-side-sheet.less

@@ -0,0 +1,57 @@
+/* stylelint-disable declaration-no-important */
+.node-side-sheet {
+  position: relative;
+  border: 1px solid var(--coz-stroke-primary);
+
+  :global(.node-header) {
+    position: sticky;
+    z-index: 10;
+    top: 0;
+  }
+
+  // 临时hack代码，coze-design 升级解决后可以删除这段代码 @10.29
+  // 1. 覆盖coze-design 小尺寸下input的对齐问题 
+  :global(.coz-input.semi-input-wrapper-small) {
+    display: flex;
+    align-items: center;
+
+    > :global(.semi-input-small) {
+      padding: 0;
+    }
+  }
+  // 2. 覆盖select选中的文字大小
+  :global(.semi-select-small .semi-select-selection-text) {
+    font-size:12px !important;
+  }
+
+  // 3. 覆盖cascader选中的文字大小
+  :global(.semi-cascader-small .semi-cascader-selection) {
+    font-size:12px !important;
+  }
+}
+
+.node-side-sheet-form {
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+
+  &.has-result-notice {
+    padding-bottom: 60px;
+  }
+
+  > div {
+    width: auto;
+    margin: 0 -12px;
+    padding: 12px;
+    border-bottom: 1px solid rgba(var(--coze-stroke-6),var(--coze-stroke-6-alpha));
+  }
+
+  :global(.node-header-title) {
+    padding: 0;
+    border: none;
+  }
+
+  > div:last-child {
+    border-bottom: none;
+  }
+}

package/vendor/coze/original/node-side-sheet.tsx

@@ -0,0 +1,214 @@
+/*
+ * 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.
+ */
+
+/**
+ * Node side window
+ */
+import {
+  type PropsWithChildren,
+  type FC,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
+
+import classnames from 'classnames';
+import { type NodeMeta } from '@coze-workflow/base/types';
+import { concatNodeTestId } from '@coze-workflow/base';
+import {
+  FlowNodeFormData,
+  NodeRender,
+} from '@flowgram-adapter/free-layout-editor';
+import { type FlowNodeEntity } from '@flowgram-adapter/free-layout-editor';
+
+import {
+  NodeFormPanelContext,
+  useNodeFormPanelState,
+} from '@/hooks/use-node-side-sheet-store';
+import {
+  useTestFormState,
+  useFloatLayoutSize,
+  useFloatLayoutService,
+} from '@/hooks';
+import { useSidePanelWidth } from '@/components/resizable-side-panel/use-side-panel-width';
+import { ResizableSidePanel } from '@/components/resizable-side-panel';
+
+import {
+  TestNodeForm,
+  TestNodeResultNotice,
+  useShowResultNotice,
+} from '../test-run/test-form-sheet-v2/test-node-form';
+import { NodeContextProvider } from '../node-context-provider';
+import { PanelWrap } from '../float-layout';
+import { EditorThemeProvider } from '../editor-container';
+
+import styles from './index.module.less';
+
+const PADDING = 16;
+
+const NodeFormPanelProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const [fullscreenPanel, setFullscreenPanel] = useState<React.ReactNode>(null);
+
+  return (
+    <NodeFormPanelContext.Provider
+      value={{ fullscreenPanel, setFullscreenPanel }}
+    >
+      {children}
+    </NodeFormPanelContext.Provider>
+  );
+};
+
+const NodeSideSheetPanel: FC<
+  PropsWithChildren<{
+    width?: number | string;
+    className?: string;
+  }>
+> = props => {
+  const { width, children, className } = props;
+  return (
+    <div
+      className={classnames(className, 'h-full flex-none overflow-auto')}
+      style={{
+        width,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export interface NodeFormPanelProps {
+  node: FlowNodeEntity;
+  showTestNodeForm?: boolean;
+}
+
+export const NodeSideSheet: React.FC<NodeFormPanelProps> = ({
+  node,
+  showTestNodeForm,
+}) => {
+  const testFormState = useTestFormState();
+  const floatLayoutService = useFloatLayoutService();
+  const showTestRunResultNotice = useShowResultNotice(node);
+  const {
+    config: { testNodeFormVisible },
+  } = testFormState;
+
+  const { width: layoutWidth } = useFloatLayoutSize();
+
+  const { fullscreenPanel } = useNodeFormPanelState();
+
+  const { width: sideWidth } = useSidePanelWidth();
+
+  const leftFullWidth = useMemo(
+    () => layoutWidth - sideWidth - PADDING,
+    [layoutWidth, sideWidth],
+  );
+
+  useEffect(() => {
+    if (showTestNodeForm) {
+      testFormState.showTestNodeForm();
+    } else {
+      testFormState.closeTestNodeForm();
+    }
+  }, [showTestNodeForm, node]);
+
+  // This panel needs to be closed when a node is deleted
+  useEffect(() => {
+    const disposable = node.onDispose(() => {
+      floatLayoutService.close();
+    });
+    return () => disposable.dispose();
+  }, [node, floatLayoutService]);
+
+  if (!node) {
+    return null;
+  }
+
+  const nodeMeta: NodeMeta = node.getNodeMeta();
+
+  if (nodeMeta.disableSideSheet) {
+    return null;
+  }
+
+  const { formModel } = node.getData(FlowNodeFormData);
+  const { initialized } = formModel;
+
+  if (!initialized) {
+    return null;
+  }
+
+  return (
+    <PanelWrap layout="vertical">
+      <NodeContextProvider
+        key={node?.id?.toString()}
+        node={node}
+        scene="node-side-sheet"
+      >
+        <EditorThemeProvider>
+          <ResizableSidePanel bypass={!!fullscreenPanel}>
+            <div
+              className={classnames(
+                styles['node-side-sheet'],
+                'rounded-lg coz-bg-plus flex h-full overflow-hidden',
+              )}
+            >
+              {fullscreenPanel ? (
+                <NodeSideSheetPanel
+                  className="coz-stroke-primary border-0 border-r border-solid !flex-1"
+                  width={leftFullWidth}
+                >
+                  {fullscreenPanel}
+                </NodeSideSheetPanel>
+              ) : null}
+              <ResizableSidePanel
+                className="relative h-full flex-none"
+                bypass={!fullscreenPanel}
+              >
+                <NodeSideSheetPanel width={sideWidth}>
+                  <div
+                    className={classnames(
+                      'px-3 pb-4',
+                      styles['node-side-sheet-form'],
+                      {
+                        [styles['has-result-notice']]:
+                          showTestRunResultNotice || testNodeFormVisible,
+                      },
+                    )}
+                    data-testid={concatNodeTestId(node, 'node-side-sheet-form')}
+                  >
+                    <NodeRender node={node} />
+                  </div>
+                  <TestNodeForm node={node} />
+                  {showTestRunResultNotice ? (
+                    <TestNodeResultNotice node={node} />
+                  ) : null}
+                </NodeSideSheetPanel>
+              </ResizableSidePanel>
+            </div>
+          </ResizableSidePanel>
+        </EditorThemeProvider>
+      </NodeContextProvider>
+    </PanelWrap>
+  );
+};
+
+export const NodeFormPanel: React.FC<NodeFormPanelProps> = props => (
+  <NodeFormPanelProvider>
+    <NodeSideSheet {...props} />
+  </NodeFormPanelProvider>
+);

package/vendor/coze/original/node-wrapper.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 PropsWithChildren, useCallback, useState } from 'react';
+
+import { ConfigProvider } from '@coze-arch/bot-semi';
+import { useNodeRender } from '@flowgram-adapter/free-layout-editor';
+
+interface WrapperProps {
+  className?: string;
+  onClick?: (e) => void;
+}
+
+export function Wrapper({
+  children,
+  className = '',
+  onClick,
+}: PropsWithChildren<WrapperProps>) {
+  const [isDragging, setIsDragging] = useState(false);
+  const { startDrag, nodeRef, onFocus, onBlur } = useNodeRender();
+
+  const handleClick = e => {
+    if (!isDragging) {
+      onClick?.(e);
+    }
+  };
+
+  const handleDragStart = e => {
+    setIsDragging(true);
+    startDrag(e);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const getPopupContainer = useCallback(
+    () => nodeRef.current || document.body,
+    [nodeRef],
+  );
+
+  return (
+    <ConfigProvider getPopupContainer={getPopupContainer}>
+      <div
+        className={className}
+        onClick={handleClick}
+        ref={nodeRef}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onDragStart={handleDragStart}
+        onMouseUp={handleMouseUp}
+        draggable
+      >
+        {children}
+      </div>
+    </ConfigProvider>
+  );
+}

package/vendor/coze/original/pad-icon.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+export function PadIcon() {
+  return (
+    <svg
+      width="48"
+      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"
+        stroke-opacity="0.8"
+        stroke-width="2.33333"
+      />
+      <path
+        d="M14.6665 30.6667H33.3332"
+        stroke="currentColor"
+        stroke-opacity="0.8"
+        stroke-width="2.33333"
+        stroke-linecap="round"
+      />
+    </svg>
+  );
+}

package/vendor/coze/original/resizable-side-panel-constants.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export const MIN_WIDTH = 360;
+export const MAX_WIDTH = 546;

package/vendor/coze/original/resizable-side-panel.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+/**
+ * Nodal side window with adjustable width
+ */
+import { type FC } from 'react';
+
+import { type ResizableProps, Resizable } from 're-resizable';
+
+import { useResizable } from './use-resizable';
+
+interface ResizableSidePanelProps extends ResizableProps {
+  bypass?: boolean;
+}
+
+export const ResizableSidePanel: FC<ResizableSidePanelProps> = ({
+  children,
+  bypass,
+  ...props
+}) => {
+  const resizable = useResizable();
+
+  if (bypass) {
+    return <>{children}</>;
+  }
+
+  return <Resizable {...{ ...resizable, ...props }}>{children}</Resizable>;
+};

package/vendor/coze/original/start-registry.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 {
+  DEFAULT_NODE_META_PATH,
+  DEFAULT_OUTPUTS_PATH,
+} from '@coze-workflow/nodes';
+import {
+  StandardNodeType,
+  type WorkflowNodeRegistry,
+  WorkflowNodeVariablesMeta,
+} from '@coze-workflow/base';
+
+import { type NodeTestMeta } from '@/test-run-kit';
+
+import { test } from './node-test';
+import { START_FORM_META } from './form-meta';
+
+export const START_NODE_REGISTRY: WorkflowNodeRegistry<NodeTestMeta> = {
+  type: StandardNodeType.Start,
+  meta: {
+    isStart: true,
+    nodeDTOType: StandardNodeType.Start,
+    size: { width: 360, height: 78.7 },
+    deleteDisable: true,
+    copyDisable: true,
+    headerReadonly: true,
+    showTrigger: ({ projectId }) =>
+      // will support soon
+      (!!projectId || IS_BOT_OP) && !IS_OPEN_SOURCE,
+    nodeMetaPath: DEFAULT_NODE_META_PATH,
+    outputsPath: DEFAULT_OUTPUTS_PATH,
+    // No input port
+    defaultPorts: [{ type: 'output' }],
+    helpLink: '/open/docs/guides/start_end_node',
+    test,
+  },
+  variablesMeta: WorkflowNodeVariablesMeta.DEFAULT,
+  formMeta: START_FORM_META,
+};

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

@@ -0,0 +1,4 @@
+.sub-canvas-background {
+  position: absolute;
+  inset: 56px 18px 18px;
+}