Show demo trading position and order sizes in USDT

Positions, open orders, the symbol list and the plan card now show
amounts as USDT value (quantity x price) instead of coin quantity; the
coin quantity moves to a hover tooltip. Filled amounts use each order's
average fill price.

web/src/pages/trading/components/PlanCard.vue

@@ -23,9 +23,12 @@ const busy = computed(() => props.requesting || props.symbol.analyzing || !!prop
 const elapsed = computed(() => props.analysis ? Math.max(0, Math.round((now.value - new Date(props.analysis.started_at).getTime()) / 1000)) : 0)
 const duration = computed(() => props.analysis?.finished_at ? Math.round((new Date(props.analysis.finished_at).getTime() - new Date(props.analysis.started_at).getTime()) / 1000) : null)
 
+/** 已成交金额（USDT），按每笔的成交均价折算；有成交的订单一定有均价 */
 function filled(purpose: "entry" | "tp", leg: number) {
-  const total = props.orders.filter(o => o.purpose === purpose && o.leg === leg).reduce((sum, o) => sum + Number(o.filled_qty), 0)
+  const total = props.orders
-  return total ? String(Number(total.toFixed(8))) : "-"
+    .filter(o => o.purpose === purpose && o.leg === leg && Number(o.filled_qty) > 0)
+    .reduce((sum, o) => sum + Number(o.filled_qty) * Number(o.avg_price!), 0)
+  return total ? `${total.toFixed(2)} USDT` : "-"
 }
 
 function countdown(deadline: string | null) {
@@ -211,12 +214,12 @@ const ladder = computed(() => sizing.value?.entry && entryRow.value
           </div>
           <div class="kv">
             <span class="label">限价{{ long ? "做多" : "做空" }}</span>
-            <span><span class="num text-slate-900">{{ sizing.entry.price }} × {{ sizing.entry.quantity }}</span>
+            <span><span class="num text-slate-900">{{ sizing.entry.price }}</span>
               <span class="ml-2 text-xs text-slate-500">已成交 {{ filled("entry", 0) }}{{ entryRow?.avg_price ? `，均价 ${entryRow.avg_price}` : "" }}</span></span>
           </div>
           <div class="kv">
-            <span class="label">名义价值</span>
+            <span class="label">下单金额</span>
-            <span><span class="num text-slate-900">{{ sizing.entry.notional }} USDT</span>
+            <span><span class="num text-slate-900" :title="`数量 ${sizing.entry.quantity}`">{{ sizing.entry.notional }} USDT</span>
               <span class="ml-2 text-xs text-slate-500">{{ sizing.entry.leverage }} 倍交易资金</span></span>
           </div>
           <div class="kv">

web/src/pages/trading/index.vue

@@ -46,14 +46,14 @@ const symbolOrders = computed(() => {
     ...s.orders.filter(o => o.symbol === selected.value).map(o => ({
       ...o,
       conditional: false,
-      priceText: num(o.price)
+      priceText: num(o.price),
+      amount: `${usdtValue(o.price, o.quantity)} USDT`
     })),
     ...s.algo_orders.filter(o => o.symbol === selected.value).map(o => ({
       ...o,
       conditional: true,
       priceText: `触发 ${num(o.trigger_price)}`,
-      filled: "0",
+      amount: o.close_position ? "全部持仓" : `${usdtValue(o.trigger_price, o.quantity)} USDT`
-      quantity: o.close_position ? "全部持仓" : o.quantity
     }))
   ].sort((a, b) => b.time - a.time)
 })
@@ -62,6 +62,11 @@ function num(value: string) {
   return String(Number(value))
 }
 
+/** 币数量按价格折成 USDT 金额；页面上的仓位、挂单大小都用 USDT 显示 */
+function usdtValue(price: string, quantity: string) {
+  return (Number(price) * Number(quantity)).toFixed(2)
+}
+
 function money(value: string | undefined) {
   return value === undefined ? "-" : Number(value).toFixed(2)
 }
@@ -388,9 +393,9 @@ onBeforeUnmount(() => clearInterval(timer))
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="数量" min-width="90">
+        <el-table-column label="仓位价值（USDT）" min-width="120">
           <template #default="{ row }">
-            {{ num(row.amount) }}
+            <span :title="`数量 ${num(row.amount)}`">{{ Math.abs(Number(row.notional)).toFixed(2) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="开仓价" min-width="100">
@@ -471,7 +476,7 @@ onBeforeUnmount(() => clearInterval(timer))
           </div>
           <div class="mt-1 flex items-center justify-between text-xs text-slate-500">
             <span v-if="positionOf(s.symbol)" class="num">
-              {{ positionOf(s.symbol)!.leverage }}x {{ positionOf(s.symbol)!.side === "LONG" ? "多" : "空" }} · {{ num(positionOf(s.symbol)!.amount) }}
+              {{ positionOf(s.symbol)!.leverage }}x {{ positionOf(s.symbol)!.side === "LONG" ? "多" : "空" }} · {{ Math.abs(Number(positionOf(s.symbol)!.notional)).toFixed(2) }} USDT
             </span>
             <span v-else />
             <el-link type="danger" underline="never" class="text-xs!" @click.stop="remove(s)">
@@ -509,7 +514,7 @@ onBeforeUnmount(() => clearInterval(timer))
               <span class="num text-slate-400">{{ formatTime(new Date(o.time).toISOString(), "MM-DD HH:mm:ss") }}</span>
             </div>
             <div class="num mt-1 flex justify-between text-sm text-slate-900">
-              <span>{{ o.quantity === "全部持仓" ? o.quantity : num(o.quantity) }}</span>
+              <span :title="o.amount === '全部持仓' ? '' : `数量 ${num(o.quantity)}`">{{ o.amount }}</span>
               <span>@ {{ o.priceText }}</span>
             </div>
             <div class="mt-1 flex items-center gap-1 text-slate-500">