37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<script setup>
|
||
import { onMounted } from 'vue'
|
||
import { RouterView } from 'vue-router'
|
||
import BottomDock from './components/BottomDock.vue'
|
||
import AddEntryView from './views/AddEntryView.vue'
|
||
import { useTransactionStore } from './stores/transactions'
|
||
import { useUiStore } from './stores/ui'
|
||
|
||
const transactionStore = useTransactionStore()
|
||
const uiStore = useUiStore()
|
||
|
||
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"
|
||
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);"
|
||
>
|
||
<!-- 主内容区域：由 vue-router 控制具体页面 -->
|
||
<main class="flex-1 overflow-y-auto hide-scrollbar px-5 pt-2 pb-28 relative">
|
||
<RouterView />
|
||
</main>
|
||
|
||
<!-- 底部 Dock 导航 -->
|
||
<BottomDock />
|
||
|
||
<!-- 新增记录底部弹窗：在任意 Tab 上浮层显示 -->
|
||
<AddEntryView v-if="uiStore.addEntryVisible" />
|
||
</div>
|
||
</div>
|
||
</template>
|