Feat(Hint): Support dark mode
This commit is contained in:
@@ -5,6 +5,7 @@ import {
|
||||
PERMISSION_ACCESS_DENIED,
|
||||
PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR
|
||||
} from '@/constants/common.constants'
|
||||
import { message, notification, modal } from '@/util/common'
|
||||
import { utcToLocalTime } from '@/util/datetime'
|
||||
import { getUserInfo, removeToken } from '@/util/auth'
|
||||
import { r_sys_user_info_change_password, r_sys_user_info_update } from '@/services/system'
|
||||
@@ -21,7 +22,6 @@ import HideScrollbar from '@/components/common/HideScrollbar'
|
||||
|
||||
const User = () => {
|
||||
const { styles, theme } = useStyles()
|
||||
const [modal, contextHolder] = AntdModal.useModal()
|
||||
const [form] = AntdForm.useForm<UserInfoUpdateParam>()
|
||||
const formValues = AntdForm.useWatch([], form)
|
||||
const [twoFactorForm] = AntdForm.useForm<{ twoFactorCode: string }>()
|
||||
@@ -180,7 +180,6 @@ const User = () => {
|
||||
const response = res.data
|
||||
switch (response.code) {
|
||||
case DATABASE_UPDATE_SUCCESS:
|
||||
void message.success('密码修改成功，请重新登录')
|
||||
removeToken()
|
||||
notification.info({
|
||||
message: '已退出登录',
|
||||
@@ -191,9 +190,9 @@ const User = () => {
|
||||
/>
|
||||
)
|
||||
})
|
||||
setTimeout(() => {
|
||||
message.success('密码修改成功，请重新登录').then(() => {
|
||||
window.location.reload()
|
||||
}, 1500)
|
||||
})
|
||||
resolve()
|
||||
break
|
||||
case PERMISSION_ACCESS_DENIED:
|
||||
@@ -312,7 +311,7 @@ const User = () => {
|
||||
return
|
||||
}
|
||||
setIsLoading(true)
|
||||
void message.loading({ content: '加载中', key: 'LOADING', duration: 0 })
|
||||
void message.loading({ content: '加载中……', key: 'LOADING', duration: 0 })
|
||||
void r_auth_two_factor_create()
|
||||
.then((res) => {
|
||||
message.destroy('LOADING')
|
||||
@@ -447,192 +446,180 @@ const User = () => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
className={styles.root}
|
||||
>
|
||||
<Card className={styles.content}>
|
||||
<FlexBox className={styles.info} direction={'horizontal'}>
|
||||
<AntdTooltip title={'点击获取新头像'}>
|
||||
<div className={styles.avatarBox}>
|
||||
<AntdAvatar
|
||||
src={
|
||||
<img
|
||||
src={`data:image/png;base64,${avatar}`}
|
||||
alt={'Avatar'}
|
||||
/>
|
||||
}
|
||||
size={144}
|
||||
style={{
|
||||
background: theme.colorBgLayout,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
className={styles.avatar}
|
||||
onClick={handleOnChangeAvatar}
|
||||
/>
|
||||
</div>
|
||||
</AntdTooltip>
|
||||
<FlexBox className={styles.infoName}>
|
||||
<div className={styles.nickname}>
|
||||
{userWithPowerInfoVo?.userInfo.nickname}
|
||||
</div>
|
||||
<a
|
||||
className={styles.url}
|
||||
onClick={handleOnCopyToClipboard(userWithPowerInfoVo?.username)}
|
||||
>
|
||||
{userWithPowerInfoVo?.username &&
|
||||
new URL(
|
||||
`/store/${userWithPowerInfoVo.username}`,
|
||||
import.meta.env.VITE_UI_URL
|
||||
).href}
|
||||
<Icon component={IconOxygenCopy} />
|
||||
</a>
|
||||
</FlexBox>
|
||||
<FitFullscreen>
|
||||
<HideScrollbar
|
||||
isShowVerticalScrollbar
|
||||
autoHideWaitingTime={1000}
|
||||
className={styles.root}
|
||||
>
|
||||
<Card className={styles.content}>
|
||||
<FlexBox className={styles.info} direction={'horizontal'}>
|
||||
<AntdTooltip title={'点击获取新头像'}>
|
||||
<div className={styles.avatarBox}>
|
||||
<AntdAvatar
|
||||
src={
|
||||
<img
|
||||
src={`data:image/png;base64,${avatar}`}
|
||||
alt={'Avatar'}
|
||||
/>
|
||||
}
|
||||
size={144}
|
||||
style={{
|
||||
background: theme.colorBgLayout,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
className={styles.avatar}
|
||||
onClick={handleOnChangeAvatar}
|
||||
/>
|
||||
</div>
|
||||
</AntdTooltip>
|
||||
<FlexBox className={styles.infoName}>
|
||||
<div className={styles.nickname}>
|
||||
{userWithPowerInfoVo?.userInfo.nickname}
|
||||
</div>
|
||||
<a
|
||||
className={styles.url}
|
||||
onClick={handleOnCopyToClipboard(userWithPowerInfoVo?.username)}
|
||||
>
|
||||
{userWithPowerInfoVo?.username &&
|
||||
new URL(
|
||||
`/store/${userWithPowerInfoVo.username}`,
|
||||
import.meta.env.VITE_UI_URL
|
||||
).href}
|
||||
<Icon component={IconOxygenCopy} />
|
||||
</a>
|
||||
</FlexBox>
|
||||
<FlexBox direction={'horizontal'} className={styles.header}>
|
||||
<div className={styles.title}>档案管理</div>
|
||||
<FlexBox className={styles.operation} direction={'horizontal'}>
|
||||
<AntdButton onClick={handleOnReset} loading={isLoading}>
|
||||
重置
|
||||
</AntdButton>
|
||||
<AntdButton
|
||||
onClick={handleOnSave}
|
||||
type={'primary'}
|
||||
disabled={isLoading || !isSubmittable}
|
||||
>
|
||||
保存
|
||||
</AntdButton>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
<FlexBox direction={'horizontal'} className={styles.header}>
|
||||
<div className={styles.title}>档案管理</div>
|
||||
<FlexBox className={styles.operation} direction={'horizontal'}>
|
||||
<AntdButton onClick={handleOnReset} loading={isLoading}>
|
||||
重置
|
||||
</AntdButton>
|
||||
<AntdButton
|
||||
onClick={handleOnSave}
|
||||
type={'primary'}
|
||||
disabled={isLoading || !isSubmittable}
|
||||
>
|
||||
保存
|
||||
</AntdButton>
|
||||
</FlexBox>
|
||||
<div className={styles.divider} />
|
||||
<FlexBox className={styles.list}>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>昵称</div>
|
||||
<div className={styles.input}>
|
||||
<AntdForm form={form}>
|
||||
<AntdForm.Item
|
||||
name={'nickname'}
|
||||
rules={[
|
||||
{ required: true, whitespace: true },
|
||||
{ min: 3, message: '昵称至少为3个字符' }
|
||||
]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<AntdInput
|
||||
maxLength={20}
|
||||
showCount
|
||||
disabled={isLoading}
|
||||
placeholder={'请输入昵称'}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
</AntdForm>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>用户名</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput disabled value={userWithPowerInfoVo?.username} />
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>邮箱</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput
|
||||
disabled
|
||||
value={userWithPowerInfoVo?.userInfo.email}
|
||||
/>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>注册时间</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput
|
||||
disabled
|
||||
value={utcToLocalTime(
|
||||
userWithPowerInfoVo?.createTime ?? ''
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
<div className={styles.divider} />
|
||||
<FlexBox className={styles.list}>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>上次登录 IP</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput disabled value={userWithPowerInfoVo?.lastLoginIp} />
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>上次登录时间</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput
|
||||
disabled
|
||||
value={utcToLocalTime(
|
||||
userWithPowerInfoVo?.lastLoginTime ?? ''
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>密码</div>
|
||||
<div className={styles.input}>
|
||||
<AntdSpace.Compact>
|
||||
<AntdInput disabled value={'********'} />
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
title={'更改密码'}
|
||||
disabled={isLoading}
|
||||
onClick={handleOnChangePassword}
|
||||
>
|
||||
<Icon component={IconOxygenRefresh} />
|
||||
</AntdButton>
|
||||
</AntdSpace.Compact>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>双因素</div>
|
||||
<div className={styles.input}>
|
||||
<AntdSpace.Compact>
|
||||
</FlexBox>
|
||||
<div className={styles.divider} />
|
||||
<FlexBox className={styles.list}>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>昵称</div>
|
||||
<div className={styles.input}>
|
||||
<AntdForm form={form}>
|
||||
<AntdForm.Item
|
||||
name={'nickname'}
|
||||
rules={[
|
||||
{ required: true, whitespace: true },
|
||||
{ min: 3, message: '昵称至少为3个字符' }
|
||||
]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<AntdInput
|
||||
disabled
|
||||
style={{
|
||||
color: userWithPowerInfoVo?.twoFactor
|
||||
? theme.colorPrimary
|
||||
: undefined
|
||||
}}
|
||||
value={
|
||||
userWithPowerInfoVo?.twoFactor ? '已设置' : '未设置'
|
||||
maxLength={20}
|
||||
showCount
|
||||
disabled={isLoading}
|
||||
placeholder={'请输入昵称'}
|
||||
/>
|
||||
</AntdForm.Item>
|
||||
</AntdForm>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>用户名</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput disabled value={userWithPowerInfoVo?.username} />
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>邮箱</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput disabled value={userWithPowerInfoVo?.userInfo.email} />
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>注册时间</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput
|
||||
disabled
|
||||
value={utcToLocalTime(userWithPowerInfoVo?.createTime ?? '')}
|
||||
/>
|
||||
</div>
|
||||
</FlexBox>
|
||||
</FlexBox>
|
||||
<div className={styles.divider} />
|
||||
<FlexBox className={styles.list}>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>上次登录 IP</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput disabled value={userWithPowerInfoVo?.lastLoginIp} />
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>上次登录时间</div>
|
||||
<div className={styles.input}>
|
||||
<AntdInput
|
||||
disabled
|
||||
value={utcToLocalTime(userWithPowerInfoVo?.lastLoginTime ?? '')}
|
||||
/>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>密码</div>
|
||||
<div className={styles.input}>
|
||||
<AntdSpace.Compact>
|
||||
<AntdInput disabled value={'********'} />
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
title={'更改密码'}
|
||||
disabled={isLoading}
|
||||
onClick={handleOnChangePassword}
|
||||
>
|
||||
<Icon component={IconOxygenRefresh} />
|
||||
</AntdButton>
|
||||
</AntdSpace.Compact>
|
||||
</div>
|
||||
</FlexBox>
|
||||
<FlexBox className={styles.row} direction={'horizontal'}>
|
||||
<div className={styles.label}>双因素</div>
|
||||
<div className={styles.input}>
|
||||
<AntdSpace.Compact>
|
||||
<AntdInput
|
||||
disabled
|
||||
style={{
|
||||
color: userWithPowerInfoVo?.twoFactor
|
||||
? theme.colorPrimary
|
||||
: undefined
|
||||
}}
|
||||
value={userWithPowerInfoVo?.twoFactor ? '已设置' : '未设置'}
|
||||
/>
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
title={userWithPowerInfoVo?.twoFactor ? '解绑' : '绑定'}
|
||||
disabled={isLoading}
|
||||
onClick={handleOnChangeTwoFactor(
|
||||
userWithPowerInfoVo?.twoFactor ?? false
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
component={
|
||||
userWithPowerInfoVo?.twoFactor
|
||||
? IconOxygenUnlock
|
||||
: IconOxygenLock
|
||||
}
|
||||
/>
|
||||
<AntdButton
|
||||
type={'primary'}
|
||||
title={userWithPowerInfoVo?.twoFactor ? '解绑' : '绑定'}
|
||||
disabled={isLoading}
|
||||
onClick={handleOnChangeTwoFactor(
|
||||
userWithPowerInfoVo?.twoFactor ?? false
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
component={
|
||||
userWithPowerInfoVo?.twoFactor
|
||||
? IconOxygenUnlock
|
||||
: IconOxygenLock
|
||||
}
|
||||
/>
|
||||
</AntdButton>
|
||||
</AntdSpace.Compact>
|
||||
</div>
|
||||
</FlexBox>
|
||||
</AntdButton>
|
||||
</AntdSpace.Compact>
|
||||
</div>
|
||||
</FlexBox>
|
||||
</Card>
|
||||
</HideScrollbar>
|
||||
</FitFullscreen>
|
||||
{contextHolder}
|
||||
</>
|
||||
</FlexBox>
|
||||
</Card>
|
||||
</HideScrollbar>
|
||||
</FitFullscreen>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user