日志内容滚动

pages/demo/index.vue

@@ -16,7 +16,7 @@
             <text class="clear-icon" @click="clearInput('broker')" v-if="mqttConfig.broker">×</text>
           </view>
         </view>
-        <view class="form-item">
+        <view class="form-item" v-if="false">
           <label>客户端ID：</label>
           <view class="input-wrapper">
             <input
@@ -52,7 +52,7 @@
             <text class="clear-icon" @click="clearInput('password')" v-if="mqttConfig.password">×</text>
           </view>
         </view>
-        <view class="form-item">
+        <view class="form-item" v-if="false">
           <label>连接超时：</label>
           <view class="input-wrapper">
             <input
@@ -126,6 +126,7 @@
       </view>
     </view>
 
+
     <!-- 消息日志区域 -->
     <view class="log-section">
       <view class="section-title">消息日志</view>
@@ -175,8 +176,20 @@
         >
           <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>
@@ -664,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 {
@@ -692,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>