优化：折线图的显示宽度优化

src/api/cryptoChart.ts

@@ -278,11 +278,21 @@ interface BinanceAggTradeMsg {
 
 const CRYPTO_UPDATE_THROTTLE_MS = 80
 
+/** 加密货币分时折线图 X 轴 / 补点统一时间步长（ms），与图表 timeScale 一致 */
+export const CRYPTO_CHART_TIME_STEP_MS = 100
+
+/** 将毫秒时间戳对齐到 {@link CRYPTO_CHART_TIME_STEP_MS} 网格（向下取整，单调递增友好） */
+export function alignCryptoChartTimeMs(tsMs: number): number {
+  const step = CRYPTO_CHART_TIME_STEP_MS
+  return Math.floor(tsMs / step) * step
+}
+
 /**
  * 订阅 Binance 归集交易 WebSocket（aggTrade），实现更丝滑的实时走势
  * 参考：https://developers.binance.com/docs/zh-CN/binance-spot-api-docs/web-socket-streams#归集交易
  * - aggTrade 实时推送每笔成交，比 kline_1m（约 1s 一次）更细
  * - 内部节流避免频繁 setOption 造成卡顿
+ * - 每 {@link CRYPTO_CHART_TIME_STEP_MS}ms 若本周期未收到真实 aggTrade，则用最新成交价补一点（时间戳对齐到步长网格）
  */
 export function subscribeCryptoRealtime(
   symbol: string,
@@ -294,14 +304,23 @@ export function subscribeCryptoRealtime(
   const stream = `${binanceSymbol.toLowerCase()}@aggTrade`
   const ws = new WebSocket(`${BINANCE_WS}/${stream}`)
 
+  let disposed = false
   let lastUpdateTs = 0
   let pendingPoint: CryptoChartPoint | null = null
   let rafId: number | null = null
   let throttleTimer: ReturnType<typeof setTimeout> | null = null
+  /** 本 hold 周期内是否收到过真实 aggTrade（用于持价补点） */
+  let hadAggTradeSinceLastHoldTick = false
+  /** 最近一笔有效成交价，供无推送时重复输出 */
+  let lastTradedPrice: number | null = null
 
   const flush = () => {
     rafId = null
     throttleTimer = null
+    if (disposed) {
+      pendingPoint = null
+      return
+    }
     if (pendingPoint) {
       onPoint(pendingPoint)
       pendingPoint = null
@@ -323,7 +342,16 @@ export function subscribeCryptoRealtime(
     }
   }
 
+  const holdTimer = setInterval(() => {
+    if (disposed) return
+    if (!hadAggTradeSinceLastHoldTick && lastTradedPrice != null) {
+      onPoint([alignCryptoChartTimeMs(Date.now()), lastTradedPrice])
+    }
+    hadAggTradeSinceLastHoldTick = false
+  }, CRYPTO_CHART_TIME_STEP_MS)
+
   ws.onmessage = (event) => {
+    if (disposed) return
     try {
       const msg = JSON.parse((event as MessageEvent).data) as BinanceAggTradeMsg & { e?: string }
       if (msg.e === 'ping') {
@@ -335,9 +363,11 @@ export function subscribeCryptoRealtime(
       if (p == null || T == null) return
       const price = parseFloat(p)
       if (!Number.isFinite(price)) return
-      const ts = T < 1e12 ? T * 1000 : T
+      const rawTs = T < 1e12 ? T * 1000 : T
-      const point: CryptoChartPoint = [ts, price]
+      const point: CryptoChartPoint = [alignCryptoChartTimeMs(rawTs), price]
 
+      hadAggTradeSinceLastHoldTick = true
+      lastTradedPrice = price
       pendingPoint = point
       const now = Date.now()
       if (now - lastUpdateTs >= CRYPTO_UPDATE_THROTTLE_MS) {
@@ -352,6 +382,9 @@ export function subscribeCryptoRealtime(
   }
 
   return () => {
+    disposed = true
+    pendingPoint = null
+    clearInterval(holdTimer)
     if (rafId) cancelAnimationFrame(rafId)
     if (throttleTimer) clearTimeout(throttleTimer)
     ws.close()

src/composables/inPanePriceScalePrimitive.ts

@@ -0,0 +1,160 @@
+/**
+ * 在主图区域内绘制 Y 轴刻度标签（不占用右侧独立价轴条带）。
+ * 思路来自 lightweight-charts 官方 plugin-examples/overlay-price-scale。
+ */
+import type { CanvasRenderingTarget2D } from 'fancy-canvas'
+import type {
+  BarPrice,
+  IPrimitivePaneRenderer,
+  IPrimitivePaneView,
+  ISeriesPrimitive,
+  IPriceFormatter,
+  SeriesAttachedParameter,
+  Time,
+} from 'lightweight-charts'
+
+export interface InPanePriceScaleOptions {
+  textColor: string
+  side: 'left' | 'right'
+  /** 相邻刻度最小间距（像素） */
+  tickSpacingPx: number
+  fontSizePx: number
+  /** 与绘图区边缘的水平间距 */
+  sideMarginPx: number
+}
+
+const defaultOptions: InPanePriceScaleOptions = {
+  textColor: 'rgba(107, 114, 128, 0.65)',
+  side: 'right',
+  tickSpacingPx: 44,
+  fontSizePx: 9,
+  sideMarginPx: 8,
+}
+
+interface Label {
+  label: string
+  y: number
+}
+
+interface RendererData {
+  priceFormatter: IPriceFormatter
+  coordinateToPrice: (y: number) => BarPrice | null
+  options: InPanePriceScaleOptions
+}
+
+function barPriceToNumber(p: BarPrice | null): number | null {
+  if (p == null) return null
+  const n = typeof p === 'number' ? p : Number(p)
+  return Number.isFinite(n) ? n : null
+}
+
+class InPanePriceScaleRenderer implements IPrimitivePaneRenderer {
+  private _data: RendererData | null = null
+
+  update(data: RendererData) {
+    this._data = data
+  }
+
+  draw(target: CanvasRenderingTarget2D) {
+    target.useMediaCoordinateSpace((scope) => {
+      if (!this._data) return
+      const { options } = this._data
+      const labels = this._labelsForHeight(scope.mediaSize.height, this._data)
+      if (labels.length === 0) return
+
+      const ctx = scope.context
+      ctx.font = `${options.fontSizePx}px inherit`
+      const isLeft = options.side === 'left'
+
+      ctx.textAlign = isLeft ? 'left' : 'right'
+      ctx.textBaseline = 'middle'
+
+      for (const item of labels) {
+        const textX = isLeft
+          ? options.sideMarginPx
+          : scope.mediaSize.width - options.sideMarginPx
+        ctx.fillStyle = options.textColor
+        ctx.fillText(item.label, textX, item.y)
+      }
+    })
+  }
+
+  private _labelsForHeight(height: number, data: RendererData): Label[] {
+    const { coordinateToPrice, priceFormatter, options } = data
+    const spacing = options.tickSpacingPx
+    const half = Math.max(4, Math.round(spacing / 4))
+    const ys: number[] = []
+    for (let y = half; y <= height - half; y += spacing) {
+      ys.push(y)
+    }
+    const out: Label[] = []
+    for (const y of ys) {
+      const price = barPriceToNumber(coordinateToPrice(y))
+      if (price == null) continue
+      out.push({ label: priceFormatter.format(price), y })
+    }
+    return out
+  }
+}
+
+class InPanePriceScalePaneView implements IPrimitivePaneView {
+  private readonly _renderer: InPanePriceScaleRenderer
+
+  constructor() {
+    this._renderer = new InPanePriceScaleRenderer()
+  }
+
+  zOrder(): 'top' {
+    return 'top'
+  }
+
+  renderer(): IPrimitivePaneRenderer {
+    return this._renderer
+  }
+
+  update(data: RendererData) {
+    this._renderer.update(data)
+  }
+}
+
+export class InPanePriceScalePrimitive implements ISeriesPrimitive<Time> {
+  private readonly _paneViews: InPanePriceScalePaneView[]
+  private _options: InPanePriceScaleOptions
+  private _series: SeriesAttachedParameter<Time>['series'] | null = null
+  private _requestUpdate: (() => void) | undefined
+
+  constructor(options?: Partial<InPanePriceScaleOptions>) {
+    this._options = { ...defaultOptions, ...options }
+    this._paneViews = [new InPanePriceScalePaneView()]
+  }
+
+  applyOptions(options: Partial<InPanePriceScaleOptions>) {
+    this._options = { ...this._options, ...options }
+    this._requestUpdate?.()
+  }
+
+  attached(param: SeriesAttachedParameter<Time>): void {
+    this._series = param.series
+    this._requestUpdate = param.requestUpdate
+  }
+
+  detached(): void {
+    this._series = null
+    this._requestUpdate = undefined
+  }
+
+  updateAllViews(): void {
+    const s = this._series
+    if (!s) return
+    const data: RendererData = {
+      priceFormatter: s.priceFormatter(),
+      coordinateToPrice: (y) => s.coordinateToPrice(y),
+      options: this._options,
+    }
+    this._paneViews[0]!.update(data)
+  }
+
+  paneViews(): readonly IPrimitivePaneView[] {
+    return this._paneViews
+  }
+}

src/views/EventMarkets.vue

@@ -30,10 +30,14 @@
                 {{ categoryText }}
               </p>
               <div class="chart-controls-row">
-                <v-btn variant="text" size="small" class="past-btn">{{ t('eventMarkets.past') }}</v-btn>
+                <v-btn variant="text" size="small" class="past-btn">{{
+                  t('eventMarkets.past')
+                }}</v-btn>
                 <v-btn class="date-pill" size="small" rounded="pill">{{ resolutionDate }}</v-btn>
               </div>
-              <p class="chart-legend-hint">{{ t('eventMarkets.marketsCount', { n: markets.length }) }}</p>
+              <p class="chart-legend-hint">
+                {{ t('eventMarkets.marketsCount', { n: markets.length }) }}
+              </p>
             </div>
             <div class="chart-wrapper">
               <div v-if="chartLoading" class="chart-loading-overlay">
@@ -101,7 +105,9 @@
                 @click="goToTradeDetail(market)"
               >
                 <div class="market-row-main">
-                  <span class="market-question">{{ market.question || t('eventMarkets.marketPlaceholder') }}</span>
+                  <span class="market-question">{{
+                    market.question || t('eventMarkets.marketPlaceholder')
+                  }}</span>
                   <span class="market-chance">{{ marketChance(market) }}%</span>
                 </div>
                 <div class="market-row-vol">{{ formatVolume(market.volume) }}</div>
@@ -152,7 +158,8 @@
             rounded="sm"
             @click="openSheetWithOption('yes')"
           >
-            {{ barMarket ? yesLabel(barMarket) : t('eventMarkets.yes') }} {{ barMarket ? yesPrice(barMarket) : t('eventMarkets.priceZero') }}
+            {{ barMarket ? yesLabel(barMarket) : t('eventMarkets.yes') }}
+            {{ barMarket ? yesPrice(barMarket) : t('eventMarkets.priceZero') }}
           </v-btn>
           <v-btn
             class="mobile-bar-btn mobile-bar-no"
@@ -160,7 +167,8 @@
             rounded="sm"
             @click="openSheetWithOption('no')"
           >
-            {{ barMarket ? noLabel(barMarket) : t('eventMarkets.no') }} {{ barMarket ? noPrice(barMarket) : t('eventMarkets.priceZero') }}
+            {{ barMarket ? noLabel(barMarket) : t('eventMarkets.no') }}
+            {{ barMarket ? noPrice(barMarket) : t('eventMarkets.priceZero') }}
           </v-btn>
           <v-menu
             v-model="mobileMenuOpen"
@@ -215,7 +223,14 @@ defineOptions({ name: 'EventMarkets' })
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useDisplay } from 'vuetify'
-import { createChart, LineSeries, LineType, LastPriceAnimationMode, type IChartApi, type ISeriesApi } from 'lightweight-charts'
+import {
+  createChart,
+  LineSeries,
+  LineType,
+  LastPriceAnimationMode,
+  type IChartApi,
+  type ISeriesApi,
+} from 'lightweight-charts'
 import { toLwcData } from '../composables/useLightweightChart'
 import TradeComponent from '../components/TradeComponent.vue'
 import {
@@ -226,7 +241,11 @@ import {
   type PmEventListItem,
   type PmEventMarketItem,
 } from '../api/event'
-import { getPmPriceHistoryPublic, priceHistoryToChartData, getTimeRangeSeconds } from '../api/priceHistory'
+import {
+  getPmPriceHistoryPublic,
+  priceHistoryToChartData,
+  getTimeRangeSeconds,
+} from '../api/priceHistory'
 import { getMockEventById } from '../api/mockData'
 import { USE_MOCK_EVENT } from '../config/mock'
 import { useI18n } from 'vue-i18n'
@@ -391,7 +410,10 @@ async function loadChartFromApi(): Promise<ChartSeriesItem[]> {
     }
     try {
       const ev = eventDetail.value
-      const timeRange = getTimeRangeSeconds(range, ev ? { startDate: ev.startDate, endDate: ev.endDate } : undefined)
+      const timeRange = getTimeRangeSeconds(
+        range,
+        ev ? { startDate: ev.startDate, endDate: ev.endDate } : undefined,
+      )
       const res = await getPmPriceHistoryPublic({
         market: yesTokenId,
         page: 1,
@@ -416,7 +438,7 @@ function setChartSeries(seriesArr: ChartSeriesItem[]) {
     const series = chartInstance!.addSeries(LineSeries, {
       color,
       lineWidth: 2,
-      lineType: LineType.Simple,
+      lineType: LineType.Curved,
       lastPriceAnimation: LastPriceAnimationMode.OnDataUpdate,
       crosshairMarkerVisible: true,
       lastValueVisible: true,
@@ -630,7 +652,9 @@ onMounted(() => {
 })
 let tradeSheetUnmountTimer: ReturnType<typeof setTimeout> | undefined
 let tradeSheetMountTimer: ReturnType<typeof setTimeout> | undefined
-watch(tradeSheetOpen, (open) => {
+watch(
+  tradeSheetOpen,
+  (open) => {
     if (open) {
       if (tradeSheetUnmountTimer) {
         clearTimeout(tradeSheetUnmountTimer)
@@ -662,7 +686,9 @@ watch(tradeSheetOpen, (open) => {
         tradeSheetUnmountTimer = undefined
       }, 350)
     }
-}, { immediate: true })
+  },
+  { immediate: true },
+)
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)

src/views/TradeDetail.vue

@@ -3,7 +3,12 @@
     <v-pull-to-refresh class="trade-detail-pull-refresh" @load="onRefresh">
       <div class="trade-detail-pull-refresh-inner">
         <!-- findPmEvent 请求中：仅显示 loading -->
-        <v-card v-if="detailLoading && !eventDetail" class="trade-detail-loading-card" elevation="0" rounded="lg">
+        <v-card
+          v-if="detailLoading && !eventDetail"
+          class="trade-detail-loading-card"
+          elevation="0"
+          rounded="lg"
+        >
           <div class="trade-detail-loading-placeholder">
             <v-progress-circular indeterminate color="primary" size="48" />
             <p>{{ t('common.loading') }}</p>
@@ -90,7 +95,11 @@
 
             <!-- 持仓 / 限价（订单簿上方） -->
             <v-card class="positions-orders-card" elevation="0" rounded="lg">
-          <v-tabs v-model="positionsOrdersTab" class="positions-orders-tabs" density="comfortable">
+              <v-tabs
+                v-model="positionsOrdersTab"
+                class="positions-orders-tabs"
+                density="comfortable"
+              >
                 <v-tab value="positions">{{ t('activity.myPositions') }}</v-tab>
                 <v-tab value="orders">{{ t('activity.openOrders') }}</v-tab>
               </v-tabs>
@@ -104,7 +113,11 @@
                     {{ t('activity.noPositionsInMarket') }}
                   </div>
                   <div v-else class="positions-list">
-                <div v-for="pos in marketPositionsFiltered" :key="pos.id" class="position-row-item">
+                    <div
+                      v-for="pos in marketPositionsFiltered"
+                      :key="pos.id"
+                      class="position-row-item"
+                    >
                       <div class="position-row-header">
                         <div class="position-row-icon" :class="pos.iconClass">
                           <img
@@ -113,7 +126,9 @@
                             alt=""
                             class="position-row-icon-img"
                           />
-                      <span v-else class="position-row-icon-char">{{ pos.iconChar || '•' }}</span>
+                          <span v-else class="position-row-icon-char">{{
+                            pos.iconChar || '•'
+                          }}</span>
                         </div>
                         <span class="position-row-title">{{ pos.market }}</span>
                       </div>
@@ -135,7 +150,9 @@
                           size="small"
                           color="primary"
                           class="position-sell-btn"
-                      :disabled="!(pos.availableSharesNum != null && pos.availableSharesNum > 0)"
+                          :disabled="
+                            !(pos.availableSharesNum != null && pos.availableSharesNum > 0)
+                          "
                           @click="openSellFromPosition(pos)"
                         >
                           {{ t('trade.sell') }}
@@ -156,7 +173,9 @@
                   <div v-else class="orders-list">
                     <div v-for="ord in marketOpenOrders" :key="ord.id" class="order-row-item">
                       <div class="order-row-main">
-                    <span :class="['order-side-pill', ord.side === 'Yes' ? 'side-yes' : 'side-no']">
+                        <span
+                          :class="['order-side-pill', ord.side === 'Yes' ? 'side-yes' : 'side-no']"
+                        >
                           {{ ord.actionLabel || `Buy ${ord.outcome}` }}
                         </span>
                         <span class="order-price">{{ ord.price }}</span>
@@ -207,7 +226,10 @@
             <!-- Comments / Top Holders / Activity（与左侧图表、订单簿同宽） -->
             <v-card class="activity-card" elevation="0" rounded="lg">
               <div class="rules-pane">
-            <div v-if="!eventDetail?.description && !eventDetail?.resolutionSource" class="placeholder-pane">
+                <div
+                  v-if="!eventDetail?.description && !eventDetail?.resolutionSource"
+                  class="placeholder-pane"
+                >
                   {{ t('activity.rulesEmpty') }}
                 </div>
                 <template v-else>
@@ -346,10 +368,13 @@ import {
   LineSeries,
   LineType,
   LastPriceAnimationMode,
+  TickMarkType,
   type IChartApi,
   type ISeriesApi,
+  type Time,
 } from 'lightweight-charts'
 import { toLwcData, toLwcPoint } from '../composables/useLightweightChart'
+import { InPanePriceScalePrimitive } from '../composables/inPanePriceScalePrimitive'
 import OrderBook from '../components/OrderBook.vue'
 import TradeComponent, { type TradePositionItem } from '../components/TradeComponent.vue'
 import {
@@ -387,6 +412,8 @@ import {
   inferCryptoSymbol,
   fetchCryptoChart,
   subscribeCryptoRealtime,
+  alignCryptoChartTimeMs,
+  CRYPTO_CHART_TIME_STEP_MS,
 } from '../api/cryptoChart'
 
 const { t } = useI18n()
@@ -502,11 +529,9 @@ async function loadEventDetail() {
 }
 
 function onRefresh({ done }: { done: () => void }) {
-  Promise.all([
+  Promise.all([loadEventDetail(), loadMarketPositions(), loadMarketOpenOrders()]).finally(() =>
-    loadEventDetail(),
+    done(),
-    loadMarketPositions(),
+  )
-    loadMarketOpenOrders(),
-  ]).finally(() => done())
 }
 
 // 标题、成交量、到期日：优先接口详情，其次卡片 query，最后占位
@@ -1174,6 +1199,8 @@ const cryptoChartLoading = ref(false)
 const chartYesNoLoading = ref(false)
 let chartInstance: IChartApi | null = null
 let chartSeries: ISeriesApi<'Line'> | null = null
+/** 主图内自绘 Y 轴刻度（不占用右侧价轴条带） */
+let inPanePriceScale: InPanePriceScalePrimitive | null = null
 
 const currentChance = computed(() => {
   const ev = eventDetail.value
@@ -1195,11 +1222,18 @@ const currentChance = computed(() => {
 
 const lineColor = '#2563eb'
 
-const MOBILE_BREAKPOINT = 600
+/** 叠加价格轴 ID：曲线绑定在 overlay scale，主图占满宽；Y 轴数字由 InPanePriceScalePrimitive 画在图内 */
+const CHART_OVERLAY_PRICE_SCALE_ID = 'overlay-price'
+/** 右侧留白（px）：fitContent 时压缩可用宽度，线头略离开物理右缘，lastPrice 水波能露出一半且不依赖超大 rightOffset（bars） */
+const CHART_RIPPLE_RIGHT_PAD_PX = 28
 
 function ensureChartSeries() {
   if (!chartInstance || !chartContainerRef.value) return
   if (chartSeries) {
+    if (inPanePriceScale) {
+      chartSeries.detachPrimitive(inPanePriceScale)
+      inPanePriceScale = null
+    }
     chartInstance.removeSeries(chartSeries)
     chartSeries = null
   }
@@ -1207,12 +1241,26 @@ function ensureChartSeries() {
   chartSeries = chartInstance.addSeries(LineSeries, {
     color: lineColor,
     lineWidth: 2,
-    lineType: LineType.Simple,
+    lineType: LineType.Curved,
     lastPriceAnimation: LastPriceAnimationMode.OnDataUpdate,
     crosshairMarkerVisible: true,
     lastValueVisible: true,
     priceFormat: isCrypto ? { type: 'price', precision: 2 } : { type: 'percent', precision: 1 },
+    priceScaleId: CHART_OVERLAY_PRICE_SCALE_ID,
   })
+  chartInstance.priceScale(CHART_OVERLAY_PRICE_SCALE_ID).applyOptions({
+    borderVisible: false,
+    scaleMargins: { top: 0.1, bottom: 0.1 },
+  })
+  inPanePriceScale = new InPanePriceScalePrimitive({
+    textColor: 'rgba(107, 114, 128, 0.6)',
+    side: 'right',
+    tickSpacingPx: isCrypto ? 40 : 48,
+    fontSizePx: 9,
+    sideMarginPx: 6,
+  })
+  chartSeries.attachPrimitive(inPanePriceScale)
+  applyCryptoChartTimeScaleOptions()
 }
 
 function setChartData(chartData: [number, number][]) {
@@ -1226,7 +1274,7 @@ function initChart() {
   const el = chartContainerRef.value
   chartInstance = createChart(el, {
     width: el.clientWidth,
-    height: 320,
+    height: el.clientHeight || 320,
     layout: {
       background: { color: '#ffffff' },
       textColor: '#6b7280',
@@ -1235,8 +1283,19 @@ function initChart() {
       attributionLogo: false,
     },
     grid: { vertLines: { color: '#f3f4f6' }, horzLines: { color: '#f3f4f6' } },
-    rightPriceScale: { borderColor: '#e5e7eb', scaleMargins: { top: 0.1, bottom: 0.1 } },
+    leftPriceScale: { visible: false },
-    timeScale: { borderColor: '#e5e7eb', timeVisible: true, secondsVisible: false },
+    // 关闭右侧价轴条带；Y 轴数值由 InPanePriceScalePrimitive 绘在主图内
+    rightPriceScale: { visible: false },
+    overlayPriceScales: {
+      borderVisible: false,
+      scaleMargins: { top: 0.1, bottom: 0.1 },
+    },
+    timeScale: {
+      borderColor: '#e5e7eb',
+      timeVisible: true,
+      secondsVisible: false,
+      rightOffsetPixels: CHART_RIPPLE_RIGHT_PAD_PX,
+    },
     handleScroll: false,
     handleScale: false,
     crosshair: { vertLine: { labelVisible: false }, horzLine: { labelVisible: true } },
@@ -1273,17 +1332,72 @@ async function loadChartFromApi(marketParam: string, range: string): Promise<Cha
 
 const MINUTE_MS = 60 * 1000
 let cryptoWsUnsubscribe: (() => void) | null = null
+/** 防止重叠的 updateChartData：旧请求若在晚请求已 subscribe 之后才结束，会再挂一层 WS/hold 定时器，插值越来越快 */
+let cryptoLoadGeneration = 0
+let cryptoScrollToRtRaf = 0
+
+/** 每帧最多跟一次盘，避免插值过密时线头跑出视口（shiftVisibleRangeOnNewBar 对 update 新点偶发不跟） */
+function scheduleCryptoScrollToRealtime() {
+  if (!chartInstance || chartMode.value !== 'crypto') return
+  if (cryptoScrollToRtRaf) return
+  cryptoScrollToRtRaf = requestAnimationFrame(() => {
+    cryptoScrollToRtRaf = 0
+    chartInstance?.timeScale().scrollToRealTime()
+  })
+}
+
+/** 加密货币细粒度推送：显示到秒+毫秒；新点推入时视窗右移并每帧 scrollToRealTime 咬住线头 */
+function applyCryptoChartTimeScaleOptions() {
+  if (!chartInstance) return
+  if (chartMode.value === 'crypto') {
+    chartInstance.applyOptions({
+      timeScale: {
+        rightOffsetPixels: CHART_RIPPLE_RIGHT_PAD_PX,
+        secondsVisible: true,
+        shiftVisibleRangeOnNewBar: true,
+        tickMarkFormatter: (time: Time, tickMarkType: TickMarkType) => {
+          if (typeof time !== 'number') return null
+          if (tickMarkType !== TickMarkType.TimeWithSeconds) return null
+          const d = new Date(time * 1000)
+          const pad2 = (n: number) => String(n).padStart(2, '0')
+          return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}.${String(d.getMilliseconds()).padStart(3, '0')}`
+        },
+      },
+    })
+  } else {
+    chartInstance.applyOptions({
+      timeScale: {
+        rightOffsetPixels: CHART_RIPPLE_RIGHT_PAD_PX,
+        secondsVisible: false,
+        shiftVisibleRangeOnNewBar: true,
+        tickMarkFormatter: () => null,
+      },
+    })
+  }
+}
 
 function applyCryptoRealtimePoint(point: [number, number]) {
+  if (chartMode.value !== 'crypto') return
+
   const list = [...data.value]
-  const [ts, price] = point
+  let ts = alignCryptoChartTimeMs(point[0])
+  const price = point[1]
+  const prevLastT = list.length > 0 ? list[list.length - 1]![0] : null
+  // 本地补点用 now，成交用 Binance T；T 可能略早于上一根 → update() 报 Cannot update oldest data
+  if (prevLastT != null && ts < prevLastT) {
+    ts = alignCryptoChartTimeMs(prevLastT + CRYPTO_CHART_TIME_STEP_MS)
+  }
   const range = selectedTimeRange.value
   let useIncrementalUpdate = false
   let updatePoint: [number, number] | null = null
 
   if (range === '30S') {
     const cutoff = Date.now() - 30 * 1000
+    if (prevLastT != null && ts === prevLastT) {
+      list[list.length - 1] = [ts, price]
+    } else {
       list.push([ts, price])
+    }
     const filtered = list.filter(([t]) => t >= cutoff).sort((a, b) => a[0] - b[0])
     data.value = filtered
     // 仅当未过滤掉任何点时可用 update 实现平滑动画
@@ -1293,7 +1407,8 @@ function applyCryptoRealtimePoint(point: [number, number]) {
     const last = list[list.length - 1]
     const minuteStart = Math.floor(ts / MINUTE_MS) * MINUTE_MS
     const sameMinute = last && Math.floor(last[0] / MINUTE_MS) === Math.floor(ts / MINUTE_MS)
-    const baseMax = { '1H': 60, '6H': 360, '1D': 1440, '1W': 1680, '1M': 43200, ALL: 10080 }[range] ?? 60
+    const baseMax =
+      { '1H': 60, '6H': 360, '1D': 1440, '1W': 1680, '1M': 43200, ALL: 10080 }[range] ?? 60
     const extra = Math.min(200, Math.round(baseMax * 0.1))
     const max = baseMax + extra
     if (sameMinute) {
@@ -1316,11 +1431,13 @@ function applyCryptoRealtimePoint(point: [number, number]) {
   } else {
     setChartData(data.value)
   }
+  scheduleCryptoScrollToRealtime()
 }
 
 async function updateChartData() {
   if (chartMode.value === 'crypto') {
     const sym = cryptoSymbol.value ?? 'btc'
+    const gen = ++cryptoLoadGeneration
     cryptoWsUnsubscribe?.()
     cryptoWsUnsubscribe = null
     cryptoChartLoading.value = true
@@ -1329,14 +1446,23 @@ async function updateChartData() {
         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?.()
+      cryptoWsUnsubscribe = null
       cryptoWsUnsubscribe = subscribeCryptoRealtime(sym, applyCryptoRealtimePoint)
     } finally {
+      if (gen === cryptoLoadGeneration) {
         cryptoChartLoading.value = false
       }
+    }
   } else {
+    cryptoLoadGeneration++
     cryptoWsUnsubscribe?.()
     cryptoWsUnsubscribe = null
     chartYesNoLoading.value = true
@@ -1388,7 +1514,8 @@ watch(
 
 const handleResize = () => {
   if (!chartInstance || !chartContainerRef.value) return
-  chartInstance.resize(chartContainerRef.value.clientWidth, 320)
+  const el = chartContainerRef.value
+  chartInstance.resize(el.clientWidth, el.clientHeight || 320)
 }
 
 watch(
@@ -1443,10 +1570,15 @@ onUnmounted(() => {
   unsubscribePositionUpdate()
   cryptoWsUnsubscribe?.()
   cryptoWsUnsubscribe = null
+  if (cryptoScrollToRtRaf) {
+    cancelAnimationFrame(cryptoScrollToRtRaf)
+    cryptoScrollToRtRaf = 0
+  }
   window.removeEventListener('resize', handleResize)
   chartInstance?.remove()
   chartInstance = null
   chartSeries = null
+  inPanePriceScale = null
   disconnectClob()
 })
 </script>

src/views/Wallet.vue

@@ -164,12 +164,7 @@
               >
                 <div class="design-order-top">
                   <div class="order-mobile-icon" :class="ord.iconClass">
-                    <img
+                    <img v-if="ord.imageUrl" :src="ord.imageUrl" alt="" class="position-icon-img" />
-                      v-if="ord.imageUrl"
-                      :src="ord.imageUrl"
-                      alt=""
-                      class="position-icon-img"
-                    />
                     <span v-else class="position-icon-char">{{ ord.iconChar || '•' }}</span>
                   </div>
                   <div class="order-mobile-main design-order-title-col">
@@ -182,9 +177,11 @@
                       <span class="order-side-pill" :class="getOrderSideClass(ord)">{{
                         getOrderActionLabel(ord)
                       }}</span>
-                      <span class="order-outcome-pill" :class="ord.side === 'Yes' ? 'outcome-yes' : 'outcome-no'">{{
+                      <span
-                        ord.side
+                        class="order-outcome-pill"
-                      }}</span>
+                        :class="ord.side === 'Yes' ? 'outcome-yes' : 'outcome-no'"
+                        >{{ ord.side }}</span
+                      >
                     </div>
                   </div>
                   <v-btn
@@ -267,9 +264,8 @@
                       {{ getHistoryTagLabel(h) }}
                     </span>
                     <span class="design-history-meta"
-                      >{{ t('wallet.priceLabel') }}: {{ h.avgPrice || '—' }} · {{ t('wallet.sharesLabel') }}: {{
+                      >{{ t('wallet.priceLabel') }}: {{ h.avgPrice || '—' }} ·
-                        h.shares || '—'
+                      {{ t('wallet.sharesLabel') }}: {{ h.shares || '—' }}</span
-                      }}</span
                     >
                   </div>
                 </template>
@@ -280,7 +276,11 @@
                       <span v-else class="position-icon-char">{{ getFundingIconText(h) }}</span>
                     </div>
                     <div class="history-mobile-main">
-                      <MarqueeTitle :text="getFundingTitle(h)" title-class="history-mobile-title" fast />
+                      <MarqueeTitle
+                        :text="getFundingTitle(h)"
+                        title-class="history-mobile-title"
+                        fast
+                      />
                       <div class="history-mobile-activity">{{ h.timeAgo || '—' }}</div>
                     </div>
                   </div>
@@ -441,7 +441,11 @@
             </div>
           </div>
           <h3 class="sell-dialog-title">
-            {{ t('wallet.sellDialogTitle', { outcome: sellPositionItem.sellOutcome || t('wallet.position') }) }}
+            {{
+              t('wallet.sellDialogTitle', {
+                outcome: sellPositionItem.sellOutcome || t('wallet.position'),
+              })
+            }}
           </h3>
           <p class="sell-dialog-market">{{ sellPositionItem.market }}</p>
           <div class="sell-receive-box">
@@ -456,7 +460,9 @@
           <v-btn color="success" variant="flat" block class="sell-redeem-btn" @click="redeemSell">
             {{ t('wallet.sellDialogRedeem') }}
           </v-btn>
-          <a href="#" class="sell-edit-link" @click.prevent="editSellOrder">{{ t('wallet.sellDialogEditOrder') }}</a>
+          <a href="#" class="sell-edit-link" @click.prevent="editSellOrder">{{
+            t('wallet.sellDialogEditOrder')
+          }}</a>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -687,10 +693,7 @@ interface HistoryItem {
   detailMarketId?: string
 }
 
-function canOpenTradeDetail(opts: {
+function canOpenTradeDetail(opts: { tradeEventId?: string; tradeEventSlug?: string }): boolean {
-  tradeEventId?: string
-  tradeEventSlug?: string
-}): boolean {
   return !!(opts.tradeEventId?.trim() || opts.tradeEventSlug?.trim())
 }
 
@@ -792,7 +795,9 @@ function isFundingHistory(h: HistoryItem): boolean {
 
 function getFundingTitle(h: HistoryItem): string {
   if (h.market?.trim()) return h.market
-  return isWithdrawalHistory(h) ? t('wallet.btcWithdrawHistoryLabel') : t('wallet.usdtDepositHistoryLabel')
+  return isWithdrawalHistory(h)
+    ? t('wallet.btcWithdrawHistoryLabel')
+    : t('wallet.usdtDepositHistoryLabel')
 }
 
 function getFundingIconText(h: HistoryItem): string {
@@ -1062,8 +1067,10 @@ function getWithdrawAmountText(w: SettlementRequestClientItem): string {
 function getWithdrawFeeText(w: SettlementRequestClientItem): string {
   const feeRaw = Number(
     (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).fee ??
-      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).gasFee ??
+      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
-      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).serviceFee ??
+        .gasFee ??
+      (w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number })
+        .serviceFee ??
       0,
   )
   const feeText = Number.isFinite(feeRaw)
@@ -1375,7 +1382,7 @@ function initPlChart() {
     bottomColor: color + '08',
     lineColor: color,
     lineWidth: 2,
-    lineType: LineType.Simple,
+    lineType: LineType.Curved,
     lastPriceAnimation: LastPriceAnimationMode.OnDataUpdate,
     priceFormat: { type: 'price', precision: 2 },
   })