import React from 'react'; | |
import { useNavigate, useLocation } from 'react-router-dom'; | |
import ActionCard from './ActionCard'; | |
import './personalSubpage.css'; | |
const Favorites = () => { | |
const navigate = useNavigate(); | |
const location = useLocation(); | |
// 模拟数据 | |
const [favorites] = React.useState([ | |
{ id: 1, name: '盗梦空间', type: 'movie', added: '2023-10-01' }, | |
{ id: 2, name: '权力的游戏', type: 'tv', added: '2023-09-15' } | |
]); | |
const handleBack = () => { | |
// 返回个人中心,并携带来源标记 | |
navigate('/personal', { | |
state: { | |
fromSubpage: true, // 标记来自子页面 | |
dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态 | |
}, | |
replace: true // 替换当前历史记录 | |
}); | |
}; | |
return ( | |
<div className="personal-page"> | |
<button className="back-button" onClick={(handleBack)}> | |
← 返回个人中心 | |
</button> | |
<h2>我的收藏</h2> | |
<div className="resource-grid"> | |
{favorites.map(item => ( | |
<ActionCard | |
key={item.id} | |
title={item.name} | |
subtitle={`收藏于 ${item.added}`} | |
onClick={() => console.log('查看详情', item.id)} | |
/> | |
))} | |
</div> | |
</div> | |
); | |
}; | |
export default Favorites; |