Feat: Display MCP multiple selection bar #3221 (#8737)

### What problem does this PR solve?

Feat: Display MCP multiple selection bar #3221

### Type of change


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

web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx

@@ -0,0 +1,37 @@
+import { Trash2, Upload } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function useBulkOperateMCP() {
+  const { t } = useTranslation();
+  const [selectedList, setSelectedList] = useState<Array<string>>([]);
+
+  const handleEnableClick = useCallback(() => {}, []);
+
+  const handleDelete = useCallback(() => {}, []);
+
+  const handleSelectChange = useCallback((id: string, checked: boolean) => {
+    setSelectedList((list) => {
+      return checked ? [...list, id] : list.filter((item) => item !== id);
+    });
+  }, []);
+
+  const list = [
+    {
+      id: 'export',
+      label: t('mcp.export'),
+      icon: <Upload />,
+      onClick: handleEnableClick,
+    },
+    {
+      id: 'delete',
+      label: t('common.delete'),
+      icon: <Trash2 />,
+      onClick: handleDelete,
+    },
+  ];
+
+  return { list, selectedList, handleSelectChange };
+}
+
+export type UseBulkOperateMCPReturnType = ReturnType<typeof useBulkOperateMCP>;