| 提交 | 用户 | age | ||
| 28c484 | 1 | <template> |
| 00fe0e | 2 | <PageWrapper dense contentFullHeight fixedHeight> |
| 67287b | 3 | <div style="height: 100vh; border-inline-end: 1px solid rgb(5 5 5 / 6%)"> |
| 00fe0e | 4 | <div style="height: 15vh; padding: 20px 40px; text-align: center"> |
| H | 5 | <span style="display: flex; justify-content: space-around"> |
| 6 | <a-button shape="circle" size="large"> | |
| 67287b | 7 | <MailOutlined /> |
| 00fe0e | 8 | </a-button> |
| H | 9 | <a-button shape="circle" size="large"> |
| 67287b | 10 | <UserOutlined /> |
| 00fe0e | 11 | </a-button> |
| H | 12 | </span> |
| 13 | <a-button | |
| 14 | style="width: 100%; margin-top: 10px; padding: 0 30px" | |
| 15 | type="primary" | |
| 16 | size="large" | |
| 17 | shape="round" | |
| 18 | @click="$router.push('/email/edit')" | |
| 19 | > | |
| 67287b | 20 | 写信 |
| H | 21 | </a-button> |
| 00fe0e | 22 | </div> |
| 67287b | 23 | |
| H | 24 | <div class="menu-container"> |
| 25 | <a-menu | |
| 26 | id="email-left-nav" | |
| 27 | v-model:open-keys="openKeys" | |
| 28 | v-model:selected-keys="selectedKeys" | |
| 29 | mode="inline" | |
| 30 | :popupClassName="popupClassName" | |
| 31 | > | |
| 32 | <template v-for="item in items" :key="item.key"> | |
| 33 | <a-sub-menu v-if="item.children" :key="item.key"> | |
| 34 | <template #title> | |
| 35 | <div class="my-display"> | |
| 36 | <span>{{ item.title }}</span | |
| ccfd07 | 37 | > |
| H | 38 | <!-- <span class="my-left" v-if="item.total > 0">{{ item.total }}</span> --> |
| 67287b | 39 | </div> |
| H | 40 | </template> |
| 41 | <a-menu-item | |
| 42 | style="display: flex; justify-content: space-between; padding-left: 28px" | |
| 43 | v-for="(child, index) in item.children" | |
| 44 | :key="index" | |
| 45 | @click="handleClick(child)" | |
| 46 | > | |
| 47 | <div class="my-display"> | |
| 48 | <span>{{ child.title }}</span> | |
| 49 | <span v-if="item.total > 0"> {{ child.total }}</span> | |
| 50 | </div> | |
| 51 | </a-menu-item> | |
| 52 | </a-sub-menu> | |
| 53 | <a-menu-item v-else :key="item.key" @click="handleClick(item)"> | |
| 54 | <div class="my-display"> | |
| 55 | <span>{{ item.title }}</span | |
| ccfd07 | 56 | > |
| H | 57 | <span class="my-left" v-if="item.total > 0">{{ item.total }}</span> |
| 67287b | 58 | </div> |
| H | 59 | </a-menu-item> |
| 60 | </template> | |
| 61 | </a-menu> | |
| 62 | </div> | |
| 63 | </div> | |
| 00fe0e | 64 | </PageWrapper> |
| 28c484 | 65 | </template> |
| 67287b | 66 | |
| 28c484 | 67 | <script lang="ts" setup> |
| 67287b | 68 | import { ref, onMounted } from 'vue'; |
| H | 69 | import { PageWrapper } from '@/components/Page'; |
| 00fe0e | 70 | import { MailOutlined, UserOutlined } from '@ant-design/icons-vue'; |
| 67287b | 71 | import { getEmailModuleApi } from '@/api/email/userList'; |
| H | 72 | import { useRouter } from 'vue-router'; |
| 73 | ||
| 00fe0e | 74 | const selectedKeys = ref<string[]>(['Index']); |
| 2c1249 | 75 | const openKeys = ref<string[]>(['Inbox']); |
| 67287b | 76 | const items = ref([]); // 定义 items 类型 |
| 28c484 | 77 | |
| 67287b | 78 | const fnGetEmailModule = async () => { |
| H | 79 | try { |
| 80 | const res = await getEmailModuleApi(); | |
| 81 | items.value = convertRoutesToMenuItems(res.data); | |
| 82 | } catch (error) { | |
| 83 | console.error('获取邮箱模块失败:', error); // 处理错误 | |
| 84 | } | |
| 85 | }; | |
| 28c484 | 86 | |
| 67287b | 87 | const convertRoutesToMenuItems = (routes: any[]) => { |
| H | 88 | return routes |
| 89 | .map((route) => { | |
| 90 | if (route.children && route.children.length > 0) { | |
| 00fe0e | 91 | return { |
| 67287b | 92 | key: route.key, |
| H | 93 | title: route.mailName, |
| 94 | total: route.total, | |
| 95 | children: convertRoutesToMenuItems(route.children), | |
| 00fe0e | 96 | }; |
| 67287b | 97 | } |
| H | 98 | if (!route.hideMenu) { |
| 99 | return { | |
| 100 | key: route.key, | |
| 101 | title: route.mailName, | |
| 102 | total: route.total, | |
| 103 | }; | |
| 104 | } | |
| 105 | }) | |
| 106 | .filter(Boolean); // 过滤掉 undefined | |
| 107 | }; | |
| 108 | ||
| 109 | // 生命周期钩子，加载菜单数据 | |
| 110 | onMounted(() => { | |
| 111 | fnGetEmailModule(); | |
| 112 | }); | |
| 113 | const routesConfig = { | |
| 114 | InboxPage1: '/email/index', | |
| 2c1249 | 115 | receiver: '/email/Inbox/list', |
| 67287b | 116 | }; |
| H | 117 | // 点击事件处理 |
| 118 | const router = useRouter(); | |
| 119 | const handleClick = (e: any) => { | |
| 120 | console.log(e, '------4'); | |
| 121 | let matched = false; | |
| 122 | const route = router.getRoutes() || []; | |
| 123 | route.forEach((item) => { | |
| 124 | if (item.name === e.key) { | |
| 125 | router.push(item.path); | |
| 126 | matched = true; | |
| 127 | return; // 跳出当前循环 | |
| 128 | } | |
| 129 | ||
| 130 | if (!matched) { | |
| 131 | switch (e.key) { | |
| 132 | case 'InboxPage1': | |
| 133 | router.push(routesConfig[e.key]); | |
| 134 | matched = true; | |
| 135 | return; // 跳出当前循环 | |
| 2c1249 | 136 | case 'receiver': |
| 67287b | 137 | router.push(`${routesConfig[e.key]}?${e.title}`); |
| H | 138 | matched = true; |
| 139 | return; // 跳出当前循环 | |
| 140 | default: | |
| 141 | // 处理默认情况，例如记录日志或抛出警告 | |
| 142 | console.warn(`Unknown key: ${e.key}`); | |
| 00fe0e | 143 | } |
| H | 144 | } |
| 145 | }); | |
| 67287b | 146 | }; |
| H | 147 | const popupClassName = { |
| 148 | display: 'flex', | |
| 149 | 'align-items': 'center', | |
| 150 | 'justify-content': 'space-between', | |
| 00fe0e | 151 | }; |
| 28c484 | 152 | </script> |
| 67287b | 153 | |
| 00fe0e | 154 | <style lang="less" scoped> |
| H | 155 | :deep(.ant-menu-inline) { |
| 156 | border-inline-end: 0 solid rgb(5 5 5 / 6%) !important; | |
| 157 | } | |
| 67287b | 158 | |
| H | 159 | .menu-container { |
| 160 | height: 70vh; | |
| 161 | overflow: auto; | |
| 162 | } | |
| 163 | ||
| 164 | .my-display { | |
| 165 | display: flex; | |
| 166 | align-items: center; | |
| 167 | justify-content: space-between; | |
| 168 | } | |
| 169 | ||
| 170 | .my-left { | |
| 171 | margin-left: 5px; | |
| 172 | } | |
| 00fe0e | 173 | </style> |
