feat: ✨ 完成proFile面板设计

apps/admin/src/views/user/components/message/index.tsx

@@ -0,0 +1,29 @@
+import { Flex, Typography } from 'antd';
+
+import useStyles from './styles';
+
+import type { FC } from 'react';
+
+const { Title, Text } = Typography;
+export interface PMessage {
+  avatar?: string | JSX.Element;
+  time?: string;
+  content?: string | JSX.Element;
+  user?: string;
+}
+const Message: FC<PMessage> = ({ avatar, time, content, user }) => {
+  const { styles } = useStyles();
+  return (
+    <Flex gap={8} className={styles['message-list']}>
+      <div>{avatar}</div>
+      <div className='message_content'>
+        <Flex justify={'space-between'} align='center'>
+          <Title level={5}>{user}</Title>
+          <div>{time}</div>
+        </Flex>
+        <Text type='secondary'>{content}</Text>
+      </div>
+    </Flex>
+  );
+};
+export default Message;

apps/admin/src/views/user/components/message/styles.ts

@@ -0,0 +1,13 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => ({
+  'message-list': {
+    '.message_content': {
+      flex: 1,
+      padding: token.paddingSM,
+      backgroundColor: token.colorBgLayout,
+      borderRadius: token.borderRadiusLG,
+    },
+  },
+}));
+export default useStyles;

apps/admin/src/views/user/components/proFile/index.tsx

@@ -1,7 +1,6 @@
 import {
   AntDesignOutlined,
   GithubOutlined,
-  HeartOutlined,
   MessageOutlined,
   MoreOutlined,
   ShareAltOutlined,
@@ -15,11 +14,17 @@ import { SvgIcon } from 'ui';
 
 import { UserFooter } from '@/components/UserCard';
 
+import avatar_1 from '@/assets/images/avatar_1.jpg';
+import avatar_4 from '@/assets/images/avatar_4.jpg';
+import avatar_6 from '@/assets/images/avatar_6.jpg';
 import avatar_8 from '@/assets/images/avatar_8.jpg';
 import travel_3 from '@/assets/images/travel_3.jpg';
 
+import Message from '../message';
+import SendBox from '../sendBox';
 import useStyles from './styles';
 
+import type { PMessage } from '../message';
 import type { FC } from 'react';
 
 const { Text } = Typography;
@@ -59,6 +64,20 @@ const ProFile: FC<PProFiles> = () => {
       icon: <ZhihuOutlined style={{ fontSize: 24 }} />,
     },
   ];
+  const messageList: PMessage[] = [
+    {
+      avatar: <Avatar src={avatar_4} />,
+      time: '2小时前',
+      content: '做普通人，干正经事，可以爱小钱，但必有大胸怀。      ',
+      user: 'anyone',
+    },
+    {
+      avatar: <Avatar src={avatar_1} />,
+      time: '27 Dec 2023',
+      content: '多年后，一个埋我的人被指定，这些年，我偶尔想一想死亡的事情，把活着，当成了一种习惯',
+      user: '倾盆大雨',
+    },
+  ];
   return (
     <>
       <Row gutter={[16, 16]}>
@@ -135,7 +154,9 @@ const ProFile: FC<PProFiles> = () => {
                     </Button>
                     <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
                       <Avatar src='https://xsgames.co/randomusers/avatar.php?g=pixel&key=2' />
-                      <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+                      <Avatar src={avatar_6} style={{ backgroundColor: '#f56a00' }}>
+                        K
+                      </Avatar>
 
                       <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />
                     </Avatar.Group>
@@ -145,6 +166,11 @@ const ProFile: FC<PProFiles> = () => {
                     <Button shape='circle' type='text' icon={<ShareAltOutlined />}></Button>
                   </div>
                 </Flex>
+                {messageList.map((item) => (
+                  <Message avatar={item.avatar} time={item.time} content={item.content} user={item.user} />
+                ))}
+                {/* 发送消息 */}
+                <SendBox></SendBox>
               </Flex>
             </Card>
           </Flex>

apps/admin/src/views/user/components/sendBox/index.tsx

@@ -0,0 +1,36 @@
+import { Avatar, Button, Flex, Input, Typography } from 'antd';
+import { SvgIcon } from 'ui';
+
+import avatarUser from '@/assets/images/avatar_6.jpg';
+
+import useStyles from './styles';
+
+import type { FC } from 'react';
+
+const { Title, Text } = Typography;
+export interface PSendBox {
+  avatar?: string | JSX.Element;
+  time?: string;
+  content?: string | JSX.Element;
+  user?: string;
+}
+const SendBox: FC<PSendBox> = ({ avatar = avatarUser, time, content, user }) => {
+  const { styles } = useStyles();
+  return (
+    <Flex gap={8} align='center' className={styles['send-box']}>
+      <Avatar src={avatar}></Avatar>
+      <div className='send-content'>
+        <Input
+          placeholder='请在这里输入您的留言'
+          suffix={
+            <Flex>
+              <Button type='text' shape='circle' icon={<SvgIcon name='picture' />}></Button>
+              <Button type='text' shape='circle' icon={<SvgIcon name='express' />}></Button>
+            </Flex>
+          }
+        />
+      </div>
+    </Flex>
+  );
+};
+export default SendBox;

apps/admin/src/views/user/components/sendBox/styles.ts

@@ -0,0 +1,11 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => ({
+  'send-box': {
+    '.send-content': {
+      flex: 1,
+      borderRadius: token.borderRadiusLG,
+    },
+  },
+}));
+export default useStyles;

apps/admin/src/views/user/components/userCard/index.tsx

@@ -1,11 +1,8 @@
-import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
-import { Button, Card, Flex, Segmented, Skeleton, Typography } from 'antd';
-import { useTheme } from 'antd-style';
+import { Card, Segmented, Typography } from 'antd';
 import React from 'react';
 import { SvgIcon, Translatex } from 'ui';
 
 import avatar from '@/assets/images/avatar_2.jpg';
-import cover_5 from '@/assets/images/cover_5.jpg';
 
 import Followers from '../followers';
 import Friends from '../friends';
@@ -23,7 +20,6 @@ export interface UserCardProp extends CardProps {
 
 const UserCard: React.FC<UserCardProp> = (prop) => {
   const { children, ...rest } = prop;
-  const token = useTheme();
   const [tabActive, setTabActive] = React.useState('Profile');
   const [loading, setLoading] = React.useState(true);
   const { styles } = useStyles();
@@ -34,20 +30,6 @@ const UserCard: React.FC<UserCardProp> = (prop) => {
   }, []);
   return (
     <div className={styles.content}>
-      {/* {loading && (
-        <Card
-          hoverable
-          className={styles['user-card']}
-          actions={[
-            <Skeleton.Button active shape='round' />,
-            <Skeleton.Button active shape='round' />,
-            <Skeleton.Button active shape='round' />,
-          ]}
-          cover={<Skeleton.Image active />}
-        >
-          <Skeleton loading avatar active />
-        </Card>
-      )} */}
       <Card
         hoverable
         className={styles['user-card']}
@@ -64,9 +46,6 @@ const UserCard: React.FC<UserCardProp> = (prop) => {
                 <Text style={{ color: 'inherit', opacity: 0.7 }}>来历不明</Text>
               </div>
             </div>
-            {/* <span className='cover'>
-                <img alt='example' src={cover_5} />
-              </span> */}
           </>
         }
       >