diff --git a/src/components/BattleTable.tsx b/src/components/BattleTable.tsx index 2776da0..de13025 100644 --- a/src/components/BattleTable.tsx +++ b/src/components/BattleTable.tsx @@ -11,7 +11,8 @@ const StyledContainer = styled(Flex)` color: red; position: relative; ::after { - content: '胜'; + width: 4px + content: ''; font-size: 0.8em; background-color: red; color: white; @@ -118,7 +119,7 @@ function BattleTable({ handleClear(left, right)} icon={}>清除本轮} > {left?.map((l, i) => { @@ -131,12 +132,29 @@ function BattleTable({ const nameL = l?.uid ? `${l?.name}(${l?.score})${resultL}` : '-'; const nameR = r?.uid ? `${r?.name}(${r?.score})${resultR}` : '-'; return ( -
- -
handleWiner(l!, r!, l!, r!)} style={{ width: 120 }}>{nameL}
- VS -
handleWiner(l!, r!, r!, l!)} style={{ width: 120 }}>{nameR}
-
+
+ +
handleWiner(l!, r!, l!, r!)} + style={{ + flex: 5, + textAlign: 'center', + }} + >{nameL}
+
-
+
handleWiner(l!, r!, r!, l!)} + style={{ + flex: 5, + textAlign: 'center', + }} + >{nameR}
+
{i < left.length - 1 && }
); @@ -157,11 +175,11 @@ function BattleTable({ size="small" dataSource={playerList} rowKey={e => e.uid} - style={{ minWidth: 300 }} + style={{ minWidth: 300, width: '80vw', maxWidth: 620 }} columns={[ - { dataIndex: 'name' }, - { dataIndex: 'score' }, - { dataIndex: 'uid', render: (uid, { score }) => scoreDiff[uid] || score }, + { dataIndex: 'name', align: 'center', }, + { dataIndex: 'score', align: 'center', }, + { dataIndex: 'uid', align: 'center', render: (uid, { score }) => scoreDiff[uid] || score }, { dataIndex: 'uid', align: 'right', render: (uid, { score }) => { const diff = +(scoreDiff[uid] || score) - +score; return diff > 0 ? `+${diff}` : diff; diff --git a/src/components/GroupMember.tsx b/src/components/GroupMember.tsx index 67383d9..4de9e75 100644 --- a/src/components/GroupMember.tsx +++ b/src/components/GroupMember.tsx @@ -3,6 +3,7 @@ import { Button, Card, Drawer, Table } from "antd"; import type { BasePlayer } from "../types"; import User from "./User"; import BattleTable from "./BattleTable"; +import { ExpandOutlined } from "@ant-design/icons"; interface Props { index: number; @@ -19,6 +20,7 @@ export const GroupMember: React.FC = props => { return `${code}${String.fromCharCode(lastChar)}`; }, []); const [open, setOpen] = useState(false); + const [expanded, setExpanded] = useState(false); return ( = props => { open={open} title={`${char} 组对战表`} onClose={() => setOpen(false)} - size={'80vh'} + size={expanded ? '100vh' : '80vh'} placement="bottom" + extra={ setExpanded(!expanded)} />} >