feat(ProfilePage): Playerlist

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=="],

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": {

src/components/GamePanel.tsx

@@ -1,7 +1,6 @@
 import type React from "react";
-import type { IEventInfo, MatchInfo, Player } from "../types";
+import type { Player } from "../types";
-import { useRequest } from "ahooks";
+import { Tabs } from "antd";
-import { Spin, Tabs } from "antd";
 import { PlayerList } from "./PlayerList";
 import { GroupingPrediction } from "./GroupingPrediction";
 import { useMemo } from "react";

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";

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}`} />

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>
   );

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>
   );

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,26 +62,68 @@ 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 (
-    <Flex vertical align="center" style={{ padding: 24 }}>
+    <>
-      <Avatar src={profile?.realpic} size={128} />
+      <BodyBG url={profile?.realpic} />
-      <Typography.Title level={2}>{profile?.username}</Typography.Title>
+      <FloatButton icon={<HomeOutlined />} onClick={() => navigate('/')} />
-      <Typography.Text>姓名：{profile?.realname}</Typography.Text>
+      <Flex vertical align="center" style={{ padding: 24 }}>
-      <Typography.Text>积分：{profile?.score}</Typography.Text>
+        <Avatar src={profile?.realpic} size={128} />
-      <Typography.Text>
+        <Typography.Title level={2}>{profile?.username}</Typography.Title>
-        {
+        <Typography.Text>姓名：{profile?.realname}</Typography.Text>
-          [profile?.province, profile?.sex, profile?.bg, profile?.scope, ...profile?.allCities ?? []]
+        <Typography.Text>积分：{profile?.score}</Typography.Text>
-            .filter(Boolean).join(' | ')
+        <Typography.Text>
-        }
+          {
-      </Typography.Text>
+            ([profile?.province, profile?.sex, profile?.bg ?? '', ...(profile?.allCities ?? [])] as React.ReactNode[])
-      <Divider>简介</Divider>
+              .filter(Boolean)
-      <Typography.Paragraph>
+              .reduce((a, b) => (<>{a}<Divider orientation="vertical" />{b}</>))
-        {profile?.description}
+          }
-      </Typography.Paragraph>
+        </Typography.Text>
-      <Raket profile={profile} />
+        <Divider>简介</Divider>
-      <Honor honors={profile?.honors} />
+        <Typography.Paragraph>
-    </Flex>
+          {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>
+    </>
   );
 }