feat(mp): 首页设备状态卡片组件 — 血压计/血糖仪快捷入口

2026-04-28 19:42:24 +08:00
parent 00f615d8e5
commit 601b2d7f52
3 changed files with 109 additions and 5 deletions
--- a/apps/miniprogram/src/components/DeviceCard/index.scss
+++ b/apps/miniprogram/src/components/DeviceCard/index.scss
@@ -0,0 +1,51 @@
+@import '../../styles/variables.scss';
+
+.device-card {
+  display: flex;
+  align-items: center;
+  padding: 24rpx;
+  background: $card;
+  border-radius: $r;
+  margin-bottom: 16rpx;
+  box-shadow: $shadow-sm;
+
+  .device-icon {
+    font-size: 48rpx;
+    margin-right: 20rpx;
+  }
+
+  .device-info {
+    flex: 1;
+
+    .device-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: $tx;
+      display: block;
+    }
+
+    .device-status {
+      font-size: 24rpx;
+      margin-top: 4rpx;
+      display: block;
+
+      &.connected { color: $pri; }
+      &.idle { color: $tx3; }
+    }
+
+    .last-sync {
+      font-size: 22rpx;
+      color: $tx3;
+      margin-top: 4rpx;
+      display: block;
+    }
+  }
+
+  .sync-btn {
+    padding: 12rpx 28rpx;
+    background: $pri;
+    color: #fff;
+    border-radius: $r-pill;
+    font-size: 24rpx;
+  }
+}
--- a/apps/miniprogram/src/components/DeviceCard/index.tsx
+++ b/apps/miniprogram/src/components/DeviceCard/index.tsx
@@ -0,0 +1,39 @@
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+interface DeviceCardProps {
+  deviceName: string;
+  deviceType: string;
+  lastSyncAt?: string;
+  status: 'connected' | 'disconnected' | 'never';
+}
+
+const DEVICE_ICONS: Record<string, string> = {
+  blood_pressure: '\u{1FA7A}',
+  blood_glucose: '\u{1FA78}',
+  heart_rate: '\u{2764}',
+  blood_oxygen: '\u{1FAB1}',
+};
+
+export default function DeviceCard({ deviceName, deviceType, lastSyncAt, status }: DeviceCardProps) {
+  const icon = DEVICE_ICONS[deviceType] || '\u{1F4F1}';
+  const statusLabel = status === 'connected' ? '已连接' : status === 'disconnected' ? '未连接' : '未配对';
+  const statusClass = status === 'connected' ? 'connected' : 'idle';
+
+  const handleSync = () => {
+    Taro.navigateTo({ url: '/pages/device-sync/index' });
+  };
+
+  return (
+    <View className='device-card' onClick={handleSync}>
+      <View className='device-icon'>{icon}</View>
+      <View className='device-info'>
+        <Text className='device-name'>{deviceName}</Text>
+        <Text className={`device-status ${statusClass}`}>{statusLabel}</Text>
+        {lastSyncAt && <Text className='last-sync'>最近同步: {lastSyncAt}</Text>}
+      </View>
+      <View className='sync-btn'>同步</View>
+    </View>
+  );
+}