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

package/vendor/coze/source/form-extensions/components/output-tree/components/header/index.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 @typescript-eslint/no-magic-numbers */
+import React from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+
+import { useColumnsStyle } from '../../hooks/use-columns-style';
+import { TreeCollapseWidth } from '../../constants';
+
+import styles from './index.module.less';
+
+interface HeaderProps {
+  readonly?: boolean;
+  config: {
+    hasObjectLike?: boolean;
+    hasCollapse?: boolean;
+    hasDescription?: boolean;
+    hasRequired?: boolean;
+  };
+  columnsRatio?: string;
+}
+
+export default function Header({
+  readonly,
+  config,
+  columnsRatio,
+}: HeaderProps) {
+  const columnsStyle = useColumnsStyle(columnsRatio);
+
+  if (readonly) {
+    return null;
+  }
+  return (
+    <div
+      className={styles.header}
+      style={{
+        marginLeft: config.hasCollapse ? TreeCollapseWidth + 8 : 0,
+      }}
+    >
+      {/* name */}
+      <div className={styles.name} style={columnsStyle.name}>
+        <span className={styles.text}>
+          {I18n.t('workflow_detail_end_output_name')}
+        </span>
+      </div>
+
+      {/* type */}
+      <div className={styles.type} style={columnsStyle.type}>
+        <span className={styles.text}>
+          {I18n.t('workflow_detail_start_variable_type')}
+        </span>
+      </div>
+
+      <div className="relative flex gap-1">
+        {/* required label */}
+        {config.hasRequired ? (
+          <div className={styles.required}>
+            <span className={styles.text}>{I18n.t('wf_20241206_001')}</span>
+          </div>
+        ) : null}
+
+        {/* description */}
+        {config.hasDescription ? (
+          <div
+            className={styles.description}
+            style={{
+              width: 24,
+            }}
+          >
+            <div className={styles.descriptionTitle}>
+              <span className={styles.text}>
+                {/* {I18n.t('workflow_detail_llm_output_decription_title')} */}
+              </span>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Object operation placeholder */}
+        {config.hasObjectLike ? <div className="w-6"></div> : null}
+
+        {/* Required placeholder */}
+        {config.hasRequired ? <div className="w-6"></div> : null}
+
+        {/* Delete button placeholder */}
+        <div className="w-6"></div>
+      </div>
+    </div>
+  );
+}

package/vendor/coze/source/form-extensions/components/output-tree/constants.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 @typescript-eslint/naming-convention */
+
+/** Indent width of each level of tree */
+export const TreeIndentWidth = 15;
+/** Tree Node Expand Collapse Button Width */
+export const TreeCollapseWidth = 10;

package/vendor/coze/source/form-extensions/components/output-tree/context.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { createContext, useContext } from 'react';
+
+interface OutputTreeContext {
+  testId?: string;
+}
+
+const outputTreeContext = createContext<OutputTreeContext>({});
+
+export const useOutputTreeContext = () => useContext(outputTreeContext);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const OutputTreeContextProvider = outputTreeContext.Provider;

package/vendor/coze/source/form-extensions/components/output-tree/hooks/use-columns-style.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 { TreeIndentWidth } from '../constants';
+
+interface ColumnsStyle {
+  name: React.CSSProperties;
+  type: React.CSSProperties;
+}
+
+export function useColumnsStyle(columnsRatio = '3:2', level = 0): ColumnsStyle {
+  const [nameWidth, typeWidth] = columnsRatio.split(':').map(Number);
+
+  return {
+    name: {
+      flex: `${nameWidth} ${nameWidth} 0`,
+    },
+    type: {
+      flex: `${typeWidth} ${typeWidth} ${
+        (level * TreeIndentWidth * typeWidth) / nameWidth
+      }px`,
+      minWidth: '80px',
+      maxWidth: '135px',
+    },
+  };
+}

package/vendor/coze/source/form-extensions/components/output-tree/index.module.less

@@ -0,0 +1,83 @@
+/* stylelint-disable selector-class-pattern, no-descending-specificity */
+
+.container {
+  position: relative;
+
+  .content {
+    overflow-x: auto;
+
+    &.readonly {
+      overflow: visible;
+
+      :global {
+        .semi-tree-option-list-block .semi-tree-option:hover {
+          background-color: inherit;
+        }
+      }
+    }
+
+    .add-hot-area {
+      cursor: pointer;
+      height: 16px;
+    }
+
+    .empty-placeholder {
+      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
+        'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+        'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 16px;
+      font-weight: 400;
+      font-style: normal;
+      line-height: 44px;
+      color: var(--light-usage-text-color-text-2, rgba(29, 28, 35, 60%));
+    }
+
+    :global {
+      .semi-tree-option-list {
+        overflow: initial;
+        padding: 0 0 8px;
+
+        & > div:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  :global {
+    .semi-tree-option-list {
+      .semi-tree-option {
+        padding-left: 8px;
+      }
+    }
+  }
+
+  &.not-readonly {
+    :global {
+      .semi-tree-option-list {
+        overflow: inherit;
+
+        .semi-tree-option {
+          padding-left: 8px;
+        }
+      }
+
+      .semi-tree-option-list-block .semi-tree-option {
+        cursor: default;
+
+        &:hover,
+        &:active {
+          background: transparent;
+        }
+      }
+    }
+
+    &:not(.could-collapse) {
+      :global {
+        .semi-tree-option.semi-tree-option-fullLabel-level-1 {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+}