feat(settings): add user profile and password management

src/pages/setting/profile.tsx

@@ -1,8 +1,67 @@
+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 (
-    <div>
-      <h1>Profile Setting</h1>
-    </div>
+    <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>
   );
 }