feat: 蓝牙血压计基础架构 + UI配色体系升级
- 新增 AppColors 配色体系（紫蓝渐变 + 超大圆角 + 漂浮卡片） - 新增 OmronBleService（BLE 扫描/连接/SFLOAT 协议解析） - 新增 BpReading 数据模型 + 血压数据自动同步后端 - 新增 DeviceScanPage（血压计扫描绑定页）+ DeviceBindPage（已绑定管理页） - 侧边栏新增"蓝牙设备"入口，ProfilePage 移除设备管理 - Android/iOS BLE 权限配置（BLUETOOTH_SCAN/CONNECT） - AppTheme 升级：新阴影系统、新语义色、圆角放大
This commit is contained in:
MingNian
216
health_app/lib/pages/device/device_scan_page.dart
Normal file
216
health_app/lib/pages/device/device_scan_page.dart
Normal file
@@ -0,0 +1,216 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_blue_plus/flutter_blue_plus.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:permission_handler/permission_handler.dart';
|
||||
import '../../core/app_colors.dart';
|
||||
import '../../providers/auth_provider.dart';
|
||||
import '../../providers/omron_device_provider.dart';
|
||||
import '../../services/omron_ble_service.dart';
|
||||
|
||||
class DeviceScanPage extends ConsumerStatefulWidget {
|
||||
const DeviceScanPage({super.key});
|
||||
@override ConsumerState<DeviceScanPage> createState() => _DeviceScanPageState();
|
||||
}
|
||||
|
||||
class _DeviceScanPageState extends ConsumerState<DeviceScanPage> {
|
||||
final _results = <ScanResult>[];
|
||||
bool _scanning = false;
|
||||
String? _connectingId;
|
||||
StreamSubscription? _scanSub;
|
||||
|
||||
@override void initState() {
|
||||
super.initState();
|
||||
// 一次性订阅，持续整个页面生命周期
|
||||
_scanSub = FlutterBluePlus.scanResults.listen((list) {
|
||||
if (!mounted) return;
|
||||
setState(() { _results.clear(); _results.addAll(list); });
|
||||
});
|
||||
_start();
|
||||
}
|
||||
|
||||
@override void dispose() {
|
||||
_scanSub?.cancel();
|
||||
FlutterBluePlus.stopScan();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _start() async {
|
||||
setState(() => _scanning = true);
|
||||
|
||||
await [Permission.bluetoothScan, Permission.bluetoothConnect].request();
|
||||
|
||||
try { await FlutterBluePlus.turnOn(); } catch (_) {}
|
||||
|
||||
try { await FlutterBluePlus.stopScan(); } catch (_) {}
|
||||
await FlutterBluePlus.startScan(
|
||||
timeout: const Duration(seconds: 30),
|
||||
androidScanMode: AndroidScanMode.lowLatency,
|
||||
);
|
||||
|
||||
Future.delayed(const Duration(seconds: 30), () {
|
||||
FlutterBluePlus.stopScan();
|
||||
if (mounted) setState(() => _scanning = false);
|
||||
});
|
||||
}
|
||||
|
||||
Future<void> _connect(ScanResult r) async {
|
||||
setState(() => _connectingId = r.device.remoteId.toString());
|
||||
FlutterBluePlus.stopScan();
|
||||
|
||||
try {
|
||||
final ble = ref.read(omronBleServiceProvider);
|
||||
await ble.connect(r.device);
|
||||
final name = r.advertisementData.localName.isNotEmpty
|
||||
? r.advertisementData.localName
|
||||
: (r.device.platformName.isNotEmpty ? r.device.platformName : '血压计');
|
||||
|
||||
await ref.read(omronDeviceProvider.notifier).bind(r.device.remoteId.toString(), name);
|
||||
|
||||
ble.readings.listen((reading) async {
|
||||
try {
|
||||
final api = ref.read(apiClientProvider);
|
||||
await api.post('/api/health-records', data: reading.toHealthRecord());
|
||||
await ref.read(omronDeviceProvider.notifier).onReading(reading);
|
||||
} catch (_) {}
|
||||
});
|
||||
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('已连接 $name'), backgroundColor: AppColors.success),
|
||||
);
|
||||
Navigator.pop(context);
|
||||
}
|
||||
} catch (_) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('连接失败，请重试'), backgroundColor: AppColors.error),
|
||||
);
|
||||
_start();
|
||||
}
|
||||
} finally {
|
||||
if (mounted) setState(() => _connectingId = null);
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════ UI ═══════════════════
|
||||
|
||||
@override Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
appBar: AppBar(backgroundColor: AppColors.cardBackground, title: const Text('添加血压计')),
|
||||
body: Column(children: [
|
||||
Container(
|
||||
width: double.infinity, padding: const EdgeInsets.all(16),
|
||||
color: AppColors.iconBackground,
|
||||
child: Row(children: [
|
||||
if (_scanning) ...[
|
||||
const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2, color: Color(0xFF5B8DEF))),
|
||||
const SizedBox(width: 12),
|
||||
],
|
||||
Text(_scanning ? '正在扫描...' : '发现 ${_results.length} 台设备',
|
||||
style: const TextStyle(fontSize: 15, color: Color(0xFF666666))),
|
||||
]),
|
||||
),
|
||||
if (!_scanning && _results.isEmpty) _buildEmpty(),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: _results.length,
|
||||
itemBuilder: (_, i) => _buildTile(_results[i]),
|
||||
),
|
||||
),
|
||||
if (!_scanning)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: SizedBox(width: double.infinity, child: OutlinedButton.icon(
|
||||
onPressed: _start,
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('重新扫描'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: AppColors.iconColor,
|
||||
side: const BorderSide(color: Color(0xFF5B8DEF)),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
padding: const EdgeInsets.symmetric(vertical: 14),
|
||||
),
|
||||
)),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTile(ScanResult r) {
|
||||
final isBP = OmronBleService.isBpDevice(r);
|
||||
final name = r.advertisementData.localName.isNotEmpty
|
||||
? r.advertisementData.localName
|
||||
: (r.device.platformName.isNotEmpty ? r.device.platformName : '未知设备');
|
||||
final isConnecting = _connectingId == r.device.remoteId.toString();
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardBackground, borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: AppColors.cardShadow,
|
||||
border: isBP ? Border.all(color: AppColors.iconColor, width: 1.5) : null,
|
||||
),
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 44, height: 44,
|
||||
decoration: BoxDecoration(color: isBP ? AppColors.iconBackground : AppColors.backgroundSecondary, borderRadius: BorderRadius.circular(12)),
|
||||
child: Icon(Icons.bluetooth, size: 24, color: isBP ? AppColors.iconColor : AppColors.textHint),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Flexible(child: Text(name, style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w600, color: AppColors.textPrimary))),
|
||||
if (isBP) ...[
|
||||
const SizedBox(width: 6),
|
||||
Container(padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), decoration: BoxDecoration(color: AppColors.iconColor, borderRadius: BorderRadius.circular(4)), child: const Text('血压计', style: TextStyle(fontSize: 11, color: Colors.white))),
|
||||
],
|
||||
]),
|
||||
const SizedBox(height: 2),
|
||||
Text('信号: ${_rssiLabel(r.rssi)} · ${r.device.remoteId}', style: const TextStyle(fontSize: 13, color: AppColors.textHint)),
|
||||
]),
|
||||
),
|
||||
if (isConnecting)
|
||||
const SizedBox(width: 24, height: 24, child: CircularProgressIndicator(strokeWidth: 2, color: Color(0xFF5B8DEF)))
|
||||
else
|
||||
GestureDetector(
|
||||
onTap: () => _connect(r),
|
||||
child: Container(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration(gradient: AppColors.purpleBlueGradient, borderRadius: BorderRadius.circular(12)), child: const Text('连接', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: Colors.white))),
|
||||
),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmpty() => Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(children: [
|
||||
Icon(Icons.bluetooth_disabled, size: 64, color: AppColors.textHint),
|
||||
const SizedBox(height: 16),
|
||||
const Text('未发现设备', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, color: AppColors.textPrimary)),
|
||||
const SizedBox(height: 24),
|
||||
_tip('1', '确保血压计已装电池'),
|
||||
_tip('2', '长按血压计蓝牙键 3 秒直到图标闪烁'),
|
||||
_tip('3', '手机靠近血压计（1米内）'),
|
||||
_tip('4', '打开手机蓝牙'),
|
||||
]),
|
||||
);
|
||||
|
||||
Widget _tip(String num, String text) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Container(width: 20, height: 20, alignment: Alignment.center, decoration: BoxDecoration(color: AppColors.iconColor, borderRadius: BorderRadius.circular(10)), child: Text(num, style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600))),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: Text(text, style: TextStyle(fontSize: 14, color: AppColors.textSecondary))),
|
||||
]),
|
||||
);
|
||||
|
||||
String _rssiLabel(int rssi) {
|
||||
if (rssi > -55) return '强';
|
||||
if (rssi > -70) return '中';
|
||||
return '弱';
|
||||
}
|
||||
}
|
||||
@@ -71,7 +71,6 @@ class ProfilePage extends ConsumerWidget {
|
||||
),
|
||||
const SizedBox(height: AppTheme.sMd),
|
||||
AppMenuItem(icon: LucideIcons.folderArchive, title: '健康档案', onTap: () => pushRoute(ref, 'healthArchive')),
|
||||
AppMenuItem(icon: LucideIcons.monitorSmartphone, title: '设备管理', onTap: () => pushRoute(ref, 'devices')),
|
||||
AppMenuItem(icon: LucideIcons.settings, title: '设置', onTap: () => pushRoute(ref, 'settings')),
|
||||
const SizedBox(height: 40),
|
||||
// 退出登录
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../core/app_colors.dart';
|
||||
import '../core/app_theme.dart';
|
||||
import '../core/navigation_provider.dart';
|
||||
import '../providers/auth_provider.dart';
|
||||
import '../providers/data_providers.dart';
|
||||
import '../providers/omron_device_provider.dart';
|
||||
|
||||
/// 饮食记录列表（左滑删除）
|
||||
class DietRecordListPage extends ConsumerStatefulWidget {
|
||||
@@ -783,10 +785,214 @@ class StaticTextPage extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 设备管理（占位）
|
||||
/// 血压计设备管理（已绑定/未绑定）
|
||||
class DeviceManagementPage extends ConsumerWidget {
|
||||
const DeviceManagementPage({super.key});
|
||||
@override Widget build(BuildContext context, WidgetRef ref) => _empty(context, '设备管理', '暂无绑定设备');
|
||||
|
||||
@override Widget build(BuildContext context, WidgetRef ref) {
|
||||
final device = ref.watch(omronDeviceProvider);
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
appBar: AppBar(
|
||||
backgroundColor: AppColors.cardBackground,
|
||||
title: const Text('蓝牙血压计'),
|
||||
),
|
||||
body: device.isBound ? _buildBoundCard(context, ref, device) : _buildEmptyState(context, ref),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyState(BuildContext context, WidgetRef ref) => Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
Container(
|
||||
width: 88, height: 88,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.iconBackground,
|
||||
borderRadius: BorderRadius.circular(28),
|
||||
),
|
||||
child: Icon(Icons.bluetooth_disabled, size: 44, color: AppColors.textHint),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
const Text('未绑定设备', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: AppColors.textPrimary)),
|
||||
const SizedBox(height: 8),
|
||||
const Text('连接欧姆龙血压计，自动同步测量数据', style: TextStyle(fontSize: 15, color: AppColors.textHint)),
|
||||
const SizedBox(height: 28),
|
||||
SizedBox(
|
||||
width: 220,
|
||||
height: 52,
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: () => pushRoute(ref, 'deviceScan'),
|
||||
icon: const Icon(Icons.add, size: 22),
|
||||
label: const Text('添加设备', style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600)),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.iconColor,
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
);
|
||||
|
||||
Widget _buildBoundCard(BuildContext context, WidgetRef ref, DeviceBindState device) => SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(children: [
|
||||
// 设备信息卡片
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardBackground,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: AppColors.cardShadow,
|
||||
),
|
||||
child: Column(children: [
|
||||
Container(
|
||||
width: 72, height: 72,
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.purpleBlueGradient,
|
||||
borderRadius: BorderRadius.circular(22),
|
||||
),
|
||||
child: const Icon(Icons.bluetooth_connected, size: 36, color: Colors.white),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(device.name ?? '血压计', style: const TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: AppColors.textPrimary)),
|
||||
const SizedBox(height: 6),
|
||||
Text('MAC: ${device.mac ?? '—'}', style: const TextStyle(fontSize: 14, color: AppColors.textHint)),
|
||||
if (device.lastSync != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text('上次同步: ${device.lastSync}', style: const TextStyle(fontSize: 13, color: AppColors.textHint)),
|
||||
],
|
||||
const SizedBox(height: 24),
|
||||
Row(children: [
|
||||
Expanded(
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: () => _unbind(context, ref),
|
||||
icon: const Icon(Icons.delete_outline, size: 18, color: AppColors.error),
|
||||
label: const Text('解绑', style: TextStyle(color: AppColors.error)),
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: const BorderSide(color: AppColors.error),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
padding: const EdgeInsets.symmetric(vertical: 14),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: () => pushRoute(ref, 'deviceScan'),
|
||||
icon: const Icon(Icons.swap_horiz, size: 18),
|
||||
label: const Text('更换设备'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.iconColor,
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
||||
padding: const EdgeInsets.symmetric(vertical: 14),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
|
||||
// 最后读数卡片
|
||||
if (device.lastReading != null) ...[
|
||||
const SizedBox(height: 16),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.cardBackground,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: AppColors.cardShadow,
|
||||
),
|
||||
child: Column(children: [
|
||||
Row(children: [
|
||||
Container(
|
||||
width: 6, height: 18,
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.purpleBlueGradient,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Text('最近一次测量', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: AppColors.textPrimary)),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
Row(children: [
|
||||
Container(
|
||||
width: 56, height: 56,
|
||||
decoration: BoxDecoration(
|
||||
gradient: AppColors.lightGradient,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: const Text('🩺', style: TextStyle(fontSize: 28)),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(device.lastReading!.display, style: const TextStyle(fontSize: 32, fontWeight: FontWeight.w800, color: AppColors.textPrimary, letterSpacing: -0.5)),
|
||||
Text('mmHg', style: TextStyle(fontSize: 14, color: AppColors.textHint)),
|
||||
]),
|
||||
const Spacer(),
|
||||
if (device.lastReading!.pulse != null)
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.end, children: [
|
||||
Text('${device.lastReading!.pulse}', style: const TextStyle(fontSize: 24, fontWeight: FontWeight.w700, color: AppColors.iconColor)),
|
||||
const Text('bpm', style: TextStyle(fontSize: 13, color: AppColors.textHint)),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
),
|
||||
],
|
||||
|
||||
// 使用说明
|
||||
const SizedBox(height: 16),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.iconBackground,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Icon(Icons.lightbulb_outline, size: 18, color: AppColors.iconColor),
|
||||
const SizedBox(width: 8),
|
||||
const Text('使用说明', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: AppColors.textPrimary)),
|
||||
]),
|
||||
const SizedBox(height: 10),
|
||||
_guideItem('1', '血压计装好电池，绑好袖带'),
|
||||
_guideItem('2', '血压计按开始键开始测量'),
|
||||
_guideItem('3', '测量完成后数据自动同步到 App'),
|
||||
_guideItem('4', '打开此页面时保持蓝牙开启'),
|
||||
]),
|
||||
),
|
||||
]),
|
||||
);
|
||||
|
||||
Widget _guideItem(String num, String text) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 6),
|
||||
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text('$num.', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: AppColors.iconColor)),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(child: Text(text, style: const TextStyle(fontSize: 14, color: AppColors.textSecondary))),
|
||||
]),
|
||||
);
|
||||
|
||||
void _unbind(BuildContext context, WidgetRef ref) async {
|
||||
final ok = await showDialog<bool>(context: context, builder: (ctx) => AlertDialog(
|
||||
title: const Text('解绑设备'),
|
||||
content: const Text('解绑后需重新扫描连接，确定吗？'),
|
||||
actions: [
|
||||
TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('取消')),
|
||||
TextButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('确定解绑', style: TextStyle(color: AppColors.error))),
|
||||
],
|
||||
));
|
||||
if (ok == true) {
|
||||
await ref.read(omronDeviceProvider.notifier).unbind();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════ 自定义滑动删除组件 ═══════════════════
|
||||
|
||||
Reference in New Issue
Block a user