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

package/vendor/coze/source/form-extensions/components/level-line/level-line.tsx

@@ -0,0 +1,460 @@
+/*
+ * 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 React from 'react';
+
+import classNames from 'classnames';
+import {
+  IconCozArrowDown,
+  IconCozArrowRight,
+} from '@coze-arch/coze-design/icons';
+
+import { getLineShowResult } from './utils';
+import { type LineData, LineShowResult } from './types';
+
+import styles from './index.module.less';
+
+interface IconComponentProps {
+  className?: string;
+  style?: React.CSSProperties;
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+export function Triangle({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  if (collapsed) {
+    return (
+      <IconCozArrowDown
+        className={classNames(styles.triangle, className)}
+        style={style}
+        onClick={() => onCollapse?.(false)}
+      />
+    );
+  } else {
+    return (
+      <IconCozArrowRight
+        className={classNames(styles.triangle, className)}
+        style={style}
+        onClick={() => onCollapse?.(true)}
+      />
+    );
+  }
+}
+
+export function EmptyBlock({ className, style }: IconComponentProps) {
+  return (
+    <div className={classNames(styles.emptyBlock, className)} style={style} />
+  );
+}
+
+export function HelpLineBlock({ className, style }: IconComponentProps) {
+  return (
+    <div className={classNames(styles.helpLineBlock, className)} style={style}>
+      <div className={styles.line} />
+    </div>
+  );
+}
+
+export function HalfTopRoot({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div className={classNames(styles.halfTopRoot, className)} style={style}>
+      <div className={styles.line} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function HalfTopRootWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <HalfTopRoot
+      className={classNames(styles.children, className)}
+      style={style}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    />
+  );
+}
+
+export function HalfBottomRoot({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div className={classNames(styles.halfBottomRoot, className)} style={style}>
+      <div className={styles.line} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function HalfBottomRootWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <HalfBottomRoot
+      className={classNames(styles.children, className)}
+      style={style}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    />
+  );
+}
+
+export function FullRoot({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div className={classNames(styles.fullRoot, className)} style={style}>
+      <div className={styles.topLine} />
+      <div className={styles.bottomLine} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function FullRootWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <FullRoot
+      className={classNames(styles.children, className)}
+      style={style}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    />
+  );
+}
+
+export function HalfTopChild({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div className={classNames(styles.halfTopChild, className)} style={style}>
+      <div className={styles.line} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function HalfTopChildWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div
+      className={classNames(styles.halfTopChild, styles.children, className)}
+      style={style}
+    >
+      <div className={styles.topLine} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function FullChild({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div className={classNames(styles.fullChild, className)} style={style}>
+      <div className={styles.line} />
+      <div className={styles.bottomLine} />
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+export function FullChildWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <FullChild
+      className={classNames(styles.children, className)}
+      style={style}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    />
+  );
+}
+
+export function RootWithChildren({
+  className,
+  style,
+  collapsed,
+  onCollapse,
+}: IconComponentProps) {
+  return (
+    <div
+      className={classNames(styles.rootWithChildren, className)}
+      style={style}
+    >
+      <Triangle
+        className={styles.triangle}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    </div>
+  );
+}
+
+interface LevelLineProps {
+  level: number;
+  data: LineData;
+  className?: string;
+  style?: React.CSSProperties;
+  multiInfo?: {
+    multiline: boolean;
+    withNameError?: boolean;
+  };
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  couldCollapse?: boolean;
+  /** Expand whether the content is visible, and render expand-line when visible */
+  expandContentVisible?: boolean;
+  readonly?: boolean;
+  treeIndentWidth?: number;
+}
+
+// eslint-disable-next-line complexity
+export function LevelLine({
+  level,
+  data,
+  className,
+  style,
+  collapsed = true,
+  onCollapse,
+  multiInfo = { multiline: false },
+  couldCollapse,
+  expandContentVisible,
+  readonly,
+  treeIndentWidth = 15,
+}: LevelLineProps) {
+  // getLineShowResult returns data, no root drawing is involved for the time being
+  const lineShowResult = getLineShowResult({ level, data });
+  const showMap: Record<LineShowResult, React.ReactNode> = {
+    [LineShowResult.HalfTopRoot]: (
+      <HalfTopRoot
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.HalfTopRootWithChildren]: (
+      <HalfTopRootWithChildren
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.HalfBottomRoot]: (
+      <HalfBottomRoot
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.HalfBottomRootWithChildren]: (
+      <HalfBottomRootWithChildren
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.FullRoot]: (
+      <FullRoot
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.FullRootWithChildren]: (
+      <FullRootWithChildren
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    // In the output tree, there is no root drawing involved for the time being
+    [LineShowResult.HalfTopChild]: (
+      <HalfTopChild
+        className={classNames(
+          multiInfo?.multiline ? styles.multiline : null,
+          multiInfo?.withNameError ? styles['with-name-error'] : null,
+          className,
+        )}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.HalfTopChildWithChildren]: (
+      <HalfTopChildWithChildren
+        className={classNames(
+          multiInfo?.multiline ? styles.multiline : null,
+          multiInfo?.withNameError ? styles['with-name-error'] : null,
+          className,
+        )}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.FullChild]: (
+      <FullChild
+        className={classNames(
+          multiInfo?.multiline ? styles.multiline : null,
+          multiInfo?.withNameError ? styles['with-name-error'] : null,
+          className,
+        )}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.FullChildWithChildren]: (
+      <FullChildWithChildren
+        className={classNames(
+          multiInfo?.multiline ? styles.multiline : null,
+          multiInfo?.withNameError ? styles['with-name-error'] : null,
+          className,
+        )}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.EmptyBlock]: (
+      <EmptyBlock
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.HelpLineBlock]: (
+      <HelpLineBlock
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+    [LineShowResult.RootWithChildren]: (
+      <RootWithChildren
+        className={className}
+        style={style}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
+      />
+    ),
+  };
+
+  {
+    /* Default 20 width, 20 more length for each additional level */
+  }
+  return (
+    <div
+      style={{ width: couldCollapse ? level * treeIndentWidth : 0 }}
+      className={classNames(
+        className,
+        styles['level-line'],
+        readonly ? styles.readonly : '',
+        couldCollapse ? styles['could-collapse'] : '',
+      )}
+    >
+      {lineShowResult.map((item, index) => (
+        <React.Fragment key={index}>{showMap[item]}</React.Fragment>
+      ))}
+      {expandContentVisible &&
+      lineShowResult?.length &&
+      data.children?.length &&
+      // The collapsed state is written upside down. What is actually represented here is that the collapsed state does not render this div.
+      collapsed ? (
+        <div
+          className={styles['expand-line']}
+          // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+          style={{ transform: `translateX(${level * 15}px)` }}
+        ></div>
+      ) : null}
+    </div>
+  );
+}

package/vendor/coze/source/form-extensions/components/level-line/types.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 interface LineData {
+  children?: LineData[];
+  helpLineShow?: unknown[];
+  isLast?: boolean;
+  isFirst?: boolean;
+}
+
+export enum LineShowResult {
+  HalfTopRoot,
+  HalfTopRootWithChildren,
+  HalfBottomRoot,
+  HalfBottomRootWithChildren,
+  FullRoot,
+  FullRootWithChildren,
+  HalfTopChild,
+  HalfTopChildWithChildren,
+  FullChild,
+  FullChildWithChildren,
+  EmptyBlock,
+  HelpLineBlock,
+  RootWithChildren,
+}

package/vendor/coze/source/form-extensions/components/level-line/utils.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 { LineShowResult, type LineData } from './types';
+
+// eslint-disable-next-line complexity
+export function getLineShowResult<Data extends LineData>({
+  level,
+  data,
+}: {
+  level: number;
+  data: Data;
+}): Array<LineShowResult> {
+  const isRootWithChildren = level === 0 && (data.children || []).length > 0;
+  const isRootWithoutChildren =
+    level === 0 && (data.children || []).length === 0;
+  const isChildWithChildren = level > 0 && (data.children || []).length > 0;
+  const isChildWithoutChildren =
+    level > 0 && (data.children || []).length === 0;
+  const res: Array<LineShowResult> = (data.helpLineShow || []).map(item =>
+    item ? LineShowResult.HelpLineBlock : LineShowResult.EmptyBlock,
+  );
+
+  if (isRootWithChildren) {
+    res.push(LineShowResult.RootWithChildren);
+  } else if (!isRootWithoutChildren) {
+    // The root node does not need a display line, only non-root nodes need auxiliary lines.
+    if (isChildWithChildren) {
+      if (data.isLast) {
+        res.push(LineShowResult.HalfTopChildWithChildren);
+      } else if (data.isFirst) {
+        res.push(LineShowResult.FullChildWithChildren);
+      } else {
+        res.push(LineShowResult.FullChildWithChildren);
+      }
+    } else if (isChildWithoutChildren) {
+      if (data.isLast) {
+        res.push(LineShowResult.HalfTopChild);
+      } else if (data.isFirst) {
+        res.push(LineShowResult.FullChild);
+      } else {
+        res.push(LineShowResult.FullChild);
+      }
+    }
+  }
+  return res;
+}

package/vendor/coze/source/form-extensions/components/literal-value-input/constants.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 { memo } from 'react';
+
+import { ViewVariableType } from '@coze-workflow/base';
+
+import { type InputComponentRegistry } from './type';
+import { InputTime } from './input-time';
+import { InputString } from './input-string';
+import { InputSelect } from './input-select';
+import { InputNumber } from './input-number';
+import { InputJson } from './input-json';
+import { InputInteger } from './input-integer';
+import { InputBoolean } from './input-boolean';
+
+export const DEFAULT_COMPONENT_REGISTRY: InputComponentRegistry[] = [
+  {
+    canHandle: ViewVariableType.String,
+    component: memo(InputString),
+  },
+  {
+    canHandle: ViewVariableType.Number,
+    component: memo(InputNumber),
+  },
+  {
+    canHandle: ViewVariableType.Integer,
+    component: memo(InputInteger),
+  },
+  {
+    canHandle: ViewVariableType.Boolean,
+    component: memo(InputBoolean),
+  },
+  {
+    canHandle: ViewVariableType.Time,
+    component: memo(InputTime),
+  },
+  {
+    canHandle: inputType => ViewVariableType.isJSONInputType(inputType),
+    component: memo(InputJson),
+  },
+  {
+    canHandle: (inputType, optionsList) =>
+      [ViewVariableType.String, ViewVariableType.Integer].includes(inputType) &&
+      (optionsList ?? []).length > 0,
+    component: memo(InputSelect),
+  },
+];

package/vendor/coze/source/form-extensions/components/literal-value-input/input-boolean.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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, useRef } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { Select } from '@coze-arch/coze-design';
+
+import { type LiteralValueInputProps } from './type';
+
+import styles from './styles.module.less';
+export const InputBoolean: FC<LiteralValueInputProps> = ({
+  value,
+  defaultValue,
+  disabled,
+  testId,
+  onChange,
+  onBlur,
+  onFocus,
+  placeholder,
+  validateStatus,
+  style,
+  className,
+}) => {
+  const val = defaultValue ?? value;
+  const valueRef = useRef(val as boolean | undefined | null);
+  const handleChange = newVal => {
+    if (newVal) {
+      const parsed = JSON.parse(newVal || 'false') as boolean;
+      onChange?.(parsed);
+      valueRef.current = parsed;
+    } else {
+      onChange?.(null);
+      valueRef.current = null;
+    }
+  };
+  return (
+    <div className={styles['input-boolean-wrapper']}>
+      <Select
+        className={className}
+        data-testid={testId}
+        placeholder={
+          placeholder || I18n.t('workflow_detail_node_input_entervalue')
+        }
+        size="small"
+        optionList={[
+          {
+            label: 'true',
+            value: 'true',
+          },
+          {
+            label: 'false',
+            value: 'false',
+          },
+        ]}
+        showClear
+        defaultValue={val !== undefined ? JSON.stringify(val) : undefined}
+        disabled={disabled}
+        validateStatus={validateStatus}
+        onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={() => onBlur?.(valueRef.current)}
+        style={style}
+      />
+    </div>
+  );
+};