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 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 type {DeploymentConfig, DeployConfigTemplate, CreateDeploymentConfigRequest} from '../types';
import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service'; import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
import {getApplicationList} from '../../../Application/List/service'; import {getApplicationList} from '../../../Application/List/service';
@ -9,7 +9,6 @@ import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
import './styles.less'; import './styles.less';
import {Editor} from '@/components/Editor'; import {Editor} from '@/components/Editor';
import type {JsonNode} from '@/types/common'; import type {JsonNode} from '@/types/common';
import {FullscreenOutlined} from '@ant-design/icons';
const {Option} = Select; const {Option} = Select;
@ -34,16 +33,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>(); const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>();
const [buildVariables, setBuildVariables] = useState<JsonNode>({}); const [buildVariables, setBuildVariables] = useState<JsonNode>({});
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [fullscreenStates, setFullscreenStates] = useState<Record<string, boolean>>({});
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
const toggleFullscreen = (key: string) => {
setFullscreenStates(prev => ({
...prev,
[key]: !prev[key]
}));
};
// 获取应用列表 // 获取应用列表
const fetchApplications = useCallback(async () => { const fetchApplications = useCallback(async () => {
try { try {
@ -182,99 +173,53 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
return ( return (
<> <>
{Object.entries(properties).map(([key, property]) => { {/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */}
if (property.editorConfig) { {Object.entries(properties).map(([key, property]) => (
return ( property.editorConfig ? (
<Form.Item <Form.Item
key={key} key={key}
label={ label={property.title || key}
<Space> required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
{property.title || key} tooltip={property.description}
<Button >
type="text" <Editor
icon={<FullscreenOutlined />} height="300px"
onClick={() => toggleFullscreen(key)} defaultLanguage={property.editorConfig.language || 'shell'}
/> theme={property.editorConfig.theme || 'vs-dark'}
</Space> 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} </Form.Item>
> ) : (
<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} key={key}
label={property.title || key} label={property.title || key}
@ -287,8 +232,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
placeholder={`请输入${property.title || key}`} placeholder={`请输入${property.title || key}`}
/> />
</Form.Item> </Form.Item>
); )
})} ))}
</> </>
); );
}; };