HoshinoSuzumi/heartbeatcat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: index placeholder when connected

Browse Source
This commit is contained in:
Timothy Yin
2024-07-18 03:45:07 +08:00
parent d0bf0e5b07
commit 38cbb41bd1
3 changed files with 43 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@@ -26,6 +26,7 @@ declare module 'vue' {
TablerCaretDownFilled: typeof import('./src/components/icons/TablerCaretDownFilled.vue')['default']
TablerCaretUpFilled: typeof import('./src/components/icons/TablerCaretUpFilled.vue')['default']
TablerDeviceWatch: typeof import('./src/components/icons/TablerDeviceWatch.vue')['default']
TablerHeartbeat: typeof import('./src/components/icons/TablerHeartbeat.vue')['default']
TablerReload: typeof import('./src/components/icons/TablerReload.vue')['default']
}
}

10
src/components/icons/TablerHeartbeat.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19.5 13.572L12 21l-2.896-2.868m-6.117-8.104A5 5 0 0 1 12 7.006a5 5 0 1 1 7.5 6.572"></path><path d="M3 13h2l2 3l2-6l1 3h3"></path></g></svg>
</template>
<script>
export default {
name: 'TablerHeartbeat'
}
</script>

42
src/pages/index.vue
View File

@@ -1,8 +1,7 @@
<script lang="ts" setup>
import { invoke } from '@tauri-apps/api/tauri';
import { message } from '@tauri-apps/api/dialog';
import { useBrcatStore } from '../stores';
import { computed, h, onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useSnackbar } from 'vue3-snackbar';
const store = useBrcatStore();
@@ -37,22 +36,45 @@ onMounted(() => {
<PageContainer title="设备连接" content-class="relative">
<template #actions>
<div class="flex">
<button class="text-[var(--primary-color)]"
<button class="text-[var(--primary-color)]" v-if="!store.is_connected"
@click="() => store.is_scanning ? store.stopScan() : store.startScan()">
<TablerReload :class="{ 'animate-spin': store.is_scanning }" />
</button>
</div>
</template>
<Transition name="fade">
<div v-if="store.is_connected" class="w-full h-full flex flex-col gap-4 justify-center items-center bg-white">
<TablerBluetoothConnected class="icon text-5xl text-emerald-500" />
<span class="flex flex-col items-center">
<span class="text-base font-semibold">{{ store.connected_device?.name }}</span>
<span class="text-sm font-semibold text-neutral-400">已连接到设备</span>
</span>
<div class="flex items-center gap-2">
<div v-if="store.is_connected" class="w-full h-full flex flex-col bg-white">
<div class="px-4 pl-3.5 py-2 border-b flex justify-between items-center">
<div class="flex items-center gap-1">
<TablerBluetoothConnected class="icon text-lg text-emerald-500" />
<span class="text-xs font-semibold text-neutral-500">已连接到 {{ store.connected_device?.name }}</span>
</div>
<button class="btn outline" @click="invoke('disconnect')">断开连接</button>
</div>
<div class="flex-1 flex flex-col justify-center items-center px-4 py-2">
<img src="/favicon_256.ico" class="w-40 aspect-square opacity-30" />
<!-- <div class="w-full grid grid-cols-3 gap-4">
<div
class="px-4 py-3 rounded shadow-sm hover:shadow-md cursor-pointer transition bg-gradient-to-br from-neutral-50 to-primary-100">
<TablerHeartbeat class="text-primary text-5xl opacity-80 bg-primary-100 p-2 rounded-xl" />
<span class="text-sm font-semibold text-neutral-500">心率</span>
</div>
<div
class="px-4 py-3 rounded shadow-sm hover:shadow-md cursor-pointer transition bg-gradient-to-br from-neutral-50 to-primary-100">
<TablerHeartbeat class="text-primary text-5xl opacity-80 bg-primary-100 p-2 rounded-xl" />
<span class="text-sm font-semibold text-neutral-500">心率</span>
</div>
<div
class="px-4 py-3 rounded shadow-sm hover:shadow-md cursor-pointer transition bg-gradient-to-br from-neutral-50 to-primary-100">
<TablerHeartbeat class="text-primary text-5xl opacity-80 bg-primary-100 p-2 rounded-xl" />
<span class="text-sm font-semibold text-neutral-500">心率</span>
</div>
</div> -->
</div>
</div>
<div v-else-if="store.is_scanning && scanning_devices.length === 0"
class="w-full h-full flex flex-col gap-4 justify-center items-center">