<template>
|
<PageWrapper dense contentFullHeight fixedHeight>
|
<div style="height: 100vh; border-inline-end: 1px solid rgb(5 5 5 / 6%)">
|
<div style="height: 15vh; padding: 20px 40px; text-align: center">
|
<span style="display: flex; justify-content: space-around">
|
<a-button shape="circle" size="large">
|
<MailOutlined />
|
</a-button>
|
<a-button shape="circle" size="large">
|
<UserOutlined />
|
</a-button>
|
</span>
|
<a-button
|
style="width: 100%; margin-top: 10px; padding: 0 30px"
|
type="primary"
|
size="large"
|
shape="round"
|
@click="$router.push('/email/edit')"
|
>
|
写信
|
</a-button>
|
</div>
|
|
<div class="menu-container">
|
<a-menu
|
id="email-left-nav"
|
v-model:open-keys="openKeys"
|
v-model:selected-keys="selectedKeys"
|
mode="inline"
|
:popupClassName="popupClassName"
|
>
|
<template v-for="item in items" :key="item.key">
|
<a-sub-menu v-if="item.children" :key="item.key">
|
<template #title>
|
<div class="my-display">
|
<span>{{ item.title }}</span
|
>
|
<!-- <span class="my-left" v-if="item.total > 0">{{ item.total }}</span> -->
|
</div>
|
</template>
|
<a-menu-item
|
style="display: flex; justify-content: space-between; padding-left: 28px"
|
v-for="(child, index) in item.children"
|
:key="index"
|
@click="handleClick(child)"
|
>
|
<div class="my-display">
|
<span>{{ child.title }}</span>
|
<span v-if="item.total > 0"> {{ child.total }}</span>
|
</div>
|
</a-menu-item>
|
</a-sub-menu>
|
<a-menu-item v-else :key="item.key" @click="handleClick(item)">
|
<div class="my-display">
|
<span>{{ item.title }}</span
|
>
|
<span class="my-left" v-if="item.total > 0">{{ item.total }}</span>
|
</div>
|
</a-menu-item>
|
</template>
|
</a-menu>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted } from 'vue';
|
import { PageWrapper } from '@/components/Page';
|
import { MailOutlined, UserOutlined } from '@ant-design/icons-vue';
|
import { getEmailModuleApi } from '@/api/email/userList';
|
import { useRouter } from 'vue-router';
|
|
const selectedKeys = ref<string[]>(['Index']);
|
const openKeys = ref<string[]>(['Inbox']);
|
const items = ref([]); // 定义 items 类型
|
|
const fnGetEmailModule = async () => {
|
try {
|
const res = await getEmailModuleApi();
|
items.value = convertRoutesToMenuItems(res.data);
|
} catch (error) {
|
console.error('获取邮箱模块失败:', error); // 处理错误
|
}
|
};
|
|
const convertRoutesToMenuItems = (routes: any[]) => {
|
return routes
|
.map((route) => {
|
if (route.children && route.children.length > 0) {
|
return {
|
key: route.key,
|
title: route.mailName,
|
total: route.total,
|
children: convertRoutesToMenuItems(route.children),
|
};
|
}
|
if (!route.hideMenu) {
|
return {
|
key: route.key,
|
title: route.mailName,
|
total: route.total,
|
};
|
}
|
})
|
.filter(Boolean); // 过滤掉 undefined
|
};
|
|
// 生命周期钩子，加载菜单数据
|
onMounted(() => {
|
fnGetEmailModule();
|
});
|
const routesConfig = {
|
InboxPage1: '/email/index',
|
receiver: '/email/Inbox/list',
|
};
|
// 点击事件处理
|
const router = useRouter();
|
const handleClick = (e: any) => {
|
console.log(e, '------4');
|
let matched = false;
|
const route = router.getRoutes() || [];
|
route.forEach((item) => {
|
if (item.name === e.key) {
|
router.push(item.path);
|
matched = true;
|
return; // 跳出当前循环
|
}
|
|
if (!matched) {
|
switch (e.key) {
|
case 'InboxPage1':
|
router.push(routesConfig[e.key]);
|
matched = true;
|
return; // 跳出当前循环
|
case 'receiver':
|
router.push(`${routesConfig[e.key]}?${e.title}`);
|
matched = true;
|
return; // 跳出当前循环
|
default:
|
// 处理默认情况，例如记录日志或抛出警告
|
console.warn(`Unknown key: ${e.key}`);
|
}
|
}
|
});
|
};
|
const popupClassName = {
|
display: 'flex',
|
'align-items': 'center',
|
'justify-content': 'space-between',
|
};
|
</script>
|
|
<style lang="less" scoped>
|
:deep(.ant-menu-inline) {
|
border-inline-end: 0 solid rgb(5 5 5 / 6%) !important;
|
}
|
|
.menu-container {
|
height: 70vh;
|
overflow: auto;
|
}
|
|
.my-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.my-left {
|
margin-left: 5px;
|
}
|
</style>
|
