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

package/vendor/coze/source/form-extensions/components/node-header/description.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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, useState, useRef } from 'react';
+
+import classnames from 'classnames';
+import { useNodeTestId } from '@coze-workflow/base';
+import { I18n } from '@coze-arch/i18n';
+import { Typography, TextArea, Tag, Divider } from '@coze-arch/coze-design';
+
+import { useNodeRenderScene } from '@/hooks';
+
+import styles from './index.module.less';
+
+const MAX_CNT = 100;
+
+interface DescriptionProps {
+  description?: string;
+  expanded: boolean;
+  isLocalPlugin?: boolean;
+  readonly?: boolean;
+  onChange: (desc: string) => void;
+}
+
+export const Description: FC<DescriptionProps> = props => {
+  const {
+    description,
+    expanded,
+    isLocalPlugin = false,
+    onChange,
+    readonly = false,
+  } = props;
+
+  const { concatTestId, getNodeTestId } = useNodeTestId();
+  const { isNodeSideSheet } = useNodeRenderScene();
+  const [isEdit, setIsEdit] = useState(false);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleClick = () => {
+    setIsEdit(true);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+    }, 0);
+  };
+
+  const handleBlur = e => {
+    const desc = e.target?.value;
+    if (desc && desc.length <= MAX_CNT) {
+      onChange?.(desc);
+    }
+    setIsEdit(false);
+  };
+
+  if (!description) {
+    return null;
+  }
+
+  const localPluginTag = isLocalPlugin ? (
+    <>
+      <Tag color="cyan" size="mini">
+        {I18n.t('local_plugin_label')}
+      </Tag>
+      <Divider
+        layout="vertical"
+        className="coz-stroke-primary h-[10px] ml-[4px] mr-[2px]"
+      />
+    </>
+  ) : null;
+
+  if (isEdit) {
+    return (
+      <div
+        className={classnames('pb-[12px] w-full', styles['text-area-wrapper'])}
+      >
+        <TextArea
+          defaultValue={description}
+          ref={textareaRef}
+          rows={2}
+          maxCount={MAX_CNT}
+          readonly={readonly}
+          onBlur={handleBlur}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <div className="px-0 w-full flex items-center mb-[8px]">
+        {localPluginTag}
+        <Typography.Text
+          size="small"
+          data-testid={concatTestId(getNodeTestId(), 'node-description')}
+          className={classnames(
+            'break-words inline-block px-1 py-0.5 break-all',
+            'coz-fg-secondary hover:coz-mg-secondary-hovered active:coz-mg-secondary-pressed',
+            'rounded-lg',
+            {
+              '!hidden': !expanded,
+              'cursor-pointer': isNodeSideSheet,
+            },
+          )}
+          onClick={handleClick}
+          ellipsis={{
+            showTooltip: {
+              opts: {
+                content: description,
+                style: { wordBreak: 'break-word' },
+              },
+            },
+            rows: 2,
+          }}
+        >
+          {description}
+        </Typography.Text>
+      </div>
+    );
+  }
+};

package/vendor/coze/source/form-extensions/components/node-header/index.module.less

@@ -0,0 +1,165 @@
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable no-descending-specificity */
+.container {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  margin-bottom: 8px;
+
+  -webkit-font-smoothing: antialiased;
+}
+
+
+// 覆盖 MonacoEditor tooltip 样式，解决 MonacoEditor tooltip 位置不准的问题。预期：固定在底部
+.json-editor {
+  :global {
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .overflowingContentWidgets {
+      position: relative;
+    }
+  }
+
+  div[widgetid='editor.contrib.resizableContentHoverWidget'] {
+    position: absolute !important;
+    top: 0 !important; // 调整上方距离
+    left: 0 !important; // 调整左方距离
+  }
+}
+
+.logo {
+  position: relative;
+
+  flex-shrink: 0;
+
+  width: 24px; // Set this to the desired logo size
+  height: 24px;
+  margin-right: 8px;
+
+  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; // Set this to the desired logo size
+    height: 24px;
+    border-radius: 4px;
+  }
+}
+
+.input-wrapper {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  :global(input) {
+    font-size: 16px!important;
+    font-weight: 500!important;
+  }
+}
+
+.input-readonly {
+  overflow: hidden;
+  display: flex;
+  flex: 1;
+  column-gap: 4px;
+  align-items: center;
+
+  padding-right: 4px;
+
+  :global {
+    p {
+      font-size: 16px!important;
+    font-weight: 500!important;
+    }
+
+    .coz-icon-button-mini {
+      line-height: 0;
+    }
+  }
+}
+
+.input-wrapper,
+.input {
+  flex: 1;
+}
+
+.input {
+  font-size: 16px;
+
+
+  &,
+  &:focus,
+  &:disabled {
+    margin: 0;
+    padding: 0;
+    color: #000;
+    background-color: transparent;
+  }
+}
+
+.input-error {
+  background-color: var(--semi-color-danger-light-default);
+}
+
+
+
+.subtitle {
+  margin-top: 2px;
+  margin-bottom: 0;
+  padding-left: 28px;
+
+  font-size: 12px;
+  line-height: 16px;
+  color: rgb(28 29 35 / 35%);
+}
+
+.operators {
+  display: flex;
+  flex-direction: row;
+  column-gap: 4px;
+  align-items: center;
+
+  :global(.icon-icon) {
+    font-size: 18px;
+  }
+}
+
+.dropdown-menus {
+  width: 233px;
+
+  &:global(.coz-menu.coz-selection-mode.semi-dropdown-menu .coz-list-item) {
+    padding-left: 8px;
+  }
+
+  &:global(.coz-menu.coz-selection-mode.semi-dropdown-menu .extra-operation-item .coz-item-text) {
+    width: 100%;
+  }
+
+  &:global(.coz-menu.coz-selection-mode.semi-dropdown-menu .coz-item-text) {
+    @apply coz-fg-primary;
+  }
+}
+
+.text-area-wrapper {
+  :global(.semi-input-textarea) {
+    font-size: 12px;
+  }
+}