<template>
|
<PageWrapper dense contentFullHeight fixedHeight>
|
<div>
|
<div class="header-container">
|
<span class="button-group">
|
<a-button shape="circle" size="large">
|
<MailOutlined />
|
</a-button>
|
<a-button shape="circle" size="large">
|
<UserOutlined />
|
</a-button>
|
</span>
|
<a-button
|
class="write-button"
|
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 menuItems" :key="item.key">
|
<render-menu-item :item="item" @click="handleClick" />
|
</template>
|
</a-menu>
|
<a-divider />
|
<a-menu
|
id="email-left-nav2"
|
v-model:open-keys="openKeys"
|
v-model:selected-keys="selectedKeys"
|
mode="inline"
|
:popupClassName="popupClassName"
|
>
|
<template v-for="item in menuItems2" :key="item.key">
|
<render-menu-item :item="item" @click="handleClick" />
|
</template>
|
</a-menu>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, computed } from 'vue';
|
import { PageWrapper } from '@/components/Page';
|
import { MailOutlined, UserOutlined } from '@ant-design/icons-vue';
|
import { getEmailModuleApi, getEmailModuleBelowApi } from '@/api/email/userList';
|
import { useRouter } from 'vue-router';
|
|
interface MenuItem {
|
key: string;
|
title: string;
|
total?: number;
|
children?: MenuItem[];
|
}
|
|
const selectedKeys = ref<string[]>(['Index']);
|
const openKeys = ref<string[]>(['Inbox']);
|
const items = ref<MenuItem[]>([]);
|
const items2 = ref<MenuItem[]>([]);
|
|
const fetchEmailModules = async () => {
|
try {
|
const [res, res2] = await Promise.all([getEmailModuleApi(), getEmailModuleBelowApi()]);
|
items.value = convertRoutesToMenuItems(res.data);
|
items2.value = convertRoutesToMenuItems2(res2.data);
|
} catch (error) {
|
console.error('获取邮箱模块失败:', error);
|
}
|
};
|
|
const convertRoutesToMenuItems = (routes: any[]): MenuItem[] => {
|
return routes
|
.map(route => ({
|
key: route.key,
|
title: route.mailName,
|
total: route.total,
|
children: route.children ? convertRoutesToMenuItems(route.children) : undefined,
|
}))
|
.filter(Boolean) as MenuItem[];
|
};
|
|
const convertRoutesToMenuItems2 = (routes: any[]): MenuItem[] => {
|
return routes
|
.map(route => ({
|
key: route.key,
|
title: route.name,
|
total: route.number,
|
children: route.list ? convertRoutesToMenuItems2(route.list) : undefined,
|
}))
|
.filter(Boolean) as MenuItem[];
|
};
|
|
onMounted(fetchEmailModules);
|
|
const routesConfig = {
|
InboxPage1: '/email/index',
|
receiver: '/email/Inbox/list',
|
sender: '/email/outbox/list',
|
IndexPage1: '/email/outbox',
|
};
|
|
const router = useRouter();
|
const handleClick = (item: MenuItem) => {
|
const routePath = routesConfig[item.key] || router.getRoutes().find(r => r.name === item.key)?.path;
|
if (routePath) {
|
router.push(routePath);
|
} else {
|
console.warn(`Unknown key: ${item.key}`);
|
}
|
};
|
|
const popupClassName = {
|
display: 'flex',
|
'align-items': 'center',
|
'justify-content': 'space-between',
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.header-container {
|
height: 15vh;
|
padding: 20px 40px;
|
text-align: center;
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.write-button {
|
width: 100%;
|
margin-top: 10px;
|
padding: 0 30px;
|
}
|
|
.menu-container {
|
height: 70vh;
|
overflow: auto;
|
}
|
|
.my-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.my-left {
|
margin-left: 5px;
|
}
|
</style>
|
