Merge branch 'develop' into feature/ui_upgrade_zy

2026-03-20 11:49:00 +08:00
parent 69c001bf84 9d8c26b999
commit b1b53f6b1d
286 changed files with 23406 additions and 5328 deletions
--- a/web/src/views/Workflow/components/CanvasToolbar.tsx
+++ b/web/src/views/Workflow/components/CanvasToolbar.tsx
@@ -1,7 +1,8 @@
 import type { FC } from 'react';
-import { Select } from 'antd';
+import { Select, Divider } from 'antd';
 // import { Node } from '@antv/x6';
 import type { GraphRef } from '../types'
+import { PlusOutlined, MinusOutlined, FileAddOutlined } from '@ant-design/icons'

 interface CanvasToolbarProps {
  miniMapRef: React.RefObject<HTMLDivElement>;
@@ -9,20 +10,26 @@ interface CanvasToolbarProps {
  isHandMode: boolean;
  setIsHandMode: React.Dispatch<React.SetStateAction<boolean>>;
  zoomLevel: number;
+  addNotes: () => void;
 }

 const CanvasToolbar: FC<CanvasToolbarProps> = ({
  miniMapRef,
  graphRef,
  zoomLevel,
+  // canUndo,
+  // canRedo,
+  // onUndo,
+  // onRedo,
+  addNotes,
 }) => {
  return (
    <>
      {/* 小地图 */}
      <div ref={miniMapRef} className="rb:absolute rb:bottom-15  rb:right-8 rb:z-1000 rb:rounded-lg rb:overflow-hidden"></div>
      {/* 缩放控制按钮 */}
-      <div className="rb:h-8.5 rb:bg-[#FFFFFF] rb-border rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2.25 rb:absolute rb:bottom-5 rb:right-8 rb:flex rb:flex-row rb:gap-2 rb:z-1000">
-        <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/minus.png')]" onClick={() => graphRef.current?.zoom(-0.1)}></div>
+      <div className="rb:h-8.5 rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2 rb:absolute rb:bottom-5 rb:right-8 rb:flex rb:flex-row rb:items-center rb:gap-4 rb:z-1000">
+        <MinusOutlined className="rb:text-[16px] rb:cursor-pointer" onClick={() => graphRef.current?.zoom(-0.1)} />
        <Select
          value={Math.round(zoomLevel * 100)}
          onChange={(value: number | string) => {
@@ -50,7 +57,9 @@ const CanvasToolbar: FC<CanvasToolbarProps> = ({
          variant='borderless'
          size="small"
        />
-        <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/plus.png')]" onClick={() => graphRef.current?.zoom(0.1)}></div>
+        <PlusOutlined className="rb:text-[16px] rb:cursor-pointer" onClick={() => graphRef.current?.zoom(0.1)} />
+        <Divider type="vertical" className="rb:h-4" />
+        <FileAddOutlined onClick={addNotes} />
      </div>
    </>
  );
--- a/web/src/views/Workflow/components/Chat/Chat.tsx
+++ b/web/src/views/Workflow/components/Chat/Chat.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-06 21:10:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 18:51:48
+ * @Last Modified time: 2026-03-20 11:25:51
 */
 /**
 * Workflow Chat Component
@@ -21,50 +21,59 @@
 * 
 * @component
 */
-import { forwardRef, useImperativeHandle, useState, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useState, useRef, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { App, Space, Button, Flex, Dropdown, type MenuProps, Divider } from 'antd'
+import { App, Flex } from 'antd'

 import ChatIcon from '@/assets/images/application/chat.png'
 import RbDrawer from '@/components/RbDrawer';
-import VariableConfigModal from './VariableConfigModal'
 import { draftRun } from '@/api/application';
 import Empty from '@/components/Empty'
 import ChatContent from '@/components/Chat/ChatContent'
 import type { ChatItem } from '@/components/Chat/types'
 import dayjs from 'dayjs'
-import type { ChatRef, VariableConfigModalRef, GraphRef } from '../../types'
+import type { ChatRef, GraphRef, WorkflowConfig } from '../../types'
 import { type SSEMessage } from '@/utils/stream'
 import type { Variable } from '../Properties/VariableList/types'
 import ChatInput from '@/components/Chat/ChatInput'
-import UploadFiles from '@/views/Conversation/components/FileUpload'
-import AudioRecorder from '@/components/AudioRecorder'
-import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
-import type { UploadFileListModalRef } from '@/views/Conversation/types'
+import ChatToolbar from '@/components/Chat/ChatToolbar'
+import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
 import Runtime from './Runtime';
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';

-const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
+const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null }>(({ appId, graphRef, data }, ref) => {
  const { t } = useTranslation()
  const { message: messageApi } = App.useApp()
-  const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
-  // State management
-  const [open, setOpen] = useState(false) // Drawer visibility
-  const [loading, setLoading] = useState(false) // Send button loading state
-  const [chatList, setChatList] = useState<ChatItem[]>([]) // Chat message history
-  const [variables, setVariables] = useState<Variable[]>([]) // Workflow input variables
-  const [streamLoading, setStreamLoading] = useState(false) // SSE streaming state
-  const [conversationId, setConversationId] = useState<string | null>(null) // Current conversation ID
-  const [fileList, setFileList] = useState<any[]>([]) // Uploaded files
-  const [message, setMessage] = useState<string | undefined>(undefined) // Current input message
-  const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
+  const toolbarRef = useRef<ChatToolbarRef>(null)
+  const toolbarCallbackRef = useCallback((node: ChatToolbarRef | null) => {
+    (toolbarRef as React.MutableRefObject<ChatToolbarRef | null>).current = node
+  }, [])
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [chatList, setChatList] = useState<ChatItem[]>([])
+  const [variables, setVariables] = useState<Variable[]>([])
+  const [streamLoading, setStreamLoading] = useState(false)
+  const [conversationId, setConversationId] = useState<string | null>(null)
+  const [fileList, setFileList] = useState<any[]>([])
+  const [message, setMessage] = useState<string | undefined>(undefined)
+  const [features, setFeatures] = useState<FeaturesConfigForm>({} as FeaturesConfigForm)

  /**
   * Opens the chat drawer and loads workflow variables from the start node
   */
  const handleOpen = () => {
    setOpen(true)
-    getVariables()
  }
+
+  useEffect(() => {
+    if (data?.features && open) setFeatures(data.features)
+  }, [open, data?.features])
+
+  useEffect(() => {
+    if (open && graphRef.current && toolbarRef.current) {
+      getVariables()
+    }
+  }, [open])
  /**
   * Extracts variables from the workflow's start node and merges with previous values
   */
@@ -84,7 +93,9 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
          vo.value = lastVo.value
        }
      })
-      setVariables(curVariables)
+      console.log('curVariables', curVariables)
+      setVariables([...curVariables])
+      toolbarRef.current?.setVariables([...curVariables])
    }
  }
  /**
@@ -96,22 +107,12 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
    setVariables([])
    setConversationId(null)
    setMessage(undefined)
+    toolbarRef.current?.setFiles([])
+    toolbarRef.current?.setVariables([])
    setFileList([])
    setLoading(false)
    setStreamLoading(false)
  }
-  /**
-   * Opens the variable configuration modal
-   */
-  const handleEditVariables = () => {
-    variableConfigModalRef.current?.handleOpen(variables)
-  }
-  /**
-   * Saves updated variable values from the modal
-   */
-  const handleSave = (values: Variable[]) => {
-    setVariables([...values])
-  }
  /**
   * Sends a message to execute the workflow
   * 
@@ -150,10 +151,14 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId

    setLoading(true)
    const message = msg
+    const files = toolbarRef.current?.getFiles() || []
    setChatList(prev => [...prev, {
      role: 'user',
      content: message,
      created_at: Date.now(),
+      meta_data: {
+        files
+      },
    }])
    setChatList(prev => [...prev, {
      role: 'assistant',
@@ -338,13 +343,14 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
    }

    setMessage(undefined)
+    toolbarRef.current?.setFiles([])
    setFileList([])
    const data = {
      message: message,
      variables: params,
      stream: true,
      conversation_id: conversationId,
-      files: fileList.map(file => {
+      files: files.map(file => {
        if (file.url) {
          return file
        } else {
@@ -359,7 +365,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
    setStreamLoading(true)
    draftRun(appId, data, handleStreamMessage)
      .catch((error) => {
-        console.log('draftRun error', error)
+        const errorInfo = JSON.parse(error.message)
        setChatList(prev => {
          const newList = [...prev]
          const lastIndex = newList.length - 1
@@ -368,7 +374,7 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
              ...newList[lastIndex],
              status: 'failed',
              content: null,
-              subContent: error.error
+              subContent: errorInfo.error
            }
          }
          return newList
@@ -379,65 +385,20 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
      })
  }

-  /**
-   * Updates the current input message
-   */
-  const handleMessageChange = (message: string) => {
-    setMessage(message)
-  }
-  /**
-   * Handles file upload from local device
-   */
-  const fileChange = (file?: any) => {
-    setFileList([...fileList, file])
-  }
-  const handleRecordingComplete = async (file: any) => {
-    setFileList([...fileList, {
-      response: { data: file },
-      thumbUrl: file.url,
-      type: file.type
-    }])
-  }
-
-  /**
-   * Handles dropdown menu actions for file upload
-   */
-  const handleShowUpload: MenuProps['onClick'] = ({ key }) => {
-    switch(key) {
-      case 'define':
-        uploadFileListModalRef.current?.handleOpen()
-        break
-    }
-  }
-  /**
-   * Adds files from remote URL modal
-   */
-  const addFileList = (list?: any[]) => {
-    if (!list || list.length <= 0) return
-    setFileList([...fileList, ...(list || [])])
-  }
-  /**
-   * Updates the entire file list (used when removing files)
-   */
  const updateFileList = (list?: any[]) => {
    setFileList([...list || []])
+    toolbarRef.current?.setFiles([...list || []])
  }

-  // Expose methods to parent component via ref
  useImperativeHandle(ref, () => ({
    handleOpen,
    handleClose
  }));

-  console.log('fileList', fileList)
-
  return (
    <RbDrawer
      title={<Flex align="center" gap={10}>
        {t('workflow.run')}
-        {variables.length > 0 && <Space>
-          <Button size="small" onClick={handleEditVariables}>{t('application.variable')}</Button>
-        </Space>}
      </Flex>}
      classNames={{
        body: 'rb:p-0!'
@@ -466,48 +427,16 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
          fileChange={updateFileList}
          fileList={fileList}
          onSend={handleSend}
-          onChange={handleMessageChange}
+          onChange={(msg) => setMessage(msg)}
        >
-          <Flex justify="space-between" className="rb:flex-1">
-            <Flex gap={8} align="center">
-              <Dropdown
-                menu={{
-                  items: [
-                    { key: 'define', label: t('memoryConversation.addRemoteFile') },
-                    {
-                      key: 'upload', label: (
-                        <UploadFiles
-                          onChange={fileChange}
-                        />
-                      )
-                    },
-                  ],
-                  onClick: handleShowUpload
-                }}
-              >
-                <div
-                  className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
-                ></div>
-              </Dropdown>
-            </Flex>
-            <Flex align="center">
-              <AudioRecorder onRecordingComplete={handleRecordingComplete} />
-              <Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
-            </Flex>
-          </Flex>
+          <ChatToolbar
+            ref={toolbarCallbackRef}
+            features={features}
+            onFilesChange={setFileList}
+            onVariablesChange={setVariables}
+          />
        </ChatInput>
      </Flex>
-
-      <VariableConfigModal
-        ref={variableConfigModalRef}
-        refresh={handleSave}
-        variables={variables}
-      />
-
-      <UploadFileListModal
-        ref={uploadFileListModalRef}
-        refresh={addFileList}
-      />
    </RbDrawer>
  )
 })
--- a/web/src/views/Workflow/components/Chat/Runtime.tsx
+++ b/web/src/views/Workflow/components/Chat/Runtime.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-24 17:57:08 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-28 16:48:09
+ * @Last Modified time: 2026-03-12 13:39:24
 */
 /*
 * Runtime Component
@@ -225,12 +225,13 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
                </div>
              )
              : <>
-                {item.error
-                ? <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 ", getStatus('failed'))}>
+                {item.error &&
+                 <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 rb:mb-2 rb:-mt-4", getStatus('failed'))}>
                  <Markdown content={item.error} />
-                  </div> 
-                : renderChild(item.subContent)
-              }</>
+                  </div>
+                }
+                {renderChild(item.subContent)}
+              </>
          )
        }]}
      />
--- a/web/src/views/Workflow/components/Chat/VariableConfigModal.tsx
+++ b/web/src/views/Workflow/components/Chat/VariableConfigModal.tsx
@@ -8,7 +8,6 @@ import RbModal from '@/components/RbModal'

 interface VariableEditModalProps {
  refresh: (values: Variable[]) => void;
-  variables: Variable[]
 }

 const VariableConfigModal = forwardRef<VariableConfigModalRef, VariableEditModalProps>(({
--- a/web/src/views/Workflow/components/Editor/plugin/InitialValuePlugin.tsx
+++ b/web/src/views/Workflow/components/Editor/plugin/InitialValuePlugin.tsx
@@ -25,6 +25,7 @@ const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options
        const textContent = root.getTextContent();
        if (textContent !== prevValueRef.current) {
          isUserInputRef.current = true;
+          prevValueRef.current = textContent;
        }
      });
    });
@@ -33,7 +34,13 @@ const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options
  }, [editor]);

  useEffect(() => {
-    if ((value !== prevValueRef.current || enableLineNumbers !== prevEnableLineNumbersRef.current) && !isUserInputRef.current) {
+    if (value !== prevValueRef.current || enableLineNumbers !== prevEnableLineNumbersRef.current) {
+      // Skip reset if the change was triggered by user input (avoid cursor jump)
+      if (isUserInputRef.current && enableLineNumbers === prevEnableLineNumbersRef.current) {
+        prevValueRef.current = value;
+        isUserInputRef.current = false;
+        return;
+      }
      queueMicrotask(() => {
        editor.update(() => {
        const root = $getRoot();
--- a/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/NoteFormatPlugin.tsx
+++ b/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/NoteFormatPlugin.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection, $setSelection, $isTextNode, type BaseSelection } from 'lexical';
+import { $patchStyleText } from '@lexical/selection';
+import { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, ListNode } from '@lexical/list';
+import { TOGGLE_LINK_COMMAND, LinkNode } from '@lexical/link';
+import { $getNearestNodeOfType } from '@lexical/utils';
+
+export const NOTE_FORMAT_EVENT = 'note:format';
+
+export interface FormatState {
+  bold: boolean;
+  italic: boolean;
+  strikethrough: boolean;
+  list: boolean;
+  fontSize?: number;
+  linkUrl?: string | null;
+}
+
+const NoteFormatPlugin = ({ nodeId, onFormatChange, fontSize = 12 }: { nodeId: string; fontSize?: number; onFormatChange?: (state: FormatState) => void }) => {
+  const [editor] = useLexicalComposerContext();
+  const savedSelection = useRef<BaseSelection | null>(null);
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) return;
+        savedSelection.current = selection.clone();
+        const anchorNode = selection.anchor.getNode();
+        const style = 'getStyle' in anchorNode ? (anchorNode as { getStyle(): string }).getStyle() : '';
+        const match = style.match(/font-size:\s*([\d.]+)px/);
+        const nodeFontSize = match ? Number(match[1]) : fontSize;
+        const linkNode = $getNearestNodeOfType(anchorNode, LinkNode);
+        onFormatChange?.({
+          bold: selection.hasFormat('bold'),
+          italic: selection.hasFormat('italic'),
+          strikethrough: selection.hasFormat('strikethrough'),
+          list: !!$getNearestNodeOfType(anchorNode, ListNode),
+          ...(nodeFontSize ? { fontSize: nodeFontSize } : {}),
+          linkUrl: linkNode ? linkNode.getURL() : null,
+        });
+      });
+    });
+  }, [editor, onFormatChange]);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { id, format, value } = (e as CustomEvent).detail;
+      if (id !== nodeId) return;
+      const sel = savedSelection.current;
+      const hasSelection = $isRangeSelection(sel) && !sel.isCollapsed();
+      if (format === 'link' && value === null) {
+        // remove link: select the entire LinkNode first
+        editor.focus(() => {
+          editor.update(() => {
+            const s = $getSelection();
+            const anchorNode = $isRangeSelection(s)
+              ? s.anchor.getNode()
+              : savedSelection.current && $isRangeSelection(savedSelection.current)
+                ? savedSelection.current.anchor.getNode()
+                : null;
+            const linkNode = anchorNode ? $getNearestNodeOfType(anchorNode, LinkNode) : null;
+            if (linkNode) {
+              const children = linkNode.getChildren();
+              if (children.length > 0) {
+                const first = children[0];
+                const last = children[children.length - 1];
+                if ($isTextNode(first) && $isTextNode(last)) {
+                  const range = first.select(0, 0);
+                  range.focus.set(last.getKey(), last.getTextContentSize(), 'text');
+                }
+              }
+            }
+          });
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        });
+      } else if (format === 'list') {
+        editor.focus(() => {
+          if (sel) editor.update(() => $setSelection(sel));
+          editor.dispatchCommand(value ? INSERT_UNORDERED_LIST_COMMAND : REMOVE_LIST_COMMAND, undefined);
+          editor.update(() => $setSelection(null));
+        });
+      } else if (hasSelection) {
+        editor.focus(() => {
+          editor.update(() => $setSelection(sel));
+          if (format === 'bold' || format === 'italic' || format === 'strikethrough') {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+          } else if (format === 'link') {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, value as string | null);
+          } else if (format === 'fontSize') {
+            editor.update(() => {
+              $setSelection(sel);
+              $patchStyleText(sel!, { 'font-size': `${value}px` });
+            });
+          }
+          editor.update(() => $setSelection(null));
+        });
+      }
+    };
+    window.addEventListener(NOTE_FORMAT_EVENT, handler);
+    return () => window.removeEventListener(NOTE_FORMAT_EVENT, handler);
+  }, [editor, nodeId]);
+
+  return null;
+};
+
+export default NoteFormatPlugin;
--- a/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/NoteLinkPopovers.tsx
+++ b/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/NoteLinkPopovers.tsx
@@ -0,0 +1,74 @@
+import { type FC, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { Flex, Button, Input } from 'antd';
+import { EditOutlined, DisconnectOutlined } from '@ant-design/icons';
+
+const POPOVER_STYLE: React.CSSProperties = {
+  position: 'fixed',
+  zIndex: 1000,
+  background: '#fff',
+  border: '1px solid #e5e7eb',
+  borderRadius: 8,
+  boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+  whiteSpace: 'nowrap',
+};
+
+interface LinkPopoverProps {
+  url: string;
+  rect: DOMRect;
+  onEdit: () => void;
+  onRemove: () => void;
+}
+
+export const LinkPopover: FC<LinkPopoverProps> = ({ url, rect, onEdit, onRemove }) => {
+  const { t } = useTranslation();
+  return createPortal(
+    <div
+      style={{ ...POPOVER_STYLE, left: rect.left, top: rect.bottom + 4, padding: '4px 10px', fontSize: 12 }}
+      onMouseDown={e => e.stopPropagation()}
+    >
+      <Flex align="center" gap={8}>
+        <a href={url} target="_blank" rel="noreferrer" style={{ color: '#2563eb', maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', display: 'inline-block' }}>
+          {url}
+        </a>
+        <Button size="small" type="text" icon={<EditOutlined />} onClick={onEdit}>{t('common.edit')}</Button>
+        <Button size="small" type="text" icon={<DisconnectOutlined />} onClick={onRemove}>{t('workflow.config.notes.removeLink')}</Button>
+      </Flex>
+    </div>,
+    document.body
+  );
+};
+
+interface EditLinkPopoverProps {
+  rect: DOMRect;
+  initialUrl: string;
+  onConfirm: (url: string) => void;
+}
+
+export const EditLinkPopover: FC<EditLinkPopoverProps> = ({ rect, initialUrl, onConfirm }) => {
+  const { t } = useTranslation();
+  const [url, setUrl] = useState(initialUrl);
+  const confirm = () => onConfirm(url);
+  return createPortal(
+    <div
+      style={{ ...POPOVER_STYLE, left: rect.left, top: rect.bottom + 4, padding: '8px' }}
+      onMouseDown={e => e.stopPropagation()}
+    >
+      <Flex gap={8}>
+        <Input
+          size="small"
+          className="rb:w-60!"
+          placeholder={t('workflow.config.notes.enterLink')}
+          value={url}
+          onChange={e => setUrl(e.target.value)}
+          onKeyDown={e => e.stopPropagation()}
+          onPressEnter={confirm}
+          autoFocus
+        />
+        <Button size="small" type="primary" onClick={confirm}>{t('common.confirm')}</Button>
+      </Flex>
+    </div>,
+    document.body
+  );
+};
--- a/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/index.tsx
+++ b/web/src/views/Workflow/components/Nodes/NoteNode/NoteEditor/index.tsx
@@ -0,0 +1,184 @@
+import { type FC, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListNode, ListItemNode } from '@lexical/list';
+import { LinkNode } from '@lexical/link';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect, useRef } from 'react';
+import NoteFormatPlugin from './NoteFormatPlugin';
+import type { FormatState } from './NoteFormatPlugin';
+import { LinkPopover, EditLinkPopover } from './NoteLinkPopovers';
+
+const theme = {
+  paragraph: 'editor-paragraph',
+  text: {
+    bold: 'editor-text-bold',
+    italic: 'editor-text-italic',
+    strikethrough: 'note-text-strikethrough',
+  },
+  list: { ul: 'note-list-ul', listitem: 'note-list-item' },
+  link: 'note-link',
+};
+
+const NOTE_NODES = [ListNode, ListItemNode, LinkNode];
+
+const NOTE_STYLES = `
+  .editor-text-bold { font-weight: bold; }
+  .editor-text-italic { font-style: italic; }
+  .note-text-strikethrough { text-decoration: line-through; }
+  .note-list-ul { list-style-type: disc; padding-left: 1.2em; margin: 0; }
+  .note-list-item { margin: 2px 0; }
+  .note-link { color: #2563eb; text-decoration: underline; cursor: pointer; }
+`;
+
+const NoteInitPlugin: FC<{ value: string }> = ({ value }) => {
+  const [editor] = useLexicalComposerContext();
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (initialized.current || !value) return;
+    initialized.current = true;
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed?.root) {
+        const state = editor.parseEditorState(JSON.stringify(parsed));
+        editor.setEditorState(state);
+        return;
+      }
+    } catch {}
+  }, [editor, value]);
+  return null;
+};
+
+
+interface NoteEditorProps {
+  nodeId: string;
+  value: string;
+  fontSize?: number;
+  onChange: (val: string) => void;
+  onFormatChange?: (state: FormatState) => void;
+}
+
+const NoteEditor: FC<NoteEditorProps> = ({ nodeId, value, fontSize = 12, onChange, onFormatChange }) => {
+  const { t } = useTranslation();
+  const [linkState, setLinkState] = useState<{ url: string; rect: DOMRect } | null>(null);
+  const [editLinkRect, setEditLinkRect] = useState<{ url: string; rect: DOMRect } | null>(null);
+  const removingLink = useRef(false);
+
+  useEffect(() => {
+    if (!linkState) return;
+    const handler = () => setLinkState(null);
+    window.addEventListener('mousedown', handler);
+    return () => window.removeEventListener('mousedown', handler);
+  }, [!!linkState]);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const { id, url, rect: passedRect } = (e as CustomEvent).detail;
+      if (id !== nodeId) return;
+      if (passedRect) {
+        setEditLinkRect({ url: url || '', rect: passedRect });
+        return;
+      }
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const r = sel.getRangeAt(0).getBoundingClientRect();
+        if (r.width > 0 || r.height > 0) { setEditLinkRect({ url: url || '', rect: r }); return; }
+      }
+      const linkEl = document.querySelector(`[data-note-id="${nodeId}"] a.note-link`) as HTMLElement;
+      const rect = linkEl?.getBoundingClientRect() ?? new DOMRect(window.innerWidth / 2, 200, 0, 0);
+      setEditLinkRect({ url: url || '', rect });
+    };
+    window.addEventListener('note:edit-link', handler);
+    return () => window.removeEventListener('note:edit-link', handler);
+  }, [nodeId]);
+
+  const handleFormatChange = useCallback((state: FormatState) => {
+    onFormatChange?.(state);
+    if (state.linkUrl) {
+      requestAnimationFrame(() => {
+        if (removingLink.current) { removingLink.current = false; return; }
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          const rect = sel.getRangeAt(0).getBoundingClientRect();
+          if (rect.width > 0 || rect.height > 0) {
+            setLinkState({ url: state.linkUrl!, rect });
+            return;
+          }
+        }
+        // fallback: find the link element in the correct editor
+        const editorEl = document.querySelector(`[data-note-id="${nodeId}"] a.note-link`) as HTMLElement;
+        if (editorEl) {
+          setLinkState({ url: state.linkUrl!, rect: editorEl.getBoundingClientRect() });
+        }
+      });
+    } else {
+      setLinkState(null);
+    }
+  }, [onFormatChange]);
+
+  return (
+    <>
+      <style>{NOTE_STYLES}</style>
+      <LexicalComposer initialConfig={{ namespace: `note-${nodeId}`, theme, nodes: NOTE_NODES, onError: console.error }}>
+        <div style={{ position: 'relative' }} data-note-id={nodeId}>
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                style={{ minHeight: 60, outline: 'none', resize: 'none', fontSize: '12px', lineHeight: '18px', color: '#374151', overflow: 'auto', cursor: 'auto' }}
+              />
+            }
+            placeholder={
+              <div style={{ position: 'absolute', top: 0, left: 0, color: '#9CA3AF', lineHeight: '18px', pointerEvents: 'none' }}>
+                {t('workflow.config.notes.placeholder')}
+              </div>
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <OnChangePlugin onChange={(editorState) => onChange(JSON.stringify(editorState.toJSON()))} />
+          <NoteInitPlugin value={value} />
+          <NoteFormatPlugin nodeId={nodeId} fontSize={fontSize} onFormatChange={handleFormatChange} />
+          {editLinkRect && (
+            <EditLinkPopover
+              rect={editLinkRect.rect}
+              initialUrl={editLinkRect.url}
+              onConfirm={(url) => {
+                removingLink.current = true;
+                window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: 'link', value: url || null } }));
+                setEditLinkRect(null);
+              }}
+            />
+          )}
+          {linkState && (
+            <LinkPopover
+              url={linkState.url}
+              rect={linkState.rect}
+              onEdit={() => {
+                removingLink.current = true;
+                const { rect, url } = linkState;
+                setLinkState(null);
+                setEditLinkRect({ url, rect });
+              }}
+              onRemove={() => {
+                removingLink.current = true;
+                setLinkState(null);
+                window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: 'link', value: null } }));
+              }}
+            />
+          )}
+        </div>
+      </LexicalComposer>
+    </>
+  );
+};
+
+export default NoteEditor;
--- a/web/src/views/Workflow/components/Nodes/NoteNode/NoteNodeToolbar.tsx
+++ b/web/src/views/Workflow/components/Nodes/NoteNode/NoteNodeToolbar.tsx
@@ -0,0 +1,163 @@
+import { type FC } from 'react';
+import { Flex, Dropdown, type MenuProps, Switch, Button, Divider } from 'antd';
+import { UnorderedListOutlined, BoldOutlined, ItalicOutlined, StrikethroughOutlined, LinkOutlined, DashOutlined } from '@ant-design/icons';
+import { Node } from '@antv/x6';
+import { useTranslation } from 'react-i18next'
+
+import { THEME_MAP } from '../../../constant';
+const FONT_SIZES = [
+  { label: '小', value: 12 },
+  { label: '中', value: 14 },
+  { label: '大', value: 16 },
+];
+
+interface NoteNodeToolbarProps {
+  node: Node;
+  onFormat: (type: string, value?: unknown) => void;
+  toolConfig: Record<string, number | boolean>;
+  nodeId: string;
+}
+
+const NoteNodeToolbar: FC<NoteNodeToolbarProps> = ({ node, onFormat, toolConfig, nodeId }) => {
+  const data = node?.getData() || {};
+  const { t } = useTranslation();
+
+  const colorItems: MenuProps['items'] = Object.entries(THEME_MAP).map(([key, theme]) => ({
+    key,
+    label: (
+      <div
+        className="rb:w-5 rb:h-5 rb:rounded-full rb:cursor-pointer rb:border rb:border-gray-200"
+        style={{ background: theme.bg }}
+        onClick={() => onFormat('color', key)}
+      />
+    ),
+  }));
+
+  const fontSizeItems: MenuProps['items'] = FONT_SIZES.map(({ label, value }) => ({
+    key: value,
+    label: <span onClick={() => onFormat('fontSize', value)}>{label}</span>,
+  }));
+
+  const currentFontSize = FONT_SIZES.find(f => f.value === toolConfig.fontSize)?.label ?? '小';
+
+  const handleClick: MenuProps['onClick'] = (e) => {
+    switch (e.key) {
+      case 'delete':
+        node.remove()
+        break;
+      case 'copy':
+        break;
+    }
+  }
+  const handleChange = (type: string) => {
+    let show_author = data.config.show_author.defaultValue
+    if(type === 'showAuth'){
+      show_author = !show_author
+    }
+    node.setData({
+      ...data,
+      config: {
+        ...data.config,
+        show_author: {
+          ...data.config.show_author,
+          defaultValue: show_author
+        }
+      }
+    })
+  }
+
+  return (
+    <Flex
+      align="center"
+      gap={8}
+      className="rb:absolute rb:-top-11 rb:left-1/2 rb:-translate-x-1/2 rb:bg-white rb:z-10 rb:whitespace-nowrap rb:rounded-lg rb:py-1! rb:px-3!"
+      onClick={e => e.stopPropagation()}
+    >
+      {/* Color picker */}
+      <Dropdown menu={{ items: colorItems }} trigger={['click']}>
+        <div
+          className="rb:w-5 rb:h-5 rb:rounded-full rb:cursor-pointer rb:border rb:border-gray-200"
+          style={{ background: THEME_MAP[data.bgColor]?.bg || THEME_MAP.blue.bg }}
+        />
+      </Dropdown>
+
+      <Divider type="vertical" />
+
+      {/* Font size */}
+      <Dropdown menu={{ items: fontSizeItems }} trigger={['click']}>
+        <Flex align="center" gap={4} className="rb:cursor-pointer rb:text-xs rb:text-gray-600 rb:select-none">
+          <span className="rb:text-xs">Aa</span>
+          <span className="rb:text-xs">{currentFontSize}</span>
+        </Flex>
+      </Dropdown>
+
+      <Divider type="vertical" />
+
+      {/* Bold */}
+      <Button
+        type={toolConfig.bold ? 'primary' : 'text'}
+        icon={<BoldOutlined />}
+        onClick={() => onFormat('bold')}
+      />
+
+      {/* Italic */}
+      <Button
+        type={toolConfig.italic ? 'primary' : 'text'}
+        icon={<ItalicOutlined />}
+        onClick={() => onFormat('italic')}
+      />
+
+      {/* Strikethrough */}
+      <Button
+        type={toolConfig.strikethrough ? 'primary' : 'text'}
+        icon={<StrikethroughOutlined />}
+        onClick={() => onFormat('strikethrough')}
+      />
+
+      {/* Link */}
+      <Button
+        type={toolConfig.link ? 'primary' : 'text'}
+        icon={<LinkOutlined />}
+        onClick={() => {
+          const sel = window.getSelection();
+          const rect = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).getBoundingClientRect() : undefined;
+          window.dispatchEvent(new CustomEvent('note:edit-link', { detail: { id: nodeId, url: '', rect } }));
+        }}
+      />
+
+      {/* List */}
+      <Button
+        type={toolConfig.list ? 'primary' : 'text'}
+        icon={<UnorderedListOutlined />}
+        onClick={() => onFormat('list')}
+      />
+
+      <Divider type="vertical" />
+
+      <Dropdown
+        menu={{
+          items: [
+            // { key: 'copy', label: t('common.copy') },
+            {
+              key: 'showAuth',
+              label: <Flex align="center" gap={24}>
+                {t('workflow.config.notes.showAuth')}
+                <Switch
+                  size="small"
+                  checked={data.config.show_author.defaultValue}
+                  onChange={() => handleChange('showAuth')}
+                />
+              </Flex>
+            },
+            { key: 'delete', label: <Flex>{t('common.delete')}</Flex> },
+          ],
+          onClick: handleClick
+        }}
+      >
+        <DashOutlined />
+      </Dropdown>
+    </Flex>
+  );
+};
+
+export default NoteNodeToolbar;
--- a/web/src/views/Workflow/components/Nodes/NoteNode/index.tsx
+++ b/web/src/views/Workflow/components/Nodes/NoteNode/index.tsx
@@ -0,0 +1,155 @@
+import { useRef, useState } from 'react';
+import type { ReactShapeConfig } from '@antv/x6-react-shape';
+import { Flex } from 'antd';
+
+import NoteEditor from './NoteEditor';
+import NoteNodeToolbar from './NoteNodeToolbar';
+import { THEME_MAP } from '../../../constant'
+
+const MIN_W = 240;
+const MIN_H = 120;
+
+const NoteNode: ReactShapeConfig['component'] = ({ node }) => {
+  const data = node?.getData() || {};
+  const nodeId = node?.id || '';
+  const startRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null);
+  const [toolConfig, setToolConfig] = useState({
+    fontSize: 12,
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    list: false,
+  })
+
+  const handleFormat = (type: string, value?: unknown) => {
+    console.log('handleFormat', type, value)
+    if (type === 'color') {
+      node?.setData({
+        ...data,
+        config: {
+          ...data.config,
+          theme: {
+            ...data.config.theme,
+            defaultValue: value
+          }
+        }
+      });
+    } else if (type === 'fontSize') {
+      window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: 'fontSize', value } }));
+    } else if (type === 'link') {
+      window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: 'link', value: value || null } }));
+    } else if (type === 'list') {
+      window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: 'list', value: !toolConfig.list } }));
+    } else {
+      window.dispatchEvent(new CustomEvent('note:format', { detail: { id: nodeId, format: type } }));
+    }
+
+    setToolConfig(prev => ({ ...prev, [type]: value || !prev[type as unknown as keyof typeof toolConfig]  }))
+  };
+
+  const onResizeMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const size = node?.getSize();
+    if (!size) return;
+    startRef.current = { x: e.clientX, y: e.clientY, w: size.width, h: size.height };
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!startRef.current) return;
+      const w = Math.max(MIN_W, startRef.current.w + ev.clientX - startRef.current.x);
+      const h = Math.max(MIN_H, startRef.current.h + ev.clientY - startRef.current.y);
+
+      node?.setData({
+        ...data,
+        config: {
+          ...data.config,
+          width: {
+            ...data.config.width,
+            defaultValue: w
+          },
+          height: {
+            ...data.config.height,
+            defaultValue: h
+          }
+        }
+      });
+      node?.prop('size', { width: w, height: h });
+    };
+    const onMouseUp = () => {
+      startRef.current = null;
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  };
+
+  const updateText = (value: string) => {
+    node.setData({
+      ...data,
+      config: {
+        ...data.config,
+        text: {
+          ...data.config.text,
+          defaultValue: value
+        }
+      }
+    })
+  }
+
+  const theme = THEME_MAP[data.config?.theme?.defaultValue || 'blue'] || THEME_MAP['blue']
+
+  return (
+    <div
+      className="rb:relative rb:h-full rb:w-full rb:rounded-2xl rb:border"
+      style={{
+        background: theme.bg,
+        borderColor: data.isSelected ? theme.outer : theme.border,
+      }}
+    >
+      <div className="rb:h-4 rb:rounded-tl-2xl rb:rounded-tr-2xl"
+        style={{
+          background: theme.title
+        }}
+      ></div>
+      {data.isSelected && <NoteNodeToolbar node={node!} nodeId={nodeId} toolConfig={toolConfig} onFormat={handleFormat} />}
+
+      <div
+        className="rb:w-full rb:h-[calc(100%-36px)] rb:p-2.5 rb:overflow-auto"
+        onMouseDown={e => {
+          e.stopPropagation()
+          node?.setData({ ...node.getData(), isSelected: true })
+        }}
+        onWheel={e => e.stopPropagation()}
+      >
+        <NoteEditor
+          nodeId={nodeId}
+          value={data.config.text.defaultValue || ''}
+          fontSize={toolConfig.fontSize}
+          onChange={updateText}
+          onFormatChange={(state) => setToolConfig(prev => ({ ...prev, ...state }))}
+        />
+      </div>
+      <Flex align="center" justify="space-between" className="rb:pl-2.5! rb:pr-1!">
+        <div className="rb:text-[12px] rb:text-[#5B6167]">
+          {data.config.show_author.defaultValue
+            ? data.config.author.defaultValue
+            : undefined
+          }
+        </div>
+        
+
+        {/* <div className="rb:size-4 rb:border-b-[4px] rb:border-r-[4px]  rb:border-[#EBEBEB] rb:rounded-2xl"></div> */}
+        <div
+          onMouseDown={onResizeMouseDown}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <path fillRule="evenodd" clipRule="evenodd" d="M12 9.75V6H13.5V9.75C13.5 11.8211 11.8211 13.5 9.75 13.5H6V12H9.75C10.9926 12 12 10.9926 12 9.75Z" fill="black" fillOpacity="0.16"></path>
+          </svg>
+        </div>
+      </Flex>
+    </div>
+  );
+};
+
+export default NoteNode;
--- a/web/src/views/Workflow/components/PortClickHandler.tsx
+++ b/web/src/views/Workflow/components/PortClickHandler.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-09 18:30:28 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 11:49:30
+ * @Last Modified time: 2026-03-20 11:24:26
 */
 import { useEffect, useState } from 'react';
 import { Popover } from 'antd';
