stash
2724d6f3ff
- 角标：绝对定位 top -8 / right -18、16 高、8 圆角、12/700、危险色阴影（原来跟在标题后面占行内空间） - 标题前色条补 8px 右间距，标题起点与旧版一致 - 搜索框：圆角 6 → 12（旧版 card-box 的圆角）
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import { Badge, Card, Icon, IconButton, Title } from '@stash/ui'
|
|
import type { ReactNode } from 'react'
|
|
|
|
/**
|
|
* 首页分区卡片：白底容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
|
|
* 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
|
|
*/
|
|
type SectionCardProps = {
|
|
title: string
|
|
count: number
|
|
/** 标题左侧色条颜色，不同分类用不同颜色区分 */
|
|
barColor?: string
|
|
/** 点击右上角 ••• 进入该分类的明细视图 */
|
|
onMore?: () => void
|
|
children: ReactNode
|
|
}
|
|
|
|
export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
|
|
return (
|
|
<Card padding="md" className="section-card">
|
|
<div className="section-header">
|
|
<span className="section-title-wrapper">
|
|
<span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
|
|
<span className="section-title-box">
|
|
<Title level={3} as="h2" weight="semibold">
|
|
{title}
|
|
</Title>
|
|
<Badge count={count} tone="danger" className="count-badge" />
|
|
</span>
|
|
</span>
|
|
|
|
{onMore !== undefined && (
|
|
<IconButton
|
|
size="xs"
|
|
className="section-more"
|
|
label={`查看${title}全部`}
|
|
icon={<Icon name="more_1_line" />}
|
|
onClick={onMore}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{children}
|
|
</Card>
|
|
)
|
|
}
|