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>
   )