feat: PC 表头改为居右对齐
This commit is contained in:
@@ -48,6 +48,7 @@ const NON_FROZEN_COLUMN_IDS = [
|
|||||||
'latestNav',
|
'latestNav',
|
||||||
'estimateNav',
|
'estimateNav',
|
||||||
];
|
];
|
||||||
|
|
||||||
const COLUMN_HEADERS = {
|
const COLUMN_HEADERS = {
|
||||||
relatedSector: '关联板块',
|
relatedSector: '关联板块',
|
||||||
latestNav: '最新净值',
|
latestNav: '最新净值',
|
||||||
@@ -466,7 +467,7 @@ export default function PcFundTable({
|
|||||||
while (queue.length) {
|
while (queue.length) {
|
||||||
const item = queue.shift();
|
const item = queue.shift();
|
||||||
if (item == null) continue;
|
if (item == null) continue;
|
||||||
// eslint-disable-next-line no-await-in-loop
|
|
||||||
results.push(await worker(item));
|
results.push(await worker(item));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -1046,19 +1047,22 @@ export default function PcFundTable({
|
|||||||
const isNameColumn =
|
const isNameColumn =
|
||||||
header.column.id === 'fundName' ||
|
header.column.id === 'fundName' ||
|
||||||
header.column.columnDef?.accessorKey === 'fundName';
|
header.column.columnDef?.accessorKey === 'fundName';
|
||||||
const align = isNameColumn ? '' : 'text-center';
|
const isRightAligned = NON_FROZEN_COLUMN_IDS.includes(header.column.id);
|
||||||
|
const align = isNameColumn ? '' : isRightAligned ? 'text-right' : 'text-center';
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={header.id}
|
key={header.id}
|
||||||
className={`table-header-cell ${align}`}
|
className={`table-header-cell ${align}`}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
|
<div style={{ paddingRight: isRightAligned ? '20px' : '0' }}>
|
||||||
{header.isPlaceholder
|
{header.isPlaceholder
|
||||||
? null
|
? null
|
||||||
: flexRender(
|
: flexRender(
|
||||||
header.column.columnDef.header,
|
header.column.columnDef.header,
|
||||||
header.getContext(),
|
header.getContext(),
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
{!forPortal && (
|
{!forPortal && (
|
||||||
<div
|
<div
|
||||||
onMouseDown={header.column.getCanResize() ? header.getResizeHandler() : undefined}
|
onMouseDown={header.column.getCanResize() ? header.getResizeHandler() : undefined}
|
||||||
@@ -1201,19 +1205,9 @@ export default function PcFundTable({
|
|||||||
{row.getVisibleCells().map((cell) => {
|
{row.getVisibleCells().map((cell) => {
|
||||||
const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
|
const columnId = cell.column.id || cell.column.columnDef?.accessorKey;
|
||||||
const isNameColumn = columnId === 'fundName';
|
const isNameColumn = columnId === 'fundName';
|
||||||
const rightAlignedColumns = new Set([
|
|
||||||
'latestNav',
|
|
||||||
'estimateNav',
|
|
||||||
'yesterdayChangePercent',
|
|
||||||
'estimateChangePercent',
|
|
||||||
'totalChangePercent',
|
|
||||||
'holdingAmount',
|
|
||||||
'todayProfit',
|
|
||||||
'holdingProfit',
|
|
||||||
]);
|
|
||||||
const align = isNameColumn
|
const align = isNameColumn
|
||||||
? ''
|
? ''
|
||||||
: rightAlignedColumns.has(columnId)
|
: NON_FROZEN_COLUMN_IDS.includes(columnId)
|
||||||
? 'text-right'
|
? 'text-right'
|
||||||
: 'text-center';
|
: 'text-center';
|
||||||
const cellClassName =
|
const cellClassName =
|
||||||
@@ -1281,13 +1275,15 @@ export default function PcFundTable({
|
|||||||
const isNameColumn =
|
const isNameColumn =
|
||||||
header.column.id === 'fundName' ||
|
header.column.id === 'fundName' ||
|
||||||
header.column.columnDef?.accessorKey === 'fundName';
|
header.column.columnDef?.accessorKey === 'fundName';
|
||||||
const align = isNameColumn ? '' : 'text-center';
|
const isRightAligned = NON_FROZEN_COLUMN_IDS.includes(header.column.id);
|
||||||
|
const align = isNameColumn ? '' : isRightAligned ? 'text-right' : 'text-center';
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={header.id}
|
key={header.id}
|
||||||
className={`table-header-cell ${align}`}
|
className={`table-header-cell ${align}`}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
|
<div style={{ paddingRight: isRightAligned ? '20px' : '0' }}>
|
||||||
{header.isPlaceholder
|
{header.isPlaceholder
|
||||||
? null
|
? null
|
||||||
: flexRender(
|
: flexRender(
|
||||||
@@ -1295,6 +1291,7 @@ export default function PcFundTable({
|
|||||||
header.getContext(),
|
header.getContext(),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user