pages/demo/index.vue

@@ -126,25 +126,10 @@
       </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"
@@ -155,41 +140,25 @@
           清空日志
         </button>
       </view>
-
-      <!-- 日志内容区域 -->
       <scroll-view
           class="log-content"
           scroll-y="true"
           :style="{height: logHeight + 'px'}"
       >
         <!-- 空日志提示 -->
-        <view class="empty-log-tip" v-if="filteredLogs.length === 0">
+        <view class="empty-log-tip" v-if="messageLogs.length === 0">
-          {{messageLogs.length === 0 ? '暂无消息日志' : '未找到匹配的日志内容'}}
+          暂无消息日志
         </view>
-
-        <!-- 过滤后的日志列表 -->
         <view
             class="log-item"
-            v-for="(log, index) in filteredLogs"
+            v-for="(log, index) in messageLogs"
             :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-row">
+          <view class="log-message">内容：{{log.message}}</view>
-            <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>
@@ -227,6 +196,8 @@
         发布消息
       </button>
     </view>
+
+
   </view>
 </template>
 
@@ -255,29 +226,14 @@ 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 - 650 // 调整高度适配过滤栏
+        this.logHeight = res.windowHeight - 600
       }
     })
   },
@@ -305,7 +261,6 @@ export default {
         success: (res) => {
           if (res.confirm) {
             this.messageLogs = []
-            this.logFilterKeyword = '' // 清空过滤关键词
             uni.showToast({
               title: '日志已清空',
               icon: 'success',
@@ -521,34 +476,28 @@ 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: 40px;
+  height: 30px;
-  line-height: 40px;
+  line-height: 30px;
-  padding: 0 15px;
+  padding: 0 10px;
-  white-space: nowrap;
 }
 
 .form-item {
@@ -577,10 +526,6 @@ export default {
   border-radius: 4px;
   padding: 0 30px 0 10px; /* 右侧留出清除按钮空间 */
   font-size: 14px;
-  /* 开启横向滚动 */
-  white-space: nowrap;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch; /* 顺滑滚动 */
 }
 
 /* 文本域容器 */
@@ -677,19 +622,21 @@ 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 {
@@ -703,41 +650,12 @@ export default {
   margin-bottom: 3px;
 }
 
-/* 日志行容器 - 标签+滚动内容 */
+.log-topic {
-.log-row {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 3px;
-  width: 100%;
-}
-
-/* 日志标签（主题：/内容：） */
-.log-label {
   color: #666;
-  flex-shrink: 0; /* 标签不收缩 */
+  margin-bottom: 3px;
-  margin-right: 5px;
 }
 
-/* 日志内容滚动容器 */
+.log-message {
-.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>