From 662aa47de6c9856dccb234a352cfef6f529e7103 Mon Sep 17 00:00:00 2001
From: WrBug <iwrbug@gmail.com>
Date: Tue, 20 Jan 2026 23:19:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=8C=B9?=
 =?UTF-8?q?=E9=85=8D=E5=85=B3=E7=B3=BB=E5=88=97=E8=A1=A8=E7=9A=84=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95ID=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将'卖出订单ID'和'买入订单ID'两列合并为一列'订单ID'
- 第一行显示买入订单ID，第二行显示卖出订单ID
- 添加'买入'和'卖出'标签区分两种订单ID
- 保持复制按钮功能
- 优化移动端和桌面端的显示效果
- 桌面端列宽从120+180调整为150+200以容纳更多内容
---
 .../CopyTradingOrders/MatchedOrdersTab.tsx    | 179 +++++++++---------
 1 file changed, 86 insertions(+), 93 deletions(-)

diff --git a/frontend/src/pages/CopyTradingOrders/MatchedOrdersTab.tsx b/frontend/src/pages/CopyTradingOrders/MatchedOrdersTab.tsx
index 373054a..787f9d1 100644
--- a/frontend/src/pages/CopyTradingOrders/MatchedOrdersTab.tsx
+++ b/frontend/src/pages/CopyTradingOrders/MatchedOrdersTab.tsx
@@ -132,59 +132,60 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
       }
     },
     {
-      title: t('copyTradingOrders.sellOrderId') || '卖出订单ID',
-      dataIndex: 'sellOrderId',
-      key: 'sellOrderId',
-      width: isMobile ? 120 : 180,
-      render: (text: string) => {
-        const isAuto = isAutoGeneratedOrderId(text)
+      title: t('copyTradingOrders.orderId') || '订单ID',
+      dataIndex: 'orderId',
+      key: 'orderId',
+      width: isMobile ? 150 : 200,
+      render: (_: any, record: MatchedOrderInfo) => {
+        const buyOrderId = record.buyOrderId
+        const sellOrderId = record.sellOrderId
+        const isBuyAuto = isAutoGeneratedOrderId(buyOrderId)
+        const isSellAuto = isAutoGeneratedOrderId(sellOrderId)
+        
         return (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
-              {isMobile
-                ? `${text.slice(0, 6)}...${text.slice(-4)}`
-                : `${text.slice(0, 8)}...${text.slice(-6)}`
-              }
-            </span>
-            {!isAuto && (
-              <Button
-                type="text"
-                size="small"
-                icon={<CopyOutlined />}
-                onClick={() => handleCopyOrderId(text)}
-                style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
-                title={t('common.copy') || '复制'}
-              />
-            )}
-          </div>
-        )
-      }
-    },
-    {
-      title: t('copyTradingOrders.buyOrderId') || '买入订单ID',
-      dataIndex: 'buyOrderId',
-      key: 'buyOrderId',
-      width: isMobile ? 120 : 180,
-      render: (text: string) => {
-        const isAuto = isAutoGeneratedOrderId(text)
-        return (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
-              {isMobile
-                ? `${text.slice(0, 6)}...${text.slice(-4)}`
-                : `${text.slice(0, 8)}...${text.slice(-6)}`
-              }
-            </span>
-            {!isAuto && (
-              <Button
-                type="text"
-                size="small"
-                icon={<CopyOutlined />}
-                onClick={() => handleCopyOrderId(text)}
-                style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
-                title={t('common.copy') || '复制'}
-              />
-            )}
+          <div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+              <span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
+                {t('copyTradingOrders.buy') || '买入'}:
+              </span>
+              <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
+                {isMobile
+                  ? `${buyOrderId.slice(0, 6)}...${buyOrderId.slice(-4)}`
+                  : `${buyOrderId.slice(0, 8)}...${buyOrderId.slice(-6)}`
+                }
+              </span>
+              {!isBuyAuto && (
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<CopyOutlined />}
+                  onClick={() => handleCopyOrderId(buyOrderId)}
+                  style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
+                  title={t('common.copy') || '复制'}
+                />
+              )}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ fontSize: isMobile ? 11 : 12, color: '#999' }}>
+                {t('copyTradingOrders.sell') || '卖出'}:
+              </span>
+              <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
+                {isMobile
+                  ? `${sellOrderId.slice(0, 6)}...${sellOrderId.slice(-4)}`
+                  : `${sellOrderId.slice(0, 8)}...${sellOrderId.slice(-6)}`
+                }
+              </span>
+              {!isSellAuto && (
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<CopyOutlined />}
+                  onClick={() => handleCopyOrderId(sellOrderId)}
+                  style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
+                  title={t('common.copy') || '复制'}
+                />
+              )}
+            </div>
           </div>
         )
       }
@@ -347,50 +348,42 @@ const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, acti
                           )}
                         </div>
                       )}
-                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.sellOrderId') || '卖出订单ID'}</div>
-                      <div style={{
-                        fontSize: '13px',
-                        fontWeight: '500',
-                        fontFamily: 'monospace',
-                        marginBottom: '8px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '8px'
-                      }}>
-                        <span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
-                        {!isAutoGeneratedOrderId(order.sellOrderId) && (
-                          <Button
-                            type="text"
-                            size="small"
-                            icon={<CopyOutlined />}
-                            onClick={() => handleCopyOrderId(order.sellOrderId)}
-                            style={{ padding: 0, height: 'auto', fontSize: '12px' }}
-                            title={t('common.copy') || '复制'}
-                          />
-                        )}
+                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.orderId') || '订单ID'}</div>
+                    <div style={{ marginBottom: '8px' }}>
+                      <div style={{ marginBottom: '4px' }}>
+                        <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.buy') || '买入'}:</div>
+                        <div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                          <span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
+                          {!isAutoGeneratedOrderId(order.buyOrderId) && (
+                            <Button
+                              type="text"
+                              size="small"
+                              icon={<CopyOutlined />}
+                              onClick={() => handleCopyOrderId(order.buyOrderId)}
+                              style={{ padding: 0, height: 'auto', fontSize: '12px' }}
+                              title={t('common.copy') || '复制'}
+                            />
+                          )}
+                        </div>
                       </div>
-                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.buyOrderId') || '买入订单ID'}</div>
-                      <div style={{
-                        fontSize: '13px',
-                        fontWeight: '500',
-                        fontFamily: 'monospace',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '8px'
-                      }}>
-                        <span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
-                        {!isAutoGeneratedOrderId(order.buyOrderId) && (
-                          <Button
-                            type="text"
-                            size="small"
-                            icon={<CopyOutlined />}
-                            onClick={() => handleCopyOrderId(order.buyOrderId)}
-                            style={{ padding: 0, height: 'auto', fontSize: '12px' }}
-                            title={t('common.copy') || '复制'}
-                          />
-                        )}
+                      <div>
+                        <div style={{ fontSize: '11px', color: '#999', marginBottom: '2px' }}>{t('copyTradingOrders.sell') || '卖出'}:</div>
+                        <div style={{ fontSize: '13px', fontWeight: '500', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                          <span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
+                          {!isAutoGeneratedOrderId(order.sellOrderId) && (
+                            <Button
+                              type="text"
+                              size="small"
+                              icon={<CopyOutlined />}
+                              onClick={() => handleCopyOrderId(order.sellOrderId)}
+                              style={{ padding: 0, height: 'auto', fontSize: '12px' }}
+                              title={t('common.copy') || '复制'}
+                            />
+                          )}
+                        </div>
                       </div>
                     </div>
+                    </div>
 
                     <Divider style={{ margin: '12px 0' }} />