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
@@ -74,8 +74,10 @@ export function DetailView({ category, groupId, onNavigate, onOpenItem }: Detail
}
const direct = (category.items ?? []) as RenderItem[]
// 空分组不占篇幅(管理后台仍然保留,之后可以往里加条目)
const filledGroups = groups.filter((group) => group.items.length > 0)
if (groups.length === 0) {
if (filledGroups.length === 0) {
return direct.length > 0 ? (
renderItems(direct)
) : (
@@ -83,19 +85,28 @@ export function DetailView({ category, groupId, onNavigate, onOpenItem }: Detail
)
}
if (groups.length === 1 && direct.length === 0) {
return renderItems(groups[0].items)
if (filledGroups.length === 1 && direct.length === 0) {
return renderItems(filledGroups[0].items)
}
return (
<Space direction="column" gap="lg" align="stretch">
{groups.map((group) => (
<GroupBlock key={group.id} name={group.name}>
{filledGroups.map((group) => (
<GroupBlock
key={group.id}
name={group.name}
barColor={category.barColor !== '' ? category.barColor : undefined}
>
{renderItems(group.items)}
</GroupBlock>
))}
{direct.length > 0 && (
<GroupBlock name="未分组">{renderItems(direct)}</GroupBlock>
<GroupBlock
name="未分组"
barColor={category.barColor !== '' ? category.barColor : undefined}
>
{renderItems(direct)}
</GroupBlock>
)}
</Space>
)