uni-oaview 1.9.5 → 1.9.6

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

@@ -1,46 +1,74 @@
 <template>
-  <uni-collapse>
-    <uni-collapse-item v-for="log in nativeEventLogs" :title="getTitle(log)" :key="log.key">
+  <view class="toolbar">
+    <view class="toolbar-input-wrap">
+      <input v-model="keyword" class="toolbar-input" placeholder="搜索事件名 / 参数 / 响应" confirm-type="search" />
+      <view v-if="keyword" class="toolbar-input-clear" @click="handleClearKeyword">×</view>
+    </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(log)">复制</text>
-        </view>
-        <view style="word-break: break-all; padding: 0 15px">
-          <text :selectable="true" style="font-weight: bolder">发送数据：</text>
-          <awesome-display-info :log="log.params" />
-        </view>
-        <view style="word-break: break-all; padding: 0 15px">
-          <text :selectable="true" style="font-weight: bolder">接收数据：</text>
-          <awesome-display-info :log="log.response" />
+          <text style="color: #007aff; font-size: 12px" @click="handleCopy(meta)">复制</text>
         </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 v-else class="empty-state">
+    {{ emptyText }}
+  </view>
 </template>
 <script lang="ts" setup>
-  import { ref, onBeforeUnmount } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
 
   interface NativeEventLog {
     key: string;
-    params: any;
-    response: any;
+    params: unknown;
+    response: unknown;
     startTime: number;
     endTime: number;
   }
 
+  interface NativeEventLogMeta {
+    id: string;
+    key: string;
+    title: string;
+  }
+
   const MAX_NATIVE_EVENT_LOGS = 50;
+  const FLUSH_DELAY = 16;
 
-  const nativeEventLogs = ref<NativeEventLog[]>(getNativeEventLogs().slice(-MAX_NATIVE_EVENT_LOGS));
+  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 nativeEventDetailMap = shallowRef<Map<string, NativeEventLog>>(new Map());
+  const nativeEventLogMetas = ref<NativeEventLogMeta[]>([]);
 
-  const stop = nativeEventSubject.subscribe((data: NativeEventLog[]) => {
-    if (data.length > MAX_NATIVE_EVENT_LOGS) {
-      nativeEventLogs.value = data.slice(-MAX_NATIVE_EVENT_LOGS);
-    } else {
-      nativeEventLogs.value = data;
-    }
-  });
+  let pendingLogs: NativeEventLog[] | null = null;
+  let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+  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);
@@ -57,18 +85,206 @@
     return key;
   };
 
