From dc585891cdb92131b7a66cff3bd5c1de9674944f Mon Sep 17 00:00:00 2001 From: ch-liuzhide Date: Tue, 3 Dec 2024 19:58:15 +0800 Subject: [PATCH] refactor(deployment): optimize the deployment robot popup form modal --- client/.kiwi/en/DeployBotModal.ts | 5 + client/.kiwi/ja/DeployBotModal.ts | 5 + client/.kiwi/ko/DeployBotModal.ts | 5 + client/.kiwi/zh-CN/DeployBotModal.ts | 5 + client/.kiwi/zh-TW/DeployBotModal.ts | 5 + .../DeployBotModal/DeployContent.tsx | 3 - .../edit/components/DeployBotModal/index.tsx | 159 +++++++++++++----- client/public/images/chevron-down.svg | 3 + client/public/images/chevron-up.svg | 3 + 9 files changed, 149 insertions(+), 44 deletions(-) create mode 100644 client/public/images/chevron-down.svg create mode 100644 client/public/images/chevron-up.svg diff --git a/client/.kiwi/en/DeployBotModal.ts b/client/.kiwi/en/DeployBotModal.ts index 49293ad0..29a7834a 100644 --- a/client/.kiwi/en/DeployBotModal.ts +++ b/client/.kiwi/en/DeployBotModal.ts @@ -27,5 +27,10 @@ export default { tiaoGuo: 'Skip', baoCunChengGong: 'Saved successfully!', buShuChengGong: 'Deployment successful', + wanCheng: 'Done', + tiJiaoChengGong: 'Submission Successful', + shouQiBuShu: 'Collapse', + buShu: 'Deploy', + daKaiBuShu: 'Open Deployment', }, }; diff --git a/client/.kiwi/ja/DeployBotModal.ts b/client/.kiwi/ja/DeployBotModal.ts index 6d449b62..fe081b3e 100644 --- a/client/.kiwi/ja/DeployBotModal.ts +++ b/client/.kiwi/ja/DeployBotModal.ts @@ -26,5 +26,10 @@ export default { tiaoGuo: 'スキップ', baoCunChengGong: '保存が成功しました！', buShuChengGong: 'デプロイが成功しました', + wanCheng: 'かんりょう', + tiJiaoChengGong: '提出が成功しました', + shouQiBuShu: '折りたたむ', + buShu: 'デプロイ', + daKaiBuShu: 'デプロイを開', }, }; diff --git a/client/.kiwi/ko/DeployBotModal.ts b/client/.kiwi/ko/DeployBotModal.ts index 445c5f5e..de08b856 100644 --- a/client/.kiwi/ko/DeployBotModal.ts +++ b/client/.kiwi/ko/DeployBotModal.ts @@ -24,5 +24,10 @@ export default { tiaoGuo: '건너뛰기', baoCunChengGong: '성공적으로 저장!', buShuChengGong: '배포 성공', + wanCheng: '완료', + tiJiaoChengGong: '제출이 성공했습니다', + shouQiBuShu: '접기', + buShu: '배포', + daKaiBuShu: '배포 열기', }, }; diff --git a/client/.kiwi/zh-CN/DeployBotModal.ts b/client/.kiwi/zh-CN/DeployBotModal.ts index 2010e2ea..90723209 100644 --- a/client/.kiwi/zh-CN/DeployBotModal.ts +++ b/client/.kiwi/zh-CN/DeployBotModal.ts @@ -24,5 +24,10 @@ export default { tiaoGuo: '跳过', baoCunChengGong: '保存成功！', buShuChengGong: '部署成功', + wanCheng: '完成', + tiJiaoChengGong: '提交成功', + shouQiBuShu: '收起部署', + buShu: '部署', + daKaiBuShu: '打开部署', }, }; diff --git a/client/.kiwi/zh-TW/DeployBotModal.ts b/client/.kiwi/zh-TW/DeployBotModal.ts index 831749e2..fd20d415 100644 --- a/client/.kiwi/zh-TW/DeployBotModal.ts +++ b/client/.kiwi/zh-TW/DeployBotModal.ts @@ -24,5 +24,10 @@ export default { tiaoGuo: '跳過', baoCunChengGong: '保存成功！', buShuChengGong: '部署成功', + wanCheng: '完成', + tiJiaoChengGong: '提交成功', + shouQiBuShu: '收起', + buShu: '部署', + daKaiBuShu: '打开部署', }, }; diff --git a/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx b/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx index d6a0e4fb..cdf5f251 100644 --- a/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx +++ b/client/app/factory/edit/components/DeployBotModal/DeployContent.tsx @@ -224,9 +224,6 @@ export const DeployContent: React.FC = ({ }; return ( <> - - {I18N.DeployBotModal.DeployContent.buShuDaoQiTa} - {renderPublicMarket()} {renderDeployWebsite()} {renderBindRepo()} diff --git a/client/app/factory/edit/components/DeployBotModal/index.tsx b/client/app/factory/edit/components/DeployBotModal/index.tsx index e878841d..b7eb8983 100644 --- a/client/app/factory/edit/components/DeployBotModal/index.tsx +++ b/client/app/factory/edit/components/DeployBotModal/index.tsx @@ -9,6 +9,7 @@ import { ModalBody, ModalFooter, Button, + Image, } from '@nextui-org/react'; import { useBindBotToRepo, @@ -31,8 +32,17 @@ interface IModalProps { onClose: () => void; } +enum DeployStatusEnum { + HIDEDEPLOYINFO = 'HIDEDEPLOYINFO', + SHOWEPLOYINFO = 'PREEDIT', + PRESUBMIT = 'PRESUBMIT', +} + const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { const [deployInfo, setDeployInfo] = useState({}); + const [deployStatus, setDeployStatus] = useState( + DeployStatusEnum.HIDEDEPLOYINFO, + ); const { botProfile } = useBot(); const { bindBotToRepo, @@ -96,7 +106,11 @@ const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { useEffect(() => { if (lodash.isEqual(originDeployModel, deployInfo)) { setDeployBtnDisabled(true); + deployStatus === DeployStatusEnum.PRESUBMIT && + setDeployStatus(DeployStatusEnum.SHOWEPLOYINFO); } else { + deployStatus !== DeployStatusEnum.HIDEDEPLOYINFO && + setDeployStatus(DeployStatusEnum.PRESUBMIT); setDeployBtnDisabled(false); } }, [deployInfo, originDeployModel]); @@ -151,17 +165,96 @@ const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { isDeployWebsiteSuccess || isBindBotSuccess; + const renderFooterBtn = () => { + if (deployStatus === DeployStatusEnum.HIDEDEPLOYINFO) { + return ( + <> + + + + ); + } + if (deployStatus === DeployStatusEnum.SHOWEPLOYINFO) { + return ( + <> + + + + ); + } + if (deployStatus === DeployStatusEnum.PRESUBMIT) { + return ( + <> + + + + ); + } + return null; + }; + const renderResultPath = (result: { approval_path: any }, text: string) => { return ( <> {result?.approval_path ? (
- {text} - {" "} - {I18N.DeployBotModal.DeployContent.shenHeZhong} + {text} {I18N.DeployBotModal.DeployContent.shenHeZhong} - + {result.approval_path}
@@ -188,7 +281,7 @@ const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { - {I18N.DeployBotModal.index.buShuChengGong} + {I18N.DeployBotModal.index.tiJiaoChengGong} @@ -206,8 +299,7 @@ const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { className="border-[1.5px] border-[#3F3F46] rounded-[46px] bg-[#3F3F46] text-white" onPress={() => onClose()} > - {I18N.components.BotCreateFrom.queRen} - + {I18N.DeployBotModal.index.wanCheng} ) : ( @@ -220,40 +312,25 @@ const MyBotDeployModal: React.FC = ({ isOpen, onClose }) => { {I18N.DeployBotModal.index.baoCunChengGong} - - - - - - - - + {deployStatus === DeployStatusEnum.HIDEDEPLOYINFO ? null : ( + + + + + + )} + + {renderFooterBtn()} )} diff --git a/client/public/images/chevron-down.svg b/client/public/images/chevron-down.svg new file mode 100644 index 00000000..69f531bd --- /dev/null +++ b/client/public/images/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/public/images/chevron-up.svg b/client/public/images/chevron-up.svg new file mode 100644 index 00000000..15e1df39 --- /dev/null +++ b/client/public/images/chevron-up.svg @@ -0,0 +1,3 @@ + + +