changes

app/components/orders/Orders.vue

@@ -90,10 +90,7 @@ provide("orders", {
         </button>
       </div>
     </Teleport>
-    <div
-      v-if="false"
-      class="fixed-grid has-2-cols-mobile has-5-cols"
-    >
+    <div class="fixed-grid has-2-cols-mobile has-5-cols">
       <div class="grid">
         <OrderHighlightCard
           v-for="highlight in highlights"

app/pages/index.vue

@@ -43,16 +43,11 @@
             />
           </p>
         </div>
-        <div
-          id="header-right-slot"
-          :key="componentKey"
-        ></div>
+        <div id="header-right-slot"></div>
       </div>
-      <KeepAlive>
+      <KeepAlive :exclude="exclude">
         <component
-          v-if="componentKey"
           :is="componentMap[vbind.component]"
-          :key="componentKey"
           v-bind="vbind"
         />
       </KeepAlive>
@@ -60,9 +55,9 @@
   </ClientOnly>
 </template>
 <script setup>
-const { $createMeta, $store, $copy, $id } = useNuxtApp();
+const { $createMeta, $filter, $copy, $store } = useNuxtApp();
 const componentMap = {};
-const componentKey = ref();
+const exclude = ref([]);
 const vbind = ref({});
 const tab = ref();
 const subtab = ref();
@@ -85,7 +80,6 @@ function changeTab(_tab, _subtab) {
       $store.lang === "en" ? currentTab.value.detail_en || currentTab.value.detail : currentTab.value.detail;
   }
   componentMap[vbind.value.component] = vbind.value.base || toPascalCase(vbind.value.component);
-  componentKey.value = vbind.value.component;
 
   $store.commit("tabinfo", {
     tab: tab.value,
@@ -104,10 +98,24 @@ function changeTab(_tab, _subtab) {
   useHead($createMeta(meta));
 }
 
-function refresh() {
-  const copy = $copy(componentKey.value) + $id();
-  componentKey.value = undefined;
-  setTimeout(() => (componentKey.value = copy));
+function changeToRandomTab(originalTabId) {
+  const topmenus = $filter($store.common, { category: "topmenu" });
+  const otherTabs = topmenus.filter((m) => m.id !== originalTabId);
+  const randomTab = otherTabs[0];
+  changeTab(randomTab);
+}
+
+async function refresh() {
+  const oriTab = $copy(tab.value);
+  const oriSubTab = $copy(subtab.value);
+  const oriCurrentTab = $copy(currentTab.value);
+  const oriComp = oriCurrentTab.detail.base;
+
+  exclude.value.push(oriComp);
+  changeToRandomTab(oriCurrentTab.id);
+  await nextTick();
+  changeTab(oriTab, oriSubTab);
+  exclude.value.splice(0, 1);
 }
 </script>
 <style lang="scss" scoped>