From a5d31b685c6205297a73b2dcfc9b11346653a295 Mon Sep 17 00:00:00 2001 From: Teo Date: Wed, 23 Apr 2025 22:31:26 +0800 Subject: [PATCH] style: fix animation (#5243) * style: fix animation * fix(animation): correct animation name typos in multiple components --- src/renderer/src/assets/styles/animation.scss | 37 +++++++++++++++++++ .../components/Popups/NutsorePathPopup.tsx | 2 +- .../src/components/Popups/SearchPopup.tsx | 2 +- .../components/Popups/SelectModelPopup.tsx | 2 +- .../src/components/Popups/TemplatePopup.tsx | 2 +- .../src/components/Popups/TextEditPopup.tsx | 2 +- .../src/components/Popups/UserPopup.tsx | 2 +- .../components/KnowledgeSearchPopup.tsx | 2 +- .../settings/AssistantSettings/index.tsx | 23 +----------- .../settings/MCPSettings/EditMcpJsonPopup.tsx | 2 +- .../ModelSettings/TopicNamingModalPopup.tsx | 2 +- .../ProviderSettingsPopup.tsx | 2 +- .../SelectProviderModelPopup.tsx | 2 +- 13 files changed, 49 insertions(+), 33 deletions(-) diff --git a/src/renderer/src/assets/styles/animation.scss b/src/renderer/src/assets/styles/animation.scss index eb6cb3592a..bd3a96e495 100644 --- a/src/renderer/src/assets/styles/animation.scss +++ b/src/renderer/src/assets/styles/animation.scss @@ -16,3 +16,40 @@ --pulse-size: 8px; animation: animation-pulse 1.5s infinite; } + +// Modal动画 +@keyframes animation-move-down-in { + 0% { + transform: translate3d(0, 100%, 0); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translate3d(0, 0, 0); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes animation-move-down-out { + 0% { + transform: translate3d(0, 0, 0); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translate3d(0, 100%, 0); + transform-origin: 0 0; + opacity: 0; + } +} +.animation-move-down-enter, +.animation-move-down-appear { + animation-name: animation-move-down-in; + animation-fill-mode: both; + animation-duration: 0.25s; +} +.animation-move-down-leave { + animation-name: animation-move-down-out; + animation-fill-mode: both; + animation-duration: 0.25s; +} diff --git a/src/renderer/src/components/Popups/NutsorePathPopup.tsx b/src/renderer/src/components/Popups/NutsorePathPopup.tsx index 1ae06a22de..a0fed77238 100644 --- a/src/renderer/src/components/Popups/NutsorePathPopup.tsx +++ b/src/renderer/src/components/Popups/NutsorePathPopup.tsx @@ -26,7 +26,7 @@ const PopupContainer: React.FC = ({ resolve, fs }) => { = ({ resolve }) => { afterClose={onClose} title={null} width="920px" - transitionName="ant-move-down" + transitionName="animation-move-down" styles={{ content: { padding: 0, diff --git a/src/renderer/src/components/Popups/SelectModelPopup.tsx b/src/renderer/src/components/Popups/SelectModelPopup.tsx index 8bd641ca1d..424e18a267 100644 --- a/src/renderer/src/components/Popups/SelectModelPopup.tsx +++ b/src/renderer/src/components/Popups/SelectModelPopup.tsx @@ -368,7 +368,7 @@ const PopupContainer: React.FC = ({ model, resolve }) => { onCancel={onCancel} afterClose={onClose} width={600} - transitionName="ant-move-down" + transitionName="animation-move-down" styles={{ content: { borderRadius: 20, diff --git a/src/renderer/src/components/Popups/TemplatePopup.tsx b/src/renderer/src/components/Popups/TemplatePopup.tsx index 5c7189b087..67dc50febf 100644 --- a/src/renderer/src/components/Popups/TemplatePopup.tsx +++ b/src/renderer/src/components/Popups/TemplatePopup.tsx @@ -35,7 +35,7 @@ const PopupContainer: React.FC = ({ title, resolve }) => { onOk={onOk} onCancel={onCancel} afterClose={onClose} - transitionName="ant-move-down" + transitionName="animation-move-down" centered> Name diff --git a/src/renderer/src/components/Popups/TextEditPopup.tsx b/src/renderer/src/components/Popups/TextEditPopup.tsx index dfdd52ac7e..ff19c2554a 100644 --- a/src/renderer/src/components/Popups/TextEditPopup.tsx +++ b/src/renderer/src/components/Popups/TextEditPopup.tsx @@ -69,7 +69,7 @@ const PopupContainer: React.FC = ({ text, textareaProps, modalProps, reso title={t('common.edit')} width="60vw" style={{ maxHeight: '70vh' }} - transitionName="ant-move-down" + transitionName="animation-move-down" okText={t('common.save')} {...modalProps} open={open} diff --git a/src/renderer/src/components/Popups/UserPopup.tsx b/src/renderer/src/components/Popups/UserPopup.tsx index 9bc0d6167f..9d7569effa 100644 --- a/src/renderer/src/components/Popups/UserPopup.tsx +++ b/src/renderer/src/components/Popups/UserPopup.tsx @@ -127,7 +127,7 @@ const PopupContainer: React.FC = ({ resolve }) => { onOk={onOk} onCancel={onCancel} afterClose={onClose} - transitionName="ant-move-down" + transitionName="animation-move-down" centered>
diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx index fb86130ea3..a2a74c3bab 100644 --- a/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx +++ b/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx @@ -104,7 +104,7 @@ const PopupContainer: React.FC = ({ base, resolve }) => { width={800} footer={null} centered - transitionName="ant-move-down"> + transitionName="animation-move-down"> = ({ resolve, tab, ...prop afterClose={afterClose} footer={null} title={assistant.name} - /******************************************* - * IMPORTANT: The Comment of transitionName is because: - * - * When in the production mode, - * if some of the antd components(like Select or not showing the assistant tab) not loaded beforehand, - * the modal will not close properly when using unofficially transitionName(like ant-move-down). - * - * The resason may be that the antd CSS-in-JS is not loaded the unofficially ant-xxx-xxx motions, - * this will cause the modal close process being interrupted. - * see antd issue for more details: https://github.com/ant-design/ant-design/issues/29626 - * - * The deeper reason may be that the css/js chunking handle method is different between dev and prod envs - * If we want to solve the problem completely, we need to refactor the antd someway. - * - * The temporary solution is: - * 1. not set transitionName (transitionName is no longer supported in antd 5+) - * 2. set timeout to execute the modal resolve() - * 3. load the other complex antd components(like Select) beforehand - * - * we take the first solution for now. - */ - // transitionName="ant-move-down" + transitionName="animation-move-down" styles={{ content: { padding: 0, diff --git a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx index dc2b20a31e..fc4324801a 100644 --- a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx +++ b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx @@ -111,7 +111,7 @@ const PopupContainer: React.FC = ({ resolve }) => { width={800} height="80vh" loading={jsonSaving} - transitionName="ant-move-down" + transitionName="animation-move-down" centered>
diff --git a/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx b/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx index 052da6699d..56799bca43 100644 --- a/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx +++ b/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx @@ -43,7 +43,7 @@ const PopupContainer: React.FC = ({ resolve }) => { onOk={onOk} onCancel={onCancel} afterClose={onClose} - transitionName="ant-move-down" + transitionName="animation-move-down" footer={null} centered> diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx index 892ad24ad5..a4a12a6c34 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx @@ -42,7 +42,7 @@ const PopupContainer: React.FC = ({ resolve, ...props }) => { onOk={onOk} onCancel={onCancel} afterClose={onClose} - transitionName="ant-move-down" + transitionName="animation-move-down" centered> = ({ provider, resolve, reject }) => { onOk={onOk} onCancel={onCancel} afterClose={onClose} - transitionName="ant-move-down" + transitionName="animation-move-down" width={300} centered>