97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import useRouterStore from '@/useRouterStore'
|
|
import { Button, Modal, Tag } from 'ant-design-vue'
|
|
import { defineComponent } from 'vue'
|
|
import AvatarCircle from './AvatarCircle'
|
|
import useUserStore from './useUserStore'
|
|
import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
|
|
import { globalToast } from '@/main'
|
|
import clsx from 'clsx'
|
|
import useLayoutStore from '@/layout/useLayoutStore'
|
|
|
|
const labelStyle = 'w-16'
|
|
|
|
export default defineComponent(() => {
|
|
const router = useRouterStore()
|
|
const layout = useLayoutStore()
|
|
const user = useUserStore()
|
|
return () => (
|
|
<div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
|
|
<div class="flex justify-center py-4">
|
|
<div class="w-16 h-16 relative">
|
|
<AvatarCircle />
|
|
</div>
|
|
</div>
|
|
{user.isLogin && (
|
|
<div
|
|
class={clsx(
|
|
'h-0 flex-grow py-4 px-12 ',
|
|
layout.state.current === 0 ? 'text-white' : 'text-[#333]'
|
|
)}
|
|
>
|
|
<div class="flex py-2">
|
|
<div class={labelStyle}>用户名:</div>
|
|
<div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
|
|
{user.profile.username}
|
|
</div>
|
|
</div>
|
|
<div class="flex py-2">
|
|
<div class={labelStyle}>生日:</div> {user.profile.birthday}
|
|
</div>
|
|
<div class="flex py-2">
|
|
<div class={labelStyle}>性别:</div>
|
|
<Tag color={user.profile.gender === 1 ? 'blue' : user.profile.gender === 2 ? 'red' : 'gray'}>
|
|
{user.profile.gender === 1 ? '男' : user.profile.gender === 2 ? '女' : '未知'}
|
|
</Tag>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="flex justify-around items-center my-10">
|
|
{user.isLogin ? (
|
|
<>
|
|
<Button
|
|
onClick={() => {
|
|
router.go('global-login')
|
|
}}
|
|
icon={<EditOutlined />}
|
|
type="primary"
|
|
>
|
|
修改个人信息
|
|
</Button>
|
|
<Button
|
|
type="text"
|
|
class={'text-[#999] hover:text-[#999]'}
|
|
icon={<LogoutOutlined />}
|
|
onClick={() => {
|
|
Modal.confirm({
|
|
title: '退出登录',
|
|
content: '确定要退出登录吗？',
|
|
onOk: () => {
|
|
router.go('')
|
|
user.logout()
|
|
globalToast.success('已退出登录')
|
|
}
|
|
})
|
|
}}
|
|
>
|
|
退出登录
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
type="primary"
|
|
icon={<LoginOutlined />}
|
|
size="large"
|
|
onClick={() => {
|
|
router.go('global-login')
|
|
}}
|
|
>
|
|
登录
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div >
|
|
)
|
|
})
|