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:32:47 +08:00
parent 41c3a3341d
commit dc861ca7ec
2 changed files with 144 additions and 73 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} from 'antd'; import {Modal, Form, Select, message, Switch, InputNumber, Input, Space, Button} 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,6 +9,7 @@ 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;
@ -33,8 +34,16 @@ 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 {
@ -173,53 +182,99 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
return ( return (
<> <>
{/* 遍历所有字段，对有 editorConfig 的字段使用富文本编辑器 */} {Object.entries(properties).map(([key, property]) => {
{Object.entries(properties).map(([key, property]) => ( if (property.editorConfig) {
property.editorConfig ? ( return (
<Form.Item <Form.Item
key={key} key={key}
label={property.title || key} label={
required={selectedTemplate.buildVariablesSchema.required?.includes(key)} <Space>
tooltip={property.description} {property.title || key}
> <Button
<Editor type="text"
height="300px" icon={<FullscreenOutlined />}
defaultLanguage={property.editorConfig.language || 'shell'} onClick={() => toggleFullscreen(key)}
theme={property.editorConfig.theme || 'vs-dark'} />
value={buildVariables[key] || property.default || ''} </Space>
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)}
</Form.Item> 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} key={key}
label={property.title || key} label={property.title || key}
@ -232,8 +287,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
placeholder={`请输入${property.title || key}`} placeholder={`请输入${property.title || key}`}
/> />
</Form.Item> </Form.Item>
) );
))} })}
</> </>
); );
}; };

62
frontend/src/pages/Deploy/Deployment/List/index.tsx
View File

@ -1,7 +1,7 @@
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import {PageContainer} from '@ant-design/pro-layout'; import {PageContainer} from '@ant-design/pro-layout';
import {Button, message, Popconfirm, Select, Space, Modal, Tooltip} from 'antd'; import {Button, message, Popconfirm, Select, Space, Modal, Tooltip} from 'antd';
import {PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined} from '@ant-design/icons'; import {PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined, FullscreenOutlined} from '@ant-design/icons';
import {getDeploymentConfigPage, deleteDeploymentConfig, getDeployConfigTemplates} from './service'; import {getDeploymentConfigPage, deleteDeploymentConfig, getDeployConfigTemplates} from './service';
import {getEnvironmentList} from '../../Environment/List/service'; import {getEnvironmentList} from '../../Environment/List/service';
import type {DeploymentConfig, DeploymentConfigQueryParams, DeployConfigTemplate} from './types'; import type {DeploymentConfig, DeploymentConfigQueryParams, DeployConfigTemplate} from './types';
@ -18,28 +18,44 @@ const CodePreviewModal: React.FC<{
onCancel: () => void; onCancel: () => void;
code: string; code: string;
language?: string; language?: string;
}> = ({open, onCancel, code, language = 'shell'}) => ( }> = ({open, onCancel, code, language = 'shell'}) => {
<Modal const [isFullscreen, setIsFullscreen] = useState(false);
title="代码预览"
open={open} return (
onCancel={onCancel} <Modal
footer={null} title={
width={800} <Space>
bodyStyle={{padding: 0}} 代码预览
> <Button
<Editor type="text"
height="500px" icon={<FullscreenOutlined />}
defaultLanguage={language} onClick={() => setIsFullscreen(!isFullscreen)}
value={code} />
options={{ </Space>
readOnly: true, }
minimap: { enabled: true }, open={open}
scrollBeyondLastLine: false, onCancel={onCancel}
automaticLayout: true, footer={null}
}} width={isFullscreen ? "100%" : 800}
/> style={isFullscreen ? { top: 0, maxWidth: '100%', margin: 0, paddingBottom: 0 } : undefined}
</Modal> bodyStyle={{ padding: 0 }}
); destroyOnClose
>
<Editor
height={isFullscreen ? "calc(100vh - 55px)" : "500px"}
defaultLanguage={language}
value={code}
options={{
readOnly: true,
minimap: { enabled: true },
scrollBeyondLastLine: false,
automaticLayout: true,
contextmenu: true,
}}
/>
</Modal>
);
};
const DeploymentConfigList: React.FC = () => { const DeploymentConfigList: React.FC = () => {
const [environments, setEnvironments] = useState<Environment[]>([]); const [environments, setEnvironments] = useState<Environment[]>([]);