uni-oaview 1.9.12 → 1.9.13

package/components/oa-vconsole/native-event.vue

@@ -6,31 +6,37 @@
     </view>
     <view class="toolbar-clear" @click="handleClear">清除</view>
   </view>
-  <uni-collapse v-if="filteredNativeEventLogMetas.length" ref="collapseRef" v-model="activeNames">
-    <uni-collapse-item v-for="meta in filteredNativeEventLogMetas" :key="meta.id" :name="meta.id" :title="meta.title">
-      <view style="font-size: 10px">
-        <view style="text-align: right; margin-bottom: 8px; padding: 0 15px">
-          <text style="color: #007aff; font-size: 12px" @click="handleCopy(meta)">复制</text>
+
+  <scroll-view v-if="filteredNativeEventLogMetas.length" scroll-y class="log-list">
+    <view v-for="meta in filteredNativeEventLogMetas" :key="meta.id" class="log-item">
+      <view class="log-header" @click="toggleExpand(meta.id)">
+        <text class="log-title">{{ meta.title }}</text>
+        <text class="log-arrow">{{ isExpanded(meta.id) ? '▼' : '▶' }}</text>
+      </view>
+
+      <view v-if="isExpanded(meta.id)" class="log-content">
+        <view class="log-actions">
+          <text class="log-copy" @click="handleCopy(meta)">复制</text>
+        </view>
+        <view class="log-section">
+          <text class="log-label">发送数据：</text>
+          <awesome-display-info :log="getNativeEventDetail(meta.id)?.params" />
+        </view>
+        <view class="log-section">
+          <text class="log-label">接收数据：</text>
+          <awesome-display-info :log="getNativeEventDetail(meta.id)?.response" />
         </view>
-        <template v-if="isExpanded(meta.id)">
-          <view style="word-break: break-all; padding: 0 15px">
-            <text :selectable="true" style="font-weight: bolder">发送数据：</text>
-            <awesome-display-info :log="getNativeEventDetail(meta.id)?.params" />
-          </view>
-          <view style="word-break: break-all; padding: 0 15px">
-            <text :selectable="true" style="font-weight: bolder">接收数据：</text>
-            <awesome-display-info :log="getNativeEventDetail(meta.id)?.response" />
-          </view>
-        </template>
       </view>
-    </uni-collapse-item>
-  </uni-collapse>
+    </view>
+  </scroll-view>
+
   <view v-else class="empty-state">
     {{ emptyText }}
   </view>
 </template>
+
 <script lang="ts" setup>
-  import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
 
@@ -48,28 +54,31 @@
     title: string;
   }
 
-  const MAX_NATIVE_EVENT_LOGS = 50;
-  const FLUSH_DELAY = 16;
+  const MAX_NATIVE_EVENT_LOGS = 200;
+  const FLUSH_DELAY_FOREGROUND = 16;
+  const FLUSH_DELAY_BACKGROUND = 100;
+  const MAX_EXPANDED_ITEMS = 20; // 限制最大展开项数
 
-  const collapseRef = ref<{ resize?: () => void } | null>(null);
-  const activeNames = ref<string[] | string>([]);
   const keyword = ref('');
   const clearTimestamp = ref<number | null>(null);
   const hasCleared = ref(false);
+  const isInBackground = ref(false);
+
   const nativeEventDetailMap = shallowRef<Map<string, NativeEventLog>>(new Map());
   const nativeEventLogMetas = ref<NativeEventLogMeta[]>([]);
+  const expandedIds = ref<Set<string>>(new Set());
 
-  let pendingLogs: NativeEventLog[] | null = null;
   let flushTimer: ReturnType<typeof setTimeout> | null = null;
+  let pendingLogs: NativeEventLog[] | null = null;
+
+  // 订阅和监听器取消函数
+  let unsubscribeLogs: (() => void) | null = null;
+  const cleanupFunctions: (() => void)[] = [];
 
   const buildNativeEventLogId = (log: NativeEventLog): string => {
     return `${log.startTime}|${log.endTime}|${log.key}`;
   };
 
-  const buildNativeEventLogMatchKey = (log: NativeEventLog): string => {
-    return `${log.startTime}|${log.key}`;
-  };
-
   const formatStartTime = (timestamp: number): string => {
     const date = new Date(timestamp);
     return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(
@@ -93,40 +102,23 @@
     };
   };
 
