feat: 重构sidebar菜单块逻辑

src/components/_base/navbar/index.vue

@@ -1,88 +1,43 @@
-<script lang="ts" setup>
-import { useAppStore } from '@/stores';
-import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
-import { fetchMenusTree } from '@/api/all';
-import { handleUserLogout } from '@/utils/user';
-import { fetchLogOut } from '@/api/all/login';
+<script setup>
+// import { useAppStore } from '@/stores';
+// import { useEnterpriseStore } from '@/stores/modules/enterprise';
+// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
+// import { handleUserLogout } from '@/utils/user';
+// import { fetchLogOut } from '@/api/all/login';
 import { useSidebarStore } from '@/stores/modules/side-bar';
-import { MENU_GROUP_IDS } from '@/router/constants';
+// import { MENU_GROUP_IDS } from '@/router/constants';
 import router from '@/router';
-import { useRoute } from 'vue-router';
+// import { useRoute } from 'vue-router';
 import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
-import { appRoutes } from '@/router/routes';
+// import { appRoutes } from '@/router/routes';
+// import { MENU_LIST } from './constants';
 
-interface MenuItem {
-  name: string;
-  id: number;
-  children: Array<{
-    name: string;
-  }>;
-}
-
-const lists = ref<MenuItem[]>([]);
 const sidebarStore = useSidebarStore();
-const route = useRoute();
+// const enterpriseStore = useEnterpriseStore();
+// const route = useRoute();
 const exitAccountModalRef = ref(null);
+// const selectedKey = ref([]);
+
+// const enterpriseInfo = enterpriseStore.getEnterpriseInfo();
 const selectedKey = computed(() => {
-  // 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
-  if (route.name === 'Home' || route.path === '/') {
-    return [`${MENU_GROUP_IDS.WORK_BENCH_ID}`];
-  }
-  // 其他页面，activeMenuId 作为 key
   return [String(sidebarStore.activeMenuId)];
 });
+const menuList = computed(() => {
+  return sidebarStore.menuList;
+});
 
 const clickExit = async () => {
   exitAccountModalRef.value?.open();
 };
-const getMenus = async () => {
-  const res = await fetchMenusTree();
-  if (res.code === 200) {
-    lists.value = res.data;
-  }
-};
-onMounted(() => {
-  getMenus();
-});
-const appStore = useAppStore();
+
+// const appStore = useAppStore();
 
 const setServerMenu = () => {
   router.push('/management/person');
 };
-const handleSelect = (index: any) => {
-  if (index === 0) {
-    router.push('/');
-  } else {
-    router.push('/dataEngine/hotTranslation');
-  }
-};
 
-const flattenRoutes = (routes: any, parentPath = ''): any[] => {
-  let result: any[] = [];
-  for (const route of routes) {
-    const fullPath = route.path.startsWith('/') ? route.path : parentPath.replace(/\/$/, '') + '/' + route.path;
-    if (route.children && route.children.length) {
-      result = result.concat(flattenRoutes(route.children, fullPath));
-    } else {
-      result.push({ ...route, fullPath });
-    }
-  }
-  return result;
-};
-
-const handleDopdownClick = (index: any, ind: any) => {
-  const { children } = lists.value[index];
-  const indPath = children[ind];
-
-  const allChildren = flattenRoutes(appRoutes);
-
-  const target = allChildren.find((item) => item.meta && item.meta.menuId === indPath.id);
-
-  if (target) {
-    router.push(target.fullPath);
-  } else {
-    console.warn('未找到对应的菜单路由', indPath.id);
-  }
+const handleDopdownClick = (item) => {
+  router.push({ name: item.pathName });
 };
 </script>
 
@@ -95,26 +50,26 @@ const handleDopdownClick = (index: any, ind: any) => {
     </div>
     <div class="center-side">
       <div class="menu-demo h-100%">
-        <a-menu
-          mode="horizontal"
-          :selected-keys="selectedKey"
-          :default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
-        >
-          <a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
-            <span class="menu-item-text">工作台</span>
-          </a-menu-item>
-          <a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
-            <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
-              <a-button>
-                <span class="menu-item-text mr-2px"> {{ item.name }}</span>
-                <icon-caret-down size="16" class="arco-icon-down !mr-0" />
-              </a-button>
-              <template #content>
-                <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
-                  <span class="menu-item-text"> {{ child.name }}</span>
-                </a-doption>
-              </template>
-            </a-dropdown>
+        <a-menu mode="horizontal" :selected-keys="selectedKey">
+          <a-menu-item v-for="item in menuList" :key="String(item.id)">
+            <template v-if="item.children">
+              <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
+                <a-button>
+                  <span class="menu-item-text mr-2px"> {{ item.name }}</span>
+                  <icon-caret-down size="16" class="arco-icon-down !mr-0" />
+                </a-button>
+                <template #content>
+                  <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
+                    <span class="menu-item-text"> {{ child.name }}</span>
+                  </a-doption>
+                </template>
+              </a-dropdown>
+            </template>
+            <template v-else>
+              <a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
+                <span class="menu-item-text"> {{ item.name }}</span>
+              </a-menu-item>
+            </template>
           </a-menu-item>
         </a-menu>
       </div>