个人中心全部，模糊乱序搜索，类型筛选
Change-Id: Id635654fccccaea80bfbf4d1480abd55f7d12046
diff --git a/src/components/Personal/Setting.jsx b/src/components/Personal/Setting.jsx
index 967be6c..9ba07e8 100644
--- a/src/components/Personal/Setting.jsx
+++ b/src/components/Personal/Setting.jsx
@@ -1,97 +1,161 @@
-import React, { useState } from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useState,useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { getUserInfo, updatePassword } from '../../api/personal';
import './personalSubpage.css';
const Setting = ({ onLogout }) => {
const navigate = useNavigate();
const location = useLocation();
- // 模拟数据
- const [formData, setFormData] = useState({
- username: 'user123',
- email: 'user@example.com',
- notification: true
+ const [userInfo, setUserInfo] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [success, setSuccess] = useState(null);
+ const [passwordForm, setPasswordForm] = useState({
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: ''
});
- const handleChange = (e) => {
- const { name, value, type, checked } = e.target;
- setFormData(prev => ({
+ // 获取用户信息
+ useEffect(() => {
+ const fetchUserInfo = async () => {
+ try {
+ const info = await getUserInfo();
+ setUserInfo(info);
+ } catch (err) {
+ console.error('获取用户信息失败:', err);
+ }
+ };
+ fetchUserInfo();
+ }, []);
+
+ const handleBack = () => {
+ navigate('/personal', {
+ state: {
+ fromSubpage: true,
+ dashboardTab: location.state?.dashboardTab
+ },
+ replace: true
+ });
+ };
+
+ const handlePasswordChange = (e) => {
+ const { name, value } = e.target;
+ setPasswordForm(prev => ({
...prev,
- [name]: type === 'checkbox' ? checked : value
+ [name]: value
}));
};
- const handleSubmit = (e) => {
+ const handlePasswordSubmit = async (e) => {
e.preventDefault();
- alert('设置已保存');
- };
+ setError(null);
+ setSuccess(null);
- const handleBack = () => {
- // 返回个人中心，并携带来源标记
- navigate('/personal', {
- state: {
- fromSubpage: true, // 标记来自子页面
- dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
- },
- replace: true // 替换当前历史记录
- });
+ // 验证表单
+ if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
+ setError('请填写所有密码字段');
+ return;
+ }
+
+ if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+ setError('新密码与确认密码不一致');
+ return;
+ }
+
+ if (passwordForm.newPassword.length < 6) {
+ setError('新密码长度至少为6位');
+ return;
+ }
+
+ try {
+ setLoading(true);
+ await updatePassword(passwordForm.oldPassword, passwordForm.newPassword);
+ setSuccess('密码修改成功');
+ setPasswordForm({
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: ''
+ });
+ } catch (err) {
+ setError(err.message || '修改密码失败');
+ } finally {
+ setLoading(false);
+ }
};
return (
<div className="subpage-container">
- <button className="back-button" onClick={(handleBack)}>
+ <button className="back-button" onClick={handleBack}>
← 返回个人中心
</button>
- <h2 className="page-title">账号设置</h2>
-
- <form onSubmit={handleSubmit}>
- <div className="form-group">
- <label className="form-label">用户名</label>
- <input
- type="text"
- name="username"
- value={formData.username}
- onChange={handleChange}
- className="form-input"
- />
+ <h2 className="page-title">个人设置</h2>
+
+ <div className="setting-section">
+ <div className="user-info-card">
+ <h3>账户信息</h3>
+ <div className="info-item">
+ <label>用户名:</label>
+ <span>{userInfo?.username || '加载中...'}</span>
+ </div>
+ <p className="info-note">用户名不可更改</p>
</div>
- <div className="form-group">
- <label className="form-label">电子邮箱</label>
- <input
- type="email"
- name="email"
- value={formData.email}
- onChange={handleChange}
- className="form-input"
- />
- </div>
+ <div className="password-form-card">
+ <h3>修改密码</h3>
+ <form onSubmit={handlePasswordSubmit}>
+ <div className="form-group">
+ <label htmlFor="oldPassword">原密码:</label>
+ <input
+ type="password"
+ id="oldPassword"
+ name="oldPassword"
+ value={passwordForm.oldPassword}
+ onChange={handlePasswordChange}
+ required
+ />
+ </div>
- <div className="form-group">
- <label className="form-label">
- <input
- type="checkbox"
- name="notification"
- checked={formData.notification}
- onChange={handleChange}
- />
- 接收邮件通知
- </label>
- </div>
+ <div className="form-group">
+ <label htmlFor="newPassword">新密码:</label>
+ <input
+ type="password"
+ id="newPassword"
+ name="newPassword"
+ value={passwordForm.newPassword}
+ onChange={handlePasswordChange}
+ required
+ minLength="6"
+ />
+ </div>
- <div className="form-actions">
- <button type="submit" className="action-btn">
- 保存设置
- </button>
- <button
- type="button"
- className="action-btn danger-btn"
- onClick={onLogout}
- >
- 退出登录
- </button>
+ <div className="form-group">
+ <label htmlFor="confirmPassword">确认新密码:</label>
+ <input
+ type="password"
+ id="confirmPassword"
+ name="confirmPassword"
+ value={passwordForm.confirmPassword}
+ onChange={handlePasswordChange}
+ required
+ minLength="6"
+ />
+ </div>
+
+ {error && <div className="error-message">{error}</div>}
+ {success && <div className="success-message">{success}</div>}
+
+ <button
+ type="submit"
+ className="submit-button"
+ disabled={loading}
+ >
+ {loading ? '处理中...' : '修改密码'}
+ </button>
+ </form>
</div>
- </form>
+ </div>
</div>
);
};