From 1a027b6ec1c3cf96e7c5113e0d08049e88968bef Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Wed, 8 Oct 2025 10:16:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=93=9D=E7=89=99=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/blueToothTest/item2.vue | 880 +++++++++++++++++++++++++
 app/components/blufi/crypto/aes.js     |  17 +-
 2 files changed, 893 insertions(+), 4 deletions(-)

diff --git a/app/components/blueToothTest/item2.vue b/app/components/blueToothTest/item2.vue
index 27324a8..ad68919 100644
--- a/app/components/blueToothTest/item2.vue
+++ b/app/components/blueToothTest/item2.vue
@@ -1,11 +1,891 @@
 <script lang="ts" setup>
+/**
+ * Web端蓝牙设备控制组件
+ * 集成blufi系统实现蓝牙设备扫描、连接、控制功能
+ */
 
+import { ref, onMounted, onUnmounted } from 'vue'
+
+// 动态导入blufi系统，避免Web环境兼容性问题
+let mDeviceEvent: any = null
+let XBLUFI_TYPE: any = null
+let OnFireEvent: any = null
+
+// 页面布局配置
+definePageMeta({
+  layout: 'empty' // 使用空布局
+})
+
+/**
+ * 蓝牙设备状态管理
+ */
+const bluetoothState = ref({
+  isSupported: false, // 浏览器是否支持Web Bluetooth API
+  isConnected: false, // 是否已连接到设备
+  isScanning: false, // 是否正在扫描设备
+  devices: [] as any[], // 发现的设备列表
+  selectedDevice: null as any, // 当前选中的设备
+  deviceInfo: {
+    name: '',
+    id: '',
+    batteryLevel: 0,
+    signalStrength: 0,
+    firmwareVersion: '',
+    deviceType: ''
+  }
+})
+
+/**
+ * 控制命令管理
+ */
+const controlCommands = ref({
+  ledOn: false, // LED开关状态
+  motorSpeed: 0, // 电机速度 (0-100)
+  temperature: 0, // 温度设置 (0-50°C)
+  humidity: 0, // 湿度设置 (0-100%)
+  wifiSsid: '', // WiFi网络名称
+  wifiPassword: '', // WiFi密码
+  customData: '' // 自定义数据命令
+})
+
+/**
+ * 操作日志管理
+ */
+const logs = ref<string[]>([])
+
+/**
+ * 页面初始化
+ */
+onMounted(() => {
+  // 检查浏览器支持
+  bluetoothState.value.isSupported = 'bluetooth' in navigator
+  
+  if (!bluetoothState.value.isSupported) {
+    addLog('浏览器不支持Web Bluetooth API')
+  } else {
+    addLog('Web Bluetooth API 支持正常')
+  }
+  
+  // 初始化blufi系统
+  initBlufiSystem()
+  
+  // 设置事件监听
+  setupEventListeners()
+})
+
+/**
+ * 页面卸载时清理
+ */
+onUnmounted(() => {
+  // 清理事件监听
+  cleanupEventListeners()
+  
+  // 断开设备连接
+  if (bluetoothState.value.isConnected) {
+    disconnectDevice()
+  }
+})
+
+/**
+ * 初始化blufi系统
+ */
+const initBlufiSystem = async () => {
+  try {
+    // 动态导入blufi系统
+    const blufiModule = await import('~/components/blufi/xBlufi.js')
+    mDeviceEvent = blufiModule.mDeviceEvent
+    XBLUFI_TYPE = blufiModule.XBLUFI_TYPE
+    OnFireEvent = blufiModule.OnFireEvent
+    
+    // 初始化blufi系统（Web端使用模拟实现）
+    if (mDeviceEvent) {
+      mDeviceEvent.initXBlufi(mDeviceEvent.XMQTT_SYSTEM.WeChat)
+      addLog('Blufi系统初始化成功')
+    } else {
+      addLog('Blufi系统模块加载失败')
+    }
+  } catch (error) {
+    addLog(`Blufi系统初始化失败: ${error}`)
+    // 如果blufi系统加载失败，使用Web Bluetooth API作为备选方案
+    addLog('将使用Web Bluetooth API作为备选方案')
+  }
+}
+
+/**
+ * 设置事件监听器
+ */
+const setupEventListeners = () => {
+  // 检查blufi系统是否已加载
+  if (!mDeviceEvent) {
+    addLog('Blufi系统未加载，跳过事件监听器设置')
+    return
+  }
+  
+  try {
+    // 监听设备消息事件
+    mDeviceEvent.listenDeviceMsgEvent(true, handleDeviceMessage)
+    
+    // 监听设备发现事件
+    mDeviceEvent.listenStartDiscoverBle(true, handleDeviceDiscovery)
+    
+    // 监听设备连接事件
+    mDeviceEvent.listenConnectBle(true, handleDeviceConnection)
+    
+    // 监听设备初始化事件
+    mDeviceEvent.listenInitBleEsp32(true, handleDeviceInit)
+    
+    // 监听WiFi配置事件
+    mDeviceEvent.listenSendRouterSsidAndPassword(true, handleWiFiConfig)
+    
+    // 监听自定义数据事件
+    mDeviceEvent.listenSendCustomData(true, handleCustomData)
+    
+    addLog('事件监听器设置成功')
+  } catch (error) {
+    addLog(`事件监听器设置失败: ${error}`)
+  }
+}
+
+/**
+ * 清理事件监听器
+ */
+const cleanupEventListeners = () => {
+  if (!mDeviceEvent) {
+    return
+  }
+  
+  try {
+    mDeviceEvent.listenDeviceMsgEvent(false, handleDeviceMessage)
+    mDeviceEvent.listenStartDiscoverBle(false, handleDeviceDiscovery)
+    mDeviceEvent.listenConnectBle(false, handleDeviceConnection)
+    mDeviceEvent.listenInitBleEsp32(false, handleDeviceInit)
+    mDeviceEvent.listenSendRouterSsidAndPassword(false, handleWiFiConfig)
+    mDeviceEvent.listenSendCustomData(false, handleCustomData)
+    addLog('事件监听器清理成功')
+  } catch (error) {
+    addLog(`事件监听器清理失败: ${error}`)
+  }
+}
+
+/**
+ * 处理设备消息事件
+ */
+const handleDeviceMessage = (message: any) => {
+  addLog(`收到设备消息: ${JSON.stringify(message)}`)
+  
+  switch (message.type) {
+    case XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
+      bluetoothState.value.isConnected = message.result
+      addLog(`设备连接状态: ${message.result ? '已连接' : '已断开'}`)
+      break
+      
+    case XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
+      if (message.result) {
+        bluetoothState.value.devices = message.data
+        addLog(`发现 ${message.data.length} 个设备`)
+      }
+      break
+      
+    case XBLUFI_TYPE.TYPE_CONNECTED:
+      if (message.result) {
+        bluetoothState.value.isConnected = true
+        bluetoothState.value.deviceInfo.name = message.data.name
+        bluetoothState.value.deviceInfo.id = message.data.deviceId
+        addLog(`设备连接成功: ${message.data.name}`)
+      } else {
+        addLog(`设备连接失败: ${JSON.stringify(message.data)}`)
+      }
+      break
+      
+    case XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
+      addLog(`收到自定义数据: ${message.data}`)
+      break
+      
+    case XBLUFI_TYPE.TYPE_CONNECT_ROUTER_RESULT:
+      if (message.result) {
+        addLog('WiFi配置成功')
+      } else {
+        addLog('WiFi配置失败')
+      }
+      break
+      
+    default:
+      addLog(`未知消息类型: ${message.type}`)
+  }
+}
+
+/**
+ * 处理设备发现事件
+ */
+const handleDeviceDiscovery = (options: any) => {
+  addLog(`设备发现: ${options.isStart ? '开始' : '停止'}`)
+}
+
+/**
+ * 处理设备连接事件
+ */
+const handleDeviceConnection = (options: any) => {
+  addLog(`设备连接: ${options.isStart ? '连接' : '断开'} ${options.deviceId}`)
+}
+
+/**
+ * 处理设备初始化事件
+ */
+const handleDeviceInit = (options: any) => {
+  addLog(`设备初始化: ${options.deviceId}`)
+}
+
+/**
+ * 处理WiFi配置事件
+ */
+const handleWiFiConfig = (options: any) => {
+  addLog(`WiFi配置: SSID=${options.ssid}`)
+}
+
+/**
+ * 处理自定义数据事件
+ */
+const handleCustomData = (options: any) => {
+  addLog(`发送自定义数据: ${options.customData}`)
+}
+
+/**
+ * 添加日志记录
+ */
+const addLog = (message: string) => {
+  const timestamp = new Date().toLocaleTimeString()
+  logs.value.unshift(`[${timestamp}] ${message}`)
+  
+  // 限制日志数量
+  if (logs.value.length > 50) {
+    logs.value = logs.value.slice(0, 50)
+  }
+}
+
+/**
+ * 开始扫描蓝牙设备
+ */
+const startScanDevices = () => {
+  if (!bluetoothState.value.isSupported) {
+    addLog('浏览器不支持蓝牙')
+    return
+  }
+  
+  try {
+    bluetoothState.value.isScanning = true
+    addLog('开始扫描蓝牙设备...')
+    
+    // 使用blufi系统扫描设备
+    if (mDeviceEvent) {
+      mDeviceEvent.notifyStartDiscoverBle({
+        isStart: true,
+        filter: '' // 可以设置设备名称过滤
+      })
+    } else {
+      addLog('Blufi系统未加载，使用Web Bluetooth API扫描')
+      // 这里可以添加Web Bluetooth API的扫描逻辑
+    }
+  } catch (error) {
+    addLog(`扫描失败: ${error}`)
+    bluetoothState.value.isScanning = false
+  }
+}
+
+/**
+ * 停止扫描蓝牙设备
+ */
+const stopScanDevices = () => {
+  try {
+    bluetoothState.value.isScanning = false
+    addLog('停止扫描蓝牙设备')
+    
+    // 使用blufi系统停止扫描
+    if (mDeviceEvent) {
+      mDeviceEvent.notifyStartDiscoverBle({
+        isStart: false
+      })
+    }
+  } catch (error) {
+    addLog(`停止扫描失败: ${error}`)
+  }
+}
+
+/**
+ * 连接蓝牙设备
+ */
+const connectDevice = (device: any) => {
+  if (!device) {
+    addLog('请选择要连接的设备')
+    return
+  }
+  
+  try {
+    addLog(`正在连接设备: ${device.name}`)
+    
+    // 使用blufi系统连接设备
+    if (mDeviceEvent) {
+      mDeviceEvent.notifyConnectBle({
+        isStart: true,
+        deviceId: device.deviceId,
+        name: device.name
+      })
+    } else {
+      addLog('Blufi系统未加载，无法连接设备')
+      return
+    }
+    
+    bluetoothState.value.selectedDevice = device
+  } catch (error) {
+    addLog(`连接失败: ${error}`)
+  }
+}
+
+/**
+ * 断开设备连接
+ */
+const disconnectDevice = () => {
+  if (!bluetoothState.value.selectedDevice) {
+    addLog('没有连接的设备')
+    return
+  }
+  
+  try {
+    addLog('正在断开设备连接...')
+    
+    // 使用blufi系统断开连接
+    if (mDeviceEvent) {
+      mDeviceEvent.notifyConnectBle({
+        isStart: false,
+        deviceId: bluetoothState.value.selectedDevice.deviceId,
+        name: bluetoothState.value.selectedDevice.name
+      })
+    }
+    
+    bluetoothState.value.isConnected = false
+    bluetoothState.value.selectedDevice = null
+  } catch (error) {
+    addLog(`断开连接失败: ${error}`)
+  }
+}
+
+/**
+ * 初始化设备
+ */
+const initDevice = () => {
+  if (!bluetoothState.value.selectedDevice) {
+    addLog('请先连接设备')
+    return
+  }
+  
+  try {
+    addLog('正在初始化设备...')
+    
+    // 使用blufi系统初始化设备
+    if (mDeviceEvent) {
+      mDeviceEvent.notifyInitBleEsp32({
+        deviceId: bluetoothState.value.selectedDevice.deviceId
+      })
+    } else {
+      addLog('Blufi系统未加载，无法初始化设备')
+    }
+  } catch (error) {
+    addLog(`设备初始化失败: ${error}`)
+  }
+}
+
+/**
+ * 发送WiFi配置
+ */
+const sendWiFiConfig = () => {
+  if (!bluetoothState.value.isConnected) {
+    addLog('设备未连接')
+    return
+  }
+  
+  if (!controlCommands.value.wifiSsid || !controlCommands.value.wifiPassword) {
+    addLog('请输入WiFi名称和密码')
+    return
+  }
+  
+  try {
+    addLog('正在发送WiFi配置...')
+    
+    // 使用blufi系统发送WiFi配置
+    if (mDeviceEvent) {
+      mDeviceEvent.notifySendRouterSsidAndPassword({
+        deviceId: bluetoothState.value.selectedDevice.deviceId,
+        serverId: '000000FF-0000-1000-8000-00805F9B34FB',
+        characterId: '0000FF01-0000-1000-8000-00805F9B34FB',
+        ssid: controlCommands.value.wifiSsid,
+        password: controlCommands.value.wifiPassword
+      })
+    } else {
+      addLog('Blufi系统未加载，无法发送WiFi配置')
+    }
+  } catch (error) {
+    addLog(`发送WiFi配置失败: ${error}`)
+  }
+}
+
+/**
+ * 发送自定义数据
+ */
+const sendCustomData = () => {
+  if (!bluetoothState.value.isConnected) {
+    addLog('设备未连接')
+    return
+  }
+  
+  if (!controlCommands.value.customData) {
+    addLog('请输入自定义数据')
+    return
+  }
+  
+  try {
+    addLog(`正在发送自定义数据: ${controlCommands.value.customData}`)
+    
+    // 使用blufi系统发送自定义数据
+    if (mDeviceEvent) {
+      mDeviceEvent.notifySendCustomData({
+        deviceId: bluetoothState.value.selectedDevice.deviceId,
+        serverId: '000000FF-0000-1000-8000-00805F9B34FB',
+        characterId: '0000FF01-0000-1000-8000-00805F9B34FB',
+        customData: controlCommands.value.customData
+      })
+    } else {
+      addLog('Blufi系统未加载，无法发送自定义数据')
+    }
+  } catch (error) {
+    addLog(`发送自定义数据失败: ${error}`)
+  }
+}
+
+/**
+ * 控制LED开关
+ */
+const toggleLED = () => {
+  controlCommands.value.ledOn = !controlCommands.value.ledOn
+  const command = controlCommands.value.ledOn ? 'led_on' : 'led_off'
+  controlCommands.value.customData = command
+  sendCustomData()
+}
+
+/**
+ * 控制电机速度
+ */
+const setMotorSpeed = (speed: number) => {
+  controlCommands.value.motorSpeed = speed
+  controlCommands.value.customData = `motor_speed:${speed}`
+  sendCustomData()
+}
+
+/**
+ * 设置温度
+ */
+const setTemperature = (temp: number) => {
+  controlCommands.value.temperature = temp
+  controlCommands.value.customData = `temperature:${temp}`
+  sendCustomData()
+}
+
+/**
+ * 设置湿度
+ */
+const setHumidity = (humidity: number) => {
+  controlCommands.value.humidity = humidity
+  controlCommands.value.customData = `humidity:${humidity}`
+  sendCustomData()
+}
+
+/**
+ * 清除日志
+ */
+const clearLogs = () => {
+  logs.value = []
+}
 </script>
 
 <template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
