feat: 刷新

src/layout/components/Main/index.vue

@@ -3,12 +3,12 @@
     <Tabs />
     <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
       <div class="main">
-        <router-view v-slot="{ Component }">
-          <MainTransition>
+        <router-view v-slot="{ Component, route }">
+          <main-transition>
             <keep-alive :include="cacheRoutes">
-              <component :is="Component" />
+              <component :is="Component" :key="route.name" v-if="refreshPage" />
             </keep-alive>
-          </MainTransition>
+          </main-transition>
         </router-view>
       </div>
     </a-scrollbar>
@@ -18,7 +18,10 @@
 <script setup lang="ts">
 import Tabs from "@/layout/components/Tabs/index.vue";
 import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/theme-config";
 import { useRoutesListStore } from "@/store/route-list";
+const themeStore = useThemeConfig();
+let { refreshPage } = storeToRefs(themeStore);
 const routerStore = useRoutesListStore();
 const { cacheRoutes } = storeToRefs(routerStore);
 </script>

src/layout/components/Tabs/contextmenu.vue

@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <a-dropdown trigger="hover" :popup-max-height="false">
-      <div class="setting"><icon-loop :size="18" /></div>
-      <template #content>
-        <a-doption v-for="item in tabsMenu.list" :key="item.type" @click="(ev: MouseEvent) => onMenu(ev, item)">
-          <template #icon>
-            <component :is="item.icon"></component>
-          </template>
-          <template #default>{{ item.title }}</template>
-        </a-doption>
-      </template>
-    </a-dropdown>
-  </div>
-</template>
-
-<script setup lang="ts">
-const tabsMenu = reactive<TabsMenu.list>({
-  list: [
-    { type: 1, icon: "icon-refresh", title: "refresh" },
-    { type: 2, icon: "icon-close", title: "close-current" },
-    { type: 3, icon: "icon-left", title: "close-left" },
-    { type: 4, icon: "icon-right", title: "close-right" },
-    { type: 5, icon: "icon-close-circle", title: "close-other" },
-    { type: 6, icon: "icon-folder-delete", title: "close-all" }
-  ]
-});
-
-const onMenu = (ev: MouseEvent, item: TabsMenu.menu) => {
-  console.log("点击", ev, item);
-  contextmenuClick(item);
-};
-// 悬浮菜单点击
-const contextmenuClick = (item: TabsMenu.menu) => {
-  switch (item.type) {
-    case 1:
-      // 刷新当前
-
-      break;
-    case 2:
-      // 关闭当前
-
-      break;
-    case 3:
-      // 关闭左侧
-
-      break;
-    case 4:
-      // 关闭右侧
-
-      break;
-    case 5:
-      // 关闭其它
-
-      break;
-    default:
-      // 关闭全部
-
-      break;
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.setting {
-  margin-right: $margin;
-  color: $color-text-2;
-}
-</style>

src/layout/components/Tabs/index.vue

@@ -12,14 +12,17 @@
       <a-tab-pane v-for="item of tabsList" :key="item.name" :title="item.meta.title" :closable="!item.meta.affix" />
     </a-tabs>
     <div class="tabs_setting">
-      <contextmenu />
-      <!-- <a-dropdown trigger="hover">
+      <a-dropdown trigger="hover" :popup-max-height="false">
         <div class="setting"><icon-loop :size="18" /></div>
         <template #content>
-          <a-doption>
+          <a-doption @click="refresh">
             <template #icon><icon-refresh /></template>
             <template #default>刷新</template>
           </a-doption>
+          <a-doption>
+            <template #icon><icon-close /></template>
+            <template #default>关闭当前</template>
+          </a-doption>
           <a-doption>
             <template #icon><icon-left /></template>
             <template #default>关闭左侧</template>
@@ -29,25 +32,25 @@
             <template #default>关闭右侧</template>
           </a-doption>
           <a-doption>
-            <template #icon><icon-close /></template>
+            <template #icon><icon-close-circle /></template>
             <template #default>关闭其它</template>
           </a-doption>
           <a-doption>
-            <template #icon><icon-close-circle /></template>
+            <template #icon><icon-folder-delete /></template>
             <template #default>全部关闭</template>
           </a-doption>
         </template>
-      </a-dropdown> -->
+      </a-dropdown>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import contextmenu from "@/layout/components/Tabs/contextmenu.vue";
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useRoutesListStore } from "@/store/route-list";
 import { useRoutingMethod } from "@/hooks/useRoutingMethod";
+import { useThemeConfig } from "@/store/theme-config";
 const router = useRouter();
 const routerStore = useRoutesListStore();
 const { tabsList, currentRoute } = storeToRefs(routerStore);
@@ -68,6 +71,17 @@ const onDelete = (key: string) => {
   if (tabsList.value.length == 0) return;
   router.push(tabsList.value.at(-1).path);
 };
+
+// 刷新当前页
+const refresh = () => {
+  const themeStore = useThemeConfig();
+  themeStore.setRefreshPage(false);
+  currentRoute.value.meta.keepAlive && routerStore.removeRouteNames(currentRoute.value.name);
+  setTimeout(() => {
+    themeStore.setRefreshPage(true);
+    currentRoute.value.meta.keepAlive && routerStore.setRouteNames(currentRoute.value.name);
+  }, 0);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -80,6 +94,10 @@ const onDelete = (key: string) => {
   align-items: center;
   .tabs_setting {
     margin: 0 0 0 $margin;
+    .setting {
+      margin-right: $margin;
+      color: $color-text-2;
+    }
   }
 }
 :deep(.arco-tabs-nav-tab) {

src/store/route-list.ts

@@ -33,7 +33,7 @@ export const useRoutesListStore = defineStore("routeList", {
       this.routeList = data;
     },
     /**
-     * 设置所有可缓存路由的路由名
+     * 设置可缓存路由的路由名
      * @param {string} name 路由名
      */
     setRouteNames(name: string) {

src/store/theme-config.ts

@@ -6,11 +6,17 @@ import { defineStore } from "pinia";
  */
 export const useThemeConfig = defineStore("themeConfig", {
   state: (): any => ({
-    collapsed: false // 是否折叠菜单
+    collapsed: false, // 是否折叠菜单
+    refreshPage: true // 刷新页面
   }),
   actions: {
+    // 折叠菜单
     async setCollapsed(data: boolean) {
       this.collapsed = data;
+    },
+    // 刷新页面
+    setRefreshPage(data: Boolean) {
+      this.refreshPage = data;
     }
   },
   persist: {