优化：订单薄调整

src/components/OrderBook.vue

@@ -22,6 +22,7 @@
       <!-- Order List -->
       <div class="order-list">
         <div class="order-list-header">
+          <div class="order-list-header-spacer"></div>
           <div class="order-list-header-price">PRICE</div>
           <div class="order-list-header-shares">SHARES</div>
           <div class="order-list-header-total">TOTAL</div>
@@ -321,12 +322,18 @@ const maxBidsTotal = computed(() => {
 
 .order-list-header {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
   padding: 8px 0;
   border-bottom: none;
   margin-bottom: 8px;
 }
 
+.order-list-header-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
 .order-list-header-price,
 .order-list-header-shares,
 .order-list-header-total {
@@ -338,18 +345,22 @@ const maxBidsTotal = computed(() => {
 
 .order-list-header-price {
   width: 80px;
+  flex-shrink: 0;
 }
 
 .order-list-header-shares {
-  flex: 1;
+  width: 100px;
+  flex-shrink: 0;
   text-align: right;
 }
 
 .order-list-header-total {
   width: 100px;
+  flex-shrink: 0;
   text-align: right;
 }
 
+
 .asks-label,
 .bids-label {
   font-size: 12px;
@@ -378,11 +389,10 @@ const maxBidsTotal = computed(() => {
   gap: 12px;
 }
 
-/* 深度图：固定宽度，进度条长度表示深度比例，不占满整行 */
+/* 深度条占据左侧剩余空间 */
 .order-progress {
-  flex: 0 0 auto;
+  flex: 1;
-  width: 120px;
+  min-width: 0;
-  min-width: 120px;
 }
 
 .asks-price {
@@ -432,38 +442,50 @@ const maxBidsTotal = computed(() => {
   color: #666666;
 }
 
-/* Responsive Adjustments */
+/* Responsive Adjustments - 手机端缩小右侧列宽，让深度条占用更多空间 */
 @media (max-width: 600px) {
   .order-book-content {
     padding: 8px 12px;
-    gap: 12px;
+    gap: 8px;
+  }
+
+  .order-list-header {
+    gap: 8px;
   }
 
   .order-progress {
-    width: 80px;
+    min-width: 0;
-    min-width: 80px;
+  }
+
+  .order-item {
+    gap: 8px;
   }
 
   .order-list-header-price {
-    width: 60px;
+    width: 48px;
+  }
+
+  .order-list-header-shares {
+    width: 56px;
   }
 
   .order-list-header-total {
-    width: 80px;
+    width: 52px;
   }
 
   .order-price {
-    width: 60px;
+    width: 48px;
-    font-size: 13px;
+    font-size: 12px;
   }
 
   .order-shares {
-    font-size: 13px;
+    width: 56px;
+    font-size: 12px;
   }
 
   .order-total {
-    width: 80px;
+    width: 52px;
-    font-size: 13px;
+    font-size: 12px;
   }
 }
 </style>

src/views/TradeDetail.vue

@@ -170,8 +170,47 @@ const currentChance = computed(() => {
 
 const lineColor = '#2563eb'
 
-function buildOption(chartData: [number, number][]) {
+const MOBILE_BREAKPOINT = 600
+
+function buildOption(chartData: [number, number][], containerWidth?: number) {
   const lastIndex = chartData.length - 1
+  const width = containerWidth ?? chartContainerRef.value?.clientWidth ?? 400
+  const isMobile = width < MOBILE_BREAKPOINT
+
+  // 手机端：计算时间范围，减少 X 轴标签数量并缩短格式，避免重叠
+  const xAxisConfig: Record<string, unknown> = {
+    type: 'time',
+    axisLine: { lineStyle: { color: '#e5e7eb' } },
+    axisLabel: {
+      color: '#6b7280',
+      fontSize: isMobile ? 10 : 11,
+    },
+    axisTick: { show: false },
+    splitLine: { show: false },
+  }
+
+  if (isMobile && chartData.length >= 2) {
+    const times = chartData.map((d) => d[0])
+    const minTime = Math.min(...times)
+    const maxTime = Math.max(...times)
+    const span = maxTime - minTime
+    // 只显示约 4 个时间点，避免挤在一起
+    xAxisConfig.axisLabel = {
+      ...(xAxisConfig.axisLabel as object),
+      interval: Math.max(span / 4, 60 * 1000),
+      formatter: (value: number) => {
+        const d = new Date(value)
+        const h = d.getHours()
+        const m = d.getMinutes()
+        if (span >= 24 * 60 * 60 * 1000) {
+          return `${d.getMonth() + 1}/${d.getDate()}`
+        }
+        return `${h}:${m.toString().padStart(2, '0')}`
+      },
+      rotate: -25,
+    }
+  }
+
   return {
     animation: false,
     tooltip: {
@@ -193,14 +232,14 @@ function buildOption(chartData: [number, number][]) {
       },
       axisPointer: { animation: false },
     },
-    grid: { left: 16, right: 48, top: 16, bottom: 28, containLabel: false },
+    grid: {
-    xAxis: {
+      left: 16,
-      type: 'time',
+      right: 48,
-      axisLine: { lineStyle: { color: '#e5e7eb' } },
+      top: 16,
-      axisLabel: { color: '#6b7280', fontSize: 11 },
+      bottom: isMobile ? 44 : 28,
-      axisTick: { show: false },
+      containLabel: false,
-      splitLine: { show: false },
     },
+    xAxis: xAxisConfig,
     yAxis: {
       type: 'value',
       position: 'right',
@@ -234,12 +273,14 @@ function initChart() {
   if (!chartContainerRef.value) return
   data.value = generateData(selectedTimeRange.value)
   chartInstance = echarts.init(chartContainerRef.value)
-  chartInstance.setOption(buildOption(data.value))
+  const w = chartContainerRef.value.clientWidth
+  chartInstance.setOption(buildOption(data.value, w))
 }
 
 function updateChartData() {
   data.value = generateData(selectedTimeRange.value)
-  if (chartInstance) chartInstance.setOption(buildOption(data.value), { replaceMerge: ['series'] })
+  const w = chartContainerRef.value?.clientWidth
+  if (chartInstance) chartInstance.setOption(buildOption(data.value, w), { replaceMerge: ['series'] })
 }
 
 function selectTimeRange(range: string) {
@@ -269,7 +310,8 @@ function startDynamicUpdate() {
     list.push([nextT, Math.round(nextVal * 10) / 10])
     const max = getMaxPoints(selectedTimeRange.value)
     data.value = list.slice(-max)
-    if (chartInstance) chartInstance.setOption(buildOption(data.value), { replaceMerge: ['series'] })
+    const w = chartContainerRef.value?.clientWidth
+    if (chartInstance) chartInstance.setOption(buildOption(data.value, w), { replaceMerge: ['series'] })
   }, 3000)
 }
 
@@ -282,7 +324,13 @@ function stopDynamicUpdate() {
 
 watch(selectedTimeRange, () => updateChartData())
 
-const handleResize = () => chartInstance?.resize()
+const handleResize = () => {
+  if (!chartInstance || !chartContainerRef.value) return
+  chartInstance.resize()
+  chartInstance.setOption(buildOption(data.value, chartContainerRef.value.clientWidth), {
+    replaceMerge: ['series'],
+  })
+}
 
 onMounted(() => {
   initChart()