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