Skip to content

Commit

Permalink
feat: 用户信息ui展示优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sioncovy
Sioncovy committed May 28, 2024
1 parent 2f2d37e commit 2c13faf
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 145 deletions.
133 changes: 68 additions & 65 deletions src/components/UserInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,77 +33,80 @@ function UserInfo(props: UserInfoProps) {
return (
<Flex justify="center">
{messageContextHolder}
<Flex gap={40} className={styles.container}>
<Flex gap={8} vertical className={styles.left}>
<img className={styles.avatar} src={user.avatar} />
<Flex vertical gap={0}>
<Typography.Text
<Card>
<Flex gap={40} className={styles.container}>
<Flex gap={8} vertical className={styles.left}>
<img className={styles.avatar} src={user.avatar} />
<Flex vertical gap={0}>
<Typography.Text
style={{
fontSize: token.fontSizeHeading4,
color: token.colorTextTertiary,
marginBottom: -token.marginXS
}}
>
{user.username}
</Typography.Text>
<Typography.Text style={{ fontSize: token.fontSizeHeading3 }}>
{user.nickname}
</Typography.Text>
</Flex>
<Flex vertical gap={0}>
{/* <div style={{ fontSize: token.fontSizeHeading5 }}>四川·乐山</div> */}
<Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>
{user.email}
</Typography.Text>
</Flex>
<Flex>
<Button
block
onClick={async () => {
if (friend && username) {
const chat = await mailpenDatabase.chats
.findOne({ selector: { _id: username } })
.exec()
if (!chat) {
await mailpenDatabase.chats.insert({
_id: username,
name:
friend.remark || friend.nickname || friend.username,
avatar: friend.avatar,
message: null,
count: 0,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
pinned: false
})
}
navigate(`/chat/${username}`)
} else {
createRequest({
friendId: username || user._id
}).then(() => {
messageApi.success('好友申请成功')
})
}
}}
>
{friend ? '去聊天' : '添加好友'}
</Button>
</Flex>
</Flex>
<Card className={styles.right}>
<div
style={{
fontSize: token.fontSizeHeading4,
color: token.colorTextTertiary,
marginBottom: -token.marginXS
color: token.colorTextSecondary,
marginBottom: token.marginXS
}}
>
{user.username}
</Typography.Text>
<Typography.Text style={{ fontSize: token.fontSizeHeading3 }}>
{user.nickname}
</Typography.Text>
</Flex>
<Flex vertical gap={0}>
<div style={{ fontSize: token.fontSizeHeading5 }}>四川·乐山</div>
个人简介
</div>
<Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>
{user.email}
{user.bio}
</Typography.Text>
</Flex>
<Flex>
<Button
block
onClick={async () => {
if (friend && username) {
const chat = await mailpenDatabase.chats
.findOne({ selector: { _id: username } })
.exec()
if (!chat) {
await mailpenDatabase.chats.insert({
_id: username,
name: friend.remark || friend.nickname || friend.username,
avatar: friend.avatar,
message: null,
count: 0,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
pinned: false
})
}
navigate(`/chat/${username}`)
} else {
createRequest({
friendId: username || user._id
}).then(() => {
messageApi.success('好友申请成功')
})
}
}}
>
{friend ? '去聊天' : '添加好友'}
</Button>
</Flex>
</Card>
</Flex>
<Card className={styles.right}>
<div
style={{
color: token.colorTextSecondary,
marginBottom: token.marginXS
}}
>
个人简介
</div>
<Typography.Text style={{ fontSize: token.fontSizeHeading5 }}>
{user.bio}
</Typography.Text>
</Card>
</Flex>
</Card>
</Flex>
)
}
Expand Down
43 changes: 27 additions & 16 deletions src/pages/Contact/ContactSearch/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card, Flex, Input } from 'antd'
import { Card, Flex, Input, Typography } from 'antd'
import { useState } from 'react'
import { queryUserInfo } from '@/apis'
import UserInfo from '@/components/UserInfo'
Expand All @@ -10,22 +10,33 @@ function ContactSearch() {
const [userInfo, setUserInfo] = useState<UserPublic | null>(null)

return (
<Flex vertical gap={token.paddingLG} style={{ padding: token.paddingLG }}>
<Card style={{ width: '100%' }}>
<Input.Search
placeholder="搜索用户"
onSearch={(value) => {
queryUserInfo(value).then((res) => {
setUserInfo(res)
})
}}
/>
<Flex
vertical
gap={token.paddingLG}
style={{
padding: token.paddingLG,
background: token.colorBgLayout,
height: '100%'
}}
>
<Typography.Title level={3}>搜索用户</Typography.Title>
<Card style={{ width: '100%', flex: 1 }}>
<Flex vertical gap={24}>
<Input.Search
placeholder="搜索用户"
onSearch={(value) => {
queryUserInfo(value).then((res) => {
setUserInfo(res)
})
}}
/>
{userInfo && (
<Card style={{ width: '100%' }}>
<UserInfo user={userInfo} />
</Card>
)}
</Flex>
</Card>
{userInfo && (
<Card style={{ width: '100%' }}>
<UserInfo user={userInfo} />
</Card>
)}
</Flex>
)
}
Expand Down
150 changes: 86 additions & 64 deletions src/pages/Contact/RequestList/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Dropdown, Flex, Modal, Typography } from 'antd'
import { useEffect, useState } from 'react'
import styles from './index.module.less'
import { approveRequest, queryRequestList, rejectRequest } from '@/apis'
import { useAppStore, useThemeToken, useTime } from '@/hooks'
import { FriendRequestStatus, type Request } from '@/typings'
import { Dropdown, Flex, Modal, Typography } from 'antd'
import { useEffect, useState } from 'react'
import styles from './index.module.less'

