perf(layout): 优化导航栏逻辑

1. 优化展开子菜单的逻辑
2. 设备分组由硬编码数据改为通过接口获取
3. 优化设备分组菜单的模板代码

src/layout/HvacAside.vue

@@ -1,19 +1,24 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
 import Simplebar from 'simplebar-vue';
 
 import SvgIcon from '@/components/SvgIcon.vue';
 import { dataCenterRoutes, opsCenterRoutes } from '@/router';
 import { t } from '@/i18n';
+import { getPageList } from '@/api';
 import { translateNavigation } from '@/utils';
 
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { DeviceGroupItem } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
+const menuRef = useTemplateRef('menu');
 const selectedKeys = ref<string[]>([route.path]);
 const openKeys = ref<string[]>([]);
+const deviceGroupList = ref<DeviceGroupItem[]>([]);
 
 const menuGroupList = computed(() => {
   return [
@@ -28,69 +33,54 @@ const menuGroupList = computed(() => {
   ];
 });
 
-type DeviceGroup = {
-  id: string;
-  name: string;
-  children?: DeviceGroup[];
+onMounted(async () => {
+  try {
+    const data = await getPageList();
+    deviceGroupList.value = data.filter((item) => item.deviceGroupChilds.length > 0);
+  } catch (err) {
+    if (err instanceof Error) {
+      message.error(err.message);
+    }
+
+    console.error(err);
+  }
+
+  openSelectedSubMenu();
+});
+
+const openSelectedSubMenu = () => {
+  setTimeout(() => {
+    const menuEl = menuRef.value?.$el as HTMLElement | undefined;
+    const selectedSubMenuEl = menuEl?.querySelector<HTMLElement>('.ant-menu-submenu-selected');
+    const selectedSubMenuId = selectedSubMenuEl?.dataset.submenuId;
+
+    if (selectedSubMenuId) {
+      openKeys.value.push(selectedSubMenuId);
+    }
+  }, 0);
 };
 
-const deviceGroupList: DeviceGroup[] = [
-  {
-    id: '1',
-    name: '空调总站房',
-    children: [
-      {
-        id: '1-1',
-        name: '一二期空调群控',
-      },
-      {
-        id: '1-2',
-        name: '三四期空调群控',
-      },
-    ],
-  },
-  {
-    id: '2',
-    name: '空调次站房',
-    children: [
-      {
-        id: '2-1',
-        name: '一二期空调群控',
-      },
-      {
-        id: '2-2',
-        name: '三四期空调群控',
-      },
-      {
-        id: '2-3',
-        name: '五期空调群控',
+const DEVICE_GROUP_ROUTE_PATH = '/ai-smart-ctrl/device-group';
+
+const getDeviceGroupMenuKey = (id: number) => {
+  return `${DEVICE_GROUP_ROUTE_PATH}/${id}`;
+};
+
+const handleMenuClick = (menu: MenuInfo) => {
+  const key = menu.key as string;
+
+  if (key.includes(DEVICE_GROUP_ROUTE_PATH)) {
+    router.push({
+      path: key,
+      query: {
+        ...route.query,
       },
-    ],
-  },
-  {
-    id: '3',
-    name: '空调次站房',
-  },
-  {
-    id: '4',
-    name: '空调次站房',
-  },
-  {
-    id: '5',
-    name: '空调次站房',
-  },
-];
-
-onMounted(() => {
-  const firstPath = route.path.split('/')[1];
-
-  if (firstPath) {
-    openKeys.value.push('/' + firstPath);
+    });
+
+    return;
   }
-});
 
-const handleMenuClick = ({ key }: MenuInfo) => {
-  router.push(key as string);
+  router.push(key);
 };
 
 const collapsed = ref<boolean>(false);
@@ -115,6 +105,7 @@ const toggleCollapsed = () => {
     </div>
     <Simplebar class="aside-scroll">
       <AMenu
+        ref="menu"
         class="aside-menu"
         v-model:selected-keys="selectedKeys"
         v-model:open-keys="openKeys"
@@ -123,20 +114,20 @@ const toggleCollapsed = () => {
       >
         <div class="aside-menu-category">{{ $t('common.aiCtrl') }}</div>
         <template v-for="item in deviceGroupList" :key="item.id">
-          <ASubMenu v-if="item.children?.length" :key="item.id" :title="item.name">
+          <ASubMenu v-if="item.deviceGroupChilds?.length" :key="getDeviceGroupMenuKey(item.id)" :title="item.groupName">
             <template #icon>
               <SvgIcon name="air-conditioning" />
             </template>
-            <AMenuItem v-for="subItem in item.children" :key="subItem.id" disabled>
-              {{ subItem.name }}
+            <AMenuItem v-for="subItem in item.deviceGroupChilds" :key="getDeviceGroupMenuKey(subItem.id)">
+              {{ subItem.groupName }}
             </AMenuItem>
           </ASubMenu>
           <template v-else>
-            <AMenuItem :key="item.id" :title="item.name" disabled>
+            <AMenuItem :key="getDeviceGroupMenuKey(item.id)" :title="item.groupName">
               <template #icon>
                 <SvgIcon name="air-conditioning" />
               </template>
-              {{ item.name }}
+              {{ item.groupName }}
             </AMenuItem>
           </template>
         </template>