From 15ebbab10a59085b69997f3ef4b8bb1a416cdb50 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 27 Dec 2024 13:21:09 +0800
Subject: [PATCH] 1

---
 .../List/components/DeploymentConfigModal.tsx | 147 ++++++++----------
 1 file changed, 66 insertions(+), 81 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
index 08aaf7be..5c7ce11f 100644
--- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
+++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
@@ -220,50 +220,85 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                             {/* 富文本编辑器字段 */}
                             {Object.entries(selectedTemplate.buildVariablesSchema.properties)
                                 .filter(([_, property]) => property.editorConfig)
-                                .map(([key, property]) => (
-                                    <Form.Item
-                                        key={key}
-                                        label={
-                                            <Space>
-                                                {property.title || key}
-                                                <Button
-                                                    type="text"
-                                                    icon={<FullscreenOutlined />}
-                                                    onClick={() => setFullscreenEditor({
-                                                        key,
-                                                        title: property.title || key
-                                                    })}
-                                                />
-                                            </Space>
-                                        }
-                                        required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
-                                        tooltip={property.description}
-                                    >
+                                .map(([key, property]) => {
+                                    const isFullscreen = fullscreenEditor?.key === key;
+                                    const editorConfig = property.editorConfig;
+                                    
+                                    const editor = (
                                         <Editor
-                                            height="300px"
-                                            defaultLanguage={property.editorConfig.language || 'shell'}
-                                            theme={property.editorConfig.theme || 'vs-dark'}
+                                            height={isFullscreen ? "calc(100vh - 55px)" : "300px"}
+                                            defaultLanguage={editorConfig.language || 'shell'}
+                                            theme={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,
+                                                minimap: { enabled: isFullscreen ? true : (editorConfig.minimap ?? false) },
+                                                fontSize: editorConfig.fontSize || 14,
+                                                lineNumbers: editorConfig.lineNumbers ? 'on' : 'off',
+                                                wordWrap: editorConfig.wordWrap ? 'on' : 'off',
+                                                tabSize: editorConfig.tabSize || 2,
                                                 scrollBeyondLastLine: false,
                                                 automaticLayout: true,
-                                                folding: property.editorConfig.folding ?? true,
+                                                folding: editorConfig.folding ?? true,
                                                 autoClosingBrackets: 'always',
                                                 autoClosingQuotes: 'always',
                                                 formatOnPaste: true,
                                                 formatOnType: true,
-                                                suggestOnTriggerCharacters: property.editorConfig.autoComplete ?? true,
+                                                suggestOnTriggerCharacters: editorConfig.autoComplete ?? true,
                                                 renderWhitespace: 'boundary',
                                             }}
                                         />
-                                    </Form.Item>
-                                ))
+                                    );
+
+                                    return isFullscreen ? (
+                                        <Modal
+                                            key={key}
+                                            title={property.title || key}
+                                            open={true}
+                                            onCancel={() => setFullscreenEditor(null)}
+                                            footer={null}
+                                            width="100vw"
+                                            styles={{
+                                                body: { padding: 0 },
+                                                mask: { backgroundColor: 'rgba(0, 0, 0, 0.65)' },
+                                                content: { 
+                                                    position: 'fixed',
+                                                    top: 0,
+                                                    left: 0,
+                                                    right: 0,
+                                                    bottom: 0,
+                                                    margin: 0,
+                                                    padding: 0,
+                                                    width: '100vw',
+                                                    height: '100vh'
+                                                }
+                                            }}
+                                        >
+                                            {editor}
+                                        </Modal>
+                                    ) : (
+                                        <Form.Item
+                                            key={key}
+                                            label={
+                                                <Space>
+                                                    {property.title || key}
+                                                    <Button
+                                                        type="text"
+                                                        icon={<FullscreenOutlined />}
+                                                        onClick={() => setFullscreenEditor({
+                                                            key,
+                                                            title: property.title || key
+                                                        })}
+                                                    />
+                                                </Space>
+                                            }
+                                            required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
+                                            tooltip={property.description}
+                                        >
+                                            {editor}
+                                        </Form.Item>
+                                    );
+                                })
                             }
 
                             {/* 普通字段 */}
@@ -319,56 +354,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
                     </Form.Item>
                 </Form>
             </Modal>
-
-            {/* 全屏编辑器模态框 */}
-            {fullscreenEditor && selectedTemplate?.buildVariablesSchema?.properties && (
-                <Modal
-                    title={fullscreenEditor.title}
-                    open={true}
-                    onCancel={() => setFullscreenEditor(null)}
-                    footer={null}
-                    width="100vw"
-                    styles={{
-                        body: { padding: 0 },
-                        mask: { backgroundColor: 'rgba(0, 0, 0, 0.65)' },
-                        content: { 
-                            position: 'fixed',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            margin: 0,
-                            padding: 0,
-                            width: '100vw',
-                            height: '100vh'
-                        }
-                    }}
-                >
-                    <Editor
-                        height="calc(100vh - 55px)"
-                        defaultLanguage={selectedTemplate.buildVariablesSchema.properties[fullscreenEditor.key]?.editorConfig?.language || 'shell'}
-                        theme="vs-dark"
-                        value={buildVariables[fullscreenEditor.key] || ''}
-                        onChange={(value) => handleEditorChange(fullscreenEditor.key, value)}
-                        options={{
-                            minimap: { enabled: true },
-                            fontSize: 14,
-                            lineNumbers: 'on',
-                            wordWrap: 'on',
-                            tabSize: 2,
-                            scrollBeyondLastLine: false,
-                            automaticLayout: true,
-                            folding: true,
-                            autoClosingBrackets: 'always',
-                            autoClosingQuotes: 'always',
-                            formatOnPaste: true,
-                            formatOnType: true,
-                            suggestOnTriggerCharacters: true,
-                            renderWhitespace: 'boundary',
-                        }}
-                    />
-                </Modal>
-            )}
         </>
     );
 };