feat(uart) clear RX/TX byte count on click

src/stores/dataViewerStore.ts

@@ -442,6 +442,16 @@ export const useDataViewerStore = defineStore('text-viewer', () => {
     let RxByteCountLocal = 0;
     let RxTotalByteCountLocal = 0;
 
+    function clearRxCounter() {
+        RxByteCountLocal = 0;
+        RxTotalByteCountLocal = 0;
+    }
+
+    function clearTxCounter() {
+        TxByteCountLocal = 0;
+        TxTotalByteCountLocal = 0;
+    }
+
     const enableFilter = ref(true);
     const forceToBottom = ref(true);
     const filterChanged = ref(false);
@@ -745,6 +755,8 @@ export const useDataViewerStore = defineStore('text-viewer', () => {
         RxTotalByteCount,
         TxByteCount,
         TxTotalByteCount,
+        clearRxCounter,
+        clearTxCounter,
         forceToBottom,
         filterChanged,
 

src/views/text-data-viewer/textDataViewer.vue

@@ -207,12 +207,12 @@
       </el-link>
     </div>
     <div class="flex gap-2">
-      <el-link>
+      <el-link @click="store.clearTxCounter()">
         <el-tag class="font-mono font-bold" size="small">
           {{ `TX(B):${store.TxByteCount}/ ${store.TxTotalByteCount}` }}
         </el-tag>
       </el-link>
-      <el-link type="success">
+      <el-link type="success" @click="store.clearRxCounter()">
         <el-tag class="font-mono font-bold" size="small" type="success">
           {{ `RX(B):${store.RxByteCount}/ ${store.RxTotalByteCount}` }}
         </el-tag>