stash
64f1fbf906
- 新增本地依赖 @stash/ui（file:../../stash-ui），引入其 style.css 与设计令牌 - 页面骨架改用 Layout（contained + header/sider），搜索框改为吸顶 - 卡片/菜单/按钮/标签/头像/分页/空态/提示全部换成组件库组件 - 删除本地 iconfont 与 1400 行手写组件样式，App.css 只保留页面级样式 - 数据层、路由、过滤逻辑未改动；33 个 Rust 测试通过
30 lines
793 B
TypeScript
30 lines
793 B
TypeScript
import type { PosterItem } from '../../data/types'
|
|
|
|
/**
|
|
* 竖版海报卡：2:3 封面 + 底部渐变遮罩上的标题。
|
|
* 传入 onOpen 时整张卡变成按钮，点击进入该电影的详情页。
|
|
*/
|
|
type PosterCardProps = {
|
|
item: PosterItem
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function PosterCard({ item, onOpen }: PosterCardProps) {
|
|
const content = (
|
|
<>
|
|
<img className="cover cover--poster" src={item.cover} alt={item.title} loading="lazy" />
|
|
<span className="cover-caption">{item.title}</span>
|
|
</>
|
|
)
|
|
|
|
if (onOpen === undefined) {
|
|
return <figure className="cover-card">{content}</figure>
|
|
}
|
|
|
|
return (
|
|
<button type="button" className="cover-card" title={item.title} onClick={() => onOpen(item.id)}>
|
|
{content}
|
|
</button>
|
|
)
|
|
}
|