1
This commit is contained in:
dengqichen
parent
ea634518ad
commit
e4816ed308
@ -1,14 +1,13 @@
|
||||
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 {FullscreenOutlined} from '@ant-design/icons';
|
||||
import type {DeploymentConfig, DeployConfigTemplate, CreateDeploymentConfigRequest} from '../types';
|
||||
import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service';
|
||||
import {getApplicationList} from '../../../Application/List/service';
|
||||
import type {Application} from '../../../Application/List/types';
|
||||
import {BetaSchemaForm} from '@ant-design/pro-form';
|
||||
import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
|
||||
import './styles.less';
|
||||
import {Editor} from '@/components/Editor';
|
||||
import type {JsonNode} from '@/types/common';
|
||||
import './styles.less';
|
||||
|
||||
const {Option} = Select;
|
||||
|
||||
@ -33,6 +32,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<DeployConfigTemplate>();
|
||||
const [buildVariables, setBuildVariables] = useState<JsonNode>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [fullscreenEditor, setFullscreenEditor] = useState<{
|
||||
key: string;
|
||||
title: string;
|
||||
} | null>(null);
|
||||
const isEdit = !!initialValues?.id;
|
||||
|
||||
// 获取应用列表
|
||||
@ -114,7 +117,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
// 获取对应的模板
|
||||
const template = templates.find(t => t.languageType === selectedApp.language);
|
||||
if (!template) {
|
||||
throw new Error('未找到匹配的配置模板');
|
||||
throw new Error('未找到匹配<EFBFBD><EFBFBD><EFBFBD>配置模板');
|
||||
}
|
||||
|
||||
// 构建提交数据
|
||||
@ -165,20 +168,80 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
}));
|
||||
};
|
||||
|
||||
// 渲染表单项
|
||||
const renderFormItems = () => {
|
||||
if (!selectedTemplate?.buildVariablesSchema?.properties) return null;
|
||||
|
||||
const { properties } = selectedTemplate.buildVariablesSchema;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */}
|
||||
{Object.entries(properties).map(([key, property]) => (
|
||||
property.editorConfig ? (
|
||||
<Modal
|
||||
title={`${isEdit ? '编辑' : '新建'}部署配置`}
|
||||
open={open}
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
}}
|
||||
onOk={handleSubmit}
|
||||
width={800}
|
||||
className="deployment-config-modal"
|
||||
maskClosable={false}
|
||||
confirmLoading={loading}
|
||||
destroyOnClose
|
||||
style={{ top: 50 }}
|
||||
styles={{
|
||||
body: {
|
||||
height: 'calc(100vh - 250px)',
|
||||
overflowY: 'auto',
|
||||
padding: '24px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
}}
|
||||
>
|
||||
{/* 应用选择 */}
|
||||
<Form.Item
|
||||
name="applicationId"
|
||||
label="应用"
|
||||
required
|
||||
tooltip="选择要部署的应用"
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择应用"
|
||||
onChange={handleAppChange}
|
||||
disabled={isEdit}
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
{applications.map((app) => (
|
||||
<Option key={app.id} value={app.id}>
|
||||
{app.appName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{/* 动态构建配置 */}
|
||||
{selectedTemplate?.buildVariablesSchema?.properties && (
|
||||
Object.entries(selectedTemplate.buildVariablesSchema.properties).map(([key, property]) => {
|
||||
if (property.editorConfig) {
|
||||
return (
|
||||
<Form.Item
|
||||
key={key}
|
||||
label={property.title || 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}
|
||||
>
|
||||
@ -219,7 +282,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
) : (
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form.Item
|
||||
key={key}
|
||||
label={property.title || key}
|
||||
@ -232,67 +298,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
|
||||
placeholder={`请输入${property.title || key}`}
|
||||
/>
|
||||
</Form.Item>
|
||||
)
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${isEdit ? '编辑' : '新建'}部署配置`}
|
||||
open={open}
|
||||
onCancel={() => {
|
||||
form.resetFields();
|
||||
onCancel();
|
||||
}}
|
||||
onOk={handleSubmit}
|
||||
width={800}
|
||||
className="deployment-config-modal"
|
||||
maskClosable={false}
|
||||
confirmLoading={loading}
|
||||
destroyOnClose
|
||||
style={{ top: 50, paddingBottom: 0 }}
|
||||
styles={{
|
||||
body: {
|
||||
height: 'calc(100vh - 250px)',
|
||||
overflowY: 'auto',
|
||||
padding: '24px'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
enabled: true,
|
||||
sort: 0,
|
||||
}}
|
||||
>
|
||||
{/* 应用选择 */}
|
||||
<Form.Item
|
||||
name="applicationId"
|
||||
label="应用"
|
||||
required
|
||||
tooltip="选择要部署的应用"
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择应用"
|
||||
onChange={handleAppChange}
|
||||
disabled={isEdit}
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
>
|
||||
{applications.map((app) => (
|
||||
<Option key={app.id} value={app.id}>
|
||||
{app.appName}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{/* 动态构建配置 */}
|
||||
{renderFormItems()}
|
||||
})
|
||||
)}
|
||||
|
||||
{/* 状态和排序 */}
|
||||
<Form.Item
|
||||
@ -305,6 +313,57 @@ 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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user