xpyy-scm/src/pages/home/Home.vue

<script setup lang="ts">
import logo from '@assets/images/logo.webp';
import MenuBtnGroup from './menu-btn-group/index.vue';
import User from './user/index.vue';
import Local from './local/index.vue';
import Menu from './menu/index.vue';
import {NLayout, NLayoutContent, NScrollbar} from 'naive-ui';
import TabList from './tab/index.vue';
import {RouterView, useRoute} from 'vue-router';
import {computed} from 'vue';
import {useTabStore} from '@stores';
import {RouteNameMap} from '@routes';
import {useQuery} from '@tanstack/vue-query';
import {getMenuByUserId} from '@apis';

defineOptions({
  name: 'Home',
});

const {suspense} = useQuery({
  queryKey: [getMenuByUserId.name],
  async queryFn({signal}) {
    const data = await getMenuByUserId(signal);
    return data;
  },
  suspense: true,
});

await suspense();

const route = useRoute();
const tabStore = useTabStore();

// 只保留tab上有的页面 销毁的不考虑
const keepaliveKeys = computed(function() {
  return tabStore.tabList.map(function(val) {
    return RouteNameMap.get(val.url);
  });
});

</script>

<template>
  <div class="container">
    <header>
      <section class="logo" @click="tabStore.setActiveKey('-1')">
        <img :src="logo" alt="logo" />
        <h1 v-t="'common.title'" />
      </section>
      <MenuBtnGroup />
      <User />
      <Local />
    </header>

    <NLayout class="content" hasSider>
      <Menu />
      <NLayoutContent>
        <section class="content-info">
          <TabList />
          <NScrollbar>
            <div class="content-main">
              <RouterView #="{Component}">
                <KeepAlive :include="keepaliveKeys">
                  <component :is="Component" :key="route.path" />
                </KeepAlive>
              </RouterView>
            </div>
          </NScrollbar>
        </section>
      </NLayoutContent>
    </NLayout>
  </div>
</template>

<style scoped>
@import './index.css';
</style>