trace-system/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): polish Profile page layout and user info display

Browse Source
This commit is contained in:
郑肖毅
2026-02-06 21:23:13 +08:00
parent 9c1e923336
commit e5b391f7b7
1 changed files with 92 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/pages/Profile.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal } from 'antd'; import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';
import { authApi } from '@/services/api'; import { authApi } from '@/services/api';
import type { User } from '@/types'; import type { User } from '@/types';
@@ -60,77 +60,108 @@ function ProfilePage() {
}; };
return ( return (
<div style={{ maxWidth: '800px', margin: '0 auto' }}> <div>
<Card <Card
title={ title={
<span> <span>
<UserOutlined /> 用户资料 <UserOutlined /> 用户资料
</span> </span>
} }
style={{ marginBottom: '24px' }} bordered={false}
> >
{user && ( <Row gutter={24}>
<Descriptions column={1} bordered style={{ marginBottom: '24px' }}> <Col span={12}>
<Descriptions.Item label="头像"> {user && (
<Avatar icon={<UserOutlined />} size={64} /> <Descriptions column={1} bordered>
</Descriptions.Item> <Descriptions.Item label="头像">
<Descriptions.Item label="用户名">{user.username}</Descriptions.Item> <Avatar icon={<UserOutlined />} size={64} />
<Descriptions.Item label="姓名">{user.name}</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="邮箱">{user.email || '-'}</Descriptions.Item> <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
<Descriptions.Item label="角色">{user.role}</Descriptions.Item> <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
<Descriptions.Item label="创建时间"> <Descriptions.Item label="邮箱">{user.email || '-'}</Descriptions.Item>
{new Date(user.createdAt).toLocaleString('zh-CN')} <Descriptions.Item label="角色">{user.role}</Descriptions.Item>
</Descriptions.Item> <Descriptions.Item label="创建时间">
</Descriptions> {new Date(user.createdAt).toLocaleString('zh-CN')}
)} </Descriptions.Item>
</Descriptions>
)}
</Col>
<Form <Col span={12}>
form={profileForm} <div style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
onFinish={handleUpdateProfile} 基础信息
layout="vertical" </div>
> <Form
<Form.Item form={profileForm}
label="姓名" onFinish={handleUpdateProfile}
name="name" layout="vertical"
rules={[{ required: true, message: '请输入姓名' }]} >
> <Form.Item
<Input /> label="姓名"
</Form.Item> name="name"
rules={[{ required: true, message: '请输入姓名' }]}
>
<Input />
</Form.Item>
<Form.Item <Form.Item
label="邮箱" label="邮箱"
name="email" name="email"
rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]} rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Space> <Space>
<Button type="primary" htmlType="submit" loading={loading}> <Button type="primary" htmlType="submit" loading={loading}>
保存资料 保存资料
</Button> </Button>
<Button onClick={loadUserProfile}> <Button onClick={loadUserProfile}>
重置 重置
</Button> </Button>
</Space> </Space>
</Form.Item> </Form.Item>
</Form> </Form>
<div style={{ marginTop: '24px', marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
安全
</div>
<Card
size="small"
bordered={false}
style={{ backgroundColor: '#fafafa' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Space>
<LockOutlined />
<span>修改密码</span>
</Space>
<Button type="primary" onClick={() => setPasswordModalVisible(true)}>
修改密码
</Button>
</div>
</Card>
<Card
size="small"
bordered={false}
style={{ marginTop: '16px', backgroundColor: '#fafafa' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Space>
<SafetyOutlined />
<span>双因素验证</span>
</Space>
<Button type="default">
启用
</Button>
</div>
</Card>
</Col>
</Row>
</Card> </Card>
<Card
title={
<span>
<LockOutlined /> 修改密码
</span>
}
extra={
<Button type="primary" onClick={() => setPasswordModalVisible(true)}>
修改密码
</Button>
}
/>
<Modal <Modal
title="修改密码" title="修改密码"
open={passwordModalVisible} open={passwordModalVisible}