uni-oaview 1.9.13 → 1.9.15

package/components/oa-page/oa-page.vue

@@ -43,6 +43,8 @@
           secretArray.push(count);
           if (secretArray.join('') === secret) {
             showLog.value = true;
+            /** 如果秘钥正确则进入调试模式 */
+            uni.setStorageSync('isDebug', true);
           }
         } else {
           clickCount = 0;

package/components/oa-vconsole/native-event-state.ts

@@ -0,0 +1,104 @@
+export interface NativeEventLog {
+  key: string;
+  params: unknown;
+  response: unknown;
+  startTime: number;
+  endTime: number;
+}
+
+export interface NativeEventLogMeta {
+  id: string;
+  key: string;
+  title: string;
+}
+
+export interface NativeEventState {
+  detailMap: Map<string, NativeEventLog>;
+  metas: NativeEventLogMeta[];
+  expandedIds: Set<string>;
+}
+
+export interface NativeEventIdStore {
+  ids: WeakMap<NativeEventLog, string>;
+  nextId: number;
+}
+
+export const MAX_NATIVE_EVENT_LOGS = 200;
+
+export const createNativeEventIdStore = (): NativeEventIdStore => {
+  return {
+    ids: new WeakMap<NativeEventLog, string>(),
+    nextId: 0,
+  };
+};
+
+export const buildNativeEventLogId = (log: NativeEventLog): string => {
+  return `${log.startTime}|${log.endTime}|${log.key}`;
+};
+
+const getStableNativeEventLogId = (log: NativeEventLog, idStore?: NativeEventIdStore): string => {
+  if (!idStore) {
+    return buildNativeEventLogId(log);
+  }
+
+  const cachedId = idStore.ids.get(log);
+  if (cachedId) {
+    return cachedId;
+  }
+
+  idStore.nextId += 1;
+  const nextId = `native-event-${idStore.nextId}`;
+  idStore.ids.set(log, nextId);
+  return nextId;
+};
+
+const formatStartTime = (timestamp: number): string => {
+  const date = new Date(timestamp);
+  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(
+    date.getSeconds(),
+  ).padStart(2, '0')}`;
+};
+
+const getTitle = (log: NativeEventLog): string => {
+  const { startTime, endTime, key } = log;
+  if (startTime && endTime) {
+    return `${formatStartTime(startTime)} ${key}；${(endTime - startTime) / 1000}s`;
+  }
+  return key;
+};
+
+const buildMetaFromLog = (log: NativeEventLog, id: string): NativeEventLogMeta => {
+  return {
+    id,
+    key: log.key,
+    title: getTitle(log),
+  };
+};
+
+export const buildNativeEventState = (
+  logs: NativeEventLog[],
+  expandedIds: Iterable<string>,
+  _idStore?: NativeEventIdStore,
+): NativeEventState => {
+  const nextLogs = logs.slice(-MAX_NATIVE_EVENT_LOGS);
+  const detailMap = new Map<string, NativeEventLog>();
+  const metas = nextLogs.map((log) => {
+    const id = getStableNativeEventLogId(log, _idStore);
+    detailMap.set(id, log);
+    return buildMetaFromLog(log, id);
+  });
+  const keepIds = new Set(metas.map((meta) => meta.id));
+  const nextExpandedIds = new Set<string>();
+
+  for (const id of expandedIds) {
+    if (keepIds.has(id)) {
+      nextExpandedIds.add(id);
+    }
+  }
+
+  return {
+    detailMap,
+    metas,
+    expandedIds: nextExpandedIds,
+  };
+};

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

@@ -38,23 +38,14 @@
 <script lang="ts" setup>
   import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
+  import {
+    buildNativeEventState,
+    createNativeEventIdStore,
+    type NativeEventLog,
+    type NativeEventLogMeta,
+  } from './native-event-state';
+  import { stringifyForSearch } from './utils';
   import { nativeEventSubject, getNativeEventLogs } from 'uniapp-log-sdk';
-
-  interface NativeEventLog {
-    key: string;
-    params: unknown;
-    response: unknown;
-    startTime: number;
-    endTime: number;
-  }
-
-  interface NativeEventLogMeta {
-    id: string;
-    key: string;
-    title: string;
-  }
-
-  const MAX_NATIVE_EVENT_LOGS = 200;
   const FLUSH_DELAY_FOREGROUND = 16;
   const FLUSH_DELAY_BACKGROUND = 100;
   const MAX_EXPANDED_ITEMS = 20; // 限制最大展开项数
@@ -70,38 +61,12 @@
 
   let flushTimer: ReturnType<typeof setTimeout> | null = null;
   let pendingLogs: NativeEventLog[] | null = null;
+  const nativeEventIdStore = createNativeEventIdStore();
 
   // 订阅和监听器取消函数
   let unsubscribeLogs: (() => void) | null = null;
   const cleanupFunctions: (() => void)[] = [];
 
-  const buildNativeEventLogId = (log: NativeEventLog): string => {
-    return `${log.startTime}|${log.endTime}|${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(
-      date.getSeconds(),
-    ).padStart(2, '0')}`;
-  };
-
-  const getTitle = (log: NativeEventLog): string => {
-    const { startTime, endTime, key } = log;
-    if (startTime && endTime) {
-      return `${formatStartTime(startTime)} ${key}；${(endTime - startTime) / 1000}s`;
-    }
-    return key;
-  };
-
-  const buildMetaFromLog = (log: NativeEventLog): NativeEventLogMeta => {
-    return {
-      id: buildNativeEventLogId(log),
-      key: log.key,
-      title: getTitle(log),
-    };
-  };
-
   const isExpanded = (id: string): boolean => expandedIds.value.has(id);
 
   const toggleExpand = (id: string): void => {
@@ -125,20 +90,10 @@
 
   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 matchesKeyword = (meta: NativeEventLogMeta, keywordValue: string): boolean => {
     if (!keywordValue) return true;
     const detail = getNativeEventDetail(meta.id);
-    const searchText = `${meta.title} ${meta.key} ${safeStringify(detail?.params)} ${safeStringify(
+    const searchText = `${meta.title} ${meta.key} ${stringifyForSearch(detail?.params)} ${stringifyForSearch(
       detail?.response,
     )}`.toLowerCase();
     return searchText.includes(keywordValue);
@@ -197,34 +152,10 @@
       return;
     }
 
-    const nextLogs = visibleLogs.slice(-MAX_NATIVE_EVENT_LOGS);
-    const detailMap = nativeEventDetailMap.value;
-
-    const nextMetas: NativeEventLogMeta[] = [];
-    for (const log of nextLogs) {
-      const id = buildNativeEventLogId(log);
-      detailMap.set(id, log);
-      nextMetas.push(buildMetaFromLog(log));
-    }
-
-    // 创建新的 Map 触发响应式更新
-    nativeEventDetailMap.value = new Map(detailMap);
-    nativeEventLogMetas.value = 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 nextState = buildNativeEventState(visibleLogs, expandedIds.value, nativeEventIdStore);
+    nativeEventDetailMap.value = nextState.detailMap;
+    nativeEventLogMetas.value = nextState.metas;
+    expandedIds.value = nextState.expandedIds;
   };
 
   const flushPendingLogs = (): void => {

package/components/oa-vconsole/utils.ts

@@ -1,12 +1,121 @@
 const MAX_DEPTH = 10;
 const MAX_ARRAY_LENGTH = 100;
-const MAX_STRING_LENGTH = 10000;
+const MAX_OBJECT_KEYS = 100;
+const MAX_STRING_LENGTH = 200;
+const MAX_READABLE_PREVIEW_LENGTH = 200;
+const MAX_UNREADABLE_PREVIEW_LENGTH = 50;
+const MAX_SEARCH_DEPTH = 4;
+const MAX_SEARCH_ARRAY_LENGTH = 20;
+const MAX_SEARCH_OBJECT_KEYS = 20;
 
 interface RichTextNode {
-  type: string;
+  type: 'text';
   text: string;
 }
 
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  return Object.prototype.toString.call(value) === '[object Object]';
+};
+
+const isLikelyEncodedText = (value: string): boolean => {
+  if (value.length < 32 || /\s/.test(value)) {
+    return false;
+  }
+
+  return /^[A-Za-z0-9+/=_-]+$/.test(value);
+};
+
+const getControlCharacterCount = (value: string): number => {
+  let count = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    const code = value.charCodeAt(index);
+    const isControlChar = (code >= 0 && code <= 8) || (code >= 14 && code <= 31) || code === 127;
+    if (isControlChar) {
+      count += 1;
+    }
+  }
+  return count;
+};
+
+const isHumanReadableString = (value: string): boolean => {
+  if (!value) {
+    return true;
+  }
+
+  if (isLikelyEncodedText(value)) {
+    return false;
+  }
+
+  const controlCharacterCount = getControlCharacterCount(value);
+  if (controlCharacterCount === 0) {
+    return true;
+  }
+
+  return controlCharacterCount / value.length < 0.05;
+};
+
+const buildStringPreview = (value: string): string => {
+  const previewLength = isHumanReadableString(value) ? MAX_READABLE_PREVIEW_LENGTH : MAX_UNREADABLE_PREVIEW_LENGTH;
+
+  if (value.length <= previewLength) {
+    return value;
+  }
+
+  return `${value.slice(0, previewLength)}...`;
+};
+
+const formatString = (value: string): string => {
+  const preview = buildStringPreview(value);
+  if (preview === value) {
+    return `"${value}"`;
+  }
+
+  return `"${preview}" (长度 ${value.length})`;
+};
+
+const buildSearchText = (value: unknown, depth = 0): string => {
+  if (value === null || value === undefined) {
+    return '';
+  }
+
+  if (typeof value === 'string') {
+    return buildStringPreview(value);
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value);
+  }
+
+  if (depth >= MAX_SEARCH_DEPTH) {
+    return '[...]';
+  }
+
+  if (Array.isArray(value)) {
+    const items = value.slice(0, MAX_SEARCH_ARRAY_LENGTH).map((item) => buildSearchText(item, depth + 1));
+    const suffix = value.length > MAX_SEARCH_ARRAY_LENGTH ? ` ...(${value.length})` : '';
+    return `[${items.join(', ')}${suffix}]`;
+  }
+
+  if (isPlainObject(value)) {
+    const keys = Object.keys(value);
+    const items = keys
+      .slice(0, MAX_SEARCH_OBJECT_KEYS)
+      .map((key) => `${key}:${buildSearchText(value[key], depth + 1)}`);
+    const suffix = keys.length > MAX_SEARCH_OBJECT_KEYS ? ` ...(${keys.length})` : '';
+    return `{${items.join(', ')}${suffix}}`;
+  }
+
+  try {
+    return String(value);
+  } catch (error) {
+    return '[unserializable]';
+  }
+};
+
+export const stringifyForSearch = (value: unknown): string => {
+  return buildSearchText(value);
+};
+
 export const formatJson = (data: any, indent = 0): RichTextNode[] => {
   const indentStr = ' '.repeat(indent);
 
@@ -62,13 +171,23 @@ const formatArray = (data: any[], indent: number, indentStr: string): RichTextNo
 const formatObject = (data: Record<string, any>, indent: number, indentStr: string): RichTextNode[] => {
   let formatted: RichTextNode[] = [{ type: 'text', text: '{\n' }];
   const keys = Object.keys(data);
-  keys.forEach((key, index) => {
+  const displayKeys = keys.slice(0, MAX_OBJECT_KEYS);
+
+  displayKeys.forEach((key, index) => {
     formatted.push({ type: 'text', text: indentStr + ' '.repeat(4) + key + ': ' });
     formatted.push(...formatJson(data[key], indent + 4));
-    if (index < keys.length - 1) {
+    if (index < displayKeys.length - 1 || keys.length > MAX_OBJECT_KEYS) {
       formatted.push({ type: 'text', text: ',\n' });
     }
   });
+
+  if (keys.length > MAX_OBJECT_KEYS) {
+    formatted.push({
+      type: 'text',
+      text: indentStr + `    ... (共 ${keys.length} 个键，显示 ${displayKeys.length} 个)\n`,
+    });
+  }
+
   formatted.push({ type: 'text', text: '\n' + indentStr + '}' });
 
   return formatted;
@@ -76,14 +195,8 @@ const formatObject = (data: Record<string, any>, indent: number, indentStr: stri
 
 const formatPrimitive = (data: any): RichTextNode[] => {
   if (typeof data === 'string') {
-    // 字符串超过长度限制时截断
-    if (data.length > MAX_STRING_LENGTH) {
-      return [
-        {
-          type: 'text',
-          text: `"${data.slice(0, MAX_STRING_LENGTH)}..." (长度 ${data.length})`,
-        },
-      ];
+    if (data.length > MAX_STRING_LENGTH || !isHumanReadableString(data)) {
+      return [{ type: 'text', text: formatString(data) }];
     }
     return [{ type: 'text', text: `"${data}"` }];
   } else {

package/package.json

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