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