支持 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;

src/layout/index.vue

@@ -51,12 +51,13 @@
         <!--          <PageFooter />-->
         <!--        </NLayoutFooter>-->
       </NLayoutContent>
+      <n-back-top :right="100" />
     </NLayout>
   </NLayout>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, unref, computed, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, computed, onMounted } from 'vue';
   import { Logo } from './components/Logo';
   import { TabsView } from './components/TagsView';
   import { MainView } from './components/Main';
@@ -68,117 +69,89 @@
   import { useRoute } from 'vue-router';
   import { useProjectSettingStore } from '@/store/modules/projectSetting';
 
-  export default defineComponent({
-    name: 'Layout',
-    components: {
-      TabsView,
-      MainView,
-      PageHeader,
-      AsideMenu,
-      Logo,
-    },
-    setup() {
-      const { getDarkTheme } = useDesignSetting();
-      const {
-        getShowFooter,
-        getNavMode,
-        getNavTheme,
-        getHeaderSetting,
-        getMenuSetting,
-        getMultiTabsSetting,
-      } = useProjectSetting();
+  const { getDarkTheme } = useDesignSetting();
+  const {
+    getShowFooter,
+    getNavMode,
+    getNavTheme,
+    getHeaderSetting,
+    getMenuSetting,
+    getMultiTabsSetting,
+  } = useProjectSetting();
 
-      const settingStore = useProjectSettingStore();
+  const settingStore = useProjectSettingStore();
 
-      const navMode = getNavMode;
+  const navMode = getNavMode;
 
-      const collapsed = ref<boolean>(false);
+  const collapsed = ref<boolean>(false);
 
-      const fixedHeader = computed(() => {
-        const { fixed } = unref(getHeaderSetting);
-        return fixed ? 'absolute' : 'static';
-      });
-
-      const isMixMenuNoneSub = computed(() => {
-        const mixMenu = settingStore.menuSetting.mixMenu;
-        const currentRoute = useRoute();
-        if (unref(navMode) != 'horizontal-mix') return true;
-        if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-          return false;
-        }
-        return true;
-      });
-
-      const fixedMenu = computed(() => {
-        const { fixed } = unref(getHeaderSetting);
-        return fixed ? 'absolute' : 'static';
-      });
-
-      const isMultiTabs = computed(() => {
-        return unref(getMultiTabsSetting).show;
-      });
-
-      const fixedMulti = computed(() => {
-        return unref(getMultiTabsSetting).fixed;
-      });
-
-      const inverted = computed(() => {
-        return ['dark', 'header-dark'].includes(unref(getNavTheme));
-      });
-
-      const getHeaderInverted = computed(() => {
-        const navTheme = unref(getNavTheme);
-        return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-      });
-
-      const leftMenuWidth = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return collapsed.value ? minMenuWidth : menuWidth;
-      });
-
-      const getChangeStyle = computed(() => {
-        const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-        return {
-          'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
-        };
-      });
-
-      const getMenuLocation = computed(() => {
-        return 'left';
-      });
-
-      function watchWidth() {
-        const Width = document.body.clientWidth;
-        if (Width <= 950) {
-          collapsed.value = true;
-        } else collapsed.value = false;
-      }
-
-      onMounted(() => {
-        window.addEventListener('resize', watchWidth);
-        //挂载在 window 方便与在js中使用
-        window['$loading'] = useLoadingBar();
-        window['$loading'].finish();
-      });
-
-      return {
-        fixedMenu,
-        fixedMulti,
-        fixedHeader,
-        collapsed,
-        inverted,
-        isMultiTabs,
-        leftMenuWidth,
-        getChangeStyle,
-        navMode,
-        getShowFooter,
-        getDarkTheme,
-        getHeaderInverted,
-        getMenuLocation,
-        isMixMenuNoneSub,
-      };
-    },
+  const fixedHeader = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
   });
+
+  const isMixMenuNoneSub = computed(() => {
+    const mixMenu = settingStore.menuSetting.mixMenu;
+    const currentRoute = useRoute();
+    if (unref(navMode) != 'horizontal-mix') return true;
+    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+      return false;
+    }
+    return true;
+  });
+
+  const fixedMenu = computed(() => {
+    const { fixed } = unref(getHeaderSetting);
+    return fixed ? 'absolute' : 'static';
+  });
+
+  const isMultiTabs = computed(() => {
+    return unref(getMultiTabsSetting).show;
+  });
+
+  const fixedMulti = computed(() => {
+    return unref(getMultiTabsSetting).fixed;
+  });
+
+  const inverted = computed(() => {
+    return ['dark', 'header-dark'].includes(unref(getNavTheme));
+  });
+
+  const getHeaderInverted = computed(() => {
+    const navTheme = unref(getNavTheme);
+    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+  });
+
+  const leftMenuWidth = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return collapsed.value ? minMenuWidth : menuWidth;
+  });
+
+  const getChangeStyle = computed(() => {
+    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+    return {
+      'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
+    };
+  });
+
+  const getMenuLocation = computed(() => {
+    return 'left';
+  });
+
+  const watchWidth = () => {
+    const Width = document.body.clientWidth;
+    if (Width <= 950) {
+      collapsed.value = true;
+    } else collapsed.value = false;
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', watchWidth);
+    //挂载在 window 方便与在js中使用
+    window['$loading'] = useLoadingBar();
+    window['$loading'].finish();
+  });
+
 </script>
 
 <style lang="less" scoped>