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 ProfileForm from "./components/ProfileForm";
import ChangePasswordDialog from "./components/ChangePasswordDialog";
import { useProfileSetting } from "@/hooks/setting-hooks";
import logger from "@/utils/logger";

function ProfileSetting() {
  const { userInfo, updateUserInfo: updateUserInfoFunc, changeUserPassword: changeUserPasswordFunc } = useProfileSetting();
  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={updateUserInfoFunc} />
      
      {/* 分割线 */}
      <Divider sx={{ my: 4 }} />
      
      {/* 密码修改部分 */}
      <Box sx={{ p: 3 }}>
        <Typography variant="h6" gutterBottom sx={{ mb: 2, fontWeight: 600 }}>
          账户安全
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          定期更新密码有助于保护您的账户安全
        </Typography>
        
        <Button
          variant="outlined"
          startIcon={<Lock />}
          onClick={handleOpenPasswordDialog}
          sx={{ 
            minWidth: 140,
            borderColor: 'primary.main',
            color: 'primary.main',
            '&:hover': {
              backgroundColor: 'primary.main',
              color: 'white'
            }
          }}
        >
          修改密码
        </Button>
      </Box>

      {/* 修改密码对话框 */}
      <ChangePasswordDialog
        open={passwordDialogOpen}
        onClose={handleClosePasswordDialog}
        changeUserPassword={changeUserPasswordFunc}
      />
    </Box>
  );
}

export default ProfileSetting;