- 布局:Layout 使用 contained(1380)+gutter20+siderWidth240+gap20、solid 60px 页头、整屏内部滚动 - 搜索框恢复悬浮居中;侧栏与内容恢复 52/88px 顶部偏移 - 新增并使用 @stash/ui 的 Cover(海报 2:3 / 图文 4:3 / 宽图)替换手写封面 - 头像恢复 64px 品牌底色;正文恢复 14/1.9;详情标题、标签、引用、统计、跳转按原版还原 - 分区卡 padding 20、分区标题 16、网格间距 12/16 对齐原值
24 lines
592 B
TypeScript
24 lines
592 B
TypeScript
import { Cover } from '@stash/ui'
|
|
import type { PosterItem } from '../../data/types'
|
|
|
|
/**
|
|
* 竖版海报卡:2:3 封面 + 底部渐变遮罩上的标题。
|
|
* 传入 onOpen 时整张卡变成按钮,点击进入该电影的详情页。
|
|
*/
|
|
type PosterCardProps = {
|
|
item: PosterItem
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function PosterCard({ item, onOpen }: PosterCardProps) {
|
|
return (
|
|
<Cover
|
|
src={item.cover}
|
|
alt={item.title}
|
|
caption={item.title}
|
|
ratio="poster"
|
|
onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
|
|
/>
|
|
)
|
|
}
|