feat: add page components

src/layout/components/AppMain.vue

@@ -1,10 +1,6 @@
 <template>
-  <router-view v-slot="{ Component, route }">
-    <transition name="fade-slide" mode="out-in" appear>
-      <keep-alive :include="keepAliveRouteNames">
-        <component :is="Component" v-if="appStore.reloadFlag" :key="route.path" />
-      </keep-alive>
-    </transition>
+  <router-view v-slot="{ Component }">
+    <component :is="Component" v-if="appStore.reloadFlag" />
   </router-view>
 </template>
 
@@ -12,9 +8,4 @@
 import { useAppStore } from '@/store/modules/app'
 
 const appStore = useAppStore()
-const router = useRouter()
-const allRoutes = router.getRoutes()
-const keepAliveRouteNames = computed(() => {
-  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
-})
 </script>

src/layout/components/header/index.vue

@@ -1,15 +1,13 @@
 <template>
-  <header px-15 h-full flex items-center>
-    <div flex items-center>
-      <MenuCollapse />
-      <BreadCrumb ml-15 />
-    </div>
-    <div ml-auto flex items-center>
-      <GithubSite />
-      <FullScreen />
-      <UserAvatar />
-    </div>
-  </header>
+  <div flex items-center>
+    <MenuCollapse />
+    <BreadCrumb ml-15 />
+  </div>
+  <div ml-auto flex items-center>
+    <GithubSite />
+    <FullScreen />
+    <UserAvatar />
+  </div>
 </template>
 
 <script setup>

src/layout/components/sidebar/components/SideMenu.vue

@@ -106,7 +106,7 @@ function handleMenuSelect(key, item) {
     &.n-menu-item-content--selected,
     &:hover {
       &::before {
-        border-left: 4px solid var(--primaryColor);
+        border-left: 4px solid var(--primary-color);
       }
     }
   }

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-layout has-sider h-full>
+  <n-layout has-sider wh-full>
     <n-layout-sider
       bordered
       collapse-mode="width"
@@ -10,19 +10,18 @@
     >
       <SideBar />
     </n-layout-sider>
-    <n-layout>
-      <n-layout-header bg-white border-b bc-eee :style="`height: ${header.height ?? 60}px`">
-        <AppHeader />
-      </n-layout-header>
 
-      <n-layout bg="#f5f6fb" :style="`height: calc(100% - ${header.height ?? 60}px)`">
-        <AppTags v-if="tags.visible" :style="`height: ${tags.height ?? 50}px`" />
-        <AppMain
-          class="cus-scroll border-t bc-eee overflow-auto"
-          :style="{ height: `calc(100% - ${tags.visible ? tags.height ?? 50 : 0}px)` }"
-        />
-      </n-layout>
-    </n-layout>
+    <article flex-1 flex-col overflow-hidden>
+      <header bg-white px-15 border-b bc-eee flex items-center :style="`height: ${header.height}px`">
+        <AppHeader />
+      </header>
+      <section v-if="tags.visible" border-b bc-eee>
+        <AppTags :style="{ height: `${tags.height}px` }" />
+      </section>
+      <section flex-1 overflow-hidden>
+        <AppMain />
+      </section>
+    </article>
   </n-layout>
 </template>