feat: 新增个人中心页面,展示用户信息并提供密码修改和退出登录功能。

This commit is contained in:
2026-02-01 13:23:20 +08:00
parent a612adf68b
commit 325b23f05e

View File

@@ -55,7 +55,7 @@ export default function Profile() {
try { try {
await authService.updatePassword( await authService.updatePassword(
passwordForm.oldPassword, user!.has_password ? passwordForm.oldPassword : '',
passwordForm.newPassword passwordForm.newPassword
); );
setPasswordSuccess(true); setPasswordSuccess(true);
@@ -152,13 +152,13 @@ export default function Profile() {
</div> </div>
<div className="profile-stat-card"> <div className="profile-stat-card">
<div className="stat-icon-wrapper orange"> <div className="stat-icon-wrapper orange">
<Icon icon="solar:lock-keyhole-bold-duotone" width="24" /> <Icon icon="solar:lock-keyhole-bold-duotone" width="24" />
</div> </div>
<div className="stat-content"> <div className="stat-content">
<span className="stat-label"></span> <span className="stat-label"></span>
<span className="stat-value"></span> <span className="stat-value"></span>
</div> </div>
</div> </div>
</div> </div>
@@ -169,7 +169,7 @@ export default function Profile() {
onClick={() => setShowPasswordModal(true)} onClick={() => setShowPasswordModal(true)}
> >
<Icon icon="solar:lock-password-bold-duotone" width="20" /> <Icon icon="solar:lock-password-bold-duotone" width="20" />
<span className="btn-text"></span> <span className="btn-text">{user.has_password ? '修改密码' : '设置密码'}</span>
<Icon icon="solar:arrow-right-linear" width="18" className="btn-arrow" /> <Icon icon="solar:arrow-right-linear" width="18" className="btn-arrow" />
</button> </button>
@@ -188,7 +188,7 @@ export default function Profile() {
<div className="modal-overlay" onClick={() => setShowPasswordModal(false)}> <div className="modal-overlay" onClick={() => setShowPasswordModal(false)}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}> <div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-header"> <div className="modal-header">
<h3 className="modal-title"></h3> <h3 className="modal-title">{user.has_password ? '修改密码' : '设置登录密码'}</h3>
<button <button
className="modal-close" className="modal-close"
onClick={() => setShowPasswordModal(false)} onClick={() => setShowPasswordModal(false)}
@@ -208,25 +208,27 @@ export default function Profile() {
{passwordSuccess && ( {passwordSuccess && (
<div className="password-success"> <div className="password-success">
<Icon icon="solar:check-circle-bold-duotone" width="18" /> <Icon icon="solar:check-circle-bold-duotone" width="18" />
{user.has_password ? '密码修改成功' : '密码设置成功'}
</div>
)}
{user.has_password && (
<div className="password-field">
<label className="password-label"></label>
<input
type="password"
className="password-input"
value={passwordForm.oldPassword}
onChange={(e) =>
setPasswordForm({ ...passwordForm, oldPassword: e.target.value })
}
required
/>
</div> </div>
)} )}
<div className="password-field"> <div className="password-field">
<label className="password-label"></label> <label className="password-label">{user.has_password ? '新密码' : '设置密码'}</label>
<input
type="password"
className="password-input"
value={passwordForm.oldPassword}
onChange={(e) =>
setPasswordForm({ ...passwordForm, oldPassword: e.target.value })
}
required
/>
</div>
<div className="password-field">
<label className="password-label"></label>
<input <input
type="password" type="password"
className="password-input" className="password-input"
@@ -263,7 +265,7 @@ export default function Profile() {
</button> </button>
<button type="submit" className="password-btn password-btn--primary"> <button type="submit" className="password-btn password-btn--primary">
{user.has_password ? '确认修改' : '确认设置'}
</button> </button>
</div> </div>
</form> </form>