<template>
  <div class="home">
    <!-- 顶部导航栏：key 随用户变化，账号切换时强制重挂载，菜单名称才会更新 -->
    <NavMenu :key="navMenuKey" />
    <div class="container">
      <!-- key 随登录用户变化，强制重渲染避免切换账号后页面残留旧数据 -->
      <RouterView :key="routerViewKey" />
    </div>
    <SideBar />
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import NavMenu from '@/components/NavMenu.vue'
import SideBar from '@/components/SideBar.vue'
import useUserStore from '@/store/user'

const userStore = useUserStore()
const userKey = computed(() => userStore.user?.id ?? 'guest')
const routerViewKey = userKey
const navMenuKey = userKey
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.container {
  flex: 1;
  padding: 0 50px 10px 10px;
  background-color: #f6f6f6;
  overflow: hidden;
}
</style>
