feat(miniprogram): BLE 设备同步模块 — 扫描+连接+数据上传
- Task 18: BLE 类型定义（NormalizedReading/DeviceAdapter/BLEDevice）+ BLEManager 连接管理器 - Task 19: XiaomiBandAdapter 心率读取适配器（标准 HRS Service 0x180D） - Task 20: device-sync API 层 + 设备同步页面 + app.config 路由注册
This commit is contained in:
iven
235
apps/miniprogram/src/pages/device-sync/index.scss
Normal file
235
apps/miniprogram/src/pages/device-sync/index.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
.device-sync-page {
|
||||
min-height: 100vh;
|
||||
background: #F1F5F9;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.sync-header {
|
||||
background: linear-gradient(135deg, #0891B2, #0E7490);
|
||||
padding: 48px 24px 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sync-header-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sync-section {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sync-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px 16px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sync-hero-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sync-hero-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sync-hero-desc {
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.sync-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0891B2;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.sync-action--primary {
|
||||
flex: 1;
|
||||
background: #0891B2;
|
||||
}
|
||||
|
||||
.sync-action--danger {
|
||||
flex: 1;
|
||||
background: #EF4444;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.sync-action-text {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sync-device-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sync-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sync-device-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sync-device-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sync-device-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.sync-device-adapter {
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sync-device-rssi {
|
||||
font-size: 12px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.sync-status-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sync-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
background: #94A3B8;
|
||||
}
|
||||
|
||||
.sync-status-dot--connected {
|
||||
background: #22C55E;
|
||||
}
|
||||
|
||||
.sync-status-text {
|
||||
font-size: 14px;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.sync-readings-panel {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sync-reading-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #F1F5F9;
|
||||
}
|
||||
|
||||
.sync-reading-type {
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.sync-reading-value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #0891B2;
|
||||
}
|
||||
|
||||
.sync-readings-count {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sync-actions-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sync-error {
|
||||
margin: 16px;
|
||||
padding: 12px 16px;
|
||||
background: #FEF2F2;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #FECACA;
|
||||
}
|
||||
|
||||
.sync-error-text {
|
||||
font-size: 13px;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.sync-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48px 16px;
|
||||
}
|
||||
|
||||
.sync-loading-text {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.sync-result-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 32px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sync-result-icon {
|
||||
font-size: 40px;
|
||||
color: #22C55E;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sync-result-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sync-result-count {
|
||||
font-size: 13px;
|
||||
color: #64748B;
|
||||
}
|
||||
Reference in New Issue
Block a user