refactor: app-main 弃用naive ui虚拟滚动条，改成自定义滚动条

src/layout/index.vue

@@ -8,13 +8,11 @@
         <AppHeader />
       </n-layout-header>
 
-      <n-layout
-        style="background-color: #f5f6fb"
-        :style="`height: calc(100% - ${useTheme.header.height}px)`"
-        :native-scrollbar="false"
-      >
+      <n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
         <AppTags v-if="useTheme.tags.visible" />
-        <AppMain />
+        <AppMain
+          :style="{ height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`, overflow: 'auto' }"
+        />
       </n-layout>
     </n-layout>
   </n-layout>

src/styles/public.scss

@@ -26,3 +26,17 @@ body {
   opacity: 0;
   transform: translateX(30px);
 }
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: #eee;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+
+  &:hover {
+    background-color: #a8a8a8;
+  }
+}

src/views/error-page/404.vue

@@ -18,14 +18,9 @@ const { replace } = useRouter()
 
 <style lang="scss" scoped>
 .page-404 {
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  position: absolute;
-  top: 50px;
-  bottom: 50px;
-  left: 0;
-  right: 0;
 }
 </style>