function RequestList() {
const [userInfo] = useAppStore(state => [state.userInfo])
const [userInfo] = useAppStore((state) => [state.userInfo])
const [requestList, setRequestList] = useState<Request[]>([])
const time = useTime()
const { token } = useThemeToken()
Expand All @@ -19,76 +19,98 @@ function RequestList() {
}, [])

return (
<Flex vertical className={styles.container} align="center">
<Flex vertical gap={12} className={styles.container} align="center">
{modalContextHolder}
{requestList.map((request) => {
const isSelf = userInfo._id === request.user._id
const friend = isSelf ? request.friend : request.user
return (
(
<Flex
className={styles.requestItem}
style={{ padding: `${token.paddingMD}px ${token.paddingXL}px` }}
key={request._id}
>
<Flex gap={20} flex={1}>
<div className={styles.avatar}>
<img src={friend.avatar} alt={`${friend.nickname || friend.username}头像`} />
</div>
<Flex vertical gap={8} justify="center">
<Flex gap={4} align="center">
<Typography.Text className={styles.nickname} style={{ fontWeight: 'bold', color: token.colorPrimary }}>
{friend.nickname || friend.username}
</Typography.Text>
{isSelf ? (<Typography.Text>正在验证你的邀请</Typography.Text>) : (<Typography.Text>请求添加为好友</Typography.Text>)}
<Typography.Text type="secondary" style={{ textAlign: 'center' }}>
{time(request.createdAt).format('YYYY-MM-DD')}
</Typography.Text>
</Flex>
<Typography.Text type="secondary">
留言：
{request.reason || (isSelf ? '请求添加对方为好友' : '请求添加你为好友')}
<Flex
className={styles.requestItem}
style={{ padding: `${token.paddingMD}px ${token.paddingXL}px` }}
key={request._id}
>
<Flex gap={20} flex={1}>
<div className={styles.avatar}>
<img
src={friend.avatar}
alt={`${friend.nickname || friend.username}头像`}
/>
</div>
<Flex vertical gap={8} justify="center">
<Flex gap={4} align="center">
<Typography.Text
className={styles.nickname}
style={{ fontWeight: 'bold', color: token.colorPrimary }}
>
{friend.nickname || friend.username}
</Typography.Text>
{isSelf ? (
<Typography.Text>正在验证你的邀请</Typography.Text>
) : (
<Typography.Text>请求添加为好友</Typography.Text>
)}
<Typography.Text
type="secondary"
style={{ textAlign: 'center' }}
>
{time(request.createdAt).format('YYYY-MM-DD')}
</Typography.Text>
</Flex>
<Typography.Text type="secondary">
留言：
{request.reason ||
(isSelf ? '请求添加对方为好友' : '请求添加你为好友')}
</Typography.Text>
</Flex>
<Flex align="center">
{isSelf && request.status === FriendRequestStatus.Pending && (<Typography.Text>等待验证</Typography.Text>)}
{!isSelf && request.status === FriendRequestStatus.Pending && ((
<Dropdown.Button
trigger={['click']}
onClick={() => {
approveRequest({
requestId: request._id,
})
}}
menu={{
items: [{
</Flex>
<Flex align="center">
{isSelf && request.status === FriendRequestStatus.Pending && (
<Typography.Text>等待验证</Typography.Text>
)}
{!isSelf && request.status === FriendRequestStatus.Pending && (
<Dropdown.Button
trigger={['click']}
onClick={() => {
approveRequest({
requestId: request._id
})
}}
menu={{
items: [
{
key: 'reject',
label: '拒绝',
}],
onClick: ({ key }) => {
if (key === 'reject') {
modal.confirm({
title: '拒绝好友申请',
content: `是否要拒绝 ${friend.nickname || friend.username} 的好友申请`,
onOk: () => {
rejectRequest({
requestId: request._id,
})
},
})
}
},
}}
>
同意
</Dropdown.Button>
))}
{request.status === FriendRequestStatus.Accepted && (<Typography.Text>已同意</Typography.Text>)}
{request.status === FriendRequestStatus.Rejected && (<Typography.Text>已拒绝</Typography.Text>)}
</Flex>
label: '拒绝'
}
],
onClick: ({ key }) => {
if (key === 'reject') {
modal.confirm({
title: '拒绝好友申请',
content: `是否要拒绝 ${
friend.nickname || friend.username
} 的好友申请`,
onOk: () => {
rejectRequest({
requestId: request._id
})
}
})
}
}
}}
>
同意
</Dropdown.Button>
)}
{request.status === FriendRequestStatus.Accepted && (
<Typography.Text>已同意</Typography.Text>
)}
{request.status === FriendRequestStatus.Rejected && (
<Typography.Text>已拒绝</Typography.Text>
)}
</Flex>
)
</Flex>
)
})}
</Flex>
Expand Down

0 comments on commit 2c13faf

Please sign in to comment.