feat: 进入查询菜单信息

src/apis/menu.ts

@@ -8,6 +8,7 @@ import {
   MenuListData,
 } from '@models';
 import {request} from './network';
+import {storeToRefs, useUserStore} from '@stores';
 
 const BASE_URL = '/menu';
 
@@ -69,3 +70,18 @@ export function getAllMenu(): BaseResult<AllRoleListData[]> {
     url: BASE_URL + '/getMenu',
   });
 }
+
+/** 根据用户查询菜单列表 */
+export function getMenuByUserId(
+  signal?: AbortSignal,
+): BaseResult<MenuListData> {
+  const userStore = useUserStore();
+  const {user} = storeToRefs(userStore);
+
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/getUserMenuPc',
+    data: {userId: user.value.id},
+    signal,
+  });
+}

src/components/suspense-loading/index.tsx

@@ -10,7 +10,7 @@ export default defineComponent({
   setup(props) {
     return () => (
       <div class="ld-suspense-loading">
-        <NSpin description={props.msg ?? 'loading...'} />
+        <NSpin description={props.msg} />
       </div>
     );
   },

src/locales/home.ts

@@ -1,5 +1,6 @@
 export default {
   zh: {
+    loading: '正在查询菜单',
     menuBtn: {supplier: '供应商管理系统'},
     contextMenu: {
       close: '关闭当前标签',
@@ -26,6 +27,7 @@ export default {
     },
   },
   ko: {
+    loading: '正在查询菜单',
     menuBtn: {supplier: '供应商管理系统'},
     contextMenu: {
       close: '关闭当前标签',

src/pages/home/Home.vue

@@ -0,0 +1,77 @@
+<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>

src/pages/home/index.vue

@@ -1,64 +1,20 @@
-<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';
+<script setup lang='ts'>
+import Home from './Home.vue';
+import {LDSuspenseLoading} from '@components';
+import {useI18n} from 'vue-i18n';
 
-defineOptions({
-  name: 'Home',
-});
-
-const route = useRoute();
-const tabStore = useTabStore();
-
-// 只保留tab上有的页面 销毁的不考虑
-const keepaliveKeys = computed(function() {
-  return tabStore.tabList.map(function(val) {
-    return RouteNameMap.get(val.url);
-  });
-});
+defineOptions({name: 'HomeWrapper'});
 
+const {t} = useI18n();
 </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>
+  <Suspense>
+    <template #fallback>
+      <main style="width: 100vw; height: 100vh;">
+        <LDSuspenseLoading :msg="t('home.loading')" />
+      </main>
+    </template>
+    <Home />
+  </Suspense>
 </template>
-
-<style scoped>
-@import './index.css';
-</style>