合并冲突
Change-Id: I3b6ac5ae87aad8fe746eceecc8f92fc5574b50a8
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