stash
1942e201e9
对齐项（8080 vs 8081 实测，误差 ≤1px）： - 侧栏：资料卡 224、服务面板 144、导航 143，navTop 548 与原版一致 - 分区卡：142/142/327/270 vs 142/142/326/269；标题 16/1.2、更多按钮 24px - 应用条目：48px 圆形头像 + 10px 小认证标；hover 名字变主色（不再整行变色） - 封面：hover 上浮 2px（0.2s ease），去掉缩放；CES 封面恢复 16/10 - 搜索框：44 高、无边框 + 卡片阴影 - 服务面板：状态药丸 22、统计 12/18、操作按钮 28、刷新时图标原地旋转 - 详情：返回链接 hover 下划线、跳转按钮 hover 深主色、view-in 淡入动画 - 菜单：hover 主色、子菜单 0.28s grid 高度动画、chevron 6px 旋转 - 回到顶部：right 30、top 50%、滚动后淡入（补内容区滚动监听） - 主题：卡片阴影恢复 2%/6%（旧版值）
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Card, Cover, Space, Text } from '@stash/ui'
|
|
import type { ArticleItem } from '../../data/types'
|
|
|
|
/**
|
|
* 明细页图文卡：上图下文的白卡。
|
|
* 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
|
|
*/
|
|
type CesCardProps = {
|
|
item: ArticleItem
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function CesCard({ item, onOpen }: CesCardProps) {
|
|
const body = (
|
|
<Space direction="column" gap="xs" align="stretch">
|
|
<Text strong truncate>
|
|
{item.title}
|
|
</Text>
|
|
<Text size="xs" tone="muted" truncate>
|
|
{item.desc}
|
|
</Text>
|
|
</Space>
|
|
)
|
|
|
|
return (
|
|
<Card padding="none" hoverable className="ces-card">
|
|
<Cover
|
|
src={item.cover}
|
|
alt={item.title}
|
|
ratio={16 / 10}
|
|
radius="none"
|
|
onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
|
|
/>
|
|
{onOpen === undefined ? (
|
|
<div className="ces-body">{body}</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="ces-body ces-body--button"
|
|
title={item.title}
|
|
onClick={() => onOpen(item.id)}
|
|
>
|
|
{body}
|
|
</button>
|
|
)}
|
|
</Card>
|
|
)
|
|
}
|