feat: 新增个人中心页面,展示用户信息并提供密码修改和退出登录功能。
This commit is contained in:
@@ -55,7 +55,7 @@ export default function Profile() {
|
||||
|
||||
try {
|
||||
await authService.updatePassword(
|
||||
passwordForm.oldPassword,
|
||||
user!.has_password ? passwordForm.oldPassword : '',
|
||||
passwordForm.newPassword
|
||||
);
|
||||
setPasswordSuccess(true);
|
||||
@@ -150,15 +150,15 @@ export default function Profile() {
|
||||
<span className="stat-value">#{user.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div className="stat-content">
|
||||
<span className="stat-label">安全设置</span>
|
||||
<span className="stat-value">已保护</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="stat-content">
|
||||
<span className="stat-label">安全设置</span>
|
||||
<span className="stat-value">已保护</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -169,7 +169,7 @@ export default function Profile() {
|
||||
onClick={() => setShowPasswordModal(true)}
|
||||
>
|
||||
<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" />
|
||||
</button>
|
||||
|
||||
@@ -188,7 +188,7 @@ export default function Profile() {
|
||||
<div className="modal-overlay" onClick={() => setShowPasswordModal(false)}>
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h3 className="modal-title">修改密码</h3>
|
||||
<h3 className="modal-title">{user.has_password ? '修改密码' : '设置登录密码'}</h3>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => setShowPasswordModal(false)}
|
||||
@@ -208,25 +208,27 @@ export default function Profile() {
|
||||
{passwordSuccess && (
|
||||
<div className="password-success">
|
||||
<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 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 className="password-field">
|
||||
<label className="password-label">新密码</label>
|
||||
<label className="password-label">{user.has_password ? '新密码' : '设置密码'}</label>
|
||||
<input
|
||||
type="password"
|
||||
className="password-input"
|
||||
@@ -263,7 +265,7 @@ export default function Profile() {
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" className="password-btn password-btn--primary">
|
||||
确认修改
|
||||
{user.has_password ? '确认修改' : '确认设置'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user