From 9b6cc6315833bee6af633e447f8c2de1c6220647 Mon Sep 17 00:00:00 2001 From: WrBug Date: Mon, 2 Mar 2026 17:54:03 +0800 Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BB=93=E4=BD=8D=E7=AE=A1=E7=90=86=E5=88=97=E8=A1=A8=E8=A7=86?= =?UTF-8?q?=E5=9B=BE=E5=88=97=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将12列精简为8列： - 合并"数量"和"平均价格"为"持仓"列 - 合并"当前价格"、"当前价值"、"盈亏"、"已实现盈亏"为"当前价值/盈亏"列 - 减少列宽度，提升表格紧凑性 Made-with: Cursor --- frontend/src/pages/PositionList.tsx | 172 +++++++++------------------- 1 file changed, 56 insertions(+), 116 deletions(-) diff --git a/frontend/src/pages/PositionList.tsx b/frontend/src/pages/PositionList.tsx index 4d31ac5..5a9748f 100644 --- a/frontend/src/pages/PositionList.tsx +++ b/frontend/src/pages/PositionList.tsx @@ -833,7 +833,7 @@ const PositionList: React.FC = () => { ) } - // 根据仓位类型动态生成列（历史仓位不显示当前价格、当前价值、状态列） + // 根据仓位类型动态生成列（优化后的紧凑布局） const columns = useMemo(() => { const baseColumns: any[] = [ { @@ -853,7 +853,6 @@ const PositionList: React.FC = () => { objectFit: 'cover' }} onError={(e) => { - // 图片加载失败时隐藏 e.currentTarget.style.display = 'none' }} /> @@ -876,7 +875,7 @@ const PositionList: React.FC = () => { ), fixed: isMobile ? ('left' as const) : undefined, - width: isMobile ? 150 : 200 + width: isMobile ? 120 : 160 }, { title: '市场', @@ -924,7 +923,7 @@ const PositionList: React.FC = () => { ) }, - width: isMobile ? 200 : 250 + width: isMobile ? 180 : 220 }, { title: '方向', @@ -933,136 +932,77 @@ const PositionList: React.FC = () => { render: (side: string) => ( {side} ), - width: 80 + width: 70 }, { - title: '数量', - dataIndex: 'quantity', - key: 'quantity', - render: (quantity: string) => formatNumber(quantity, 4), + title: '持仓', + key: 'position', + render: (_: any, record: AccountPosition) => ( +
+
{formatNumber(record.quantity, 4)}
+
@{formatNumber(record.avgPrice, 4)}
+
+ ), align: 'right' as const, width: 100 }, - { - title: '平均价格', - dataIndex: 'avgPrice', - key: 'avgPrice', - render: (price: string) => formatNumber(price, 4), - align: 'right' as const, - width: 120 - }, { title: '开仓价值', dataIndex: 'initialValue', key: 'initialValue', render: (value: string) => ( - - {formatUSDC(value)} USDC - + {formatUSDC(value)} USDC ), align: 'right' as const, - width: 120 + width: 110 }, ] - // 只有当前仓位才显示当前价格和当前价值列 + // 只有当前仓位才显示当前价值/盈亏合并列 if (positionFilter === 'current') { - baseColumns.push( - { - title: '当前价格', - dataIndex: 'currentPrice', - key: 'currentPrice', - render: (price: string) => formatNumber(price, 4), - align: 'right' as const, - width: 120 - }, - { - title: '当前价值', - dataIndex: 'currentValue', - key: 'currentValue', - render: (value: string) => ( - - {formatUSDC(value)} USDC - - ), - align: 'right' as const, - width: 120, - sorter: (a: AccountPosition, b: AccountPosition) => { - const valA = parseFloat(a.currentValue || '0') - const valB = parseFloat(b.currentValue || '0') - return valA - valB - }, - defaultSortOrder: 'descend' as const - } - ) - } + baseColumns.push({ + title: '当前价值 / 盈亏', + key: 'valueAndPnl', + render: (_: any, record: AccountPosition) => { + const pnlNum = parseFloat(record.pnl || '0') + const percentPnl = parseFloat(record.percentPnl || '0') + const realizedPnl = record.realizedPnl ? parseFloat(record.realizedPnl) : null + const percentRealizedPnl = record.percentRealizedPnl ? parseFloat(record.percentRealizedPnl) : null - // 只有当前仓位才显示盈亏和已实现盈亏列 - if (positionFilter === 'current') { - baseColumns.push( - { - title: '盈亏', - dataIndex: 'pnl', - key: 'pnl', - render: (pnl: string, record: AccountPosition) => { - const pnlNum = parseFloat(pnl || '0') - const percentPnl = parseFloat(record.percentPnl || '0') - return ( -
-
= 0 ? '#3f8600' : '#cf1322', - fontWeight: 'bold' - }}> - {pnlNum >= 0 ? '+' : ''}{formatUSDC(pnl)} USDC -
-
= 0 ? '#3f8600' : '#cf1322' - }}> - {formatPercent(record.percentPnl)} -
+ return ( +
+
+ {formatUSDC(record.currentValue)} USDC
- ) - }, - align: 'right' as const, - width: 150, - sorter: (a: AccountPosition, b: AccountPosition) => { - const pnlA = parseFloat(a.pnl || '0') - const pnlB = parseFloat(b.pnl || '0') - return pnlA - pnlB - } +
= 0 ? '#3f8600' : '#cf1322', + fontWeight: '500' + }}> + {pnlNum >= 0 ? '+' : ''}{formatUSDC(record.pnl)} ({formatPercent(record.percentPnl)}) +
+ {realizedPnl !== null && ( +
+ 已实现: {realizedPnl >= 0 ? '+' : ''}{formatUSDC(record.realizedPnl)} + {percentRealizedPnl !== null && ` (${formatPercent(record.percentRealizedPnl)})`} +
+ )} +
+ ) }, - { - title: '已实现盈亏', - dataIndex: 'realizedPnl', - key: 'realizedPnl', - render: (realizedPnl: string | undefined, record: AccountPosition) => { - if (!realizedPnl) return '-' - const pnlNum = parseFloat(realizedPnl) - const percentPnl = parseFloat(record.percentRealizedPnl || '0') - return ( -
-
= 0 ? '#3f8600' : '#cf1322', - fontWeight: 'bold' - }}> - {pnlNum >= 0 ? '+' : ''}{formatUSDC(realizedPnl)} USDC -
- {record.percentRealizedPnl && ( -
= 0 ? '#3f8600' : '#cf1322' - }}> - {formatPercent(record.percentRealizedPnl)} -
- )} -
- ) - }, - align: 'right' as const, - width: 150 - } - ) + align: 'right' as const, + width: 160, + sorter: (a: AccountPosition, b: AccountPosition) => { + const valA = parseFloat(a.currentValue || '0') + const valB = parseFloat(b.currentValue || '0') + return valA - valB + }, + defaultSortOrder: 'descend' as const + }) } // 只有当前仓位才显示操作列 @@ -1084,7 +1024,7 @@ const PositionList: React.FC = () => { )} ), - width: 150, + width: 80, fixed: isMobile ? ('right' as const) : undefined }) }