分时图显示最新

src/api/baidu/mapQuote.ts

@@ -50,7 +50,8 @@ function parseIntraday(result: BaiduQuotationResult): IntradayPoint[] {
 }
 
 function parseTrades(result: BaiduQuotationResult): TradeTick[] {
-  return (result.detailinfos ?? []).map((t) => ({
+  // 接口 detailinfos 为旧→新（最新在末尾）；翻转后最新在前，列表顶部展示
+  return [...(result.detailinfos ?? [])].reverse().map((t) => ({
     time: t.formatTime,
     price: toNum(t.price),
     volume: toNum(t.volume),

src/components/quote/TradeTape.vue

@@ -7,10 +7,20 @@
       <span>现手</span>
     </div>
     <div class="list">
-      <div v-for="(t, i) in quote.trades" :key="i" class="row">
+      <div v-for="(t, i) in quote.trades" :key="`${t.time}-${t.price}-${t.volume}-${i}`" class="row">
         <span>{{ t.time }}</span>
         <span :class="t.side === 'B' ? 'price-up' : 'price-down'">{{ t.price.toFixed(2) }}</span>
-        <span :class="t.side === 'B' ? 'price-up' : 'price-down'">{{ t.volume }}{{ t.side }}</span>
+        <span class="vol-cell">
+          <span class="vol">{{ t.volume }}</span>
+          <el-tag
+            size="small"
+            effect="light"
+            :type="t.side === 'B' ? 'danger' : 'success'"
+            class="side-tag"
+          >
+            {{ t.side === 'B' ? '买' : '卖' }}
+          </el-tag>
+        </span>
       </div>
     </div>
   </div>
@@ -42,9 +52,10 @@ defineProps<{
 .head,
 .row {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1.2fr;
   font-size: 12px;
   line-height: 1.8;
+  align-items: center;
 }
 
 .head {
@@ -61,4 +72,21 @@ defineProps<{
 .row span {
   font-variant-numeric: tabular-nums;
 }
+
+.vol-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.vol {
+  min-width: 2em;
+}
+
+.side-tag {
+  --el-tag-border-radius: 4px;
+  height: 18px;
+  padding: 0 5px;
+  line-height: 16px;
+}
 </style>