styles(layout): 优化布局样式

mineadmin · Nov 17, 2024 · d53817b · d53817b
1 parent 321e507
commit d53817b
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 22 deletions.
diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
@@ -21,8 +21,8 @@ export default defineComponent({
         <Transition name="mine-header">
           {settingStore.showMineHeader() && (
             <div class="mine-header-main hidden lg:flex">
-              <Logo class="ml-6" />
-              <div class="ml-6 w-full">
+              <Logo class="ml-2 overflow-hidden !w-[var(--mine-g-sub-aside-width)]" />
+              <div class="w-[calc(100%-var(--mine-g-sub-aside-width))]">
                 { settingStore.getSettings('app').layout === 'mixed' && <MainAside /> }
               </div>
             </div>

diff --git a/web/src/layouts/components/main-aside/index.tsx b/web/src/layouts/components/main-aside/index.tsx
@@ -26,21 +26,31 @@ export default defineComponent ({
     const mainAsideRef = ref()
     const shadowTop = ref<boolean>(false)
     const shadowBottom = ref<boolean>(false)
+    const shadowLeft = ref<boolean>(false)
+    const shadowRight = ref<boolean>(false)
 
     function onAsideScroll() {
+      console.log(11111)
       const scrollTop = mainAsideRef.value.scrollTop
+      const scrollLeft = mainAsideRef.value.scrollLeft
       shadowTop.value = scrollTop > 0
+      shadowLeft.value = scrollLeft > 0
       const clientHeight = mainAsideRef.value.clientHeight
       const scrollHeight = mainAsideRef.value.scrollHeight
+      const clientWidth = mainAsideRef.value.clientWidth
+      const scrollWidth = mainAsideRef.value.scrollWidth
       shadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
+      shadowRight.value = Math.ceil(scrollLeft + clientWidth) < scrollWidth
     }
     const asideListClass = computed(() => {
       return {
         'mine-main-aside-list': true,
-        'shadow-top': shadowTop.value,
-        'shadow-bottom': shadowBottom.value,
-        'pt-2': !showMineHeader(),
-        'flex gap-x-2 px-2 items-center': showMineHeader(),
+        'shadow-top': shadowTop.value && !showMineHeader(),
+        'shadow-bottom': shadowBottom.value && !showMineHeader(),
+        'shadow-left': shadowLeft.value && showMineHeader(),
+        'shadow-right': shadowRight.value && showMineHeader(),
+        'pt-2 overflow-y-auto': !showMineHeader(),
+        'flex gap-x-2 px-2 items-center overflow-x-auto': showMineHeader(),
       }
     })
     const goToAppoint = async (e: any, route: MineRoute.routeRecord) => {
@@ -68,7 +78,7 @@ export default defineComponent ({
               ref={mainAsideRef}
               class={asideListClass.value}
               onScroll={onAsideScroll}
-              style={`${showMineHeader() ? 'width: calc(100% - 110px) !important;' : ''}`}
+              style={`${showMineHeader() ? 'width: calc(100% - 100px) !important;' : ''}`}
             >
               {menuStore.topMenu.map((menu: MineRoute.routeRecord, _: number) => (
                 <a
@@ -80,7 +90,7 @@ export default defineComponent ({
                     'w-[50%] max-w-[50%]': !mainAsideSetting.showIcon,
                     'h-[35px]': !mainAsideSetting.showIcon,
                     'mx-auto mb-1.5 gap-y-0.5 px-1 py-1 block': !showMineHeader(),
-                    '!w-auto flex items-center px-2 h-11 gap-x-1': showMineHeader(),
+                    'min-w-100px justify-center !w-auto flex items-center px-2 h-11 gap-x-1': showMineHeader(),
                   }}
                   title={menu?.meta?.i18n ? useTrans(menu.meta?.i18n) : menu?.meta?.title}
                   onClick={async (e: any) => await goToAppoint(e, menu)}
@@ -104,7 +114,12 @@ export default defineComponent ({
                 </a>
               ))}
             </div>
-            <div class="flex items-center justify-center gap-x-3">
+            <div
+              class={{
+                'flex items-center justify-center gap-x-2': true,
+                'ml-1.5': showMineHeader(),
+              }}
+            >
               {
                 router.hasRoute('MineAppStoreRoute')
                 && (

diff --git a/web/src/layouts/components/menu/item.tsx b/web/src/layouts/components/menu/item.tsx
@@ -30,10 +30,10 @@ export default defineComponent({
     const route = useRoute()
 
     const parentActive = computed(() => {
-      if (!route?.meta?.breadcrumb || !route.meta.breadcrumb.length) {
+      if (!route?.meta?.breadcrumb || !route.meta.breadcrumb!.length) {
         return false
       }
-      return route.meta.breadcrumb.some(breadcrumb => breadcrumb.name === item.name)
+      return route.meta.breadcrumb?.some((breadcrumb: any) => breadcrumb.name === item.name)
     })
 
     const isItemActive = computed(() => {

diff --git a/web/src/layouts/style/index.scss b/web/src/layouts/style/index.scss
@@ -132,7 +132,11 @@ body.mine-aside-dark {
   .mine-menu-link, .mine-menu-link:hover, .mine-menu-link.active {
     color: #E5E7EB;
   }
-
+  .mine-menu-item.active {
+    .parentActive {
+      @apply text-white;
+    }
+  }
   .mine-menu-link:hover {
     background-color: rgb(var(--ui-primary)/30%);
     color: #fff !important;

diff --git a/web/src/layouts/style/main-aside.scss b/web/src/layouts/style/main-aside.scss
@@ -17,7 +17,7 @@
 }
 
 .mine-main-aside-list {
-  @apply h-full overflow-y-auto transition-shadow-300;
+  @apply h-full transition-shadow-300;
 
   overscroll-behavior: contain;
   // firefox隐藏滚动条
@@ -35,10 +35,22 @@
     box-shadow: inset 0 0 0 transparent, inset 0 -10px 10px -10px var(--mine-g-box-shadow-color);
   }
 
+  &.shadow-left {
+    box-shadow: inset 10px 0 10px -10px var(--mine-g-box-shadow-color), inset 0 0 0 transparent;
+  }
+
+  &.shadow-right {
+    box-shadow: inset 0 0 0 transparent, inset -10px 0px 10px -10px var(--mine-g-box-shadow-color);
+  }
+
   &.shadow-top.shadow-bottom {
     box-shadow: inset 0 10px 10px -10px var(--mine-g-box-shadow-color), inset 0 -10px 10px -10px var(--mine-g-box-shadow-color);
   }
 
+  &.shadow-left.shadow-right {
+    box-shadow: inset 10px 0 10px -10px var(--mine-g-box-shadow-color), inset -10px 0px 10px -10px var(--mine-g-box-shadow-color);
+  }
+
   & a {
     @apply
       rounded-md

diff --git a/web/src/store/modules/useMenuStore.ts b/web/src/store/modules/useMenuStore.ts
@@ -42,21 +42,26 @@ const useMenuStore = defineStore(
       )
     }
 
+    function setTopMenu() {
+      watchRoute.value = route as MineRoute.routeRecord
+      if (route.matched[1] && route.matched[1].meta && route.matched[1].meta.breadcrumb) {
+        const breadcrumb = route.matched[1].meta.breadcrumb as MineRoute.routeRecord[]
+        activeTopMenu.value = breadcrumb.find((item, index) => index === 0)
+      }
+      else {
+        activeTopMenu.value = undefined
+      }
+    }
+
     function init() {
+      setTopMenu()
+
       watch((): any => routeStore.routesRaw, (routesRaw: MineRoute.routeRecord[]) => {
         topMenu.value = routesRaw.find((route: any): boolean => route.path === '/')?.children as MineRoute.routeRecord[] ?? []
       }, { immediate: true, deep: true })
 
       watch((): any => route.name, async (newName: string, oldName: string) => {
-        watchRoute.value = route as MineRoute.routeRecord
-        if (route.matched[1] && route.matched[1].meta && route.matched[1].meta.breadcrumb) {
-          const breadcrumb = route.matched[1].meta.breadcrumb as MineRoute.routeRecord[]
-          activeTopMenu.value = breadcrumb.find((item, index) => index === 0)
-        }
-        else {
-          activeTopMenu.value = undefined
-        }
-
+        setTopMenu()
         const newRoute = router.getRoutes().find((route: any): boolean => route.name === newName)
         const oldRoute = router.getRoutes().find((route: any): boolean => route.name === oldName)