1

frontend/real-trading.html

@@ -496,7 +496,19 @@
 
                     <table class="orders-table" v-else>
                         <thead>
-                            <tr>
+                            <tr v-if="currentTab === 'positions'">
+                                <th>交易对</th>
+                                <th>方向</th>
+                                <th>持仓量</th>
+                                <th>入场价</th>
+                                <th>标记价</th>
+                                <th>杠杆</th>
+                                <th>保证金</th>
+                                <th>未实现盈亏</th>
+                                <th>盈亏比例</th>
+                                <th>强平价格</th>
+                            </tr>
+                            <tr v-else>
                                 <th>交易对</th>
                                 <th>方向</th>
                                 <th>等级</th>
@@ -512,6 +524,31 @@
                             </tr>
                         </thead>
                         <tbody>
+                            <!-- 交易所持仓表格 -->
+                            <template v-if="currentTab === 'positions'">
+                                <tr v-for="pos in displayOrders" :key="pos.id || pos.symbol">
+                                    <td><strong>{{ formatSymbol(pos.symbol) }}</strong></td>
+                                    <td>
+                                        <span class="side-badge" :class="pos.side === 'long' ? 'side-long' : 'side-short'">
+                                            {{ pos.side === 'long' ? '做多' : '做空' }}
+                                        </span>
+                                    </td>
+                                    <td>{{ pos.contracts || '0' }}</td>
+                                    <td>${{ pos.entryPrice ? parseFloat(pos.entryPrice).toLocaleString() : '-' }}</td>
+                                    <td>${{ pos.markPrice ? parseFloat(pos.markPrice).toLocaleString() : '-' }}</td>
+                                    <td>{{ pos.leverage }}x</td>
+                                    <td>${{ pos.initialMargin ? parseFloat(pos.initialMargin).toFixed(2) : '-' }}</td>
+                                    <td :class="parseFloat(pos.unrealizedPnl || 0) >= 0 ? 'pnl-positive' : 'pnl-negative'">
+                                        {{ parseFloat(pos.unrealizedPnl || 0) >= 0 ? '+' : '' }}${{ parseFloat(pos.unrealizedPnl || 0).toFixed(2) }}
+                                    </td>
+                                    <td :class="(pos.percentage || 0) >= 0 ? 'pnl-positive' : 'pnl-negative'">
+                                        {{ (pos.percentage || 0).toFixed(2) }}%
+                                    </td>
+                                    <td>${{ pos.liquidationPrice ? parseFloat(pos.liquidationPrice).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-' }}</td>
+                                </tr>
+                            </template>
+                            <!-- 订单表格 -->
+                            <template v-else>
                                 <tr v-for="order in displayOrders" :key="order.order_id">
                                     <td><strong>{{ order.symbol }}</strong></td>
                                     <td>
@@ -543,6 +580,7 @@
                                     </td>
                                     <td>{{ formatTime(order.created_at) }}</td>
                                 </tr>
+                            </template>
                         </tbody>
                     </table>
                 </div>
@@ -692,6 +730,13 @@
                         'cancelled': '已取消'
                     };
                     return map[status] || status;
+                },
+
+                formatSymbol(symbol) {
+                    // 将 CCXT 格式的交易对转换为简洁格式
+                    // 例如：BTC/USDT:USDT -> BTCUSDT
+                    if (!symbol) return '-';
+                    return symbol.replace('/', '').replace(':', '');
                 }
             },
             mounted() {