From 24eb21fd2908f2d25963a96e0723668068ec7956 Mon Sep 17 00:00:00 2001
From: hzm <934585316@qq.com>
Date: Sat, 7 Mar 2026 20:38:34 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B7=A6=E4=BE=A7=E5=9B=BA=E5=AE=9A=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/MobileFundTable.jsx | 18 +++++++++++++++++-
 app/globals.css                    | 12 ++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/components/MobileFundTable.jsx b/app/components/MobileFundTable.jsx
index cba4518..8ae7e10 100644
--- a/app/components/MobileFundTable.jsx
+++ b/app/components/MobileFundTable.jsx
@@ -276,6 +276,7 @@ export default function MobileFundTable({
   const [settingModalOpen, setSettingModalOpen] = useState(false);
   const tableContainerRef = useRef(null);
   const [tableContainerWidth, setTableContainerWidth] = useState(0);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
     const el = tableContainerRef.current;
@@ -287,6 +288,17 @@ export default function MobileFundTable({
     return () => ro.disconnect();
   }, []);
 
+  useEffect(() => {
+    const el = tableContainerRef.current;
+    if (!el) return;
+    const handleScroll = () => {
+      setIsScrolled(el.scrollLeft > 0);
+    };
+    handleScroll();
+    el.addEventListener('scroll', handleScroll, { passive: true });
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const NAME_CELL_WIDTH = 140;
   const GAP = 12;
   const LAST_COLUMN_EXTRA = 12;
@@ -716,7 +728,11 @@ export default function MobileFundTable({
   })();
 
   const getPinClass = (columnId, isHeader) => {
-    if (columnId === 'fundName') return isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
+    if (columnId === 'fundName') {
+      const baseClass = isHeader ? 'table-header-cell-pin-left' : 'table-cell-pin-left';
+      const scrolledClass = isScrolled ? 'is-scrolled' : '';
+      return `${baseClass} ${scrolledClass}`.trim();
+    }
     return '';
   };
 
diff --git a/app/globals.css b/app/globals.css
index 8be1436..c2e8d39 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1586,13 +1586,17 @@ input[type="number"] {
     position: sticky;
     left: 0;
     z-index: 2;
-    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
     border-bottom: none;
   }
 
-  [data-theme="light"] .mobile-fund-table .table-header-cell-pin-left,
-  [data-theme="light"] .mobile-fund-table .table-cell-pin-left {
+  .mobile-fund-table .table-header-cell-pin-left .is-scrolled,
+  .mobile-fund-table .table-cell-pin-left .is-scrolled {
+    box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+  }
+
+  [data-theme="light"] .mobile-fund-table .table-header-cell-pin-left .is-scrolled,
+  [data-theme="light"] .mobile-fund-table .table-cell-pin-left .is-scrolled {
     box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.08);
     border-right-color: rgba(0, 0, 0, 0.06);
   }