gavindiaz/PolyHermes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 订单列表按市场分组功能重构

Browse Source 
- 后端实现按市场分组的订单列表接口
  - 添加 MarketGroupedOrdersRequest、MarketOrderStats、MarketOrderGroup、MarketGroupedOrdersResponse DTO
  - 实现 getBuyOrderListGroupedByMarket 和 getSellOrderListGroupedByMarket 方法
  - 添加 POST /api/copy-trading/orders/grouped-by-market 接口
  - 支持分页和统计信息（订单数、总金额、盈亏、成交状态等）

- 前端重构：移除前端分组逻辑，改为调用后端分组接口
  - BuyOrdersTab 和 SellOrdersTab 使用后端分组接口
  - 移除前端 useMemo 分组计算逻辑
  - 添加分组数据状态管理和分页支持

- 分组默认折叠状态
  - 移除桌面端自动展开逻辑
  - 所有设备默认折叠，用户手动展开

- 修复 moneyline URL 逻辑
  - getPolymarketUrl 函数添加 isMoneyline 参数
  - 暂时不自动跳转到 moneyline 页面（需要后端提供标识）

- 多语言支持
  - 添加 markets 翻译键（中文、繁体中文、英文）
This commit is contained in:
WrBug
2026-01-08 13:19:52 +08:00
parent 2af2c0e86a
commit 3d5a923caf
11 changed files with 524 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/locales/en/common.json
+1
View File
@@ -1062,6 +1062,7 @@
"totalAmount": "Total Amount",
"totalPnl": "Total PnL",
"statusBreakdown": "Status",
"markets": "markets",
"fetchBuyOrdersFailed": "Failed to fetch buy orders",
"fetchSellOrdersFailed": "Failed to fetch sell orders",
"fetchMatchedOrdersFailed": "Failed to fetch matched orders",
frontend/src/locales/zh-CN/common.json
+1 -1
View File
@@ -1060,8 +1060,8 @@
"partiallyMatched": "部分成交",
"orderCount": "订单数",
"totalAmount": "总金额",
"totalPnl": "总盈亏",
"statusBreakdown": "状态",
"markets": "个市场",
"fetchBuyOrdersFailed": "获取买入订单列表失败",
"fetchSellOrdersFailed": "获取卖出订单列表失败",
"fetchMatchedOrdersFailed": "获取匹配关系列表失败",
frontend/src/locales/zh-TW/common.json
+1
View File
@@ -1062,6 +1062,7 @@
"totalAmount": "總金額",
"totalPnl": "總盈虧",
"statusBreakdown": "狀態",
"markets": "個市場",
"fetchBuyOrdersFailed": "獲取買入訂單列表失敗",
"fetchSellOrdersFailed": "獲取賣出訂單列表失敗",
"fetchMatchedOrdersFailed": "獲取匹配關係列表失敗",
frontend/src/pages/CopyTradingOrders/BuyOrdersTab.tsx
+76 -87
View File
@@ -1,10 +1,10 @@
import { useEffect, useState, useMemo } from 'react'
import { useEffect, useState } from 'react'
import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message, Switch, Space } from 'antd'
import { apiService } from '../../services/api'
import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard, getPolymarketUrl } from '../../utils'
import { useMediaQuery } from 'react-responsive'
import { useTranslation } from 'react-i18next'
import type { BuyOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'
import type { BuyOrderInfo, OrderTrackingRequest, OrderTrackingListResponse, MarketGroupedOrdersRequest, MarketGroupedOrdersResponse, MarketOrderGroup } from '../../types'
const { Option } = Select
@@ -30,31 +30,51 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
}>({})
const [groupByMarket, setGroupByMarket] = useState(false) // 是否按市场分组
const [expandedMarkets, setExpandedMarkets] = useState<Set<string>>(new Set()) // 展开的市场ID集合
const [groupedOrders, setGroupedOrders] = useState<MarketOrderGroup[]>([]) // 分组数据（从后端获取）
const [groupedTotal, setGroupedTotal] = useState(0) // 分组总数（市场数量）
useEffect(() => {
if (copyTradingId && active) {
fetchOrders()
}
}, [copyTradingId, active, page, limit, filters])
}, [copyTradingId, active, page, limit, filters, groupByMarket])
const fetchOrders = async () => {
if (!copyTradingId) return
setLoading(true)
try {
const request: OrderTrackingRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'buy',
page,
limit,
...filters
}
if (groupByMarket) {
// 调用分组接口
const request: MarketGroupedOrdersRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'buy',
page,
limit
}
const response = await apiService.orderTracking.list(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as OrderTrackingListResponse
setOrders((data.list || []) as BuyOrderInfo[])
setTotal(data.total || 0)
const response = await apiService.orderTracking.listGroupedByMarket(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as MarketGroupedOrdersResponse
setGroupedOrders(data.list || [])
setGroupedTotal(data.total || 0)
}
} else {
// 调用普通列表接口
const request: OrderTrackingRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'buy',
page,
limit,
...filters
}
const response = await apiService.orderTracking.list(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as OrderTrackingListResponse
setOrders((data.list || []) as BuyOrderInfo[])
setTotal(data.total || 0)
}
}
} catch (error: any) {
console.error('获取买入订单列表失败:', error)
@@ -82,69 +102,6 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
}
}
// 分组数据结构
interface GroupedOrders {
marketId: string
marketTitle?: string
marketSlug?: string
marketCategory?: string
orders: BuyOrderInfo[]
stats: {
count: number
totalAmount: string
fullyMatched: boolean // 是否全部成交
fullyMatchedCount: number // 完全成交的订单数
partiallyMatchedCount: number // 部分成交的订单数
filledCount: number // 未成交的订单数
}
}
// 按市场分组订单
const groupedOrders = useMemo<GroupedOrders[]>(() => {
if (!groupByMarket) return []
const groups = new Map<string, BuyOrderInfo[]>()
// 按市场ID分组
orders.forEach(order => {
const key = order.marketId
if (!groups.has(key)) {
groups.set(key, [])
}
groups.get(key)!.push(order)
})
// 转换为分组数据并计算统计信息
return Array.from(groups.entries()).map(([marketId, marketOrders]) => {
// 计算总金额
const totalAmount = marketOrders.reduce((sum, order) => {
const amount = parseFloat(order.quantity) * parseFloat(order.price)
return sum + amount
}, 0)
// 统计订单状态
const fullyMatchedCount = marketOrders.filter(o => o.status === 'fully_matched').length
const partiallyMatchedCount = marketOrders.filter(o => o.status === 'partially_matched').length
const filledCount = marketOrders.filter(o => o.status === 'filled').length
const fullyMatched = fullyMatchedCount === marketOrders.length
return {
marketId,
marketTitle: marketOrders[0]?.marketTitle,
marketSlug: marketOrders[0]?.marketSlug,
marketCategory: marketOrders[0]?.marketCategory,
orders: marketOrders,
stats: {
count: marketOrders.length,
totalAmount: totalAmount.toString(),
fullyMatched,
fullyMatchedCount,
partiallyMatchedCount,
filledCount
}
}
}).sort((a, b) => b.stats.count - a.stats.count) // 按订单数量降序排序
}, [orders, groupByMarket])
// 切换市场展开/折叠
const toggleMarket = (marketId: string) => {
@@ -333,12 +290,7 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
}
]
// 初始化展开状态（桌面端默认全部展开）
useEffect(() => {
if (groupByMarket && groupedOrders.length > 0 && expandedMarkets.size === 0 && !isMobile) {
setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
}
}, [groupByMarket, groupedOrders.length, isMobile])
// 分组默认全部折叠（不自动展开）
// 渲染分组视图
const renderGroupedView = () => {
@@ -356,6 +308,7 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
const isExpanded = expandedMarkets.has(group.marketId)
const marketDisplayName = group.marketTitle || group.marketId.slice(0, 8) + '...' + group.marketId.slice(-6)
const marketUrl = getPolymarketUrl(group.marketSlug, group.marketCategory, group.marketId)
const orders = group.orders as BuyOrderInfo[]
return (
<Card
@@ -437,7 +390,7 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
<Divider style={{ margin: '12px 0' }} />
{isMobile ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{group.orders.map((order) => {
{orders.map((order) => {
const date = new Date(order.createdAt)
const formattedDate = date.toLocaleString('zh-CN', {
year: 'numeric',
@@ -501,7 +454,7 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
) : (
<Table
columns={columns}
dataSource={group.orders}
dataSource={orders}
rowKey="orderId"
pagination={false}
size="small"
@@ -734,6 +687,12 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
</Button>
)}
{groupByMarket && (
<div style={{ fontSize: isMobile ? '12px' : '14px', color: '#666' }}>
{t('common.total') || '共'} {groupedTotal} {t('copyTradingOrders.markets') || '个市场'}
</div>
)}
<Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
</div>
@@ -742,7 +701,37 @@ const BuyOrdersTab: React.FC<BuyOrdersTabProps> = ({ copyTradingId, active = fal
<Spin size="large" />
</div>
) : groupByMarket ? (
renderGroupedView()
<>
{renderGroupedView()}
{groupedOrders.length > 0 && (
<div style={{ marginTop: 16, textAlign: 'center' }}>
<Button
onClick={() => {
if (page > 1) {
setPage(page - 1)
}
}}
disabled={page <= 1}
style={{ marginRight: 8 }}
>
{t('common.previous') || '上一页'}
</Button>
<span style={{ margin: '0 16px' }}>
{t('common.page') || '第'} {page} / {Math.ceil(groupedTotal / limit)} {t('common.page') || '页'}
</span>
<Button
onClick={() => {
if (page < Math.ceil(groupedTotal / limit)) {
setPage(page + 1)
}
}}
disabled={page >= Math.ceil(groupedTotal / limit)}
>
{t('common.next') || '下一页'}
</Button>
</div>
)}
</>
) : (
renderListView()
)}
frontend/src/pages/CopyTradingOrders/SellOrdersTab.tsx
+82 -86
View File
@@ -1,10 +1,10 @@
import { useEffect, useState, useMemo } from 'react'
import { useEffect, useState } from 'react'
import { Table, Tag, Select, Input, Button, Card, Divider, Spin, message, Switch, Space } from 'antd'
import { apiService } from '../../services/api'
import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard, getPolymarketUrl } from '../../utils'
import { useMediaQuery } from 'react-responsive'
import { useTranslation } from 'react-i18next'
import type { SellOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'
import type { SellOrderInfo, OrderTrackingRequest, OrderTrackingListResponse, MarketGroupedOrdersRequest, MarketGroupedOrdersResponse, MarketOrderGroup } from '../../types'
const { Option } = Select
@@ -29,31 +29,51 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
}>({})
const [groupByMarket, setGroupByMarket] = useState(false) // 是否按市场分组
const [expandedMarkets, setExpandedMarkets] = useState<Set<string>>(new Set()) // 展开的市场ID集合
const [groupedOrders, setGroupedOrders] = useState<MarketOrderGroup[]>([]) // 分组数据（从后端获取）
const [groupedTotal, setGroupedTotal] = useState(0) // 分组总数（市场数量）
useEffect(() => {
if (copyTradingId && active) {
fetchOrders()
}
}, [copyTradingId, active, page, limit, filters])
}, [copyTradingId, active, page, limit, filters, groupByMarket])
const fetchOrders = async () => {
if (!copyTradingId) return
setLoading(true)
try {
const request: OrderTrackingRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'sell',
page,
limit,
...filters
}
if (groupByMarket) {
// 调用分组接口
const request: MarketGroupedOrdersRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'sell',
page,
limit
}
const response = await apiService.orderTracking.list(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as OrderTrackingListResponse
setOrders((data.list || []) as SellOrderInfo[])
setTotal(data.total || 0)
const response = await apiService.orderTracking.listGroupedByMarket(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as MarketGroupedOrdersResponse
setGroupedOrders(data.list || [])
setGroupedTotal(data.total || 0)
}
} else {
// 调用普通列表接口
const request: OrderTrackingRequest = {
copyTradingId: parseInt(copyTradingId),
type: 'sell',
page,
limit,
...filters
}
const response = await apiService.orderTracking.list(request)
if (response.data.code === 0 && response.data.data) {
const data = response.data.data as OrderTrackingListResponse
setOrders((data.list || []) as SellOrderInfo[])
setTotal(data.total || 0)
}
}
} catch (error: any) {
console.error('获取卖出订单列表失败:', error)
@@ -77,64 +97,6 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
}
}
// 分组数据结构
interface GroupedOrders {
marketId: string
marketTitle?: string
marketSlug?: string
marketCategory?: string
orders: SellOrderInfo[]
stats: {
count: number
totalAmount: string
totalPnl: string // 总盈亏
fullyMatched: boolean // 卖出订单都是已成交的，这里始终为 true
}
}
// 按市场分组订单
const groupedOrders = useMemo<GroupedOrders[]>(() => {
if (!groupByMarket) return []
const groups = new Map<string, SellOrderInfo[]>()
// 按市场ID分组
orders.forEach(order => {
const key = order.marketId
if (!groups.has(key)) {
groups.set(key, [])
}
groups.get(key)!.push(order)
})
// 转换为分组数据并计算统计信息
return Array.from(groups.entries()).map(([marketId, marketOrders]) => {
// 计算总金额和总盈亏
const totalAmount = marketOrders.reduce((sum, order) => {
const amount = parseFloat(order.quantity) * parseFloat(order.price)
return sum + amount
}, 0)
const totalPnl = marketOrders.reduce((sum, order) => {
return sum + parseFloat(order.realizedPnl)
}, 0)
return {
marketId,
marketTitle: marketOrders[0]?.marketTitle,
marketSlug: marketOrders[0]?.marketSlug,
marketCategory: marketOrders[0]?.marketCategory,
orders: marketOrders,
stats: {
count: marketOrders.length,
totalAmount: totalAmount.toString(),
totalPnl: totalPnl.toString(),
fullyMatched: true // 卖出订单都是已成交的
}
}
}).sort((a, b) => b.stats.count - a.stats.count) // 按订单数量降序排序
}, [orders, groupByMarket])
// 切换市场展开/折叠
const toggleMarket = (marketId: string) => {
const newExpanded = new Set(expandedMarkets)
@@ -155,12 +117,7 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
}
}
// 初始化展开状态（桌面端默认全部展开）
useEffect(() => {
if (groupByMarket && groupedOrders.length > 0 && expandedMarkets.size === 0 && !isMobile) {
setExpandedMarkets(new Set(groupedOrders.map(g => g.marketId)))
}
}, [groupByMarket, groupedOrders.length, isMobile])
// 分组默认全部折叠（不自动展开）
const columns = [
{
@@ -335,7 +292,8 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
const isExpanded = expandedMarkets.has(group.marketId)
const marketDisplayName = group.marketTitle || group.marketId.slice(0, 8) + '...' + group.marketId.slice(-6)
const marketUrl = getPolymarketUrl(group.marketSlug, group.marketCategory, group.marketId)
const pnlColor = getPnlColor(group.stats.totalPnl)
const pnlColor = getPnlColor(group.stats.totalPnl || '0')
const orders = group.orders as SellOrderInfo[]
return (
<Card
@@ -387,9 +345,11 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', fontSize: isMobile ? '12px' : '13px', color: '#666' }}>
<span>{t('copyTradingOrders.orderCount') || '订单数'}: {group.stats.count}</span>
<span>{t('copyTradingOrders.totalAmount') || '总金额'}: {formatUSDC(group.stats.totalAmount)} USDC</span>
<span style={{ color: pnlColor, fontWeight: 500 }}>
{t('copyTradingOrders.totalPnl') || '总盈亏'}: {formatUSDC(group.stats.totalPnl)} USDC
</span>
{group.stats.totalPnl && (
<span style={{ color: pnlColor, fontWeight: 500 }}>
{t('copyTradingOrders.totalPnl') || '总盈亏'}: {formatUSDC(group.stats.totalPnl)} USDC
</span>
)}
</div>
</div>
<Button
@@ -408,7 +368,7 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
<Divider style={{ margin: '12px 0' }} />
{isMobile ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
{group.orders.map((order) => {
{orders.map((order) => {
const date = new Date(order.createdAt)
const formattedDate = date.toLocaleString('zh-CN', {
year: 'numeric',
@@ -473,7 +433,7 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
) : (
<Table
columns={columns}
dataSource={group.orders}
dataSource={orders}
rowKey="orderId"
pagination={false}
size="small"
@@ -699,6 +659,12 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
</Button>
)}
{groupByMarket && (
<div style={{ fontSize: isMobile ? '12px' : '14px', color: '#666' }}>
{t('common.total') || '共'} {groupedTotal} {t('copyTradingOrders.markets') || '个市场'}
</div>
)}
<Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.refresh') || '刷新'}</Button>
</div>
@@ -707,7 +673,37 @@ const SellOrdersTab: React.FC<SellOrdersTabProps> = ({ copyTradingId, active = f
<Spin size="large" />
</div>
) : groupByMarket ? (
renderGroupedView()
<>
{renderGroupedView()}
{groupedOrders.length > 0 && (
<div style={{ marginTop: 16, textAlign: 'center' }}>
<Button
onClick={() => {
if (page > 1) {
setPage(page - 1)
}
}}
disabled={page <= 1}
style={{ marginRight: 8 }}
>
{t('common.previous') || '上一页'}
</Button>
<span style={{ margin: '0 16px' }}>
{t('common.page') || '第'} {page} / {Math.ceil(groupedTotal / limit)} {t('common.page') || '页'}
</span>
<Button
onClick={() => {
if (page < Math.ceil(groupedTotal / limit)) {
setPage(page + 1)
}
}}
disabled={page >= Math.ceil(groupedTotal / limit)}
>
{t('common.next') || '下一页'}
</Button>
</div>
)}
</>
) : (
renderListView()
)}
frontend/src/services/api.ts
+7 -1
View File
@@ -472,7 +472,13 @@ export const apiService = {
* 查询订单列表（买入/卖出/匹配）
*/
list: (data: any) =>
apiClient.post<ApiResponse<any>>('/copy-trading/orders/tracking', data)
apiClient.post<ApiResponse<any>>('/copy-trading/orders/tracking', data),
/**
* 查询按市场分组的订单列表（买入/卖出）
*/
listGroupedByMarket: (data: any) =>
apiClient.post<ApiResponse<any>>('/copy-trading/orders/grouped-by-market', data)
},
/**
frontend/src/types/index.ts
+45
View File
@@ -700,6 +700,51 @@ export interface OrderTrackingRequest {
buyOrderId?: string
}
/**
* 按市场分组的订单查询请求
*/
export interface MarketGroupedOrdersRequest {
copyTradingId: number
type: 'buy' | 'sell'
page?: number
limit?: number
}
/**
* 单个市场的订单统计信息
*/
export interface MarketOrderStats {
count: number
totalAmount: string // 总金额
totalPnl?: string // 总盈亏（买入订单未实现盈亏，此字段为空）
fullyMatched: boolean // 是否全部成交
fullyMatchedCount: number // 完全成交的订单数
partiallyMatchedCount: number // 部分成交的订单数
filledCount: number // 未成交的订单数
}
/**
* 单个市场分组的响应数据
*/
export interface MarketOrderGroup {
marketId: string
marketTitle?: string
marketSlug?: string
marketCategory?: string
stats: MarketOrderStats
orders: BuyOrderInfo[] | SellOrderInfo[] // 订单列表
}
/**
* 按市场分组的订单列表响应
*/
export interface MarketGroupedOrdersResponse {
list: MarketOrderGroup[]
total: number // 市场总数
page: number
limit: number
}
/**
* 被过滤订单信息
*/
frontend/src/utils/index.ts
+9 -6
View File
@@ -96,24 +96,27 @@ export const isAutoGeneratedOrderId = (orderId: string | undefined | null): bool
/**
* 构建 Polymarket 市场 URL
* 对于 spread 市场（sports 分类），跳转到 moneyline 页面
* 对于 moneyline 市场，跳转到 moneyline 页面
* 注意：目前无法自动判断市场是否为 moneyline，需要后端提供标识
* @param marketSlug - 市场 slug
* @param marketCategory - 市场分类（sports, crypto 等）
* @param marketId - 市场ID（作为后备）
* @param isMoneyline - 是否为 moneyline 市场（需要后端提供）
* @returns Polymarket URL，如果无法构建则返回 null
*/
export const getPolymarketUrl = (
marketSlug?: string | null,
marketCategory?: string | null,
marketId?: string | null
_marketCategory?: string | null, // 保留参数以便未来使用
marketId?: string | null,
isMoneyline?: boolean
): string | null => {
// 优先使用 slug
if (marketSlug) {
// 如果是 sports 分类，跳转到 moneyline 页面（spread 市场）
if (marketCategory?.toLowerCase() === 'sports') {
// 如果是 moneyline 市场，跳转到 moneyline 页面
if (isMoneyline === true) {
return `https://polymarket.com/event/${marketSlug}/moneyline`
}
// 其他分类跳转到普通市场页面
// 其他市场跳转到普通市场页面
return `https://polymarket.com/event/${marketSlug}`
}