vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/CustomSwiper/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <view
+    class="custom-swiper"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+    @mouseleave="onMouseLeave">
+    <view class="custom-swiper-wrapper" :style="wrapperStyle">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true, // 开启虚拟节点，使组件标签不渲染，属性直接透传
+  },
+};
+</script>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = defineProps<{
+  modelValue: number;
+  itemCount: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void;
+  (e: 'change', value: number): void;
+}>();
+
+const touchStart = ref({ x: 0, y: 0 });
+
+const isDragging = ref(false);
+
+const wrapperStyle = computed(() => ({
+  transform: `translateX(-${props.modelValue * 100}%)`,
+}));
+
+// 统一处理滑动逻辑
+function handleSwipe(deltaX: number, deltaY: number) {
+  if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
+    if (deltaX > 0 && props.modelValue > 0) {
+      const next = props.modelValue - 1;
+      emit('update:modelValue', next);
+      emit('change', next);
+    } else if (deltaX < 0 && props.modelValue < props.itemCount - 1) {
+      const next = props.modelValue + 1;
+      emit('update:modelValue', next);
+      emit('change', next);
+    }
+  }
+}
+
+// 触摸事件处理
+function onTouchStart(e: TouchEvent) {
+  const touch = e.touches[0];
+  touchStart.value = { x: touch.clientX, y: touch.clientY };
+}
+
+function onTouchEnd(e: TouchEvent) {
+  const touch = e.changedTouches[0];
+  const deltaX = touch.clientX - touchStart.value.x;
+  const deltaY = touch.clientY - touchStart.value.y;
+  handleSwipe(deltaX, deltaY);
+}
+
+// 鼠标事件处理
+function onMouseDown(e: MouseEvent) {
+  isDragging.value = true;
+  touchStart.value = { x: e.clientX, y: e.clientY };
+}
+
+function onMouseUp(e: MouseEvent) {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+  const deltaX = e.clientX - touchStart.value.x;
+  const deltaY = e.clientY - touchStart.value.y;
+  handleSwipe(deltaX, deltaY);
+}
+
+function onMouseLeave() {
+  isDragging.value = false;
+}
+</script>
+
+<style scoped>
+.custom-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.custom-swiper-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+}
+</style>

package/dist/v3/DevTool/fps-collector.render.ts

