| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -4,13 +4,14 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" /> | 
					 | 
					 | 
					 | 
					      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <span :class="`${prefixCls}__info hidden md:block`"> | 
					 | 
					 | 
					 | 
					      <span :class="`${prefixCls}__info hidden md:block`"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <span :class="`${prefixCls}__name  `" class="truncate"> | 
					 | 
					 | 
					 | 
					        <span :class="`${prefixCls}__name  `" class="truncate"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					          {{ getUserInfo.realName }} | 
					 | 
					 | 
					 | 
					          {{ getUserInfo.nickname }} | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        </span> | 
					 | 
					 | 
					 | 
					        </span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      </span> | 
					 | 
					 | 
					 | 
					      </span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    </span> | 
					 | 
					 | 
					 | 
					    </span> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    <template #overlay> | 
					 | 
					 | 
					 | 
					    <template #overlay> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      <Menu @click="handleMenuClick"> | 
					 | 
					 | 
					 | 
					      <Menu @click="handleMenuClick"> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					        <MenuItem key="profile" :text="t('layout.header.accountCenter')" icon="ion:person-outline" /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" /> | 
					 | 
					 | 
					 | 
					        <MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="ion:document-text-outline" v-if="getShowDoc" /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <MenuDivider v-if="getShowDoc" /> | 
					 | 
					 | 
					 | 
					        <MenuDivider v-if="getShowDoc" /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					        <MenuItem v-if="getUseLockPage" key="lock" :text="t('layout.header.tooltipLock')" icon="ion:lock-closed-outline" /> | 
					 | 
					 | 
					 | 
					        <MenuItem v-if="getUseLockPage" key="lock" :text="t('layout.header.tooltipLock')" icon="ion:lock-closed-outline" /> | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -20,43 +21,40 @@ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  </Dropdown> | 
					 | 
					 | 
					 | 
					  </Dropdown> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  <LockAction @register="register" /> | 
					 | 
					 | 
					 | 
					  <LockAction @register="register" /> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</template> | 
					 | 
					 | 
					 | 
					</template> | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script lang="ts" setup name="UserDropdown"> | 
					 | 
					 | 
					 | 
					<script setup lang="ts" name="UserDropdown"> | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					// components | 
					 | 
					 | 
					 | 
					import { Dropdown, Menu, MenuDivider } from 'ant-design-vue' | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { Dropdown, Menu } from 'ant-design-vue' | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface' | 
					 | 
					 | 
					 | 
					import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { computed } from 'vue' | 
					 | 
					 | 
					 | 
					import { computed } from 'vue' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { DOC_URL } from '@/settings/siteSetting' | 
					 | 
					 | 
					 | 
					import { DOC_URL } from '@/settings/siteSetting' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { useUserStore } from '@/store/modules/user' | 
					 | 
					 | 
					 | 
					import { useUserStore } from '@/store/modules/user' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' | 
					 | 
					 | 
					 | 
					import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { useI18n } from '@/hooks/web/useI18n' | 
					 | 
					 | 
					 | 
					import { useI18n } from '@/hooks/web/useI18n' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { useDesign } from '@/hooks/web/useDesign' | 
					 | 
					 | 
					 | 
					import { useDesign } from '@/hooks/web/useDesign' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { useModal } from '@/components/Modal' | 
					 | 
					 | 
					 | 
					import { useModal } from '@/components/Modal' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import headerImg from '@/assets/images/header.jpg' | 
					 | 
					 | 
					 | 
					import headerImg from '@/assets/images/header.jpg' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { propTypes } from '@/utils/propTypes' | 
					 | 
					 | 
					 | 
					import { propTypes } from '@/utils/propTypes' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { openWindow } from '@/utils' | 
					 | 
					 | 
					 | 
					import { openWindow } from '@/utils' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					import { useGo } from '@/hooks/web/usePage' | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					import { createAsyncComponent } from '@/utils/factory/createAsyncComponent' | 
					 | 
					 | 
					 | 
					import { createAsyncComponent } from '@/utils/factory/createAsyncComponent' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					const go = useGo() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					type MenuEvent = 'profile' | 'logout' | 'doc' | 'lock' | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue')) | 
					 | 
					 | 
					 | 
					const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue')) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue')) | 
					 | 
					 | 
					 | 
					const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue')) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const MenuDivider = Menu.Divider | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					type MenuEvent = 'logout' | 'doc' | 'lock' | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					defineProps({ | 
					 | 
					 | 
					 | 
					defineProps({ | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  theme: propTypes.oneOf(['dark', 'light']) | 
					 | 
					 | 
					 | 
					  theme: propTypes.oneOf(['dark', 'light']) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					}) | 
					 | 
					 | 
					 | 
					}) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const { prefixCls } = useDesign('header-user-dropdown') | 
					 | 
					 | 
					 | 
					const { prefixCls } = useDesign('header-user-dropdown') | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const { t } = useI18n() | 
					 | 
					 | 
					 | 
					const { t } = useI18n() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const { getShowDoc, getUseLockPage } = useHeaderSetting() | 
					 | 
					 | 
					 | 
					const { getShowDoc, getUseLockPage } = useHeaderSetting() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const userStore = useUserStore() | 
					 | 
					 | 
					 | 
					const userStore = useUserStore() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const getUserInfo = computed(() => { | 
					 | 
					 | 
					 | 
					const getUserInfo = computed(() => { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  const { realName = '', avatar, desc } = userStore.getUserInfo || {} | 
					 | 
					 | 
					 | 
					  const { nickname = '', avatar } = userStore.getUserInfo.user || {} | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  return { realName, avatar: avatar || headerImg, desc } | 
					 | 
					 | 
					 | 
					  return { nickname, avatar: avatar || headerImg } | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					}) | 
					 | 
					 | 
					 | 
					}) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					const [register, { openModal }] = useModal() | 
					 | 
					 | 
					 | 
					const [register, { openModal }] = useModal() | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -75,8 +73,15 @@ function openDoc() { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  openWindow(DOC_URL) | 
					 | 
					 | 
					 | 
					  openWindow(DOC_URL) | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					} | 
					 | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					function openProfile() { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					  go('/profile/index') | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					} | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					function handleMenuClick(e: MenuInfo) { | 
					 | 
					 | 
					 | 
					function handleMenuClick(e: MenuInfo) { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					  switch (e.key as MenuEvent) { | 
					 | 
					 | 
					 | 
					  switch (e.key as MenuEvent) { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					    case 'profile': | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      openProfile() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					      break | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					    case 'logout': | 
					 | 
					 | 
					 | 
					    case 'logout': | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      handleLoginOut() | 
					 | 
					 | 
					 | 
					      handleLoginOut() | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					      break | 
					 | 
					 | 
					 | 
					      break | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
  |