🐛 修复主题切换异常

src/components/userGacha/gro-chart-calendar.vue

@@ -7,6 +7,7 @@
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
     :style="{ height: chartHeight }"
+    :key="`gro-chart-calendar-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>
@@ -57,7 +58,7 @@ type EChartsOption = ComposeOption<
 const props = defineProps<GachaChartCalendarProps>();
 const { theme } = storeToRefs(useAppStore());
 
-const chartOptions = shallowRef<EChartsOption>({});
+const chartOptions = shallowRef<EChartsOption>();
 const yearCount = shallowRef<number>(1); // 默认至少1年，避免高度为0
 const echartsTheme = computed<"dark" | "light">(() => (theme.value === "dark" ? "dark" : "light"));
 

src/components/userGacha/gro-chart-overview.vue

@@ -6,6 +6,7 @@
     autoresize
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
+    :key="`gro-chart-overview-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>

src/components/userGacha/gro-chart-stackbar.vue

@@ -6,6 +6,7 @@
     autoresize
     :theme="echartsTheme"
     :init-options="{ locale: 'ZH' }"
+    :key="`gro-chart-stackbar-${echartsTheme}`"
   />
 </template>
 <script lang="ts" setup>

src/components/userGacha/gro-echarts.vue

@@ -29,15 +29,16 @@ import { ref } from "vue";
 
 type GachaOverviewEchartsProps = { uid: string; gachaType?: string };
 type ChartsType = "overview" | "calendar" | "stackBar";
-type ChartItem = { label: string; value: ChartsType };
+type SelectType<T> = { label: string; value: T };
 
 defineProps<GachaOverviewEchartsProps>();
 
-const chartTypes: Array<ChartItem> = [
+const chartTypes: Array<SelectType<ChartsType>> = [
   { label: "祈愿分析", value: "overview" },
   { label: "祈愿日历", value: "calendar" },
   { label: "祈愿柱状图", value: "stackBar" },
 ];
+// TODO: 分卡池选择图表
 
 const curChartType = ref<ChartsType>("overview");
 </script>
@@ -70,8 +71,8 @@ const curChartType = ref<ChartsType>("overview");
 }
 
 .gro-chart-container {
+  overflow: hidden auto;
   width: 100%;
   flex: 1;
-  overflow: hidden auto;
 }
 </style>