diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx index 10c9b573..393a7097 100644 --- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx +++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx @@ -14,59 +14,52 @@ import Editor from '@/components/Editor'; const ScriptEditor: React.FC = (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]); + const toggleFullscreen = () => { + setIsFullscreen(!isFullscreen); + }; + + const editorStyle = isFullscreen ? { + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: 1000, + backgroundColor: '#1e1e1e' + } : {}; + return ( -
- - )} - +
); @@ -261,21 +254,10 @@ const DeploymentConfigModal: React.FC = ({ 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 = ({ 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': 'Input', + 'x-validator': [ + { + required: true, + message: '请输入环境变量名' + }, + { + pattern: '^[a-zA-Z][a-zA-Z0-9_]*$', + message: '只能包含字母、数字和下划线,且必须以字母开头' + } + ], 'x-component-props': { - placeholder: '请输入或选择键', - allowClear: true, - showSearch: true, - mode: 'tags', - style: { width: '100%' } - }, - 'x-reactions': '{{useAsyncDataSource(api.environment.getKeyOptions)}}' + placeholder: '请输入环境变量名', + allowClear: true + } } } }, - value: { + column2: { type: 'void', 'x-component': 'ArrayTable.Column', - 'x-component-props': { - title: '值', - width: '40%' - }, + '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-component': 'Input', + 'x-validator': { + required: true, + message: '请输入环境变量值' }, - 'x-reactions': [ - { - dependencies: ['.key'], - fulfill: { - run: '{{useAsyncDataSource(api.environment.getValueOptions, {key: $deps[0]})}}' - } - } - ] + 'x-component-props': { + placeholder: '请输入环境变量值', + allowClear: true + } } } }, - operations: { + 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 = ({ 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 = ({ 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)