Person_iCloud/pages/home/home.wxml

<navigation-bar background="{{themeMode === 'dark' ? '#111827' : '#FFF'}}"></navigation-bar>
<view wx:if="{{toastText}}" class="page-toast page-toast--{{toastType}} {{themeClass}}">
  {{toastText}}
</view>
<scroll-view class="scrollarea {{themeClass}}" scroll-y type="list">
  <view class="page-shell">
    <view class="connected-panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-bluetooth">
          <image class="panel-icon-image" src="/assets/icons/bluetooth-connected-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">连接状态</view>
        <view class="panel-actions connection-actions">
          <view
            class="panel-action-button {{canStartScan ? '' : 'is-disabled'}}"
            bindtap="startScan"
          >
            {{scanButtonText}}
          </view>
          <view
            class="panel-action-button {{canClearDevices ? '' : 'is-disabled'}}"
            bindtap="clearDevices"
          >
            清空
          </view>
          <view
            class="panel-action-button {{canDisconnectDevice ? '' : 'is-disabled'}}"
            bindtap="disconnectDevice"
          >
            断开
          </view>
        </view>
      </view>
      <view class="connected-summary">
        <view class="connected-name">
          {{connectionName}}
        </view>
      </view>
      <view class="device-badges connection-badges">
        <view class="traffic-badge">{{txCount}} / {{rxCount}} bytes</view>
        <view class="rssi">{{connectionSignalText}}</view>
        <view class="connect-state {{connectedDevice ? 'connected' : ''}}">{{connectionStatusText}}</view>
      </view>
      <view class="meta-grid">
        <view class="meta-item">
          <text class="meta-label">设备 ID</text>
          <text class="meta-value">{{connectionDeviceId}}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">服务数</text>
          <text class="meta-value">{{connectionServiceCount}}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">特征值</text>
          <text class="meta-value">{{connectionCharacteristicText}}</text>
        </view>
      </view>
    </view>

    <view wx:if="{{showDeviceSection}}" class="device-section">
      <view class="panel-header outside-header">
        <view class="panel-icon icon-radar">
          <image class="panel-icon-image" src="/assets/icons/radar-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">附近设备 {{deviceCountText}}</view>
        <view class="device-filter">
          <view
            wx:for="{{deviceFilterOptions}}"
            wx:key="key"
            class="device-filter-item {{deviceFilterMode === item.key ? 'is-active' : ''}}"
            data-filter="{{item.key}}"
            bindtap="onDeviceFilterTap"
          >
            {{item.label}}
          </view>
        </view>
      </view>

      <scroll-view class="device-scroll" scroll-y type="list">
        <view wx:if="{{!devices.length}}" class="empty-state">
          <view class="empty-title">{{emptyDeviceTitle}}</view>
          <view class="empty-text">{{emptyDeviceText}}</view>
        </view>

        <view
          wx:for="{{devices}}"
          wx:key="deviceId"
          class="device-card {{connectedDevice && connectedDevice.deviceId === item.deviceId ? 'device-card--connected' : ''}}"
          data-device-id="{{item.deviceId}}"
          bindtap="connectDevice"
        >
          <view class="device-info">
            <view class="device-main-row">
              <view class="device-name">{{item.displayName}}</view>
            </view>
            <view class="device-badges device-badges--stacked">
              <view wx:if="{{connectingDeviceId === item.deviceId}}" class="connect-state">连接中</view>
              <view wx:elif="{{connectedDevice && connectedDevice.deviceId === item.deviceId}}" class="connect-state connected">已连接</view>
              <view wx:else class="connect-state">连接</view>
              <view class="rssi">{{item.signalText}}</view>
            </view>
            <view class="device-id">{{item.deviceId}}</view>
            <view class="device-meta-row">
              <view class="device-service">{{item.serviceText}}</view>
              <view wx:if="{{item.targetText}}" class="device-target">{{item.targetText}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</scroll-view>