From 1a4a6a365504e44c174dd7846ede6090ba05c176 Mon Sep 17 00:00:00 2001
From: CNWei <t6g888@163.com>
Date: Fri, 30 Oct 2026 19:42:18 +0800
Subject: [PATCH] =?UTF-8?q?style(content):=20=E6=98=8E=E7=BB=86=E9=A1=B5?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E6=A0=87=E9=A2=98=E5=A2=9E=E5=8A=A0=E5=88=86?=
 =?UTF-8?q?=E5=8C=BA=E8=89=B2=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 分组标题与首页卡片统一为「色条 + 标题」，颜色取分区的 barColor
- 空分组不再在明细页占标题（后台仍保留）
---
 stash-web/src/App.css                         | 14 +++++++++++
 .../src/components/content/DetailView.tsx     | 23 ++++++++++++++-----
 .../src/components/content/GroupBlock.tsx     | 23 +++++++++++++------
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index dcb1cb7..f6b52dc 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -336,6 +336,20 @@
   background-color: var(--su-color-primary);
 }
 
+/* 明细页的分组标题：与首页卡片标题同一套「色条 + 标题」 */
+.group-title {
+  display: flex;
+  align-items: center;
+}
+
+.group-bar {
+  width: 4px;
+  height: 16px;
+  margin-right: var(--su-space-2);
+  border-radius: 2px;
+  background-color: var(--su-color-primary);
+}
+
 /* ---------- 应用条目 ---------- */
 
 .app-card {
diff --git a/stash-web/src/components/content/DetailView.tsx b/stash-web/src/components/content/DetailView.tsx
index ea36181..a4dbbab 100644
--- a/stash-web/src/components/content/DetailView.tsx
+++ b/stash-web/src/components/content/DetailView.tsx
@@ -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>
     )
diff --git a/stash-web/src/components/content/GroupBlock.tsx b/stash-web/src/components/content/GroupBlock.tsx
index d077506..8ebb020 100644
--- a/stash-web/src/components/content/GroupBlock.tsx
+++ b/stash-web/src/components/content/GroupBlock.tsx
@@ -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>
   )