refactor(profile): replace Descriptions with Flex layout and show rank

- remove unused antd imports (Space, Descriptions)
- refactor equipment section to Flex-based rows
- refactor profile meta fields to structured Flex rows
- add rank display next to name and score

src/page/FavPlayersPage.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Card, Divider, Flex, Image, Segmented, Space, Typography } from "antd";
+import { Avatar, Card, Divider, Flex, Image, Segmented, Typography } from "antd";
 import { useFavPlayerStore } from "../store/useFavPlayerStore";
 import { useNavigate } from "react-router";
 import { useMemo, useState } from "react";

src/page/ProfilePage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import { Link, useLoaderData, useNavigate } from "react-router";
-import { Avatar, Descriptions, Divider, Flex, FloatButton, Image, Typography } from "antd";
+import { Avatar, Divider, Flex, FloatButton, Image, Typography } from "antd";
 import { HomeOutlined } from "@ant-design/icons";
 import { useTitle } from "ahooks";
 import type { XCXProfile } from "../types/profile";
@@ -49,20 +49,23 @@ function Raket(props: { profile?: XCXProfile | null }) {
   return (
     <>
       <Divider>装备</Divider>
-      <Descriptions>
+      <Flex vertical gap={8}>
-        <Descriptions.Item label="底板">
+        <Flex gap={4} align="center">
-          {qiupaitype}
+          <Typography.Text type="secondary">底板：</Typography.Text>
+          <Typography.Text>{qiupaitype}</Typography.Text>
           <Typography.Text type="secondary" style={{ marginLeft: 4 }}>({qiupai})</Typography.Text>
-        </Descriptions.Item>
+        </Flex>
-        <Descriptions.Item label="正手">
+        <Flex gap={4} align="center">
-          {zhengshoutype}
+          <Typography.Text type="secondary">正手：</Typography.Text>
+          <Typography.Text>{zhengshoutype}</Typography.Text>
           <Typography.Text type="secondary" style={{ marginLeft: 4 }}>({zhengshou})</Typography.Text>
-        </Descriptions.Item>
+        </Flex>
-        <Descriptions.Item label="反手">
+        <Flex gap={4} align="center">
-          {fanshoutype}
+          <Typography.Text type="secondary">反手：</Typography.Text>
+          <Typography.Text>{fanshoutype}</Typography.Text>
           <Typography.Text type="secondary" style={{ marginLeft: 4 }}>({fanshou})</Typography.Text>
-        </Descriptions.Item>
+        </Flex>
-      </Descriptions>
+      </Flex>
     </>
   );
 }
@@ -122,9 +125,21 @@ export default function ProfilePage() {
             />
           </Flex>
         </Typography.Title>
-        <Typography.Text>姓名：{profile?.realname}</Typography.Text>
+        <Flex vertical gap={4}>
-        <Typography.Text>积分：{profile?.score}</Typography.Text>
+          <Flex gap={4}>
-        <Typography.Text style={{ textAlign: 'center' }}>
+            <Typography.Text>姓名：</Typography.Text>
+            <Typography.Text>{profile?.realname}</Typography.Text>
+          </Flex>
+          <Flex gap={4}>
+            <Typography.Text>积分：</Typography.Text>
+            <Typography.Text>{profile?.score}</Typography.Text>
+          </Flex>
+          <Flex gap={4}>
+            <Typography.Text>排名：</Typography.Text>
+            <Typography.Text>{profile?.rank}</Typography.Text>
+          </Flex>
+        </Flex>
+        <Typography.Text style={{ textAlign: 'center', marginTop: 4 }}>
           {(tags.length > 0 && tags.reduce((a, b) => (<>{a}<Divider orientation="vertical" />{b}</>)))}
         </Typography.Text>
         <Divider>简介</Divider>