uni-oaview 1.6.0 → 1.7.1

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';
 
@@ -79,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[]>([]);
@@ -133,15 +146,85 @@
     return networkLogDetailMap.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 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 nextLogs = httpLogs.slice(-MAX_NETWORK_LOGS);
+    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[] = [];
@@ -158,14 +241,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(getNetworkLogs());
@@ -195,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/websocket.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="filteredWebsocketLogMetas.length" ref="collapseRef" v-model="activeNames">
     <uni-collapse-item
-      v-for="meta in websocketLogMetas"
+      v-for="meta in filteredWebsocketLogMetas"
       :key="meta.id"
       :name="meta.id"
       :title="meta.title"
@@ -69,10 +76,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 { websocketSubject, getWebsocketLogs } from 'uniapp-log-sdk';
 
@@ -125,6 +135,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 websocketLogDetailMap = shallowRef<Map<string, WebsocketLog>>(new Map());
   const websocketLogMetas = ref<WebsocketLogMeta[]>([]);
@@ -184,6 +197,62 @@
     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 [];
@@ -194,7 +263,16 @@
   };
 
   const upsertLogs = (logs: WebsocketLog[]) => {
-    const nextLogs = logs.slice(-MAX_WEBSOCKET_LOGS);
+    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[] = [];
@@ -211,14 +289,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(getWebsocketLogs());
@@ -248,12 +318,85 @@
     { 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;
   }

package/package.json

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