修复共享图表减动偏好并覆盖监控行为回归

app/components/ChartBox.vue

@@ -1,5 +1,5 @@
 <script setup>
-/** 共用折线图容器：父级负责 option/数据，组件补充主题、可见尺寸和卸载清理。 */
+/** 共用折线图容器：父级负责 option/数据，组件补充主题、系统动效偏好、可见尺寸和卸载清理。 */
 import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
@@ -29,8 +29,17 @@ const props = defineProps({
 const theme = useTheme();
 const container = ref(null);
 const visible = ref(false);
+const reducedMotion = ref(false);
 let observer;
+let motionQuery;
+const updateMotionPreference = (event) => {
+  reducedMotion.value = event.matches;
+};
 onMounted(() => {
+  // Canvas 不受 CSS 减动规则控制；先读取系统偏好，再允许图表创建，并跟随运行中的偏好变更。
+  motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  updateMotionPreference(motionQuery);
+  motionQuery.addEventListener("change", updateMotionPreference);
   // 折叠面板初始尺寸可能为零；等容器可测量后创建图表，避免 ECharts 零宽初始化。
   observer = new ResizeObserver(([entry]) => {
     if (entry?.contentRect.width > 0 && entry.contentRect.height > 0)
@@ -38,7 +47,10 @@ onMounted(() => {
   });
   if (container.value) observer.observe(container.value);
 });
-onBeforeUnmount(() => observer?.disconnect());
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  motionQuery?.removeEventListener("change", updateMotionPreference);
+});
 const themedOption = computed(() => {
   // 在不修改父级 option 的前提下合成坐标轴主题，兼容单个轴与多轴数组。
   const dark = theme.isDark.value;
@@ -56,6 +68,8 @@ const themedOption = computed(() => {
   return {
     textStyle: { color },
     ...props.option,
+    // 减动时关闭绘制动画；恢复时显式还原父级设置/默认值，避免 ECharts 合并后残留 false。
+    animation: reducedMotion.value ? false : (props.option.animation ?? true),
     xAxis: Array.isArray(props.option.xAxis)
       ? props.option.xAxis.map((value) => apply(value))
       : apply(props.option.xAxis),
@@ -68,10 +82,12 @@ const themedOption = computed(() => {
 
 <template>
   <div ref="container" class="chart-box" :style="{ height: `${height}px` }">
+    <!-- 保留加载遮罩和文字，减动时只隐藏独立于数据动画的 Canvas 转圈。 -->
     <VChart
       v-if="visible"
       :option="themedOption"
       :loading="loading"
+      :loading-options="{ showSpinner: !reducedMotion }"
       autoresize
       class="chart"
     />