diff --git a/src/pages/Relation/index.tsx b/src/pages/Relation/index.tsx
new file mode 100644
index 0000000..a5d2d97
--- /dev/null
+++ b/src/pages/Relation/index.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react';
+import { Card, List, Button, message, Carousel, Modal } from 'antd';
+import { getUserInfo } from '@/services/session';
+import { getPlanetList, updateUserPlanet, getUserPlanet, getPlanetInfo, PlanetEntity, getRandomUserPlanets } from '@/services/planets/api';
+import { useRequest } from '@umijs/max';
+import { getUser } from '@/services/system/user';
+
+const RelationPage = () => {
+    const [planetList, setPlanetList] = useState<PlanetEntity[]>([]);
+    const [relatedUsers, setRelatedUsers] = useState<any[]>([]);
+    const [selectedUser, setSelectedUser] = useState<any>(null);
+    const [userModalVisible, setUserModalVisible] = useState(false);
+    //  获取用户信息
+    const { data: userInfo, loading: userLoading } = useRequest(async () => {
+        const userRes = await getUserInfo();
+        // 假设 userId 为字符串类型，需要将其转换为数字类型，同时处理可能的 undefined 情况
+        const userId = userRes.user.userId ? parseInt(userRes.user.userId, 10) : 1;
+        const UserplanetRes = await getUserPlanet({ userId });
+        console.log(UserplanetRes);
+        const planetId = UserplanetRes.planetId || 1;
+        const planetRes = await getPlanetInfo({ planetId });
+
+        return {
+            data: {
+                ...userRes.user,
+                planet: planetRes
+            }
+        };
+    });
+
+
+
+
+    console.log(userInfo);
+    const [listLoading, setListLoading] = useState(false);
+    // 获取所有GIF列表
+    const fetchPlanetList = async () => {
+        try {
+            setListLoading(true);
+            const res = await getPlanetList({ pageNum: 1, pageSize: 100 });
+            console.log(res);
+            setPlanetList(res);
+        } catch (error) {
+            message.error('获取GIF列表失败');
+        } finally {
+            setListLoading(false);
+        }
+    };
+
+    // 获取相关用户信息
+    const fetchRelatedUsers = async () => {
+        try {
+            // 获取随机用户星球列表
+            const randomPlanetsNo = await getRandomUserPlanets();
+            const userId = userInfo?.userId ? parseInt(userInfo.userId, 10) : 1;
+            const randomPlanets = randomPlanetsNo.filter((item) => item.userId !== userId);
+            // 获取完整用户信息并关联星球数据
+            const usersWithPlanets = await Promise.all(
+                randomPlanets.map(async (item) => {
+
+                    // 确保 item.userId 为 number 类型，若为 undefined 则使用默认值 1
+                    const userIdToUse = typeof item.userId === 'number' ? item.userId : 1;
+                    const userRes = await getUser(userIdToUse);
+                    const planetRes = await getPlanetInfo({ planetId: item.planetId });
+                    return {
+                        user: userRes.data,
+                        planet: planetRes
+                    };
+                })
+            );
+
+            setRelatedUsers(usersWithPlanets);
+            console.log(usersWithPlanets);
+        } catch (error) {
+            message.error('获取相关用户失败');
+            console.error(error);
+        }
+    };
+
+    useEffect(() => {
+        fetchPlanetList();
+        fetchRelatedUsers();
+    }, []);
+    // 显示用户详情
+    const showUserDetails = (user: any) => {
+        setSelectedUser(user);
+        setUserModalVisible(true);
+    };
+    console.log(planetList);
+    // 更新用户形象
+    const handleUpdateAvatar = async (id: number | undefined) => {
+        if (!id) {
+            message.error('无效的星球ID');
+            return;
+        }
+        try {
+            console.log(id);
+            // 处理 userInfo.userId 可能为 undefined 的情况，若为 undefined 则使用默认值 '1'
+            const userIdStr = userInfo?.userId || '1';
+            console.log(userIdStr);
+            await updateUserPlanet({ planetId: id, userId: parseInt(userIdStr, 10) });
+            message.success('更新形象成功');
+            window.location.reload();
+        } catch (error) {
+            message.error('更新形象失败');
+        }
+    };
+    if (userLoading) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div>
+            <Card title="当前形象" style={{ background: 'transparent', borderColor: '#3a3a5c' }}>
+                {userInfo?.planet && (
+                    <div style={{ textAlign: 'center' }}>
+                        <img
+                            src={`/images/planets/${userInfo.planet.filename}.gif`}
+                            alt="用户形象"
+                            style={{
+                                width: 200,
+                                height: 200,
+                                borderRadius: '50%',
+                                border: '2px solid #4a4a7a',
+                                boxShadow: '0 0 15px #6a5acd'
+                            }}
+                        />
+                        <div style={{
+                            marginTop: 16,
+                            color: '#a8b2d1',
+                            fontSize: 16
+                        }}>
+                            当前形象: {userInfo.planet.name}
+                        </div>
+                    </div>
+                )}
+            </Card>
+
+            <Card title="选择新形象" style={{
+                marginTop: 24,
+                background: 'transparent',
+                borderColor: '#3a3a5c'
+            }}>
+                <Carousel
+                    dots={false}
+                    arrows={true}
+                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
+                >
+                    {planetList.map((item) => (
+                        <div key={item.planetId} style={{ textAlign: 'center', padding: '0 40px' }}>
+                            <div style={{ marginBottom: 16 }}>
+                                <img
+                                    src={`/images/planets/${item.filename}.gif`}
+                                    alt={item.name}
+                                    style={{
+                                        width: 200,
+                                        height: 200,
+                                        borderRadius: '50%',
+                                        border: '2px solid #4a4a7a',
+                                        boxShadow: '0 0 15px #6a5acd',
+                                        marginTop: 16,
+                                        margin: '0 auto'
+                                    }}
+                                />
+                            </div>
+                            <div style={{
+                                color: '#a8b2d1',
+                                marginBottom: 16
+                            }}>
+                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>{item.name}</div>
+                                <div style={{ margin: '8px 0' }}>{item.description}</div>
+                                <div>创建时间: {item.createTime}</div>
+                            </div>
+                            <Button
+                                type="primary"
+                                onClick={() => handleUpdateAvatar(item.planetId)}
+                                style={{
+                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
+                                    border: 'none'
+                                }}
+                            >
+                                选择
+                            </Button>
+                        </div>
+                    ))}
+                </Carousel>
+            </Card>
+
+            <Card title="与你相关的人" style={{
+                marginTop: 24,
+                background: 'transparent',
+                borderColor: '#3a3a5c'
+            }}>
+                <Carousel
+                    dots={false}
+                    arrows={true}
+                    style={{ width: '100%', maxWidth: 800, margin: '0 auto' }}
+                >
+                    {relatedUsers.map((item) => (
+                        <div key={item.userId} style={{ textAlign: 'center', padding: '0 40px' }}>
+                            <div style={{ marginBottom: 16 }}>
+                                <img
+                                    src={`/images/planets/${item.planet.filename}.gif`}
+                                    alt={item.planet.name}
+                                    style={{
+                                        width: 200,
+                                        height: 200,
+                                        borderRadius: '50%',
+                                        border: '2px solid #4a4a7a',
+                                        boxShadow: '0 0 15px #6a5acd',
+                                        margin: '0 auto'
+                                    }}
+                                />
+                            </div>
+                            <div style={{
+                                color: '#a8b2d1',
+                                marginBottom: 16
+                            }}>
+                                <div style={{ fontSize: 18, fontWeight: 'bold' }}>昵称：{item.user.nickName}</div>
+                                <div style={{ margin: '8px 0' }}>邮箱：{item.user.email}</div>
+                                <div>星球形象：{item.planet.name}</div>
+                            </div>
+                            <Button
+                                type="primary"
+                                onClick={() => showUserDetails(item.user)}
+                                style={{
+                                    background: 'linear-gradient(45deg, #6a5acd, #9370db)',
+                                    border: 'none'
+                                }}
+                            >
+                                查看详情
+                            </Button>
+                        </div>
+                    ))}
+                </Carousel>
+            </Card>
+
+            <Modal
+                title="用户详情"
+                visible={userModalVisible}
+                onCancel={() => setUserModalVisible(false)}
+                footer={null}
+                style={{ color: '#a8b2d1' }}
+            >
+                {selectedUser && (
+                    <div>
+                        <p>昵称: {selectedUser.nickName}</p>
+                        <p>邮箱: {selectedUser.email}</p>
+                        <p>电话: {selectedUser.phonenumber}</p>
+
+                    </div>
+                )}
+            </Modal>
+        </div>
+    );
+};
+
+export default RelationPage;
\ No newline at end of file