304 lines
8.2 KiB
Vue
304 lines
8.2 KiB
Vue
<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';
|
||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||
import router from '@/router';
|
||
import { useRoute } from 'vue-router';
|
||
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
||
import { appRoutes } from '@/router/routes';
|
||
|
||
interface MenuItem {
|
||
name: string;
|
||
id: number;
|
||
children: Array<{
|
||
name: string;
|
||
}>;
|
||
}
|
||
|
||
const lists = ref<MenuItem[]>([]);
|
||
const sidebarStore = useSidebarStore();
|
||
const route = useRoute();
|
||
const exitAccountModalRef = ref(null);
|
||
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 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 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);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="navbar">
|
||
<div class="left-side">
|
||
<a-space class="cursor-pointer" @click="router.push('/')">
|
||
<img src="@/assets/logo.svg" alt="" />
|
||
</a-space>
|
||
</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-item>
|
||
</a-menu>
|
||
</div>
|
||
</div>
|
||
<ul class="right-side">
|
||
<li>
|
||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||
<a-avatar class="cursor-pointer" :size="32">
|
||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||
</a-avatar>
|
||
<template #content>
|
||
<div>
|
||
<a-doption>
|
||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||
<div class="flex items-center">
|
||
<img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
||
<span>管理中心</span>
|
||
</div>
|
||
<icon-right size="12" />
|
||
</a-space>
|
||
</a-doption>
|
||
<!-- <a-doption>
|
||
<a-space class="flex justify-between w-100%">
|
||
<div class="flex items-center">
|
||
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
||
<span>切换企业账号</span>
|
||
</div>
|
||
<icon-right size="12" />
|
||
</a-space>
|
||
</a-doption> -->
|
||
<a-doption>
|
||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||
<div class="flex items-center">
|
||
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
||
<span>退出登录</span>
|
||
</div>
|
||
<icon-right size="12" />
|
||
</a-space>
|
||
</a-doption>
|
||
</div>
|
||
</template>
|
||
</a-dropdown>
|
||
</li>
|
||
</ul>
|
||
<ExitAccountModal ref="exitAccountModalRef" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.navbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
background-color: var(--color-bg-2);
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
.left-side {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 20px;
|
||
}
|
||
.center-side {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
margin-left: 40px;
|
||
.menu-item-text {
|
||
color: var(--Text-2, #3c4043);
|
||
font-family: 'PuHuiTi-Medium';
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 22px;
|
||
}
|
||
:deep(.arco-menu) {
|
||
height: 100%;
|
||
.arco-menu-inner {
|
||
padding: 0 20px;
|
||
}
|
||
.arco-menu-item {
|
||
padding: 0;
|
||
position: relative;
|
||
&.arco-menu-selected {
|
||
.menu-item-text,
|
||
.arco-menu-selected-label {
|
||
color: #6d4cfe;
|
||
}
|
||
.arco-menu-selected-label {
|
||
background: var(--Brand-Brand-6, #6d4cfe);
|
||
height: 4px;
|
||
border-radius: 4px;
|
||
width: 50%;
|
||
position: absolute;
|
||
bottom: -8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.arco-icon-down {
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.arco-dropdown-open .arco-icon-down {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.cneter-tip {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: var(--color-text-1);
|
||
}
|
||
.menu-demo {
|
||
flex: 1;
|
||
}
|
||
.right-side {
|
||
display: flex;
|
||
padding-right: 20px;
|
||
list-style: none;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
}
|
||
a {
|
||
color: var(--color-text-1);
|
||
text-decoration: none;
|
||
}
|
||
.nav-btn {
|
||
border-color: rgb(var(--gray-2));
|
||
color: rgb(var(--gray-8));
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.layout-menu-item-dropdown,
|
||
.layout-avatar-dropdown {
|
||
.arco-dropdown {
|
||
border-radius: 8px;
|
||
border: 1px solid var(--BG-300, #e6e6e8);
|
||
background: var(--BG-white, #fff);
|
||
padding: 12px 0px;
|
||
.arco-dropdown-option {
|
||
padding: 0 12px;
|
||
margin-bottom: 4px;
|
||
&-content {
|
||
display: flex;
|
||
height: 40px;
|
||
width: 100%;
|
||
padding: 10px 24px;
|
||
align-items: center;
|
||
.menu-item-text {
|
||
color: var(--Text-2, #3c4043);
|
||
font-family: 'PuHuiTi-Regular';
|
||
font-size: 16px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 22px; /* 137.5% */
|
||
}
|
||
}
|
||
&:not(.arco-dropdown-option-disabled):hover {
|
||
background-color: transparent;
|
||
.arco-dropdown-option-content {
|
||
border-radius: 8px;
|
||
background: var(--BG-200, #f2f3f5);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.layout-avatar-dropdown {
|
||
width: 200px;
|
||
.arco-dropdown {
|
||
padding: 12px 4px;
|
||
.arco-dropdown-option {
|
||
padding: 0 !important;
|
||
&-content {
|
||
padding: 0 12px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|