fix: add menu type judgment

buqiyuan · Mar 28, 2022 · 144a539 · 144a539
1 parent ff1da5e
commit 144a539
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 36 deletions.
diff --git a/src/api/account/model.d.ts b/src/api/account/model.d.ts
@@ -7,7 +7,8 @@ declare namespace API {
     name: string;
     router: string;
     perms: string;
-    type: number;
+    /** 当前菜单类型 0: 目录 | 1: 菜单 | 2: 权限 */
+    type: 0 | 1 | 2;
     icon: string;
     orderNum: number;
     viewPath: string;

diff --git a/src/layout/menu/menu-item.vue b/src/layout/menu/menu-item.vue
@@ -1,29 +1,27 @@
 <template>
-  <template v-if="!props.menuInfo?.meta?.hideInMenu">
-    <!-- 目录 -->
-    <Menu.SubMenu
-      v-if="props.menuInfo?.children?.length"
-      :key="props.menuInfo?.name"
-      v-bind="$attrs"
-    >
-      <template #title>
-        <span>
-          <icon-font :type="props.menuInfo.meta?.icon" />
-          <TitleI18n :title="props.menuInfo?.meta?.title" />
-        </span>
-      </template>
-      <template v-for="item in menuChildren" :key="item.name">
-        <!-- 递归生成菜单 -->
-        <MyMenuItem :menu-info="item" />
-      </template>
-    </Menu.SubMenu>
-    <!-- 菜单 -->
-    <template v-else>
-      <Menu.Item :key="props.menuInfo?.name">
-        <icon-font :type="props.menuInfo?.meta?.icon" />
+  <!-- 目录 -->
+  <Menu.SubMenu
+    v-if="props.menuInfo?.meta?.type === 0 || props.menuInfo?.children?.length"
+    :key="props.menuInfo?.name"
+    v-bind="$attrs"
+  >
+    <template #title>
+      <span>
+        <icon-font :type="props.menuInfo.meta?.icon" />
         <TitleI18n :title="props.menuInfo?.meta?.title" />
-      </Menu.Item>
+      </span>
     </template>
+    <template v-for="item in menuChildren" :key="item.name || item.fullPath">
+      <!-- 递归生成菜单 -->
+      <MyMenuItem :menu-info="item" />
+    </template>
+  </Menu.SubMenu>
+  <!-- 菜单 -->
+  <template v-else>
+    <Menu.Item :key="props.menuInfo?.name">
+      <icon-font :type="props.menuInfo?.meta?.icon" />
+      <TitleI18n :title="props.menuInfo?.meta?.title" />
+    </Menu.Item>
   </template>
 </template>
 
@@ -44,11 +42,11 @@
     },
   });
 
-  const menuChildren = computed(() =>
-    [...(props.menuInfo?.children || [])].sort(
-      (a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0),
-    ),
-  );
+  const menuChildren = computed(() => {
+    return [...(props.menuInfo?.children || [])]
+      .filter((n) => !n.meta?.hideInMenu)
+      .sort((a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0));
+  });
 </script>
 
 <style scoped></style>
diff --git a/src/layout/menu/menu.vue b/src/layout/menu/menu.vue
@@ -9,7 +9,7 @@
       collapsible
       @click="clickMenuItem"
     >
-      <template v-for="item in menus" :key="item.name">
+      <template v-for="item in menus" :key="item.name || item.fullPath">
         <MenuItem :menu-info="item" />
       </template>
     </Menu>
@@ -39,9 +39,11 @@
     selectedKeys: [currentRoute.name],
   });
 
-  const menus = computed(() =>
-    [...userStore.menus].sort((a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0)),
-  );
+  const menus = computed(() => {
+    return [...userStore.menus]
+      .filter((n) => !n.meta?.hideInMenu)
+      .sort((a, b) => (a?.meta?.orderNum || 0) - (b?.meta?.orderNum || 0));
+  });
   console.log('menus', menus.value);
 
   // 根据activeMenu获取指定的menu

diff --git a/src/router/generator-router.tsx b/src/router/generator-router.tsx
@@ -49,6 +49,7 @@ export function filterAsyncRoute(
         meta: {
           orderNum,
           title: name,
+          type: item.type,
           perms: [],
           icon,
           namePath: lastNamePath.concat(fullPath),

diff --git a/src/views/dashboard/welcome/index.vue b/src/views/dashboard/welcome/index.vue
@@ -11,17 +11,22 @@
       <Descriptions.Item label="网络状态">
         <Badge :status="online ? 'processing' : 'default'" :text="online ? '在线' : '离线'" />
       </Descriptions.Item>
+      <Descriptions.Item label="WebSocket连接情况">
+        <Badge :status="statusTextColor" :text="statusText" />
+      </Descriptions.Item>
     </Descriptions>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, watchEffect } from 'vue';
+  import { computed, ref, watchEffect } from 'vue';
   import { Descriptions, Badge } from 'ant-design-vue';
   import BrowserType from '@/utils/browser-type';
   import { useBattery } from '@/hooks/useBattery';
   import { useOnline } from '@/hooks/useOnline';
   import { useUserStore } from '@/store/modules/user';
+  import { useWsStore } from '@/store/modules/ws';
+  import { SocketStatus } from '@/core/socket/socket-io';
 
   defineOptions({
     name: 'DashboardWelcome',
@@ -30,13 +35,34 @@
   // import performanceMonitor from '@/utils/performanceMonitor'
 
   const loginIp = useUserStore().userInfo?.loginIp;
+  const wsStore = useWsStore();
   // 是否联网
   const { online } = useOnline();
   // 获取电池信息
   const { battery, batteryStatus, calcDischargingTime } = useBattery();
   // 获取浏览器信息
   const browserInfo = ref(BrowserType('zh-cn'));
 
+  const statusText = computed(() => {
+    if (wsStore.status === SocketStatus.CONNECTED) {
+      return '正常';
+    } else if (wsStore.status === SocketStatus.CONNECTING) {
+      return '连接中...';
+    } else {
+      return '已断开';
+    }
+  });
+
+  const statusTextColor = computed(() => {
+    if (wsStore.status === SocketStatus.CONNECTED) {
+      return 'success';
+    } else if (wsStore.status === SocketStatus.CONNECTING) {
+      return 'warning';
+    } else {
+      return 'error';
+    }
+  });
+
   watchEffect(() => {
     Object.assign(browserInfo.value, {
       距离电池充满需要:

diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
@@ -12,8 +12,8 @@ declare module 'vue-router' {
   interface RouteMeta extends VRouteMeta {
     /** 标题 */
     title: string | Title18n;
-    /** 当前路由是否需要权限验证 */
-    isAuth?: boolean;
+    /** 当前菜单类型 0: 目录 | 1: 菜单 | 2: 权限 */
+    type?: 0 | 1 | 2;
     /** 当前路由权限 */
     perms?: PermissionType[];
     /** 是否需要缓存 */