日志清除框

pages/demo/index.vue

@@ -128,12 +128,27 @@
 
     <!-- 消息日志区域 -->
     <view class="log-section">
-      <view class="section-title">消息日志</view>
+      <view class="section-title-wrapper">
+        <view class="section-title">消息日志</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="messageLogs.length === 0">
+          暂无消息日志
+        </view>
         <view
             class="log-item"
             v-for="(log, index) in messageLogs"
@@ -238,6 +253,24 @@ export default {
       }
     },
 
+    // 清空所有消息日志
+    clearAllLogs() {
+      uni.showModal({
+        title: '确认清空',
+        content: '是否确定清空所有消息日志？',
+        success: (res) => {
+          if (res.confirm) {
+            this.messageLogs = []
+            uni.showToast({
+              title: '日志已清空',
+              icon: 'success',
+              duration: 1500
+            })
+          }
+        }
+      })
+    },
+
     // 添加日志
     addLog(type, topic, message) {
       const time = new Date().toLocaleTimeString()
@@ -443,6 +476,14 @@ 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;
@@ -452,6 +493,13 @@ export default {
   padding-bottom: 8px;
 }
 
+/* 清空日志按钮样式 */
+.clear-log-btn {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+}
+
 .form-item {
   display: flex;
   flex-direction: column;
@@ -561,6 +609,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;