From d0bf0e5b078c3fb3e0b4b41fccdf1bf0708ae9c8 Mon Sep 17 00:00:00 2001 From: HoshinoSuzumi Date: Thu, 18 Jul 2024 03:12:44 +0800 Subject: [PATCH] feat: add hr update debounce and add message --- package.json | 3 ++- pnpm-lock.yaml | 24 ++++++++++++++++++++++++ src/App.vue | 21 +++++++++------------ src/main.ts | 4 +++- src/pages/index.vue | 8 +++++--- src/stores/index.ts | 9 +++++++-- src/types.d.ts | 23 +++++++++++++++++++++++ 7 files changed, 73 insertions(+), 19 deletions(-) create mode 100644 src/types.d.ts diff --git a/package.json b/package.json index 69d5cd3..2c3be81 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2fa073f..26ab74d 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/App.vue b/src/App.vue index 0bd3eaf..501c689 100644 --- a/src/App.vue +++ b/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", (event) => { - console.log('device-disconnected', event.payload); +listen("device-disconnected", (_) => { + snackbar.add({ + type: 'warning', + text: '设备已断开连接', + }) }) @@ -36,6 +32,7 @@ listen("device-disconnected", (event) => { + diff --git a/src/main.ts b/src/main.ts index 449fd1f..fc4d896 100644 --- a/src/main.ts +++ b/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"); diff --git a/src/pages/index.vue b/src/pages/index.vue index 5e5c6ae..5ea7ba8 100644 --- a/src/pages/index.vue +++ b/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(() => { diff --git a/src/stores/index.ts b/src/stores/index.ts index 8048fb1..f624f96 100644 --- a/src/stores/index.ts +++ b/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(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"); diff --git a/src/types.d.ts b/src/types.d.ts new file mode 100644 index 0000000..5ff6a4d --- /dev/null +++ b/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; + }; +}