add sideStaff display in about page

src/components/Brief/index.tsx

@@ -9,19 +9,22 @@ const Brief: React.FC<{
   profile: string;
   link?: string;
   linktext?: string;
-}> = ({ avatar, name, nickname, profile, link, linktext }) => {
+  isSideStaff?: boolean;
+}> = ({ avatar, name, nickname, profile, link, linktext, isSideStaff }) => {
   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 gap="middle" align="center" justify="center" vertical={!isSideStaff}>
+        <Image width={isSideStaff ? 75 : 200} src={avatar} preview={false} />
+        <Flex gap="small" align="center" justify="center" vertical>
+          <Text style={{ fontSize: isSideStaff ? '18px' : '24px' }}>{name}</Text>
+          <Flex gap="small" align="center" justify="center" vertical={false}>
+            <Text type={'secondary'}>{nickname}</Text>
+            <Link href={link} target="_blank">
+              {linktext}
+            </Link>
+          </Flex>
+          <Text type={'secondary'}>{profile}</Text>
         </Flex>
-        <Text type={'secondary'}>{profile}</Text>
       </Flex>
     </div>
   );

src/pages/About/index.tsx

@@ -3,10 +3,46 @@ 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';
+import staffs, { Staff } from './staff';
 
 const Logs: React.FC = () => {
   const [responsive, setResponsive] = useState(false);
+  const sideMembers = staffs.sideStaffList.length;
+
+  const pushSideStaff = (sideStaff: JSX.Element[][], tempMembers: Staff[]) => {
+    sideStaff.push(
+      tempMembers.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}
+            isSideStaff
+          />
+        </ProCard>
+      )),
+    );
+  };
+
+  let sideStaff: JSX.Element[][] = [],
+    tempMembers: Staff[] = [], i = 0, j;
+
+  /// 当个数模 3 余 1 时，先放置 2 行，每行 2 个；
+  /// 当个数模 3 余 2 时，先放置 1 行，每行 2 个；
+  /// 其余按每行 3 个放置
+  for (j = 0; j < Math.round(sideMembers / 3); j++) {
+    tempMembers.push(staffs.sideStaffList[i++]);
+    tempMembers.push(staffs.sideStaffList[i++]);
+    if (j >= (3 - sideMembers % 3) % 3) {
+      tempMembers.push(staffs.sideStaffList[i++]);
+    }
+    pushSideStaff(sideStaff, tempMembers);
+    tempMembers = [];
+  }
+
   const staffRenderer = (
     <div>
       <RcResizeObserver
@@ -16,7 +52,7 @@ const Logs: React.FC = () => {
         }}
       >
         <ProCard.Group direction={responsive ? 'column' : 'row'}>
-          {staffList.map((staff: Staff, idx) => (
+          {staffs.staffList.map((staff: Staff, idx) => (
             <ProCard key={idx} style={{ whiteSpace: 'pre-line' }}>
               <Brief
                 avatar={staff.avatar}
@@ -29,6 +65,11 @@ const Logs: React.FC = () => {
             </ProCard>
           ))}
         </ProCard.Group>
+        {sideStaff.map((staffLine, idx) => (
+          <ProCard.Group direction={responsive ? 'column' : 'row'} key={idx}>
+            {staffLine}
+          </ProCard.Group>
+        ))}
       </RcResizeObserver>
     </div>
   );

src/pages/About/staff.ts

@@ -24,4 +24,21 @@ const staffList: Staff[] = [
   },
 ];
 
-export default staffList;
+const sideStaffList: Staff[] = [
+  {
+    avatar: 'https://wiki.zjueva.net/images/avatars/eva_wiki_27_l.png',
+    name: '亦可',
+    nickname: 'Echo',
+    profile: 'Eta 系统总运维',
+    link: 'https://wiki.zjueva.net/%E7%94%A8%E6%88%B7:%E4%BA%A6%E5%8F%AF',
+    linktext: '我的主页',
+  },
+  {
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
+    name: '泰斯特',
+    nickname: 'Tester',
+    profile: 'Eta 系统总测试',
+  },
+]
+
+export default { staffList, sideStaffList };