Feat: The Begin and IterationStart operators cannot be deleted using shortcut keys #4287 (#4288)

### What problem does this PR solve?

Feat: The Begin and IterationStart operators cannot be deleted using
shortcut keys #4287

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import { useUpdateNodeInternals } from '@xyflow/react';
 import {
   Button,
   Card,
@@ -19,7 +20,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { useUpdateNodeInternals } from 'reactflow';
 import { Operator } from '../../constant';
 import { useBuildFormSelectOptions } from '../../form-hooks';
 

web/src/pages/flow/form/components/dynamic-input-variable.tsx

@@ -2,14 +2,13 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
 import { PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Node } from 'reactflow';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { NodeData } from '../../interface';
 
+import { RAGFlowNodeType } from '../../interface';
 import styles from './index.less';
 
 interface IProps {
-  node?: Node<NodeData>;
+  node?: RAGFlowNodeType;
 }
 
 enum VariableType {

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

@@ -2,14 +2,13 @@ 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 { Node } from 'reactflow';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IGenerateParameter, NodeData } from '../../interface';
+import { IGenerateParameter, RAGFlowNodeType } from '../../interface';
 import { useHandleOperateParameters } from './hooks';
 
 import styles from './index.less';
 interface IProps {
-  node?: Node<NodeData>;
+  node?: RAGFlowNodeType;
 }
 
 const components = {

web/src/pages/flow/form/invoke-form/dynamic-variables.tsx

@@ -4,14 +4,13 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Collapse, Flex, Input, Select, Table, TableProps } from 'antd';
 import { trim } from 'lodash';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
-import { IInvokeVariable, NodeData } from '../../interface';
+import { IInvokeVariable, RAGFlowNodeType } from '../../interface';
 import { useHandleOperateParameters } from './hooks';
 
-import { Node } from 'reactflow';
 import styles from './index.less';
 
 interface IProps {
-  node?: Node<NodeData>;
+  node?: RAGFlowNodeType;
 }
 
 const components = {

web/src/pages/flow/form/relevant-form/hooks.ts

@@ -1,6 +1,6 @@
+import { Edge } from '@xyflow/react';
 import pick from 'lodash/pick';
 import { useCallback, useEffect } from 'react';
-import { Edge } from 'reactflow';
 import { IOperatorForm } from '../../interface';
 import useGraphStore from '../../store';