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 11:25:11 +08:00
parent ea634518ad
commit e4816ed308
1 changed files with 196 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
import React, {useEffect, useState, useCallback} from 'react'; 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 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';
import type {Application} from '../../../Application/List/types'; 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 {Editor} from '@/components/Editor';
import type {JsonNode} from '@/types/common'; import type {JsonNode} from '@/types/common';
import './styles.less';
const {Option} = Select; const {Option} = Select;
@ -33,6 +32,10 @@ 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 [fullscreenEditor, setFullscreenEditor] = useState<{
key: string;
title: string;
} | null>(null);
const isEdit = !!initialValues?.id; const isEdit = !!initialValues?.id;
// 获取应用列表 // 获取应用列表
@ -114,7 +117,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
// 获取对应的模板 // 获取对应的模板
const template = templates.find(t => t.languageType === selectedApp.language); const template = templates.find(t => t.languageType === selectedApp.language);
if (!template) { 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 ( return (
<> <>
{/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */} <Modal
{Object.entries(properties).map(([key, property]) => ( title={`${isEdit ? '编辑' : '新建'}部署配置`}
property.editorConfig ? ( 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 <Form.Item
key={key} 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)} required={selectedTemplate.buildVariablesSchema.required?.includes(key)}
tooltip={property.description} tooltip={property.description}
> >
@ -219,7 +282,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
} }
/> />
</Form.Item> </Form.Item>
) : ( );
}
return (
<Form.Item <Form.Item
key={key} key={key}
label={property.title || key} label={property.title || key}
@ -232,67 +298,9 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
placeholder={`请输入${property.title || key}`} placeholder={`请输入${property.title || key}`}
/> />
</Form.Item> </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 <Form.Item
@ -305,6 +313,57 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </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>
)}
</>
); );
}; };