83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import Brief from '@/components/Brief';
|
|
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
|
import { Card } from 'antd';
|
|
import RcResizeObserver from 'rc-resize-observer';
|
|
import { useState } from 'react';
|
|
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
|
|
key="resize-observer"
|
|
onResize={(offset) => {
|
|
setResponsive(offset.width < 596);
|
|
}}
|
|
>
|
|
<ProCard.Group direction={responsive ? 'column' : 'row'}>
|
|
{staffs.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>
|
|
{sideStaff.map((staffLine, idx) => (
|
|
<ProCard.Group direction={responsive ? 'column' : 'row'} key={idx}>
|
|
{staffLine}
|
|
</ProCard.Group>
|
|
))}
|
|
</RcResizeObserver>
|
|
</div>
|
|
);
|
|
return (
|
|
<PageContainer>
|
|
<Card>{staffRenderer}</Card>
|
|
</PageContainer>
|
|
);
|
|
};
|
|
export default Logs;
|