feat: Add a note node to the agent canvas #2767 (#2768)

### What problem does this PR solve?

feat: Add a note node to the agent canvas #2767

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/flow/form/generate-form/dynamic-parameters.tsx

@@ -0,0 +1,98 @@
+import { EditableCell, EditableRow } from '@/components/editable-cell';
+import { useTranslate } from '@/hooks/common-hooks';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Button, Flex, Select, Table, TableProps } from 'antd';
+import { IGenerateParameter } from '../../interface';
+
+import { useBuildComponentIdSelectOptions } from '../../hooks';
+import { useHandleOperateParameters } from './hooks';
+import styles from './index.less';
+
+interface IProps {
+  nodeId?: string;
+}
+
+const components = {
+  body: {
+    row: EditableRow,
+    cell: EditableCell,
+  },
+};
+
+const DynamicParameters = ({ nodeId }: IProps) => {
+  const { t } = useTranslate('flow');
+
+  const options = useBuildComponentIdSelectOptions(nodeId);
+  const {
+    dataSource,
+    handleAdd,
+    handleRemove,
+    handleSave,
+    handleComponentIdChange,
+  } = useHandleOperateParameters(nodeId!);
+
+  const columns: TableProps<IGenerateParameter>['columns'] = [
+    {
+      title: t('key'),
+      dataIndex: 'key',
+      key: 'key',
+      width: 50,
+      onCell: (record: IGenerateParameter) => ({
+        record,
+        editable: true,
+        dataIndex: 'key',
+        title: 'key',
+        handleSave,
+      }),
+    },
+    {
+      title: t('componentId'),
+      dataIndex: 'component_id',
+      key: 'component_id',
+      align: 'center',
+      render(text, record) {
+        return (
+          <Select
+            style={{ width: '100%' }}
+            allowClear
+            options={options}
+            value={text}
+            onChange={handleComponentIdChange(record)}
+          />
+        );
+      },
+    },
+    {
+      title: t('operation'),
+      dataIndex: 'operation',
+      width: 20,
+      key: 'operation',
+      align: 'center',
+      fixed: 'right',
+      render(_, record) {
+        return <DeleteOutlined onClick={handleRemove(record.id)} />;
+      },
+    },
+  ];
+
+  return (
+    <section>
+      <Flex justify="end">
+        <Button size="small" onClick={handleAdd}>
+          {t('add')}
+        </Button>
+      </Flex>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        rowKey={'id'}
+        className={styles.variableTable}
+        components={components}
+        rowClassName={() => styles.editableRow}
+        scroll={{ x: true }}
+      />
+    </section>
+  );
+};
+
+export default DynamicParameters;