refactor(projects): perfect scrollbar style [完善滚动条]

src/layouts/BasicLayout/index.vue

@@ -10,7 +10,6 @@
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"
     :sider-collapse="app.siderCollapse"
-    :add-main-overflow-hidden="addMainOverflowHidden"
     :fixed-footer="theme.footer.fixed"
     @update:sider-collapse="app.setSiderCollapse"
   >
@@ -23,7 +22,7 @@
     <template #sider>
       <global-sider />
     </template>
-    <global-content @hide-main-overflow="setAddMainOverflowHidden" />
+    <global-content />
     <template #footer>
       <global-footer />
     </template>
@@ -36,7 +35,6 @@
 import AdminLayout from '@soybeanjs/vue-admin-layout';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
-import { useBoolean } from '@/hooks';
 import {
   GlobalBackTop,
   GlobalContent,
@@ -53,8 +51,6 @@ const app = useAppStore();
 const theme = useThemeStore();
 
 const { mode, isMobile, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
-
-const { bool: addMainOverflowHidden, setBool: setAddMainOverflowHidden } = useBoolean();
 </script>
 
 <style scoped></style>

src/layouts/common/GlobalContent/index.vue

@@ -4,13 +4,7 @@
     class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
   >
     <router-view v-slot="{ Component, route }">
-      <transition
+      <transition :name="theme.pageAnimateMode" mode="out-in" :appear="true">
-        :name="theme.pageAnimateMode"
-        mode="out-in"
-        :appear="true"
-        @before-leave="handleBeforeLeave"
-        @after-enter="handleAfterEnter"
-      >
         <keep-alive :include="routeStore.cacheRoutes">
           <component :is="Component" v-if="app.reloadFlag" :key="route.fullPath" />
         </keep-alive>
@@ -33,23 +27,9 @@ withDefaults(defineProps<Props>(), {
   showPadding: true
 });
 
-interface Emits {
-  /** 禁止主体溢出 */
-  (e: 'hide-main-overflow', hidden: boolean): void;
-}
-
-const emit = defineEmits<Emits>();
-
 const app = useAppStore();
 const theme = useThemeStore();
 const routeStore = useRouteStore();
-
-function handleBeforeLeave() {
-  emit('hide-main-overflow', true);
-}
-function handleAfterEnter() {
-  emit('hide-main-overflow', false);
-}
 </script>
 
 <style scoped></style>

src/styles/css/global.css

@@ -1,5 +1,6 @@
 @import './transition.css';
 @import './reset.css';
+@import './scrollbar.css';
 
 html, body, #app {
 	height: 100%;

src/styles/css/scrollbar.css

@@ -1,26 +1,53 @@
-/*---滚动条默认显示样式--*/
+html {
-::-webkit-scrollbar-thumb {
+	scrollbar-width: thin;
-  background-color: #e6e6e6;
+	scrollbar-color: #e1e1e1 transparent;
-  border-radius: 6px;
-}
-/*---鼠标点击滚动条显示样式--*/
-::-webkit-scrollbar-thumb:hover {
-  background-color: #e6e6e6;
-  border-radius: 6px;
-}
-/*---滚动条大小--*/
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
 }
 
+/*---滚动条默认显示样式--*/
+html::-webkit-scrollbar-thumb {
+  background-color: #e1e1e1;
+  border-radius: 8px;
+}
+/*---鼠标点击滚动条显示样式--*/
+html::-webkit-scrollbar-thumb:hover {
+  background-color: #e1e1e1;
+  border-radius: 8px;
+}
+/*---滚动条大小--*/
+html::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 /*---滚动框背景样式--*/
-::-webkit-scrollbar-track-piece {
+html::-webkit-scrollbar-track-piece {
   background-color: rgba(0, 0, 0, 0);
   border-radius: 0;
 }
 
-html {
+
+html.dark {
 	scrollbar-width: thin;
-	scrollbar-color: e6e6e6 transparent;
+	scrollbar-color: #555 transparent;
+}
+
+/*---滚动条默认显示样式--*/
+html.dark::-webkit-scrollbar-thumb {
+  background-color: #555;
+  border-radius: 8px;
+}
+/*---鼠标点击滚动条显示样式--*/
+html.dark::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+  border-radius: 8px;
+}
+/*---滚动条大小--*/
+html.dark::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/*---滚动框背景样式--*/
+html.dark::-webkit-scrollbar-track-piece {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 0;
 }