refactor(MobileScaffold): enhance layout structure and add nested check for safe area

src/mobile/components/MobileScaffold.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-[var(--center-bg-color)]">
+  <div class="bg-[var(--center-bg-color)] h-full w-full">
     <img v-if="bgmURL" :src="bgmURL" class="object-cover absolute top-0 left-0 w-screen h-screen dark:opacity-20" />
-    <div class="h-screen w-screen overflow-hidden flex flex-col relative">
+    <div class="h-full w-full overflow-hidden flex flex-col relative">
       <header class="shrink-0 box-border" :class="{ 'pt-[var(--safe-area-inset-top)]': safeAreaRef }">
         <slot name="header"></slot>
       </header>
@@ -9,6 +9,7 @@
         <slot name="container"></slot>
       </div>
       <footer
+        v-if="!nestedSelf"
         class="shrink-0 footer box-border"
         :class="{ 'pb-[var(--safe-area-inset-bottom)]': slots.footer == void 0 }">
         <slot name="footer" class="pb-[var(--safe-area-inset-bottom)] box-border" />
@@ -35,9 +36,15 @@ const bgmURL = computed(() => {
   return typeof background === 'boolean' && background ? bgImg : background
 })
 
-const safeAreaRef = useSafeArea(() => safeArea)
+// 检查当前组件是否被嵌套在另一个 MobileScaffold 内部
+const useNestedSelfCheck = () => {
+  const selfIsParent = inject('removeSafeArea')
+  return selfIsParent !== void 0
+}
 
-function useSafeArea(getter: () => boolean) {
+const nestedSelf = useNestedSelfCheck()
+
+const useSafeArea = (getter: () => boolean) => {
   const safeArea = ref(true)
   // 移除脚手架提供的安全区域样式，交由组件自己控制
   const removeSafeArea = () => {
@@ -46,6 +53,8 @@ function useSafeArea(getter: () => boolean) {
   provide('removeSafeArea', removeSafeArea)
   return computed(() => safeArea.value && getter())
 }
+
+const safeAreaRef = useSafeArea(() => safeArea)
 </script>
 
 <style lang="scss" scoped>