feat: 完成TikTok短剧管理后台基础功能开发
本次提交搭建了完整的后台管理系统,包含: 1. 登录认证与权限校验体系 2. 工作台、短剧、用户、角色、人员、日志等全业务模块 3. 响应式布局与通用样式组件 4. 菜单动态过滤与路由权限控制 5. 移除了README中冗余的权限管理菜单项
This commit is contained in:
112
src/Profile/index.tsx
Normal file
112
src/Profile/index.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Avatar, Button, Card, Form, Input, Message } from '@arco-design/web-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { ApiResponse, AdminProfile } from '../api/types';
|
||||
import { TOKEN_KEY, api } from '../api/client';
|
||||
import './index.css';
|
||||
|
||||
function ProfilePage() {
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
const [passwordForm] = Form.useForm();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [changingPassword, setChangingPassword] = useState(false);
|
||||
const [profile, setProfile] = useState<AdminProfile | null>(null);
|
||||
|
||||
const loadProfile = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.get<ApiResponse<AdminProfile>>('/api/admin/v1/auth/profile');
|
||||
setProfile(response.data.data);
|
||||
form.setFieldsValue({
|
||||
nickname: response.data.data.nickname,
|
||||
email: response.data.data.email,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void loadProfile();
|
||||
}, []);
|
||||
|
||||
const updateProfile = async (values: { nickname?: string; email?: string }) => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const response = await api.patch<ApiResponse<AdminProfile>>('/api/admin/v1/auth/profile', values);
|
||||
setProfile(response.data.data);
|
||||
Message.success('个人信息已更新');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const changePassword = async (values: { oldPassword: string; newPassword: string; confirmPassword: string }) => {
|
||||
if (values.newPassword !== values.confirmPassword) {
|
||||
Message.error('两次输入的新密码不一致');
|
||||
return;
|
||||
}
|
||||
setChangingPassword(true);
|
||||
try {
|
||||
await api.patch('/api/admin/v1/auth/password', {
|
||||
oldPassword: values.oldPassword,
|
||||
newPassword: values.newPassword,
|
||||
});
|
||||
Message.success('密码修改成功,请重新登录');
|
||||
passwordForm.resetFields();
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
navigate('/login', { replace: true });
|
||||
} finally {
|
||||
setChangingPassword(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="profile-grid">
|
||||
<Card className="section-card" title="个人中心" loading={loading}>
|
||||
<div className="profile-summary">
|
||||
<Avatar size={56}>{profile?.username?.slice(0, 1).toUpperCase() || 'A'}</Avatar>
|
||||
<div>
|
||||
<h2>{profile?.nickname || profile?.username || '管理员'}</h2>
|
||||
<p>{profile?.email || '未设置邮箱'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-info-list">
|
||||
<div><span>用户名</span><strong>{profile?.username || '-'}</strong></div>
|
||||
<div><span>状态</span><strong>{profile?.status === 'active' ? '启用' : '禁用'}</strong></div>
|
||||
<div><span>角色</span><strong>{profile?.isSuperAdmin ? '超级管理员' : profile?.roles.map((role) => role.name).join('、') || '-'}</strong></div>
|
||||
<div><span>创建时间</span><strong>{profile?.createdAt || '-'}</strong></div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="section-card" title="修改个人信息">
|
||||
<Form form={form} layout="vertical" onSubmit={updateProfile}>
|
||||
<Form.Item label="姓名" field="nickname">
|
||||
<Input placeholder="请输入姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item label="邮箱" field="email" rules={[{ type: 'email', message: '请输入正确的邮箱地址' }]}>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={saving}>保存修改</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card className="section-card" title="修改密码">
|
||||
<Form form={passwordForm} layout="vertical" onSubmit={changePassword}>
|
||||
<Form.Item label="旧密码" field="oldPassword" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="请输入旧密码" />
|
||||
</Form.Item>
|
||||
<Form.Item label="新密码" field="newPassword" rules={[{ required: true }, { minLength: 6, message: '新密码至少 6 位' }]}>
|
||||
<Input.Password placeholder="请输入新密码" />
|
||||
</Form.Item>
|
||||
<Form.Item label="确认新密码" field="confirmPassword" rules={[{ required: true }]}>
|
||||
<Input.Password placeholder="请再次输入新密码" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={changingPassword}>确认修改</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfilePage;
|
||||
Reference in New Issue
Block a user