<script setup lang="ts">
import { userService } from '@/api/service/user'
import avatar from '@/assets/images/avatar.webp'
import { useAppStore, useMenuStore } from '@/store'
import { User } from '@element
-plus/icons
-vue'
import { useRouter } from 'vue
-router'
import apps from '~icons/custom/apps'
import exit from '~icons/custom/exit'
import unlock from '~icons/custom/unlock'
import ChangePasswordDialog from './change
-password/index.vue'
import UserInfo from './user
-info/index.vue'
import VOYAHlogo from '/Vhome.svg'
defineOptions
({
name: 'LayoutHeader',
}
)
// 修改密码的窗口是否可见
const changePasswordDialogVisible = ref
(false
)
// 个人信息的窗口是否可见
const checkUserInfoVisible = ref
(false
)
const appStore = useAppStore
()
const {
isEnglish: _isEnglish,
} = storeToRefs
(appStore
)
const router = useRouter
()
const userInfoRef = ref
()
function redirectGlobal
() {
router.push
({ name: 'Dashboard' }
)
}
async function handleCommand
(command: string | number | object
) {
switch
(command
) {
case 'logout': {
try {
await ElMessageBox.confirm
(
'确认要注销吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
},
)
await userService.logout
()
localStorage.setItem
('token', ''
)
window.$message.success
('注销成功'
)
router.push
({ name: 'Login' }
)
}
catch (error
) {
console.error
(error
)
window.$message?.error
('注销失败，请重试'
)
}
break
}
case 'modifyPwd': {
changePasswordDialogVisible.value = true
break
}
case 'userInfo': {
checkUserInfoVisible.value = true
userInfoRef.value.open
()
break
}
default: break
}
}
const userInfo = ref<any>
({
avatar: '',
username: '',
roleName: '',
mobile: '',
roleNameList: [],
source: '',
email: '',
}
)
const menuStore = useMenuStore
()
const { filterMenu } = menuStore
onActivated
(async
() => {
getUserInfoFn
()
}
)
onMounted
(() => {
getUserInfoFn
()
}
)
async function getUserInfoFn
() {
const { data } = await userService.getUserInfo
()
userInfo.value = data
filterMenu
(userInfo.value.roleIdList
)
}
</script>
<template>
<div class="h
-full
flex items
-center">
<div class="
flex items
-center justify
-between wh
-full">
<div class="h
-full
flex items
-center gap
-x
-4">
<el
-image class="wh
-8" :src="VOYAHlogo" fit="scale
-down" @click="redirectGlobal" />
<span class="header
-title text
-4 color
-[#1A253B] font
-bold leading
-5.5">
{{ $t
('system.title'
) }}
</span>
<el
-divider direction="vertical" style="height: 22px; margin:0;" />
<el
-button text circle>
<el
-icon size="20">
<apps />
</el
-icon>
</el
-button>
</div>
<div class="header
-right
-content
-wrapper
flex items
-center gap
-x
-4">
<!
-- <el
-button circle>
<el
-icon :size="16">
<GlobalSearch />
</el
-icon>
</el
-button>
-->
<!
-- 国际化
-->
<!
-- <el
-button circle @click="appStore.toggleLang
()">
<el
-icon :size="16">
<translate />
</el
-icon>
</el
-button>
-->
<!
-- 主题模式
-->
<!
-- <el
-button circle>
<el
-icon :size="16">
<Theme />
</el
-icon>
</el
-button>
-->
<!
-- 通知公告
-->
<!
-- <el
-badge is
-dot>
<el
-button circle>
<el
-icon :size="16">
<notification />
</el
-icon>
</el
-button>
</el
-badge>
-->
<!
-- 设置
-->
<!
-- <el
-button circle>
<el
-icon :size="16">
<GlobalSetting />
</el
-icon>
</el
-button>
-->
<!
-- 用户中心
-->
<el
-popover
popper
-class="user
-center w
-50" popper
-style="width: 200px; padding: 0;" placement="bottom"
:show
-arrow="false"
>
<template #reference>
<el
-avatar :src="userInfo.avatar" :size="40" class="cursor
-pointer" />
</template>
<template #default>
<div class="user
-center
-content">
<div class="user
-info h
-30
flex flex-col items
-center p
-4">
<el
-avatar :src="userInfo.avatar" :size="40" class="cursor
-pointer" />
<span class="mt
-2 text
-sm color
-[#262626] leading
-5">{{ userInfo.username }}</span>
<span class="text
-xs color
-[#8C8C8C] leading
-5">{{ userInfo.roleName }}</span>
</div>
<div class="operation
flex flex-col p
-4">
<el
-button class="operation
-btn" link @click="handleCommand
('userInfo'
)">
<el
-icon :size="20" class="mr
-2">
<User />
</el
-icon>个人信息
</el
-button>
<el
-button class="operation
-btn" link @click="handleCommand
('modifyPwd'
)">
<el
-icon :size="20" class="mr
-2">
<unlock />
</el
-icon>修改密码
</el
-button>
<el
-divider class="operation
-divider" />
<el
-button class="operation
-btn" type="danger" link @click="handleCommand
('logout'
)">
<el
-icon :size="20" class="mr
-2">
<exit />
</el
-icon>退出系统
</el
-button>
</div>
</div>
</template>
</el
-popover>
</div>
</div>
<ChangePasswordDialog v
-model="changePasswordDialogVisible" />
<UserInfo
ref="userInfoRef" v
-model="checkUserInfoVisible" v
-model:user
-info="userInfo"
@confirm
-ok="getUserInfoFn"
/>
</div>
</template>
<style lang="scss" scoped>
.header
-title {
font
-family: Alimama ShuHeiTi;
}
.header
-right
-content
-wrapper {
.el
-button + .el
-button {
margin
-left: 0;
}
}
</style>
<style>
.el
-popper.el
-popover.user
-center {
--el
-popover
-border
-radius: 8px;
background: url
('@/assets/images/header/user
-center
-bg.webp'
);
background
-position: center;
background
-size: auto 140%;
background
-repeat: no
-repeat;
border: none;
box
-shadow: 0px 8px 20px 0px rgba
(31, 39, 51, 0.09
);
.operation {
.operation
-btn {
height: 32px;
margin
-left: 0;
}
.operation
-divider {
margin: 12px 0;
}
}
}
</style>
为什么我修改完之后userInfo.avatar没有响应式更新啊？
本文探讨了Flex中的异常处理机制，并对比了try...catch与监听器的不同应用场合。实验表明，某些异常只能通过监听器捕获，且异常捕获的效果受运行环境的影响。此外，文章还列举了一些关于不同运行环境下异常捕获的特殊情况。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
