| 提交 | 用户 | age | ||
| ba068b | 1 | import './index.less'; |
| V | 2 | |
| 3 | import { PropType, toRef } from 'vue'; | |
| 2f6253 | 4 | import type { Menu } from '/@/router/types'; |
| 陈 | 5 | |
| ba068b | 6 | import { computed, defineComponent, unref } from 'vue'; |
| 2f6253 | 7 | import { BasicMenu } from '/@/components/Menu/index'; |
| ba068b | 8 | import { AppLogo } from '/@/components/Application'; |
| 2f6253 | 9 | |
| ba068b | 10 | import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; |
| 2f6253 | 11 | |
| ba068b | 12 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
| V | 13 | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
| 2f6253 | 14 | |
| ba068b | 15 | import { useGo } from '/@/hooks/web/usePage'; |
| V | 16 | import { useSplitMenu } from './useLayoutMenu'; |
| 17 | import { openWindow } from '/@/utils'; | |
| 2f6253 | 18 | |
| 陈 | 19 | export default defineComponent({ |
| 0692b4 | 20 | name: 'LayoutMenu', |
| 2f6253 | 21 | props: { |
| 陈 | 22 | theme: { |
| 23 | type: String as PropType<string>, | |
| 24 | default: '', | |
| 25 | }, | |
| 26 | splitType: { | |
| 27 | type: Number as PropType<MenuSplitTyeEnum>, | |
| 28 | default: MenuSplitTyeEnum.NONE, | |
| 29 | }, | |
| 30 | parentMenuPath: { | |
| 31 | type: String as PropType<string>, | |
| 32 | default: '', | |
| 33 | }, | |
| 34 | showSearch: { | |
| 35 | type: Boolean as PropType<boolean>, | |
| 36 | default: true, | |
| 37 | }, | |
| ba068b | 38 | isHorizontal: { |
| 770283 | 39 | type: Boolean as PropType<boolean>, |
| V | 40 | default: false, |
| 41 | }, | |
| 2f6253 | 42 | menuMode: { |
| 陈 | 43 | type: [String] as PropType<MenuModeEnum | null>, |
| 44 | default: '', | |
| 45 | }, | |
| 46 | }, | |
| 47 | setup(props) { | |
| ba068b | 48 | const go = useGo(); |
| 2f6253 | 49 | |
| ba068b | 50 | const { |
| V | 51 | setMenuSetting, |
| 52 | getShowSearch, | |
| 0692b4 | 53 | getMenuMode, |
| V | 54 | getMenuType, |
| ba068b | 55 | getCollapsedShowTitle, |
| V | 56 | getCollapsedShowSearch, |
| 57 | getIsSidebarType, | |
| 0692b4 | 58 | getMenuTheme, |
| ba068b | 59 | getCollapsed, |
| V | 60 | getAccordion, |
| 61 | } = useMenuSetting(); | |
| 62 | ||
| 63 | const { getShowLogo } = useRootSetting(); | |
| 64 | ||
| 65 | const { flatMenusRef, menusRef } = useSplitMenu(toRef(props, 'splitType')); | |
| 66 | ||
| 67 | const showLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType)); | |
| 68 | ||
| 0692b4 | 69 | const getComputedMenuMode = computed(() => props.menuMode || unref(getMenuMode)); |
| ba068b | 70 | |
| 0692b4 | 71 | const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme)); |
| ba068b | 72 | |
| V | 73 | const appendClass = computed(() => props.splitType === MenuSplitTyeEnum.TOP); |
| 74 | ||
| 75 | const showSearch = computed(() => { | |
| 76 | return ( | |
| 77 | unref(getShowSearch) && | |
| 78 | props.showSearch && | |
| 79 | (unref(getCollapsedShowSearch) ? true : !unref(getCollapsed)) | |
| 80 | ); | |
| 2f6253 | 81 | }); |
| 陈 | 82 | |
| ba068b | 83 | /** |
| V | 84 | * click menu |
| 85 | * @param menu | |
| 86 | */ | |
| 2f6253 | 87 | function handleMenuClick(menu: Menu) { |
| ba068b | 88 | go(menu.path); |
| 2f6253 | 89 | } |
| 陈 | 90 | |
| ba068b | 91 | /** |
| V | 92 | * before click menu |
| 93 | * @param menu | |
| 94 | */ | |
| 2f6253 | 95 | async function beforeMenuClickFn(menu: Menu) { |
| 陈 | 96 | const { meta: { externalLink } = {} } = menu; |
| 97 | ||
| 98 | if (externalLink) { | |
| ba068b | 99 | openWindow(externalLink); |
| 2f6253 | 100 | return false; |
| 陈 | 101 | } |
| 102 | return true; | |
| 103 | } | |
| 104 | ||
| 105 | function handleClickSearchInput() { | |
| ba068b | 106 | unref(getCollapsed) && setMenuSetting({ collapsed: false }); |
| 2f6253 | 107 | } |
| 陈 | 108 | |
| ba068b | 109 | function renderHeader() { |
| V | 110 | if (!unref(showLogo)) return null; |
| 2f6253 | 111 | return ( |
| ba068b | 112 | <AppLogo |
| V | 113 | showTitle={!unref(getCollapsed)} |
| 0692b4 | 114 | class={[`layout-menu__logo`, unref(getComputedMenuTheme)]} |
| V | 115 | theme={unref(getComputedMenuTheme)} |
| ba068b | 116 | /> |
| 2f6253 | 117 | ); |
| ba068b | 118 | } |
| 4f6b65 | 119 | |
| 2f6253 | 120 | return () => { |
| 陈 | 121 | return ( |
| 122 | <BasicMenu | |
| 123 | class="layout-menu" | |
| ba068b | 124 | beforeClickFn={beforeMenuClickFn} |
| V | 125 | isHorizontal={props.isHorizontal} |
| 126 | appendClass={unref(appendClass)} | |
| 0692b4 | 127 | type={unref(getMenuType)} |
| V | 128 | mode={unref(getComputedMenuMode)} |
| ba068b | 129 | collapsedShowTitle={unref(getCollapsedShowTitle)} |
| 0692b4 | 130 | theme={unref(getComputedMenuTheme)} |
| ba068b | 131 | showLogo={unref(showLogo)} |
| V | 132 | search={unref(showSearch)} |
| 2f6253 | 133 | items={unref(menusRef)} |
| 陈 | 134 | flatItems={unref(flatMenusRef)} |
| ba068b | 135 | accordion={unref(getAccordion)} |
| V | 136 | onMenuClick={handleMenuClick} |
| 2f6253 | 137 | onClickSearchInput={handleClickSearchInput} |
| 陈 | 138 | > |
| 139 | {{ | |
| ba068b | 140 | header: () => renderHeader(), |
| 2f6253 | 141 | }} |
| 陈 | 142 | </BasicMenu> |
| 143 | ); | |
| 144 | }; | |
| 145 | }, | |
| 146 | }); | |
