diff --git a/src/pages/a-frame/AAside.tsx b/src/pages/a-frame/AAside.tsx index 88aa71f..75daa65 100644 --- a/src/pages/a-frame/AAside.tsx +++ b/src/pages/a-frame/AAside.tsx @@ -11,6 +11,12 @@ import { elIcons } from '@/common/element/element.ts' import AIcon from '@/components/a-icon/AIcon.vue' import type { IconName } from '@/components/a-icon/iconfont.ts' import styles from '@/pages/a-frame/aaside.module.styl' +import { useAppSettingStore } from '@/common/app/app-setting-store.ts' +import Colls from '@/common/utils/colls.ts' +import { MenuCategory } from '@/common/app/constants.ts' +import { useRouter } from 'vue-router' +import { computed } from 'vue' +import Nav from '@/common/router/nav.ts' export interface Menu extends G.TreeNode { // Id @@ -32,119 +38,103 @@ export interface Menu extends G.TreeNode { // 面包路径 breadcrumb: string[]; // 类型 - menuCategory: "Catalog" | "Group" | "Page" | "SubPage" | "Btn"; + menuCategory: 'Catalog' | 'Group' | 'Page' | 'SubPage' | 'Btn'; // 子菜单 children?: Menu[]; } export default defineComponent( - (props, { emit }) => { - let defaultId = ""; - let path: any = props.defaultPath.split("/"); - path = path[path.length - 1]; - props.menus.forEach((item) => { - if (item.routeName == path) { - defaultId = item.id; - } else if (item.children && item.children.length) { - item.children.forEach((item2) => { - if (item2.routeName == path) { - defaultId = item2.id; - } else if (item2.children && item2.children.length) { - item2.children.forEach((item3) => { - if (item3.routeName == path) { - defaultId = item3.id; - } - }); - } - }); - } - }); + () => { + const router = useRouter() + const appSettingStore = useAppSettingStore() + const defaultActive = ref('') + const isCollapse = ref(false) - const onMenuClick = (it: MenuItemRegistered) => emit("menuClick", it.index); + onMounted(() => { + const currentRouteName = router.currentRoute.value.name + defaultActive.value = appSettingStore.menus.find(it => it.routeName === currentRouteName)?.id + }) + + const menuTree = computed(() => { + return Colls.toTree(appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog).sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))) + }) + + const onMenuClick = (menuItem: MenuItemRegistered) => { + const menu = appSettingStore.menus.find(it => it.id === menuItem.index) + Nav.open({ + insId: menu?.routeName ?? '', + routeName: menu?.routeName ?? '', + }) + } const renderMenu = (it: Menu) => { - let renderChildNode: (() => VNode[] | undefined) | undefined = undefined; + let renderChildNode: (() => VNode[] | undefined) | undefined = undefined if (it.children != null && it.children.length > 0) { - renderChildNode = () => it.children?.map(renderMenu); + renderChildNode = () => it.children?.map(renderMenu) } - let currentNode: VNode; + let currentNode: VNode switch (it.menuCategory) { - case "Catalog": { + case 'Catalog': { currentNode = ( {{ title: () => ( <> - + {it.title} ), default: renderChildNode, }} - ); - break; + ) + break } - case "Group": { + case 'Group': { currentNode = ( {{ default: renderChildNode, }} - ); - break; + ) + break } - case "Page": { + case 'Page': { currentNode = ( {{ title: () => {it.title}, - default: () => , + default: () => , }} - ); - break; + ) + break } default: - currentNode = <>; + currentNode = <> } - return currentNode; - }; - const isCollapse = ref(false); + return currentNode + } return () => ( <> - + {{ - default: () => props.menus.map(renderMenu), + default: () => menuTree.value.map(renderMenu), }} { - isCollapse.value = !isCollapse.value; + isCollapse.value = !isCollapse.value }} > - {isCollapse.value ? : } + {isCollapse.value ? : } - ); + ) }, { - props: { - menus: { - type: Object as PropType, - required: true, - validator: (value: Menu[]) => value != null && value.length > 0, - }, - defaultPath: { - type: String, - required: true, - }, - }, - emits: { - menuClick: (id: string) => id != null, - }, - name: "AAside", - } -); + name: 'AAside', + }, +) diff --git a/src/pages/a-frame/AAvatar.vue b/src/pages/a-frame/AAvatar.vue index a371e5a..4c4b971 100644 --- a/src/pages/a-frame/AAvatar.vue +++ b/src/pages/a-frame/AAvatar.vue @@ -112,15 +112,7 @@ function logoutHandler() { .el-tabs__nav { width 100% justify-content space-around - position relative /*&::before { - content '' - position absolute - left 50% - background-color #D3D7DE - width 2px - height 100% - box-sizing border-box - }*/ + position relative } } diff --git a/src/pages/a-frame/AFrame.vue b/src/pages/a-frame/AFrame.vue index f5409f9..42f3324 100644 --- a/src/pages/a-frame/AFrame.vue +++ b/src/pages/a-frame/AFrame.vue @@ -2,44 +2,15 @@ import AAside from '@/pages/a-frame/AAside.tsx' import AAvatar from '@/pages/a-frame/AAvatar.vue' import { appName } from '@/common' -import Colls from '@/common/utils/colls.ts' -import { MenuCategory } from '@/common/app/constants.ts' -import { useAppSettingStore } from '@/common/app/app-setting-store.ts' -import Nav from '@/common/router/nav.ts' import Evt from '@/common/utils/evt.ts' -import { useRouter } from 'vue-router' - -const appSettingStore = useAppSettingStore(); -const id_menu_map = computed(() => { - return Colls.keyObj( - appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog), - (it) => it.id, - (it) => it - ); -}); - -function onMenuClick(id: string) { - const menu = id_menu_map.value[id]; - Nav.open({ - insId: menu?.routeName ?? "", - routeName: menu?.routeName ?? "", - }); -} - -const menuTree = computed(() => { - return Colls.toTree(appSettingStore.menus.filter((it) => it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog).sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))); -}); - -const router = useRouter(); -const defaultPath= ref(router.currentRoute.value.path); onMounted(() => { - Evt.emit("connect_ws"); -}); + Evt.emit('connect_ws') +}) onUnmounted(() => { - Evt.emit("disconnect_ws"); -}); + Evt.emit('disconnect_ws') +})