STM32_KQZLJC/minicode-1/index/index.wxml

<view class="container">
  <!-- 顶部标题栏 -->
  <view class="header">
    <text class="title">传感器监控</text>
    <view class="header-actions">
      <button class="refresh-btn" bindtap="onRefresh" size="mini" loading="{{refreshing}}">
        {{refreshing ? '刷新中...' : '刷新'}}
      </button>
      <button class="history-btn" bindtap="showHistory" size="mini">
        历史
      </button>
      <button class="logs-btn" bindtap="navigateToLogs" size="mini">
        日志
      </button>
    </view>
  </view>

  <!-- 设备信息卡片 -->
  <view class="device-info" wx:if="{{connected}}">
    <view class="device-header">
      <text class="device-icon">📱</text>
      <text class="device-name">{{deviceName || '蓝牙设备'}}</text>
    </view>
    <view class="device-status">
      <text class="status-indicator connected"></text>
      <text class="status-text">已连接</text>
      <text class="connection-time">{{lastConnectedTime}}</text>
    </view>
  </view>

  <!-- 数据网格 -->
  <view class="data-grid">
    <view class="data-card" data-type="temperature">
      <div class="card-header">
        <text class="label">温度</text>
        <text class="status-icon {{temperatureStatus}}">●</text>
      </div>
      <text class="value">{{temperature}} ℃</text>
      <text class="unit">°C</text>
    </view>

    <view class="data-card" data-type="humidity">
      <div class="card-header">
        <text class="label">湿度</text>
        <text class="status-icon {{humidityStatus}}">●</text>
      </div>
      <text class="value">{{humidity}}</text>
      <text class="unit">%</text>
    </view>

    <view class="data-card" data-type="tvoc">
      <div class="card-header">
        <text class="label">TVOC</text>
        <text class="status-icon {{tvocStatus}}">●</text>
      </div>
      <text class="value">{{tvoc}}</text>
      <text class="unit">ppb</text>
    </view>

    <view class="data-card" data-type="co2">
      <div class="card-header">
        <text class="label">二氧化碳</text>
        <text class="status-icon {{co2Status}}">●</text>
      </div>
      <text class="value">{{co2}}</text>
      <text class="unit">ppm</text>
    </view>

    <view class="data-card" data-type="pm1">
      <div class="card-header">
        <text class="label">PM1.0</text>
        <text class="status-icon {{pmStatus}}">●</text>
      </div>
      <text class="value">{{pm1}}</text>
      <text class="unit">μg/m³</text>
    </view>

    <view class="data-card" data-type="pm25">
      <div class="card-header">
        <text class="label">PM2.5</text>
        <text class="status-icon {{pmStatus}}">●</text>
      </div>
      <text class="value">{{pm25}}</text>
      <text class="unit">μg/m³</text>
    </view>

    <view class="data-card" data-type="pm10">
      <div class="card-header">
        <text class="label">PM10</text>
        <text class="status-icon {{pmStatus}}">●</text>
      </div>
      <text class="value">{{pm10}}</text>
      <text class="unit">μg/m³</text>
    </view>
  </view>

  <!-- 控制按钮区域 -->
  <view class="control-area">
    <button class="action-btn bluetooth-btn" bindtap="connectBluetooth" disabled="{{connected}}">
      <text class="btn-icon">🔗</text>
      <text class="btn-text">{{connected ? '已连接蓝牙' : '连接蓝牙'}}</text>
    </button>

    <button class="action-btn wifi-btn" bindtap="showWifiModal" disabled="{{!connected}}">
      <text class="btn-icon">📡</text>
      <text class="btn-text">配置WiFi</text>
    </button>

    <button class="action-btn disconnect-btn" bindtap="disconnectBluetooth" disabled="{{!connected}}">
      <text class="btn-icon">📴</text>
      <text class="btn-text">断开连接</text>
    </button>
  </view>

  <!-- WiFi配置模态框 -->
  <view class="modal" wx:if="{{showWifiModalFlag}}">
    <view class="modal-inner">
      <view class="modal-header">
        <text class="modal-title">WiFi配置</text>
        <button class="modal-close" bindtap="onWifiCancel">×</button>
      </view>
      <view class="modal-content">
        <view class="input-group">
          <text class="input-label">WiFi 名称</text>
          <input type="text" placeholder="请输入WiFi名称" bindinput="onWifiNameInput" value="{{wifiName}}" />
        </view>
        <view class="input-group">
          <text class="input-label">WiFi 密码</text>
          <input type="password" placeholder="请输入WiFi密码" bindinput="onWifiPasswordInput" value="{{wifiPassword}}" />
        </view>
      </view>
      <view class="modal-buttons">
        <button class="modal-btn cancel" bindtap="onWifiCancel">取消</button>
        <button class="modal-btn confirm" bindtap="onWifiConfirm">确定</button>
      </view>
    </view>
  </view>

  <!-- 历史记录模态框 -->
  <view class="modal" wx:if="{{showHistoryFlag}}">
    <view class="modal-inner history-modal">
      <view class="modal-header">
        <text class="modal-title">数据历史</text>
        <button class="modal-close" bindtap="hideHistory">×</button>
      </view>
      <view class="modal-content">
        <view class="history-list">
          <view wx:for="{{historyData}}" wx:key="{{index}}" class="history-item">
            <text class="history-time">{{item.time}}</text>
            <text class="history-value">{{item.temperature}}℃ / {{item.humidity}}% / {{item.co2}}ppm</text>
          </view>
          <view wx:if="{{historyData.length === 0}}" class="empty-history">
            <text class="empty-text">暂无历史数据</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>