feat: 快速消息支持备注

app/src/renderer/src/views/QuickSend.vue

@@ -15,6 +15,7 @@ const oldStorageKey = 'mqtt-client.quick-send-list';
  * @typedef {Object} QuickSendItem
  * @property {string} id
  * @property {string} topic
+ * @property {string} comment
  * @property {string} payload
  * @property {0|1|2} qos
  * @property {boolean} retain
@@ -34,6 +35,7 @@ const isEdit = ref(false);
 // 表单数据
 const formId = ref('');
 const formTopic = ref('');
+const formComment = ref('');
 const formPayload = ref('');
 const formQos = ref(1);
 const formRetain = ref(false);
@@ -121,6 +123,7 @@ function handleAdd() {
   isEdit.value = false;
   formId.value = '';
   formTopic.value = '';
+  formComment.value = '';
   formPayload.value = '';
   formQos.value = 1;
   formRetain.value = false;
@@ -135,6 +138,7 @@ function handleEdit(item) {
   isEdit.value = true;
   formId.value = item.id;
   formTopic.value = item.topic;
+  formComment.value = item.comment || '';
   formPayload.value = item.payload;
   formQos.value = item.qos;
   formRetain.value = item.retain;
@@ -153,6 +157,7 @@ function handleSave() {
     return;
   }
 
+  let comment = formComment.value.trim();
   let payload = formPayload.value;
   let qos = formQos.value;
   let retain = formRetain.value;
@@ -165,6 +170,7 @@ function handleSave() {
       quickList.value[idx] = {
         ...quickList.value[idx],
         topic,
+        comment,
         payload,
         qos,
         retain,
@@ -176,6 +182,7 @@ function handleSave() {
     quickList.value.push({
       id: generateId(),
       topic,
+      comment,
       payload,
       qos,
       retain,
@@ -608,6 +615,11 @@ onUnmounted(() => {
               >删除</n-button>
             </n-space>
           </div>
+          <div
+            v-if="item.comment"
+            class="quick-comment"
+            :title="item.comment"
+          >{{ item.comment }}</div>
           <pre
             v-if="item.payload"
             class="quick-payload"
@@ -642,6 +654,12 @@ onUnmounted(() => {
             placeholder="例如: sensor/device01/temperature"
           />
         </n-form-item>
+        <n-form-item label="备注">
+          <n-input
+            v-model:value="formComment"
+            placeholder="可选，用于标识该快速消息的用途"
+          />
+        </n-form-item>
         <n-grid
           cols="2"
           x-gap="12"
@@ -827,6 +845,15 @@ onUnmounted(() => {
   font-family: monospace;
 }
 
+.quick-comment {
+  margin-top: 8px;
+  color: var(--frost-color-text-secondary);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .quick-payload {
   margin: 10px 0 0;
   padding: 8px 10px;