vite-uni-dev-tool 0.0.48 → 1.0.0

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

@@ -0,0 +1,258 @@
+import { ref } from 'vue';
+import { MSG_TYPE } from '../../../const';
+import { raf, caf } from '../../../utils';
+
+const fps = ref(0);
+const cpuLoad = ref(0);
+const memory = ref(0);
+
+const fpsHistory = ref<number[]>([]);
+const cpuHistory = ref<number[]>([]);
+const memoryHistory = ref<number[]>([]);
+const timeHistory = ref<number[]>([]); // 记录时间戳
+const longTasksHistory = ref<{ ts: number; duration: number; type?: string }[]>(
+  [],
+); // 记录长任务记录
+const displayMaxScale = ref(60);
+const lastUpdateTs = ref(Date.now()); // 记录最后一次更新时间点
+let animationId: number | null = null;
+let logicMonitorTimer: any = null;
+
+let heartbeatTimer: any = null;
+let metricsHandler: any = null;
+
+const performanceMonitorEnabled = ref(false);
+
+export function usePerformanceData() {
+  function clearData() {
+    fpsHistory.value = [];
+    cpuHistory.value = [];
+    memoryHistory.value = [];
+    timeHistory.value = [];
+    longTasksHistory.value = [];
+    lastUpdateTs.value = Date.now();
+  }
+
+  // 逻辑线程监测
+  function startLogicMonitor() {
+    if (logicMonitorTimer) return;
+    let lastTime = Date.now();
+    logicMonitorTimer = setInterval(() => {
+      const now = Date.now();
+      const delta = now - lastTime;
+
+      // 这里的 20ms 是预期周期。如果有偏差，说明逻辑线程繁忙
+      // 1. 计算负载估算 (0-100)
+      // 偏差超过 5ms 开始计算负载，超过 80ms 认为 100% 负载
+      const drift = Math.max(0, delta - 20);
+      const estimatedLoad = Math.min(100, Math.round((drift / 60) * 100));
+      // 平滑处理
+      cpuLoad.value = Math.round(cpuLoad.value * 0.7 + estimatedLoad * 0.3);
+
+      // 2. 这里的 100ms 实际上包含了 20ms 的采样周期，如果偏差超过 80ms 则认为逻辑线程阻塞
+      if (delta > 100) {
+        longTasksHistory.value = [
+          ...longTasksHistory.value,
+          { ts: now, duration: delta, type: 'Logic' },
+        ].slice(-20);
+      }
+      lastTime = now;
+    }, 20); // 高频采样以获得更好精度
+  }
+
+  function stopLogicMonitor() {
+    if (logicMonitorTimer) {
+      clearInterval(logicMonitorTimer);
+      logicMonitorTimer = null;
+    }
+  }
+
+  function initData(points: number) {
+    const now = Date.now();
+    // 如果已经有数据且长度足够，不需要重复初始化
+    if (fpsHistory.value.length >= points) return;
+
+    const needed = points - fpsHistory.value.length;
+
+    // 如果是第一次初始化，填充过去的虚拟时间点
+    if (fpsHistory.value.length === 0) {
+      fpsHistory.value = new Array(points).fill(0);
+      cpuHistory.value = new Array(points).fill(0);
+      memoryHistory.value = new Array(points).fill(0);
+      timeHistory.value = Array.from(
+        { length: points },
+        (_, i) => now - (points - 1 - i) * 1000,
+      );
+    } else {
+      // 如果是扩容，向前（左侧）追加 0 点数据
+      const fillFps = new Array(needed).fill(0);
+      const fillCpu = new Array(needed).fill(0);
+      const fillMem = new Array(needed).fill(0);
+      const firstTs = timeHistory.value[0];
+      const fillTime = Array.from(
+        { length: needed },
+        (_, i) => firstTs - (needed - i) * 1000,
+      );
+
+      fpsHistory.value = [...fillFps, ...fpsHistory.value];
+      cpuHistory.value = [...fillCpu, ...cpuHistory.value];
+      memoryHistory.value = [...fillMem, ...memoryHistory.value];
+      timeHistory.value = [...fillTime, ...timeHistory.value];
+    }
+
+    lastUpdateTs.value = now;
+  }
+
+  function startScaleAnimation(target: number) {
+    if (animationId) {
+      caf(animationId);
+    }
+
+    const animate = () => {
+      const diff = target - displayMaxScale.value;
+      if (Math.abs(diff) < 0.5) {
+        displayMaxScale.value = target;
+        animationId = null;
+        return;
+      }
+      displayMaxScale.value += diff * 0.15;
+      animationId = raf(animate);
+    };
+    animate();
+  }
+
+  function updateMetrics(
+    data:
+      | {
+          fps: number;
+          load: number;
+          longTasks?: { ts: number; duration: number; type?: string }[];
+        }
+      | {
+          fps: number;
+          load: number;
+          longTasks?: { ts: number; duration: number; type?: string }[];
+        }[],
+  ) {
+    const items = Array.isArray(data) ? data : [data];
+    if (items.length === 0) return;
+
+    const now = Date.now();
+    lastUpdateTs.value = now;
+
+    items.forEach((item, index) => {
+      fps.value = item.fps;
+      cpuLoad.value = item.load;
+
+      // 如果有长任务，记录下来（保持最近 20 条）
+      if (item.longTasks && item.longTasks.length > 0) {
+        longTasksHistory.value = [
+          ...longTasksHistory.value,
+          ...item.longTasks,
+        ].slice(-20);
+      }
+
+      // 安全访问 performance 对象（安卓平台可能不存在）
+      let mem = 0;
+      if (typeof performance !== 'undefined' && (performance as any).memory) {
+        mem = Math.round(
+          (performance as any).memory.usedJSHeapSize / 1024 / 1024,
+        );
+        memory.value = mem;
+      }
+
+      fpsHistory.value.shift();
+      fpsHistory.value.push(item.fps);
+      cpuHistory.value.shift();
+      cpuHistory.value.push(item.load);
+      memoryHistory.value.shift();
+      memoryHistory.value.push(mem);
+
+      // 优先级：由于 renderjs 传来的采样点自带时间戳，优先使用它
+      // 如果没有，则使用 logic 层当前生成的 now 向前平摊
+      const eventTs = (item as any).ts;
+      const ts =
+        eventTs !== undefined
+          ? Math.min(now, eventTs)
+          : now - (items.length - 1 - index) * 1000;
+
+      timeHistory.value.shift();
+      timeHistory.value.push(ts);
+    });
+
+    const maxVal = Math.max(...fpsHistory.value, 0);
+    let targetScale = 60;
+    if (maxVal > 144) targetScale = 240;
+    else if (maxVal > 120) targetScale = 144;
+    else if (maxVal > 90) targetScale = 120;
+    else if (maxVal > 60) targetScale = 100;
+
+    startScaleAnimation(targetScale);
+  }
+
+  function startHeartbeat() {
+    if (metricsHandler || heartbeatTimer) return;
+
+    metricsHandler = (data: any) => updateMetrics(data);
+
+    uni.$on(MSG_TYPE.PERF_METRICS, metricsHandler);
+    startLogicMonitor(); // 启动逻辑层监测
+
+    heartbeatTimer = setInterval(() => {
+      const now = Date.now();
+      // 如果超过 2 秒没收到外部(renderjs)数据，说明处于非 H5/App 环境，切换到降级模式
+      if (now - lastUpdateTs.value > 2000) {
+        // 估算逻辑层负载：我们没有真实的渲染 FPS，但可以展示逻辑层的心跳健康度
+        // 这在小程序等平台非常有意义
+        updateMetrics({
+          fps: 0, // 非 H5 无法获取准确渲染帧率
+          load: cpuLoad.value || 0, // 这里的 load 会由 startLogicMonitor 的逻辑更新（如果有的化）
+        });
+      }
+
+      if (timeHistory.value.length > 0) {
+        if (now - lastUpdateTs.value < 800) return;
+        updateMetrics({ fps: fps.value, load: cpuLoad.value });
+      }
+    }, 1000);
+  }
+
+  function stopHeartbeat() {
+    if (metricsHandler) {
+      uni.$off(MSG_TYPE.PERF_METRICS, metricsHandler);
+      metricsHandler = null;
+    }
+    stopLogicMonitor(); // 停止逻辑层监测
+    if (heartbeatTimer) {
+      clearInterval(heartbeatTimer);
+      heartbeatTimer = null;
+    }
+    // clean animation
+    if (animationId) {
+      caf(animationId);
+      animationId = null;
+    }
+    clearData();
+  }
+
+  return {
+    fps,
+    cpuLoad,
+    memory,
+    fpsHistory,
+    cpuHistory,
+    memoryHistory,
+    timeHistory,
+    longTasksHistory,
+    displayMaxScale,
+    lastUpdateTs,
+    performanceMonitorEnabled,
+    initData,
+    updateMetrics,
+    startHeartbeat,
+    stopHeartbeat,
+    startLogicMonitor,
+    stopLogicMonitor,
+    clearData,
+  };
+}

