uni-oaview 1.5.2 → 1.7.0

package/components/oa-vconsole/audio.vue

@@ -1,7 +1,14 @@
 <template>
-  <uni-collapse ref="collapseRef" v-model="activeNames">
+  <view class="toolbar">
+    <view class="toolbar-input-wrap">
+      <input v-model="keyword" class="toolbar-input" placeholder="搜索实例ID / 音源 / 操作" 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="filteredAudioLogMetas.length" ref="collapseRef" v-model="activeNames">
     <uni-collapse-item
-      v-for="meta in audioLogMetas"
+      v-for="meta in filteredAudioLogMetas"
       :key="meta.id"
       :name="meta.id"
       :title="meta.title"
@@ -39,10 +46,13 @@
       </view>
     </uni-collapse-item>
   </uni-collapse>
+  <view v-else class="empty-state">
+    {{ emptyText }}
+  </view>
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { audioSubject, getAudioLogs } from 'uniapp-log-sdk';
 
@@ -73,6 +83,9 @@
 
   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 audioLogDetailMap = shallowRef<Map<string, AudioLog>>(new Map());
   const audioLogMetas = ref<AudioLogMeta[]>([]);
@@ -142,8 +155,68 @@
     return audioLogDetailMap.value.get(id) ?? null;
   };
 
+  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 normalizeKeyword = (value: string): string => value.trim().toLowerCase();
+
+  const matchesAudioLog = (meta: AudioLogMeta): boolean => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return true;
+    const detail = getAudioLogDetail(meta.id);
+    return [meta.title, meta.instanceId, meta.src, meta.action, safeStringify(detail?.data)]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalizedKeyword);
+  };
+
+  const filteredAudioLogMetas = computed(() => audioLogMetas.value.filter(matchesAudioLog));
+
+  const emptyText = computed(() => {
+    if (keyword.value) return '无匹配结果';
+    if (hasCleared.value) return '已清空';
+    return '暂无日志';
+  });
+
+  const handleClear = () => {
+    clearTimestamp.value = Date.now();
+    hasCleared.value = true;
+    audioLogMetas.value = [];
+    audioLogDetailMap.value = new Map();
+    activeNames.value = [];
+  };
+
+  const handleClearKeyword = () => {
+    keyword.value = '';
+  };
+
   const upsertLogs = (logs: AudioLog[]) => {
-    const nextLogs = logs.slice(-MAX_AUDIO_LOGS);
+    const visibleLogs = clearTimestamp.value ? logs.filter((log) => log.timestamp > clearTimestamp.value!) : logs;
+    if (
+      !visibleLogs.length &&
+      clearTimestamp.value &&
+      logs.length &&
+      logs[logs.length - 1].timestamp < clearTimestamp.value
+    ) {
+      clearTimestamp.value = null;
+      hasCleared.value = false;
+    }
+
+    if (!visibleLogs.length && logs.length && clearTimestamp.value) {
+      audioLogDetailMap.value = new Map();
+      audioLogMetas.value = [];
+      activeNames.value = [];
+      return;
+    }
+
+    const nextLogs = visibleLogs.slice(-MAX_AUDIO_LOGS);
     const detailMap = audioLogDetailMap.value;
 
     const nextMetas: AudioLogMeta[] = [];
@@ -160,14 +233,6 @@
     for (const key of detailMap.keys()) {
       if (!keepIds.has(key)) detailMap.delete(key);
     }
-
-    // 清理 activeNames（如果展开项已被裁剪掉）
-    const currentActive = activeNames.value;
-    if (Array.isArray(currentActive)) {
-      if (currentActive.length) activeNames.value = currentActive.filter((id) => keepIds.has(id));
-    } else if (currentActive && !keepIds.has(currentActive)) {
-      activeNames.value = '';
-    }
   };
 
   upsertLogs(getAudioLogs());
@@ -197,12 +262,85 @@
     { deep: false },
   );
 
