From 9ec66ff1633a2fc958cb66bf146f68c5fea12be3 Mon Sep 17 00:00:00 2001
From: ivan <ivan@qq.com>
Date: Wed, 1 Apr 2026 22:43:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=8A=A0=E5=AF=86?=
 =?UTF-8?q?=E8=B4=A7=E5=B8=81=E5=9B=BE=E8=A1=A8=E6=98=BE=E7=A4=BA=E8=A7=84?=
 =?UTF-8?q?=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cryptoChart.ts    |  27 +++++++-
 src/views/TradeDetail.vue | 138 ++++++++++++++++++++++----------------
 2 files changed, 107 insertions(+), 58 deletions(-)

diff --git a/src/api/cryptoChart.ts b/src/api/cryptoChart.ts
index 6bb7b9d..27ff966 100644
--- a/src/api/cryptoChart.ts
+++ b/src/api/cryptoChart.ts
@@ -7,6 +7,17 @@
 /** 图表数据点：[时间戳(ms), 价格(USD)] */
 export type CryptoChartPoint = [number, number]
 
+/** 折线图 / 行情区小数位数上限 */
+const CRYPTO_CHART_PRICE_MAX_DECIMALS = 10
+
+/**
+ * 加密货币价格展示：最多 {@link CRYPTO_CHART_PRICE_MAX_DECIMALS} 位小数，并去掉小数末尾多余的 0（如 1.20000000 → 1.2）
+ */
+export function formatCryptoChartPrice(price: number): string {
+  if (!Number.isFinite(price)) return '—'
+  return price.toFixed(CRYPTO_CHART_PRICE_MAX_DECIMALS).replace(/\.?0+$/, '')
+}
+
 /** Binance 交易对映射（symbol -> BTCUSDT 等） */
 export const BINANCE_SYMBOLS: Record<string, string> = {
   btc: 'BTCUSDT',
@@ -125,9 +136,20 @@ const RANGE_TO_LIMIT: Record<string, number> = {
   ALL: 1000,
 }
 
+/**
+ * 从 Polymarket 风格 ticker 解析币种：取首个 "-" 段，且须在 {@link COINGECKO_COIN_IDS} 中有映射。
+ * 例：`bnb-updown-15m-1775056500` → `bnb`
+ */
+export function parseCryptoSymbolFromTicker(ticker: string | undefined | null): string | null {
+  if (ticker == null || typeof ticker !== 'string') return null
+  const first = ticker.split('-')[0]?.trim().toLowerCase() ?? ''
+  if (!first || !COINGECKO_COIN_IDS[first]) return null
+  return first
+}
+
 /**
  * 从事件信息推断加密货币符号
- * 优先：ticker -> tags.slug -> series.slug -> 市场 question 中的币种名
+ * 优先：ticker 首段（见 {@link parseCryptoSymbolFromTicker}）-> 整段 ticker -> tags.slug -> series -> question
  */
 export function inferCryptoSymbol(event: {
   ticker?: string
@@ -135,6 +157,9 @@ export function inferCryptoSymbol(event: {
   series?: { slug?: string; ticker?: string }[]
   markets?: { question?: string }[]
 }): string | null {
+  const fromTickerSeg = parseCryptoSymbolFromTicker(event.ticker)
+  if (fromTickerSeg) return fromTickerSeg
+
   const t = (event.ticker ?? '').toLowerCase().trim()
   if (t && COINGECKO_COIN_IDS[t]) return t
 
diff --git a/src/views/TradeDetail.vue b/src/views/TradeDetail.vue
index 3988bf4..702d736 100644
--- a/src/views/TradeDetail.vue
+++ b/src/views/TradeDetail.vue
@@ -27,8 +27,9 @@
                 </h1>
                 <p v-if="detailError" class="chart-error">{{ detailError }}</p>
                 <div class="chart-controls-row">
+                  <v-btn class="date-pill" size="small" rounded="pill">{{ resolutionDate }}</v-btn>
                   <v-btn-group
-                    v-if="isCryptoEvent"
+                    v-if="cryptoSymbol"
                     variant="outlined"
                     density="compact"
                     divided
@@ -46,15 +47,13 @@
                     <v-btn
                       :class="{ active: chartMode === 'crypto' }"
                       size="small"
-                      icon
+                      class="chart-mode-crypto-btn"
                       :aria-label="t('chart.cryptoPrice')"
                       @click="setChartMode('crypto')"
                     >
-                      <v-icon size="20">mdi-currency-btc</v-icon>
+                      <span class="chart-crypto-ticker-label">{{ cryptoSymbol.toUpperCase() }}</span>
                     </v-btn>
                   </v-btn-group>
-                  <v-btn variant="text" size="small" class="past-btn">Past ▾</v-btn>
-                  <v-btn class="date-pill" size="small" rounded="pill">{{ resolutionDate }}</v-btn>
                 </div>
                 <div class="chart-chance">
                   <template v-if="chartMode === 'crypto' && cryptoSymbol">
@@ -369,6 +368,7 @@ import {
   LineType,
   LastPriceAnimationMode,
   TickMarkType,
+  type BarPrice,
   type IChartApi,
   type ISeriesApi,
   type Time,
@@ -408,8 +408,8 @@ import {
   priceHistoryToChartData,
 } from '../api/priceHistory'
 import {
-  isCryptoEvent as checkIsCryptoEvent,
-  inferCryptoSymbol,
+  parseCryptoSymbolFromTicker,
+  formatCryptoChartPrice,
   fetchCryptoChart,
   subscribeCryptoRealtime,
   alignCryptoChartTimeMs,
@@ -559,10 +559,16 @@ const isResolutionSourceUrl = computed(() => {
 })
 
 /** 是否为加密货币类型事件（可切换 YES/NO 分时 vs 加密货币价格图） */
-const isCryptoEvent = computed(() => checkIsCryptoEvent(eventDetail.value))
+/** 从 event.ticker 首段解析的加密货币符号（如 bnb-updown-… → bnb）；无映射则不展示切换器 */
+const cryptoSymbol = computed(() => parseCryptoSymbolFromTicker(eventDetail.value?.ticker))
 
-/** 从事件推断的加密货币符号，如 btc、eth */
-const cryptoSymbol = computed(() => inferCryptoSymbol(eventDetail.value ?? {}) ?? null)
+watch(cryptoSymbol, (sym) => {
+  if (!sym && chartMode.value === 'crypto') {
+    chartMode.value = 'yesno'
+    if (selectedTimeRange.value === '30S') selectedTimeRange.value = '1D'
+    void updateChartData()
+  }
+})
 
 /** 图表模式：yesno=YES/NO 分时，crypto=加密货币价格 */
 const chartMode = ref<'yesno' | 'crypto'>('yesno')
@@ -572,10 +578,7 @@ const currentCryptoPrice = computed(() => {
   const d = data.value
   const last = d.length > 0 ? d[d.length - 1] : undefined
   if (last != null && chartMode.value === 'crypto') {
-    const p = last[1]
-    return Number.isFinite(p)
-      ? p.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-      : '—'
+    return formatCryptoChartPrice(last[1])
   }
   return '—'
 })
@@ -1246,7 +1249,13 @@ function ensureChartSeries() {
     lastPriceAnimation: LastPriceAnimationMode.OnDataUpdate,
     crosshairMarkerVisible: true,
     lastValueVisible: true,
-    priceFormat: isCrypto ? { type: 'price', precision: 2 } : { type: 'percent', precision: 1 },
+    priceFormat: isCrypto
+      ? {
+          type: 'custom',
+          minMove: 1e-10,
+          formatter: (priceValue: BarPrice) => formatCryptoChartPrice(priceValue as number),
+        }
+      : { type: 'percent', precision: 1 },
     priceScaleId: CHART_OVERLAY_PRICE_SCALE_ID,
   })
   chartInstance.priceScale(CHART_OVERLAY_PRICE_SCALE_ID).applyOptions({
@@ -1437,44 +1446,48 @@ function applyCryptoRealtimePoint(point: [number, number]) {
 
 async function updateChartData() {
   if (chartMode.value === 'crypto') {
-    const sym = cryptoSymbol.value ?? 'btc'
-    const gen = ++cryptoLoadGeneration
-    cryptoWsUnsubscribe?.()
-    cryptoWsUnsubscribe = null
-    cryptoChartLoading.value = true
-    try {
-      const res = await fetchCryptoChart({
-        symbol: sym,
-        range: selectedTimeRange.value,
-      })
-      if (gen !== cryptoLoadGeneration || chartMode.value !== 'crypto') {
-        return
-      }
-      data.value = (res.data ?? []) as [number, number][]
-      ensureChartSeries()
-      setChartData(data.value)
-      nextTick(() => scheduleCryptoScrollToRealtime())
-      cryptoWsUnsubscribe = subscribeCryptoRealtime(sym, applyCryptoRealtimePoint)
-    } finally {
-      if (gen === cryptoLoadGeneration) {
-        cryptoChartLoading.value = false
+    const sym = cryptoSymbol.value
+    if (sym) {
+      const gen = ++cryptoLoadGeneration
+      cryptoWsUnsubscribe?.()
+      cryptoWsUnsubscribe = null
+      cryptoChartLoading.value = true
+      try {
+        const res = await fetchCryptoChart({
+          symbol: sym,
+          range: selectedTimeRange.value,
+        })
+        if (gen !== cryptoLoadGeneration || chartMode.value !== 'crypto') {
+          return
+        }
+        data.value = (res.data ?? []) as [number, number][]
+        ensureChartSeries()
+        setChartData(data.value)
+        nextTick(() => scheduleCryptoScrollToRealtime())
+        cryptoWsUnsubscribe = subscribeCryptoRealtime(sym, applyCryptoRealtimePoint)
+      } finally {
+        if (gen === cryptoLoadGeneration) {
+          cryptoChartLoading.value = false
+        }
       }
+      return
     }
-  } else {
-    cryptoLoadGeneration++
-    cryptoWsUnsubscribe?.()
-    cryptoWsUnsubscribe = null
-    chartYesNoLoading.value = true
-    try {
-      const yesTokenId = clobTokenIds.value[0]
-      const points = yesTokenId ? await loadChartFromApi(yesTokenId, selectedTimeRange.value) : []
-      rawChartData.value = points
-      data.value = points
-      ensureChartSeries()
-      setChartData(data.value)
-    } finally {
-      chartYesNoLoading.value = false
-    }
+    chartMode.value = 'yesno'
+    if (selectedTimeRange.value === '30S') selectedTimeRange.value = '1D'
+  }
+  cryptoLoadGeneration++
+  cryptoWsUnsubscribe?.()
+  cryptoWsUnsubscribe = null
+  chartYesNoLoading.value = true
+  try {
+    const yesTokenId = clobTokenIds.value[0]
+    const points = yesTokenId ? await loadChartFromApi(yesTokenId, selectedTimeRange.value) : []
+    rawChartData.value = points
+    data.value = points
+    ensureChartSeries()
+    setChartData(data.value)
+  } finally {
+    chartYesNoLoading.value = false
   }
 }
 
@@ -1798,12 +1811,6 @@ onUnmounted(() => {
   margin-bottom: 8px;
 }
 
-.past-btn {
-  font-size: 13px;
-  color: #6b7280;
-  text-transform: none;
-}
-
 .date-pill {
   background-color: #111827 !important;
   color: #fff !important;
@@ -1834,11 +1841,28 @@ onUnmounted(() => {
   z-index: 2;
 }
 
+.chart-mode-toggle {
+  height: 26px;
+  margin-left: auto;
+}
+
 .chart-mode-toggle .v-btn.active {
   background: rgb(var(--v-theme-primary));
   color: rgb(var(--v-theme-on-primary));
 }
 
+.chart-mode-crypto-btn {
+  min-width: 44px;
+  padding: 0 10px;
+  letter-spacing: 0.02em;
+}
+
+.chart-crypto-ticker-label {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .chart-container {
   width: 100%;
   height: 320px;