| 提交 | 用户 | age | ||
| 28c484 | 1 | <template> |
| 00fe0e | 2 | <PageWrapper dense contentFullHeight fixedHeight> |
| 63d608 | 3 | <div> |
| 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"> | |
| 63d608 | 36 | <span>{{ item.title }}</span> |
| ccfd07 | 37 | <!-- <span class="my-left" v-if="item.total > 0">{{ item.total }}</span> --> |
| 67287b | 38 | </div> |
| H | 39 | </template> |
| 40 | <a-menu-item | |
| 41 | style="display: flex; justify-content: space-between; padding-left: 28px" | |
| 42 | v-for="(child, index) in item.children" | |
| 43 | :key="index" | |
| 44 | @click="handleClick(child)" | |
| 45 | > | |
| 46 | <div class="my-display"> | |
| 47 | <span>{{ child.title }}</span> | |
| 48 | <span v-if="item.total > 0"> {{ child.total }}</span> | |
| 49 | </div> | |
| 50 | </a-menu-item> | |
| 51 | </a-sub-menu> | |
| 52 | <a-menu-item v-else :key="item.key" @click="handleClick(item)"> | |
| 53 | <div class="my-display"> | |
| 63d608 | 54 | <span>{{ item.title }}</span> |
| ccfd07 | 55 | <span class="my-left" v-if="item.total > 0">{{ item.total }}</span> |
| 67287b | 56 | </div> |
| H | 57 | </a-menu-item> |
| 58 | </template> | |
| 59 | </a-menu> | |
| 60 | </div> | |
| 61 | </div> | |
| 00fe0e | 62 | </PageWrapper> |
| 28c484 | 63 | </template> |
| 67287b | 64 | |
| 28c484 | 65 | <script lang="ts" setup> |
| 67287b | 66 | import { ref, onMounted } from 'vue'; |
| H | 67 | import { PageWrapper } from '@/components/Page'; |
| 00fe0e | 68 | import { MailOutlined, UserOutlined } from '@ant-design/icons-vue'; |
| 67287b | 69 | import { getEmailModuleApi } from '@/api/email/userList'; |
| H | 70 | import { useRouter } from 'vue-router'; |
| 71 | ||
| 00fe0e | 72 | const selectedKeys = ref<string[]>(['Index']); |
| 2c1249 | 73 | const openKeys = ref<string[]>(['Inbox']); |
| 67287b | 74 | const items = ref([]); // 定义 items 类型 |
| 28c484 | 75 | |
| 67287b | 76 | const fnGetEmailModule = async () => { |
| H | 77 | try { |
| 78 | const res = await getEmailModuleApi(); | |
| 79 | items.value = convertRoutesToMenuItems(res.data); | |
| 80 | } catch (error) { | |
| 81 | console.error('获取邮箱模块失败:', error); // 处理错误 | |
| 82 | } | |
| 83 | }; | |
| 28c484 | 84 | |
| 67287b | 85 | const convertRoutesToMenuItems = (routes: any[]) => { |
| H | 86 | return routes |
| 87 | .map((route) => { | |
| 88 | if (route.children && route.children.length > 0) { | |
| 00fe0e | 89 | return { |
| 67287b | 90 | key: route.key, |
| H | 91 | title: route.mailName, |
| 92 | total: route.total, | |
| 93 | children: convertRoutesToMenuItems(route.children), | |
| 00fe0e | 94 | }; |
| 67287b | 95 | } |
| H | 96 | if (!route.hideMenu) { |
| 97 | return { | |
| 98 | key: route.key, | |
| 99 | title: route.mailName, | |
| 100 | total: route.total, | |
| 101 | }; | |
| 102 | } | |
| 103 | }) | |
| 104 | .filter(Boolean); // 过滤掉 undefined | |
| 105 | }; | |
| 106 | ||
| 107 | // 生命周期钩子，加载菜单数据 | |
| 108 | onMounted(() => { | |
| 109 | fnGetEmailModule(); | |
| 110 | }); | |
| 111 | const routesConfig = { | |
| 112 | InboxPage1: '/email/index', | |
| 2c1249 | 113 | receiver: '/email/Inbox/list', |
| 63d608 | 114 | sender: '/email/outbox', |
| H | 115 | IndexPage1:'/email/outbox' |
| 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; // 跳出当前循环 | |
| 63d608 | 140 | case 'sender': |
| H | 141 | router.push(`${routesConfig[e.key]}?${e.title}`); |
| 142 | matched = true; | |
| 143 | return; // 跳出当前循环 | |
| 144 | case 'IndexPage1': | |
| 145 | router.push(`${routesConfig[e.key]}`); | |
| 146 | matched = true; | |
| 147 | return; // 跳出当前循环 | |
| 67287b | 148 | default: |
| H | 149 | // 处理默认情况，例如记录日志或抛出警告 |
| 150 | console.warn(`Unknown key: ${e.key}`); | |
| 00fe0e | 151 | } |
| H | 152 | } |
| 153 | }); | |
| 67287b | 154 | }; |
| H | 155 | const popupClassName = { |
| 156 | display: 'flex', | |
| 157 | 'align-items': 'center', | |
| 158 | 'justify-content': 'space-between', | |
| 00fe0e | 159 | }; |
| 28c484 | 160 | </script> |
| 67287b | 161 | |
| 00fe0e | 162 | <style lang="less" scoped> |
| H | 163 | :deep(.ant-menu-inline) { |
| 164 | border-inline-end: 0 solid rgb(5 5 5 / 6%) !important; | |
| 165 | } | |
| 67287b | 166 | |
| H | 167 | .menu-container { |
| 168 | height: 70vh; | |
| 169 | overflow: auto; | |
| 170 | } | |
| 171 | ||
| 172 | .my-display { | |
| 173 | display: flex; | |
| 174 | align-items: center; | |
| 175 | justify-content: space-between; | |
| 176 | } | |
| 177 | ||
| 178 | .my-left { | |
| 179 | margin-left: 5px; | |
| 180 | } | |
| 00fe0e | 181 | </style> |
