renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构sidebar菜单块逻辑

Browse Source
This commit is contained in:
rd
2025-07-07 18:17:31 +08:00
parent 0fe45bb2b3
commit bd4c338f35
11 changed files with 163 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/_base/menu/use-menu-tree.ts
View File

@ -12,7 +12,7 @@ export default function useMenuTree() {
// const appStore = useAppStore();
const sidebarStore = useSidebarStore();
const appRoute = computed(() => {
const _filterRoutes = appRoutes.filter((v) => v.meta.id === sidebarStore.activeMenuId);
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
return _filterRoutes;
});
const menuTree = computed(() => {

129
src/components/_base/navbar/index.vue
View File

@ -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>