| 提交 | 用户 | age | ||
| 2f6253 | 1 | import { defineComponent, unref, computed } from 'vue'; |
| 710158 | 2 | import { Layout, Tooltip, Badge } from 'ant-design-vue'; |
| 2f6253 | 3 | import Logo from '/@/layouts/Logo.vue'; |
| 陈 | 4 | import UserDropdown from './UserDropdown'; |
| 5 | import LayoutMenu from './LayoutMenu'; | |
| 6 | import { appStore } from '/@/store/modules/app'; | |
| 7 | import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum'; | |
| 8 | import LayoutBreadcrumb from './LayoutBreadcrumb'; | |
| 9 | import { | |
| 10 | RedoOutlined, | |
| 11 | FullscreenExitOutlined, | |
| 12 | FullscreenOutlined, | |
| 13 | GithubFilled, | |
| 14 | LockOutlined, | |
| 710158 | 15 | BugOutlined, |
| 2f6253 | 16 | } from '@ant-design/icons-vue'; |
| 陈 | 17 | import { useFullscreen } from '/@/hooks/web/useFullScreen'; |
| 18 | import { useTabs } from '/@/hooks/web/useTabs'; | |
| 19 | import { GITHUB_URL } from '/@/settings/siteSetting'; | |
| 20 | import LockAction from './actions/LockActionItem'; | |
| 21 | import { useModal } from '/@/components/Modal/index'; | |
| 710158 | 22 | import { errorStore } from '/@/store/modules/error'; |
| V | 23 | import { useGo } from '/@/hooks/web/usePage'; |
| 2f6253 | 24 | |
| 陈 | 25 | export default defineComponent({ |
| 26 | name: 'DefaultLayoutHeader', | |
| 27 | setup() { | |
| 28 | const { refreshPage } = useTabs(); | |
| 29 | const [register, { openModal }] = useModal(); | |
| 30 | const { toggleFullscreen, isFullscreenRef } = useFullscreen(); | |
| 710158 | 31 | const go = useGo(); |
| 2f6253 | 32 | const getProjectConfigRef = computed(() => { |
| 陈 | 33 | return appStore.getProjectConfig; |
| 34 | }); | |
| 35 | ||
| 36 | function goToGithub() { | |
| 37 | window.open(GITHUB_URL, '__blank'); | |
| 38 | } | |
| 39 | ||
| 40 | const headerClass = computed(() => { | |
| 41 | const theme = unref(getProjectConfigRef).headerSetting.theme; | |
| 42 | return theme ? `layout-header__header--${theme}` : ''; | |
| 43 | }); | |
| 710158 | 44 | |
| V | 45 | function handleToErrorList() { |
| 46 | errorStore.commitErrorListCountState(0); | |
| 47 | go('/exception/error-log'); | |
| 48 | } | |
| 49 | ||
| 2f6253 | 50 | /** |
| 陈 | 51 | * @description: 锁定屏幕 |
| 52 | */ | |
| 53 | function handleLockPage() { | |
| 54 | openModal(true); | |
| 55 | } | |
| 56 | return () => { | |
| 57 | const getProjectConfig = unref(getProjectConfigRef); | |
| 58 | const { | |
| 710158 | 59 | useErrorHandle, |
| 2f6253 | 60 | showLogo, |
| 710158 | 61 | headerSetting: { theme: headerTheme, useLockPage, showRedo, showGithub, showFullScreen }, |
| 2f6253 | 62 | menuSetting: { mode, type: menuType, split: splitMenu, topMenuAlign }, |
| 陈 | 63 | showBreadCrumb, |
| 64 | } = getProjectConfig; | |
| 65 | ||
| 66 | const isSidebarType = menuType === MenuTypeEnum.SIDEBAR; | |
| 67 | return ( | |
| 03b602 | 68 | <Layout.Header class={['layout-header', 'flex p-0 px-4 ', unref(headerClass)]}> |
| 2f6253 | 69 | {() => ( |
| 陈 | 70 | <> |
| 03b602 | 71 | <div class="layout-header__content "> |
| 2f6253 | 72 | {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />} |
| 陈 | 73 | |
| 74 | {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && ( | |
| 2f268c | 75 | <LayoutBreadcrumb /> |
| 2f6253 | 76 | )} |
| 陈 | 77 | {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && ( |
| 03b602 | 78 | <div class={[`layout-header__menu `, `justify-${topMenuAlign}`]}> |
| 2f6253 | 79 | <LayoutMenu |
| 陈 | 80 | theme={headerTheme} |
| 81 | splitType={splitMenu ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE} | |
| 82 | menuMode={splitMenu ? MenuModeEnum.HORIZONTAL : null} | |
| 83 | showSearch={false} | |
| 84 | /> | |
| 85 | </div> | |
| 86 | )} | |
| 87 | </div> | |
| 88 | ||
| 89 | <div class={`layout-header__action`}> | |
| 710158 | 90 | {useErrorHandle && ( |
| V | 91 | <Tooltip> |
| 92 | {{ | |
| 93 | title: () => '错误日志', | |
| 94 | default: () => ( | |
| 95 | <Badge | |
| 96 | count={errorStore.getErrorListCountState} | |
| 97 | offset={[0, 10]} | |
| 98 | overflowCount={99} | |
| 99 | > | |
| 100 | {() => ( | |
| 101 | <div class={`layout-header__action-item`} onClick={handleToErrorList}> | |
| 102 | <BugOutlined class={`layout-header__action-icon`} /> | |
| 103 | </div> | |
| 104 | )} | |
| 105 | </Badge> | |
| 106 | ), | |
| 107 | }} | |
| 108 | </Tooltip> | |
| 109 | )} | |
| 110 | ||
| 2f6253 | 111 | {showGithub && ( |
| 陈 | 112 | <Tooltip> |
| 113 | {{ | |
| 114 | title: () => 'github', | |
| 115 | default: () => ( | |
| 116 | <div class={`layout-header__action-item`} onClick={goToGithub}> | |
| 117 | <GithubFilled class={`layout-header__action-icon`} /> | |
| 118 | </div> | |
| 119 | ), | |
| 120 | }} | |
| 121 | </Tooltip> | |
| 122 | )} | |
| 710158 | 123 | {useLockPage && ( |
| 2f6253 | 124 | <Tooltip> |
| 陈 | 125 | {{ |
| 126 | title: () => '锁定屏幕', | |
| 127 | default: () => ( | |
| 128 | <div class={`layout-header__action-item`} onClick={handleLockPage}> | |
| 129 | <LockOutlined class={`layout-header__action-icon`} /> | |
| 130 | </div> | |
| 131 | ), | |
| 132 | }} | |
| 133 | </Tooltip> | |
| 134 | )} | |
| 135 | {showRedo && ( | |
| 136 | <Tooltip> | |
| 137 | {{ | |
| 138 | title: () => '刷新', | |
| 139 | default: () => ( | |
| 140 | <div class={`layout-header__action-item`} onClick={refreshPage}> | |
| 141 | <RedoOutlined class={`layout-header__action-icon`} /> | |
| 142 | </div> | |
| 143 | ), | |
| 144 | }} | |
| 145 | </Tooltip> | |
| 146 | )} | |
| 147 | {showFullScreen && ( | |
| 148 | <Tooltip> | |
| 149 | {{ | |
| 150 | title: () => (unref(isFullscreenRef) ? '退出全屏' : '全屏'), | |
| 151 | default: () => { | |
| 152 | const Icon: any = !unref(isFullscreenRef) ? ( | |
| 153 | <FullscreenOutlined /> | |
| 154 | ) : ( | |
| 155 | <FullscreenExitOutlined /> | |
| 156 | ); | |
| 157 | return ( | |
| 158 | <div class={`layout-header__action-item`} onClick={toggleFullscreen}> | |
| 159 | <Icon class={`layout-header__action-icon`} /> | |
| 160 | </div> | |
| 161 | ); | |
| 162 | }, | |
| 163 | }} | |
| 164 | </Tooltip> | |
| 165 | )} | |
| 166 | <UserDropdown class={`layout-header__user-dropdown`} /> | |
| 167 | </div> | |
| 168 | <LockAction onRegister={register} /> | |
| 169 | </> | |
| 170 | )} | |
| 171 | </Layout.Header> | |
| 172 | ); | |
| 173 | }; | |
| 174 | }, | |
| 175 | }); | |
