vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{Performance → DevTool/components/Performance}/index.vue

@@ -1,495 +1,498 @@
-<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>
+<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>