<script setup>
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
import BottomDock from './components/BottomDock.vue'
import { useTransactionStore } from './stores/transactions'

const transactionStore = useTransactionStore()

onMounted(() => {
  transactionStore.ensureInitialized()
})
</script>

<template>
  <!-- 整体应用容器：居中展示移动端画布 -->
  <div class="min-h-screen bg-warmOffwhite text-stone-800 flex items-center justify-center">
    <div
      class="h-screen max-h-[844px] max-w-md w-full mx-auto bg-warmOffwhite shadow-2xl relative overflow-hidden flex flex-col"
    >
      <!-- 顶部状态栏占位 -->
      <div class="h-8 w-full shrink-0" />

      <!-- 主内容区域：由 vue-router 控制具体页面 -->
      <main class="flex-1 overflow-y-auto hide-scrollbar px-5 pt-2 pb-28 relative">
        <RouterView />
      </main>

      <!-- 底部 Dock 导航栏 -->
      <BottomDock />
    </div>
  </div>
</template>