+    <div class="max-w-6xl mx-auto space-y-6">
+      <!-- 页面标题 -->
+      <div class="text-center">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+          Web端蓝牙设备控制
+        </h1>
+        <p class="text-gray-600 dark:text-gray-300">
+          基于Blufi系统的蓝牙设备扫描、连接和控制
+        </p>
+      </div>
 
+      <!-- 蓝牙状态和控制 -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- 设备扫描和控制 -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            设备扫描和控制
+          </h2>
+          
+          <!-- 蓝牙支持状态 -->
+          <div class="mb-4">
+            <div class="flex items-center space-x-2">
+              <div class="w-3 h-3 rounded-full" :class="bluetoothState.isSupported ? 'bg-green-500' : 'bg-red-500'"></div>
+              <span class="text-sm text-gray-600 dark:text-gray-300">
+                Web Bluetooth API: {{ bluetoothState.isSupported ? '支持' : '不支持' }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 扫描控制按钮 -->
+          <div class="space-y-3 mb-6">
+            <button
+              @click="startScanDevices"
+              :disabled="!bluetoothState.isSupported || bluetoothState.isScanning"
+              class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              {{ bluetoothState.isScanning ? '扫描中...' : '开始扫描设备' }}
+            </button>
+            
+            <button
+              @click="stopScanDevices"
+              :disabled="!bluetoothState.isScanning"
+              class="w-full px-4 py-2 bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              停止扫描
+            </button>
+          </div>
+
+          <!-- 设备列表 -->
+          <div class="mb-6">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-3">发现的设备</h3>
+            <div class="space-y-2 max-h-40 overflow-y-auto">
+              <div
+                v-for="device in bluetoothState.devices"
+                :key="device.deviceId"
+                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg"
+              >
+                <div>
+                  <p class="font-medium text-gray-900 dark:text-white">{{ device.name || '未知设备' }}</p>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">{{ device.deviceId }}</p>
+                </div>
+                <button
+                  @click="connectDevice(device)"
+                  :disabled="bluetoothState.isConnected"
+                  class="px-3 py-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-sm rounded transition-colors"
+                >
+                  连接
+                </button>
+              </div>
+              <div v-if="bluetoothState.devices.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-4">
+                暂无发现的设备
+              </div>
+            </div>
+          </div>
+
+          <!-- 连接控制 -->
+          <div class="space-y-3">
+            <button
+              @click="initDevice"
+              :disabled="!bluetoothState.isConnected"
+              class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              初始化设备
+            </button>
+            
+            <button
+              @click="disconnectDevice"
+              :disabled="!bluetoothState.isConnected"
+              class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              断开连接
+            </button>
+          </div>
+        </div>
+
+        <!-- 设备信息 -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            设备信息
+          </h2>
+          
+          <div class="space-y-4">
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">设备名称:</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{ bluetoothState.deviceInfo.name || '未连接' }}</span>
+            </div>
+            
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">设备ID:</span>
+              <span class="font-medium text-gray-900 dark:text-white text-sm">{{ bluetoothState.deviceInfo.id || '未连接' }}</span>
+            </div>
+            
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">连接状态:</span>
+              <div class="flex items-center space-x-2">
+                <div class="w-3 h-3 rounded-full" :class="bluetoothState.isConnected ? 'bg-green-500' : 'bg-red-500'"></div>
+                <span class="font-medium text-gray-900 dark:text-white">
+                  {{ bluetoothState.isConnected ? '已连接' : '未连接' }}
+                </span>
+              </div>
+            </div>
+            
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">电池电量:</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{ bluetoothState.deviceInfo.batteryLevel }}%</span>
+            </div>
+            
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">固件版本:</span>
+              <span class="font-medium text-gray-900 dark:text-white">{{ bluetoothState.deviceInfo.firmwareVersion || '未知' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 设备控制 -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- 基础控制 -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            基础控制
+          </h2>
+          
+          <div class="space-y-4">
+            <!-- LED控制 -->
+            <div class="flex items-center justify-between">
+              <span class="text-gray-600 dark:text-gray-300">LED控制:</span>
+              <button
+                @click="toggleLED"
+                :disabled="!bluetoothState.isConnected"
+                class="px-4 py-2 rounded-lg transition-colors"
+                :class="controlCommands.ledOn 
+                  ? 'bg-green-600 hover:bg-green-700 text-white' 
+                  : 'bg-gray-600 hover:bg-gray-700 text-white disabled:bg-gray-400'"
+              >
+                {{ controlCommands.ledOn ? '关闭LED' : '开启LED' }}
+              </button>
+            </div>
+
+            <!-- 电机速度控制 -->
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">
+                电机速度: {{ controlCommands.motorSpeed }}%
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                v-model="controlCommands.motorSpeed"
+                @change="setMotorSpeed(controlCommands.motorSpeed)"
+                :disabled="!bluetoothState.isConnected"
+                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+              />
+            </div>
+
+            <!-- 温度控制 -->
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">
+                温度设置: {{ controlCommands.temperature }}°C
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="50"
+                v-model="controlCommands.temperature"
+                @change="setTemperature(controlCommands.temperature)"
+                :disabled="!bluetoothState.isConnected"
+                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+              />
+            </div>
+
+            <!-- 湿度控制 -->
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">
+                湿度设置: {{ controlCommands.humidity }}%
+              </label>
+              <input
+                type="range"
+                min="0"
+                max="100"
+                v-model="controlCommands.humidity"
+                @change="setHumidity(controlCommands.humidity)"
+                :disabled="!bluetoothState.isConnected"
+                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- WiFi配置和自定义数据 -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            WiFi配置和自定义数据
+          </h2>
+          
+          <div class="space-y-4">
+            <!-- WiFi配置 -->
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">WiFi网络名称 (SSID)</label>
+              <input
+                type="text"
+                v-model="controlCommands.wifiSsid"
+                placeholder="请输入WiFi名称"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+            </div>
+
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">WiFi密码</label>
+              <input
+                type="password"
+                v-model="controlCommands.wifiPassword"
+                placeholder="请输入WiFi密码"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+            </div>
+
+            <button
+              @click="sendWiFiConfig"
+              :disabled="!bluetoothState.isConnected || !controlCommands.wifiSsid || !controlCommands.wifiPassword"
+              class="w-full px-4 py-2 bg-orange-600 hover:bg-orange-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              发送WiFi配置
+            </button>
+
+            <!-- 自定义数据 -->
+            <div>
+              <label class="block text-gray-600 dark:text-gray-300 mb-2">自定义数据命令</label>
+              <input
+                type="text"
+                v-model="controlCommands.customData"
+                placeholder="请输入自定义命令"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+            </div>
+
+            <button
+              @click="sendCustomData"
+              :disabled="!bluetoothState.isConnected || !controlCommands.customData"
+              class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
+            >
+              发送自定义数据
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 操作日志 -->
+      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+            操作日志
+          </h2>
+          <button
+            @click="clearLogs"
+            class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-sm rounded transition-colors"
+          >
+            清除日志
+          </button>
+        </div>
+        
+        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto">
+          <div v-if="logs.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-8">
+            暂无日志记录
+          </div>
+          <div v-else class="space-y-1">
+            <div
+              v-for="(log, index) in logs"
+              :key="index"
+              class="text-sm text-gray-700 dark:text-gray-300 font-mono"
+            >
+              {{ log }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+/* 自定义滚动条样式 */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 6px;
+}
 
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 暗色模式滚动条 */
+.dark .overflow-y-auto::-webkit-scrollbar-track {
+  background: #374151;
+}
+
+.dark .overflow-y-auto::-webkit-scrollbar-thumb {
+  background: #6b7280;
+}
+
+.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* 滑块样式 */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-track {
+  background: #d1d5db;
+  height: 8px;
+  border-radius: 4px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #3b82f6;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+input[type="range"]::-moz-range-track {
+  background: #d1d5db;
+  height: 8px;
+  border-radius: 4px;
+  border: none;
+}
+
+input[type="range"]::-moz-range-thumb {
+  background: #3b82f6;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+/* 暗色模式滑块 */
+.dark input[type="range"]::-webkit-slider-track {
+  background: #4b5563;
+}
+
+.dark input[type="range"]::-moz-range-track {
+  background: #4b5563;
+}
 </style>
\ No newline at end of file
diff --git a/app/components/blufi/crypto/aes.js b/app/components/blufi/crypto/aes.js
index 03d90a3..c30a6ce 100644
--- a/app/components/blufi/crypto/aes.js
+++ b/app/components/blufi/crypto/aes.js
@@ -1157,9 +1157,18 @@
   } else if (typeof define === 'function' && define.amd) {
     define(aesjs)
   } else {
-    if (root.aesjs) {
-      aesjs._aesjs = root.aesjs
+    // 修复Web环境中的this上下文问题
+    const globalThis = (function() {
+      if (typeof globalThis !== 'undefined') return globalThis
+      if (typeof self !== 'undefined') return self
+      if (typeof window !== 'undefined') return window
+      if (typeof global !== 'undefined') return global
+      return {}
+    })()
+    
+    if (globalThis.aesjs) {
+      aesjs._aesjs = globalThis.aesjs
     }
-    root.aesjs = aesjs
+    globalThis.aesjs = aesjs
   }
-})(this)
+})(typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {})