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"></view>
        <view class="panel-title">连接状态</view>
        <view class="panel-actions connection-actions">
          <view
            class="panel-action-button {{canSyncRegisters ? '' : 'is-disabled'}}"
            bindtap="syncRegisters"
          >
            同步
          </view>
          <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"></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 class="panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-terminal"></view>
        <view class="panel-title">Modbus RTU 指令</view>
        <view class="panel-actions">
          <view
            class="panel-action-button {{!connectedDevice || !generatedHex ? 'is-disabled' : ''}}"
            bindtap="sendGeneratedFrame"
          >
            下发
          </view>
        </view>
      </view>
      <view class="protocol-form">
        <view class="protocol-row">
          <text class="protocol-label">功能码</text>
          <picker
            class="protocol-picker"
            mode="selector"
            range="{{protocolCommands}}"
            range-key="label"
            value="{{commandIndex}}"
            bindchange="onCommandChange"
          >
            <view class="picker-value">{{protocolCommands[commandIndex].label}}</view>
          </picker>
        </view>
        <view class="protocol-row protocol-field-row">
          <text class="protocol-label">从站地址</text>
          <input
            class="protocol-input protocol-row-input"
            type="text"
            maxlength="2"
            value="{{slaveAddress}}"
            bindinput="onSlaveAddressInput"
          />
        </view>
        <view class="protocol-row protocol-field-row">
          <text class="protocol-label">协议寄存器</text>
          <input
            class="protocol-input protocol-row-input"
            type="text"
            maxlength="4"
            value="{{registerAddress}}"
            bindinput="onRegisterAddressInput"
          />
        </view>
        <view wx:if="{{showCommandValue}}" class="protocol-row protocol-field-row">
          <text class="protocol-label">{{commandValueLabel}}</text>
          <input
            class="protocol-input protocol-row-input"
            type="text"
            value="{{commandValue}}"
            bindinput="onCommandValueInput"
          />
        </view>
        <view wx:if="{{showCoilValue}}" class="protocol-row coil-row">
          <text class="protocol-label">线圈值</text>
          <view class="coil-control">
            <text>{{coilEnabled ? 'ON' : 'OFF'}}</text>
            <switch checked="{{coilEnabled}}" color="#0f766e" bindchange="onCoilValueChange" />
          </view>
        </view>
        <view class="generated-frame">
          <view class="generated-title">生成帧</view>
          <view class="generated-value">{{generatedHex || '--'}}</view>
          <view wx:if="{{protocolErrorText}}" class="protocol-error">{{protocolErrorText}}</view>
        </view>
      </view>
    </view>

    <view class="panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-send"></view>
        <view class="panel-title">发送</view>
        <view class="panel-actions">
          <view class="panel-action-button" bindtap="clearInput">清空</view>
          <view
            class="panel-action-button {{!connectedDevice ? 'is-disabled' : ''}}"
            bindtap="sendHexFrame"
          >
            发送
          </view>
        </view>
      </view>
      <textarea
        class="hex-input"
        maxlength="-1"
        auto-height
        placeholder="例如：01 03 00 00 00 01 84 0A"
        value="{{sendHex}}"
        bindinput="onHexInput"
      />
    </view>

    <view class="panel">
      <view class="panel-header panel-header--with-actions log-header">
        <view class="panel-icon icon-history"></view>
        <view class="panel-title">收发日志 {{logs.length ? '(' + logs.length + ')' : ''}}</view>
        <view class="panel-actions">
          <view class="panel-action-button" bindtap="clearLogs">清空</view>
        </view>
      </view>
      <scroll-view
        class="log-scroll"
        scroll-y
        scroll-with-animation
        scroll-into-view="{{logScrollTarget}}"
        type="list"
      >
        <view wx:if="{{!logs.length}}" class="empty-log">暂无收发数据</view>
        <view
          wx:for="{{logs}}"
          wx:key="id"
          id="{{item.id}}"
          class="log-row log-row--{{item.direction}}"
        >
          <view class="log-meta">
            <view class="log-tags">
              <text class="log-direction">{{item.direction}}</text>
              <text wx:if="{{item.note}}" class="log-note">{{item.note}}</text>
            </view>
            <text class="log-time">{{item.time}}</text>
          </view>
          <view class="log-payload">{{item.payload}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</scroll-view>