style(content): 明细页分组标题增加分区色条
- 分组标题与首页卡片统一为「色条 + 标题」,颜色取分区的 barColor - 空分组不再在明细页占标题(后台仍保留)
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user