新增分时成交过滤小单

src/components/quote/TradeTape.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="trade-tape card">
-    <div class="title">分时成交</div>
+    <div class="title-row">
+      <div class="title">分时成交</div>
+      <el-switch v-model="largeOnly" size="small" active-text="只看大单" />
+    </div>
     <div class="head">
       <span>时间</span>
       <span>价格</span>
       <span>现手</span>
     </div>
     <div class="list">
-      <div v-for="(t, i) in quote.trades" :key="`${t.time}-${t.price}-${t.volume}-${i}`" class="row">
+      <div v-for="(t, i) in displayTrades" :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="vol-cell">
@@ -27,11 +30,33 @@
 </template>
 
 <script setup lang="ts">
-import type { QuoteData } from '../../types'
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useContractStore } from '../../stores/contract'
+import type { QuoteData, TradeTick } from '../../types'
 
-defineProps<{
+const props = defineProps<{
   quote: QuoteData
 }>()
+
+const largeOnly = ref(false)
+const { current } = storeToRefs(useContractStore())
+
+/**
+ * 关闭过滤时直接复用原数组引用，避免每 tick 分配新数组。
+ * 开启时与大单分析一致：现手 > largeOrderLots。
+ */
+const displayTrades = computed((): TradeTick[] => {
+  const trades = props.quote.trades
+  if (!largeOnly.value) return trades
+  const lots = current.value.largeOrderLots
+  const out: TradeTick[] = []
+  for (let i = 0; i < trades.length; i++) {
+    const t = trades[i]!
+    if (t.volume > lots) out.push(t)
+  }
+  return out
+})
 </script>
 
 <style scoped>
@@ -43,10 +68,17 @@ defineProps<{
   flex-direction: column;
 }
 
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
 .title {
   font-size: 13px;
   font-weight: 600;
-  margin-bottom: 8px;
 }
 
 .head,