ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-27 10:40:57 +08:00
parent dc861ca7ec
commit 7c8976c657
1 changed files with 52 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
View File

@ -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 {
@ -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>
);
})}
)
))}
</>
);
};