Refactor BattleTable and GroupMember components

- Updated the styling and structure of the BattleTable component for better layout and readability.
- Added expandable functionality to the GroupMember component's drawer.
- Adjusted styles and content in BattleTable to improve the visual presentation and functionality.

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({
           <Card
             size="small"
             key={`round-${i}`}
-            title={`Round: ${i + 1}`}
+            title={`第 ${i + 1} 轮`}
             extra={<Button type="link" onClick={() => handleClear(left, right)} icon={<ClearOutlined />}>清除本轮</Button>}
           >
             {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 (
-                <div key={key}>
-                  <Space style={{ textAlign: "center" }}>
-                    <div className={winer === l?.uid ? 'winer' : ''} onClick={() => handleWiner(l!, r!, l!, r!)} style={{ width: 120 }}>{nameL}</div>
-                    <span>VS</span>
-                    <div className={winer === r?.uid ? 'winer' : ''} onClick={() => handleWiner(l!, r!, r!, l!)} style={{ width: 120 }}>{nameR}</div>
-                  </Space>
+                <div key={key} style={{ minWidth: 280, width: '80vw', maxWidth: 600 }}>
+                  <Flex align="center" justify="space-between">
+                    <div
+                      className={winer === l?.uid ? 'winer' : ''}
+                      onClick={() => handleWiner(l!, r!, l!, r!)}
+                      style={{
+                        flex: 5,
+                        textAlign: 'center',
+                      }}
+                    >{nameL}</div>
+                    <div style={{
+                      flex: 1,
+                      textAlign: 'center',
+                    }}>-</div>
+                    <div
+                      className={winer === r?.uid ? 'winer' : ''}
+                      onClick={() => handleWiner(l!, r!, r!, l!)}
+                      style={{
+                        flex: 5,
+                        textAlign: 'center',
+                      }}
+                    >{nameR}</div>
+                  </Flex>
                   {i < left.length - 1 && <Divider size="small" />}
                 </div>
               );
@@ -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;

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> = props => {
     return `${code}${String.fromCharCode(lastChar)}`;
   }, []);
   const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   return (
     <Card
       title={`${char} 组`}
@@ -43,8 +45,9 @@ export const GroupMember: React.FC<Props> = props => {
         open={open}
         title={`${char} 组对战表`}
         onClose={() => setOpen(false)}
-        size={'80vh'}
+        size={expanded ? '100vh' : '80vh'}
         placement="bottom"
+        extra={<ExpandOutlined onClick={() => setExpanded(!expanded)} />}
       >
         <BattleTable players={props.players ?? []} />
       </Drawer>