- 布局: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 对齐原值
22 lines
614 B
TypeScript
22 lines
614 B
TypeScript
import { Grid } from '@stash/ui'
|
|
import type { PosterItem } from '../../data/types'
|
|
import { PosterCard } from './PosterCard'
|
|
|
|
/** 海报网格:桌面 6 列,平板 4 列,手机 3 列 */
|
|
type PosterGridProps = {
|
|
items: PosterItem[]
|
|
variant?: 'home' | 'detail'
|
|
/** 点击海报打开条目详情 */
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function PosterGrid({ items, onOpen }: PosterGridProps) {
|
|
return (
|
|
<Grid columns={6} tabletColumns={4} mobileColumns={3} gap="md">
|
|
{items.map((item) => (
|
|
<PosterCard key={item.id} item={item} onOpen={onOpen} />
|
|
))}
|
|
</Grid>
|
|
)
|
|
}
|