1

frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {Modal, Button} from 'antd';
+import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
 import type {DeploymentConfig} from '../types';
 import './styles.less';
 import {FormButtonGroup, FormItem, Select, Submit, FormGrid, Input, ArrayTable} from '@formily/antd-v5'
@@ -9,6 +10,68 @@ import {action} from '@formily/reactive'
 import request from '@/utils/request';
 import Editor from '@/components/Editor';
 
+// 定义 ScriptEditor 组件
+const ScriptEditor: React.FC<any> = (props) => {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    const toggleFullscreen = () => {
+        setIsFullscreen(!isFullscreen);
+    };
+
+    // 添加 ESC 键监听
+    useEffect(() => {
+        const handleEsc = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isFullscreen) {
+                setIsFullscreen(false);
+            }
+        };
+        window.addEventListener('keydown', handleEsc);
+        return () => {
+            window.removeEventListener('keydown', handleEsc);
+        };
+    }, [isFullscreen]);
+
+    return (
+        <div style={{ position: 'relative' }}>
+            <Button
+                icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+                style={{
+                    position: 'absolute',
+                    right: '10px',
+                    top: '-40px',
+                    zIndex: 1
+                }}
+                onClick={toggleFullscreen}
+            />
+            <div style={{
+                position: isFullscreen ? 'fixed' : 'relative',
+                top: isFullscreen ? '0' : 'auto',
+                left: isFullscreen ? '0' : 'auto',
+                right: isFullscreen ? '0' : 'auto',
+                bottom: isFullscreen ? '0' : 'auto',
+                zIndex: isFullscreen ? 1000 : 1,
+                background: '#1e1e1e'
+            }}>
+                {isFullscreen && (
+                    <Button
+                        icon={<FullscreenExitOutlined />}
+                        style={{
+                            position: 'fixed',
+                            right: '20px',
+                            top: '20px',
+                            zIndex: 1001
+                        }}
+                        onClick={() => setIsFullscreen(false)}
+                    >
+                        退出全屏
+                    </Button>
+                )}
+                <Editor {...props} height={isFullscreen ? '100vh' : '240px'} />
+            </div>
+        </div>
+    );
+};
+
 interface DeploymentConfigModalProps {
     open: boolean;
     onCancel: () => void;
@@ -63,7 +126,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
             FormGrid,
             Input,
             ArrayTable,
-            Editor
+            ScriptEditor
         },
         scope: {
             useAsyncDataSource
@@ -331,13 +394,17 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                                 marginBottom: '16px'
                             }
                         },
-                        'x-component': 'Editor',
+                        'x-component': 'ScriptEditor',
                         'x-component-props': {
-                            height: '240px',
                             language: 'shell',
                             theme: 'vs-dark',
                             options: {
-                                minimap: { enabled: false },
+                                minimap: { 
+                                    enabled: true,
+                                    scale: 2,
+                                    showSlider: "mouseover",
+                                    renderCharacters: false
+                                },
                                 scrollBeyondLastLine: false,
                                 fontSize: 14,
                                 lineNumbers: 'on',