368 lines
12 KiB
TypeScript
368 lines
12 KiB
TypeScript
|
/**
|
|||
|
|
* My Celestial Bodies Page (User Follow)
|
|||
|
|
* 我的天体页面 - 左侧是关注的天体列表，右侧是天体详情和事件
|
|||
|
|
*/
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import { Row, Col, Card, List, Tag, Button, Empty, Descriptions, Table, Space } from 'antd';
|
|||
|
|
import { StarFilled, RocketOutlined } from '@ant-design/icons';
|
|||
|
|
import type { ColumnsType } from 'antd/es/table';
|
|||
|
|
import { request } from '../../utils/request';
|
|||
|
|
import { useToast } from '../../contexts/ToastContext';
|
|||
|
|
|
|||
|
|
interface CelestialBody {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
name_zh: string;
|
|||
|
|
type: string;
|
|||
|
|
is_active: boolean;
|
|||
|
|
followed_at?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface CelestialEvent {
|
|||
|
|
id: number;
|
|||
|
|
title: string;
|
|||
|
|
event_type: string;
|
|||
|
|
event_time: string;
|
|||
|
|
description: string;
|
|||
|
|
details: any;
|
|||
|
|
source: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function MyCelestialBodies() {
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [followedBodies, setFollowedBodies] = useState<CelestialBody[]>([]);
|
|||
|
|
const [selectedBody, setSelectedBody] = useState<CelestialBody | null>(null);
|
|||
|
|
const [bodyEvents, setBodyEvents] = useState<CelestialEvent[]>([]);
|
|||
|
|
const [eventsLoading, setEventsLoading] = useState(false);
|
|||
|
|
const toast = useToast();
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadFollowedBodies();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadFollowedBodies = async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const { data } = await request.get('/social/follows');
|
|||
|
|
setFollowedBodies(data || []);
|
|||
|
|
// 如果有数据，默认选中第一个
|
|||
|
|
if (data && data.length > 0) {
|
|||
|
|
handleSelectBody(data[0]);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
toast.error('加载关注列表失败');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSelectBody = async (body: CelestialBody) => {
|
|||
|
|
setSelectedBody(body);
|
|||
|
|
setEventsLoading(true);
|
|||
|
|
try {
|
|||
|
|
const { data } = await request.get(`/events`, {
|
|||
|
|
params: {
|
|||
|
|
body_id: body.id,
|
|||
|
|
limit: 100
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
setBodyEvents(data || []);
|
|||
|
|
} catch (error) {
|
|||
|
|
toast.error('加载天体事件失败');
|
|||
|
|
setBodyEvents([]);
|
|||
|
|
} finally {
|
|||
|
|
setEventsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUnfollow = async (bodyId: string) => {
|
|||
|
|
try {
|
|||
|
|
await request.delete(`/social/follow/${bodyId}`);
|
|||
|
|
toast.success('已取消关注');
|
|||
|
|
|
|||
|
|
// 重新加载列表
|
|||
|
|
await loadFollowedBodies();
|
|||
|
|
|
|||
|
|
// 如果取消关注的是当前选中的天体，清空右侧显示
|
|||
|
|
if (selectedBody?.id === bodyId) {
|
|||
|
|
setSelectedBody(null);
|
|||
|
|
setBodyEvents([]);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
toast.error('取消关注失败');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getBodyTypeLabel = (type: string) => {
|
|||
|
|
const labelMap: Record<string, string> = {
|
|||
|
|
'star': '恒星',
|
|||
|
|
'planet': '行星',
|
|||
|
|
'dwarf_planet': '矮行星',
|
|||
|
|
'satellite': '卫星',
|
|||
|
|
'comet': '彗星',
|
|||
|
|
'asteroid': '小行星',
|
|||
|
|
'probe': '探测器',
|
|||
|
|
};
|
|||
|
|
return labelMap[type] || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getBodyTypeColor = (type: string) => {
|
|||
|
|
const colorMap: Record<string, string> = {
|
|||
|
|
'star': 'gold',
|
|||
|
|
'planet': 'blue',
|
|||
|
|
'dwarf_planet': 'cyan',
|
|||
|
|
'satellite': 'geekblue',
|
|||
|
|
'comet': 'purple',
|
|||
|
|
'asteroid': 'volcano',
|
|||
|
|
'probe': 'magenta',
|
|||
|
|
};
|
|||
|
|
return colorMap[type] || 'default';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getEventTypeLabel = (type: string) => {
|
|||
|
|
const labelMap: Record<string, string> = {
|
|||
|
|
'approach': '接近',
|
|||
|
|
'close_approach': '近距离接近',
|
|||
|
|
'eclipse': '食',
|
|||
|
|
'conjunction': '合',
|
|||
|
|
'opposition': '冲',
|
|||
|
|
'transit': '凌',
|
|||
|
|
};
|
|||
|
|
return labelMap[type] || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getEventTypeColor = (type: string) => {
|
|||
|
|
const colorMap: Record<string, string> = {
|
|||
|
|
'approach': 'blue',
|
|||
|
|
'close_approach': 'magenta',
|
|||
|
|
'eclipse': 'purple',
|
|||
|
|
'conjunction': 'cyan',
|
|||
|
|
'opposition': 'orange',
|
|||
|
|
'transit': 'green',
|
|||
|
|
};
|
|||
|
|
return colorMap[type] || 'default';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const eventColumns: ColumnsType<CelestialEvent> = [
|
|||
|
|
{
|
|||
|
|
title: '事件',
|
|||
|
|
dataIndex: 'title',
|
|||
|
|
key: 'title',
|
|||
|
|
ellipsis: true,
|
|||
|
|
width: '40%',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '类型',
|
|||
|
|
dataIndex: 'event_type',
|
|||
|
|
key: 'event_type',
|
|||
|
|
width: 200,
|
|||
|
|
render: (type) => (
|
|||
|
|
<Tag color={getEventTypeColor(type)}>
|
|||
|
|
{getEventTypeLabel(type)}
|
|||
|
|
</Tag>
|
|||
|
|
),
|
|||
|
|
filters: [
|
|||
|
|
{ text: '接近', value: 'approach' },
|
|||
|
|
{ text: '近距离接近', value: 'close_approach' },
|
|||
|
|
{ text: '食', value: 'eclipse' },
|
|||
|
|
{ text: '合', value: 'conjunction' },
|
|||
|
|
{ text: '冲', value: 'opposition' },
|
|||
|
|
{ text: '凌', value: 'transit' },
|
|||
|
|
],
|
|||
|
|
onFilter: (value, record) => record.event_type === value,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '时间',
|
|||
|
|
dataIndex: 'event_time',
|
|||
|
|
key: 'event_time',
|
|||
|
|
width: 180,
|
|||
|
|
render: (time) => new Date(time).toLocaleString('zh-CN'),
|
|||
|
|
sorter: (a, b) => new Date(a.event_time).getTime() - new Date(b.event_time).getTime(),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Row gutter={16} style={{ height: 'calc(100vh - 150px)' }}>
|
|||
|
|
{/* 左侧：关注的天体列表 */}
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Card
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<StarFilled style={{ color: '#faad14' }} />
|
|||
|
|
<span>我的天体</span>
|
|||
|
|
<Tag color="blue">{followedBodies.length}</Tag>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
extra={
|
|||
|
|
<Button size="small" onClick={loadFollowedBodies} loading={loading}>
|
|||
|
|
刷新
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
bordered={false}
|
|||
|
|
style={{ height: '100%', overflow: 'hidden' }}
|
|||
|
|
bodyStyle={{ height: 'calc(100% - 57px)', overflowY: 'auto', padding: 0 }}
|
|||
|
|
>
|
|||
|
|
{followedBodies.length === 0 && !loading ? (
|
|||
|
|
<Empty
|
|||
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|||
|
|
description="还没有关注任何天体"
|
|||
|
|
style={{ marginTop: 60 }}
|
|||
|
|
>
|
|||
|
|
<p style={{ color: '#999', margin: '8px 0' }}>
|
|||
|
|
在主页面点击天体，查看详情后可以关注
|
|||
|
|
</p>
|
|||
|
|
</Empty>
|
|||
|
|
) : (
|
|||
|
|
<List
|
|||
|
|
dataSource={followedBodies}
|
|||
|
|
loading={loading}
|
|||
|
|
renderItem={(body) => (
|
|||
|
|
<List.Item
|
|||
|
|
key={body.id}
|
|||
|
|
onClick={() => handleSelectBody(body)}
|
|||
|
|
style={{
|
|||
|
|
cursor: 'pointer',
|
|||
|
|
backgroundColor: selectedBody?.id === body.id ? '#f0f5ff' : 'transparent',
|
|||
|
|
padding: '12px 16px',
|
|||
|
|
transition: 'background-color 0.3s',
|
|||
|
|
}}
|
|||
|
|
actions={[
|
|||
|
|
<Button
|
|||
|
|
key="unfollow"
|
|||
|
|
type="link"
|
|||
|
|
danger
|
|||
|
|
size="small"
|
|||
|
|
icon={<StarFilled />}
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleUnfollow(body.id);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</Button>,
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<List.Item.Meta
|
|||
|
|
avatar={<StarFilled style={{ color: '#faad14', fontSize: 20 }} />}
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<span>{body.name_zh || body.name}</span>
|
|||
|
|
<Tag color={getBodyTypeColor(body.type)} style={{ marginLeft: 4 }}>
|
|||
|
|
{getBodyTypeLabel(body.type)}
|
|||
|
|
</Tag>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
description={
|
|||
|
|
body.followed_at
|
|||
|
|
? `关注于 ${new Date(body.followed_at).toLocaleDateString('zh-CN')}`
|
|||
|
|
: body.name_zh ? body.name : undefined
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</List.Item>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
|
|||
|
|
{/* 右侧：天体详情和事件 */}
|
|||
|
|
<Col span={16}>
|
|||
|
|
{selectedBody ? (
|
|||
|
|
<Space direction="vertical" size="middle" style={{ width: '100%', height: '100%' }}>
|
|||
|
|
{/* 天体资料 */}
|
|||
|
|
<Card
|
|||
|
|
title={
|
|||
|
|
<Space>
|
|||
|
|
<RocketOutlined />
|
|||
|
|
<span>{selectedBody.name_zh || selectedBody.name}</span>
|
|||
|
|
<Tag color={getBodyTypeColor(selectedBody.type)}>
|
|||
|
|
{getBodyTypeLabel(selectedBody.type)}
|
|||
|
|
</Tag>
|
|||
|
|
</Space>
|
|||
|
|
}
|
|||
|
|
bordered={false}
|
|||
|
|
>
|
|||
|
|
<Descriptions column={2} bordered size="small">
|
|||
|
|
<Descriptions.Item label="ID">{selectedBody.id}</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="类型">
|
|||
|
|
{getBodyTypeLabel(selectedBody.type)}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="中文名">
|
|||
|
|
{selectedBody.name_zh || '-'}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="英文名">
|
|||
|
|
{selectedBody.name}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="状态">
|
|||
|
|
<Tag color={selectedBody.is_active ? 'success' : 'default'}>
|
|||
|
|
{selectedBody.is_active ? '活跃' : '已归档'}
|
|||
|
|
</Tag>
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
<Descriptions.Item label="关注时间">
|
|||
|
|
{selectedBody.followed_at
|
|||
|
|
? new Date(selectedBody.followed_at).toLocaleString('zh-CN')
|
|||
|
|
: '-'}
|
|||
|
|
</Descriptions.Item>
|
|||
|
|
</Descriptions>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 天体事件列表 */}
|
|||
|
|
<Card
|
|||
|
|
title="相关天体事件"
|
|||
|
|
bordered={false}
|
|||
|
|
style={{ marginTop: 16 }}
|
|||
|
|
>
|
|||
|
|
<Table
|
|||
|
|
columns={eventColumns}
|
|||
|
|
dataSource={bodyEvents}
|
|||
|
|
rowKey="id"
|
|||
|
|
loading={eventsLoading}
|
|||
|
|
size="small"
|
|||
|
|
pagination={{
|
|||
|
|
pageSize: 10,
|
|||
|
|
showSizeChanger: false,
|
|||
|
|
showTotal: (total) => `共 ${total} 条`,
|
|||
|
|
}}
|
|||
|
|
locale={{
|
|||
|
|
emptyText: (
|
|||
|
|
<Empty
|
|||
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|||
|
|
description="暂无相关事件"
|
|||
|
|
/>
|
|||
|
|
),
|
|||
|
|
}}
|
|||
|
|
expandable={{
|
|||
|
|
expandedRowRender: (record) => (
|
|||
|
|
<div style={{ padding: '8px 16px' }}>
|
|||
|
|
<p style={{ margin: 0 }}>
|
|||
|
|
<strong>描述：</strong>
|
|||
|
|
{record.description}
|
|||
|
|
</p>
|
|||
|
|
{record.details && (
|
|||
|
|
<p style={{ margin: '8px 0 0', color: '#666' }}>
|
|||
|
|
<strong>详情：</strong>
|
|||
|
|
{JSON.stringify(record.details, null, 2)}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</Space>
|
|||
|
|
) : (
|
|||
|
|
<Card
|
|||
|
|
bordered={false}
|
|||
|
|
style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|||
|
|
>
|
|||
|
|
<Empty
|
|||
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|||
|
|
description="请从左侧选择一个天体查看详情"
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
);
|
|||
|
|
}
|