<template>
  <div id="app" class="h-screen bg-gray-50 flex">
    <!-- 侧边栏 -->
    <Sidebar />
    
    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col min-w-0">
      <router-view />
    </div>
    
    <!-- 报告抽屉 -->
    <ReportDrawer />
    
    <!-- 移动端遮罩层 -->
    <div
      v-if="mobileSidebarOpen"
      class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
      @click="toggleMobileSidebar"
    />
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/stores/app'
import Sidebar from '@/components/Sidebar.vue'
import ReportDrawer from '@/components/ReportDrawer.vue'

const appStore = useAppStore()
const { mobileSidebarOpen } = storeToRefs(appStore)
const { toggleMobileSidebar } = appStore
</script>
