<!-- 纵向布局作为基础布局 -->
<script setup lang="ts">
import Aside from '@/layouts/components/Aside/index.vue';
import Header from '@/layouts/components/Header/index.vue';
import TabsView from '@/layouts/components/TabsView/index.vue';
import LockScreen from '@/layouts/components/LockScreen.vue';
import { useTabbar } from '@/hooks/useTabbar';
import { useDesignStore } from '@/stores';
import { useInactivityTimer } from '@/hooks/useInactivityTimer';
import { useLockScreenStore } from '@/stores/modules/lockScreen';

const designStore = useDesignStore();
const lockStore = useLockScreenStore();

// 初始化标签页管理
const { handleClose, handleUnpin } = useTabbar();

// 初始化空闲超时自动锁屏
useInactivityTimer();
</script>

<template>
  <div class="layout">
    <!-- Sidebar -->
    <Aside />

    <!-- Main Content -->
    <div class="main-area">
      <!-- Header -->
      <Header />

      <!-- Tabs Bar -->
      <TabsView
        :show-icon="true"
        @close="handleClose"
        @unpin="handleUnpin"
      />

      <!-- Page Content -->
      <main class="page-content">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </main>
    </div>

    <!-- 锁屏 -->
    <LockScreen v-if="lockStore.isLocked" />
  </div>
</template>

<style lang="scss" scoped>
.layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
</style>
