Web 前端新增暗夜模式切换

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/frontend/src/components/KLineChart.vue

@@ -2,12 +2,23 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
 import type { Candle } from '@/api/candles'
+import { useThemeStore } from '@/stores/theme'
 
 const props = defineProps<{ data: Candle[] }>()
+const theme = useThemeStore()
 
 const containerRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
 
+function ensureChart() {
+  if (!containerRef.value) return
+  if (chart) {
+    chart.dispose()
+    chart = null
+  }
+  chart = echarts.init(containerRef.value, theme.isDark ? 'dark' : undefined)
+}
+
 function render() {
   if (!chart) return
   const dates = props.data.map((c) => c.trade_date)
@@ -17,6 +28,7 @@ function render() {
 
   chart.setOption(
     {
+      backgroundColor: 'transparent',
       tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
       legend: { data: ['K 线', '持仓量'], top: 0 },
       grid: [
@@ -69,11 +81,9 @@ function resize() {
 }
 
 onMounted(() => {
-  if (containerRef.value) {
-    chart = echarts.init(containerRef.value)
-    render()
-    window.addEventListener('resize', resize)
-  }
+  ensureChart()
+  render()
+  window.addEventListener('resize', resize)
 })
 
 onBeforeUnmount(() => {
@@ -83,6 +93,13 @@ onBeforeUnmount(() => {
 })
 
 watch(() => props.data, render, { deep: true })
+watch(
+  () => theme.isDark,
+  () => {
+    ensureChart()
+    render()
+  },
+)
 </script>
 
 <template>