feat(projects): 增加页面重载功能

src/layouts/BasicLayout/index.vue

@@ -11,7 +11,7 @@
           <Breadcrumb />
         </div>
         <div class="flex-y-center h-full">
-          <Refresh />
+          <Reload />
           <Search />
           <Notices />
           <Github />
@@ -23,7 +23,11 @@
       </n-layout-header>
       <div class="p-16px">
         <n-layout-content>
-          <router-view></router-view>
+          <router-view v-slot="{ Component }">
+            <transition name="fade-slide" appear mode="out-in">
+              <component :is="Component" v-if="appStore.loadFlag" />
+            </transition>
+          </router-view>
         </n-layout-content>
       </div>
       <n-layout-footer position="absolute" bordered class="flex-center bg-white h-40px">
@@ -47,7 +51,7 @@ import {
   Notices,
   UserCenter,
   Search,
-  Refresh,
+  Reload,
 } from '../components';
 
 const appStore = useAppStore();

src/layouts/components/header/Reload.vue

@@ -1,7 +1,7 @@
 <template>
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
-      <HeaderButton @click="handleRefresh"><e-icon icon="icon-park-outline:refresh" /></HeaderButton>
+      <HeaderButton @click="handleReload"><e-icon icon="icon-park-outline:refresh" /></HeaderButton>
     </template>
     <span>刷新页面</span>
   </n-tooltip>
@@ -9,8 +9,11 @@
 
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
-const handleRefresh = () => {
-  window.open('https://github.com/chen-see');
+import { useAppStore } from '@/store';
+const appStore = useAppStore();
+
+const handleReload = () => {
+  appStore.reloadPage();
 };
 </script>
 

src/layouts/components/index.ts

@@ -12,7 +12,7 @@ import Github from './header/Github.vue';
 import Notices from './header/Notices.vue';
 import UserCenter from './header/UserCenter.vue';
 import Search from './header/Search.vue';
-import Refresh from './header/Refresh.vue';
+import Reload from './header/Reload.vue';
 
 export {
   Breadcrumb,
@@ -26,5 +26,5 @@ export {
   Notices,
   UserCenter,
   Search,
-  Refresh,
+  Reload,
 };

src/store/modules/app.ts

@@ -1,24 +1,27 @@
 import { defineStore } from 'pinia';
+import { nextTick } from 'vue';
 import { darkTheme, GlobalTheme } from 'naive-ui';
 
 interface AppStatus {
+  title: string;
+  footerText: string;
   collapsed: boolean;
   fullScreen: boolean;
   darkMode: boolean;
   darkTheme: GlobalTheme | null;
-  title: string;
-  footerText: string;
+  loadFlag: boolean;
 }
 
 export const useAppStore = defineStore('app-store', {
   state: (): AppStatus => {
     return {
+      title: import.meta.env.VITE_APP_TITLE,
+      footerText: '哲学的基本问题是思维和存在的关系问题',
       collapsed: false,
       fullScreen: false,
       darkMode: false,
       darkTheme: null,
-      title: import.meta.env.VITE_APP_TITLE,
-      footerText: '哲学的基本问题是思维和存在的关系问题',
+      loadFlag: true,
     };
   },
   actions: {
@@ -45,5 +48,21 @@ export const useAppStore = defineStore('app-store', {
         this.darkTheme = null;
       }
     },
+    /**
+     * @description: 页面内容重载
+     * @param {number} delay - 延迟毫秒数
+     * @return {*}
+     */
+    async reloadPage(delay = 100) {
+      this.loadFlag = false;
+      await nextTick();
+      if (delay) {
+        setTimeout(() => {
+          this.loadFlag = true;
+        }, delay);
+      } else {
+        this.loadFlag = true;
+      }
+    },
   },
 });

src/views/test/test2.vue

@@ -1,6 +1,5 @@
 <template>
-  <div text-center c-yellow>I prove that you have made the ju mp test2.</div>
-  {{ userStore.name }}
+  <div text-center c-yellow>I prove that you have made the ju mp test2. {{ userStore.name }}</div>
 </template>
 
 <script setup lang="ts">

src/views/test/test3.vue

@@ -1,6 +1,8 @@
 <template>
-  <div text-center c-red>I prove that you have made the jump test3.</div>
-  <n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
+  <div text-center c-red>
+    I prove that you have made the jump test3.
+    <n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
+  </div>
 </template>
 
 <script setup lang="ts">