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:
asp_ly 2025-01-17 21:40:32 +08:00
parent a676ed89d1
commit 6fbd00106c
1 changed files with 67 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,59 +14,52 @@ import Editor from '@/components/Editor';
const ScriptEditor: React.FC<any> = (props) => {
const [isFullscreen, setIsFullscreen] = useState(false);
const toggleFullscreen = () => {
setIsFullscreen(!isFullscreen);
};
// 添加 ESC 键监听
useEffect(() => {
const handleEsc = (event: KeyboardEvent) => {
const handleEscKey = (event: KeyboardEvent) => {
if (event.key === 'Escape' && isFullscreen) {
setIsFullscreen(false);
}
};
window.addEventListener('keydown', handleEsc);
document.addEventListener('keydown', handleEscKey);
return () => {
window.removeEventListener('keydown', handleEsc);
document.removeEventListener('keydown', handleEscKey);
};
}, [isFullscreen]);
return (
<div style={{ position: 'relative' }}>
<Button
icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
style={{
position: 'absolute',
right: '10px',
top: '-40px',
zIndex: 1
}}
onClick={toggleFullscreen}
/>
<div style={{
position: isFullscreen ? 'fixed' : 'relative',
top: isFullscreen ? '0' : 'auto',
left: isFullscreen ? '0' : 'auto',
right: isFullscreen ? '0' : 'auto',
bottom: isFullscreen ? '0' : 'auto',
zIndex: isFullscreen ? 1000 : 1,
background: '#1e1e1e'
}}>
{isFullscreen && (
<Button
icon={<FullscreenExitOutlined />}
style={{
const toggleFullscreen = () => {
setIsFullscreen(!isFullscreen);
};
const editorStyle = isFullscreen ? {
position: 'fixed',
right: '20px',
top: '20px',
zIndex: 1001
}}
onClick={() => setIsFullscreen(false)}
>
退出全屏
</Button>
)}
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1000,
backgroundColor: '#1e1e1e'
} : {};
return (
<div style={{ position: 'relative', height: isFullscreen ? '100vh' : '240px', ...editorStyle }}>
<Editor {...props} height={isFullscreen ? '100vh' : '240px'} />
<div style={{
position: 'absolute',
top: '10px',
right: '10px',
zIndex: 1001,
display: 'flex',
gap: '8px'
}}>
<Button
type="text"
icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
onClick={toggleFullscreen}
style={{ color: '#fff' }}
>
{isFullscreen ? '退出全屏' : '全屏'}
</Button>
</div>
</div>
);
@ -261,21 +254,10 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
minColumns: 1
},
properties: {
envvAR: {
envs: {
type: 'array',
title: '环境变量',
'x-decorator': 'FormItem',
'x-decorator-props': {
labelCol: 24,
wrapperCol: 24,
layout: 'vertical',
colon: false,
labelAlign: 'left',
style: {
marginBottom: '16px'
}
},
'x-component': 'ArrayTable',
'x-decorator': 'FormItem',
'x-component-props': {
pagination: { pageSize: 10 },
scroll: { x: '100%' },
@ -288,70 +270,59 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
items: {
type: 'object',
properties: {
key: {
column1: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: '键',
width: '40%'
},
'x-component-props': { title: '键', width: '40%' },
properties: {
key: {
type: 'string',
'x-decorator': 'FormItem',
'x-validator': {
pattern: '^[a-zA-Z][a-zA-Z0-9_]*$',
message: '键名只能包含字母、数字和下划线，且必须以字母开头'
},
'x-component': 'Select',
'x-component-props': {
placeholder: '请输入或选择键',
allowClear: true,
showSearch: true,
mode: 'tags',
style: { width: '100%' }
},
'x-reactions': '{{useAsyncDataSource(api.environment.getKeyOptions)}}'
}
}
},
value: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: '值',
width: '40%'
},
properties: {
value: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
placeholder: '请输入或选择值',
allowClear: true,
showSearch: true,
mode: 'tags',
style: { width: '100%' }
},
'x-reactions': [
'x-component': 'Input',
'x-validator': [
{
dependencies: ['.key'],
fulfill: {
run: '{{useAsyncDataSource(api.environment.getValueOptions, {key: $deps[0]})}}'
required: true,
message: '请输入环境变量名'
},
{
pattern: '^[a-zA-Z][a-zA-Z0-9_]*$',
message: '只能包含字母、数字和下划线，且必须以字母开头'
}
],
'x-component-props': {
placeholder: '请输入环境变量名',
allowClear: true
}
]
}
}
},
operations: {
column2: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { title: '值', width: '40%' },
properties: {
value: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-validator': {
required: true,
message: '请输入环境变量值'
},
'x-component-props': {
placeholder: '请输入环境变量值',
allowClear: true
}
}
}
},
column3: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: '操作',
dataIndex: 'operations',
width: '20%',
align: 'center'
},
properties: {
remove: {
@ -373,10 +344,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
properties: {
add: {
type: 'void',
'x-component': 'ArrayTable.Addition',
'x-component-props': {
title: '添加环境变量'
}
title: '添加环境变量',
'x-component': 'ArrayTable.Addition'
}
}
},
@ -422,7 +391,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
try {
const values = await form.submit()
console.log('表单提交的值：', values)
console.log('环境变量数组：', values.envvAR)
console.log('环境变量数组：', values.envs)
onSuccess?.(values as DeploymentConfig)
} catch (e) {
console.error('表单提交出错：', e)