vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/DevTool/components/Performance/modules/usePerformanceChart.ts

@@ -1,460 +1,460 @@
-import { ref, computed, nextTick } from 'vue';
-import { raf, caf } from '../../../../../utils';
-
-export function usePerformanceChart(opts: {
-  theme: any;
-  isDark: any;
-  instance: any;
-  canvasIdFn: () => string;
-  stepSize: number;
-  data: any; // from usePerformanceData
-  config: {
-    showFps: any;
-    showCpu: any;
-    showMemory: any;
-  };
-  props: any;
-}) {
-  const canvasWidth = ref(0);
-  const canvasHeight = ref(0);
-  let canvasCtx: UniApp.CanvasContext | null = null;
-  let renderTimer: number | null = null;
-  // 使用标志变量控制渲染循环，确保在 Android 平台能正确停止
-  let isRunning = false;
-
-  // Colors
-  const textColor = computed(() => {
-    if (opts.theme.value === 'eye') return '#586e75';
-    return opts.isDark.value ? '#ffffff' : '#000000';
-  });
-  const chartBgColor = computed(() => {
-    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.05)';
-    return opts.isDark.value
-      ? 'rgba(255, 255, 255, 0.08)'
-      : 'rgba(0, 0, 0, 0.05)';
-  });
-  const mainLineColor = computed(() => {
-    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.3)';
-    return opts.isDark.value
-      ? 'rgba(255, 255, 255, 0.4)'
-      : 'rgba(0, 0, 0, 0.2)';
-  });
-  const subLineColor = computed(() => {
-    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.1)';
-    return opts.isDark.value
-      ? 'rgba(255, 255, 255, 0.15)'
-      : 'rgba(0, 0, 0, 0.08)';
-  });
-
-  function initCanvas(onReady?: () => void) {
-    const canvasId = opts.canvasIdFn();
-    canvasCtx = uni.createCanvasContext(canvasId, opts.instance?.proxy);
-
-    const queryCanvas = (retryCount = 0) => {
-      uni
-        .createSelectorQuery()
-        .in(opts.instance?.proxy)
-        .select(`#${canvasId}`)
-        .boundingClientRect((rect) => {
-          const r = rect as any;
-          if (r && r.width > 0 && r.height > 0) {
-            canvasWidth.value = r.width;
-            canvasHeight.value = r.height;
-
-            // Initialize data if needed (call initDate from usePerformanceData)
-            const points = Math.ceil(canvasWidth.value / opts.stepSize) + 4;
-            opts.data.initData(points);
-
-            if (onReady) onReady();
-          } else {
-            // Android 平台在二次打开时可能需要多一点时间才能获取到正确的宽高
-            // 增加重试机制：每 50ms 重试一次，最多重试 10 次 (500ms)
-            if (retryCount < 10) {
-              setTimeout(() => {
-                queryCanvas(retryCount + 1);
-              }, 50);
-            } else {
-              console.warn(
-                `[UniDevTool] Failed to get canvas rect for ${canvasId}`,
-              );
-            }
-          }
-        })
-        .exec();
-    };
-
-    nextTick(() => {
-      // 首次尝试稍微延迟一点，避开极其短暂的中间状态
-      setTimeout(() => queryCanvas(), 50);
-    });
-  }
-
-  function startRenderLoop() {
-    // 避免重复启动
-    if (isRunning) return;
-    isRunning = true;
-
-    const render = () => {
-      // 检查标志位，如果已停止则不再继续
-      if (!isRunning) return;
-      drawChart();
-      renderTimer = raf(render);
-    };
-    render();
-  }
-
-  function stopRenderLoop() {
-    isRunning = false;
-    if (renderTimer) {
-      caf(renderTimer);
-      renderTimer = null;
-    }
-  }
-
-  function resetCanvas() {
-    stopRenderLoop();
-    canvasCtx = null;
-    canvasWidth.value = 0;
-    canvasHeight.value = 0;
-  }
-
-  function drawChart() {
-    if (!canvasCtx || !canvasWidth.value || !canvasHeight.value) return;
-
-    const ctx = canvasCtx;
-    const w = canvasWidth.value;
-    const h = canvasHeight.value;
-    const bottomPadding = 12;
-    const drawH = h - bottomPadding;
-
-    // Data aliases
-    const {
-      fpsHistory: fList,
-      cpuHistory: cList,
-      memoryHistory: mList,
-      timeHistory: tList,
-      displayMaxScale: currentScale,
-    } = opts.data;
-
-    // Props aliases
-    const config = opts.config;
-    const props = opts.props;
-
-    // 计算平滑偏移量
-    const now = Date.now();
-
-    // 强制使用当前时间作为最右侧锚点
-    // 这样数据永远不会往右移动，只会随着时间推移自然向左滚动
-    const rightEdgeTime = now;
-
-    const getX = (ts: number) => {
-      if (!ts) return -100; // 兜底处理无效数据
-      return w - ((rightEdgeTime - ts) / 1000) * opts.stepSize;
-    };
-
-    const activeMetrics = [
-      { key: 'cpu', show: config.showCpu.value },
-      { key: 'memory', show: config.showMemory.value },
-      { key: 'fps', show: config.showFps.value },
-    ].filter((m) => m.show);
-
-    const count = activeMetrics.length;
-    const isSplit = count > 1;
-    const chartHeight = count > 0 ? drawH / count : drawH;
-
-    let cpuY = 0;
-    let memY = 0;
-    let fpsY = 0;
-
-    activeMetrics.forEach((m, i) => {
-      if (m.key === 'cpu') cpuY = i * chartHeight;
-      if (m.key === 'memory') memY = i * chartHeight;
-      if (m.key === 'fps') fpsY = i * chartHeight;
-    });
-
-    // 1. 绘制背景网格
-    const maxFps = Math.max(...fList.value, 0);
-    let targetScale = 60;
-    if (maxFps > 144) targetScale = 240;
-    else if (maxFps > 120) targetScale = 144;
-    else if (maxFps > 90) targetScale = 120;
-
-    const getStandardPoints = (scale: number) => {
-      return [0, 30, 60, 100, 144, 240].filter(
-        (p) => p <= Math.max(scale, currentScale.value),
-      );
-    };
-
-    ctx.setLineWidth(1);
-    ctx.setFontSize(props.mode === 'widget' ? 10 : 12);
-
-    // --- FPS ---
-    if (config.showFps.value) {
-      const fpsPoints = getStandardPoints(targetScale);
-      fpsPoints.forEach((p) => {
-        const yPos =
-          fpsY + (chartHeight - (p / currentScale.value) * chartHeight);
-        if (yPos < fpsY - 5 || yPos > fpsY + chartHeight + 5) return;
-
-        ctx.beginPath();
-        ctx.setStrokeStyle(
-          p === 0 || p === 60 || p === targetScale
-            ? mainLineColor.value
-            : subLineColor.value,
-        );
-        ctx.setLineDash(
-          p === 0 || p === 60 || p === targetScale ? [] : [2, 4],
-          0,
-        );
-        ctx.moveTo(0, yPos);
-        ctx.lineTo(w, yPos);
-        ctx.stroke();
-
-        ctx.setFillStyle(textColor.value);
-        if (p !== 0 && (p === 60 || p === targetScale)) {
-          ctx.setTextBaseline(p === targetScale ? 'top' : 'bottom');
-          ctx.fillText(`${p}${isSplit ? ' FPS' : ''}`, 0, yPos);
-        }
-      });
-    }
-
-    // --- CPU ---
-    if (config.showCpu.value) {
-      const cpuPoints = [0, 50, 100];
-      cpuPoints.forEach((p) => {
-        const yPos = cpuY + (chartHeight - (p / 100) * chartHeight);
-        if (yPos < cpuY - 5 || yPos > cpuY + chartHeight + 5) return;
-
-        if (!isSplit || p !== 0) {
-          ctx.beginPath();
-          ctx.setStrokeStyle(
-            p === 0 || p === 100 ? mainLineColor.value : subLineColor.value,
-          );
-          ctx.setLineDash(p === 0 || p === 100 ? [] : [2, 4], 0);
-          ctx.moveTo(0, yPos);
-          ctx.lineTo(w, yPos);
-          ctx.stroke();
-        }
-
-        ctx.setFillStyle(textColor.value);
-        if (p !== 0) {
-          ctx.setTextBaseline(p === 100 ? 'top' : 'middle');
-          ctx.fillText(`${p}${isSplit ? '%' : ''}`, 0, yPos);
-        }
-      });
-    }
-
-    // --- Memory ---
-    const maxMem = Math.max(...mList.value, 100);
-    let targetMemScale = Math.ceil(maxMem / 100) * 100;
-    if (targetMemScale === 0) targetMemScale = 100;
-
-    if (config.showMemory.value) {
-      const memPoints = [0, targetMemScale / 2, targetMemScale];
-      memPoints.forEach((p) => {
-        const yPos = memY + (chartHeight - (p / targetMemScale) * chartHeight);
-        if (yPos < memY - 5 || yPos > memY + chartHeight + 5) return;
-
-        if (!isSplit || p !== 0) {
-          ctx.beginPath();
-          ctx.setStrokeStyle(
-            p === 0 || p === targetMemScale
-              ? mainLineColor.value
-              : subLineColor.value,
-          );
-          ctx.setLineDash(p === 0 || p === targetMemScale ? [] : [2, 4], 0);
-          ctx.moveTo(0, yPos);
-          ctx.lineTo(w, yPos);
-          ctx.stroke();
-        }
-
-        ctx.setFillStyle(textColor.value);
-        if (p !== 0) {
-          ctx.setTextBaseline(p === targetMemScale ? 'top' : 'middle');
-          ctx.fillText(`${p.toFixed(0)}${isSplit ? 'M' : ''}`, 0, yPos);
-        }
-      });
-    }
-
-    // Split Lines
-    if (isSplit) {
-      ctx.setStrokeStyle(mainLineColor.value);
-      ctx.setLineDash([], 0);
-      for (let i = 1; i < count; i++) {
-        const y = chartHeight * i;
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(w, y);
-        ctx.stroke();
-      }
-    }
-
-    // Vertical Grid & Time Layout
-    const timeList = tList.value;
-
-    // Vertical Grid - 基于时间绘制，不再基于数组索引，保证网格绝对均匀
-    ctx.setStrokeStyle(subLineColor.value);
-    ctx.setLineDash([2, 4], 0);
-
-    const startTimeOnScreen = rightEdgeTime - (w / opts.stepSize) * 1000;
-    const startGridSec = Math.ceil(startTimeOnScreen / 5000) * 5000;
-
-    for (let t = startGridSec; t <= rightEdgeTime; t += 5000) {
-      const xPos = getX(t);
-      if (xPos >= 0 && xPos <= w) {
-        ctx.beginPath();
-        ctx.moveTo(xPos, 0);
-        ctx.lineTo(xPos, drawH);
-        ctx.stroke();
-      }
-    }
-
-    // Time Axis
-    if (timeList.length > 0) {
-      ctx.setLineDash([], 0);
-      ctx.setStrokeStyle(mainLineColor.value);
-      ctx.beginPath();
-      ctx.moveTo(0, drawH);
-      ctx.lineTo(w, drawH);
-      ctx.stroke();
-
-      ctx.setFillStyle(textColor.value);
-      ctx.setFontSize(10);
-      ctx.setTextAlign('center');
-
-      const formatTime = (ts: number) => {
-        const d = new Date(ts);
-        return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
-      };
-
-      const startTimeLabel = Math.ceil(startTimeOnScreen / 15000) * 15000;
-      for (let t = startTimeLabel; t <= rightEdgeTime; t += 15000) {
-        const xPos = getX(t);
-        if (xPos >= 0 && xPos <= w) {
-          const timeStr = formatTime(t);
-          ctx.setTextBaseline('bottom');
-          ctx.fillText(timeStr, xPos, h);
-        }
-      }
-      ctx.setTextAlign('left');
-    }
-
-    const drawAreaChart = (
-      list: number[],
-      startY: number,
-      height: number,
-      maxVal: number,
-      color: string,
-      gradientStart: string,
-      gradientEnd: string,
-    ) => {
-      const bottomY = startY + height;
-      if (list.length === 0) return;
-
-      const getValY = (val: number) =>
-        startY + (height - (val / maxVal) * height);
-
-      // 1. 准备渐变
-      const gradient = ctx.createLinearGradient(0, startY, 0, bottomY);
-      gradient.addColorStop(0, gradientStart);
-      gradient.addColorStop(1, gradientEnd);
-      ctx.setFillStyle(gradient);
-
-      // 2. 绘制填充面积
-      ctx.beginPath();
-      ctx.setLineDash([], 0);
-
-      const x0 = getX(timeList[0]);
-      const y0 = getValY(list[0]);
-      ctx.moveTo(x0, bottomY);
-      ctx.lineTo(x0, y0);
-
-      let lastY = y0;
-      for (let i = 1; i < list.length; i++) {
-        const x = getX(timeList[i]);
-        lastY = getValY(list[i]);
-        ctx.lineTo(x, lastY);
-      }
-
-      // 延伸到右侧边缘
-      ctx.lineTo(w, lastY);
-      ctx.lineTo(w, bottomY);
-      ctx.closePath();
-      ctx.fill();
-
-      // 3. 绘制顶部线条
-      ctx.beginPath();
-      ctx.setLineWidth(2);
-      ctx.setStrokeStyle(color);
-      ctx.moveTo(x0, y0);
-      for (let i = 1; i < list.length; i++) {
-        const x = getX(timeList[i]);
-        ctx.lineTo(x, getValY(list[i]));
-      }
-      ctx.lineTo(w, lastY);
-      ctx.stroke();
-    };
-
-    if (config.showCpu.value) {
-      drawAreaChart(
-        cList.value,
-        cpuY,
-        chartHeight,
-        100,
-        '#9254de',
-        'rgba(146, 84, 222, 0.5)',
-        'rgba(146, 84, 222, 0.05)',
-      );
-    }
-
-    if (config.showMemory.value) {
-      drawAreaChart(
-        mList.value,
-        memY,
-        chartHeight,
-        targetMemScale,
-        '#409eff',
-        'rgba(64, 158, 255, 0.5)',
-        'rgba(64, 158, 255, 0.05)',
-      );
-    }
-
-    if (config.showFps.value) {
-      const currentFps = fList.value[fList.value.length - 1] || 0;
-      let colorStr = '#f56c6c';
-      let gradStart = 'rgba(245, 108, 108, 0.5)';
-      let gradEnd = 'rgba(245, 108, 108, 0.05)';
-
-      if (currentFps >= 50) {
-        colorStr = '#67c23a';
-        gradStart = 'rgba(103, 194, 58, 0.5)';
-        gradEnd = 'rgba(103, 194, 58, 0.05)';
-      } else if (currentFps >= 30) {
-        colorStr = '#e6a23c';
-        gradStart = 'rgba(230, 162, 60, 0.5)';
-        gradEnd = 'rgba(230, 162, 60, 0.05)';
-      }
-
-      drawAreaChart(
-        fList.value,
-        fpsY,
-        chartHeight,
-        currentScale.value,
-        colorStr,
-        gradStart,
-        gradEnd,
-      );
-    }
-
-    ctx.draw();
-  }
-
-  return {
-    chartBgColor,
-    canvasWidth,
-    initCanvas,
-    startRenderLoop,
-    stopRenderLoop,
-    resetCanvas,
-  };
-}
+import { ref, computed, nextTick } from 'vue';
+import { raf, caf } from '../../../../../utils';
+
+export function usePerformanceChart(opts: {
+  theme: any;
+  isDark: any;
+  instance: any;
+  canvasIdFn: () => string;
+  stepSize: number;
+  data: any; // from usePerformanceData
+  config: {
+    showFps: any;
+    showCpu: any;
+    showMemory: any;
+  };
+  props: any;
+}) {
+  const canvasWidth = ref(0);
+  const canvasHeight = ref(0);
+  let canvasCtx: UniApp.CanvasContext | null = null;
+  let renderTimer: number | null = null;
+  // 使用标志变量控制渲染循环，确保在 Android 平台能正确停止
+  let isRunning = false;
+
+  // Colors
+  const textColor = computed(() => {
+    if (opts.theme.value === 'eye') return '#586e75';
+    return opts.isDark.value ? '#ffffff' : '#000000';
+  });
+  const chartBgColor = computed(() => {
+    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.05)';
+    return opts.isDark.value
+      ? 'rgba(255, 255, 255, 0.08)'
+      : 'rgba(0, 0, 0, 0.05)';
+  });
+  const mainLineColor = computed(() => {
+    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.3)';
+    return opts.isDark.value
+      ? 'rgba(255, 255, 255, 0.4)'
+      : 'rgba(0, 0, 0, 0.2)';
+  });
+  const subLineColor = computed(() => {
+    if (opts.theme.value === 'eye') return 'rgba(88, 110, 117, 0.1)';
+    return opts.isDark.value
+      ? 'rgba(255, 255, 255, 0.15)'
+      : 'rgba(0, 0, 0, 0.08)';
+  });
+
+  function initCanvas(onReady?: () => void) {
+    const canvasId = opts.canvasIdFn();
+    canvasCtx = uni.createCanvasContext(canvasId, opts.instance?.proxy);
+
+    const queryCanvas = (retryCount = 0) => {
+      uni
+        .createSelectorQuery()
+        .in(opts.instance?.proxy)
+        .select(`#${canvasId}`)
+        .boundingClientRect((rect) => {
+          const r = rect as any;
+          if (r && r.width > 0 && r.height > 0) {
+            canvasWidth.value = r.width;
+            canvasHeight.value = r.height;
+
+            // Initialize data if needed (call initDate from usePerformanceData)
+            const points = Math.ceil(canvasWidth.value / opts.stepSize) + 4;
+            opts.data.initData(points);
+
+            if (onReady) onReady();
+          } else {
+            // Android 平台在二次打开时可能需要多一点时间才能获取到正确的宽高
+            // 增加重试机制：每 50ms 重试一次，最多重试 10 次 (500ms)
+            if (retryCount < 10) {
+              setTimeout(() => {
+                queryCanvas(retryCount + 1);
+              }, 50);
+            } else {
+              console.warn(
+                `[UniDevTool] Failed to get canvas rect for ${canvasId}`,
+              );
+            }
+          }
+        })
+        .exec();
+    };
+
+    nextTick(() => {
+      // 首次尝试稍微延迟一点，避开极其短暂的中间状态
+      setTimeout(() => queryCanvas(), 50);
+    });
+  }
+
+  function startRenderLoop() {
+    // 避免重复启动
+    if (isRunning) return;
+    isRunning = true;
+
+    const render = () => {
+      // 检查标志位，如果已停止则不再继续
+      if (!isRunning) return;
+      drawChart();
+      renderTimer = raf(render);
+    };
+    render();
+  }
+
+  function stopRenderLoop() {
+    isRunning = false;
+    if (renderTimer) {
+      caf(renderTimer);
+      renderTimer = null;
+    }
+  }
+
+  function resetCanvas() {
+    stopRenderLoop();
+    canvasCtx = null;
+    canvasWidth.value = 0;
+    canvasHeight.value = 0;
+  }
+
+  function drawChart() {
+    if (!canvasCtx || !canvasWidth.value || !canvasHeight.value) return;
+
+    const ctx = canvasCtx;
+    const w = canvasWidth.value;
+    const h = canvasHeight.value;
+    const bottomPadding = 12;
+    const drawH = h - bottomPadding;
+
+    // Data aliases
+    const {
+      fpsHistory: fList,
+      cpuHistory: cList,
+      memoryHistory: mList,
+      timeHistory: tList,
+      displayMaxScale: currentScale,
+    } = opts.data;
+
+    // Props aliases
+    const config = opts.config;
+    const props = opts.props;
+
+    // 计算平滑偏移量
+    const now = Date.now();
+
+    // 强制使用当前时间作为最右侧锚点
+    // 这样数据永远不会往右移动，只会随着时间推移自然向左滚动
+    const rightEdgeTime = now;
+
+    const getX = (ts: number) => {
+      if (!ts) return -100; // 兜底处理无效数据
+      return w - ((rightEdgeTime - ts) / 1000) * opts.stepSize;
+    };
+
+    const activeMetrics = [
+      { key: 'cpu', show: config.showCpu.value },
+      { key: 'memory', show: config.showMemory.value },
+      { key: 'fps', show: config.showFps.value },
+    ].filter((m) => m.show);
+
+    const count = activeMetrics.length;
+    const isSplit = count > 1;
+    const chartHeight = count > 0 ? drawH / count : drawH;
+
+    let cpuY = 0;
+    let memY = 0;
+    let fpsY = 0;
+
+    activeMetrics.forEach((m, i) => {
+      if (m.key === 'cpu') cpuY = i * chartHeight;
+      if (m.key === 'memory') memY = i * chartHeight;
+      if (m.key === 'fps') fpsY = i * chartHeight;
+    });
+
+    // 1. 绘制背景网格
+    const maxFps = Math.max(...fList.value, 0);
+    let targetScale = 60;
+    if (maxFps > 144) targetScale = 240;
+    else if (maxFps > 120) targetScale = 144;
+    else if (maxFps > 90) targetScale = 120;
+
+    const getStandardPoints = (scale: number) => {
+      return [0, 30, 60, 100, 144, 240].filter(
+        (p) => p <= Math.max(scale, currentScale.value),
+      );
+    };
+
+    ctx.setLineWidth(1);
+    ctx.setFontSize(props.mode === 'widget' ? 10 : 12);
+
+    // --- FPS ---
+    if (config.showFps.value) {
+      const fpsPoints = getStandardPoints(targetScale);
+      fpsPoints.forEach((p) => {
+        const yPos =
+          fpsY + (chartHeight - (p / currentScale.value) * chartHeight);
+        if (yPos < fpsY - 5 || yPos > fpsY + chartHeight + 5) return;
+
+        ctx.beginPath();
+        ctx.setStrokeStyle(
+          p === 0 || p === 60 || p === targetScale
+            ? mainLineColor.value
+            : subLineColor.value,
+        );
+        ctx.setLineDash(
+          p === 0 || p === 60 || p === targetScale ? [] : [2, 4],
+          0,
+        );
+        ctx.moveTo(0, yPos);
+        ctx.lineTo(w, yPos);
+        ctx.stroke();
+
+        ctx.setFillStyle(textColor.value);
+        if (p !== 0 && (p === 60 || p === targetScale)) {
+          ctx.setTextBaseline(p === targetScale ? 'top' : 'bottom');
+          ctx.fillText(`${p}${isSplit ? ' FPS' : ''}`, 0, yPos);
+        }
+      });
+    }
+
+    // --- CPU ---
+    if (config.showCpu.value) {
+      const cpuPoints = [0, 50, 100];
+      cpuPoints.forEach((p) => {
+        const yPos = cpuY + (chartHeight - (p / 100) * chartHeight);
+        if (yPos < cpuY - 5 || yPos > cpuY + chartHeight + 5) return;
+
+        if (!isSplit || p !== 0) {
+          ctx.beginPath();
+          ctx.setStrokeStyle(
+            p === 0 || p === 100 ? mainLineColor.value : subLineColor.value,
+          );
+          ctx.setLineDash(p === 0 || p === 100 ? [] : [2, 4], 0);
+          ctx.moveTo(0, yPos);
+          ctx.lineTo(w, yPos);
+          ctx.stroke();
+        }
+
+        ctx.setFillStyle(textColor.value);
+        if (p !== 0) {
+          ctx.setTextBaseline(p === 100 ? 'top' : 'middle');
+          ctx.fillText(`${p}${isSplit ? '%' : ''}`, 0, yPos);
+        }
+      });
+    }
+
+    // --- Memory ---
+    const maxMem = Math.max(...mList.value, 100);
+    let targetMemScale = Math.ceil(maxMem / 100) * 100;
+    if (targetMemScale === 0) targetMemScale = 100;
+
+    if (config.showMemory.value) {
+      const memPoints = [0, targetMemScale / 2, targetMemScale];
+      memPoints.forEach((p) => {
+        const yPos = memY + (chartHeight - (p / targetMemScale) * chartHeight);
+        if (yPos < memY - 5 || yPos > memY + chartHeight + 5) return;
+
+        if (!isSplit || p !== 0) {
+          ctx.beginPath();
+          ctx.setStrokeStyle(
+            p === 0 || p === targetMemScale
+              ? mainLineColor.value
+              : subLineColor.value,
+          );
+          ctx.setLineDash(p === 0 || p === targetMemScale ? [] : [2, 4], 0);
+          ctx.moveTo(0, yPos);
+          ctx.lineTo(w, yPos);
+          ctx.stroke();
+        }
+
+        ctx.setFillStyle(textColor.value);
+        if (p !== 0) {
+          ctx.setTextBaseline(p === targetMemScale ? 'top' : 'middle');
+          ctx.fillText(`${p.toFixed(0)}${isSplit ? 'M' : ''}`, 0, yPos);
+        }
+      });
+    }
+
+    // Split Lines
+    if (isSplit) {
+      ctx.setStrokeStyle(mainLineColor.value);
+      ctx.setLineDash([], 0);
+      for (let i = 1; i < count; i++) {
+        const y = chartHeight * i;
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(w, y);
+        ctx.stroke();
+      }
+    }
+
+    // Vertical Grid & Time Layout
+    const timeList = tList.value;
+
+    // Vertical Grid - 基于时间绘制，不再基于数组索引，保证网格绝对均匀
+    ctx.setStrokeStyle(subLineColor.value);
+    ctx.setLineDash([2, 4], 0);
+
+    const startTimeOnScreen = rightEdgeTime - (w / opts.stepSize) * 1000;
+    const startGridSec = Math.ceil(startTimeOnScreen / 5000) * 5000;
+
+    for (let t = startGridSec; t <= rightEdgeTime; t += 5000) {
+      const xPos = getX(t);
+      if (xPos >= 0 && xPos <= w) {
+        ctx.beginPath();
+        ctx.moveTo(xPos, 0);
+        ctx.lineTo(xPos, drawH);
+        ctx.stroke();
+      }
+    }
+
+    // Time Axis
+    if (timeList.length > 0) {
+      ctx.setLineDash([], 0);
+      ctx.setStrokeStyle(mainLineColor.value);
+      ctx.beginPath();
+      ctx.moveTo(0, drawH);
+      ctx.lineTo(w, drawH);
+      ctx.stroke();
+
+      ctx.setFillStyle(textColor.value);
+      ctx.setFontSize(10);
+      ctx.setTextAlign('center');
+
+      const formatTime = (ts: number) => {
+        const d = new Date(ts);
+        return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
+      };
+
+      const startTimeLabel = Math.ceil(startTimeOnScreen / 15000) * 15000;
+      for (let t = startTimeLabel; t <= rightEdgeTime; t += 15000) {
+        const xPos = getX(t);
+        if (xPos >= 0 && xPos <= w) {
+          const timeStr = formatTime(t);
+          ctx.setTextBaseline('bottom');
+          ctx.fillText(timeStr, xPos, h);
+        }
+      }
+      ctx.setTextAlign('left');
+    }
+
+    const drawAreaChart = (
+      list: number[],
+      startY: number,
+      height: number,
+      maxVal: number,
+      color: string,
+      gradientStart: string,
+      gradientEnd: string,
+    ) => {
+      const bottomY = startY + height;
+      if (list.length === 0) return;
+
+      const getValY = (val: number) =>
+        startY + (height - (val / maxVal) * height);
+
+      // 1. 准备渐变
+      const gradient = ctx.createLinearGradient(0, startY, 0, bottomY);
+      gradient.addColorStop(0, gradientStart);
+      gradient.addColorStop(1, gradientEnd);
+      ctx.setFillStyle(gradient);
+
+      // 2. 绘制填充面积
+      ctx.beginPath();
+      ctx.setLineDash([], 0);
+
+      const x0 = getX(timeList[0]);
+      const y0 = getValY(list[0]);
+      ctx.moveTo(x0, bottomY);
+      ctx.lineTo(x0, y0);
+
+      let lastY = y0;
+      for (let i = 1; i < list.length; i++) {
+        const x = getX(timeList[i]);
+        lastY = getValY(list[i]);
+        ctx.lineTo(x, lastY);
+      }
+
+      // 延伸到右侧边缘
+      ctx.lineTo(w, lastY);
+      ctx.lineTo(w, bottomY);
+      ctx.closePath();
+      ctx.fill();
+
+      // 3. 绘制顶部线条
+      ctx.beginPath();
+      ctx.setLineWidth(2);
+      ctx.setStrokeStyle(color);
+      ctx.moveTo(x0, y0);
+      for (let i = 1; i < list.length; i++) {
+        const x = getX(timeList[i]);
+        ctx.lineTo(x, getValY(list[i]));
+      }
+      ctx.lineTo(w, lastY);
+      ctx.stroke();
+    };
+
+    if (config.showCpu.value) {
+      drawAreaChart(
+        cList.value,
+        cpuY,
+        chartHeight,
+        100,
+        '#9254de',
+        'rgba(146, 84, 222, 0.5)',
+        'rgba(146, 84, 222, 0.05)',
+      );
+    }
+
+    if (config.showMemory.value) {
+      drawAreaChart(
+        mList.value,
+        memY,
+        chartHeight,
+        targetMemScale,
+        '#409eff',
+        'rgba(64, 158, 255, 0.5)',
+        'rgba(64, 158, 255, 0.05)',
+      );
+    }
+
+    if (config.showFps.value) {
+      const currentFps = fList.value[fList.value.length - 1] || 0;
+      let colorStr = '#f56c6c';
+      let gradStart = 'rgba(245, 108, 108, 0.5)';
+      let gradEnd = 'rgba(245, 108, 108, 0.05)';
+
+      if (currentFps >= 50) {
+        colorStr = '#67c23a';
+        gradStart = 'rgba(103, 194, 58, 0.5)';
+        gradEnd = 'rgba(103, 194, 58, 0.05)';
+      } else if (currentFps >= 30) {
+        colorStr = '#e6a23c';
+        gradStart = 'rgba(230, 162, 60, 0.5)';
+        gradEnd = 'rgba(230, 162, 60, 0.05)';
+      }
+
+      drawAreaChart(
+        fList.value,
+        fpsY,
+        chartHeight,
+        currentScale.value,
+        colorStr,
+        gradStart,
+        gradEnd,
+      );
+    }
+
+    ctx.draw();
+  }
+
+  return {
+    chartBgColor,
+    canvasWidth,
+    initCanvas,
+    startRenderLoop,
+    stopRenderLoop,
+    resetCanvas,
+  };
+}