package/dist/v3/Pick/index.vue

@@ -0,0 +1,322 @@
+<template>
+  <view class="pick-wrapper" :style="customStyle">
+    <!-- Trigger Area -->
+    <view
+      :class="`pick-trigger ${!modelValue ? 'pick-trigger-placeholder' : ''}`"
+      @click="onOpenPick">
+      <text class="pick-trigger-text">
+        {{ label || placeholder || '请选择' }}
+      </text>
+      <view class="pick-handle">
+        <view
+          v-if="allowClear && modelValue"
+          class="pick-clear"
+          @click.stop="onClear">
+          ×
+        </view>
+        <view :class="['pick-arrow', isActive ? 'pick-arrow-active' : '']">
+          >
+        </view>
+      </view>
+    </view>
+
+    <!-- Popup Modal -->
+    <view class="pick-mask" v-if="isActive" @click="onClosePick">
+      <view class="pick-modal" @click.stop>
+        <!-- Header -->
+        <view class="pick-header">
+          <text class="pick-title">{{ placeholder || '请选择' }}</text>
+          <view class="pick-close" @click="onClosePick">×</view>
+        </view>
+
+        <!-- Search -->
+        <view class="pick-search" v-if="!readonly">
+          <input
+            class="pick-search-input"
+            :value="searchText"
+            placeholder="搜索..."
+            @input="debounceInput"
+            :focus="isActive" />
+        </view>
+
+        <!-- List -->
+        <scroll-view scroll-y class="pick-list">
+          <view
+            v-for="item in filteredOptions"
+            :key="item.value"
+            :class="[
+              'pick-item',
+              item.value === modelValue ? 'pick-item-active' : '',
+            ]"
+            @click="onSelect(item)">
+            <text class="pick-item-text">{{ item.label }}</text>
+            <text v-if="item.value === modelValue" class="pick-item-check">
+              ✓
+            </text>
+          </view>
+          <view v-if="filteredOptions.length === 0" class="pick-empty">
+            暂无数据
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from '../../utils';
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  placeholder?: string;
+  readonly?: boolean;
+  allowClear?: boolean;
+  options?: { label: string; value: any }[];
+  customStyle?: Record<string, any> | string;
+}>();
+
+const modelValue = defineModel<string>('modelValue');
+
+const emit = defineEmits<{
+  (e: 'search', value: string): void;
+  (e: 'openSearch', value: boolean): void;
+  (e: 'change', value: { label: string; value: any }): void;
+}>();
+
+const isActive = ref(false);
+const searchText = ref('');
+
+// Computed label for the trigger
+const label = computed(() => {
+  return (
+    props.options?.find((item) => item.value === modelValue.value)?.label ??
+    modelValue.value
+  );
+});
+
+const filteredOptions = computed(() => {
+  if (!searchText.value) return props.options || [];
+  const lowerSearch = searchText.value.toLowerCase();
+  return (props.options || []).filter(
+    (item) => item.label && item.label.toLowerCase().includes(lowerSearch),
+  );
+});
+
+function onOpenPick() {
+  isActive.value = true;
+  searchText.value = '';
+  emit('openSearch', true);
+}
+
+function onClosePick() {
+  isActive.value = false;
+  emit('openSearch', false);
+}
+
+function onInput(e: any) {
+  const value = e.detail?.value ?? e.target?.value;
+  searchText.value = value;
+  emit('search', value);
+}
+
+const debounceInput = debounce(onInput, 300);
+
+function onSelect(item: { label: string; value: any }) {
+  modelValue.value = item.value;
+  emit('change', item);
+  onClosePick();
+}
+
+function onClear() {
+  modelValue.value = '';
+  emit('search', '');
+  emit('change', { label: '', value: '' });
+}
+</script>
+
+<style scoped>
+.pick-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.pick-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  height: 24px; /* Slightly taller for easier click */
+  padding: 0 10px;
+  border-radius: 4px;
+  border: 1px solid var(--dev-tool-border-color);
+  background-color: var(--dev-tool-bg-color);
+  transition: all 0.3s;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.pick-trigger:hover {
+  border-color: var(--dev-tool-active-color, #409eff);
+}
+
+.pick-trigger-placeholder .pick-trigger-text {
+  color: var(--dev-tool-text-color-placeholder, #999);
+}
+
+.pick-trigger-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-handle {
+  display: flex;
+  align-items: center;
+}
+
+.pick-arrow {
+  padding-left: 4px;
+  color: #999;
+  font-family: monospace;
+  font-weight: bold;
+  transform: rotate(90deg);
+  transition: transform 0.3s;
+  position: relative;
+  top: -1px;
+}
+
+.pick-arrow-active {
+  transform: rotate(-90deg);
+}
+
+.pick-clear {
+  padding-left: 8px;
+  font-size: 16px;
+  color: #999;
+}
+
+.pick-mask {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 40%);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(2px);
+}
+
+.pick-modal {
+  width: 80%;
+  max-width: 400px;
+  height: 60vh;
+  max-height: 500px;
+  background-color: var(--dev-tool-bg-color);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: pick-pop-in 0.2s ease-out;
+}
+
+@keyframes pick-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.pick-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.pick-title {
+  font-weight: 600;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-close {
+  font-size: 20px;
+  color: #999;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.pick-search {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.pick-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background-color: var(--dev-tool-bg2-color, #f5f5f5);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  color: var(--dev-tool-text-color);
+}
+
+.pick-search-input:focus {
+  border-color: var(--dev-tool-active-color, #409eff);
+  background-color: var(--dev-tool-bg-color);
+}
+
+.pick-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.pick-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pick-item:hover,
+.pick-item:active {
+  background-color: var(--dev-tool-hover-bg-color, rgb(0 0 0 / 5%));
+}
+
+.pick-item-active {
+  background-color: var(--dev-tool-active-bg-color, rgb(64 158 255 / 10%));
+}
+
+.pick-item-active .pick-item-text {
+  color: var(--dev-tool-active-color, #409eff);
+  font-weight: 500;
+}
+
+.pick-item-text {
+  color: var(--dev-tool-text-color);
+}
+
+.pick-item-check {
+  color: var(--dev-tool-active-color, #409eff);
+  font-weight: bold;
+}
+
+.pick-empty {
+  padding: 24px;
+  text-align: center;
+  color: #999;
+}
+</style>

package/dist/v3/PiniaList/index.vue

@@ -1,26 +1,35 @@
 <template>
   <view class="pinia-content">
-    <JsonPretty
-      editable
-      showLength
-      virtual
-      v-if="showJson"
-      :data="piniaList"
-      :theme="theme"
-      :height="contentHeight - 32 - 32"
-      :nodeSelectable="() => false"
-      :pathCollapsible="() => false"
-      @update:data="onUpdateData"
-      @nodeClick="onNodeClick"
-    />
-    <Empty v-else />
+    <view class="pinia-control">
+      <DevToolTitle>{{ t('pinia.title') }}</DevToolTitle>
+    </view>
+    <view class="pinia-json-wrapper">
+      <JsonPretty
+        editable
+        showLength
+        virtual
+        v-if="showJson"
+        :data="piniaList"
+        :theme="theme"
+        :height="contentHeight - 32 - 32"
+        :nodeSelectable="() => false"
+        :pathCollapsible="() => false"
+        @update:data="onUpdateData"
+        @nodeClick="onNodeClick"
+      />
+      <Empty v-else />
+    </view>
   </view>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
 import JsonPretty from '../JsonPretty/index.vue';
 import Empty from '../Empty/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 import { getValueByPath } from '../../utils';
+import { useI18n } from '../../i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   piniaList: Record<string, any>;
@@ -38,7 +47,7 @@ const showJson = computed(() => {
       return false;
     }
     return true;
-  } catch (error) {
+  } catch (_error) {
     return false;
   }
 });
@@ -64,10 +73,22 @@ function onNodeClick(node: any) {
 </script>
 <style scoped>
 .pinia-content {
-  padding: 16px;
   font-size: var(--dev-tool-base-font-size);
   height: 100%;
   box-sizing: border-box;
-  overflow: auto;
+  overflow: hidden;
+}
+
+.pinia-control {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.pinia-json-wrapper {
+  padding: 0 16px;
 }
 </style>