日志内容滚动

# Conflicts:
#	pages/demo/index.vue

pages/demo/index.vue

@@ -126,10 +126,25 @@
       </view>
     </view>
 
+
     <!-- 消息日志区域 -->
     <view class="log-section">
-      <view class="section-title-wrapper">
       <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"
@@ -140,25 +155,41 @@
           清空日志
         </button>
       </view>
+
+      <!-- 日志内容区域 -->
       <scroll-view
           class="log-content"
           scroll-y="true"
           :style="{height: logHeight + 'px'}"
       >
         <!-- 空日志提示 -->
-        <view class="empty-log-tip" v-if="messageLogs.length === 0">
+        <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'}"
         >
           <view class="log-time">{{log.time}}</view>
           <view class="log-type">{{log.type === 'received' ? '接收' : log.type === 'sent' ? '发送' : '系统'}}</view>
-          <view class="log-topic">主题：{{log.topic}}</view>
+          <!-- 主题区域 - 支持横向滚动 -->
-          <view class="log-message">内容：{{log.message}}</view>
+          <view class="log-row">
+            <text class="log-label">主题：</text>
+            <view class="log-content-scroll">
+              {{log.topic}}
+            </view>
+          </view>
+          <!-- 消息内容区域 - 支持横向滚动 -->
+          <view class="log-row">
+            <text class="log-label">内容：</text>
+            <view class="log-content-scroll">
+              {{log.message}}
+            </view>
+          </view>
         </view>
       </scroll-view>
     </view>
@@ -196,8 +227,6 @@
         发布消息
       </button>
     </view>
-
-
   </view>
 </template>
 
@@ -226,14 +255,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 // 调整高度适配过滤栏
       }
     })
   },
@@ -261,6 +305,7 @@ export default {
         success: (res) => {
           if (res.confirm) {
             this.messageLogs = []
+            this.logFilterKeyword = '' // 清空过滤关键词
             uni.showToast({
               title: '日志已清空',
               icon: 'success',
@@ -476,28 +521,34 @@ export default {
   margin-bottom: 15px;
 }
 
-/* 日志区域标题容器 - 包含标题和清空按钮 */
-.section-title-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
 .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: 30px;
+  height: 40px;
-  line-height: 30px;
+  line-height: 40px;
-  padding: 0 10px;
+  padding: 0 15px;
+  white-space: nowrap;
 }
 
 .form-item {
@@ -526,6 +577,10 @@ export default {
   border-radius: 4px;
   padding: 0 30px 0 10px; /* 右侧留出清除按钮空间 */
   font-size: 14px;
+  /* 开启横向滚动 */
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* 顺滑滚动 */
 }
 
 /* 文本域容器 */
@@ -622,21 +677,19 @@ export default {
   border-bottom: 1px solid #eee;
   margin-bottom: 5px;
   font-size: 14px;
+  border-radius: 4px;
 }
 
 .log-item.received {
   background-color: #e8f5e9;
-  border-radius: 4px;
 }
 
 .log-item.sent {
   background-color: #e3f2fd;
-  border-radius: 4px;
 }
 
 .log-item.system {
   background-color: #fff8e1;
-  border-radius: 4px;
 }
 
 .log-time {
@@ -650,12 +703,41 @@ export default {
   margin-bottom: 3px;
 }
 
-.log-topic {
+/* 日志行容器 - 标签+滚动内容 */
-  color: #666;
+.log-row {
+  display: flex;
+  align-items: flex-start;
   margin-bottom: 3px;
+  width: 100%;
 }
 
-.log-message {
+/* 日志标签（主题：/内容：） */
+.log-label {
+  color: #666;
+  flex-shrink: 0; /* 标签不收缩 */
+  margin-right: 5px;
+}
+
+/* 日志内容滚动容器 */
+.log-content-scroll {
+  flex: 1;
+  white-space: nowrap; /* 不换行 */
+  overflow-x: auto; /* 横向滚动 */
+  -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
+  padding-bottom: 2px;
   color: #333;
+  /* 隐藏滚动条但保留滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* 隐藏Chrome等浏览器的滚动条 */
+.log-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* 修复之前的样式冲突 */
+.log-topic, .log-message {
+  display: none;
 }
 </style>