+  watch(keyword, () => {
+    const keepIds = new Set(filteredAudioLogMetas.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(() => {
     stop?.unsubscribe();
   });
 </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/console.vue

@@ -1,18 +1,35 @@
 <template>
-  <view
-    class="log-item"
-    v-for="log in consoleLogs"
-    style="font-size: 10px; width: calc(100vw - 16px); word-break: break-all"
-  >
-    {{ log }}
+  <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>
+  <template v-if="filteredConsoleLogs.length">
+    <view
+      v-for="(log, index) in filteredConsoleLogs"
+      :key="`${index}-${log}`"
+      class="log-item"
+      style="font-size: 10px; width: calc(100vw - 16px); word-break: break-all"
+    >
+      {{ log }}
+    </view>
+  </template>
+  <view v-else class="empty-state">
+    {{ emptyText }}
   </view>
 </template>
 <script lang="ts" setup>
-  import { onBeforeUnmount, ref } from 'vue';
+  import { computed, onBeforeUnmount, ref } from 'vue';
   import { consoleSubject, getConsoleLogs } from 'uniapp-log-sdk';
 
   const MAX_CONSOLE_LOGS = 500;
 
+  const keyword = ref('');
+  const hasCleared = ref(false);
+  const clearedLogCount = ref(0);
+
   const logConvert = (items: any[]): string =>
     items.reduce((prev, current, index) => {
       try {
@@ -26,11 +43,44 @@
       return prev;
     }, '');
 
-  const consoleLogs = ref<string[]>(getConsoleLogs().slice(-MAX_CONSOLE_LOGS).map(logConvert));
+  const normalizeKeyword = (value: string): string => value.trim().toLowerCase();
+
+  const buildVisibleLogs = (logs: any[]): string[] => {
+    const nextLogs = clearedLogCount.value > 0 ? logs.slice(clearedLogCount.value) : logs;
+    return nextLogs.slice(-MAX_CONSOLE_LOGS).map(logConvert);
+  };
+
+  const initialLogs = getConsoleLogs();
+  const consoleLogs = ref<string[]>(buildVisibleLogs(initialLogs));
+
+  const filteredConsoleLogs = computed(() => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return consoleLogs.value;
+    return consoleLogs.value.filter((log) => log.toLowerCase().includes(normalizedKeyword));
+  });
+
+  const emptyText = computed(() => {
+    if (keyword.value) return '无匹配结果';
+    if (hasCleared.value) return '已清空';
+    return '暂无日志';
+  });
+
+  const handleClear = () => {
+    hasCleared.value = true;
+    clearedLogCount.value = getConsoleLogs().length;
+    consoleLogs.value = [];
+  };
+
+  const handleClearKeyword = () => {
+    keyword.value = '';
+  };
 
   const stop = consoleSubject.subscribe((data: any) => {
-    const converted = data.slice(-MAX_CONSOLE_LOGS).map(logConvert);
-    consoleLogs.value = converted;
+    if (data.length < clearedLogCount.value) {
+      clearedLogCount.value = 0;
+      hasCleared.value = false;
+    }
+    consoleLogs.value = buildVisibleLogs(data);
   });
 
   onBeforeUnmount(() => {
@@ -39,7 +89,66 @@
 </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;
+  }
+
   .log-item:nth-of-type(odd) {
     background-color: #eee;
   }
+
+  .empty-state {
+    padding: 16px 0;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+  }
 </style>

package/components/oa-vconsole/network.vue

@@ -1,7 +1,14 @@
 <template>
-  <uni-collapse ref="collapseRef" v-model="activeNames">
+  <view class="toolbar">
+    <view class="toolbar-input-wrap">
+      <input v-model="keyword" class="toolbar-input" placeholder="搜索 URL / 方法 / 状态码" 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="filteredNetworkLogMetas.length" ref="collapseRef" v-model="activeNames">
     <uni-collapse-item
-      v-for="meta in networkLogMetas"
+      v-for="meta in filteredNetworkLogMetas"
       :key="meta.id"
       :name="meta.id"
       :title="meta.title"
@@ -32,10 +39,13 @@
       </view>
     </uni-collapse-item>
   </uni-collapse>
+  <view v-else class="empty-state">
+    {{ emptyText }}
+  </view>
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
   import awesomeDisplayInfo from './awesome-display-info.vue';
   import { networkSubject, getNetworkLogs } from 'uniapp-log-sdk';
 
@@ -58,6 +68,7 @@
   }
 
   interface NetworkLog {
+    type: 'request' | 'uploadFile' | 'downloadFile';
     request: NetworkLogRequest;
     response?: NetworkLogResponse;
     startTime: number;
@@ -78,6 +89,9 @@
   const collapseRef = ref<{ resize?: () => void } | null>(null);
   // uni-collapse 的 v-model 在不同模式下可能是 string 或 string[]
   const activeNames = ref<string[] | string>([]);
+  const keyword = ref('');
+  const clearTimestamp = ref<number | null>(null);
+  const hasCleared = ref(false);
 
   const networkLogDetailMap = shallowRef<Map<string, NetworkLog>>(new Map());
   const networkLogMetas = ref<NetworkLogMeta[]>([]);
@@ -132,8 +146,85 @@
     return networkLogDetailMap.value.get(id) ?? null;
   };
 
-  const upsertLogs = (logs: NetworkLog[]) => {
-    const nextLogs = logs.slice(-MAX_NETWORK_LOGS);
+  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 matchesNetworkLog = (meta: NetworkLogMeta): boolean => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return true;
+    const detail = getNetworkLogDetail(meta.id);
+    return [
+      meta.title,
+      meta.method,
+      meta.statusCode,
+      detail?.request?.url,
+      safeStringify(detail?.request?.data),
+      safeStringify(detail?.response),
+    ]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalizedKeyword);
+  };
+
+  const filteredNetworkLogMetas = computed(() => networkLogMetas.value.filter(matchesNetworkLog));
+
+  const emptyText = computed(() => {
+    if (keyword.value) return '无匹配结果';
+    if (hasCleared.value) return '已清空';
+    return '暂无日志';
+  });
+
+  // 使用类型守卫过滤出 HTTP 日志
+  const isHttpLog = (log: any): log is NetworkLog => {
+    return log && log.type !== 'websocket';
+  };
+
+  const handleClear = () => {
+    clearTimestamp.value = Date.now();
+    hasCleared.value = true;
+    networkLogMetas.value = [];
+    networkLogDetailMap.value = new Map();
+    activeNames.value = [];
+  };
+
+  const handleClearKeyword = () => {
+    keyword.value = '';
+  };
+
+  const upsertLogs = (logs: any[]): void => {
+    // 过滤出非 websocket 的日志
+    const httpLogs = logs.filter(isHttpLog);
+    const visibleLogs = clearTimestamp.value
+      ? httpLogs.filter((log) => log.startTime > clearTimestamp.value!)
+      : httpLogs;
+
+    if (
+      !visibleLogs.length &&
+      clearTimestamp.value &&
+      httpLogs.length &&
+      httpLogs[httpLogs.length - 1].startTime < clearTimestamp.value
+    ) {
+      clearTimestamp.value = null;
+      hasCleared.value = false;
+    }
+
+    if (!visibleLogs.length && httpLogs.length && clearTimestamp.value) {
+      networkLogDetailMap.value = new Map();
+      networkLogMetas.value = [];
+      activeNames.value = [];
+      return;
+    }
+
+    const nextLogs = visibleLogs.slice(-MAX_NETWORK_LOGS);
     const detailMap = networkLogDetailMap.value;
 
     const nextMetas: NetworkLogMeta[] = [];
@@ -150,19 +241,11 @@
     for (const key of detailMap.keys()) {
       if (!keepIds.has(key)) detailMap.delete(key);
     }
-
-    // 清理 activeNames（如果展开项已被裁剪掉）
-    const currentActive = activeNames.value;
-    if (Array.isArray(currentActive)) {
-      if (currentActive.length) activeNames.value = currentActive.filter((id) => keepIds.has(id));
-    } else if (currentActive && !keepIds.has(currentActive)) {
-      activeNames.value = '';
-    }
   };
 
   upsertLogs(getNetworkLogs());
 
-  const stop = networkSubject.subscribe((data: NetworkLog[]) => {
+  const stop = networkSubject.subscribe((data: any[]): void => {
     upsertLogs(data);
   });
 
@@ -187,12 +270,85 @@
     { deep: false },
   );
 
+  watch(keyword, () => {
+    const keepIds = new Set(filteredNetworkLogMetas.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(() => {
     stop?.unsubscribe();
   });
 </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/oa-vconsole.vue

@@ -37,6 +37,9 @@
           <Audio />
         </template>
         <template v-if="current === 7">
+          <Websocket />
+        </template>
+        <template v-if="current === 8">
           <DevTools />
         </template>
       </view>
@@ -65,10 +68,11 @@
   import Console from './console.vue';
   import System from './system.vue';
   import Audio from './audio.vue';
+  import Websocket from './websocket.vue';
   import DevTools from './dev-tools.vue';
 
   const popupRef = ref<any>();
-  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'audio', 'dev-tools']);
+  const list = ref(['console', 'network', 'event', 'error', 'storage', 'system', 'audio', 'websocket', 'dev-tools']);
   const current = ref(0);
 
   const handleTabClick = (index: number) => {

package/components/oa-vconsole/websocket.vue

@@ -0,0 +1,424 @@
+<template>
+  <view class="toolbar">
+    <view class="toolbar-input-wrap">
+      <input v-model="keyword" class="toolbar-input" placeholder="搜索 URL / 状态 / 协议" 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="filteredWebsocketLogMetas.length" ref="collapseRef" v-model="activeNames">
+    <uni-collapse-item
+      v-for="meta in filteredWebsocketLogMetas"
+      :key="meta.id"
+      :name="meta.id"
+      :title="meta.title"
+      :class="{
+        'uni-collapse-item-error': meta.isError,
+        'uni-collapse-item-connecting': meta.isConnecting,
+      }"
+    >
+      <view style="font-size: 10px; padding: 10px 15px">
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">URL：</text>
+          {{ meta.url }}
+        </view>
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">状态：</text>
+          {{ meta.status }}
+        </view>
+        <view style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+          <text :selectable="true" style="font-weight: bolder">消息统计：</text>
+          发送 {{ meta.sendCount }}，接收 {{ meta.receiveCount }}，共 {{ meta.messageTotal }} 条
+        </view>
+        <template v-if="isExpanded(meta.id)">
+          <view v-if="meta.protocols" style="word-break: break-all; padding: 8px 0; margin-bottom: 10px">
+            <text :selectable="true" style="font-weight: bolder">协议：</text>
+            {{ meta.protocols }}
+          </view>
+          <view
+            v-if="getWebsocketLogDetail(meta.id)?.request?.header"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder">请求头：</text>
+            <awesome-display-info :log="getWebsocketLogDetail(meta.id)?.request?.header" />
+          </view>
+          <view
+            v-if="meta.isError && getWebsocketLogDetail(meta.id)?.errorInfo"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder; color: red">错误信息：</text>
+            <awesome-display-info :log="getWebsocketLogDetail(meta.id)?.errorInfo" />
+          </view>
+          <view
+            v-if="getMessageList(meta.id).length > 0"
+            style="word-break: break-all; padding: 8px 0; margin-bottom: 10px"
+          >
+            <text :selectable="true" style="font-weight: bolder">
+              消息列表（共 {{ meta.messageTotal }} 条，显示最近 100 条）：
+            </text>
+            <view
+              v-for="(msg, index) in getMessageList(meta.id)"
+              :key="index"
+              style="padding: 4px 0; font-size: 9px; color: #666"
+            >
+              <text :selectable="true">
+                [{{ formatTime(msg.time) }}] [{{ msg.type === 'send' ? '发送' : '接收' }}] {{ msg.size }}B
+              </text>
+              <view
+                v-if="msg.dataPreview"
+                style="margin-top: 2px; padding: 4px; background-color: #f5f5f5; border-radius: 2px"
+              >
+                {{ msg.dataPreview }}
+              </view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </uni-collapse-item>
+  </uni-collapse>
+  <view v-else class="empty-state">
+    {{ emptyText }}
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import awesomeDisplayInfo from './awesome-display-info.vue';
+  import { websocketSubject, getWebsocketLogs } from 'uniapp-log-sdk';
+
+  interface MessageRecord {
+    type: 'send' | 'receive';
+    data: string | ArrayBuffer;
+    time: number;
+    size: number;
+  }
+
+  interface WebsocketLog {
+    type: 'websocket';
+    connectionId: string;
+    request: {
+      url: string;
+      header?: unknown;
+      protocols?: string[];
+    };
+    response?: unknown;
+    messages: MessageRecord[];
+    stats: {
+      messageTotal: number;
+      messageSendCount: number;
+      messageReceiveCount: number;
+      droppedMessageCount: number;
+    };
+    startTime: number;
+    endTime: number;
+    openTime: number;
+    status: 'connecting' | 'open' | 'closed' | 'error';
+    errorInfo?: unknown;
+  }
+
+  interface WebsocketLogMeta {
+    id: string;
+    title: string;
+    url: string;
+    status: string;
+    messageTotal: number;
+    sendCount: number;
+    receiveCount: number;
+    protocols?: string;
+    duration: string;
+    isError: boolean;
+    isConnecting: boolean;
+  }
+
+  const MAX_WEBSOCKET_LOGS = 50;
+  const MESSAGE_PREVIEW_LENGTH = 100;
+
+  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 websocketLogDetailMap = shallowRef<Map<string, WebsocketLog>>(new Map());
+  const websocketLogMetas = ref<WebsocketLogMeta[]>([]);
+
+  const formatTime = (timestamp: number): string => {
+    const date = new Date(timestamp);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+    return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+  };
+
+  const buildWebsocketLogId = (log: WebsocketLog): string => {
+    // 使用 connectionId 作为唯一标识，避免同 URL 多连接的混淆
+    return log.connectionId;
+  };
+
+  const getMessagePreview = (data: string | ArrayBuffer): string => {
+    if (typeof data === 'string') {
+      return data.length > MESSAGE_PREVIEW_LENGTH ? data.substring(0, MESSAGE_PREVIEW_LENGTH) + '...' : data;
+    }
+    return `[ArrayBuffer(${data.byteLength})]`;
+  };
+
+  const buildMetaFromLog = (log: WebsocketLog): WebsocketLogMeta => {
+    const { startTime, endTime, request, status, stats, errorInfo } = log;
+    const timeStr = formatTime(startTime);
+    const duration = endTime && startTime ? `${((endTime - startTime) / 1000).toFixed(2)}s` : 'pending';
+    const isError = status === 'error' || (errorInfo !== null && errorInfo !== undefined);
+    const isConnecting = status === 'connecting';
+    const protocolStr = request?.protocols?.join(',') || '';
+
+    return {
+      id: buildWebsocketLogId(log),
+      title: `[${timeStr}] ${request?.url}；${duration}；${status}`,
+      url: request?.url ?? '',
+      status,
+      messageTotal: stats.messageTotal,
+      sendCount: stats.messageSendCount,
+      receiveCount: stats.messageReceiveCount,
+      protocols: protocolStr,
+      duration,
+      isError,
+      isConnecting,
+    };
+  };
+
+  const getActiveNameList = (): string[] => {
+    const value = activeNames.value;
+    return Array.isArray(value) ? value : value ? [value] : [];
+  };
+
+  const isExpanded = (id: string): boolean => getActiveNameList().includes(id);
+
+  const getWebsocketLogDetail = (id: string): WebsocketLog | null => {
+    return websocketLogDetailMap.value.get(id) ?? null;
+  };
+
+  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 normalizeKeyword = (value: string): string => value.trim().toLowerCase();
+
+  const matchesWebsocketLog = (meta: WebsocketLogMeta): boolean => {
+    const normalizedKeyword = normalizeKeyword(keyword.value);
+    if (!normalizedKeyword) return true;
+    const detail = getWebsocketLogDetail(meta.id);
+    return [meta.title, meta.url, meta.status, meta.protocols, safeStringify(detail?.errorInfo)]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalizedKeyword);
+  };
+
+  const filteredWebsocketLogMetas = computed(() => websocketLogMetas.value.filter(matchesWebsocketLog));
+
+  const emptyText = computed(() => {
+    if (keyword.value) return '无匹配结果';
+    if (hasCleared.value) return '已清空';
+    return '暂无日志';
+  });
+
+  const handleClear = () => {
+    clearTimestamp.value = Date.now();
+    hasCleared.value = true;
+    websocketLogMetas.value = [];
+    websocketLogDetailMap.value = new Map();
+    activeNames.value = [];
+  };
+
+  const handleClearKeyword = () => {
+    keyword.value = '';
+  };
+
+  const buildVisibleWebsocketLog = (log: WebsocketLog): WebsocketLog | null => {
+    if (!clearTimestamp.value) return log;
+
+    const hasConnectionLifecycleAfterClear =
+      log.startTime > clearTimestamp.value || log.openTime > clearTimestamp.value;
+    const hasNewError = Boolean(log.errorInfo) && (!log.endTime || log.endTime > clearTimestamp.value);
+
+    if (!hasConnectionLifecycleAfterClear && !hasNewError) {
+      return null;
+    }
+
+    return log;
+  };
+
+  const getMessageList = (id: string): Array<MessageRecord & { dataPreview: string }> => {
+    const log = getWebsocketLogDetail(id);
+    if (!log) return [];
+    return log.messages.map((msg) => ({
+      ...msg,
+      dataPreview: getMessagePreview(msg.data),
+    }));
+  };
+
+  const upsertLogs = (logs: WebsocketLog[]) => {
+    const visibleLogs = logs.map(buildVisibleWebsocketLog).filter((log): log is WebsocketLog => Boolean(log));
+
+    if (!visibleLogs.length && clearTimestamp.value && logs.length) {
+      websocketLogDetailMap.value = new Map();
+      websocketLogMetas.value = [];
+      activeNames.value = [];
+      return;
+    }
+
+    const nextLogs = visibleLogs.slice(-MAX_WEBSOCKET_LOGS);
+    const detailMap = websocketLogDetailMap.value;
+
+    const nextMetas: WebsocketLogMeta[] = [];
+    for (const log of nextLogs) {
+      const id = buildWebsocketLogId(log);
+      detailMap.set(id, log);
+      nextMetas.push(buildMetaFromLog(log));
+    }
+
+    websocketLogMetas.value = nextMetas;
+
+    // 清理 detailMap，避免无限增长
+    const keepIds = new Set(nextMetas.map((m) => m.id));
+    for (const key of detailMap.keys()) {
+      if (!keepIds.has(key)) detailMap.delete(key);
+    }
+  };
+
+  upsertLogs(getWebsocketLogs());
+
+  const stop = websocketSubject.subscribe((data: WebsocketLog[]) => {
+    upsertLogs(data);
+  });
+
+  // 展开项变化时刷新 collapse 高度缓存（小程序端必须手动调用，否则内容高度可能为 0）
+  watch(
+    () => getActiveNameList().join('|'),
+    () => {
+      // #ifdef MP
+      nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+  );
+
+  // 列表更新时，如果有已展开项（内容高度可能变化），同步刷新高度缓存
+  watch(
+    () => websocketLogMetas.value,
+    () => {
+      // #ifdef MP
+      if (getActiveNameList().length) nextTick(() => collapseRef.value?.resize?.());
+      // #endif
+    },
+    { deep: false },
+  );
+
+  watch(keyword, () => {
+    const keepIds = new Set(filteredWebsocketLogMetas.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(() => {
+    stop?.unsubscribe();
+  });
+</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;
+  }
+  ::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;
+    }
+    .uni-collapse-item-error {
+      .uni-collapse-item__title-text {
+        color: red !important;
+      }
+    }
+    .uni-collapse-item-connecting {
+      .uni-collapse-item__title-text {
+        color: #f90 !important;
+      }
+    }
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-oaview",
-  "version": "1.5.02",
+  "version": "1.7.00",
   "description": "uniapp小程序组件库",
   "main": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
@@ -51,13 +51,13 @@
     "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "^4.0.2",
-    "uniapp-log-sdk": "^1.7.2"
+    "uniapp-log-sdk": "^1.8.0"
   },
   "peerDependencies": {
     "@dcloudio/uni-ui": "^1.5.11",
     "@vueuse/core": "^9.12.0",
     "dayjs": "1.11.7",
-    "uniapp-log-sdk": "^1.7.2"
+    "uniapp-log-sdk": "^1.8.0"
   },
   "dependencies": {
     "element-china-area-data": "5.0.2"