feat(ProfilePage): Playerlist

2026-01-28 14:46:43 +09:00 · 2026-01-28 14:46:43 +09:00 · 06c99f5b6f
commit 06c99f5b6f
parent 2f82a4edf5
8 changed files with 122 additions and 28 deletions
--- a/bun.lock
+++ b/bun.lock
@ -13,6 +13,7 @@
        "react": "^19",
        "react-dom": "^19",
        "react-router": "^7.13.0",
+        "styled-components": "^6.3.8",
        "zustand": "^5.0.10",
      },
      "devDependencies": {
@ -42,7 +43,11 @@

    "@emotion/hash": ["@emotion/hash@0.8.0", "", {}, "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="],

-    "@emotion/unitless": ["@emotion/unitless@0.7.5", "", {}, "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="],
+    "@emotion/is-prop-valid": ["@emotion/is-prop-valid@1.4.0", "", { "dependencies": { "@emotion/memoize": "^0.9.0" } }, "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw=="],
+
+    "@emotion/memoize": ["@emotion/memoize@0.9.0", "", {}, "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="],
+
+    "@emotion/unitless": ["@emotion/unitless@0.10.0", "", {}, "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="],

    "@rc-component/async-validator": ["@rc-component/async-validator@5.1.0", "", { "dependencies": { "@babel/runtime": "^7.24.4" } }, "sha512-n4HcR5siNUXRX23nDizbZBQPO0ZM/5oTtmKZ6/eqL0L2bo747cklFdZGRN2f+c9qWGICwDzrhW0H7tE9PptdcA=="],

@ -142,6 +147,8 @@

    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],

+    "@types/stylis": ["@types/stylis@4.2.7", "", {}, "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA=="],
+
    "ahooks": ["ahooks@3.9.6", "", { "dependencies": { "@babel/runtime": "^7.21.0", "@types/js-cookie": "^3.0.6", "dayjs": "^1.9.1", "intersection-observer": "^0.12.0", "js-cookie": "^3.0.5", "lodash": "^4.17.21", "react-fast-compare": "^3.2.2", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.0", "tslib": "^2.4.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Mr7f05swd5SmKlR9SZo5U6M0LsL4ErweLzpdgXjA1JPmnZ78Vr6wzx0jUtvoxrcqGKYnX0Yjc02iEASVxHFPjQ=="],

    "antd": ["antd@6.2.1", "", { "dependencies": { "@ant-design/colors": "^8.0.1", "@ant-design/cssinjs": "^2.0.3", "@ant-design/cssinjs-utils": "^2.0.2", "@ant-design/fast-color": "^3.0.0", "@ant-design/icons": "^6.1.0", "@ant-design/react-slick": "~2.0.0", "@babel/runtime": "^7.28.4", "@rc-component/cascader": "~1.11.0", "@rc-component/checkbox": "~1.0.1", "@rc-component/collapse": "~1.2.0", "@rc-component/color-picker": "~3.0.3", "@rc-component/dialog": "~1.8.0", "@rc-component/drawer": "~1.4.0", "@rc-component/dropdown": "~1.0.2", "@rc-component/form": "~1.6.2", "@rc-component/image": "~1.6.0", "@rc-component/input": "~1.1.2", "@rc-component/input-number": "~1.6.2", "@rc-component/mentions": "~1.6.0", "@rc-component/menu": "~1.2.0", "@rc-component/motion": "~1.1.6", "@rc-component/mutate-observer": "^2.0.1", "@rc-component/notification": "~1.2.0", "@rc-component/pagination": "~1.2.0", "@rc-component/picker": "~1.9.0", "@rc-component/progress": "~1.0.2", "@rc-component/qrcode": "~1.1.1", "@rc-component/rate": "~1.0.1", "@rc-component/resize-observer": "^1.1.1", "@rc-component/segmented": "~1.3.0", "@rc-component/select": "~1.5.0", "@rc-component/slider": "~1.0.1", "@rc-component/steps": "~1.2.2", "@rc-component/switch": "~1.0.3", "@rc-component/table": "~1.9.1", "@rc-component/tabs": "~1.7.0", "@rc-component/textarea": "~1.1.2", "@rc-component/tooltip": "~1.4.0", "@rc-component/tour": "~2.3.0", "@rc-component/tree": "~1.1.0", "@rc-component/tree-select": "~1.6.0", "@rc-component/trigger": "^3.9.0", "@rc-component/upload": "~1.1.0", "@rc-component/util": "^1.7.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", "scroll-into-view-if-needed": "^3.1.0", "throttle-debounce": "^5.0.2" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-ycw/XX7So4MdrwYKGfvZJdkGiCYUOSTebAIi+ejE95WJ138b11oy/iJg7iH0qydaD/B5sFd7Tz8XfPBuW7CRmw=="],
@ -150,6 +157,8 @@

    "bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],

+    "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
+
    "cheerio": ["cheerio@1.2.0", "", { "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", "encoding-sniffer": "^0.2.1", "htmlparser2": "^10.1.0", "parse5": "^7.3.0", "parse5-htmlparser2-tree-adapter": "^7.1.0", "parse5-parser-stream": "^7.1.2", "undici": "^7.19.0", "whatwg-mimetype": "^4.0.0" } }, "sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg=="],

    "cheerio-select": ["cheerio-select@2.1.0", "", { "dependencies": { "boolbase": "^1.0.0", "css-select": "^5.1.0", "css-what": "^6.1.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.0.1" } }, "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g=="],
@ -160,8 +169,12 @@

    "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],

+    "css-color-keywords": ["css-color-keywords@1.0.0", "", {}, "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="],
+
    "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="],

+    "css-to-react-native": ["css-to-react-native@3.2.0", "", { "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^4.0.2" } }, "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ=="],
+
    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],

    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
@ -194,6 +207,8 @@

    "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="],

+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],

    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