@@ -148,18 +148,23 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
      if (sourcePortGroup === 'left') {
        // Connect from left port to new node's right side
        targetPort = targetPorts.find((port: any) => port.group === 'right')?.id || 'right';
+        graph.addEdge({
+          source: { cell: newNode.id, port: targetPort },
+          target: { cell: sourceNode.id, port: sourcePort },
+          ...edgeAttrs
+          // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
+        });
      } else {
        // Connect from right port to new node's left side
        targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
+        graph.addEdge({
+          source: { cell: sourceNode.id, port: sourcePort },
+          target: { cell: newNode.id, port: targetPort },
+          ...edgeAttrs
+          // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
+        });
      }
      
-      graph.addEdge({
-        source: { cell: sourceNode.id, port: sourcePort },
-        target: { cell: newNode.id, port: targetPort },
-        ...edgeAttrs
-        // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
-      });
-      
      // Adjust loop node size when child node is added via port within loop node
      const cycleId = sourceNodeData.cycle;
      if (cycleId) {
@@ -230,20 +235,27 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
        const isChildOfLoop = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'loop');
        const isChildOfIteration = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'iteration');
        
+        const sourcePortInfo = sourceNode?.getPorts().find((p: any) => p.id === sourcePort);
+        const sourcePortGroup = sourcePortInfo?.group || sourcePort;
+        const isLeftPort = sourcePortGroup === 'left';
+
        let filteredNodes;
        if (isChildOfLoop) {
-          // Use same filtering as AddNode for child nodes of loop, but allow break
+        // Use same filtering as AddNode for child nodes of loop, but allow break
          filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
        } else if (isChildOfIteration) {
          // Filter out loop and iteration nodes for children of iteration nodes, but allow break
          filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
        } else {
          // Original filtering for non-loop child nodes
-          filteredNodes = category.nodes.filter(nodeType => !['start', 'break', 'cycle-start'].includes(nodeType.type));
          filteredNodes = category.nodes.filter(nodeType =>
            nodeType.type !== 'start' && nodeType.type !== 'cycle-start' && nodeType.type !== 'break'
          );
        }
