src/assets/css/constants.scss

@@ -10,6 +10,7 @@ $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;
 $font-secondary-color: #9E9E9E;
 $focus-color: #DDDDDD;
+$divide-color: rgba(204, 204, 204, 0.66);
 $border-color: rgba(204, 204, 204, 0.33);
 $url-color: rgba(102, 102, 102, .8);
 $url-active-color: #ccc;

src/assets/css/pages/user/index.scss

@@ -0,0 +1,135 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=user] .root-content {
+  padding: {
+    top: 80px;
+    left: 30px;
+    right: 30px;
+    bottom: 30px;
+  };
+
+  .card-box {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    align-items: center;
+    min-width: 900px;
+    padding-bottom: 20px;
+
+    > :not(:first-child) {
+      padding: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .divide {
+      height: 1px;
+      width: calc(100% - 120px);
+      background-color: constants.$divide-color;
+      margin: {
+        left: 60px;
+        right: 60px;
+      };
+    }
+
+    .info {
+      margin-left: 40px;
+      transform: translateY(-40px);
+
+      > * {
+        flex: 0 0 auto;
+      }
+
+      .avatar-box {
+        background-color: white;
+        padding: 4px;
+        border-radius: 50%;
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .avatar {
+          background-color: transparent !important;
+        }
+      }
+
+      .info-name {
+        margin: {
+          top: 20px;
+          left: 24px;
+        };
+        justify-content: center;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .nickname {
+          font-size: 2.4em;
+          font-weight: bolder;
+          color: constants.$production-color;
+        }
+
+        .url {
+          > span {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .title {
+      align-items: center;
+
+      .content {
+        padding: {
+          bottom: 30px;
+        };
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .text {
+          font-size: 1.6em;
+          font-weight: bolder;
+        }
+
+        .operation {
+          gap: 10px;
+        }
+      }
+    }
+
+    .table {
+      gap: 24px;
+
+      padding: {
+        top: 30px;
+        bottom: 20px;
+      };
+
+      .row {
+        > * {
+          flex: 0 0 auto;
+        }
+
+        .label {
+          font-size: 1.4em;
+          font-weight: bolder;
+          width: 400px;
+        }
+
+        .input {
+          width: 400px;
+
+          > * {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/svg/share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M1001.627381 394.106435a44.521739 44.521739 0 1 1-88.598261 0V208.228174l-398.914783 398.914783a54.049391 54.049391 0 1 1-76.577391-76.310261l397.579131-397.490087h-182.984348a44.78887 44.78887 0 1 1 0-89.043479h298.740869c1.335652 0 2.226087 0.534261 3.561739 0.623305s1.78087-0.623304 2.671305-0.623305a40.069565 40.069565 0 0 1 27.158261 11.620174c1.157565 0.667826 2.226087 1.513739 3.116521 2.448696 0.890435 0.979478 1.78087 2.092522 2.671305 3.161043a41.360696 41.360696 0 0 1 11.575652 27.158261c0 0.979478-0.445217 1.825391-0.445218 2.80487s0.445217 2.359652 0.445218 3.650783v298.963478zM111.192598 934.956522h712.347826v-400.695652h89.043479v400.695652a89.043478 89.043478 0 0 1-89.043479 89.043478H111.192598a89.043478 89.043478 0 0 1-89.043478-89.043478V222.608696a89.043478 89.043478 0 0 1 89.043478-89.043479h400.695652v89.043479H111.192598v712.347826z" /></svg>

src/global.d.ts

@@ -59,6 +59,11 @@ interface TokenVo {
     token: string
 }
 
+interface UserInfoUpdateParam {
+    avatar?: string
+    nickname?: string
+}
+
 interface RegisterParam {
     username: string
     email: string
@@ -89,6 +94,11 @@ interface LoginParam {
     captchaCode: string
 }
 
+interface UserChangePasswordParam {
+    originalPassword: string
+    newPassword: string
+}
+
 interface UserWithInfoVo {
     id: string
     username: string
@@ -243,7 +253,7 @@ interface UserAddEditParam {
     groupIds: number[]
 }
 
-interface UserChangePasswordParam {
+interface UserUpdatePasswordParam {
     id: string
     password: string
     credentialsExpiration?: string

src/pages/System/User.tsx

@@ -30,7 +30,7 @@ import HideScrollbar from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 import Card from '@/components/common/Card'
 
-interface ChangePasswordFields extends UserChangePasswordParam {
+interface ChangePasswordFields extends UserUpdatePasswordParam {
     passwordConfirm: string
     needChangePassword: boolean
 }
@@ -200,7 +200,7 @@ const User = () => {
                                 style={{ color: COLOR_PRODUCTION }}
                                 onClick={handleOnChangePasswordBtnClick(record)}
                             >
-                                修改密码
+                                更改密码
                             </a>
                         </Permission>
                         <Permission operationCode={['system:user:modify:one']}>

src/pages/User/index.tsx

@@ -1,5 +1,394 @@
+import Icon from '@ant-design/icons'
+import '@/assets/css/pages/user/index.scss'
+import {
+    COLOR_BACKGROUND,
+    COLOR_ERROR,
+    COLOR_PRODUCTION,
+    DATABASE_UPDATE_SUCCESS,
+    PERMISSION_ACCESS_DENIED,
+    PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR
+} from '@/constants/common.constants'
+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'
+import { r_api_avatar_random_base64 } from '@/services/api/avatar'
+import FitFullscreen from '@/components/common/FitFullscreen'
+import Card from '@/components/common/Card'
+import FlexBox from '@/components/common/FlexBox'
+import HideScrollbar from '@/components/common/HideScrollbar'
+
+interface ChangePasswordFields extends UserUpdatePasswordParam {
+    newPasswordConfirm: string
+}
+
 const User = () => {
-    return <></>
+    const [modal, contextHolder] = AntdModal.useModal()
+    const [form] = AntdForm.useForm<UserInfoUpdateParam>()
+    const formValues = AntdForm.useWatch([], form)
+    const [isLoading, setIsLoading] = useState(false)
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [isSubmittable, setIsSubmittable] = useState(false)
+    const [isGettingAvatar, setIsGettingAvatar] = useState(false)
+    const [avatar, setAvatar] = useState('')
+    const [userWithPowerInfoVo, setUserWithPowerInfoVo] = useState<UserWithPowerInfoVo>()
+    const [changePasswordForm] = AntdForm.useForm<ChangePasswordFields>()
+
+    const handleOnReset = () => {
+        getProfile()
+    }
+
+    const handleOnSave = () => {
+        if (isSubmitting) {
+            return
+        }
+        setIsSubmitting(true)
+        void message.loading({ content: '保存中', key: 'LOADING', duration: 0 })
+
+        void r_sys_user_info_update({ avatar, nickname: formValues.nickname })
+            .then((res) => {
+                const response = res.data
+                switch (response.code) {
+                    case DATABASE_UPDATE_SUCCESS:
+                        void message.success('保存成功')
+                        getProfile()
+                        break
+                    default:
+                        void message.error('保存失败，请稍后重试')
+                }
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+                void message.destroy('LOADING')
+            })
+    }
+
+    const handleOnChangeAvatar = () => {
+        if (isLoading || isGettingAvatar) {
+            return
+        }
+        setIsGettingAvatar(true)
+        void r_api_avatar_random_base64()
+            .then((res) => {
+                const response = res.data
+                if (response.success) {
+                    response.data?.base64 && setAvatar(response.data.base64)
+                }
+            })
+            .finally(() => {
+                setIsGettingAvatar(false)
+            })
+    }
+
+    const handleOnChangePassword = () => {
+        changePasswordForm.resetFields()
+
+        void modal.confirm({
+            icon: <></>,
+            title: (
+                <>
+                    <Icon
+                        style={{ color: COLOR_PRODUCTION, marginRight: 10 }}
+                        component={IconOxygenSetting}
+                    />
+                    修改密码
+                </>
+            ),
+            maskClosable: true,
+            content: (
+                <AntdForm
+                    form={changePasswordForm}
+                    style={{ marginTop: 20 }}
+                    labelCol={{ span: 6 }}
+                    wrapperCol={{ span: 18 }}
+                >
+                    <AntdForm.Item
+                        name={'originalPassword'}
+                        label={'原密码'}
+                        labelAlign={'right'}
+                        rules={[{ required: true, message: '请输入原密码' }]}
+                    >
+                        <AntdInput.Password placeholder={'请输入原密码'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'newPassword'}
+                        label={'新密码'}
+                        labelAlign={'right'}
+                        rules={[
+                            { required: true, message: '请输入新密码' },
+                            { min: 10, message: '密码至少为10位' },
+                            { max: 30, message: '密码最多为30位' }
+                        ]}
+                    >
+                        <AntdInput.Password placeholder={'请输入新密码'} />
+                    </AntdForm.Item>
+                    <AntdForm.Item
+                        name={'newPasswordConfirm'}
+                        label={'确认密码'}
+                        labelAlign={'right'}
+                        rules={[
+                            { required: true, message: '请确认密码' },
+                            ({ getFieldValue }) => ({
+                                validator(_, value) {
+                                    if (!value || getFieldValue('newPassword') === value) {
+                                        return Promise.resolve()
+                                    }
+                                    return Promise.reject(new Error('两次密码输入必须一致'))
+                                }
+                            })
+                        ]}
+                    >
+                        <AntdInput.Password placeholder={'请确认密码'} />
+                    </AntdForm.Item>
+                </AntdForm>
+            ),
+            onOk: () =>
+                changePasswordForm.validateFields().then(
+                    () => {
+                        return new Promise<void>((resolve, reject) => {
+                            void r_sys_user_info_change_password({
+                                originalPassword: changePasswordForm.getFieldValue(
+                                    'originalPassword'
+                                ) as string,
+                                newPassword: changePasswordForm.getFieldValue(
+                                    'newPassword'
+                                ) as string
+                            }).then((res) => {
+                                const response = res.data
+                                switch (response.code) {
+                                    case DATABASE_UPDATE_SUCCESS:
+                                        void message.success('密码修改成功，请重新登录')
+                                        removeToken()
+                                        notification.info({
+                                            message: '已退出登录',
+                                            icon: (
+                                                <Icon
+                                                    component={IconOxygenExit}
+                                                    style={{ color: COLOR_ERROR }}
+                                                />
+                                            )
+                                        })
+                                        setTimeout(() => {
+                                            window.location.reload()
+                                        }, 1500)
+                                        resolve()
+                                        break
+                                    case PERMISSION_ACCESS_DENIED:
+                                        void message.error('拒绝访问')
+                                        resolve()
+                                        break
+                                    case PERMISSION_LOGIN_USERNAME_PASSWORD_ERROR:
+                                        void message.warning('原密码错误，请重新输入')
+                                        reject(response.msg)
+                                        break
+                                    default:
+                                        void message.error('出错了，请稍后重试')
+                                        resolve()
+                                }
+                            })
+                        })
+                    },
+                    () => {
+                        return new Promise((_, reject) => {
+                            reject('输入有误')
+                        })
+                    }
+                )
+        })
+    }
+
+    const getProfile = () => {
+        if (isLoading) {
+            return
+        }
+        setIsLoading(true)
+
+        void getUserInfo(true)
+            .then((userWithPowerInfoVo) => {
+                setAvatar(userWithPowerInfoVo.userInfo.avatar)
+                form.setFieldValue('nickname', userWithPowerInfoVo.userInfo.nickname)
+                setUserWithPowerInfoVo(userWithPowerInfoVo)
+            })
+            .finally(() => {
+                setIsLoading(false)
+            })
+    }
+
+    useEffect(() => {
+        form.validateFields({ validateOnly: true }).then(
+            () => {
+                setIsSubmittable(true)
+            },
+            () => {
+                setIsSubmittable(false)
+            }
+        )
+    }, [formValues])
+
+    useEffect(() => {
+        getProfile()
+    }, [])
+
+    return (
+        <>
+            <FitFullscreen data-component={'user'}>
+                <HideScrollbar
+                    isShowVerticalScrollbar
+                    autoHideWaitingTime={1000}
+                    className={'root-content'}
+                >
+                    <Card>
+                        <FlexBox className={'info'} direction={'horizontal'}>
+                            <AntdTooltip title={'点击获取新头像'}>
+                                <div className={'avatar-box'}>
+                                    <AntdAvatar
+                                        src={
+                                            <img
+                                                src={`data:image/png;base64,${avatar}`}
+                                                alt={'Avatar'}
+                                            />
+                                        }
+                                        size={144}
+                                        style={{
+                                            background: COLOR_BACKGROUND,
+                                            cursor: 'pointer'
+                                        }}
+                                        className={'avatar'}
+                                        onClick={handleOnChangeAvatar}
+                                    />
+                                </div>
+                            </AntdTooltip>
+                            <FlexBox className={'info-name'}>
+                                <div className={'nickname'}>
+                                    {userWithPowerInfoVo?.userInfo.nickname}
+                                </div>
+                                <a
+                                    className={'url'}
+                                    href={
+                                        userWithPowerInfoVo?.username &&
+                                        new URL(
+                                            `/view/${userWithPowerInfoVo.username}`,
+                                            location.href
+                                        ).href
+                                    }
+                                >
+                                    {userWithPowerInfoVo?.username &&
+                                        new URL(
+                                            `/view/${userWithPowerInfoVo.username}`,
+                                            location.href
+                                        ).href}
+                                    <Icon component={IconOxygenShare} />
+                                </a>
+                            </FlexBox>
+                        </FlexBox>
+                        <FlexBox className={'title'}>
+                            <FlexBox direction={'horizontal'} className={'content'}>
+                                <div className={'text'}>档案管理</div>
+                                <FlexBox className={'operation'} direction={'horizontal'}>
+                                    <AntdButton onClick={handleOnReset} loading={isLoading}>
+                                        重置
+                                    </AntdButton>
+                                    <AntdButton
+                                        onClick={handleOnSave}
+                                        type={'primary'}
+                                        disabled={isLoading || !isSubmittable}
+                                    >
+                                        保存
+                                    </AntdButton>
+                                </FlexBox>
+                            </FlexBox>
+                        </FlexBox>
+                        <div className={'divide'} />
+                        <FlexBox className={'profile table'}>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>昵称</div>
+                                <div className={'input'}>
+                                    <AntdForm form={form}>
+                                        <AntdForm.Item
+                                            name={'nickname'}
+                                            rules={[
+                                                { required: true, message: '请输入昵称' },
+                                                { min: 3, message: '昵称至少为3个字符' }
+                                            ]}
+                                            style={{ marginBottom: 0 }}
+                                        >
+                                            <AntdInput
+                                                maxLength={20}
+                                                showCount
+                                                disabled={isLoading}
+                                            />
+                                        </AntdForm.Item>
+                                    </AntdForm>
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>用户名</div>
+                                <div className={'input'}>
+                                    <AntdInput disabled value={userWithPowerInfoVo?.username} />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>邮箱</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={userWithPowerInfoVo?.userInfo.email}
+                                    />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>注册时间</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={utcToLocalTime(
+                                            userWithPowerInfoVo?.createTime ?? ''
+                                        )}
+                                    />
+                                </div>
+                            </FlexBox>
+                        </FlexBox>
+                        <div className={'divide'} />
+                        <FlexBox className={'security table'}>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>上次登录 IP</div>
+                                <div className={'input'}>
+                                    <AntdInput disabled value={userWithPowerInfoVo?.lastLoginIp} />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>上次登录时间</div>
+                                <div className={'input'}>
+                                    <AntdInput
+                                        disabled
+                                        value={utcToLocalTime(
+                                            userWithPowerInfoVo?.lastLoginTime ?? ''
+                                        )}
+                                    />
+                                </div>
+                            </FlexBox>
+                            <FlexBox className={'row'} direction={'horizontal'}>
+                                <div className={'label'}>密码</div>
+                                <div className={'input'}>
+                                    <AntdSpace.Compact>
+                                        <AntdInput disabled value={'********'} />
+                                        <AntdButton
+                                            type={'primary'}
+                                            title={'更改密码'}
+                                            disabled={isLoading}
+                                            onClick={handleOnChangePassword}
+                                        >
+                                            <Icon component={IconOxygenRefresh} />
+                                        </AntdButton>
+                                    </AntdSpace.Compact>
+                                </div>
+                            </FlexBox>
+                        </FlexBox>
+                    </Card>
+                </HideScrollbar>
+            </FitFullscreen>
+            {contextHolder}
+        </>
+    )
 }
 
 export default User

src/services/system.tsx

@@ -24,7 +24,13 @@ import {
 } from '@/constants/urls.constants'
 import request from '@/services/index'
 
-export const r_sys_user_info = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
+export const r_sys_user_info_get = () => request.get<UserWithPowerInfoVo>(URL_SYS_USER_INFO)
+
+export const r_sys_user_info_update = (param: UserInfoUpdateParam) =>
+    request.patch(URL_SYS_USER_INFO, param)
+
+export const r_sys_user_info_change_password = (param: UserChangePasswordParam) =>
+    request.post(URL_SYS_USER_INFO, param)
 
 export const r_sys_user_get = (param: UserGetParam) =>
     request.get<PageVo<UserWithRoleInfoVo>>(URL_SYS_USER, param)
@@ -33,7 +39,7 @@ export const r_sys_user_add = (param: UserAddEditParam) => request.post(URL_SYS_
 
 export const r_sys_user_update = (param: UserAddEditParam) => request.put(URL_SYS_USER, param)
 
-export const r_sys_user_change_password = (param: UserChangePasswordParam) =>
+export const r_sys_user_change_password = (param: UserUpdatePasswordParam) =>
     request.patch(URL_SYS_USER, param)
 
 export const r_sys_user_delete = (id: string) => request.delete(`${URL_SYS_USER}/${id}`)

src/util/auth.tsx

@@ -7,7 +7,7 @@ import {
 import { floorNumber, randomColor, randomFloat, randomInt } from '@/util/common'
 import { getLocalStorage, removeLocalStorage, setLocalStorage } from '@/util/browser'
 import { getFullTitle } from '@/util/route'
-import { r_sys_user_info } from '@/services/system'
+import { r_sys_user_info_get } from '@/services/system'
 
 let captcha: Captcha
 
@@ -90,7 +90,7 @@ export const getUserInfo = async (force = false): Promise<UserWithPowerInfoVo> =
 export const requestUserInfo = async () => {
     let user: UserWithPowerInfoVo | null
 
-    await r_sys_user_info().then((value) => {
+    await r_sys_user_info_get().then((value) => {
         const response = value.data
         if (response.code === DATABASE_SELECT_SUCCESS) {
             user = response.data