feat: about page & component

src/components/Brief/index.tsx

@@ -0,0 +1,30 @@
+import { Flex, Image, Typography } from 'antd';
+
+const { Text, Link } = Typography;
+
+const Brief: React.FC<{
+  avatar: string;
+  name: string;
+  nickname: string;
+  profile: string;
+  link?: string;
+  linktext?: string;
+}> = ({ avatar, name, nickname, profile, link, linktext }) => {
+  return (
+    <div style={{ marginTop: '5vh', marginBottom: '5vh' }}>
+      <Flex gap="middle" align="center" vertical>
+        <Image width={200} src={avatar} preview={false} />
+        <Text style={{ fontSize: '24px' }}>{name}</Text>
+        <Flex gap="middle" align="center" vertical={false}>
+          <Text type={'secondary'}>{nickname}</Text>
+          <Link href={link} target="_blank">
+            {linktext}
+          </Link>
+        </Flex>
+        <Text type={'secondary'}>{profile}</Text>
+      </Flex>
+    </div>
+  );
+};
+
+export default Brief;

src/pages/About/index.tsx

@@ -1,13 +1,40 @@
-import { Todo } from '@/components';
+import Brief from '@/components/Brief';
-import { PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { Card } from 'antd';
+import RcResizeObserver from 'rc-resize-observer';
+import { useState } from 'react';
+import staffList, { Staff } from './staff';
 
 const Logs: React.FC = () => {
+  const [responsive, setResponsive] = useState(false);
+  const staffRenderer = (
+    <div>
+      <RcResizeObserver
+        key="resize-observer"
+        onResize={(offset) => {
+          setResponsive(offset.width < 596);
+        }}
+      >
+        <ProCard.Group direction={responsive ? 'column' : 'row'}>
+          {staffList.map((staff: Staff, idx) => (
+            <ProCard key={idx} style={{ whiteSpace: 'pre-line' }}>
+              <Brief
+                avatar={staff.avatar}
+                name={staff.name}
+                nickname={staff.nickname}
+                profile={staff.profile}
+                link={staff.link}
+                linktext={staff.linktext}
+              />
+            </ProCard>
+          ))}
+        </ProCard.Group>
+      </RcResizeObserver>
+    </div>
+  );
   return (
     <PageContainer>
-      <Card>
+      <Card>{staffRenderer}</Card>
-        <Todo />
-      </Card>
     </PageContainer>
   );
 };

src/pages/About/staff.ts

@@ -0,0 +1,27 @@
+export interface Staff {
+  avatar: string;
+  name: string;
+  nickname: string;
+  profile: string;
+  link?: string;
+  linktext?: string;
+}
+
+const staffList: Staff[] = [
+  {
+    avatar: 'https://blog.dawn-ocean.top/assets/img/avatar.jpg',
+    name: '马国洋',
+    nickname: 'Dawn_Ocean',
+    profile: 'Eta & Tea 总设计\n摸鱼与开发叠加态',
+    link: 'https://blog.dawn-ocean.top',
+    linktext: '我的博客',
+  },
+  {
+    avatar: 'https://static.fracher21.top/head.jpg',
+    name: '杨鸿奕',
+    nickname: 'Fracher',
+    profile: 'Ate 总设计, 项目合作贡献者\nReact 真是太有意思了',
+  },
+];
+
+export default staffList;