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.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { Avatar, ItemBadge, Space, Text } from '@stash/ui'
|
|
import type { AppItem } from '../../data/types'
|
|
|
|
/**
|
|
* 应用卡片：头像 + 名称（热门带 HOT 角标）+ 单行描述。
|
|
* 点击进入条目详情；按住修饰键时保持浏览器默认行为（新标签打开原始链接）。
|
|
*/
|
|
type AppCardProps = {
|
|
item: AppItem
|
|
onOpen?: (itemId: string) => void
|
|
}
|
|
|
|
export function AppCard({ item, onOpen }: AppCardProps) {
|
|
return (
|
|
<a
|
|
className="app-card"
|
|
href={item.href}
|
|
title={item.name}
|
|
onClick={(event) => {
|
|
if (onOpen === undefined) return
|
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
|
|
event.preventDefault()
|
|
onOpen(item.id)
|
|
}}
|
|
>
|
|
<Avatar
|
|
size="lg"
|
|
tone="primary"
|
|
className="app-card-avatar"
|
|
src={item.cover}
|
|
fallback={item.icon}
|
|
verified={item.hot === true}
|
|
/>
|
|
|
|
<div className="app-card-info">
|
|
<Space gap="xs">
|
|
<Text strong truncate className="app-card-name">
|
|
{item.name}
|
|
</Text>
|
|
{item.hot === true && <ItemBadge tone="hot">HOT</ItemBadge>}
|
|
</Space>
|
|
<Text size="xs" tone="muted" truncate>
|
|
{item.desc}
|
|
</Text>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|