vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/Performance/modules/PerformanceWidget.vue

@@ -0,0 +1,249 @@
+<template>
+  <DraggableContainer
+    :width="width"
+    :height="height"
+    :x="x"
+    :y="y"
+    :zIndex="zIndex"
+    :resizable="true"
+    :customStyle="customStyle"
+    @update:x="(val) => (x = val)"
+    @update:y="(val) => (y = val)"
+    @update:width="(val) => (width = val)"
+    @update:height="(val) => (height = val)"
+    @change="onDebounceChange">
+    <view class="performance-monitor performance-widget">
+      <CircularButton
+        text="×"
+        class="close-btn"
+        @click.stop="onClose"
+        @touchstart.stop
+        @mousedown.stop />
+      <!-- 图表容器 -->
+      <canvas
+        canvas-id="fpsChartWidget"
+        class="fps-chart-container"
+        :style="{ backgroundColor: chartBgColor }"
+        id="fpsChartWidget"></canvas>
+      <PerformanceMetrics
+        :is-tab="false"
+        :fps="fps"
+        :cpuLoad="cpuLoad"
+        :memory="memory"
+        :showFps="showFps"
+        :showCpu="showCpu"
+        :showMemory="showMemory" />
+    </view>
+  </DraggableContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, getCurrentInstance, ref } from 'vue';
+import DraggableContainer from '../../DraggableContainer/index.vue';
+import PerformanceMetrics from './PerformanceMetrics.vue';
+import { usePerformanceData } from './usePerformanceData';
+import { usePerformanceChart } from './usePerformanceChart';
+import CircularButton from '../../CircularButton/index.vue';
+import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../../const';
+import { getDevToolInfo, setDevToolInfo } from '../../../modules/devToolInfo';
+import { debounce } from '../../../utils';
+
+const props = withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+    zIndex?: number;
+    customStyle?: Record<string, any>;
+    theme?: string;
+  }>(),
+  {
+    width: '240px',
+    height: '180px',
+    zIndex: 1000,
+    theme: 'light',
+  },
+);
+
+// 根据主题计算颜色
+const isDark = computed(() => props.theme === 'dark');
+const isEye = computed(() => props.theme === 'eye');
+
+const chartBgColor = computed(() => {
+  if (isDark.value) return 'rgba(255, 255, 255, 0.08)';
+  if (isEye.value) return 'rgba(101, 123, 131, 0.05)'; // Muted blue-grey for eye mode
+  return 'rgba(0, 0, 0, 0.05)';
+});
+
+const instance = getCurrentInstance();
+const stepSize = 5;
+
+// Hooks
+const performanceData = usePerformanceData();
+const { fps, cpuLoad, memory, performanceMonitorEnabled } = performanceData;
+
+const showFps = ref(true);
+const showCpu = ref(true);
+const showMemory = ref(true);
+const x = ref(10);
+const y = ref(200);
+const width = ref(parseInt(props.width) || 240);
+const height = ref(parseInt(props.height) || 180);
+
+function loadSettings() {
+  const info = getDevToolInfo();
+  if (info && info.performanceSettings) {
+    showFps.value = info.performanceSettings.showFps ?? true;
+    showCpu.value = info.performanceSettings.showCpu ?? true;
+    showMemory.value = info.performanceSettings.showMemory ?? true;
+    performanceMonitorEnabled.value =
+      info.performanceSettings.enableMonitor ?? false;
+  }
+}
+
+const performanceChart = usePerformanceChart({
+  theme: computed(() => props.theme),
+  isDark,
+  instance,
+  canvasIdFn: () => 'fpsChartWidget',
+  stepSize,
+  data: performanceData,
+  config: {
+    showFps,
+    showCpu,
+    showMemory,
+  },
+  props: { mode: 'widget' },
+});
+
+const onDebounceChange = debounce(
+  (detail: { x: number; y: number; width: number; height: number }) => {
+    setDevToolInfo({
+      performancePosition: {
+        left: detail.x,
+        top: detail.y,
+        width: detail.width,
+        height: detail.height,
+      },
+    });
+
+    // 调整大小时重新初始化画布
+    performanceChart.initCanvas(() => {
+      performanceData.initData(
+        Math.ceil(performanceChart.canvasWidth.value / stepSize) + 4,
+      );
+      if (performanceMonitorEnabled.value) {
+        performanceChart.startRenderLoop();
+      }
+    });
+  },
+  500,
+);
+
+const onClose = () => {
+  // 关闭悬浮窗时，同时关闭监测功能
+  performanceMonitorEnabled.value = false;
+  performanceData.stopHeartbeat();
+  performanceChart.stopRenderLoop();
+
+  // 更新本地存储
+  setDevToolInfo({
+    performanceVisible: false,
+    performanceSettings: {
+      showFps: showFps.value,
+      showCpu: showCpu.value,
+      showMemory: showMemory.value,
+      enableMonitor: false, // 关闭监测
+    },
+  });
+
+  // 通知 DevTool 组件更新悬浮窗可见性
+  uni.$emit(DEV_CORE_MESSAGE, { type: MSG_TYPE.PERF_VISIBLE, data: false });
+  // 通知 Performance Tab 页面监测已关闭
+  uni.$emit(MSG_TYPE.PERF_MONITOR, false);
+};
+
+const onMonitorChange = (enabled: boolean) => {
+  performanceMonitorEnabled.value = enabled;
+  if (enabled) {
+    performanceData.initData(
+      Math.ceil(performanceChart.canvasWidth.value / stepSize) + 4,
+    );
+    performanceData.startHeartbeat();
+    performanceChart.startRenderLoop();
+  } else {
+    performanceData.stopHeartbeat();
+    performanceChart.stopRenderLoop();
+  }
+};
+
+onMounted(() => {
+  const info = getDevToolInfo();
+  if (info && info.performancePosition) {
+    x.value = info.performancePosition.left;
+    y.value = info.performancePosition.top;
+    if (info.performancePosition.width)
+      width.value = info.performancePosition.width;
+    if (info.performancePosition.height)
+      height.value = info.performancePosition.height;
+  }
+  loadSettings();
+
+  performanceChart.initCanvas(() => {
+    performanceData.initData(
+      Math.ceil(performanceChart.canvasWidth.value / stepSize) + 4,
+    );
+    if (performanceMonitorEnabled.value) {
+      performanceChart.startRenderLoop();
+    }
+  });
+
+  if (performanceMonitorEnabled.value) {
+    performanceData.startHeartbeat();
+  }
+
+  uni.$on(MSG_TYPE.PERF_MONITOR, onMonitorChange);
+});
+
+onUnmounted(() => {
+  performanceChart.resetCanvas();
+  uni.$off(MSG_TYPE.PERF_MONITOR, onMonitorChange);
+});
+</script>
+
+<style scoped>
+.performance-widget {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  background-color: var(--dev-tool-bg2-color, rgb(255 255 255 / 90%));
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  border-radius: 8px;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.fps-chart-container {
+  width: 100%;
+  flex: 1;
+  min-height: 40px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.close-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 10;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  line-height: 1;
+  background-color: var(--dev-tool-bg-color, rgb(255 255 255 / 80%));
+}
+</style>

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

@@ -0,0 +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,
+  };
+}