From 7c8976c65739fc249b5ad1fabaec67366053428e Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 27 Dec 2024 10:40:57 +0800
Subject: [PATCH] 1

---
 .../List/components/DeploymentConfigModal.tsx | 159 ++++++------------
 1 file changed, 52 insertions(+), 107 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index 89d6c642..2847f2ec 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/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, Space, Button} from 'antd';
+import {Modal, Form, Select, message, Switch, InputNumber, Input} from 'antd';
 import type {DeploymentConfig, DeployConfigTemplate, CreateDeploymentConfigRequest} from '../types';
 import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
 import {getApplicationList} from '../../../Application/List/service';
@@ -9,7 +9,6 @@ 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;
 
@@ -34,16 +33,8 @@ 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 {
@@ -75,14 +66,14 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
     // 初始化表单数据
     useEffect(() => {
         if (!open) return;
-        
+
         if (initialValues) {
             // 设置基础字段
             form.setFieldsValue({
                 applicationId: initialValues.applicationId,
                 enabled: initialValues.enabled
             });
-            
+
             const template = templates.find(t => t.buildType === initialValues.buildType && t.languageType === initialValues.languageType);
             if (template) {
                 setSelectedTemplate(template);
@@ -113,7 +104,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
         try {
             setLoading(true);
             const values = await form.validateFields();
-            
+
             // 获取选中的应用信息
             const selectedApp = applications.find(app => app.id === values.applicationId);
             if (!selectedApp) {
@@ -182,99 +173,53 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
 
         return (
             <>
-                {Object.entries(properties).map(([key, property]) => {
-                    if (property.editorConfig) {
-                        return (
-                            <Form.Item
-                                key={key}
-                                label={
-                                    <Space>
-                                        {property.title || key}
-                                        <Button
-                                            type="text"
-                                            icon={<FullscreenOutlined />}
-                                            onClick={() => toggleFullscreen(key)}
-                                        />
-                                    </Space>
+                {/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */}
+                {Object.entries(properties).map(([key, property]) => (
+                    property.editorConfig ? (
+                        <Form.Item
+                            key={key}
+                            label={property.title || key}
+                            required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
+                            tooltip={property.description}
+                        >
+                            <Editor
+                                height="300px"
+                                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',
+                                }}
+                                loading={
+                                    <div style={{
+                                        padding: '8px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        height: '300px',
+                                        background: '#1e1e1e',
+                                        color: '#fff'
+                                    }}>
+                                        编辑器加载中...
+                                    </div>
                                 }
-                                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'}
-                                    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',
-                                    }}
-                                    loading={
-                                        <div style={{ 
-                                            padding: '8px', 
-                                            display: 'flex', 
-                                            alignItems: 'center', 
-                                            justifyContent: 'center',
-                                            height: '300px',
-                                            background: '#1e1e1e',
-                                            color: '#fff'
-                                        }}>
-                                            编辑器加载中...
-                                        </div>
-                                    }
-                                />
-                            </Form.Item>
-                        );
-                    }
-
-                    return (
+                            />
+                        </Form.Item>
+                    ) : (
                         <Form.Item
                             key={key}
                             label={property.title || key}
@@ -287,8 +232,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                                 placeholder={`请输入${property.title || key}`}
                             />
                         </Form.Item>
-                    );
-                })}
+                    )
+                ))}
             </>
         );
     };