refactor(mcp): 优化 Monaco 编辑器的加载方式 (higress-group#571)

Author: JayLi52

frontend/src/pages/mcp/components/EditToolDrawer.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Drawer, Button, Space, message, Card } from 'antd';
 import { useTranslation } from 'react-i18next';
-import MonacoEditor from '@monaco-editor/react';
 import StepTitle from './StepTitle';
 import YamlUtil from './yamlUtil';
 import { swaggerToMcpConfig } from '@/services/mcp';
+import MonacoEditor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
 
 interface EditToolDrawerProps {
   visible: boolean;

frontend/src/pages/mcp/components/McpServerCommand.tsx

@@ -3,7 +3,10 @@ import { Select, message, Button } from 'antd';
 import { useSearchParams } from 'ice';
 import { CLIENT_MAP } from '../constant';
 import { useTranslation, Trans } from 'react-i18next';
-import MonacoEditor from '@monaco-editor/react';
+import MonacoEditor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+
+loader.config({ monaco });
 
 interface McpServerCommandProps {
   mode: 'streamableHttp' | 'sse';

frontend/src/pages/mcp/detail.tsx

@@ -27,7 +27,10 @@ import DeleteConfirm from './components/DeleteConfirm';
 import McpServerCommand from './components/McpServerCommand';
 import AddConsumerAuth from './components/AddConsumerAuth';
 import YamlUtil from './components/yamlUtil';
-import MonacoEditor from '@monaco-editor/react';
+import MonacoEditor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+loader.config({ monaco });
 
 const MCPDetailPage: React.FC = () => {
   const { t } = useTranslation();