leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端表格斑马纹

Browse Source
This commit is contained in:
hzm
2026-03-13 22:30:10 +08:00
parent e46ced6360
commit b8f3af4486
3 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/MobileFundTable.jsx
View File

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

22
app/components/PcFundTable.jsx
View File

@@ -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(

18
app/globals.css
View File

@@ -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;
}