feat: add OperateDropdown and send debug message #918 (#1095)

### What problem does this PR solve?
feat: add OperateDropdown
feat: send debug message #918 

### Type of change


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

web/src/components/operate-dropdown/index.less

@@ -0,0 +1,3 @@
+.delete {
+  height: 24px;
+}

web/src/components/operate-dropdown/index.tsx

@@ -0,0 +1,61 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Dropdown, MenuProps, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import React from 'react';
+import styles from './index.less';
+
+interface IProps {
+  deleteItem: () => Promise<any>;
+}
+
+const OperateDropdown = ({
+  deleteItem,
+  children,
+}: React.PropsWithChildren<IProps>) => {
+  const { t } = useTranslation();
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const handleDelete = () => {
+    showDeleteConfirm({ onOk: deleteItem });
+  };
+
+  const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+    domEvent.preventDefault();
+    domEvent.stopPropagation();
+    if (key === '1') {
+      handleDelete();
+    }
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          {t('common.delete')}
+          <DeleteOutlined />
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        onClick: handleDropdownMenuClick,
+      }}
+    >
+      {children || (
+        <span className={styles.delete}>
+          <MoreIcon />
+        </span>
+      )}
+    </Dropdown>
+  );
+};
+
+export default OperateDropdown;