+
+        if (isLeftPort) {
+          filteredNodes = filteredNodes.filter(nodeType => nodeType.type !== 'end');
+        }
        
        if (filteredNodes.length === 0) return null;
        
--- a/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
+++ b/web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-09 18:35:43 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 15:20:32
+ * @Last Modified time: 2026-03-20 11:32:44
 */
 import { type FC, useRef, useState } from "react";
 import { useTranslation } from 'react-i18next'
@@ -211,7 +211,9 @@ const HttpRequest: FC<{ options: Suggestion[]; selectedNode?: any; graphRef?: an
          </Form.Item>
        }
        {values?.body?.content_type === 'binary' &&
-          <Form.Item name={['body', 'data']} noStyle>
+          <Form.Item name={['body', 'data']}
+            className="rb:bg-[#F6F6F6] rb:border-[#F6F6F6]! rb:hover:bg-white rb:hover:border-[#171719]! rb:border rb:rounded-lg rb:px-2! rb:py-1.5! rb:mb-0!"
+          >
            <Editor
              placeholder={t('common.pleaseSelect')}
              options={options.filter(vo => vo.dataType.includes('file'))}
--- a/web/src/views/Workflow/components/Properties/index.tsx
+++ b/web/src/views/Workflow/components/Properties/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:39:59 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 17:16:13
+ * @Last Modified time: 2026-03-20 11:25:59
 */
 import { type FC, useEffect, useState, useMemo } from "react";
 import clsx from 'clsx'
@@ -86,7 +86,7 @@ const Properties: FC<PropertiesProps> = ({

  useEffect(() => {
    if (selectedNode && form) {
-      const { type = 'default', name = '', config } = selectedNode.getData() || {}
+      const { type = 'default', name = '', config, id } = selectedNode.getData() || {}
      const initialValue: Record<string, any> = {}
      Object.keys(config || {}).forEach(key => {
        if (config && config[key] && 'defaultValue' in config[key]) {
@@ -96,7 +96,7 @@ const Properties: FC<PropertiesProps> = ({

      form.setFieldsValue({
        type,
-        id: selectedNode.id,
+        id,
        name,
        ...initialValue,
      })
--- a/web/src/views/Workflow/constant.ts
+++ b/web/src/views/Workflow/constant.ts
@@ -2,13 +2,14 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:06:18 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 17:10:59
+ * @Last Modified time: 2026-03-20 11:23:17
 */
 import LoopNode from './components/Nodes/LoopNode';
 import NormalNode from './components/Nodes/NormalNode';
 import ConditionNode from './components/Nodes/ConditionNode';
 import GroupStartNode from './components/Nodes/GroupStartNode';
 import AddNode from './components/Nodes/AddNode'
+import NoteNode from './components/Nodes/NoteNode';
 import type { PortMetadata, GroupMetadata } from '@antv/x6/lib/model/port';
 import type { ReactShapeConfig } from '@antv/x6-react-shape';

@@ -475,10 +476,81 @@ export const nodeLibrary: NodeLibrary[] = [
    ]
  },
 ];
+
+export const THEME_MAP: Record<string, { outer: string; title: string; bg: string; border: string }> = {
+  blue: {
+    outer: '#2E90FA',
+    title: '#D1E9FF',
+    bg: '#EFF8FF',
+    border: '#84CAFF',
+  },
+  cyan: {
+    outer: '#06AED4',
+    title: '#CFF9FE',
+    bg: '#ECFDFF',
+    border: '#67E3F9',
+  },
+  green: {
+    outer: '#16B364',
+    title: '#D3F8DF',
+    bg: '#EDFCF2',
+    border: '#73E2A3',
+  },
+  yellow: {
+    outer: '#EAAA08',
+    title: '#FEF7C3',
+    bg: '#FEFBE8',
+    border: '#FDE272',
+  },
+  pink: {
+    outer: '#EE46BC',
+    title: '#FCE7F6',
+    bg: '#FDF2FA',
+    border: '#FAA7E0',
+  },
+  violet: {
+    outer: '#875BF7',
+    title: '#ECE9FE',
+    bg: '#F5F3FF',
+    border: '#C3B5FD',
+  },
+}
+
+export const notesConfig = {
+  type: "notes", icon: templateRenderingIcon,
+  config: {
+    text: {
+      type: 'define',
+    },
+    theme: {
+      type: 'define',
+      defaultValue: 'blue',
+    },
+    width: {
+      type: 'define',
+      width: 240,
+    },
+    height: {
+      type: 'define',
+      height: 120,
+    },
+    author: {
+      type: 'define',
+    },
+    show_author: {
+      type: 'define',
+      defaultValue: true
+    }
+  }
+}
 export const unknownNode = {
  type: 'unknown',
  icon: unknownIcon
 }
+export const noteNode = {
+  type: 'notes',
+  icon: unknownIcon
+}

 export const nodeWidth = 240;

@@ -526,6 +598,12 @@ export const nodeRegisterLibrary: ReactShapeConfig[] = [
    height: 28,
    component: AddNode,
  },
+  {
+    shape: 'notes-node',
+    width: nodeWidth,
+    height: 120,
+    component: NoteNode,
+  },
 ];

 /**
@@ -658,7 +736,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
        defaultPortItems[0],
        ...(['IF', 'ELSE'].map((_, index) => ({
          group: 'right',
-          id: `CASE${index}`,
+          id: `CASE${index + 1}`,
          args: {
            ...portArgs,
            y: portItemArgsY * index + conditionNodePortItemArgsY,
@@ -677,7 +755,7 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
        defaultPortItems[0],
        ...(['分类1', '分类2'].map((_text, index) => ({
          group: 'right',
-          id: `CASE${index}`,
+          id: `CASE${index + 1}`,
          args: {
            ...portArgs,
            y: portItemArgsY * index + conditionNodePortItemArgsY,
@@ -758,6 +836,11 @@ export const graphNodeLibrary: Record<string, NodeConfig> = {
      items: [defaultPortItems[0]],
    },
  },
+  notes: {
+    width: nodeWidth,
+    height: 120,
+    shape: 'notes-node',
+  }
 }


--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 15:17:48 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 14:49:17
+ * @Last Modified time: 2026-03-20 11:26:43
 */
 import { useRef, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -12,9 +12,11 @@ import { Graph, Node, MiniMap, Snapline, Clipboard, Keyboard, type Edge } from '
 import { register } from '@antv/x6-react-shape';
 import type { PortMetadata } from '@antv/x6/lib/model/port';

-import { nodeRegisterLibrary, graphNodeLibrary, nodeLibrary, portMarkup, portAttrs, edgeAttrs, edge_color, edge_selected_color, portTextAttrs, defaultAbsolutePortGroups, nodeWidth, unknownNode, defaultPortItems, portItemArgsY, edge_width, conditionNodePortItemArgsY, conditionNodeItemHeight, conditionNodeHeight } from '../constant';
+import { nodeRegisterLibrary, graphNodeLibrary, nodeLibrary, portMarkup, portAttrs, edgeAttrs, edge_color, edge_selected_color, portTextAttrs, defaultAbsolutePortGroups, nodeWidth, unknownNode, defaultPortItems, portItemArgsY, edge_width, conditionNodePortItemArgsY, conditionNodeItemHeight, conditionNodeHeight, notesConfig } from '../constant';
 import type { WorkflowConfig, NodeProperties, ChatVariable } from '../types';
 import { getWorkflowConfig, saveWorkflowConfig } from '@/api/application'
+import { useUser } from '@/store/user';
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'

 /**
 * Props for useWorkflowGraph hook
@@ -24,6 +26,8 @@ export interface UseWorkflowGraphProps {
  containerRef: React.RefObject<HTMLDivElement>;
  /** Reference to the minimap container element */
  miniMapRef: React.RefObject<HTMLDivElement>;
+  /** Callback when features config is loaded */
+  onFeaturesLoad?: (features: FeaturesConfigForm | undefined) => void;
 }

 /**
@@ -64,6 +68,9 @@ export interface UseWorkflowGraphReturn {
  chatVariables: ChatVariable[];
  /** Function to update chat variables */
  setChatVariables: React.Dispatch<React.SetStateAction<ChatVariable[]>>;
+
+  handleAddNotes: () => void;
+  handleSaveFeaturesConfig: (value: FeaturesConfigForm) => void;
 }

 /**
@@ -75,11 +82,13 @@ export interface UseWorkflowGraphReturn {
 export const useWorkflowGraph = ({
  containerRef,
  miniMapRef,
+  onFeaturesLoad,
 }: UseWorkflowGraphProps): UseWorkflowGraphReturn => {
  // Hooks
  const { id } = useParams();
  const { message } = App.useApp();
  const { t } = useTranslation()
+  const { user } = useUser();
  
  // Refs
  const graphRef = useRef<Graph>();
@@ -111,6 +120,7 @@ export const useWorkflowGraph = ({
        })
        setChatVariables(initChatVariables)
        setConfig({ ...rest, variables: initChatVariables })
+        onFeaturesLoad?.(rest.features)
      })
  }

@@ -128,7 +138,7 @@ export const useWorkflowGraph = ({
    if (nodes.length) {
      const nodeList = nodes.map(node => {
        const { id, type, name, position, config = {} } = node
-        let nodeLibraryConfig = [...nodeLibrary, { nodes: [unknownNode] }]
+        let nodeLibraryConfig: NodeProperties | undefined = [...nodeLibrary, { nodes: [unknownNode, notesConfig] }]
          .flatMap(category => category.nodes)
          .find(n => n.type === type) as NodeProperties
        nodeLibraryConfig = JSON.parse(JSON.stringify({ ...nodeLibraryConfig, config: nodeLibraryConfig.config || {} }))
@@ -197,6 +207,13 @@ export const useWorkflowGraph = ({
          data: { ...node, ...nodeLibraryConfig},
          ...position,
        }
+
+        if (type === 'notes') {
+          const w = config.width;
+          const h = config.height;
+          if (w) nodeConfig.width = w as number;
+          if (h) nodeConfig.height = h as number;
+        }
        
        // Generate ports dynamically for if-else node based on cases
        if (type === 'if-else' && config.cases && Array.isArray(config.cases)) {
@@ -471,11 +488,12 @@ export const useWorkflowGraph = ({
   */
  const nodeClick = ({ node }: { node: Node }) => {
    // Ignore add-node type node clicks
-    if (node.getData()?.type === 'add-node' || node.getData().type === 'break' || node.getData().type === 'cycle-start') {
+    const nodeData = node.getData()
+    if (nodeData?.type === 'add-node' || nodeData.type === 'break' || nodeData.type === 'cycle-start') {
      setSelectedNode(null)
      return;
    }
-    
+
    const nodes = graphRef.current?.getNodes();

    nodes?.forEach(vo => {
@@ -488,11 +506,13 @@ export const useWorkflowGraph = ({
      }
    });
    node.setData({
-      ...node.getData(),
+      ...nodeData,
      isSelected: true,
    });
-    setSelectedNode(node);
    clearEdgeSelect()
+    if (nodeData.type !== 'notes') {
+      setSelectedNode(node);
+    }
  };
  /**
   * Handle edge click event
@@ -601,7 +621,14 @@ export const useWorkflowGraph = ({
   */
  const parseEvent = () => {
    if (!graphRef.current?.isClipboardEmpty()) {
-      graphRef.current?.paste({ offset: 32 });
+      const pastedNodes = graphRef.current?.paste({ offset: 32 }) ?? [];
+      pastedNodes.forEach(cell => {
+        if (cell.isNode()) {
+          const data = cell.getData();
+          const newId = `${(data.type as string).replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          cell.setData({ ...data, id: newId });
+        }
+      });
      blankClick();
    }
    return false;
@@ -749,6 +776,8 @@ export const useWorkflowGraph = ({
      panning: isHandMode,
      mousewheel: {
        enabled: true,
+        factor: 0.1,
+        modifiers: null,
      },
      connecting: {
        connector: {
@@ -772,8 +801,23 @@ export const useWorkflowGraph = ({
        createEdge() {
          return graphRef.current?.createEdge(edgeAttrs);
        },
-        validateConnection({ sourceCell, targetCell, targetMagnet }) {
+        validateConnection({ sourceCell, targetCell, sourceMagnet, targetMagnet }) {
          if (!targetMagnet) return false;
+
+          // Only allow right port → left port connections
+          const getPortGroup = (magnet: Element) => {
+            let el: Element | null = magnet;
+            while (el) {
+              const group = el.getAttribute('port-group');
+              if (group) return group;
+              el = el.parentElement;
+            }
+            return null;
+          };
+          const sourceGroup = sourceMagnet ? getPortGroup(sourceMagnet) : null;
+          const targetGroup = targetMagnet ? getPortGroup(targetMagnet) : null;
+
+          if (sourceGroup === 'left' || targetGroup === 'right') return false;
          
          // Node cannot connect to itself
          if (sourceCell?.id === targetCell?.id) return false;
@@ -872,8 +916,31 @@ export const useWorkflowGraph = ({
    init();

    window.addEventListener('resize', handleResize);
+
+    const handleNoteKeydown = (e: KeyboardEvent) => {
+      if (!graphRef.current) return;
+      const selectedNote = graphRef.current.getNodes().find(n => n.getData()?.isSelected && n.getData()?.type === 'notes');
+      if (!selectedNote) return;
+      const isMeta = e.ctrlKey || e.metaKey;
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        // Only delete node when editor is not focused on text
+        const active = document.activeElement;
+        if (active && (active as HTMLElement).isContentEditable) return;
+        deleteEvent();
+      } else if (isMeta && e.key === 'c') {
+        copyEvent();
+      } else if (isMeta && e.key === 'v') {
+        parseEvent();
+      } else if (isMeta && e.key === 'd') {
+        e.preventDefault();
+        deleteEvent();
+      }
+    };
+    window.addEventListener('keydown', handleNoteKeydown);
+
    return () => {
      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('keydown', handleNoteKeydown);
      graphRef.current?.dispose();
    };
  }, []);
@@ -897,7 +964,7 @@ export const useWorkflowGraph = ({
      .flatMap(category => category.nodes)
      .find(n => n.type === dragData.type);
    nodeLibraryConfig = JSON.parse(JSON.stringify({ config: {}, ...nodeLibraryConfig })) as NodeProperties
-    
+
    // Create clean node data, only keep necessary fields
    const cleanNodeData = {
      id: `${dragData.type.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
@@ -948,6 +1015,9 @@ export const useWorkflowGraph = ({
      }) || [];
      const edges = graphRef.current?.getEdges() || []

+
+      console.log('config', config)
+
      const params = {
        ...config,
        variables: chatVariables.map(v => {
@@ -1116,6 +1186,35 @@ export const useWorkflowGraph = ({
    })
  }

+  const handleAddNotes = () => {
+    if (!graphRef.current) return;
+    const nodeConfig: NodeProperties = JSON.parse(JSON.stringify(notesConfig));
+    nodeConfig.config = {
+      ...nodeConfig.config,
+      author: { type: 'define', defaultValue: user?.username || '' },
+    };
+    const cleanNodeData = {
+      id: `notes_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      name: t('workflow.notes'),
+      ...nodeConfig,
+    };
+    const container = graphRef.current.container;
+    const nodeW = graphNodeLibrary.notes?.width || nodeWidth;
+    const nodeH = graphNodeLibrary.notes?.height || 100;
+    const rect = container.getBoundingClientRect();
+    const center = graphRef.current.clientToLocal(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    graphRef.current.addNode({
+      ...(graphNodeLibrary.notes || graphNodeLibrary.default),
+      x: center.x - nodeW / 2,
+      y: center.y - nodeH / 2,
+      id: cleanNodeData.id,
+      data: { ...cleanNodeData },
+    });
+  }
+  const handleSaveFeaturesConfig = (value?: FeaturesConfigForm) => {
+    setConfig(prev => prev ? { ...prev, features: value } as WorkflowConfig : prev)
+  }
+
  return {
    config,
    setConfig,
@@ -1133,6 +1232,8 @@ export const useWorkflowGraph = ({
    parseEvent,
    handleSave,
    chatVariables,
-    setChatVariables
+    setChatVariables,
+    handleAddNotes,
+    handleSaveFeaturesConfig
  };
 };
--- a/web/src/views/Workflow/index.tsx
+++ b/web/src/views/Workflow/index.tsx
@@ -6,12 +6,12 @@ import Properties from './components/Properties';
 import CanvasToolbar from './components/CanvasToolbar';
 import PortClickHandler from './components/PortClickHandler';
 import { useWorkflowGraph } from './hooks/useWorkflowGraph';
-import type { WorkflowRef } from '@/views/ApplicationConfig/types'
+import type { WorkflowRef, FeaturesConfigForm } from '@/views/ApplicationConfig/types'
 import Chat from './components/Chat/Chat';
 import type { ChatRef, AddChatVariableRef } from './types'
 import AddChatVariable from './components/AddChatVariable';

-const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
+const Workflow = forwardRef<WorkflowRef, { onFeaturesLoad?: (features: FeaturesConfigForm | undefined) => void }>(({ onFeaturesLoad }, ref) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const miniMapRef = useRef<HTMLDivElement>(null);
  const addChatVariableRef = useRef<AddChatVariableRef>(null)
@@ -32,8 +32,10 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
    parseEvent,
    handleSave,
    chatVariables,
-    setChatVariables
-  } = useWorkflowGraph({ containerRef, miniMapRef });
+    setChatVariables,
+    handleAddNotes,
+    handleSaveFeaturesConfig
+  } = useWorkflowGraph({ containerRef, miniMapRef, onFeaturesLoad });

  const onDragOver = (event: React.DragEvent) => {
    event.preventDefault();
@@ -53,7 +55,9 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
    handleRun,
    graphRef,
    addVariable,
-    config
+    config,
+    features: config?.features,
+    handleSaveFeaturesConfig
  }))
  return (
    <div className="rb:h-[calc(100vh-64px)] rb:relative">
@@ -74,6 +78,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
          isHandMode={isHandMode}
          setIsHandMode={setIsHandMode}
          zoomLevel={zoomLevel}
+          addNotes={handleAddNotes}
        />
      </div>
      
@@ -92,6 +97,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
      }
      <Chat
        ref={chatRef}
+        data={config}
        graphRef={graphRef}
        appId={config?.app_id as string}
      />
--- a/web/src/views/Workflow/types.ts
+++ b/web/src/views/Workflow/types.ts
@@ -2,6 +2,7 @@
 import { Graph } from '@antv/x6';
 import type { KnowledgeConfig } from './components/Properties/Knowledge/types'
 import type { Variable } from './components/Properties/VariableList/types'
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'
 export interface NodeConfig {
  type: 'input' | 'textarea' | 'select' | 'inputNumber' | 'slider' | 'customSelect' | 'define' | 'knowledge' | 'variableList' | string;
  placeholder?: string;
@@ -89,6 +90,8 @@ export interface WorkflowConfig {
  is_active: boolean;
  created_at: number;
  updated_at: number;
+
+  features?: FeaturesConfigForm;
 }

 export interface ChatRef {