From a1a27182858e5217f2bb5b88c3c8ee0bc46e9fe0 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 11 May 2025 19:33:30 +0800
Subject: [PATCH] feat: add transition animations to various popups and dialogs
 for improved user experience

---
 src/renderer/src/components/ObsidianExportDialog.tsx      | 1 +
 src/renderer/src/components/Popups/AddAssistantPopup.tsx  | 2 +-
 src/renderer/src/components/Popups/BackupPopup.tsx        | 1 +
 src/renderer/src/components/Popups/PromptPopup.tsx        | 1 +
 src/renderer/src/components/Popups/RestorePopup.tsx       | 1 +
 .../src/components/Popups/SelectModelPopup/popup.tsx      | 2 +-
 src/renderer/src/components/WebdavBackupManager.tsx       | 1 +
 src/renderer/src/components/WebdavModals.tsx              | 2 ++
 .../src/pages/agents/components/AddAgentPopup.tsx         | 1 +
 .../src/pages/agents/components/ImportAgentPopup.tsx      | 8 +++++++-
 .../src/pages/agents/components/ManageAgentsPopup.tsx     | 1 +
 src/renderer/src/pages/apps/App.tsx                       | 1 +
 .../src/pages/home/Inputbar/QuickPhrasesButton.tsx        | 1 +
 src/renderer/src/pages/home/Markdown/MermaidPopup.tsx     | 1 +
 src/renderer/src/pages/home/Markdown/PlantUML.tsx         | 1 +
 src/renderer/src/pages/home/Messages/MessageTools.tsx     | 1 +
 .../pages/knowledge/components/KnowledgeSettingsPopup.tsx | 1 +
 .../AssistantSettings/AssistantRegularPromptsSettings.tsx | 1 +
 .../settings/ModelSettings/DefaultAssistantSettings.tsx   | 1 +
 .../src/pages/settings/ProviderSettings/AddModelPopup.tsx | 1 +
 .../pages/settings/ProviderSettings/AddProviderPopup.tsx  | 1 +
 .../src/pages/settings/ProviderSettings/ApiCheckPopup.tsx | 1 +
 .../pages/settings/ProviderSettings/EditModelsPopup.tsx   | 1 +
 .../pages/settings/ProviderSettings/HealthCheckPopup.tsx  | 1 +
 .../pages/settings/ProviderSettings/ModelEditContent.tsx  | 1 +
 .../pages/settings/ProviderSettings/ModelNotesPopup.tsx   | 1 +
 .../src/pages/settings/QuickPhraseSettings/index.tsx      | 1 +
 .../settings/WebSearchSettings/AddSubscribePopup.tsx      | 1 +
 28 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/ObsidianExportDialog.tsx b/src/renderer/src/components/ObsidianExportDialog.tsx
