添加日志过滤框

pages/demo/index.vue

@@ -126,17 +126,51 @@
       </view>
     </view>
 
+
     <!-- 消息日志区域 -->
     <view class="log-section">
       <view class="section-title">消息日志</view>
+
+      <!-- 日志过滤和清空区域 -->
+      <view class="log-filter-wrapper">
+        <!-- 主题过滤输入框 -->
+        <view class="input-wrapper filter-input">
+          <input
+              v-model="logFilterKeyword"
+              type="text"
+              placeholder="输入主题关键词过滤日志（模糊匹配）"
+              class="form-input"
+          />
+          <text class="clear-icon" @click="logFilterKeyword = ''" v-if="logFilterKeyword">×</text>
+        </view>
+
+        <!-- 清空日志按钮 -->
+        <button
+            size="mini"
+            type="warn"
+            @click="clearAllLogs"
+            :disabled="messageLogs.length === 0"
+            class="clear-log-btn"
+        >
+          清空日志
+        </button>
+      </view>
+
+      <!-- 日志内容区域 -->
       <scroll-view
           class="log-content"
           scroll-y="true"
           :style="{height: logHeight + 'px'}"
       >
+        <!-- 空日志提示 -->
+        <view class="empty-log-tip" v-if="filteredLogs.length === 0">
+          {{messageLogs.length === 0 ? '暂无消息日志' : '未找到匹配的日志内容'}}
+        </view>
+
+        <!-- 过滤后的日志列表 -->
         <view
             class="log-item"
-            v-for="(log, index) in messageLogs"
+            v-for="(log, index) in filteredLogs"
             :key="index"
             :class="{'received': log.type === 'received', 'sent': log.type === 'sent', 'system': log.type === 'system'}"
         >
@@ -211,14 +245,29 @@ export default {
       publishMessage: '',
       // 消息日志
       messageLogs: [],
-      logHeight: 300 // 日志区域高度
+      logHeight: 300, // 日志区域高度
+      // 日志过滤
+      logFilterKeyword: '' // 日志过滤关键词
+    }
+  },
+  computed: {
+    // 过滤后的日志列表
+    filteredLogs() {
+      if (!this.logFilterKeyword) {
+        return this.messageLogs
+      }
+      // 模糊匹配主题（不区分大小写）
+      const keyword = this.logFilterKeyword.toLowerCase()
+      return this.messageLogs.filter(log => {
+        return log.topic.toLowerCase().includes(keyword)
+      })
     }
   },
   onReady() {
     // 计算日志区域高度
     uni.getSystemInfo({
       success: (res) => {
-        this.logHeight = res.windowHeight - 600
+        this.logHeight = res.windowHeight - 650 // 调整高度适配过滤栏
       }
     })
   },
@@ -238,6 +287,25 @@ export default {
       }
     },
 
+    // 清空所有消息日志
+    clearAllLogs() {
+      uni.showModal({
+        title: '确认清空',
+        content: '是否确定清空所有消息日志？',
+        success: (res) => {
+          if (res.confirm) {
+            this.messageLogs = []
+            this.logFilterKeyword = '' // 清空过滤关键词
+            uni.showToast({
+              title: '日志已清空',
+              icon: 'success',
+              duration: 1500
+            })
+          }
+        }
+      })
+    },
+
     // 添加日志
     addLog(type, topic, message) {
       const time = new Date().toLocaleTimeString()
@@ -446,10 +514,31 @@ export default {
 .section-title {
   font-size: 16px;
   font-weight: bold;
-  margin-bottom: 15px;
   color: #333;
   border-bottom: 1px solid #eee;
   padding-bottom: 8px;
+  margin-bottom: 15px;
+}
+
+/* 日志过滤和清空区域 */
+.log-filter-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+/* 过滤输入框 */
+.filter-input {
+  flex: 1;
+}
+
+/* 清空日志按钮 */
+.clear-log-btn {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+  white-space: nowrap;
 }
 
 .form-item {
@@ -478,6 +567,10 @@ export default {
   border-radius: 4px;
   padding: 0 30px 0 10px; /* 右侧留出清除按钮空间 */
   font-size: 14px;
+  /* 开启横向滚动 */
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* 顺滑滚动 */
 }
 
 /* 文本域容器 */
@@ -561,6 +654,14 @@ export default {
   padding: 10px;
 }
 
+/* 空日志提示 */
+.empty-log-tip {
+  text-align: center;
+  color: #999;
+  padding: 20px 0;
+  font-size: 14px;
+}
+
 .log-item {
   padding: 8px;
   border-bottom: 1px solid #eee;