From f8a9243ecde282608d90347aa98c7b8bc6d180eb Mon Sep 17 00:00:00 2001 From: dengqichen Date: Fri, 27 Dec 2024 14:04:57 +0800 Subject: [PATCH] 1 --- .../List/components/DeploymentConfigModal.tsx | 135 +++++++++--------- .../pages/Deploy/Deployment/List/index.tsx | 46 +++--- .../pages/Deploy/Environment/List/index.tsx | 8 +- 3 files changed, 100 insertions(+), 89 deletions(-) diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx index c3658100..993f6108 100644 --- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx +++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx @@ -73,15 +73,21 @@ const DeploymentConfigModal: React.FC = ({ if (!open) return; if (initialValues) { + // 设置基础字段 form.setFieldsValue({ applicationId: initialValues.applicationId, - enabled: initialValues.enabled + enabled: initialValues.enabled, + ...initialValues.buildVariables // 设置所有构建变量到表单中 }); const template = templates.find(t => t.buildType === initialValues.buildType && t.languageType === initialValues.languageType); if (template) { setSelectedTemplate(template); - setBuildVariables(initialValues.buildVariables || {}); + // 只保存编辑器字段的值到 buildVariables + const editorValues = Object.entries(initialValues.buildVariables || {}) + .filter(([key]) => template.buildVariablesSchema?.properties?.[key]?.editorConfig) + .reduce((acc, [key, value]) => ({...acc, [key]: value}), {}); + setBuildVariables(editorValues); } } else { form.resetFields(); @@ -100,17 +106,30 @@ const DeploymentConfigModal: React.FC = ({ if (template) { setSelectedTemplate(template); setBuildVariables({}); + // 重置除了 applicationId 和 enabled 之外的所有字段 + const currentValues = form.getFieldsValue(); + form.setFieldsValue({ + applicationId: currentValues.applicationId, + enabled: currentValues.enabled + }); } } - }, [applications, templates]); + }, [applications, templates, form]); + + const handleFormValuesChange = (changedValues: Record) => { + setBuildVariables(prev => ({ + ...prev, + ...changedValues + })); + }; const handleSubmit = async () => { try { setLoading(true); - const values = await form.validateFields(); + const formValues = await form.validateFields(); // 获取选中的应用信息 - const selectedApp = applications.find(app => app.id === values.applicationId); + const selectedApp = applications.find(app => app.id === formValues.applicationId); if (!selectedApp) { throw new Error('请选择应用'); } @@ -121,14 +140,20 @@ const DeploymentConfigModal: React.FC = ({ throw new Error('未找到匹配配置模板'); } + // 从 formValues 中提取构建变量（排除 applicationId 和 enabled） + const { applicationId, enabled, ...formBuildVariables } = formValues; + // 构建提交数据 const submitData: CreateDeploymentConfigRequest = { environmentId: envId, - applicationId: values.applicationId, + applicationId, buildType: template.buildType, languageType: selectedApp.language, - buildVariables, - enabled: values.enabled + buildVariables: { + ...formBuildVariables, // 表单中的值 + ...buildVariables // 编辑器中的值 + } as Record, // 使用类型断言确保类型兼容 + enabled }; if (isEdit) { @@ -217,34 +242,57 @@ const DeploymentConfigModal: React.FC = ({ {/* 动态构建配置 */} {selectedTemplate?.buildVariablesSchema?.properties && ( <> - {/* 按照原始顺序渲染所有字段 */} - {Object.entries(selectedTemplate.buildVariablesSchema.properties).map(([key, property]) => { - // 如果是编辑器字段 - if (property.editorConfig) { + {/* 使用 BetaSchemaForm 渲染普通字段 */} + !prop.editorConfig) + .map(([key, prop]) => [key, { + ...prop, + type: prop.type || 'string' // 确保有 type 字段 + }]) + ), + required: selectedTemplate.buildVariablesSchema.required || [] + })} + initialValues={buildVariables} + onValuesChange={(_, values) => { + setBuildVariables(prev => ({ + ...prev, + ...values + })); + }} + /> + + {/* 渲染编辑器字段 */} + {Object.entries(selectedTemplate.buildVariablesSchema.properties) + .filter(([_, prop]) => prop.editorConfig) + .map(([key, property]) => { const isFullscreen = fullscreenEditor?.key === key; - const editorConfig = property.editorConfig; const editor = ( handleEditorChange(key, value)} options={{ - minimap: { enabled: isFullscreen ? true : (editorConfig.minimap ?? false) }, - fontSize: editorConfig.fontSize || 14, - lineNumbers: editorConfig.lineNumbers ? 'on' : 'off', - wordWrap: editorConfig.wordWrap ? 'on' : 'off', - tabSize: editorConfig.tabSize || 2, + minimap: { enabled: isFullscreen ? true : (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: editorConfig.folding ?? true, + folding: property.editorConfig.folding ?? true, autoClosingBrackets: 'always', autoClosingQuotes: 'always', formatOnPaste: true, formatOnType: true, - suggestOnTriggerCharacters: editorConfig.autoComplete ?? true, + suggestOnTriggerCharacters: property.editorConfig.autoComplete ?? true, renderWhitespace: 'boundary', }} /> @@ -298,48 +346,7 @@ const DeploymentConfigModal: React.FC = ({ {editor} ); - } - - // 如果是普通字段，使用 BetaSchemaForm - return ( - setBuildVariables(prev => ({ - ...prev, - ...values - }))} - /> - ); - })} + })} )} diff --git a/frontend/src/pages/Deploy/Deployment/List/index.tsx b/frontend/src/pages/Deploy/Deployment/List/index.tsx index 52738274..9395f98b 100644 --- a/frontend/src/pages/Deploy/Deployment/List/index.tsx +++ b/frontend/src/pages/Deploy/Deployment/List/index.tsx @@ -20,7 +20,7 @@ const CodePreviewModal: React.FC<{ language?: string; }> = ({open, onCancel, code, language = 'shell'}) => { const [isFullscreen, setIsFullscreen] = useState(false); - + // 当模态��打开或关闭时重置全屏状态 useEffect(() => { setIsFullscreen(false); @@ -33,7 +33,7 @@ const CodePreviewModal: React.FC<{ 代码预览 , @@ -289,7 +289,7 @@ const DeploymentConfigList: React.FC = () => { danger > - + 删除 @@ -301,7 +301,7 @@ const DeploymentConfigList: React.FC = () => { return ( { ]; return ( - + columns={columns} actionRef={actionRef}