vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/Performance/index.vue

@@ -0,0 +1,495 @@
+<template>
+  <view class="performance-content">
+    <view class="performance-control">
+      <DevToolTitle>{{ t('performance.title') }}</DevToolTitle>
+    </view>
+    <view class="performance-item">
+      <!-- 图表容器 -->
+      <canvas
+        canvas-id="fpsChartTab"
+        class="fps-chart-container"
+        :style="{ backgroundColor: chartBgColor }"
+        id="fpsChartTab"></canvas>
+      <PerformanceMetrics
+        :is-tab="true"
+        :fps="fps"
+        :cpuLoad="cpuLoad"
+        :memory="memory"
+        :showFps="showFps"
+        :showCpu="showCpu"
+        :showMemory="showMemory" />
+
+      <view class="performance-item-content">
+        <!-- 平台限制提示 -->
+        <view
+          class="performance-tips"
+          style="
+            color: #e6a23c;
+            background: rgb(230 162 60 / 10%);
+            padding: 8px;
+            border-radius: 4px;
+            margin-bottom: 12px;
+            font-size: 11px;
+          "
+          v-if="!isH5">
+          {{ t('performance.platformTip') }}
+        </view>
+        <DevToolTitle>{{ t('performance.settings') }}</DevToolTitle>
+        <view class="performance-row">
+          <view>{{ t('performance.enable') }}</view>
+          <switch
+            :checked="performanceMonitorEnabled"
+            @change="toggleMonitor"
+            :color="themeColor"
+            style="transform: scale(0.7)" />
+        </view>
+        <view class="performance-tips">
+          {{ t('performance.enableTip') }}
+        </view>
+        <view class="performance-row">
+          <view>{{ t('performance.widget') }}</view>
+          <switch
+            :disabled="!performanceMonitorEnabled"
+            :checked="performanceVisible"
+            @change="togglePerformanceVisible"
+            :color="themeColor"
+            style="transform: scale(0.7)" />
+        </view>
+        <view class="performance-tips">
+          {{ t('performance.widgetTip') }}
+        </view>
+        <view class="performance-row">
+          <view>{{ t('performance.fps') }}</view>
+          <switch
+            :disabled="!performanceMonitorEnabled"
+            :checked="showFps"
+            @change="toggleFps"
+            :color="themeColor"
+            style="transform: scale(0.7)" />
+        </view>
+        <view class="performance-tips">
+          {{ t('performance.fpsTip') }}
+        </view>
+        <view class="performance-row">
+          <view>{{ t('performance.cpu') }}</view>
+          <switch
+            :disabled="!performanceMonitorEnabled"
+            :checked="showCpu"
+            @change="toggleCpu"
+            :color="themeColor"
+            style="transform: scale(0.7)" />
+        </view>
+        <view class="performance-tips">
+          {{ t('performance.cpuTip') }}
+        </view>
+        <view class="performance-row">
+          <view>{{ t('performance.memory') }}</view>
+          <switch
+            :disabled="!performanceMonitorEnabled"
+            :checked="showMemory"
+            @change="toggleMemory"
+            :color="themeColor"
+            style="transform: scale(0.7)" />
+        </view>
+        <view class="performance-tips">
+          {{ t('performance.memoryTip') }}
+        </view>
+
+        <!-- CPU Profile / Long Tasks List -->
+        <view
+          class="performance-item-content"
+          style="margin-top: 16px"
+          v-if="longTasksHistory.length > 0">
+          <DevToolTitle>{{ t('performance.longTaskTitle') }}</DevToolTitle>
+          <view class="performance-tips">
+            {{ t('performance.longTaskTip') }}
+          </view>
+          <view class="long-tasks-list">
+            <view
+              v-for="(task, index) in longTasksHistory.slice().reverse()"
+              :key="index"
+              class="long-task-item">
+              <view class="task-info">
+                <text
+                  class="task-type"
+                  :class="`type-${task.type?.toLowerCase()}`">
+                  {{
+                    task.type === 'Logic'
+                      ? t('performance.logic')
+                      : t('performance.ui')
+                  }}
+                </text>
+                <text class="task-time">{{ formatTaskTime(task.ts) }}</text>
+              </view>
+              <view
+                class="task-duration"
+                :class="getDurationClass(task.duration)">
+                {{ task.duration }}ms
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
+import { getDevToolInfo, setDevToolInfo } from '../../modules/devToolInfo';
+import PerformanceMetrics from './modules/PerformanceMetrics.vue';
+import { usePerformanceData } from './modules/usePerformanceData';
+import { usePerformanceChart } from './modules/usePerformanceChart';
+import { MSG_TYPE, DEV_CORE_MESSAGE } from '../../const';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import { useI18n } from '../../i18n';
+import { getThemeMainColor } from '../styles/theme';
+const { t } = useI18n();
+const themeColor = computed(() => getThemeMainColor(props.theme));
+
+// 无需声明 renderScript
+
+const props = withDefaults(
+  defineProps<{
+    mode?: 'tab';
+    zIndex?: number;
+    customStyle?: Record<string, any>;
+    contentHeight?: number;
+    theme?: string;
+  }>(),
+  {
+    zIndex: 1000,
+    theme: 'light',
+  },
+);
+
+const showFps = ref(true);
+const showCpu = ref(true);
+const showMemory = ref(true);
+const performanceVisible = ref(false);
+const isH5 = ref(false);
+
+function loadSettings() {
+  // #ifdef H5
+  isH5.value = true;
+  // #endif
+
+  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;
+  }
+  if (info && info.performanceVisible !== undefined) {
+    performanceVisible.value = info.performanceVisible;
+  }
+}
+
+function saveSettings() {
+  setDevToolInfo({
+    performanceSettings: {
+      showFps: showFps.value,
+      showCpu: showCpu.value,
+      showMemory: showMemory.value,
+      enableMonitor: performanceMonitorEnabled.value,
+    },
+    performanceVisible: performanceVisible.value,
+  });
+}
+
+function toggleFps(e: any) {
+  showFps.value = e.detail.value;
+  saveSettings();
+}
+
+function toggleCpu(e: any) {
+  showCpu.value = e.detail.value;
+  saveSettings();
+}
+
+function toggleMemory(e: any) {
+  showMemory.value = e.detail.value;
+  saveSettings();
+}
+
+function togglePerformanceVisible(e: any) {
+  performanceVisible.value = e.detail.value;
+
+  // 如果关闭悬浮窗，同时关闭监测功能
+  if (!performanceVisible.value && performanceMonitorEnabled.value) {
+    performanceMonitorEnabled.value = false;
+    performanceData.stopHeartbeat();
+    performanceChart.stopRenderLoop();
+    // 通知 PerformanceWidget 停止监测
+    uni.$emit(MSG_TYPE.PERF_MONITOR, false);
+  }
+
+  saveSettings();
+  // 通知 DevTool 组件更新性能弹窗可见性
+  uni.$emit(DEV_CORE_MESSAGE, {
+    type: MSG_TYPE.PERF_VISIBLE,
+    data: performanceVisible.value,
+  });
+}
+
+function toggleMonitor(e: any) {
+  performanceMonitorEnabled.value = e.detail.value;
+  if (!performanceMonitorEnabled.value) {
+    performanceVisible.value = false;
+  }
+  saveSettings();
+  uni.$emit(MSG_TYPE.PERF_MONITOR, performanceMonitorEnabled.value);
+  if (performanceMonitorEnabled.value) {
+    performanceData.initData(
+      Math.ceil(performanceChart.canvasWidth.value / stepSize) + 4,
+    );
+    performanceData.startHeartbeat();
+    performanceChart.startRenderLoop();
+    uni.$emit(DEV_CORE_MESSAGE, {
+      type: MSG_TYPE.PERF_VISIBLE,
+      data: performanceVisible.value,
+    });
+  } else {
+    performanceData.stopHeartbeat();
+    performanceChart.stopRenderLoop();
+    uni.$emit(DEV_CORE_MESSAGE, {
+      type: MSG_TYPE.PERF_VISIBLE,
+      data: false,
+    });
+  }
+}
+
+// 根据主题计算颜色
+const isDark = computed(() => {
+  return props.theme === 'dark';
+});
+const chartBgColor = computed(() =>
+  isDark.value ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)',
+);
+
+const instance = getCurrentInstance();
+const stepSize = 5;
+
+// Hooks
+const performanceData = usePerformanceData();
+const { fps, cpuLoad, memory, performanceMonitorEnabled, longTasksHistory } =
+  performanceData;
+
+const performanceChart = usePerformanceChart({
+  theme: props.theme,
+  isDark,
+  instance,
+  canvasIdFn: () => 'fpsChartTab',
+  stepSize,
+  data: performanceData,
+  config: {
+    showFps,
+    showCpu,
+    showMemory,
+  },
+  props: { mode: 'tab' },
+});
+
+function formatTaskTime(ts: number) {
+  const date = new Date(ts);
+  return `${date.getHours().toString().padStart(2, '0')}:${date
+    .getMinutes()
+    .toString()
+    .padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}.${date
+    .getMilliseconds()
+    .toString()
+    .padStart(3, '0')}`;
+}
+
+function getDurationClass(duration: number) {
+  if (duration > 200) return 'task-danger';
+  if (duration > 100) return 'task-warning';
+  return '';
+}
+
+onMounted(() => {
+  loadSettings();
+
+  performanceChart.initCanvas(() => {
+    performanceData.initData(
+      Math.ceil(performanceChart.canvasWidth.value / stepSize) + 4,
+    );
+    // 只有在监控开启且窗口可见时，才启动 Tab 的渲染循环
+    if (performanceMonitorEnabled.value) {
+      performanceChart.startRenderLoop();
+    }
+  });
+
+  // 如果监测状态是开启的，恢复执行
+  if (performanceMonitorEnabled.value) {
+    performanceData.startHeartbeat();
+    // @ts-ignore
+    if (performanceData.startLogicMonitor) {
+      // @ts-ignore
+      performanceData.startLogicMonitor();
+    }
+  }
+
+  // 监听核心模块消息
+  uni.$on(DEV_CORE_MESSAGE, handleCoreMessage);
+  // 监听监测状态变化（来自 PerformanceWidget）
+  uni.$on(MSG_TYPE.PERF_MONITOR, onMonitorStateChange);
+});
+
+// 监测状态变化处理（来自 PerformanceWidget 的通知）
+function onMonitorStateChange(enabled: boolean) {
+  performanceMonitorEnabled.value = enabled;
+  if (!enabled) {
+    performanceData.stopHeartbeat();
+    performanceChart.stopRenderLoop();
+  } else {
+    // 补全开启逻辑
+    performanceData.startHeartbeat();
+    // 只有主窗口可见时才恢复绘制
+    const { devToolWindowVisible = false } = getDevToolInfo();
+    if (devToolWindowVisible) {
+      performanceChart.startRenderLoop();
+    }
+  }
+}
+
+// 处理核心模块消息
+function handleCoreMessage(msg: string | { type: string; data: any }) {
+  let type: string | undefined;
+  let data: any;
+  try {
+    const payload = typeof msg === 'string' ? JSON.parse(msg) : msg;
+    type = payload.type;
+    data = payload.data;
+  } catch (_e) {
+    return;
+  }
+
+  if (type === MSG_TYPE.WINDOW_VISIBLE) {
+    onWindowVisibleChange(data);
+  }
+}
+
+// 窗口可见性变化处理
+function onWindowVisibleChange(visible: boolean) {
+  if (!visible) {
+    // 窗口关闭时，仅停止 Tab 页面的渲染绘制，节省性能
+    performanceChart.stopRenderLoop();
+    // 逻辑层监控和心跳不再随窗口关闭而停止（只要 performanceMonitorEnabled 为 true）
+  } else {
+    // 窗口打开时，如果监控开启了，恢复 Tab 的渲染绘制
+    if (performanceMonitorEnabled.value) {
+      performanceChart.startRenderLoop();
+    }
+  }
+}
+
+onUnmounted(() => {
+  performanceChart.resetCanvas();
+  uni.$off(DEV_CORE_MESSAGE, handleCoreMessage);
+  uni.$off(MSG_TYPE.PERF_MONITOR, onMonitorStateChange);
+});
+</script>
+
+<style scoped>
+.performance-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.performance-control {
+  padding: 0 16px;
+}
+
+.performance-item {
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.performance-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 18px;
+}
+
+.fps-chart-container {
+  width: 100%;
+  flex: 1;
+  min-height: 50px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 300px;
+}
+
+.performance-tips {
+  color: #616161;
+  font-size: var(--dev-tool-tips-font-size);
+  margin-bottom: 8px;
+}
+
+.long-tasks-list {
+  background: var(--dev-tool-bg2-color);
+  border-radius: 4px;
+  padding: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.long-task-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  font-family: monospace;
+}
+
+.long-task-item:last-child {
+  border-bottom: none;
+}
+
+.task-info {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+}
+
+.task-type {
+  font-size: 10px;
+  padding: 0 4px;
+  border-radius: 2px;
+  color: #fff;
+  background: #909399;
+  margin-right: 6px;
+  line-height: 1.4;
+}
+
+.type-logic {
+  background: #9254de;
+}
+
+.type-ui {
+  background: #67c23a;
+}
+
+.task-time {
+  color: #888;
+}
+
+.task-duration {
+  font-weight: bold;
+}
+
+.task-warning {
+  color: #e6a23c;
+}
+
+.task-danger {
+  color: #f56c6c;
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+  <view
+    class="performance-metrics"
+    :class="{ 'performance-metrics-tab': isTab }">
+    <view v-if="showCpu" class="metric-item">
+      <view class="metric-value" :class="cpuStatusClass">{{ cpuLoad }}%</view>
+      <view class="metric-label">
+        <view class="legend-dot bg-cpu"></view>
+        CPU
+      </view>
+    </view>
+    <view v-if="showMemory" class="metric-item">
+      <view class="metric-value fps-memory">{{ memory }} MB</view>
+      <view class="metric-label">
+        <view class="legend-dot bg-memory"></view>
+        Memory
+      </view>
+    </view>
+    <view v-if="showFps" class="metric-item">
+      <view class="metric-value" :class="fpsStatusClass">{{ fps }}</view>
+      <view class="metric-label">
+        <view class="legend-dot" :class="fpsBgStatusClass"></view>
+        FPS
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  isTab: boolean;
+  fps: number;
+  cpuLoad: number;
+  memory: number;
+  showFps: boolean;
+  showCpu: boolean;
+  showMemory: boolean;
+}>();
+
+const fpsStatusClass = computed(() => {
+  if (props.fps >= 50) return 'fps-good';
+  if (props.fps >= 30) return 'fps-warning';
+  return 'fps-danger';
+});
+
+const cpuStatusClass = computed(() => {
+  if (props.cpuLoad <= 30) return 'fps-good';
+  if (props.cpuLoad <= 70) return 'fps-warning';
+  return 'fps-danger';
+});
+
+const fpsBgStatusClass = computed(() => {
+  if (props.fps >= 50) return 'bg-good';
+  if (props.fps >= 30) return 'bg-warning';
+  return 'bg-danger';
+});
+</script>
+
+<style scoped>
+.performance-metrics,
+.performance-metrics-tab {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 4px;
+}
+
+.performance-metrics-tab {
+  padding: 10px 0;
+}
+
+.metric-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.metric-label {
+  display: flex;
+  align-items: center;
+  color: #909399; /* Tab 模式默认 */
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+
+.performance-widget .metric-label {
+  color: #333; /* widget 模式下加深标签颜色，需由父组件透传样式或 global 样式控制，此处暂保留结构 */
+}
+
+/* Legend Dots */
+.legend-dot {
+  width: 24px;
+  height: 2px;
+  margin-right: 10px;
+  position: relative;
+  display: inline-block;
+  border-radius: 1px;
+  background-color: currentColor;
+}
+
+.legend-dot::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  background-color: var(--dev-tool-bg2-color, #fff);
+}
+
+.bg-cpu {
+  color: #9254de !important;
+}
+
+.bg-good {
+  color: #67c23a !important;
+}
+
+.bg-warning {
+  color: #e6a23c !important;
+}
+
+.bg-danger {
+  color: #f56c6c !important;
+}
+
+.bg-memory {
+  color: #409eff !important;
+}
+
+/* Colors */
+.fps-good {
+  color: #67c23a;
+}
+
+.fps-warning {
+  color: #e6a23c;
+}
+
+.fps-danger {
+  color: #f56c6c;
+}
+
+.fps-memory {
+  color: #409eff;
+}
+</style>