From 9ac56662da3e7e55356926963aef3125d24e3024 Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Fri, 12 Dec 2025 20:21:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 改进 BarChart, LineChart, ScatterChart 组件
- 优化响应式布局和类型定义
---
 frontend/src/components/charts/BarChart.vue   |  3 +-
 frontend/src/components/charts/LineChart.vue  |  3 +-
 .../src/components/charts/ScatterChart.vue    | 30 +++----------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/charts/BarChart.vue b/frontend/src/components/charts/BarChart.vue
index 9791aa3..4b507ee 100644
--- a/frontend/src/components/charts/BarChart.vue
+++ b/frontend/src/components/charts/BarChart.vue
@@ -21,7 +21,8 @@ import {
 
 const props = withDefaults(defineProps<Props>(), {
   height: 300,
-  stacked: true
+  stacked: true,
+  options: undefined
 })
 
 ChartJS.register(
diff --git a/frontend/src/components/charts/LineChart.vue b/frontend/src/components/charts/LineChart.vue
index 2d2d2dd..7ebf663 100644
--- a/frontend/src/components/charts/LineChart.vue
+++ b/frontend/src/components/charts/LineChart.vue
@@ -21,7 +21,8 @@ import {
 } from 'chart.js'
 
 const props = withDefaults(defineProps<Props>(), {
-  height: 300
+  height: 300,
+  options: undefined
 })
 
 // 注册 Chart.js 组件
diff --git a/frontend/src/components/charts/ScatterChart.vue b/frontend/src/components/charts/ScatterChart.vue
index 8c08d99..24d590d 100644
--- a/frontend/src/components/charts/ScatterChart.vue
+++ b/frontend/src/components/charts/ScatterChart.vue
@@ -64,7 +64,8 @@ import {
 import 'chartjs-adapter-date-fns'
 
 const props = withDefaults(defineProps<Props>(), {
-  height: 300
+  height: 300,
+  options: undefined
 })
 
 ChartJS.register(
@@ -151,30 +152,8 @@ const crosshairStats = computed<CrosshairStats | null>(() => {
   }
 })
 
-const crosshairPlugin: Plugin<'scatter'> = {
-  id: 'crosshairLine',
-  afterDraw: (chartInstance) => {
-    if (crosshairY.value === null) return
-
-    const { ctx, chartArea, scales } = chartInstance
-    const yScale = scales.y
-    if (!yScale || !chartArea) return
-
-    const yPixel = yScale.getPixelForValue(crosshairY.value)
-
-    if (yPixel < chartArea.top || yPixel > chartArea.bottom) return
-
-    ctx.save()
-    ctx.beginPath()
-    ctx.moveTo(chartArea.left, yPixel)
-    ctx.lineTo(chartArea.right, yPixel)
-    ctx.strokeStyle = 'rgba(250, 204, 21, 0.8)'
-    ctx.lineWidth = 2
-    ctx.setLineDash([6, 4])
-    ctx.stroke()
-    ctx.restore()
-  }
-}
+// 旧版插件（保留作为参考但不再使用，使用下方的 crosshairPluginWithTransform 代替）
+// const crosshairPlugin: Plugin<'scatter'> = { ... }
 
 // 自定义非线性 Y 轴转换函数
 // 0-10 分钟占据 70% 的空间，10-120 分钟占据 30% 的空间
@@ -262,7 +241,6 @@ const defaultOptions: ChartOptions<'scatter'> = {
         // 自定义刻度值：在实际值 0, 2, 5, 10, 30, 60, 120 处显示
         callback(this: Scale, tickValue: string | number) {
           const displayVal = Number(tickValue)
-          const realVal = toRealValue(displayVal)
           // 只在特定的显示位置显示刻度
           const targetTicks = [0, 2, 5, 10, 30, 60, 120]
           for (const target of targetTicks) {