feat: add hr update debounce and add message

package.json

@@ -14,7 +14,8 @@
     "@vueuse/core": "^10.11.0",
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.0",
+    "vue3-snackbar": "^2.3.2"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       vue-router:
         specifier: ^4.4.0
         version: 4.4.0(vue@3.4.31(typescript@5.5.3))
+      vue3-snackbar:
+        specifier: ^2.3.2
+        version: 2.3.2(vue@3.4.31(typescript@5.5.3))
     devDependencies:
       '@tauri-apps/cli':
         specifier: ^1
@@ -965,6 +968,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
   to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1066,6 +1072,14 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue3-icon@2.1.0:
+    resolution: {integrity: sha512-cnFiGAEwzp/KQKody2Yj8cBDP4Kez0AUp5mDnp052FA1fECl8a9uYUKLaeRdH0JakmZ7Jfp3tdHbpBEWF9sgBA==}
+
+  vue3-snackbar@2.3.2:
+    resolution: {integrity: sha512-U5U8gJbt6NWNXT/e6lbuFGLuzmSuNSSnP0R+X+1RfqwyTLK3SYW5TFWH1IO5/eLezLUoOW6kHvEkixk/MUwnqw==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vue@3.4.31:
     resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
     peerDependencies:
@@ -1920,6 +1934,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tiny-emitter@2.1.0: {}
+
   to-fast-properties@2.0.0: {}
 
   to-regex-range@5.0.1:
@@ -1998,6 +2014,14 @@ snapshots:
       semver: 7.6.2
       typescript: 5.5.3
 
+  vue3-icon@2.1.0: {}
+
+  vue3-snackbar@2.3.2(vue@3.4.31(typescript@5.5.3)):
+    dependencies:
+      tiny-emitter: 2.1.0
+      vue: 3.4.31(typescript@5.5.3)
+      vue3-icon: 2.1.0
+
   vue@3.4.31(typescript@5.5.3):
     dependencies:
       '@vue/compiler-dom': 3.4.31

src/App.vue

@@ -2,26 +2,22 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { listen } from "@tauri-apps/api/event";
 import { Device, useBrcatStore } from "./stores";
+import { useSnackbar, Vue3Snackbar } from 'vue3-snackbar';
 
 const store = useBrcatStore();
+const snackbar = useSnackbar();
 
 invoke("register_central_events");
 
-listen("scan-list-update", (event) => {
-  console.log('scan-list-update', event.payload);
-})
-
 listen("device-discovered", (event) => {
-  const device = event.payload as Device
-  store.pushDevice(device);
+    store.pushDevice(event.payload as Device);
 })
 
-listen("device-connected", (event) => {
-  console.log('device-connected', event.payload);
+listen("device-disconnected", (_) => {
+  snackbar.add({
+    type: 'warning',
+    text: '设备已断开连接',
   })
-
-listen("device-disconnected", (event) => {
-  console.log('device-disconnected', event.payload);
 })
 </script>
 
@@ -36,6 +32,7 @@ listen("device-disconnected", (event) => {
         </Transition>
       </RouterView>
     </DrawerContainer>
+    <Vue3Snackbar bottom right shadow :duration="5000"></Vue3Snackbar>
   </div>
 </template>
 

src/main.ts

@@ -1,6 +1,8 @@
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 import { createPinia } from "pinia";
+import { SnackbarService } from "vue3-snackbar";
+import "vue3-snackbar/styles";
 
 import App from "./App.vue";
 
@@ -21,4 +23,4 @@ const router = createRouter({
 });
 
 const pinia = createPinia();
-createApp(App).use(router).use(pinia).mount("#app");
+createApp(App).use(router).use(pinia).use(SnackbarService).mount("#app");

src/pages/index.vue

@@ -2,9 +2,11 @@
 import { invoke } from '@tauri-apps/api/tauri';
 import { message } from '@tauri-apps/api/dialog';
 import { useBrcatStore } from '../stores';
-import { computed, onMounted, ref } from 'vue';
+import { computed, h, onMounted, ref } from 'vue';
+import { useSnackbar } from 'vue3-snackbar';
 
 const store = useBrcatStore();
+const snackbar = useSnackbar();
 const is_connecting = ref(false);
 
 const scanning_devices = computed(() => store.scanning_devices.filter(d => d.name !== 'Unknown'));
@@ -14,9 +16,9 @@ async function connect(address: String) {
   store.stopScan();
   invoke('connect', { address })
     .catch(err => {
-      message(`${err}`, {
+      snackbar.add({
         type: 'error',
-        title: '连接设备失败'
+        text: `连接设备失败: ${err}`
       });
       store.startScan();
     }).finally(() => {

src/stores/index.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { onMounted, ref, watchEffect } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
 import { listen } from "@tauri-apps/api/event";
-import { useThrottleFn } from "@vueuse/core";
+import { useThrottleFn, useDebounceFn } from "@vueuse/core";
 
 export interface Device {
   name: string;
@@ -20,13 +20,18 @@ export const useBrcatStore = defineStore("brcat", () => {
 
   const current_heart_rate = ref<Number>(0);
 
+  const resetCurrentHeartRate = useDebounceFn(() => {
+    current_heart_rate.value = 0;
+  }, 6000);
+
   onMounted(async () => {
     const unlisten = await listen("heart-rate", (heart_rate) => {
+      resetCurrentHeartRate();
       current_heart_rate.value = heart_rate.payload as Number;
     });
 
     return unlisten;
-  })
+  });
 
   setInterval(async () => {
     is_connected.value = await invoke("is_connected");

src/types.d.ts

@@ -0,0 +1,23 @@
+declare module "vue3-snackbar" {
+  import { App } from "vue";
+  export class SnackbarService {
+    static install(app: App): void;
+  }
+
+  export const Vue3Snackbar: any;
+
+  export interface useSnackbarOptions {
+    type?: "success" | "error" | "warning" | "info";
+    background?: string;
+    title?: string;
+    text: string;
+    dismissable?: boolean;
+    icon?: Object;
+    action?: Object;
+  }
+
+  export function useSnackbar(): {
+    add: (options: useSnackbarOptions) => void;
+    clear(): void;
+  };
+}