1

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

@@ -1,5 +1,5 @@
 import React, {useEffect, useState, useCallback} from 'react';
-import {Modal, Form, Select, message, Switch, InputNumber, Input} from 'antd';
+import {Modal, Form, Select, message, Switch, InputNumber, Input, Space, Button} from 'antd';
 import type {DeploymentConfig, DeployConfigTemplate, CreateDeploymentConfigRequest} from '../types';
 import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
 import {getApplicationList} from '../../../Application/List/service';
@@ -9,6 +9,7 @@ import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
 import './styles.less';
 import {Editor} from '@/components/Editor';
 import type {JsonNode} from '@/types/common';
+import {FullscreenOutlined} from '@ant-design/icons';
 
 const {Option} = Select;
 
@@ -33,8 +34,16 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
     const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>();
     const [buildVariables, setBuildVariables] = useState<JsonNode>({});
     const [loading, setLoading] = useState(false);
+    const [fullscreenStates, setFullscreenStates] = useState<Record<string, boolean>>({});
     const isEdit = !!initialValues?.id;
 
+    const toggleFullscreen = (key: string) => {
+        setFullscreenStates(prev => ({
+            ...prev,
+            [key]: !prev[key]
+        }));
+    };
+
     // 获取应用列表
     const fetchApplications = useCallback(async () => {
         try {
@@ -173,15 +182,58 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
 
         return (
             <>
-                {/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */}
+                {Object.entries(properties).map(([key, property]) => {
-                {Object.entries(properties).map(([key, property]) => (
+                    if (property.editorConfig) {
-                    property.editorConfig ? (
+                        return (
                             <Form.Item
                                 key={key}
-                            label={property.title || key}
+                                label={
+                                    <Space>
+                                        {property.title || key}
+                                        <Button
+                                            type="text"
+                                            icon={<FullscreenOutlined />}
+                                            onClick={() => toggleFullscreen(key)}
+                                        />
+                                    </Space>
+                                }
                                 required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
                                 tooltip={property.description}
                             >
+                                <Modal
+                                    title={property.title || key}
+                                    open={fullscreenStates[key]}
+                                    onCancel={() => toggleFullscreen(key)}
+                                    footer={null}
+                                    width="100%"
+                                    style={fullscreenStates[key] ? { top: 0, maxWidth: '100%', margin: 0, paddingBottom: 0 } : undefined}
+                                    bodyStyle={{ padding: 0 }}
+                                    destroyOnClose
+                                >
+                                    <Editor
+                                        height="calc(100vh - 55px)"
+                                        defaultLanguage={property.editorConfig.language || 'shell'}
+                                        theme={property.editorConfig.theme || 'vs-dark'}
+                                        value={buildVariables[key] || property.default || ''}
+                                        onChange={(value) => handleEditorChange(key, value)}
+                                        options={{
+                                            minimap: { enabled: property.editorConfig.minimap ?? false },
+                                            fontSize: property.editorConfig.fontSize || 14,
+                                            lineNumbers: property.editorConfig.lineNumbers ? 'on' : 'off',
+                                            wordWrap: property.editorConfig.wordWrap ? 'on' : 'off',
+                                            tabSize: property.editorConfig.tabSize || 2,
+                                            scrollBeyondLastLine: false,
+                                            automaticLayout: true,
+                                            folding: property.editorConfig.folding ?? true,
+                                            autoClosingBrackets: 'always',
+                                            autoClosingQuotes: 'always',
+                                            formatOnPaste: true,
+                                            formatOnType: true,
+                                            suggestOnTriggerCharacters: property.editorConfig.autoComplete ?? true,
+                                            renderWhitespace: 'boundary',
+                                        }}
+                                    />
+                                </Modal>
                                 <Editor
                                     height="300px"
                                     defaultLanguage={property.editorConfig.language || 'shell'}
@@ -219,7 +271,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                                     }
                                 />
                             </Form.Item>
-                    ) : (
+                        );
+                    }
+
+                    return (
                         <Form.Item
                             key={key}
                             label={property.title || key}
@@ -232,8 +287,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                                 placeholder={`请输入${property.title || key}`}
                             />
                         </Form.Item>
-                    )
+                    );
-                ))}
+                })}
             </>
         );
     };

frontend/src/pages/Deploy/Deployment/List/index.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
 import {Button, message, Popconfirm, Select, Space, Modal, Tooltip} from 'antd';
-import {PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined} from '@ant-design/icons';
+import {PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, FullscreenOutlined} from '@ant-design/icons';
 import {getDeploymentConfigPage, deleteDeploymentConfig, getDeployConfigTemplates} from './service';
 import {getEnvironmentList} from '../../Environment/List/service';
 import type {DeploymentConfig, DeploymentConfigQueryParams, DeployConfigTemplate} from './types';
@@ -18,17 +18,31 @@ const CodePreviewModal: React.FC<{
     onCancel: () => void;
     code: string;
     language?: string;
-}> = ({open, onCancel, code, language = 'shell'}) => (
+}> = ({open, onCancel, code, language = 'shell'}) => {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    
+    return (
         <Modal
-        title="代码预览"
+            title={
+                <Space>
+                    代码预览
+                    <Button
+                        type="text"
+                        icon={<FullscreenOutlined />}
+                        onClick={() => setIsFullscreen(!isFullscreen)}
+                    />
+                </Space>
+            }
             open={open}
             onCancel={onCancel}
             footer={null}
-        width={800}
+            width={isFullscreen ? "100%" : 800}
-        bodyStyle={{padding: 0}}
+            style={isFullscreen ? { top: 0, maxWidth: '100%', margin: 0, paddingBottom: 0 } : undefined}
+            bodyStyle={{ padding: 0 }}
+            destroyOnClose
         >
             <Editor
-            height="500px"
+                height={isFullscreen ? "calc(100vh - 55px)" : "500px"}
                 defaultLanguage={language}
                 value={code}
                 options={{
@@ -36,10 +50,12 @@ const CodePreviewModal: React.FC<{
                     minimap: { enabled: true },
                     scrollBeyondLastLine: false,
                     automaticLayout: true,
+                    contextmenu: true,
                 }}
             />
         </Modal>
-);
+    );
+};
 
 const DeploymentConfigList: React.FC = () => {
     const [environments, setEnvironments] = useState<Environment[]>([]);