From dc7d9e83b856e9b0de06171efbc6b27a2a0e33c4 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Wed, 3 Jun 2026 22:31:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B6=E9=9B=86=E7=AE=B1=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8FUI=E7=BE=8E=E5=8C=96=20=E2=80=94=20=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=BB=9A=E5=8A=A8=E6=9D=A1=E3=80=81=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F=E7=A9=BA=E5=88=86=E7=BB=84=E3=80=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A1=B9=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inbox/components/MaterialGroup.tsx        | 15 ++--------
 .../inbox/components/MaterialList.tsx         | 28 +++++++++++--------
 src/web/styles.css                            | 11 ++------
 3 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/web/features/inbox/components/MaterialGroup.tsx b/src/web/features/inbox/components/MaterialGroup.tsx
index 8753640..3c0735c 100644
--- a/src/web/features/inbox/components/MaterialGroup.tsx
+++ b/src/web/features/inbox/components/MaterialGroup.tsx
@@ -5,11 +5,10 @@ import { type ReactNode, useState } from "react";
 interface MaterialGroupProps {
   children: ReactNode;
   count: number;
-  emptyText?: string;
   label: string;
 }
 
-export function MaterialGroup({ children, count, emptyText, label }: MaterialGroupProps) {
+export function MaterialGroup({ children, count, label }: MaterialGroupProps) {
   const [collapsed, setCollapsed] = useState(false);
 
   return (
@@ -23,17 +22,7 @@ export function MaterialGroup({ children, count, emptyText, label }: MaterialGro
           ({count})
         </Typography.Text>
       </div>
-      {!collapsed && (
-        <div className="app-inbox-group-content">
-          {count === 0 && emptyText ? (
-            <Typography.Text className="app-inbox-group-empty" type="secondary">
-              {emptyText}
-            </Typography.Text>
-          ) : (
-            children
-          )}
-        </div>
-      )}
+      {!collapsed && <div className="app-inbox-group-content">{children}</div>}
     </div>
   );
 }
diff --git a/src/web/features/inbox/components/MaterialList.tsx b/src/web/features/inbox/components/MaterialList.tsx
index a2f73ec..105506a 100644
--- a/src/web/features/inbox/components/MaterialList.tsx
+++ b/src/web/features/inbox/components/MaterialList.tsx
@@ -6,10 +6,13 @@ import {
   PlusOutlined,
 } from "@ant-design/icons";
 import { Button, Empty, Segmented, Skeleton } from "antd";
+import "overlayscrollbars/styles/overlayscrollbars.css";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { useMemo, useState } from "react";
 
 import type { Material } from "../types";
 
+import { useIsDark } from "../../../shared/hooks/use-is-dark";
 import { MaterialCard } from "./MaterialCard";
 import { MaterialGroup } from "./MaterialGroup";
 
@@ -84,6 +87,7 @@ type FilterValue = (typeof STATUS_FILTER_OPTIONS)[number]["value"];
 
 export function MaterialList({ loading, materials, onAddClick, onDelete, onSelect, selectedId }: MaterialListProps) {
   const [filterStatus, setFilterStatus] = useState<FilterValue>("all");
+  const isDark = useIsDark();
 
   const filteredMaterials = useMemo(() => {
     if (filterStatus === "all") return materials;
@@ -106,8 +110,6 @@ export function MaterialList({ loading, materials, onAddClick, onDelete, onSelec
     [materials],
   );
 
-  const showAllGroups = filterStatus === "all";
-
   return (
     <div className="app-inbox-sidebar">
       <div className="app-inbox-sidebar-header">
@@ -116,7 +118,16 @@ export function MaterialList({ loading, materials, onAddClick, onDelete, onSelec
         </Button>
         <Segmented block onChange={(value) => setFilterStatus(value)} options={segmentedOptions} value={filterStatus} />
       </div>
-      <div className="app-inbox-list">
+      <OverlayScrollbarsComponent
+        className="app-inbox-list"
+        options={{
+          overflow: { x: "hidden", y: "scroll" },
+          scrollbars: {
+            autoHide: "move",
+            theme: isDark ? "os-theme-custom-dark" : "os-theme-custom",
+          },
+        }}
+      >
         {loading ? (
           <Skeleton active paragraph={{ rows: 6 }} title={false} />
         ) : materials.length === 0 ? (
@@ -125,14 +136,9 @@ export function MaterialList({ loading, materials, onAddClick, onDelete, onSelec
           <Empty description="当前筛选条件下无素材" image={Empty.PRESENTED_IMAGE_SIMPLE} />
         ) : (
           groupedMaterials.map((group) => {
-            if (!showAllGroups && group.items.length === 0) return null;
+            if (group.items.length === 0) return null;
             return (
-              <MaterialGroup
-                count={group.items.length}
-                emptyText="暂无"
-                key={group.key}
-                label={GROUP_LABELS[group.key]}
-              >
+              <MaterialGroup count={group.items.length} key={group.key} label={GROUP_LABELS[group.key]}>
                 {group.items.map((material) => (
                   <MaterialCard
                     key={material.id}
@@ -146,7 +152,7 @@ export function MaterialList({ loading, materials, onAddClick, onDelete, onSelec
             );
           })
         )}
-      </div>
+      </OverlayScrollbarsComponent>
     </div>
   );
 }
diff --git a/src/web/styles.css b/src/web/styles.css
index 51e1d87..5ac5014 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -52,7 +52,7 @@ body {
 
 .app-content {
   overflow: auto;
-  padding: var(--ant-padding-xl) var(--ant-padding-xl);
+  padding: var(--ant-padding) var(--ant-padding-lg);
 }
 
 .app-chat-page {
@@ -277,7 +277,6 @@ body {
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  overflow-y: auto;
 }
 
 .app-inbox-content {
@@ -353,6 +352,8 @@ body {
 }
 
 .material-item-time {
+  display: block;
+  margin-top: var(--ant-margin-xxs);
   font-size: var(--ant-font-size-sm);
 }
 
@@ -396,12 +397,6 @@ body {
   padding-bottom: var(--ant-padding-xs);
 }
 
-.app-inbox-group-empty {
-  display: block;
-  padding: var(--ant-padding-xs) var(--ant-padding);
-  font-size: var(--ant-font-size-sm);
-}
-
 .app-inbox-filter-count {
   margin-left: 4px;
   font-size: var(--ant-font-size-sm);