docs: annotate payment, host operations and shared components

app/components/ChartBox.vue

@@ -1,4 +1,5 @@
 <script setup>
+/** 共用折线图容器：父级负责 option/数据，组件补充主题、可见尺寸和卸载清理。 */
 import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
@@ -13,6 +14,7 @@ import { t as useTheme } from "~/lib/useTheme.js";
 import "~/assets/styles/ChartBox.CYP_mhat.css";
 
 use([
+  // 仅注册实际使用的折线图、Canvas 和基础组件；新增图表类型时须同步显式注册。
   CanvasRenderer,
   LineChart,
   GridComponent,
@@ -29,6 +31,7 @@ const container = ref(null);
 const visible = ref(false);
 let observer;
 onMounted(() => {
+  // 折叠面板初始尺寸可能为零；等容器可测量后创建图表，避免 ECharts 零宽初始化。
   observer = new ResizeObserver(([entry]) => {
     if (entry?.contentRect.width > 0 && entry.contentRect.height > 0)
       visible.value = true;
@@ -37,6 +40,7 @@ onMounted(() => {
 });
 onBeforeUnmount(() => observer?.disconnect());
 const themedOption = computed(() => {
+  // 在不修改父级 option 的前提下合成坐标轴主题，兼容单个轴与多轴数组。
   const dark = theme.isDark.value;
   const color = dark ? "#a1a1aa" : "#94a3b8";
   const grid = dark ? "rgba(255,255,255,.08)" : "rgba(0,0,0,.06)";