style(content): 明细页分组标题增加分区色条

- 分组标题与首页卡片统一为「色条 + 标题」,颜色取分区的 barColor
- 空分组不再在明细页占标题(后台仍保留)
This commit is contained in:
2026-10-30 19:42:18 +08:00
parent 58725caa95
commit 1a4a6a3655
3 changed files with 47 additions and 13 deletions
@@ -2,22 +2,31 @@ import { Space, Title } from '@stash/ui'
import type { ReactNode } from 'react'
/**
* 明细页的分组块:小标题 + 该组的内容网格。
* 明细页的分组块:色条 + 小标题 + 该组的内容网格。
*
* 具体网格由调用方传入(应用 / 海报 / 图文共用同一层外壳),
* 这样三种类型的「分组」渲染方式保持一致。
* 色条沿用分区的 `barColor`,与首页卡片标题保持同一套视觉语言;
* 具体网格由调用方传入(应用 / 海报 / 图文共用同一层外壳)。
*/
type GroupBlockProps = {
name: string
/** 分区色条颜色;缺省用主题主色 */
barColor?: string
children: ReactNode
}
export function GroupBlock({ name, children }: GroupBlockProps) {
export function GroupBlock({ name, barColor, children }: GroupBlockProps) {
return (
<Space direction="column" gap="sm" align="stretch" className="group-block">
<Title level={4} as="h3">
{name}
</Title>
<div className="group-title">
<span
className="group-bar"
style={barColor !== undefined ? { backgroundColor: barColor } : undefined}
aria-hidden="true"
/>
<Title level={4} as="h3">
{name}
</Title>
</div>
{children}
</Space>
)