index 739b51003a..267473f483 100644
--- a/src/renderer/src/components/ObsidianExportDialog.tsx
+++ b/src/renderer/src/components/ObsidianExportDialog.tsx
@@ -312,6 +312,7 @@ const ObsidianExportDialog: React.FC<ObsidianExportDialogProps> = ({
       closable
       maskClosable
       centered
+      transitionName="animation-move-down"
       okButtonProps={{
         type: 'primary',
         disabled: vaults.length === 0 || loading || !!error
diff --git a/src/renderer/src/components/Popups/AddAssistantPopup.tsx b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
index 2efecdf072..8215ee0ae5 100644
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@@ -150,7 +150,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       open={open}
       onCancel={onCancel}
       afterClose={onClose}
-      transitionName="ant-move-up"
+      transitionName="animation-move-down"
       styles={{
         content: {
           borderRadius: 20,
diff --git a/src/renderer/src/components/Popups/BackupPopup.tsx b/src/renderer/src/components/Popups/BackupPopup.tsx
index a6e8d03e81..41eb268a16 100644
--- a/src/renderer/src/components/Popups/BackupPopup.tsx
+++ b/src/renderer/src/components/Popups/BackupPopup.tsx
@@ -70,6 +70,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       cancelButtonProps={{ disabled: isDisabled }}
       okText={t('backup.confirm.button')}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       {!progressData && <div>{t('backup.content')}</div>}
       {progressData && (
diff --git a/src/renderer/src/components/Popups/PromptPopup.tsx b/src/renderer/src/components/Popups/PromptPopup.tsx
index 473a50e958..413aeff1e5 100644
--- a/src/renderer/src/components/Popups/PromptPopup.tsx
+++ b/src/renderer/src/components/Popups/PromptPopup.tsx
@@ -63,6 +63,7 @@ const PromptPopupContainer: React.FC<Props> = ({
       onCancel={onCancel}
       afterClose={onClose}
       afterOpenChange={handleAfterOpenChange}
+      transitionName="animation-move-down"
       centered>
       <Box mb={8}>{message}</Box>
       <Input.TextArea
diff --git a/src/renderer/src/components/Popups/RestorePopup.tsx b/src/renderer/src/components/Popups/RestorePopup.tsx
index 7a54c1492a..59b27fa3cb 100644
--- a/src/renderer/src/components/Popups/RestorePopup.tsx
+++ b/src/renderer/src/components/Popups/RestorePopup.tsx
@@ -70,6 +70,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       okButtonProps={{ disabled: isDisabled }}
       cancelButtonProps={{ disabled: isDisabled }}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       {!progressData && <div>{t('restore.content')}</div>}
       {progressData && (
diff --git a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
index fbf8529122..febf768189 100644
--- a/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup/popup.tsx
@@ -20,7 +20,7 @@ import styled from 'styled-components'
 import { useScrollState } from './hook'
 import { FlatListItem } from './types'
 
-const PAGE_SIZE = 9
+const PAGE_SIZE = 10
 const ITEM_HEIGHT = 36
 
 interface PopupParams {
diff --git a/src/renderer/src/components/WebdavBackupManager.tsx b/src/renderer/src/components/WebdavBackupManager.tsx
index 7d9753a59b..1c589736b4 100644
--- a/src/renderer/src/components/WebdavBackupManager.tsx
+++ b/src/renderer/src/components/WebdavBackupManager.tsx
@@ -255,6 +255,7 @@ export function WebdavBackupManager({ visible, onClose, webdavConfig, restoreMet
       onCancel={onClose}
       width={800}
       centered
+      transitionName="animation-move-down"
       footer={[
         <Button key="refresh" icon={<ReloadOutlined />} onClick={fetchBackupFiles} disabled={loading}>
           {t('settings.data.webdav.backup.manager.refresh')}
diff --git a/src/renderer/src/components/WebdavModals.tsx b/src/renderer/src/components/WebdavModals.tsx
index 16fee51b66..2dc8f1d3b6 100644
--- a/src/renderer/src/components/WebdavModals.tsx
+++ b/src/renderer/src/components/WebdavModals.tsx
@@ -77,6 +77,7 @@ export function WebdavBackupModal({
       onOk={handleBackup}
       onCancel={handleCancel}
       okButtonProps={{ loading: backuping }}
+      transitionName="animation-move-down"
       centered>
       <Input
         value={customFileName}
@@ -208,6 +209,7 @@ export function WebdavRestoreModal({
       onCancel={handleCancel}
       okButtonProps={{ loading: restoring }}
       width={600}
+      transitionName="animation-move-down"
       centered>
       <div style={{ position: 'relative' }}>
         <Select
diff --git a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
index 4ca7cad362..05f9dc872e 100644
--- a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -141,6 +141,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       afterClose={onClose}
       okText={t('agents.add.title')}
       width={800}
+      transitionName="animation-move-down"
       centered>
       <Form
         ref={formRef}
diff --git a/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx b/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
index 070ed9e51c..64c6f34b2f 100644
--- a/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
@@ -94,7 +94,13 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   }
 
   return (
-    <Modal title={t('agents.import.title')} open={open} onCancel={onCancel} footer={null} centered>
+    <Modal
+      title={t('agents.import.title')}
+      open={open}
+      onCancel={onCancel}
+      footer={null}
+      transitionName="animation-move-down"
+      centered>
       <Form form={form} onFinish={onFinish} layout="vertical">
         <Form.Item>
           <Radio.Group value={importType} onChange={(e) => setImportType(e.target.value)}>
diff --git a/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx b/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx
index 88143a9a60..5307293b1e 100644
--- a/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx
+++ b/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx
@@ -39,6 +39,7 @@ const PopupContainer: React.FC = () => {
       onCancel={onCancel}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Container>
         {agents.length > 0 && (
diff --git a/src/renderer/src/pages/apps/App.tsx b/src/renderer/src/pages/apps/App.tsx
index ab7773e661..295c77f6cc 100644
--- a/src/renderer/src/pages/apps/App.tsx
+++ b/src/renderer/src/pages/apps/App.tsx
@@ -178,6 +178,7 @@ const App: FC<Props> = ({ app, onClick, size = 60, isLast }) => {
           setFileList([])
         }}
         footer={null}
+        transitionName="animation-move-down"
         centered>
         <Form form={form} onFinish={handleAddCustomApp} layout="vertical">
           <Form.Item
diff --git a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
index 78299306cc..ed2e751108 100644
--- a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
@@ -163,6 +163,7 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, ToolbarButton,
           setFormData({ title: '', content: '', location: 'global' })
         }}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>
diff --git a/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx b/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx
index 6dda41c5c0..1975f132cb 100644
--- a/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx
+++ b/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx
@@ -199,6 +199,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
       onCancel={onCancel}
       afterClose={onClose}
       width={1000}
+      transitionName="animation-move-down"
       centered
       footer={[
         <Space key="download-buttons">
diff --git a/src/renderer/src/pages/home/Markdown/PlantUML.tsx b/src/renderer/src/pages/home/Markdown/PlantUML.tsx
index 10bf50ba98..8a0995fdcb 100644
--- a/src/renderer/src/pages/home/Markdown/PlantUML.tsx
+++ b/src/renderer/src/pages/home/Markdown/PlantUML.tsx
@@ -224,6 +224,7 @@ const PlantUMLPopupCantaier: React.FC<PlantUMLPopupProps> = ({ resolve, diagram
       onCancel={onCancel}
       afterClose={onClose}
       width={1000}
+      transitionName="animation-move-down"
       centered
       footer={[
         <Space key="download-buttons">
diff --git a/src/renderer/src/pages/home/Messages/MessageTools.tsx b/src/renderer/src/pages/home/Messages/MessageTools.tsx
index 683ec923a7..433f1af051 100644
--- a/src/renderer/src/pages/home/Messages/MessageTools.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTools.tsx
@@ -170,6 +170,7 @@ const MessageTools: FC<Props> = ({ blocks }) => {
         footer={null}
         width="80%"
         centered
+        transitionName="animation-move-down"
         styles={{ body: { maxHeight: '80vh', overflow: 'auto' } }}>
         {expandedResponse && (
           <ExpandedResponseContainer style={{ fontFamily, fontSize }}>
diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
index b8a9f89564..bf318fb265 100644
--- a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
@@ -125,6 +125,7 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
       afterClose={onClose}
       destroyOnClose
       maskClosable={false}
+      transitionName="animation-move-down"
       centered>
       <Form form={form} layout="vertical" className="compact-form">
         <Form.Item
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
index aab50f12a5..602b77ad2a 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
@@ -136,6 +136,7 @@ const AssistantRegularPromptsSettings: FC<AssistantRegularPromptsSettingsProps>
         onOk={handleModalOk}
         onCancel={() => setIsModalOpen(false)}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>
diff --git a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
index 617b54a21d..3e1ca1ce63 100644
--- a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
@@ -305,6 +305,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       onOk={onOk}
       onCancel={onCancel}
       afterClose={onClose}
+      transitionName="animation-move-down"
       centered
       width={800}
       footer={null}>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx
index 7f9a2d7b29..f4eb96ad7d 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AddModelPopup.tsx
@@ -85,6 +85,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Form
         form={form}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
index 8268785b2e..309ebbe0a8 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
@@ -152,6 +152,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
       afterClose={onClose}
       width={360}
       closable={false}
+      transitionName="animation-move-down"
       centered
       title={t('settings.provider.add.title')}
       okButtonProps={{ disabled: buttonDisabled }}>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ApiCheckPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ApiCheckPopup.tsx
index be6b890ca5..91ae99da3c 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ApiCheckPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ApiCheckPopup.tsx
@@ -141,6 +141,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, model, apiKeys, type
       onOk={onOk}
       onCancel={onCancel}
       afterClose={onClose}
+      transitionName="animation-move-down"
       centered
       maskClosable={false}
       footer={
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
index b2af375c8d..1c5d189bd3 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelsPopup.tsx
@@ -232,6 +232,7 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
         content: { padding: 0 },
         header: { padding: '16px 22px 30px 22px' }
       }}
+      transitionName="animation-move-down"
       centered>
       <SearchContainer>
         <TopToolsWrapper>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/HealthCheckPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/HealthCheckPopup.tsx
index 839dc1fd92..34d47b47c5 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/HealthCheckPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/HealthCheckPopup.tsx
@@ -132,6 +132,7 @@ const PopupContainer: React.FC<Props> = ({ title, apiKeys, resolve }) => {
       centered
       maskClosable={false}
       width={500}
+      transitionName="animation-move-down"
       footer={
         <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
           <Space>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx
index 034455c745..2325a3825a 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx
@@ -46,6 +46,7 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
       onCancel={handleClose}
       footer={null}
       maskClosable={false}
+      transitionName="animation-move-down"
       centered
       afterOpenChange={(visible) => {
         if (visible) {
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
index 2547fb41b0..2635038539 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
@@ -45,6 +45,7 @@ const PopupContainer: FC<Props> = ({ provider: _provider, resolve }) => {
       onCancel={onCancel}
       afterClose={onClose}
       width={800}
+      transitionName="animation-move-down"
       centered>
       <EditorContainer>
         <MarkdownEditor
diff --git a/src/renderer/src/pages/settings/QuickPhraseSettings/index.tsx b/src/renderer/src/pages/settings/QuickPhraseSettings/index.tsx
index 1ae4161d75..1321a87db1 100644
--- a/src/renderer/src/pages/settings/QuickPhraseSettings/index.tsx
+++ b/src/renderer/src/pages/settings/QuickPhraseSettings/index.tsx
@@ -118,6 +118,7 @@ const QuickPhraseSettings: FC = () => {
         onOk={handleModalOk}
         onCancel={() => setIsModalOpen(false)}
         width={520}
+        transitionName="animation-move-down"
         centered>
         <Space direction="vertical" style={{ width: '100%' }} size="middle">
           <div>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
index fa5c4e0e7f..12f5e29925 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
@@ -62,6 +62,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       footer={null}
+      transitionName="animation-move-down"
       centered>
       <Form
         form={form}