fix: 修复在移动端侧边展开的问题

src/App.vue

@@ -50,6 +50,8 @@ provide(layoutInjectionKey, {
   layoutSlideDirection,
   setLayoutSlideDirection,
   isSidebarColResizing,
+  mobileLeftAsideWidth: ref(0),
+  mobileRightAsideWidth: ref(0),
 })
 </script>
 

src/injection/interface.ts

@@ -15,4 +15,6 @@ export interface LayoutProvider {
   layoutSlideDirection: Ref<LayoutSlideDirection>
   setLayoutSlideDirection: (direction: LayoutSlideDirection) => void
   isSidebarColResizing: Ref<boolean>
+  mobileLeftAsideWidth: Ref<number>
+  mobileRightAsideWidth: Ref<number>
 }

src/layout/index.vue

@@ -45,13 +45,18 @@ const { tabs } = toRefsTabsStore()
 
 const { isMaxSm } = useInjection(mediaQueryInjectionKey)
 
-const { layoutSlideDirection, setLayoutSlideDirection } = useInjection(layoutInjectionKey)
+const {
+  layoutSlideDirection,
+  setLayoutSlideDirection,
+  mobileLeftAsideWidth,
+  mobileRightAsideWidth,
+} = useInjection(layoutInjectionKey)
 
 const layoutTranslateOffset = computed(() => {
   return layoutSlideDirection.value === 'right'
-    ? sidebarMenu.value.maxWidth || 0
+    ? mobileLeftAsideWidth.value || 0
     : layoutSlideDirection.value === 'left'
-      ? -(sidebarMenu.value.width || 0)
+      ? -(mobileRightAsideWidth.value || 0)
       : 0
 })
 

src/layout/mobile/MobileLeftAside.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+
 import { useInjection } from '@/composables'
 import { layoutInjectionKey } from '@/injection'
 
@@ -6,10 +8,17 @@ import SidebarMenu from '../aside/SidebarMenu.vue'
 import SidebarUserPanel from '../aside/SidebarUserPanel.vue'
 import Logo from '../header/logo/index.vue'
 
-const { layoutSlideDirection } = useInjection(layoutInjectionKey)
+const { layoutSlideDirection, mobileLeftAsideWidth } = useInjection(layoutInjectionKey)
+
+const mobileLeftAsideRef = useTemplateRef<HTMLElement>('mobileLeftAside')
+
+onMounted(() => {
+  if (mobileLeftAsideRef.value) mobileLeftAsideWidth.value = mobileLeftAsideRef.value.clientWidth
+})
 </script>
 <template>
   <div
+    ref="mobileLeftAside"
     class="absolute top-0 left-0 flex h-svh flex-col gap-y-4 pt-6 pb-4 transition-[translate]"
     :class="{
       '-translate-x-full': layoutSlideDirection !== 'right',

src/layout/mobile/MobileRightAside.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { onMounted, useTemplateRef } from 'vue'
+
 import { ButtonAnimationProvider } from '@/components'
 import { useInjection } from '@/composables'
 import { layoutInjectionKey } from '@/injection'
 
 import Action from '../header/action/index.vue'
 
-const { layoutSlideDirection } = useInjection(layoutInjectionKey)
+const { layoutSlideDirection, mobileRightAsideWidth } = useInjection(layoutInjectionKey)
+const mobileRightAsideRef = useTemplateRef<HTMLElement>('mobileRightAside')
+onMounted(() => {
+  if (mobileRightAsideRef.value) mobileRightAsideWidth.value = mobileRightAsideRef.value.clientWidth
+})
 </script>
 <template>
   <div
+    ref="mobileRightAside"
     class="absolute top-0 right-0 h-svh p-4 transition-[translate]"
     :class="{
       'translate-x-full': layoutSlideDirection !== 'left',