feat: 移动端表格斑马纹

app/components/MobileFundTable.jsx

@@ -1013,7 +1013,7 @@ export default function MobileFundTable({
                 strategy={verticalListSortingStrategy}
               >
                 <AnimatePresence mode="popLayout">
-                  {table.getRowModel().rows.map((row) => (
+                  {table.getRowModel().rows.map((row, index) => (
                     <SortableRow
                       key={row.original.code || row.id}
                       row={row}
@@ -1025,7 +1025,7 @@ export default function MobileFundTable({
                           ref={sortBy === 'default' && !isNameSortMode ? setActivatorNodeRef : undefined}
                           className="table-row"
                           style={{
-                            background: 'var(--bg)',
+                            background: index % 2 === 0 ? 'var(--bg)' : 'var(--table-row-alt-bg)',
                             position: 'relative',
                             zIndex: 1,
                             ...(mobileGridLayout.gridTemplateColumns ? { gridTemplateColumns: mobileGridLayout.gridTemplateColumns } : {}),
@@ -1039,11 +1039,19 @@ export default function MobileFundTable({
                             const alignClass = getAlignClass(columnId);
                             const cellClassName = cell.column.columnDef.meta?.cellClassName || '';
                             const isLastColumn = cellIndex === row.getVisibleCells().length - 1;
+                            const style = isLastColumn ? {paddingRight: LAST_COLUMN_EXTRA} : {};
+                            if (cellIndex  === 0) {
+                              if (index % 2 !== 0) {
+                                style.background = 'var(--table-row-alt-bg)';
+                              }else {
+                                style.background = 'var(--bg)';
+                              }
+                            }
                             return (
                               <div
                                 key={cell.id}
                                 className={`table-cell ${alignClass} ${cellClassName} ${pinClass}`}
-                                style={isLastColumn ? { paddingRight: LAST_COLUMN_EXTRA } : undefined}
+                                style={style}
                               >
                                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
                               </div>

app/components/PcFundTable.jsx

@@ -954,7 +954,7 @@ export default function PcFundTable({
       left: isLeft ? `${column.getStart('left')}px` : undefined,
       right: isRight ? `${column.getAfter('right')}px` : undefined,
       zIndex: isHeader ? 11 : 10,
-      backgroundColor: isHeader ? 'var(--table-pinned-header-bg)' : 'var(--row-bg)',
+      backgroundColor: isHeader ? 'var(--table-pinned-header-bg)' : 'var(--row-bg, var(--bg))',
       boxShadow: 'none',
       textAlign: isNameColumn ? 'left' : 'center',
       justifyContent: isNameColumn ? 'flex-start' : 'center',
@@ -1007,10 +1007,23 @@ export default function PcFundTable({
           --row-bg: var(--bg);
           background-color: var(--row-bg);
         }
+        .table-row-scroll:nth-child(even) {
+          background-color: var(--table-row-alt-bg);
+        }
         .table-row-scroll:hover {
           --row-bg: var(--table-row-hover-bg);
         }
 
+        /* Pinned cells in even rows */
+        .row-even .pinned-cell {
+          background-color: var(--table-row-alt-bg) !important;
+        }
+
+        /* Pinned cells on hover */
+        .table-row-scroll:hover .pinned-cell {
+          background-color: var(--table-row-hover-bg) !important;
+        }
+
         /* 覆盖 grid 布局为 flex 以支持动态列宽 */
         .table-header-row-scroll,
         .table-row-scroll {
@@ -1092,10 +1105,10 @@ export default function PcFundTable({
           strategy={verticalListSortingStrategy}
         >
           <AnimatePresence mode="popLayout">
-            {table.getRowModel().rows.map((row) => (
+            {table.getRowModel().rows.map((row, index) => (
               <SortableRow key={row.original.code || row.id} row={row} isTableDragging={!!activeId} disabled={sortBy !== 'default'}>
                 <div
-                  className="table-row table-row-scroll"
+                  className={`table-row table-row-scroll ${index % 2 === 1 ? 'row-even' : ''}`}
                 >
                   {row.getVisibleCells().map((cell) => {
                     const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
@@ -1118,10 +1131,11 @@ export default function PcFundTable({
                     const cellClassName =
                       (cell.column.columnDef.meta && cell.column.columnDef.meta.cellClassName) || '';
                     const style = getCommonPinningStyles(cell.column, false);
+                    const isPinned = cell.column.getIsPinned();
                     return (
                       <div
                         key={cell.id}
-                        className={`table-cell ${align} ${cellClassName}`}
+                        className={`table-cell ${align} ${cellClassName} ${isPinned ? 'pinned-cell' : ''}`}
                         style={style}
                       >
                         {flexRender(

app/globals.css

@@ -16,6 +16,7 @@
   --border: #1f2937;
   --table-pinned-header-bg: #2a394b;
   --table-row-hover-bg: #2a394b;
+  --table-row-alt-bg: #1a2535;
   --radius: 0.625rem;
   --background: #0f172a;
   --foreground: #e5e7eb;
@@ -65,6 +66,7 @@
   --border: #e2e8f0;
   --table-pinned-header-bg: #e2e8f0;
   --table-row-hover-bg: #e2e8f0;
+  --table-row-alt-bg: #f8fafc;
   --background: #ffffff;
   --foreground: #0f172a;
   --card-foreground: #0f172a;
@@ -449,11 +451,19 @@ body::before {
   background: #e2e8f0;
 }
 
+[data-theme="light"] .table-row:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 [data-theme="light"] .table-row-scroll:hover,
 [data-theme="light"] .table-row-scroll.row-hovered {
   background: #e2e8f0;
 }
 
+[data-theme="light"] .table-row-scroll:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 [data-theme="light"] .table-fixed-row.row-hovered {
   background: #e2e8f0;
 }
@@ -1404,6 +1414,10 @@ input[type="number"] {
   background: rgba(255, 255, 255, 0.08);
 }
 
+.table-row-scroll:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 .table-fixed-row.row-hovered {
   background: rgba(255, 255, 255, 0.08);
 }
@@ -1458,6 +1472,10 @@ input[type="number"] {
   background: #2a394b;
 }
 
+.table-row:nth-child(even) {
+  background: var(--table-row-alt-bg);
+}
+
 .table-row:last-child {
   border-bottom: none;
 }