82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Box, Button, Divider, Typography } from "@mui/material";
|
||
import { Lock } from "@mui/icons-material";
|
||
import { useTranslation } from 'react-i18next';
|
||
import ProfileForm from "./components/ProfileForm";
|
||
import ChangePasswordDialog from "./components/ChangePasswordDialog";
|
||
import { useProfileSetting } from "@/hooks/setting-hooks";
|
||
import logger from "@/utils/logger";
|
||
import { useUserData } from "@/hooks/useUserData";
|
||
import { useAuth } from '@/hooks/login-hooks';
|
||
import { useNavigate } from "react-router-dom";
|
||
|
||
function ProfileSetting() {
|
||
const { t } = useTranslation();
|
||
const { userInfo, updateUserInfo: updateUserInfoFunc, changeUserPassword: changeUserPasswordFunc } = useProfileSetting();
|
||
const { refreshUserData } = useUserData();
|
||
const { logout } = useAuth();
|
||
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
|
||
|
||
logger.debug('userInfo', userInfo);
|
||
|
||
const handleOpenPasswordDialog = () => {
|
||
setPasswordDialogOpen(true);
|
||
};
|
||
|
||
const handleClosePasswordDialog = () => {
|
||
setPasswordDialogOpen(false);
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
|
||
{/* 个人资料表单 */}
|
||
<ProfileForm userInfo={userInfo} onSubmit={async (data) => {
|
||
await updateUserInfoFunc(data);
|
||
await refreshUserData();
|
||
}} />
|
||
|
||
{/* 分割线 */}
|
||
<Divider sx={{ my: 4 }} />
|
||
|
||
{/* 密码修改部分 */}
|
||
<Box sx={{ p: 3 }}>
|
||
<Typography variant="h6" gutterBottom sx={{ mb: 2, fontWeight: 600 }}>
|
||
{t('setting.accountSecurity')}
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
||
{t('setting.passwordUpdateTip')}
|
||
</Typography>
|
||
|
||
<Button
|
||
variant="outlined"
|
||
startIcon={<Lock />}
|
||
onClick={handleOpenPasswordDialog}
|
||
sx={{
|
||
minWidth: 140,
|
||
borderColor: 'primary.main',
|
||
color: 'primary.main',
|
||
'&:hover': {
|
||
backgroundColor: 'primary.main',
|
||
color: 'white'
|
||
}
|
||
}}
|
||
>
|
||
{t('setting.changePassword')}
|
||
</Button>
|
||
</Box>
|
||
|
||
{/* 修改密码对话框 */}
|
||
<ChangePasswordDialog
|
||
open={passwordDialogOpen}
|
||
onClose={handleClosePasswordDialog}
|
||
onSuccess={() => {
|
||
// 使用 useAuth 的 logout，确保清除本地存储令牌并跳转登录
|
||
logout();
|
||
}}
|
||
changeUserPassword={changeUserPasswordFunc}
|
||
/>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
export default ProfileSetting; |