加清除框

pages/demo/index.vue

@@ -6,48 +6,63 @@
       <form @submit="handleConnect">
         <view class="form-item">
           <label>服务器地址：</label>
-          <input
-              v-model="mqttConfig.broker"
-              type="text"
-              placeholder="如：ws://test.mosquitto.org:8080/mqtt"
-              class="form-input"
-          />
+          <view class="input-wrapper">
+            <input
+                v-model="mqttConfig.broker"
+                type="text"
+                placeholder="如：ws://test.mosquitto.org:8080/mqtt"
+                class="form-input"
+            />
+            <text class="clear-icon" @click="clearInput('broker')" v-if="mqttConfig.broker">×</text>
+          </view>
         </view>
         <view class="form-item" v-if="false">
           <label>客户端ID：</label>
-          <input
-              v-model="mqttConfig.clientId"
-              type="text"
-              placeholder="自动生成或自定义"
-              class="form-input"
-          />
+          <view class="input-wrapper">
+            <input
+                v-model="mqttConfig.clientId"
+                type="text"
+                placeholder="自动生成或自定义"
+                class="form-input"
+            />
+            <text class="clear-icon" @click="clearInput('clientId')" v-if="mqttConfig.clientId">×</text>
+          </view>
         </view>
         <view class="form-item">
           <label>用户名：</label>
-          <input
-              v-model="mqttConfig.username"
-              type="text"
-              placeholder="可选"
-              class="form-input"
-          />
+          <view class="input-wrapper">
+            <input
+                v-model="mqttConfig.username"
+                type="text"
+                placeholder="可选"
+                class="form-input"
+            />
+            <text class="clear-icon" @click="clearInput('username')" v-if="mqttConfig.username">×</text>
+          </view>
         </view>
         <view class="form-item">
           <label>密码：</label>
-          <input
-              v-model="mqttConfig.password"
-              type="password"
-              placeholder="可选"
-              class="form-input"
-          />
+          <view class="input-wrapper">
+            <input
+                v-model="mqttConfig.password"
+                type="password"
+                placeholder="可选"
+                class="form-input"
+            />
+            <text class="clear-icon" @click="clearInput('password')" v-if="mqttConfig.password">×</text>
+          </view>
         </view>
         <view class="form-item" v-if="false">
           <label>连接超时：</label>
-          <input
-              v-model.number="mqttConfig.timeout"
-              type="number"
-              placeholder="默认30秒"
-              class="form-input"
-          />
+          <view class="input-wrapper">
+            <input
+                v-model.number="mqttConfig.timeout"
+                type="number"
+                placeholder="默认30秒"
+                class="form-input"
+            />
+            <text class="clear-icon" @click="clearInput('timeout')" v-if="mqttConfig.timeout">×</text>
+          </view>
         </view>
 
         <view class="btn-group">
@@ -74,12 +89,15 @@
       <view class="section-title">主题订阅</view>
       <view class="form-item">
         <label>订阅主题：</label>
-        <input
-            v-model="subscribeTopic"
-            type="text"
-            placeholder="如：test/topic"
-            class="form-input"
-        />
+        <view class="input-wrapper">
+          <input
+              v-model="subscribeTopic"
+              type="text"
+              placeholder="如：test/topic"
+              class="form-input"
+          />
+          <text class="clear-icon" @click="subscribeTopic = ''" v-if="subscribeTopic">×</text>
+        </view>
       </view>
       <button
           type="primary"
@@ -108,7 +126,6 @@
       </view>
     </view>
 
-
     <!-- 消息日志区域 -->
     <view class="log-section">
       <view class="section-title">消息日志</view>
@@ -131,26 +148,31 @@
       </scroll-view>
     </view>
 
-
     <!-- 发布消息区域 -->
     <view class="publish-section" v-if="isConnected">
       <view class="section-title">发布消息</view>
       <view class="form-item">
         <label>发布主题：</label>
-        <input
-            v-model="publishTopic"
-            type="text"
-            placeholder="如：test/topic"
-            class="form-input"
-        />
+        <view class="input-wrapper">
+          <input
+              v-model="publishTopic"
+              type="text"
+              placeholder="如：test/topic"
+              class="form-input"
+          />
+          <text class="clear-icon" @click="publishTopic = ''" v-if="publishTopic">×</text>
+        </view>
       </view>
       <view class="form-item">
         <label>消息内容：</label>
-        <textarea
-            v-model="publishMessage"
-            placeholder="输入要发布的消息内容"
-            class="form-textarea"
-        ></textarea>
+        <view class="textarea-wrapper">
+          <textarea
+              v-model="publishMessage"
+              placeholder="输入要发布的消息内容"
+              class="form-textarea"
+          ></textarea>
+          <text class="clear-icon textarea-clear" @click="publishMessage = ''" v-if="publishMessage">×</text>
+        </view>
       </view>
       <button
           type="primary"
@@ -207,6 +229,15 @@ export default {
     }
   },
   methods: {
+    // 清除配置项输入框内容
+    clearInput(field) {
+      if (field === 'timeout') {
+        this.mqttConfig[field] = ''
+      } else {
+        this.$set(this.mqttConfig, field, '')
+      }
+    },
+
     // 添加日志
     addLog(type, topic, message) {
       const time = new Date().toLocaleTimeString()
@@ -322,7 +353,7 @@ export default {
 
       this.client.subscribe(this.subscribeTopic, (error) => {
         if (error) {
-          this.addLog('system', '', '订阅失败：' + error.message)
+          this.addLog('system', this.subscribeTopic, '订阅失败：' + error.message)
           uni.showToast({
             title: '订阅失败',
             icon: 'none'
@@ -433,20 +464,61 @@ export default {
   margin-bottom: 5px;
 }
 
+/* 输入框容器 - 包含清除按钮 */
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
 .form-input {
+  flex: 1;
   height: 40px;
   border: 1px solid #ddd;
   border-radius: 4px;
-  padding: 0 10px;
+  padding: 0 30px 0 10px; /* 右侧留出清除按钮空间 */
   font-size: 14px;
 }
 
+/* 文本域容器 */
+.textarea-wrapper {
+  position: relative;
+}
+
 .form-textarea {
+  width: 100%;
   border: 1px solid #ddd;
   border-radius: 4px;
-  padding: 10px;
+  padding: 10px 30px 10px 10px; /* 右侧留出清除按钮空间 */
   font-size: 14px;
   min-height: 100px;
+  box-sizing: border-box;
+}
+
+/* 清除按钮样式 */
+.clear-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+  z-index: 10;
+}
+
+/* 文本域清除按钮位置调整 */
+.textarea-clear {
+  top: 10px;
+  transform: none;
+}
+
+.clear-icon:hover {
+  color: #f00;
 }
 
 .btn-group {