支持 Vue 3.2.x 语法升级为，script setup

src/layout/components/Header/ProjectSetting.vue

@@ -140,7 +140,7 @@
           <div class="drawer-setting-item-title"> 分割菜单 </div>
           <div class="drawer-setting-item-action">
             <n-switch
-              :disabled="settingStore.navMode === 'horizontal-mix' ? false : true"
+              :disabled="settingStore.navMode !== 'horizontal-mix'"
               v-model:value="settingStore.menuSetting.mixMenu"
             />
           </div>
@@ -206,6 +206,22 @@
         <!--          </div>-->
         <!--        </div>-->
 
+        <n-divider title-placement="center">动画</n-divider>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 禁用动画 </div>
+          <div class="drawer-setting-item-action">
+            <n-switch v-model:value="settingStore.isPageAnimate" />
+          </div>
+        </div>
+
+        <div class="drawer-setting-item">
+          <div class="drawer-setting-item-title"> 动画类型 </div>
+          <div class="drawer-setting-item-select">
+            <n-select v-model:value="settingStore.pageAnimateType" :options="animateOptions" />
+          </div>
+        </div>
+
         <div class="drawer-setting-item">
           <n-alert type="warning" :showIcon="false">
             <p>{{ alertText }}</p>
@@ -217,12 +233,13 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, watch } from 'vue';
+  import { defineComponent, reactive, toRefs, unref, watch, computed } from 'vue';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import { CheckOutlined } from '@vicons/antd';
   import { Moon, SunnySharp } from '@vicons/ionicons5';
   import { darkTheme } from 'naive-ui';
+  import { animates as animateOptions } from '@/settings/animateSetting';
 
   export default defineComponent({
     name: 'ProjectSetting',
@@ -257,6 +274,10 @@
         }
       );
 
+      const directionsOptions = computed(() => {
+        return animateOptions.find((item) => item.value == unref(settingStore.pageAnimateType));
+      });
+
       function openDrawer() {
         state.isDrawer = true;
       }
@@ -291,6 +312,8 @@
         darkTheme,
         openDrawer,
         closeDrawer,
+        animateOptions,
+        directionsOptions,
       };
     },
   });
@@ -325,6 +348,10 @@
         flex: 0 0 auto;
       }
 
+      &-select {
+        flex: 1;
+      }
+
       .theme-item {
         width: 20px;
         min-width: 20px;

src/layout/components/Logo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="logo">
-    <img src="~@/assets/images/logo.png" alt="" />
+    <img src="~@/assets/images/logo.png" alt="" :class="{ 'mr-2': !collapsed }" />
     <h2 v-show="!collapsed" class="title">NaiveUiAdmin</h2>
   </div>
 </template>
@@ -29,7 +29,6 @@
     img {
       width: auto;
       height: 32px;
-      margin-right: 10px;
     }
 
     .title {

src/layout/components/Main/index.vue

@@ -1,7 +1,7 @@
 <template>
   <RouterView>
     <template #default="{ Component, route }">
-      <transition name="zoom-fade" mode="out-in" appear>
+      <transition :name="getTransitionName" mode="out-in" appear>
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
         </keep-alive>
@@ -12,8 +12,9 @@
 </template>
 
 <script>
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
   import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
+  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
 
   export default defineComponent({
     name: 'MainView',
@@ -29,11 +30,18 @@
       },
     },
     setup() {
+      const { getIsPageAnimate, getPageAnimateType } = useProjectSetting();
       const asyncRouteStore = useAsyncRouteStore();
       // 需要缓存的路由组件
       const keepAliveComponents = computed(() => asyncRouteStore.keepAliveComponents);
+
+      const getTransitionName = computed(() => {
+        return unref(getIsPageAnimate) ? unref(getPageAnimateType) : '';
+      });
+
       return {
         keepAliveComponents,
+        getTransitionName,
       };
     },
   });

src/layout/components/TagsView/index.vue

@@ -102,8 +102,7 @@
   import { RouteItem } from '@/store/modules/tabsView';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useMessage } from 'naive-ui';
-  // @ts-ignore
-  import Draggable from 'vuedraggable/src/vuedraggable';
+  import Draggable from 'vuedraggable';
   import { PageEnum } from '@/enums/pageEnum';
   import {
     DownOutlined,
@@ -643,11 +642,11 @@
   .tabs-view-default-background {
     background: #f5f7f9;
   }
-  
+
   .tabs-view-dark-background {
     background: #101014;
   }
-  
+
   .tabs-view-fix {
     position: fixed;
     z-index: 5;