@@ -0,0 +1,148 @@
+// @ts-nocheck
+/* global uni */
+import { MSG_TYPE } from '../../const';
+import { raf, caf } from '../../utils';
+
+export default {
+  data() {
+    return {
+      innerIsActive: true, // 默认设为 true，确保即便逻辑层同步失败也能运行
+      longTasks: [], // 缓存周期内的长任务
+    };
+  },
+  mounted() {
+    if (typeof uni !== 'undefined' && uni.$on) {
+      uni?.$on(MSG_TYPE.PERF_MONITOR, this.perfMonitor);
+    }
+
+    // 初始化 PerformanceObserver 监控长任务 (CPU Profile 核心)
+    if (typeof PerformanceObserver !== 'undefined') {
+      try {
+        this.observer = new PerformanceObserver((list) => {
+          list.getEntries().forEach((entry) => {
+            // 记录长任务：发生时间（转换为绝对时间戳）和 持续时间
+            this.longTasks.push({
+              ts: Date.now() - (performance.now() - entry.startTime),
+              duration: Math.round(entry.duration),
+              type: 'UI',
+            });
+          });
+        });
+        this.observer.observe({ entryTypes: ['longtask'] });
+      } catch (_e) {
+        console.warn('PerformanceObserver longtask not supported');
+      }
+    }
+  },
+  methods: {
+    perfMonitor(enabled) {
+      if (enabled) {
+        this.startFpsLoop();
+      } else {
+        this.stopFpsLoop();
+      }
+    },
+    receiveActive(newValue) {
+      this.innerIsActive = newValue;
+    },
+    startFpsLoop() {
+      // 兼容性计时方案：优先使用高精度性能计时，回退至基础 Date 计时
+      const getTime = () => {
+        if (typeof performance !== 'undefined' && performance.now) {
+          return performance.now();
+        }
+        return Date.now();
+      };
+
+      let lastTimestamp = getTime();
+      let startTime = lastTimestamp;
+      let frameCount = 0;
+      let totalJank = 0;
+      const idealDelta = 16.67;
+
+      const loop = () => {
+        const now = getTime();
+        const delta = Math.max(0, now - lastTimestamp);
+        lastTimestamp = now;
+
+        frameCount++;
+
+        // 判定卡顿 (Jank)
+        if (delta > 50) {
+          // 只要 delta 超过 100ms（或者 50ms），无论是否有 observer，都记录一个 UI Jank
+          // 这样可以确保在 observer 失效时依然有数据
+          if (delta > 100 || !this.observer) {
+            this.longTasks.push({
+              ts: Date.now(),
+              duration: Math.round(delta),
+              type: 'UI',
+            });
+          }
+          totalJank += delta - idealDelta;
+        } else if (delta > 20) {
+          totalJank += delta - idealDelta;
+        }
+
+        const elapsed = now - startTime;
+
+        // 到达一秒采样周期
+        if (elapsed >= 1000) {
+          const secondsPassed = Math.floor(elapsed / 1000);
+
+          if (this.innerIsActive) {
+            const avgFps = Math.round((frameCount * 1000) / elapsed);
+            const avgLoad = Math.min(
+              100,
+              Math.round((totalJank * 100) / elapsed),
+            );
+
+            // 发送本次采样周期的平均值
+            // 如果由于卡顿导致秒数 > 1，发送多个采样点以保持时间轴连续性
+            const nowTs = Date.now();
+            const metricsBatch = [];
+            for (let i = 0; i < secondsPassed; i++) {
+              metricsBatch.push({
+                fps: avgFps,
+                load: avgLoad,
+                ts: nowTs - (secondsPassed - 1 - i) * 1000,
+                // 只在最后一秒携带本周期的长任务列表
+                longTasks: i === secondsPassed - 1 ? [...this.longTasks] : [],
+              });
+            }
+
+            // 清空本周期缓存
+            this.longTasks = [];
+
+            // @ts-expect-error uni is global
+            if (typeof uni !== 'undefined' && uni.$emit) {
+              uni.$emit(MSG_TYPE.PERF_METRICS, metricsBatch);
+            }
+          } else {
+            // 即使未激活，也清空缓存防止内存泄漏
+            this.longTasks = [];
+          }
+
+          // 保持采样周期的稳定，不直接对齐 now 到 startTime，避免丢失多余的毫秒数
+          startTime = startTime + secondsPassed * 1000;
+          frameCount = 0;
+          totalJank = 0;
+        }
+
+        this.timer = raf(loop);
+      };
+
+      this.timer = raf(loop);
+    },
+    stopFpsLoop() {
+      caf(this.timer);
+    },
+  },
+  beforeUnmount() {
+    if (this.timer) {
+      caf(this.timer);
+    }
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
+};

package/dist/v3/DevTool/index.vue

@@ -6,8 +6,8 @@
       :customStyle="customStyle"
       :contentHeight="contentHeight"
       :devToolVersion="devToolVersion"
-      @click="onDevToolButtonClick"
-    />
+      @click="onDevToolButtonClick" />
+
     <DevToolWindow
       :open="devToolWindowVisible"
       :data="windowData"
@@ -18,38 +18,64 @@
       :theme="theme"
       :customStyle="customStyle"
       :contentHeight="contentHeight"
+      :origin="windowOrigin"
       @close="onCloseDevToolWindow"
       @sendMessage="onSendMessage"
-      @changeTheme="onChangeTheme"
-    />
+      @changeTheme="onChangeTheme" />
+    <!-- 全局 FPS 采集器 -->
+    <PerformanceWidget
+      v-if="performanceVisible"
+      :zIndex="zIndex"
+      :theme="theme" />
+    <!-- #ifdef APP-PLUS || H5 -->
+    <view
+      :change:active="fpsRenderScript.receiveActive"
+      :active="isPageActive"
+      :FPS="0"></view>
+    <!-- #endif -->
   </view>
 </template>
-<script lang="ts" setup>
-import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';
-import { ref, onBeforeMount, onUnmounted } from 'vue';
+
+<script lang="ts">
 import DevToolButton from '../DevToolButton/index.vue';
 import DevToolWindow from '../DevToolWindow/index.vue';
-import { devToolEventBus } from '../../core';
+import PerformanceWidget from '../Performance/modules/PerformanceWidget.vue';
+
+export default {
+  __devTool: true,
+  components: {
+    DevToolButton,
+    DevToolWindow,
+    PerformanceWidget,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { onShow, onHide } from '@dcloudio/uni-app';
+import { ref, onBeforeMount, onUnmounted, computed } from 'vue';
 
 import {
-  DEV_BUTTON_VISIBLE,
-  DEV_WINDOW_VISIBLE,
-  DEV_WINDOW_MESSAGE,
-  DEV_WINDOW_OPEN,
-  DEV_WINDOW_CLOSE,
-  DEV_OPTION_GET,
-  DEV_OPTION_SEND,
+  DEV_CORE_MESSAGE,
+  DEV_UI_MESSAGE,
+  MSG_TYPE,
+  CMD_TYPE,
 } from '../../const';
 import type { DevTool } from '../../type';
-import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
+import { setDevToolInfo, getDevToolInfo } from '../../modules/devToolInfo';
 import useContainerStyle from '../hooks/useContainerStyle';
 
 let isActive = false;
+const isPageActive = ref(false);
 
 const windowData = ref<DevTool.WindowData>({});
 
+// @ts-ignore
+declare const fpsRenderScript: any;
+
 const devToolWindowVisible = ref(false);
 const devToolButtonVisible = ref(false);
+const performanceVisible = ref(false);
 
 const sourceFileServers = ref<string[]>([]);
 
@@ -59,21 +85,58 @@ const zIndex = ref(998);
 
 const useDevSource = ref(false);
 
-const theme = ref<string>('dart');
+const windowOrigin = ref({ x: 0, y: 0 });
+
+const theme = ref<string>('dark');
 
 const devToolVersion = ref<string>('v0.0.0');
 
+const baseFontSize = ref(12);
+const tagFontSize = ref(10);
+const tipsFontSize = ref(10);
+const fontFamily = ref('');
+const fontWeight = ref('normal');
+
 const { customStyle, contentHeight } = useContainerStyle({
   zIndex,
 });
 
-function onDevToolButtonClick() {
+const baseFontSizePx = computed(() => baseFontSize.value + 'px');
+
+const tagFontSizePx = computed(() => tagFontSize.value + 'px');
+const tipsFontSizePx = computed(() => tipsFontSize.value + 'px');
+
+function updateWindowOrigin(pos?: { x: number; y: number }) {
+  const { left = 300, top = 500 } = getDevToolInfo();
+  let x = left + 50;
+  let y = top + 16;
+
+  if (pos) {
+    x = pos.x;
+    y = pos.y;
+  }
+
+  // 补偿由于 navigateHeight 和 statusBarHeight 导致的偏移
+  const topOffset = parseInt(customStyle.paddingTop) || 0;
+
+  windowOrigin.value = {
+    x,
+    y: y + topOffset,
+  };
+}
+
+/**
+ * 向核心模块发送命令
+ */
+function sendCommand(type: string, data: any = {}) {
+  // 1. 同层通讯 (高效，无序列化成本)
+  uni.$emit(DEV_UI_MESSAGE, { type, data });
+}
+
+function onDevToolButtonClick(pos: { x: number; y: number }) {
+  updateWindowOrigin(pos);
   onShowDevToolWindow(true);
-  onSendMessage({
-    type: DEV_WINDOW_OPEN,
-    data: {},
-  });
-  uni.$emit(DEV_WINDOW_OPEN);
+  sendCommand(CMD_TYPE.WINDOW_OPEN, {});
 }
 
 function onCloseDevToolWindow() {
@@ -83,8 +146,9 @@ function onCloseDevToolWindow() {
   setDevToolInfo({
     devToolWindowVisible: false,
   });
-  uni.$emit(DEV_WINDOW_CLOSE);
+  sendCommand(CMD_TYPE.WINDOW_CLOSE, {});
 }
+
 function onShowDevToolButton(show: boolean) {
   if (!isActive) return;
 
@@ -104,20 +168,33 @@ async function onShowDevToolWindow(show: boolean) {
 }
 
 function onSendMessage(param: { type: string; data: Record<string, any> }) {
-  devToolEventBus?.emit(DEV_WINDOW_MESSAGE, param);
+  sendCommand(param.type, param.data);
 }
 
-function onDevOptionSend(options: DevTool.DevToolOptions) {
-  if (options) {
-    devToolVersion.value = options.devToolVersion ?? 'v0.0.0';
+function onDevOptionSend(data: DevTool.WindowData) {
+  if (data) {
+    windowData.value = data;
+
+    if (data.devToolVersion !== undefined)
+      devToolVersion.value = data.devToolVersion;
 
-    sourceFileServers.value = options.sourceFileServers ?? [];
+    if (data.sourceFileServers !== undefined)
+      sourceFileServers.value = data.sourceFileServers;
 
-    mode.value = options.mode ?? '';
+    if (data.mode !== undefined) mode.value = data.mode;
 
-    useDevSource.value = options.useDevSource ?? false;
+    if (data.useDevSource !== undefined) useDevSource.value = data.useDevSource;
 
-    zIndex.value = options.zIndex ?? 998;
+    if (data.zIndex !== undefined) zIndex.value = data.zIndex;
+
+    if (data.baseFontSize !== undefined) baseFontSize.value = data.baseFontSize;
+
+    if (data.tagFontSize !== undefined) tagFontSize.value = data.tagFontSize;
+    if (data.tipsFontSize !== undefined) tipsFontSize.value = data.tipsFontSize;
+    if (data.fontFamily !== undefined) fontFamily.value = data.fontFamily;
+    if (data.fontWeight !== undefined) fontWeight.value = data.fontWeight;
+    if (data.performanceVisible !== undefined)
+      performanceVisible.value = data.performanceVisible;
   }
 }
 
@@ -125,114 +202,144 @@ function onChangeTheme(t: string) {
   theme.value = t;
 }
 
+/**
+ * 处理来自核心模块的消息
+ */
+// 处理消息
+function handleCoreMessage(msg: any) {
+  let type, data;
+  try {
+    const payload = typeof msg === 'string' ? JSON.parse(msg) : msg;
+    type = payload.type;
+    data = payload.data;
+  } catch (e) {
+    console.error('DevTool parse error', e);
+    return;
+  }
+
+  // 避免 DevToolWindow 处理同样的数据消息（如果是广播的话）
+  // 注意：DevToolWindow 也会收到这个消息并在内部处理
+
+  switch (type) {
+    case MSG_TYPE.BUTTON_VISIBLE:
+      onShowDevToolButton(data);
+      break;
+    case MSG_TYPE.WINDOW_VISIBLE:
+      onShowDevToolWindow(data);
+      break;
+    case MSG_TYPE.PERF_VISIBLE:
+      performanceVisible.value = data;
+      break;
+    case MSG_TYPE.OPTION_UPDATE:
+      onDevOptionSend(data);
+      break;
+    // ... 其他消息处理
+  }
+}
+
 onBeforeMount(() => {
+  const devToolInfo = getDevToolInfo();
+  setDevToolInfo({
+    devToolWindowVisible: false,
+    performanceVisible: false,
+    performanceSettings: {
+      ...devToolInfo.performanceSettings,
+      enableMonitor: false,
+    },
+  });
+
   const {
     devToolButtonVisible: showButton = false,
-
-    devToolWindowVisible: showWindow = false,
+    baseFontSize: baseF = 12,
+    tagFontSize: tagF = 10,
+    tipsFontSize: tipsF = 10,
+    fontFamily: fontF = '',
+    fontWeight: weightF = 'normal',
+    theme: themeF = 'light',
   } = getDevToolInfo();
 
   isActive = true;
+  isPageActive.value = true;
   devToolButtonVisible.value = showButton;
-  devToolWindowVisible.value = showWindow;
-  devToolEventBus?.on(DEV_BUTTON_VISIBLE, onShowDevToolButton);
-  devToolEventBus?.on(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
-  devToolEventBus?.on(DEV_OPTION_SEND, onDevOptionSend);
+  devToolWindowVisible.value = false; // 始终从关闭状态开始
+  performanceVisible.value = false; // 始终从关闭状态开始
+  windowData.value.performanceVisible = false;
+  baseFontSize.value = baseF;
+  tagFontSize.value = tagF;
+  tipsFontSize.value = tipsF;
+  fontFamily.value = fontF;
+  fontWeight.value = weightF;
+  windowData.value.baseFontSize = baseF;
+  windowData.value.tagFontSize = tagF;
+  windowData.value.tipsFontSize = tipsF;
+  windowData.value.fontFamily = fontF;
+  windowData.value.fontWeight = weightF;
+  theme.value = themeF;
+
+  // 监听核心模块消息
+  uni.$on(DEV_CORE_MESSAGE, handleCoreMessage);
 
   // #ifdef H5
   setTimeout(() => {
-    devToolEventBus?.emit(DEV_WINDOW_MESSAGE, {
-      type: DEV_OPTION_GET,
-      data: {},
-    });
+    sendCommand(CMD_TYPE.OPTION_GET, {});
   }, 1000);
-
   // #endif
 
   // #ifndef H5
   setTimeout(() => {
-    devToolEventBus?.emit(DEV_WINDOW_MESSAGE, {
-      type: DEV_OPTION_GET,
-      data: {},
-    });
+    sendCommand(CMD_TYPE.OPTION_GET, {});
   }, 3000);
   // #endif
 });
 
 onUnmounted(() => {
-  devToolEventBus?.emit(DEV_WINDOW_MESSAGE, {
-    type: DEV_WINDOW_CLOSE,
-    data: {},
-  });
-  devToolEventBus?.off(DEV_BUTTON_VISIBLE, onShowDevToolButton);
-  devToolEventBus?.off(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
+  sendCommand(CMD_TYPE.WINDOW_CLOSE, {});
+  uni.$off(DEV_CORE_MESSAGE, handleCoreMessage);
 });
 
 onShow(() => {
   isActive = true;
-  const {
-    devToolButtonVisible: showButton = false,
-    devToolWindowVisible: showWindow = false,
-  } = getDevToolInfo();
+  isPageActive.value = true;
+  const { devToolButtonVisible: showButton = false } = getDevToolInfo();
 
-  devToolWindowVisible.value = showWindow;
+  // 不恢复窗口状态，保持关闭
   devToolButtonVisible.value = showButton;
 
   if (devToolWindowVisible.value) {
-    onSendMessage({
-      type: DEV_WINDOW_OPEN,
-      data: {},
-    });
+    sendCommand(CMD_TYPE.WINDOW_OPEN, {});
   }
 });
-// onHide(() => {
-//   isActive = false;
-//   devToolWindowVisible.value = false;
-// });
+onHide(() => {
+  isPageActive.value = false;
+});
 </script>
+
+<!-- #ifdef APP-PLUS || H5 -->
+<script
+  module="fpsRenderScript"
+  lang="renderjs"
+  src="./fps-collector.render.ts"></script>
+<!-- #endif -->
+
 <style scoped>
+@import '../styles/theme.css';
+
 .dev-tool {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 998;
 
-  --dev-tool-main-color: #9254de;
-  --dev-tool-normal-bg-color: #f9f9f9;
-  --dev-tool-warn-color: #ffa940;
-  --dev-tool-warn-bg-color: #fff7e6;
-  --dev-tool-error-color: #ff4d4f;
-  --dev-tool-error-bg-color: #fff1f0;
-  --dev-tool-success-color: #bae637;
-  --dev-tool-success-bg-color: #fcffe6;
-
-  --dev-tool-base-font-size: 12px;
-  --dev-tool-tag-font-size: 10px;
-  --dev-tool-tips-font-size: 10px;
-  -webkit-tap-highlight-color: transparent;
-}
-.dev-tool-light {
-  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
-  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
-
-  --dev-tool-text-color: #000;
-  --dev-tool-border-color: #f0f0f0;
-  --dev-tool-info-color: #9c9c9c;
-  --dev-tool-log-color: #f9f9f9;
-  --dev-tool-nil-color: #020201;
-  --dev-tool-string-color: #888888;
-  --dev-tool-number-color: #1d8ce0;
-  --dev-tool-boolean-color: #1d8ce0;
-  --dev-tool-symbol-color: bisque;
-}
+  --dev-tool-active-color: var(--dev-tool-main-color);
+  --dev-tool-base-font-size: v-bind(baseFontSizePx);
+  --dev-tool-tag-font-size: v-bind(tagFontSizePx);
+  --dev-tool-tips-font-size: v-bind(tipsFontSizePx);
+  --dev-tool-font-family: v-bind(fontFamily);
+  --dev-tool-font-weight: v-bind(fontWeight);
 
-.dev-tool-dart {
-  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
-  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
-
-  --dev-tool-text-color: #fff;
-  --dev-tool-border-color: #3d3d3d;
-
-  --dev-tool-log-color: #f9f9f9;
+  -webkit-tap-highlight-color: transparent;
+  font-size: var(--dev-tool-base-font-size);
+  font-family: var(--dev-tool-font-family);
+  font-weight: var(--dev-tool-font-weight);
 }
 </style>