feat: Add <keep-alive> (#83)

Author: cwandev

build/vite/index.ts

@@ -13,7 +13,6 @@ import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import { VitePWA } from 'vite-plugin-pwa'
 import Sitemap from 'vite-plugin-sitemap'
 import VueDevTools from 'vite-plugin-vue-devtools'
-import Layouts from 'vite-plugin-vue-layouts'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createViteVConsole } from './vconsole'
 
@@ -28,11 +27,6 @@ export function createVitePlugins() {
 
     vue(),
 
-    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts({
-      pagesDirs: 'src/pages/**',
-    }),
-
     // https://github.com/jbaubree/vite-plugin-sitemap
     Sitemap(),
 

package.json

@@ -73,7 +73,6 @@
     "vite-plugin-sitemap": "^0.5.3",
     "vite-plugin-vconsole": "^2.1.1",
     "vite-plugin-vue-devtools": "^7.0.25",
-    "vite-plugin-vue-layouts": "^0.11.0",
     "vitest": "^1.4.0",
     "vue-tsc": "^2.0.7"
   },

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import useAppStore from '@/stores/modules/app'
+import useRouteCache from '@/stores/modules/routeCache'
 import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
 import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
 
@@ -30,9 +31,12 @@ const { mode } = storeToRefs(appStore)
 
 const routeTransitionNameStore = useRouteTransitionNameStore()
 const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
-
 const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
 
+const keepAliveRouteNames = computed(() => {
+  return useRouteCache().routeCaches as string[]
+})
+
 onMounted(() => {
   initializeThemeSwitcher()
 })
@@ -43,21 +47,11 @@ onMounted(() => {
     <NavBar />
     <router-view v-slot="{ Component, route }">
       <transition :name="routeTransitionName">
-        <div :key="route.name" class="app-wrapper">
-          <component :is="Component" />
-        </div>
+        <keep-alive :include="keepAliveRouteNames">
+          <component :is="Component" :key="route.name" />
+        </keep-alive>
       </transition>
     </router-view>
+    <TabBar />
   </VanConfigProvider>
 </template>
-
-<style scoped>
-.app-wrapper {
-  width: 100%;
-  height: 100%;
-  padding-top: 46px;
-  overflow-y: auto;
-  position: absolute;
-  left: 0;
-}
-</style>

src/App.vue

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Chart: typeof import('./components/Chart/index.vue')['default']
+    Container: typeof import('./components/Container.vue')['default']
     NavBar: typeof import('./components/NavBar.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -24,6 +25,7 @@ declare module 'vue' {
     VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanSpace: typeof import('vant/es')['Space']
+    VanStepper: typeof import('vant/es')['Stepper']
     VanSwitch: typeof import('vant/es')['Switch']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']

src/components.d.ts

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+  paddingX: {
+    type: Number,
+    default: 16,
+  },
+})
+</script>
+
+<template>
+  <main
+    class="absolute left-0 h-full w-full overflow-y-auto pt-46"
+    :style="`padding-left: ${paddingX}px; padding-right: ${paddingX}px`"
+  >
+    <slot />
+  </main>
+</template>

src/components/Container.vue

@@ -1,21 +1,28 @@
-<script setup lang="ts">
-const { t } = useI18n()
-const active = ref(0)
-</script>
-
-<template>
-  <van-tabbar v-model="active" route>
-    <van-tabbar-item replace to="/">
-      {{ t('layouts.home') }}
-      <template #icon>
-        <div class="i-carbon:home" />
-      </template>
-    </van-tabbar-item>
-    <van-tabbar-item replace to="/profile">
-      {{ t('layouts.profile') }}
-      <template #icon>
-        <div class="i-carbon:user" />
-      </template>
-    </van-tabbar-item>
-  </van-tabbar>
-</template>
+<script setup lang="ts">
+const { t } = useI18n()
+const active = ref(0)
+const route = useRoute()
+
+const display = computed(() => {
+  if (route.meta.level && route.meta.level !== 2)
+    return true
+  return false
+})
+</script>
+
+<template>
+  <van-tabbar v-show="display" v-model="active" route>
+    <van-tabbar-item replace to="/">
+      {{ t('layouts.home') }}
+      <template #icon>
+        <div class="i-carbon:home" />
+      </template>
+    </van-tabbar-item>
+    <van-tabbar-item replace to="/profile">
+      {{ t('layouts.profile') }}
+      <template #icon>
+        <div class="i-carbon:user" />
+      </template>
+    </van-tabbar-item>
+  </van-tabbar>
+</template>