fastbee/yack-mini/miniprogram/pages/device/command/command.wxml

<!-- 命令发送页面 -->
<view class="container">
  <!-- Tab 切换 -->
  <view class="tabs">
    <view
      class="tab-item {{activeTab === 0 ? 'active' : ''}}"
      data-index="{{0}}"
      bindtap="switchTab"
    >
      预设命令
    </view>
    <view
      class="tab-item {{activeTab === 1 ? 'active' : ''}}"
      data-index="{{1}}"
      bindtap="switchTab"
    >
      自定义
    </view>
    <view
      class="tab-item {{activeTab === 2 ? 'active' : ''}}"
      data-index="{{2}}"
      bindtap="switchTab"
    >
      发送历史
    </view>
  </view>

  <!-- Tab 内容 -->
  <view class="tab-content">
    <!-- 预设命令 -->
    <view wx:if="{{activeTab === 0}}" class="commands-section">
      <view class="section-header">
        <text class="section-title">预设命令</text>
        <button class="btn-add" size="mini" bindtap="handleAddCommand">+ 添加</button>
      </view>

      <view class="command-list" wx:if="{{commands.length > 0}}">
        <view class="command-item" wx:for="{{commands}}" wx:key="id">
          <view class="command-main" data-index="{{index}}" bindtap="handleSelectCommand">
            <view class="command-name">{{item.name}}</view>
            <view class="command-hex">{{item.hex}}</view>
            <!-- <view class="command-desc" wx:if="{{item.description}}">{{item.description}}</view> -->
            <view class="command-meta">
              使用 {{item.useCount || 0}} 次
            </view>
          </view>
          <view class="command-actions">
            <button
              class="btn-edit"
              size="mini"
              data-index="{{index}}"
              catchtap="handleEditCommand"
            >
              编辑
            </button>
            <button
              class="btn-delete"
              size="mini"
              data-index="{{index}}"
              catchtap="handleDeleteCommand"
            >
              删除
            </button>
          </view>
        </view>
      </view>

      <view class="empty" wx:else>
        <text class="empty-text">暂无预设命令</text>
        <text class="empty-hint">点击上方"添加"按钮创建常用命令</text>
      </view>
    </view>

    <!-- 自定义命令 -->
    <view wx:if="{{activeTab === 1}}" class="custom-section">
      <view class="section-header">
        <text class="section-title">自定义命令</text>
      </view>

      <view class="form-item">
        <view class="form-label">命令名称（可选）</view>
        <input
          class="form-input"
          placeholder="如：开灯"
          value="{{customName}}"
          bindinput="onCustomNameInput"
        />
      </view>

      <view class="form-item">
        <view class="form-label">十六进制命令</view>
        <input
          class="form-input hex-input"
          placeholder="如：A1 01 FF"
          value="{{customHex}}"
          bindinput="onCustomHexInput"
        />
        <view class="form-hint">示例：A101FF 或 A1 01 FF（空格会自动去除）</view>
      </view>

      <view class="connection-status">
        <view class="status-text">BLE 状态：</view>
        <view class="status-value {{bleConnected ? 'connected' : 'disconnected'}}">
          {{bleConnected ? '已连接' : '未连接'}}
        </view>
      </view>

      <button class="btn-send" bindtap="handleSendCustom" disabled="{{!bleConnected}}">
        发送命令
      </button>
    </view>

    <!-- 发送历史 -->
    <view wx:if="{{activeTab === 2}}" class="history-section">
      <view class="section-header">
        <text class="section-title">今天的发送历史</text>
        <button class="btn-clear" size="mini" bindtap="handleClearHistory">清空</button>
      </view>

      <view class="history-list" wx:if="{{history.length > 0}}">
        <view class="history-item" wx:for="{{history}}" wx:key="id">
          <view class="history-header">
            <view class="history-name">{{item.name}}</view>
            <view class="history-time">{{item.sendTime}}</view>
          </view>
          <view class="history-content">
            <view class="history-hex">{{item.hex}}</view>
            <view class="history-meta">
              <text class="method-tag">{{item.method}}</text>
              <text class="status-tag {{item.status}}">{{item.status === 'success' ? '成功' : '失败'}}</text>
            </view>
          </view>
          <view class="history-error" wx:if="{{item.error}}">
            错误：{{item.error}}
          </view>
        </view>
      </view>

      <view class="empty" wx:else>
        <text class="empty-text">今天暂无发送记录</text>
        <text class="empty-hint">发送的命令将在此显示</text>
      </view>
    </view>
  </view>

  <!-- 编辑命令弹窗 -->
  <view class="modal-mask" wx:if="{{showEditModal}}" catchtap="handleCancelEdit">
    <view class="modal-content" catchtap="stopPropagation">
      <view class="modal-header">
        <text class="modal-title">{{editMode === 'add' ? '添加命令' : '编辑命令'}}</text>
      </view>

      <view class="modal-body">
        <view class="form-item">
          <view class="form-label">命令名称 *</view>
          <input
            class="form-input"
            placeholder="如：开灯"
            value="{{editName}}"
            bindinput="onEditNameInput"
            catchtap="stopPropagation"
          />
        </view>

        <view class="form-item">
          <view class="form-label">十六进制命令 *</view>
          <input
            class="form-input hex-input"
            placeholder="如：A1 01 FF"
            value="{{editHex}}"
            bindinput="onEditHexInput"
            catchtap="stopPropagation"
          />
          <view class="form-hint">示例：A101FF 或 A1 01 FF</view>
        </view>

        <!-- <view class="form-item">
          <view class="form-label">命令说明（可选）</view>
          <textarea
            class="form-textarea"
            placeholder="如：打开设备灯光"
            value="{{editDescription}}"
            bindinput="onEditDescriptionInput"
            catchtap="stopPropagation"
          />
        </view> -->
      </view>

      <view class="modal-footer">
        <button class="btn-cancel" catchtap="handleCancelEdit">取消</button>
        <button class="btn-confirm" bindtap="handleSaveCommand">保存</button>
      </view>
    </view>
  </view>
</view>