TERES_web_frontend/src/pages/setting/profile.tsx

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;