+  const buildMetaFromLog = (log: NativeEventLog): NativeEventLogMeta => {
+    return {
+      id: buildNativeEventLogId(log),
+      key: log.key,
+      title: getTitle(log),
+    };
+  };
+
+  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 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] ?? '';
+  };
+
+  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;
+  };
+
+  const normalizeKeyword = (value: string): string => value.trim().toLowerCase();
+
+  const safeStringify = (value: unknown): string => {
+    if (value === null || value === undefined) return '';
+    if (typeof value === 'string') return value;
+    try {
+      return JSON.stringify(value);
+    } catch (error) {
+      return String(value);
+    }
+  };
+
+  const matchesNativeEventLog = (meta: NativeEventLogMeta): boolean => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return true;
+    const detail = getNativeEventDetail(meta.id);
+    return [meta.title, meta.key, safeStringify(detail?.params), safeStringify(detail?.response)]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalizedKeyword);
+  };
+
+  const filteredNativeEventLogMetas = computed(() => nativeEventLogMetas.value.filter(matchesNativeEventLog));
+
+  const emptyText = computed(() => {
+    if (keyword.value) return '无匹配结果';
+    if (hasCleared.value) return '已清空';
+    return '暂无日志';
+  });
+
+  const applyLogs = (logs: NativeEventLog[]): void => {
+    const visibleLogs = clearTimestamp.value ? logs.filter((log) => log.startTime > clearTimestamp.value!) : logs;
+
+    if (
+      !visibleLogs.length &&
+      clearTimestamp.value &&
+      logs.length &&
+      logs[logs.length - 1].startTime < clearTimestamp.value
+    ) {
+      clearTimestamp.value = null;
+      hasCleared.value = false;
+    }
+
+    if (!visibleLogs.length && logs.length && clearTimestamp.value) {
+      nativeEventDetailMap.value = new Map();
+      nativeEventLogMetas.value = [];
+      activeNames.value = [];
+      return;
+    }
+
+    const nextLogs = visibleLogs.slice(-MAX_NATIVE_EVENT_LOGS);
+    const previousDetailMap = new Map(nativeEventDetailMap.value);
+    const detailMap = new Map<string, NativeEventLog>();
+    const nextMetas: NativeEventLogMeta[] = [];
+
+    for (const log of nextLogs) {
+      const id = buildNativeEventLogId(log);
+      detailMap.set(id, log);
+      nextMetas.push(buildMetaFromLog(log));
+    }
+
+    nativeEventDetailMap.value = detailMap;
+    nativeEventLogMetas.value = nextMetas;
+    activeNames.value = migrateActiveNames(previousDetailMap, nextMetas);
+  };
+
+  const flushPendingLogs = (): void => {
+    flushTimer = null;
+    if (!pendingLogs) return;
+    applyLogs(pendingLogs);
+    pendingLogs = null;
+  };
+
+  const scheduleFlush = (): void => {
+    if (flushTimer) return;
+    flushTimer = setTimeout(() => {
+      flushPendingLogs();
+    }, FLUSH_DELAY);
+  };
+
+  const enqueueLogs = (logs: NativeEventLog[]): void => {
+    pendingLogs = logs;
+    scheduleFlush();
+  };
+
+  const handleClear = (): void => {
+    clearTimestamp.value = Date.now();
+    hasCleared.value = true;
+    nativeEventLogMetas.value = [];
+    nativeEventDetailMap.value = new Map();
+    activeNames.value = [];
+  };
+
+  const handleClearKeyword = (): void => {
+    keyword.value = '';
+  };
+
+  applyLogs(getNativeEventLogs().filter((log): log is NativeEventLog => Boolean(log)));
+
+  const stop = nativeEventSubject.subscribe((data: NativeEventLog[]) => {
+    enqueueLogs(data);
+  });
+
+  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
+    if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
+    // #endif
+  });
+
   onBeforeUnmount(() => {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    pendingLogs = null;
     stop?.unsubscribe();
   });
 
-  const handleCopy = (log: NativeEventLog) => {
+  const handleCopy = (meta: NativeEventLogMeta) => {
+    const detail = getNativeEventDetail(meta.id);
     const text = JSON.stringify(
       {
-        key: log.key,
-        params: log.params,
-        response: log.response,
-        startTime: log.startTime,
-        endTime: log.endTime,
+        key: detail?.key ?? meta.key,
+        params: detail?.params,
+        response: detail?.response,
+        startTime: detail?.startTime,
+        endTime: detail?.endTime,
       },
       null,
       2,
@@ -83,6 +299,65 @@
 </script>
 
 <style lang="scss" scoped>
+  .toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    background-color: #fff;
+  }
+
+  .toolbar-input {
+    width: 100%;
+    height: 32px;
+    padding: 0 28px 0 10px;
+    font-size: 12px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    background-color: #fff;
+    box-sizing: border-box;
+  }
+
+  .toolbar-input-wrap {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toolbar-input-clear {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+    border-radius: 50%;
+  }
+
+  .toolbar-clear {
+    flex-shrink: 0;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: #119af5;
+    border: 1px solid #119af5;
+    border-radius: 4px;
+  }
+
+  .empty-state {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+  }
+
   .uni-collapse-content {
     font-size: 12px;
   }

package/components/oa-vconsole/utils.ts

@@ -1,6 +1,6 @@
 const MAX_DEPTH = 10;
-const MAX_ARRAY_LENGTH = 10;
-const MAX_STRING_LENGTH = 300;
+const MAX_ARRAY_LENGTH = 100;
+const MAX_STRING_LENGTH = 10000;
 
 interface RichTextNode {
   type: string;

package/package.json

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