@ -202,6 +217,12 @@

    "parse5-parser-stream": ["parse5-parser-stream@7.1.2", "", { "dependencies": { "parse5": "^7.0.0" } }, "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow=="],

+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["postcss@8.4.49", "", { "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA=="],
+
+    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
+
    "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],

    "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
@ -224,8 +245,14 @@

    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],

+    "shallowequal": ["shallowequal@1.1.0", "", {}, "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
    "string-convert": ["string-convert@0.2.1", "", {}, "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="],

+    "styled-components": ["styled-components@6.3.8", "", { "dependencies": { "@emotion/is-prop-valid": "1.4.0", "@emotion/unitless": "0.10.0", "@types/stylis": "4.2.7", "css-to-react-native": "3.2.0", "csstype": "3.2.3", "postcss": "8.4.49", "shallowequal": "1.1.0", "stylis": "4.3.6", "tslib": "2.8.1" }, "peerDependencies": { "react": ">= 16.8.0", "react-dom": ">= 16.8.0" }, "optionalPeers": ["react-dom"] }, "sha512-Kq/W41AKQloOqKM39zfaMdJ4BcYDw/N5CIq4/GTI0YjU6pKcZ1KKhk6b4du0a+6RA9pIfOP/eu94Ge7cu+PDCA=="],
+
    "stylis": ["stylis@4.3.6", "", {}, "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="],

    "throttle-debounce": ["throttle-debounce@5.0.2", "", {}, "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A=="],
@ -242,6 +269,8 @@

    "zustand": ["zustand@5.0.10", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg=="],

+    "@ant-design/cssinjs/@emotion/unitless": ["@emotion/unitless@0.7.5", "", {}, "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="],
+
    "htmlparser2/entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],

    "parse5/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "react": "^19",
    "react-dom": "^19",
    "react-router": "^7.13.0",
+    "styled-components": "^6.3.8",
    "zustand": "^5.0.10"
  },
  "devDependencies": {
--- a/src/components/GamePanel.tsx
+++ b/src/components/GamePanel.tsx
@ -1,7 +1,6 @@
 import type React from "react";
-import type { IEventInfo, MatchInfo, Player } from "../types";
-import { useRequest } from "ahooks";
-import { Spin, Tabs } from "antd";
+import type { Player } from "../types";
+import { Tabs } from "antd";
 import { PlayerList } from "./PlayerList";
 import { GroupingPrediction } from "./GroupingPrediction";
 import { useMemo } from "react";
--- a/src/components/GroupingPrediction.tsx
+++ b/src/components/GroupingPrediction.tsx
@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { Flex, Form, InputNumber, Space, Switch } from "antd";
+import { Flex, Form, InputNumber, Space, Switch, Typography } from "antd";
 import { chunk } from 'lodash';
 import type { Player } from "../types";
 import { GroupMember } from "./GroupMember";
--- a/src/components/PlayerList.tsx
+++ b/src/components/PlayerList.tsx
@ -13,7 +13,7 @@ export const PlayerList: React.FC<Props> = props => {
    <>
      <Table
        dataSource={props.players}
-        rowKey={(e, i) => `${e.name}-${i}`}
+        rowKey={(e) => `${e.name}-${e.uid}`}
        loading={props.loading}
      >
        <Table.Column width={32} dataIndex={'_'} align="center" render={(_, __, i) => `${i + 1}`} />
--- a/src/components/User.tsx
+++ b/src/components/User.tsx
@ -2,9 +2,10 @@ import { Link } from "react-router";

 interface Props {
  name: string;
-  uid: string;
+  uid?: string;
 }
 export default function User(props: Props) {
+  if (!props.uid) return <span>{props.name}</span>
  return (
    <Link to={`/profile/${props.uid}`}>{props.name}</Link>
  );
--- a/src/page/EventPage.tsx
+++ b/src/page/EventPage.tsx
@ -1,11 +1,18 @@
 import { useLoaderData, useNavigate } from "react-router";
 import { GamePanel } from "../components/GamePanel";
 import type { MatchInfo } from "../types";
+import { Typography } from "antd";
+import { HomeOutlined } from "@ant-design/icons";

 export default function EventPage() {
  const game = useLoaderData<MatchInfo>();
+  const navigate = useNavigate();
  return (
    <div style={{ width: '100%', padding: 10, boxSizing: 'border-box' }}>
+      <Typography.Title level={3}>
+        <HomeOutlined style={{ marginRight: 4 }} onClick={() => navigate('/')}/>
+        {game.title}
+      </Typography.Title>
      <GamePanel title={game.title} players={game.players} />
    </div>
  );
--- a/src/page/ProfilePage.tsx
+++ b/src/page/ProfilePage.tsx
@ -1,6 +1,17 @@
-import { useLoaderData } from "react-router";
+import { Link, useLoaderData, useNavigate } from "react-router";
 import type { XCXProfile } from "../types/profile";
-import { Avatar, Descriptions, Divider, Flex, Image, Typography } from "antd";
+import { Avatar, Descriptions, Divider, Flex, FloatButton, Image, Typography } from "antd";
+import { HomeOutlined } from "@ant-design/icons";
+
+import User from "../components/User";
+import React from "react";
+import { createGlobalStyle } from "styled-components";
+
+const BodyBG = createGlobalStyle<{ url?: string }>`
+  body:before {
+    ${({ url }) => url ? `background: url(${url});` : ''}
+  }
+`

 function Honor(props: { honors?: XCXProfile['honors'] }) {
  if (!props.honors?.length) return null;
@ -12,7 +23,11 @@ function Honor(props: { honors?: XCXProfile['honors'] }) {
          return (
            <Flex key={honor.hid} gap={12} style={{ width: '100%' }}>
              <Image style={{ mixBlendMode: 'multiply' }} src={honor.honor} />
-              <Typography.Text>{honor.subject}</Typography.Text>
+              <Link to={`/event/${honor.eventid}`}>
+                <Typography.Text>
+                  {honor.subject}
+                </Typography.Text>
+              </Link>
            </Flex>
          );
        })}
@ -47,9 +62,27 @@ function Raket(props: { profile?: XCXProfile | null }) {
  );
 }

+function PlayerList(props: { title: string; names?: string[]; uids?: string[] }) {
+  if (!props.names?.length) return null;
+  return (
+    <>
+      <Typography.Title level={5}>{props.title}</Typography.Title>
+      <Flex vertical align="center">
+        {props.names.map((e, i) => (
+          <User key={e} name={e} uid={props.uids?.[i] ?? ''} />
+        ))}
+      </Flex>
+    </>
+  );
+}
+
 export default function ProfilePage() {
  const profile = useLoaderData<XCXProfile | null>();
+  const navigate = useNavigate();
  return (
+    <>
+      <BodyBG url={profile?.realpic} />
+      <FloatButton icon={<HomeOutlined />} onClick={() => navigate('/')} />
      <Flex vertical align="center" style={{ padding: 24 }}>
        <Avatar src={profile?.realpic} size={128} />
        <Typography.Title level={2}>{profile?.username}</Typography.Title>
@ -57,8 +90,9 @@ export default function ProfilePage() {
        <Typography.Text>积分：{profile?.score}</Typography.Text>
        <Typography.Text>
          {
-          [profile?.province, profile?.sex, profile?.bg, profile?.scope, ...profile?.allCities ?? []]
-            .filter(Boolean).join(' | ')
+            ([profile?.province, profile?.sex, profile?.bg ?? '', ...(profile?.allCities ?? [])] as React.ReactNode[])
+              .filter(Boolean)
+              .reduce((a, b) => (<>{a}<Divider orientation="vertical" />{b}</>))
          }
        </Typography.Text>
        <Divider>简介</Divider>
@ -66,7 +100,30 @@ export default function ProfilePage() {
          {profile?.description}
        </Typography.Paragraph>
        <Raket profile={profile} />
+        <Flex wrap gap={24} justify="center">
+          <Flex vertical align="center">
+            <PlayerList title="交手前三名" names={profile?.TopPlayerUsernameScore} />
+          </Flex>
+          <Flex vertical align="center">
+            <PlayerList title="战胜前三名" names={profile?.Top3ManOfBeatUsernameScore} />
+          </Flex>
+          <Flex vertical align="center">
+            <PlayerList title="战胜的男子" names={profile?.Top3ManOfBeatUsernameScore} />
+          </Flex>
+          <Flex vertical align="center">
+            <PlayerList title="战胜的女子" names={profile?.Top3WomanOfBeatUsernameScore} />
+          </Flex>
+        </Flex>
+        <Flex gap={24}>
+          <Flex vertical align="center">
+            <PlayerList title="福星" names={profile?.FuXing?.names} uids={profile?.FuXing?.uids} />
+          </Flex>
+          <Flex vertical align="center">
+            <PlayerList title="苦主" names={profile?.KuZhu?.names} uids={profile?.KuZhu?.uids} />
+          </Flex>
+        </Flex>
        <Honor honors={profile?.honors} />
      </Flex>
+    </>
  );
 }