-  const migrateActiveNames = (
-    previousDetailMap: Map<string, NativeEventLog>,
-    nextMetas: NativeEventLogMeta[],
-  ): string[] | string => {
-    const activeList = getActiveNameList();
-    if (!activeList.length) return activeNames.value;
-
-    const nextMetaIdByMatchKey = new Map<string, string>();
-    for (const meta of nextMetas) {
-      const detail = nativeEventDetailMap.value.get(meta.id);
-      if (!detail) continue;
-      nextMetaIdByMatchKey.set(buildNativeEventLogMatchKey(detail), meta.id);
+  const isExpanded = (id: string): boolean => expandedIds.value.has(id);
+
+  const toggleExpand = (id: string): void => {
+    const newSet = new Set(expandedIds.value);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      newSet.add(id);
+      // 限制展开项数量，防止内存泄漏
+      if (newSet.size > MAX_EXPANDED_ITEMS) {
+        const firstId = newSet.values().next().value;
+        newSet.delete(firstId);
+      }
     }
-
-    const migratedIds = activeList
-      .map((id) => {
-        if (nextMetaIdByMatchKey.has(id)) return id;
-        const previousDetail = previousDetailMap.get(id);
-        if (!previousDetail) return null;
-        return nextMetaIdByMatchKey.get(buildNativeEventLogMatchKey(previousDetail)) ?? null;
-      })
-      .filter((id): id is string => Boolean(id));
-
-    if (Array.isArray(activeNames.value)) return migratedIds;
-    return migratedIds[0] ?? '';
+    expandedIds.value = newSet;
   };
 
-  const getActiveNameList = (): string[] => {
-    const value = activeNames.value;
-    return Array.isArray(value) ? value : value ? [value] : [];
-  };
-
-  const isExpanded = (id: string): boolean => getActiveNameList().includes(id);
-
   const getNativeEventDetail = (id: string): NativeEventLog | null => {
     return nativeEventDetailMap.value.get(id) ?? null;
   };
@@ -143,17 +135,20 @@
     }
   };
 
-  const matchesNativeEventLog = (meta: NativeEventLogMeta): boolean => {
-    const normalizedKeyword = normalizeKeyword(keyword.value);
-    if (!normalizedKeyword) return true;
+  const matchesKeyword = (meta: NativeEventLogMeta, keywordValue: string): boolean => {
+    if (!keywordValue) return true;
     const detail = getNativeEventDetail(meta.id);
-    return [meta.title, meta.key, safeStringify(detail?.params), safeStringify(detail?.response)]
-      .join(' ')
-      .toLowerCase()
-      .includes(normalizedKeyword);
+    const searchText = `${meta.title} ${meta.key} ${safeStringify(detail?.params)} ${safeStringify(
+      detail?.response,
+    )}`.toLowerCase();
+    return searchText.includes(keywordValue);
   };
 
-  const filteredNativeEventLogMetas = computed(() => nativeEventLogMetas.value.filter(matchesNativeEventLog));
+  const filteredNativeEventLogMetas = computed(() => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return nativeEventLogMetas.value;
+    return nativeEventLogMetas.value.filter((meta) => matchesKeyword(meta, normalizedKeyword));
+  });
 
   const emptyText = computed(() => {
     if (keyword.value) return '无匹配结果';
@@ -161,7 +156,28 @@
     return '暂无日志';
   });
 
