From 59a7d269ae9d05580dd06a701502becc4f3dfa16 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Mon, 29 Dec 2025 00:23:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=86=85=E5=AE=B9=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/demo/index.vue | 60 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 10 deletions(-)

diff --git a/pages/demo/index.vue b/pages/demo/index.vue
index 37f1562..416e6d4 100644
--- a/pages/demo/index.vue
+++ b/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>
\ No newline at end of file