Person_iCloud/pages/communication/communication.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="panel communication-panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-send">
          <image class="panel-icon-image" src="/assets/icons/send-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">串口通讯发送</view>
        <view class="panel-actions communication-actions">
          <view class="panel-action-button {{connectedDevice ? '' : 'is-disabled'}}" bindtap="sendSerialFrame">发送</view>
          <view class="panel-action-button" bindtap="switchSerialMode">{{serialModeToggleText}}</view>
          <view class="panel-action-button" bindtap="clearSerialInput">清空</view>
        </view>
      </view>
      <view class="comm-send-body">
        <textarea
          class="comm-send-input comm-send-input--{{serialMode}}"
          maxlength="-1"
          auto-height
          placeholder="{{serialMode === 'hex' ? '01 03 00 00 00 02' : '文本'}}"
          value="{{serialInputText}}"
          bindinput="onSerialInput"
        />
        <view class="comm-send-meta">
          <view class="comm-send-state">{{serialModeLabel}} · {{connectedDevice ? '已连接' : '未连接'}}</view>
          <view class="comm-send-length">{{serialPreviewLengthText}}</view>
        </view>
        <view wx:if="{{serialErrorText}}" class="comm-error">{{serialErrorText}}</view>
        <view wx:if="{{serialPreviewHex}}" class="comm-preview">
          <view class="comm-preview-label">预览</view>
          <view class="comm-preview-value">{{serialPreviewHex}}</view>
        </view>
      </view>
    </view>

    <view wx:if="{{isModbusProtocol}}" class="panel communication-panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-control">
          <image class="panel-icon-image" src="/assets/icons/control-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">标准 Modbus</view>
        <view class="panel-actions communication-actions">
          <view
            class="panel-action-button {{protocolMultipleDialog.visible ? 'is-disabled' : ''}}"
            bindtap="sendProtocolFrame"
          >发送</view>
          <view wx:if="{{showProtocolMultipleButton}}" class="panel-action-button" bindtap="openProtocolMultipleDialog">多值</view>
        </view>
      </view>
      <view class="protocol-form">
        <view class="protocol-row">
          <view class="protocol-label">功能码</view>
          <picker mode="selector" range="{{protocolCommands}}" range-key="label" value="{{commandIndex}}" bindchange="onProtocolCommandChange">
            <view class="picker-value protocol-value-picker">{{protocolCommands[commandIndex].label}}</view>
          </picker>
        </view>
        <view class="protocol-row">
          <view class="protocol-label">从机地址</view>
          <input class="protocol-input protocol-row-input" maxlength="2" value="{{slaveAddress}}" bindinput="onProtocolInput" data-field="slaveAddress" />
        </view>
        <view class="protocol-row">
          <view class="protocol-label">起始地址</view>
          <input class="protocol-input protocol-row-input" maxlength="4" value="{{registerAddress}}" bindinput="onProtocolInput" data-field="registerAddress" />
        </view>
        <view wx:if="{{showCommandValue}}" class="protocol-row">
          <view class="protocol-label">{{commandValueLabel}}</view>
          <input class="protocol-input protocol-row-input" value="{{commandValue}}" bindinput="onProtocolInput" data-field="commandValue" />
        </view>
        <view wx:if="{{showCoilValue}}" class="protocol-row coil-row">
          <view class="protocol-label">线圈</view>
          <view class="coil-control">
            <switch checked="{{coilEnabled}}" color="#0f766e" bindchange="onProtocolCoilChange" />
            <text>{{coilEnabled ? 'ON' : 'OFF'}}</text>
          </view>
        </view>
        <view wx:if="{{showRegisterQuantity}}" class="protocol-row">
          <view class="protocol-label">寄存器数</view>
          <input class="protocol-input protocol-row-input" value="{{commandRegisterQuantity}}" bindinput="onProtocolInput" data-field="commandRegisterQuantity" />
        </view>
        <view wx:if="{{protocolErrorText}}" class="protocol-error">{{protocolErrorText}}</view>
        <view wx:if="{{protocolStatusText}}" class="protocol-error">{{protocolStatusText}}</view>
        <view class="generated-frame">
          <view class="generated-title">帧</view>
          <view class="generated-value">{{generatedHex || '--'}}</view>
        </view>
        <view wx:if="{{protocolResponseText}}" class="generated-frame generated-frame--response">
          <view class="generated-title">回复</view>
          <view class="generated-value">{{protocolResponseText}}</view>
        </view>
      </view>
    </view>

    <view wx:if="{{!isModbusProtocol}}" class="panel communication-panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-chip">
          <image class="panel-icon-image" src="/assets/icons/chip-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">私有协议</view>
        <view class="panel-actions communication-actions">
          <view class="panel-action-button {{storageAccessCommandIndex === 0 ? 'is-active' : ''}}" data-index="0" bindtap="switchStorageAccessCommandMode">同步</view>
          <view class="panel-action-button {{storageAccessCommandIndex === 1 ? 'is-active' : ''}}" data-index="1" bindtap="switchStorageAccessCommandMode">读取</view>
          <view class="panel-action-button {{storageAccessCommandIndex === 2 ? 'is-active' : ''}}" data-index="2" bindtap="switchStorageAccessCommandMode">写入</view>
          <view class="panel-action-button {{connectedDevice ? '' : 'is-disabled'}}" bindtap="sendStorageAccessProtocolFrame">执行</view>
        </view>
      </view>
      <view class="protocol-form">
        <view wx:if="{{storageAccessCommandIndex !== 0}}" class="protocol-row">
          <view class="protocol-label">区域</view>
          <picker mode="selector" range="{{storageAccessAreaOptions}}" range-key="label" value="{{storageAccessAreaIndex}}" bindchange="onStorageAccessAreaChange">
            <view class="picker-value protocol-value-picker">{{storageAccessAreaLabel}}</view>
          </picker>
        </view>
        <view wx:if="{{storageAccessCommandIndex !== 0}}" class="protocol-row">
          <view class="protocol-label">地址</view>
          <input class="protocol-input protocol-row-input" maxlength="4" value="{{storageAccessAddress}}" bindinput="onStorageAccessInput" data-field="storageAccessAddress" />
        </view>
        <view wx:if="{{storageAccessCommandIndex !== 0}}" class="protocol-row">
          <view class="protocol-label">长度</view>
          <input class="protocol-input protocol-row-input" maxlength="4" value="{{storageAccessLength}}" bindinput="onStorageAccessInput" data-field="storageAccessLength" />
        </view>
        <view wx:if="{{storageAccessCommandIndex === 2}}" class="protocol-row">
          <view class="protocol-label">数据</view>
          <input class="protocol-input protocol-row-input" value="{{storageAccessDataText}}" bindinput="onStorageAccessInput" data-field="storageAccessDataText" placeholder="01 02 03 04" />
        </view>
        <view wx:if="{{storageAccessCommandIndex === 0}}" class="protocol-row">
          <view class="protocol-label">同步</view>
          <view class="protocol-label protocol-storage-sync">{{storageAccessSyncInfoText}}</view>
        </view>
        <view wx:if="{{storageAccessErrorText}}" class="protocol-error">{{storageAccessErrorText}}</view>
        <view class="generated-frame">
          <view class="generated-title">帧</view>
          <view class="generated-value">{{storageAccessPreviewHexText || '--'}}</view>
          <view wx:if="{{storageAccessPreviewText}}" class="generated-meta">{{storageAccessPreviewText}}</view>
        </view>
      </view>
    </view>

    <view class="panel communication-panel">
      <view class="panel-header panel-header--with-actions">
        <view class="panel-icon icon-history">
          <image class="panel-icon-image" src="/assets/icons/history-white.png" mode="aspectFit" />
        </view>
        <view class="panel-title">收发日志</view>
        <view class="panel-actions communication-actions">
          <view class="panel-action-button" bindtap="switchLogMode">{{logModeToggleText}}</view>
          <view class="panel-action-button" bindtap="clearCommunicationLogs">清空</view>
        </view>
      </view>
      <view wx:if="{{!logs.length}}" class="empty-log">暂无日志</view>
      <scroll-view wx:else class="log-scroll" scroll-y type="list">
        <view
          wx:for="{{logs}}"
          wx:for-item="item"
          wx:key="id"
          class="log-row log-row--{{item.direction}}"
        >
          <view class="log-meta">
            <view class="log-tags">
              <view class="log-direction">{{item.direction}}</view>
              <view wx:if="{{item.note}}" class="log-note">{{item.note}}</view>
            </view>
            <view class="log-time">{{item.time}}</view>
          </view>
          <view class="log-payload log-payload--{{logMode}}">{{item.displayText || '--'}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</scroll-view>

<view wx:if="{{protocolMultipleDialog.visible}}" class="generic-dialog-mask {{themeClass}}" bindtap="closeProtocolMultipleDialog">
  <view class="generic-dialog protocol-multiple-dialog" catchtap="noop">
    <view class="generic-dialog-header">
      <view class="generic-dialog-title">{{protocolMultipleDialog.title || '多寄存器'}}</view>
      <view class="generic-dialog-close" bindtap="closeProtocolMultipleDialog">×</view>
    </view>
    <view class="generic-dialog-body">
      <view class="protocol-multiple-row">
        <view class="protocol-multiple-head">
          <view class="protocol-multiple-title">数量</view>
          <input class="value-input protocol-multiple-length-input" value="{{commandRegisterQuantity}}" bindinput="onProtocolMultipleQuantityChange" />
        </view>
      </view>
      <view
        wx:for="{{protocolMultipleValues}}"
        wx:for-item="register"
        wx:for-index="index"
        wx:key="name"
        wx:if="{{protocolMultipleExpanded || index < 3}}"
        class="protocol-multiple-row"
      >
        <view class="protocol-multiple-head">
          <view class="protocol-multiple-title">{{register.name}}</view>
          <picker mode="selector" range="{{protocolDataTypeOptions}}" range-key="label" value="{{register.dataTypeIndex}}" data-index="{{index}}" bindchange="onProtocolMultipleTypeChange">
            <view class="picker-value protocol-multiple-type">{{protocolDataTypeOptions[register.dataTypeIndex].label}}</view>
          </picker>
        </view>
        <view wx:if="{{register.showTextLength}}" class="protocol-multiple-text-length">
          <view class="protocol-label">长度</view>
          <input class="value-input protocol-multiple-length-input" data-index="{{index}}" value="{{register.textByteLength}}" bindinput="onProtocolMultipleTextLengthInput" />
        </view>
        <input
          class="value-input protocol-multiple-input {{register.dataType === 'text' ? 'protocol-multiple-input--text' : ''}}"
          placeholder="写入值"
          data-index="{{index}}"
          value="{{register.inputValue}}"
          bindinput="onProtocolMultipleValueInput"
        />
      </view>
      <view wx:if="{{protocolMultipleValues.length > 3}}" class="generic-draft-actions">
        <view class="panel-action-button" bindtap="toggleProtocolMultipleExpanded">{{protocolMultipleExpanded ? '收起' : '展开'}}</view>
      </view>
    </view>
    <view class="generic-draft-actions">
      <view class="panel-action-button" bindtap="closeProtocolMultipleDialog">关闭</view>
      <view class="panel-action-button is-active" data-source="dialog" bindtap="sendProtocolFrame">发送</view>
    </view>
  </view>
</view>