-  const applyLogs = (logs: NativeEventLog[]): void => {
+  const handleCopy = (meta: NativeEventLogMeta) => {
+    const detail = getNativeEventDetail(meta.id);
+    const text = JSON.stringify(
+      {
+        key: detail?.key ?? meta.key,
+        params: detail?.params,
+        response: detail?.response,
+        startTime: detail?.startTime,
+        endTime: detail?.endTime,
+      },
+      null,
+      2,
+    );
+    uni.setClipboardData({
+      data: text,
+      success: () => {
+        uni.showToast({ title: '已复制', icon: 'success' });
+      },
+    });
+  };
+
+  const upsertLogs = (logs: NativeEventLog[]): void => {
     const visibleLogs = clearTimestamp.value ? logs.filter((log) => log.startTime > clearTimestamp.value!) : logs;
 
     if (
@@ -177,43 +193,65 @@
     if (!visibleLogs.length && logs.length && clearTimestamp.value) {
       nativeEventDetailMap.value = new Map();
       nativeEventLogMetas.value = [];
-      activeNames.value = [];
+      expandedIds.value = new Set();
       return;
     }
 
     const nextLogs = visibleLogs.slice(-MAX_NATIVE_EVENT_LOGS);
-    const previousDetailMap = new Map(nativeEventDetailMap.value);
-    const detailMap = new Map<string, NativeEventLog>();
-    const nextMetas: NativeEventLogMeta[] = [];
+    const detailMap = nativeEventDetailMap.value;
 
+    const nextMetas: NativeEventLogMeta[] = [];
     for (const log of nextLogs) {
       const id = buildNativeEventLogId(log);
       detailMap.set(id, log);
       nextMetas.push(buildMetaFromLog(log));
     }
 
-    nativeEventDetailMap.value = detailMap;
+    // 创建新的 Map 触发响应式更新
+    nativeEventDetailMap.value = new Map(detailMap);
     nativeEventLogMetas.value = nextMetas;
-    activeNames.value = migrateActiveNames(previousDetailMap, nextMetas);
+
+    // 清理过期的详情数据
+    const keepIds = new Set(nextMetas.map((m) => m.id));
+    for (const key of detailMap.keys()) {
+      if (!keepIds.has(key)) detailMap.delete(key);
+    }
+
+    // 清理已不存在的展开项
+    const newExpandedIds = new Set(expandedIds.value);
+    for (const id of newExpandedIds) {
+      if (!keepIds.has(id)) {
+        newExpandedIds.delete(id);
+      }
+    }
+    expandedIds.value = newExpandedIds;
   };
 
   const flushPendingLogs = (): void => {
     flushTimer = null;
     if (!pendingLogs) return;
-    applyLogs(pendingLogs);
-    pendingLogs = null;
-  };
 
-  const scheduleFlush = (): void => {
-    if (flushTimer) return;
-    flushTimer = setTimeout(() => {
-      flushPendingLogs();
-    }, FLUSH_DELAY);
+    if (isInBackground.value) {
+      flushTimer = setTimeout(flushPendingLogs, FLUSH_DELAY_BACKGROUND);
+      return;
+    }
+
+    const logs = pendingLogs;
+    pendingLogs = null;
+    upsertLogs(logs);
   };
 
   const enqueueLogs = (logs: NativeEventLog[]): void => {
     pendingLogs = logs;
-    scheduleFlush();
+
+    if (!flushTimer) {
+      const delay = isInBackground.value ? FLUSH_DELAY_BACKGROUND : FLUSH_DELAY_FOREGROUND;
+      flushTimer = setTimeout(flushPendingLogs, delay);
+    }
+  };
+
+  const handleClearKeyword = (): void => {
+    keyword.value = '';
   };
 
   const handleClear = (): void => {
@@ -221,81 +259,91 @@
     hasCleared.value = true;
     nativeEventLogMetas.value = [];
     nativeEventDetailMap.value = new Map();
-    activeNames.value = [];
+    expandedIds.value = new Set();
+    keyword.value = '';
   };
 
-  const handleClearKeyword = (): void => {
-    keyword.value = '';
+  const cleanupTimers = (): void => {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    pendingLogs = null;
   };
 
-  applyLogs(getNativeEventLogs().filter((log): log is NativeEventLog => Boolean(log)));
+  const setupLifecycleListeners = () => {
+    // #ifdef MP
+    const handleAppShow = () => {
+      if (isInBackground.value) {
+        isInBackground.value = false;
+        enqueueLogs(getNativeEventLogs());
+      }
+    };
 
-  const stop = nativeEventSubject.subscribe((data: NativeEventLog[]) => {
-    enqueueLogs(data);
-  });
+    const handleAppHide = () => {
+      isInBackground.value = true;
+    };
+
+    // #ifdef MP-WEIXIN
+    if (typeof wx !== 'undefined' && wx.onAppShow) {
+      wx.onAppShow(handleAppShow);
+    }
+    if (typeof wx !== 'undefined' && wx.onAppHide) {
+      wx.onAppHide(handleAppHide);
+    }
+    // #endif
 
-  watch(
-    () => getActiveNameList().join('|'),
-    () => {
-      // #ifdef MP
-      nextTick(() => collapseRef.value?.resize?.());
-      // #endif
-    },
-  );
-
-  watch(
-    () => nativeEventLogMetas.value,
-    () => {
-      // #ifdef MP
-      if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
-      // #endif
-    },
-    { deep: false },
-  );
-
-  watch(keyword, () => {
-    const keepIds = new Set(filteredNativeEventLogMetas.value.map((meta) => meta.id));
-    const currentActive = activeNames.value;
-    if (Array.isArray(currentActive)) {
-      activeNames.value = currentActive.filter((id) => keepIds.has(id));
-    } else if (currentActive && !keepIds.has(currentActive)) {
-      activeNames.value = '';
+    // #ifdef MP-ALIPAY
+    if (typeof my !== 'undefined' && my.onAppShow) {
+      my.onAppShow(handleAppShow);
+    }
+    if (typeof my !== 'undefined' && my.onAppHide) {
+      my.onAppHide(handleAppHide);
     }
+    // #endif
 
+    // uni.onAppShow 返回取消订阅函数
     // #ifdef MP
-    if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
-    // #endif
-  });
+    try {
+      const offAppShow = uni.onAppShow?.(handleAppShow);
+      const offAppHide = uni.onAppHide?.(handleAppHide);
 
-  onBeforeUnmount(() => {
-    if (flushTimer) {
-      clearTimeout(flushTimer);
-      flushTimer = null;
+      if (offAppShow) cleanupFunctions.push(offAppShow);
+      if (offAppHide) cleanupFunctions.push(offAppHide);
+    } catch (e) {
+      // 某些平台可能不支持，忽略错误
     }
-    pendingLogs = null;
-    stop?.unsubscribe();
+    // #endif
+    // #endif
+  };
+
+  // 初始化
+  enqueueLogs(getNativeEventLogs().filter((log): log is NativeEventLog => Boolean(log)));
+
+  // 订阅日志更新
+  const sub = nativeEventSubject.subscribe((data: NativeEventLog[]) => {
+    enqueueLogs(data);
   });
 
-  const handleCopy = (meta: NativeEventLogMeta) => {
-    const detail = getNativeEventDetail(meta.id);
-    const text = JSON.stringify(
-      {
-        key: detail?.key ?? meta.key,
-        params: detail?.params,
-        response: detail?.response,
-        startTime: detail?.startTime,
-        endTime: detail?.endTime,
-      },
-      null,
-      2,
-    );
-    uni.setClipboardData({
-      data: text,
-      success: () => {
-        uni.showToast({ title: '已复制', icon: 'success' });
-      },
+  unsubscribeLogs = () => sub.unsubscribe();
+
+  setupLifecycleListeners();
+
+  onBeforeUnmount(() => {
+    // 清理所有订阅和监听
+    unsubscribeLogs?.();
+    cleanupTimers();
+
+    // 清理小程序生命周期监听
+    cleanupFunctions.forEach((fn) => {
+      try {
+        fn();
+      } catch (e) {
+        // 忽略清理错误
+      }
     });
-  };
+    cleanupFunctions.length = 0;
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -351,25 +399,66 @@
     border-radius: 4px;
   }
 
-  .empty-state {
-    padding: 16px 0;
+  .log-list {
+    flex: 1;
+    max-height: 70vh;
+  }
+
+  .log-item {
+    border-bottom: 1px solid #e5e5e5;
+    background-color: #fff;
+  }
+
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    background-color: #f9f9f9;
+  }
+
+  .log-title {
+    font-size: 10px;
+    color: #333;
+    flex: 1;
+    word-break: break-all;
+  }
+
+  .log-arrow {
     font-size: 12px;
     color: #999;
-    text-align: center;
+    margin-left: 8px;
   }
 
-  .uni-collapse-content {
+  .log-content {
+    padding: 10px 15px;
+    font-size: 10px;
+    background-color: #fff;
+  }
+
+  .log-actions {
+    text-align: right;
+    margin-bottom: 8px;
+  }
+
+  .log-copy {
+    color: #007aff;
     font-size: 12px;
   }
-  ::v-deep {
-    .uni-collapse-item__title-text {
-      white-space: normal !important; /* 允许文本换行 */
-      overflow: visible !important; /* 显示溢出的文本 */
-      text-overflow: clip !important; /* 不显示省略标记(...) */
-      line-height: normal !important; /* 重置行高 */
-      word-break: break-all !important; /* 允许单词内换行 */
-      font-size: 10px;
-      font-weight: normal;
-    }
+
+  .log-section {
+    margin-bottom: 8px;
+    word-break: break-all;
+  }
+
+  .log-label {
+    font-weight: bolder;
+  }
+
+  .empty-state {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
   }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.9.12",
+  "version": "1.9.13",
   "description": "uniapp小程序组件库",
   "main": "dist/index.esm.js",
   "typings": "dist/index.d.ts",