From 319e9176767f9004a2601a507c16974c633fb2dc Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 14 Nov 2025 11:36:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(componentEnv):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改getComponentClassify函数参数类型为string - 新增ComponentEnv组件及相关子组件 - 实现环境配置的增删改查功能 - 添加环境测试与配置文件下载功能 - 创建环境类型与架构类型的下拉选项 - 实现分步表单提交与证书生成逻辑 - 添加环境删除二次确认与实例数量展示 - 集成环境配置API接口与数据请求逻辑 --- src/api/componentClassify.ts | 2 +- src/api/componentDeployEnv.ts | 24 +++ .../componentEnv/addModal.tsx | 113 ++++++++++ .../componentEnv/envExtra.tsx | 66 ++++++ .../componentEnv/formEditor.tsx | 182 ++++++++++++++++ .../componentEnv/index.tsx | 196 ++++++++++++++++++ .../componentEnv/style/index.module.less | 12 ++ src/pages/ideContainer/index.tsx | 4 +- 8 files changed, 596 insertions(+), 3 deletions(-) create mode 100644 src/api/componentDeployEnv.ts create mode 100644 src/pages/componentDevelopment/componentEnv/addModal.tsx create mode 100644 src/pages/componentDevelopment/componentEnv/envExtra.tsx create mode 100644 src/pages/componentDevelopment/componentEnv/formEditor.tsx create mode 100644 src/pages/componentDevelopment/componentEnv/index.tsx create mode 100644 src/pages/componentDevelopment/componentEnv/style/index.module.less diff --git a/src/api/componentClassify.ts b/src/api/componentClassify.ts index f71aee8..4d12769 100644 --- a/src/api/componentClassify.ts +++ b/src/api/componentClassify.ts @@ -4,6 +4,6 @@ import axios from 'axios'; const urlPrefix = '/api/v1/bpms-workbench'; // 我的组件 -export function getComponentClassify(classifyType: 'component' | 'language_type') { +export function getComponentClassify(classifyType: string) { return axios.get(`${urlPrefix}/componentClassify/list?classifyType=${classifyType}`); } \ No newline at end of file diff --git a/src/api/componentDeployEnv.ts b/src/api/componentDeployEnv.ts new file mode 100644 index 0000000..ae0273e --- /dev/null +++ b/src/api/componentDeployEnv.ts @@ -0,0 +1,24 @@ +import axios from 'axios'; + +// 公共路径 +const urlPrefix = '/api/v1/bpms-workbench'; + +// 提交环境配置信息 +export function submitEnvConfig(params) { + return axios.post(`${urlPrefix}/componentDeployEnv/submit`, params); +} + +// 环境配置列表 +export function getEnvConfigList(current: string | number, size: string | number) { + return axios.get(`${urlPrefix}/componentDeployEnv/page?current=${current}&size=${size}`); +} + +// 删除环境配置 +export function deleteEnvConfig(id: string) { + return axios.post(`${urlPrefix}/componentDeployEnv/remove?id=${id}`); +} + +// 下载环境配置文件 +export function downloadEnvConfigFile(id: string) { + return axios.post(`${urlPrefix}/componentDeployEnv/download`, { id }); +} \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentEnv/addModal.tsx b/src/pages/componentDevelopment/componentEnv/addModal.tsx new file mode 100644 index 0000000..6bd4bb8 --- /dev/null +++ b/src/pages/componentDevelopment/componentEnv/addModal.tsx @@ -0,0 +1,113 @@ +import React, { useEffect, useState, useRef } from 'react'; +import { Modal, Steps, Select, Grid, Input, Form, Message, Button } from '@arco-design/web-react'; +import EnvExtra from '@/pages/componentDevelopment/componentEnv/envExtra'; +import FormEditor, { FormEditorInstance } from '@/pages/componentDevelopment/componentEnv/formEditor'; + +const Step = Steps.Step; + +// 定义环境类型选项的接口 +interface EnvTypeOption { + id: string | number; + classifyType: string; + classifyName: string; + dictKey: string; +} + +// 定义组件 Props 类型 +interface AddModalProps { + visible: boolean; + envType: EnvTypeOption[]; + setVisible: (visible: boolean) => void; + onOk?: () => void; +} + +const AddModal = ({ visible, envType, setVisible, onOk }: AddModalProps) => { + const [currentStep, setCurrentStep] = useState(2); + const [envTypeOptions, setEnvTypeOptions] = useState([]); + const [confirmLoading, setConfirmLoading] = useState(false); + const [currentEnvData,setCurrentEnvData] = useState({}); + const formRef = useRef(null); + + useEffect(() => { + if (envType.length > 0) setEnvTypeOptions(envType); + }, [envType]); + + const handleOk = () => { + // 当前步骤为1时，触发表单提交 + if (currentStep === 1) { + formRef.current && formRef.current.handleOk(); + return; + } + + // 其他步骤的确认逻辑可以在这里添加 + console.log('ok'); + }; + + const handleCancel = () => { + setCurrentStep(1); + setVisible(false); + }; + + const handleStepOneSuccess = (value) => { + setCurrentStep(2); + setCurrentEnvData(value) + onOk && onOk(); + }; + + // 返回第一步的处理函数 + const handleBackToStepOne = () => { + setCurrentStep(1); + }; + + return ( + 取消, + currentStep === 2 && ( + + ), + + ]} + > + + + + + + {currentStep === 1 && ( + handleStepOneSuccess(value)} + /> + )} + + {currentStep === 2 && ( + + )} + + + ); +}; + +export default AddModal; \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentEnv/envExtra.tsx b/src/pages/componentDevelopment/componentEnv/envExtra.tsx new file mode 100644 index 0000000..7c134bd --- /dev/null +++ b/src/pages/componentDevelopment/componentEnv/envExtra.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { Button, Space } from '@arco-design/web-react'; +import { downloadEnvConfigFile } from '@/api/componentDeployEnv'; + +const EnvExtra = ({ currentEnvData }) => { + // 模拟下载配置证书文件 + const handleDownloadConfig = () => { + // 这里可以添加实际的下载逻辑 + console.log('下载配置证书文件'); + downloadEnvConfigFile(currentEnvData.id); + }; + + // 模拟查看环境配置教程 + const handleViewTutorial = () => { + console.log('查看环境配置教程'); + // 这里可以打开一个新的页面或弹窗显示教程内容 + }; + + // 模拟点击测试环境可用性 + const handleTestAvailability = () => { + console.log('点击测试环境可用性'); + // 这里可以添加实际的环境可用性测试逻辑 + }; + + return ( +
+
+
+ 环境配置文件： + +
+
+ ● + 可点击查看 + +
+
+ +
+
+ 环境可用性： + +
+
+
+ ); +}; + +export default EnvExtra; \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentEnv/formEditor.tsx b/src/pages/componentDevelopment/componentEnv/formEditor.tsx new file mode 100644 index 0000000..4d7c5aa --- /dev/null +++ b/src/pages/componentDevelopment/componentEnv/formEditor.tsx @@ -0,0 +1,182 @@ +import React, { useState, forwardRef, useImperativeHandle } from 'react'; +import { Form, Grid, Input, Message, Select } from '@arco-design/web-react'; +import { submitEnvConfig } from '@/api/componentDeployEnv'; + +const FormItem = Form.Item; +const Option = Select.Option; +const TextArea = Input.TextArea; + +// 定义组件 Props 类型 +interface FormEditorProps { + envTypeOptions: { id: string | number; classifyType: string; classifyName: string, dictKey: string }[]; + setVisible: (visible: boolean) => void; + onOk?: () => void; + setConfirmLoading?: (loading: boolean) => void; + onSuccess?: (value) => void; +} + +// 定义暴露给父组件的实例类型 +export interface FormEditorInstance { + handleOk: () => void; +} + +const FormEditor = forwardRef(({ + envTypeOptions, + setConfirmLoading, + onSuccess + }, ref) => { + const [form] = Form.useForm(); + + // 暴露方法给父组件调用 + useImperativeHandle(ref, () => ({ + handleOk + })); + + // 处理完成/确认逻辑 + const handleOk = async () => { + try { + const values = await form.validate(); + const params = { + ...values, + instanceCount: '', + description: values.description ? values.description : '' + }; + + // 设置确认按钮为加载状态 + setConfirmLoading && setConfirmLoading(true); + + try { + // 等待接口回调 + const res = await submitEnvConfig(params); + Message.success('环境创建成功'); + + // 如果有onSuccess回调，则调用它（用于切换步骤） + if (onSuccess) { + onSuccess(res.data); + } + } catch (error) { + Message.error('环境创建失败: ' + error.message); + // 保持模态框打开，让用户可以看到错误信息 + } finally { + // 无论成功还是失败，都取消加载状态 + setConfirmLoading && setConfirmLoading(false); + } + } catch (error) { + // 表单验证失败，不关闭模态框 + console.log('表单验证失败:', error); + setConfirmLoading && setConfirmLoading(false); + } + }; + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +