1284 lines
44 KiB
Vue
1284 lines
44 KiB
Vue
<script lang="ts" setup>
|
||
/**
|
||
* 蓝牙设备测试页面
|
||
* 功能：使用Web Bluetooth API连接和控制蓝牙设备
|
||
* 支持：设备扫描、连接、数据通信、WiFi配置、自定义命令等
|
||
*/
|
||
|
||
// 页面布局配置
|
||
definePageMeta({
|
||
layout: 'empty' // 使用空布局，不包含头部和底部
|
||
})
|
||
|
||
/**
|
||
* 蓝牙设备状态管理
|
||
* 用于跟踪蓝牙连接的各种状态信息
|
||
*/
|
||
const bluetoothState = ref({
|
||
isSupported: false, // 浏览器是否支持Web Bluetooth API
|
||
isConnected: false, // 是否已连接到设备
|
||
isScanning: false, // 是否正在扫描设备
|
||
devices: [] as BluetoothDevice[], // 发现的设备列表
|
||
selectedDevice: null as BluetoothDevice | null, // 当前选中的设备
|
||
server: null as BluetoothRemoteGATTServer | null, // GATT服务器连接
|
||
service: null as BluetoothRemoteGATTService | null, // 目标服务
|
||
characteristic: null as BluetoothRemoteGATTCharacteristic | null, // 通用特征值
|
||
writeCharacteristic: null as BluetoothRemoteGATTCharacteristic | null, // 写入特征值
|
||
readCharacteristic: null as BluetoothRemoteGATTCharacteristic | null // 读取特征值
|
||
})
|
||
|
||
/**
|
||
* 设备信息管理
|
||
* 存储连接设备的基本信息和状态
|
||
*/
|
||
const deviceInfo = ref({
|
||
name: '', // 设备名称
|
||
id: '', // 设备唯一标识符
|
||
connected: false, // 连接状态
|
||
batteryLevel: 0, // 电池电量百分比
|
||
signalStrength: 0, // 信号强度
|
||
firmwareVersion: '', // 固件版本
|
||
deviceType: '', // 设备类型
|
||
services: [] as string[] // 设备支持的服务列表
|
||
})
|
||
|
||
/**
|
||
* 控制命令管理
|
||
* 存储各种设备控制命令的参数
|
||
*/
|
||
const controlCommands = ref({
|
||
ledOn: false, // LED开关状态
|
||
motorSpeed: 0, // 电机速度 (0-100)
|
||
temperature: 0, // 温度设置 (0-50°C)
|
||
humidity: 0, // 湿度设置 (0-100%)
|
||
wifiSsid: '', // WiFi网络名称
|
||
wifiPassword: '', // WiFi密码
|
||
customData: '' // 自定义数据命令
|
||
})
|
||
|
||
/**
|
||
* 设备配置管理
|
||
* 存储蓝牙设备的服务UUID和通信配置
|
||
*/
|
||
const deviceConfig = ref({
|
||
serviceUuid: '000000ff-0000-1000-8000-00805f9b34fb', // 主服务UUID (小写格式)
|
||
writeUuid: '0000ff01-0000-1000-8000-00805f9b34fb', // 写入特征值UUID
|
||
readUuid: '0000ff02-0000-1000-8000-00805f9b34fb', // 读取特征值UUID
|
||
sequenceControl: 0, // 序列号控制
|
||
isEncrypted: false, // 是否启用加密
|
||
isChecksum: true // 是否启用校验和
|
||
})
|
||
|
||
/**
|
||
* 日志信息管理
|
||
* 存储操作日志，用于调试和状态跟踪
|
||
*/
|
||
const logs = ref<string[]>([])
|
||
|
||
/**
|
||
* 页面初始化
|
||
* 检查浏览器对Web Bluetooth API的支持情况
|
||
*/
|
||
onMounted(() => {
|
||
// 检查浏览器是否支持Web Bluetooth API
|
||
bluetoothState.value.isSupported = 'bluetooth' in navigator
|
||
|
||
if (!bluetoothState.value.isSupported) {
|
||
addLog('浏览器不支持Web Bluetooth API')
|
||
} else {
|
||
addLog('Web Bluetooth API 支持正常')
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 添加日志记录
|
||
* @param message 日志消息内容
|
||
* 功能：将操作日志添加到日志列表，包含时间戳，最多保留50条记录
|
||
*/
|
||
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 scanDevices = async () => {
|
||
// 检查浏览器支持
|
||
if (!bluetoothState.value.isSupported) {
|
||
addLog('浏览器不支持蓝牙')
|
||
return
|
||
}
|
||
|
||
try {
|
||
bluetoothState.value.isScanning = true
|
||
addLog('开始扫描蓝牙设备...')
|
||
|
||
// 请求设备选择，接受所有设备类型
|
||
const device = await navigator.bluetooth.requestDevice({
|
||
acceptAllDevices: true, // 接受所有设备
|
||
optionalServices: [
|
||
'battery_service', // 电池服务
|
||
'device_information', // 设备信息服务
|
||
'generic_access' // 通用访问服务
|
||
]
|
||
})
|
||
|
||
if (device) {
|
||
// 保存选中的设备信息
|
||
bluetoothState.value.selectedDevice = device
|
||
deviceInfo.value.name = device.name || '未知设备'
|
||
deviceInfo.value.id = device.id
|
||
addLog(`发现设备: ${deviceInfo.value.name}`)
|
||
|
||
// 监听设备断开连接事件
|
||
device.addEventListener('gattserverdisconnected', onDeviceDisconnected)
|
||
}
|
||
} catch (error) {
|
||
addLog(`扫描失败: ${error}`)
|
||
} finally {
|
||
bluetoothState.value.isScanning = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 扫描特定服务设备
|
||
* 功能：只扫描包含指定服务的蓝牙设备，用于精确匹配目标设备
|
||
*/
|
||
const scanSpecificService = async () => {
|
||
// 检查浏览器支持
|
||
if (!bluetoothState.value.isSupported) {
|
||
addLog('浏览器不支持蓝牙')
|
||
return
|
||
}
|
||
|
||
try {
|
||
bluetoothState.value.isScanning = true
|
||
addLog('开始扫描特定服务设备...')
|
||
|
||
// 请求设备选择，只显示包含指定服务的设备
|
||
const device = await navigator.bluetooth.requestDevice({
|
||
filters: [
|
||
{ services: [deviceConfig.value.serviceUuid] } // 过滤条件：包含指定服务
|
||
],
|
||
optionalServices: [
|
||
'battery_service', // 电池服务
|
||
'device_information', // 设备信息服务
|
||
'generic_access' // 通用访问服务
|
||
]
|
||
})
|
||
|
||
if (device) {
|
||
// 保存选中的设备信息
|
||
bluetoothState.value.selectedDevice = device
|
||
deviceInfo.value.name = device.name || '未知设备'
|
||
deviceInfo.value.id = device.id
|
||
addLog(`发现设备: ${deviceInfo.value.name}`)
|
||
|
||
// 监听设备断开连接事件
|
||
device.addEventListener('gattserverdisconnected', onDeviceDisconnected)
|
||
}
|
||
} catch (error) {
|
||
addLog(`扫描特定服务失败: ${error}`)
|
||
} finally {
|
||
bluetoothState.value.isScanning = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 连接蓝牙设备
|
||
* 功能：建立与选中设备的GATT连接，并初始化设备服务
|
||
*/
|
||
const connectDevice = async () => {
|
||
// 检查是否已选择设备
|
||
if (!bluetoothState.value.selectedDevice) {
|
||
addLog('请先选择设备')
|
||
return
|
||
}
|
||
|
||
try {
|
||
addLog('正在连接设备...')
|
||
|
||
// 建立GATT连接
|
||
bluetoothState.value.server = await bluetoothState.value.selectedDevice.gatt?.connect()
|
||
|
||
if (bluetoothState.value.server) {
|
||
// 更新连接状态
|
||
bluetoothState.value.isConnected = true
|
||
deviceInfo.value.connected = true
|
||
addLog('设备连接成功')
|
||
|
||
// 初始化设备服务和特征值
|
||
await initDevice()
|
||
}
|
||
} catch (error) {
|
||
addLog(`连接失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 断开设备连接
|
||
* 功能：主动断开与设备的连接
|
||
*/
|
||
const disconnectDevice = async () => {
|
||
if (bluetoothState.value.server) {
|
||
bluetoothState.value.server.disconnect()
|
||
onDeviceDisconnected()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设备断开连接处理
|
||
* 功能：处理设备断开连接事件，清理相关状态和资源
|
||
*/
|
||
const onDeviceDisconnected = () => {
|
||
// 重置连接状态
|
||
bluetoothState.value.isConnected = false
|
||
deviceInfo.value.connected = false
|
||
|
||
// 清理连接资源
|
||
bluetoothState.value.server = null
|
||
bluetoothState.value.service = null
|
||
bluetoothState.value.characteristic = null
|
||
bluetoothState.value.writeCharacteristic = null
|
||
bluetoothState.value.readCharacteristic = null
|
||
|
||
addLog('设备已断开连接')
|
||
}
|
||
|
||
/**
|
||
* 初始化设备
|
||
* 功能：发现设备服务，获取特征值，启用数据通知，发送初始化命令
|
||
*/
|
||
const initDevice = async () => {
|
||
if (!bluetoothState.value.server) return
|
||
|
||
try {
|
||
addLog('正在初始化设备...')
|
||
|
||
// 获取设备的所有主要服务
|
||
const services = await bluetoothState.value.server.getPrimaryServices()
|
||
deviceInfo.value.services = services.map(s => s.uuid)
|
||
addLog(`发现 ${services.length} 个服务`)
|
||
|
||
// 打印所有服务UUID用于调试
|
||
services.forEach((service, index) => {
|
||
addLog(`服务 ${index + 1}: ${service.uuid}`)
|
||
})
|
||
|
||
// 查找目标服务（不区分大小写匹配）
|
||
const targetService = services.find(s =>
|
||
s.uuid.toLowerCase() === deviceConfig.value.serviceUuid.toLowerCase()
|
||
)
|
||
|
||
if (targetService) {
|
||
bluetoothState.value.service = targetService
|
||
addLog('找到目标服务')
|
||
|
||
// 获取目标服务的所有特征值
|
||
const characteristics = await targetService.getCharacteristics()
|
||
addLog(`发现 ${characteristics.length} 个特征值`)
|
||
|
||
// 打印所有特征值UUID用于调试
|
||
characteristics.forEach((char, index) => {
|
||
addLog(`特征值 ${index + 1}: ${char.uuid}`)
|
||
})
|
||
|
||
// 查找读写特征值（不区分大小写匹配）
|
||
bluetoothState.value.writeCharacteristic = characteristics.find(c =>
|
||
c.uuid.toLowerCase() === deviceConfig.value.writeUuid.toLowerCase()
|
||
)
|
||
bluetoothState.value.readCharacteristic = characteristics.find(c =>
|
||
c.uuid.toLowerCase() === deviceConfig.value.readUuid.toLowerCase()
|
||
)
|
||
|
||
if (bluetoothState.value.writeCharacteristic) {
|
||
addLog('找到写入特征值')
|
||
}
|
||
if (bluetoothState.value.readCharacteristic) {
|
||
addLog('找到读取特征值')
|
||
|
||
// 启用特征值通知，用于接收设备数据
|
||
await bluetoothState.value.readCharacteristic.startNotifications()
|
||
bluetoothState.value.readCharacteristic.addEventListener('characteristicvaluechanged', onCharacteristicValueChanged)
|
||
addLog('已启用数据通知')
|
||
}
|
||
|
||
// 获取设备基本信息（如电池电量）
|
||
await getDeviceInfo()
|
||
|
||
// 发送初始化命令获取固件版本
|
||
await sendCustomData('get_fw')
|
||
} else {
|
||
addLog('未找到目标服务，尝试获取设备基本信息')
|
||
await getDeviceInfo()
|
||
|
||
// 如果没有目标服务，尝试使用通用访问服务进行通信
|
||
const genericAccessService = services.find(s => s.uuid === '00001800-0000-1000-8000-00805f9b34fb')
|
||
if (genericAccessService) {
|
||
addLog('找到通用访问服务，尝试获取特征值')
|
||
const characteristics = await genericAccessService.getCharacteristics()
|
||
|
||
// 打印通用访问服务的特征值
|
||
characteristics.forEach((char, index) => {
|
||
addLog(`通用访问特征值 ${index + 1}: ${char.uuid}`)
|
||
})
|
||
|
||
// 查找可写的特征值
|
||
const writableChars = characteristics.filter(c => c.properties.write || c.properties.writeWithoutResponse)
|
||
if (writableChars.length > 0) {
|
||
bluetoothState.value.writeCharacteristic = writableChars[0]
|
||
addLog(`使用通用访问服务的写入特征值: ${writableChars[0].uuid}`)
|
||
}
|
||
|
||
// 查找可读的特征值
|
||
const readableChars = characteristics.filter(c => c.properties.read || c.properties.notify)
|
||
if (readableChars.length > 0) {
|
||
bluetoothState.value.readCharacteristic = readableChars[0]
|
||
addLog(`使用通用访问服务的读取特征值: ${readableChars[0].uuid}`)
|
||
|
||
// 尝试读取设备名称
|
||
const deviceNameChar = characteristics.find(c => c.uuid === '00002a00-0000-1000-8000-00805f9b34fb')
|
||
if (deviceNameChar && deviceNameChar.properties.read) {
|
||
try {
|
||
const deviceNameValue = await deviceNameChar.readValue()
|
||
const deviceName = String.fromCharCode(...new Uint8Array(deviceNameValue.buffer))
|
||
deviceInfo.value.name = deviceName
|
||
addLog(`读取设备名称: ${deviceName}`)
|
||
} catch (readError) {
|
||
addLog(`读取设备名称失败: ${readError}`)
|
||
}
|
||
}
|
||
|
||
// 尝试读取外观信息
|
||
const appearanceChar = characteristics.find(c => c.uuid === '00002a01-0000-1000-8000-00805f9b34fb')
|
||
if (appearanceChar && appearanceChar.properties.read) {
|
||
try {
|
||
const appearanceValue = await appearanceChar.readValue()
|
||
const appearance = new DataView(appearanceValue.buffer).getUint16(0, true)
|
||
addLog(`设备外观: 0x${appearance.toString(16)}`)
|
||
} catch (readError) {
|
||
addLog(`读取设备外观失败: ${readError}`)
|
||
}
|
||
}
|
||
|
||
// 尝试启用通知（如果支持）
|
||
if (readableChars[0].properties.notify) {
|
||
try {
|
||
await bluetoothState.value.readCharacteristic.startNotifications()
|
||
bluetoothState.value.readCharacteristic.addEventListener('characteristicvaluechanged', onCharacteristicValueChanged)
|
||
addLog('已启用通用访问服务的数据通知')
|
||
} catch (notifyError) {
|
||
addLog('无法启用通用访问服务的数据通知')
|
||
}
|
||
} else {
|
||
addLog('该特征值不支持通知功能')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
addLog(`设备初始化失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 特征值变化处理
|
||
* 功能：处理从设备接收到的数据，解析并显示相关信息
|
||
* @param event 特征值变化事件
|
||
*/
|
||
const onCharacteristicValueChanged = (event: Event) => {
|
||
const characteristic = event.target as BluetoothRemoteGATTCharacteristic
|
||
const value = characteristic.value
|
||
|
||
if (value) {
|
||
// 将接收到的数据转换为文本
|
||
const data = new Uint8Array(value.buffer)
|
||
const text = String.fromCharCode(...data)
|
||
addLog(`收到数据: ${text}`)
|
||
|
||
// 处理特定的设备响应
|
||
if (text.includes('wifi_ok')) {
|
||
addLog('WiFi连接成功')
|
||
} else if (text.includes('wifi_err')) {
|
||
addLog('WiFi连接失败')
|
||
} else if (text.includes('fw_version')) {
|
||
// 解析固件版本信息
|
||
deviceInfo.value.firmwareVersion = text.replace('fw_version:', '')
|
||
addLog(`固件版本: ${deviceInfo.value.firmwareVersion}`)
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取设备信息
|
||
* 功能：读取设备的基本信息，如电池电量等
|
||
*/
|
||
const getDeviceInfo = async () => {
|
||
if (!bluetoothState.value.server) return
|
||
|
||
try {
|
||
// 尝试获取电池服务并读取电池电量
|
||
try {
|
||
const batteryService = await bluetoothState.value.server.getPrimaryService('battery_service')
|
||
const batteryCharacteristic = await batteryService.getCharacteristic('battery_level')
|
||
const batteryValue = await batteryCharacteristic.readValue()
|
||
deviceInfo.value.batteryLevel = batteryValue.getUint8(0)
|
||
addLog(`电池电量: ${deviceInfo.value.batteryLevel}%`)
|
||
} catch (batteryError) {
|
||
addLog('设备不支持电池服务')
|
||
deviceInfo.value.batteryLevel = 0
|
||
}
|
||
|
||
// 尝试获取设备信息服务
|
||
try {
|
||
const deviceInfoService = await bluetoothState.value.server.getPrimaryService('device_information')
|
||
const characteristics = await deviceInfoService.getCharacteristics()
|
||
|
||
// 尝试读取设备名称
|
||
const deviceNameChar = characteristics.find(c => c.uuid === '00002a00-0000-1000-8000-00805f9b34fb')
|
||
if (deviceNameChar) {
|
||
const deviceNameValue = await deviceNameChar.readValue()
|
||
const deviceName = String.fromCharCode(...new Uint8Array(deviceNameValue.buffer))
|
||
addLog(`设备名称: ${deviceName}`)
|
||
}
|
||
|
||
// 尝试读取固件版本
|
||
const firmwareChar = characteristics.find(c => c.uuid === '00002a26-0000-1000-8000-00805f9b34fb')
|
||
if (firmwareChar) {
|
||
const firmwareValue = await firmwareChar.readValue()
|
||
const firmwareVersion = String.fromCharCode(...new Uint8Array(firmwareValue.buffer))
|
||
deviceInfo.value.firmwareVersion = firmwareVersion
|
||
addLog(`固件版本: ${firmwareVersion}`)
|
||
}
|
||
} catch (deviceInfoError) {
|
||
addLog('设备不支持设备信息服务')
|
||
}
|
||
|
||
} catch (error) {
|
||
addLog(`获取设备信息失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发送数据到设备
|
||
* 功能：通过写入特征值向设备发送数据
|
||
* @param data 要发送的数据（Uint8Array格式）
|
||
* @returns 发送是否成功
|
||
*/
|
||
const sendDataToDevice = async (data: Uint8Array) => {
|
||
if (!bluetoothState.value.writeCharacteristic) {
|
||
addLog('写入特征值不可用，尝试查找可写特征值')
|
||
|
||
// 尝试查找其他可写的特征值
|
||
if (bluetoothState.value.server) {
|
||
try {
|
||
const services = await bluetoothState.value.server.getPrimaryServices()
|
||
for (const service of services) {
|
||
const characteristics = await service.getCharacteristics()
|
||
const writableChars = characteristics.filter(c =>
|
||
c.properties.write || c.properties.writeWithoutResponse
|
||
)
|
||
|
||
if (writableChars.length > 0) {
|
||
bluetoothState.value.writeCharacteristic = writableChars[0]
|
||
addLog(`找到可写特征值: ${writableChars[0].uuid}`)
|
||
break
|
||
}
|
||
}
|
||
} catch (error) {
|
||
addLog(`查找可写特征值失败: ${error}`)
|
||
return false
|
||
}
|
||
}
|
||
|
||
if (!bluetoothState.value.writeCharacteristic) {
|
||
addLog('未找到任何可写的特征值，无法发送控制命令')
|
||
addLog('提示：该设备可能不支持通过蓝牙进行控制，或者需要特定的服务UUID')
|
||
return false
|
||
}
|
||
}
|
||
|
||
try {
|
||
// 通过写入特征值发送数据
|
||
await bluetoothState.value.writeCharacteristic.writeValue(data)
|
||
return true
|
||
} catch (error) {
|
||
addLog(`发送数据失败: ${error}`)
|
||
return false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 字符串转ArrayBuffer
|
||
* 功能：将字符串转换为ArrayBuffer格式，用于蓝牙数据传输
|
||
* @param str 要转换的字符串
|
||
* @returns ArrayBuffer格式的数据
|
||
*/
|
||
const stringToBuffer = (str: string): ArrayBuffer => {
|
||
const bytes = new Uint8Array(str.length)
|
||
for (let i = 0; i < str.length; i++) {
|
||
bytes[i] = str.charCodeAt(i) // 将字符转换为ASCII码
|
||
}
|
||
return bytes.buffer
|
||
}
|
||
|
||
/**
|
||
* 发送自定义数据
|
||
* 功能：向设备发送自定义字符串数据
|
||
* @param data 要发送的字符串数据
|
||
*/
|
||
const sendCustomData = async (data: string) => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 将字符串转换为ArrayBuffer
|
||
const buffer = stringToBuffer(data)
|
||
const success = await sendDataToDevice(new Uint8Array(buffer))
|
||
if (success) {
|
||
addLog(`发送自定义数据: ${data}`)
|
||
}
|
||
} catch (error) {
|
||
addLog(`发送自定义数据失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发送WiFi配置
|
||
* 功能：向设备发送WiFi网络配置信息（SSID和密码）
|
||
*/
|
||
const sendWiFiConfig = async () => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
if (!controlCommands.value.wifiSsid || !controlCommands.value.wifiPassword) {
|
||
addLog('请输入WiFi名称和密码')
|
||
return
|
||
}
|
||
|
||
try {
|
||
addLog('正在发送WiFi配置...')
|
||
|
||
// 发送WiFi网络名称（SSID）
|
||
const ssidBuffer = stringToBuffer(controlCommands.value.wifiSsid)
|
||
await sendDataToDevice(new Uint8Array(ssidBuffer))
|
||
|
||
// 发送WiFi密码
|
||
const passwordBuffer = stringToBuffer(controlCommands.value.wifiPassword)
|
||
await sendDataToDevice(new Uint8Array(passwordBuffer))
|
||
|
||
addLog('WiFi配置发送完成')
|
||
} catch (error) {
|
||
addLog(`发送WiFi配置失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发送控制命令
|
||
* 功能：向设备发送各种控制命令，如LED、电机、温度、湿度等
|
||
* @param command 命令类型
|
||
* @param value 命令参数值
|
||
*/
|
||
const sendCommand = async (command: string, value?: number) => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
try {
|
||
let data: Uint8Array
|
||
|
||
// 根据命令类型构造不同的数据包
|
||
switch (command) {
|
||
case 'led':
|
||
// LED控制：0x01 + 状态(0x00关闭/0x01开启)
|
||
data = new Uint8Array([0x01, value ? 0x01 : 0x00])
|
||
addLog(`发送LED命令: ${value ? '开启' : '关闭'}`)
|
||
break
|
||
case 'motor':
|
||
// 电机控制：0x02 + 速度值(0-100)
|
||
data = new Uint8Array([0x02, value || 0])
|
||
addLog(`发送电机速度: ${value}%`)
|
||
break
|
||
case 'temperature':
|
||
// 温度控制：0x03 + 温度值(0-50)
|
||
data = new Uint8Array([0x03, value || 0])
|
||
addLog(`设置温度: ${value}°C`)
|
||
break
|
||
case 'humidity':
|
||
// 湿度控制：0x04 + 湿度值(0-100)
|
||
data = new Uint8Array([0x04, value || 0])
|
||
addLog(`设置湿度: ${value}%`)
|
||
break
|
||
default:
|
||
addLog(`未知命令: ${command}`)
|
||
return
|
||
}
|
||
|
||
// 发送构造好的数据包
|
||
await sendDataToDevice(data)
|
||
} catch (error) {
|
||
addLog(`发送命令失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 控制LED开关
|
||
* 功能：切换LED灯的开关状态
|
||
*/
|
||
const toggleLED = () => {
|
||
controlCommands.value.ledOn = !controlCommands.value.ledOn
|
||
sendCommand('led', controlCommands.value.ledOn ? 1 : 0)
|
||
}
|
||
|
||
/**
|
||
* 控制电机速度
|
||
* 功能：设置电机运行速度
|
||
* @param speed 电机速度 (0-100)
|
||
*/
|
||
const setMotorSpeed = (speed: number) => {
|
||
controlCommands.value.motorSpeed = speed
|
||
sendCommand('motor', speed)
|
||
}
|
||
|
||
/**
|
||
* 设置温度
|
||
* 功能：设置设备的目标温度
|
||
* @param temp 目标温度 (0-50°C)
|
||
*/
|
||
const setTemperature = (temp: number) => {
|
||
controlCommands.value.temperature = temp
|
||
sendCommand('temperature', temp)
|
||
}
|
||
|
||
/**
|
||
* 设置湿度
|
||
* 功能：设置设备的目标湿度
|
||
* @param humidity 目标湿度 (0-100%)
|
||
*/
|
||
const setHumidity = (humidity: number) => {
|
||
controlCommands.value.humidity = humidity
|
||
sendCommand('humidity', humidity)
|
||
}
|
||
|
||
/**
|
||
* 发送自定义命令
|
||
* 功能：发送用户输入的自定义数据命令
|
||
*/
|
||
const sendCustomCommand = () => {
|
||
if (controlCommands.value.customData) {
|
||
sendCustomData(controlCommands.value.customData)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 读取通用访问服务信息
|
||
* 功能：读取通用访问服务的所有可用信息
|
||
*/
|
||
const readGenericAccessInfo = async () => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
try {
|
||
addLog('读取通用访问服务信息...')
|
||
|
||
// 获取通用访问服务
|
||
const genericAccessService = await bluetoothState.value.server.getPrimaryService('00001800-0000-1000-8000-00805f9b34fb')
|
||
const characteristics = await genericAccessService.getCharacteristics()
|
||
|
||
for (const char of characteristics) {
|
||
addLog(`特征值: ${char.uuid}`)
|
||
addLog(`属性: ${JSON.stringify(char.properties)}`)
|
||
|
||
// 根据特征值UUID读取对应信息
|
||
if (char.properties.read) {
|
||
try {
|
||
const value = await char.readValue()
|
||
|
||
switch (char.uuid) {
|
||
case '00002a00-0000-1000-8000-00805f9b34fb': // 设备名称
|
||
const deviceName = String.fromCharCode(...new Uint8Array(value.buffer))
|
||
deviceInfo.value.name = deviceName
|
||
addLog(`设备名称: ${deviceName}`)
|
||
break
|
||
|
||
case '00002a01-0000-1000-8000-00805f9b34fb': // 外观
|
||
const appearance = new DataView(value.buffer).getUint16(0, true)
|
||
addLog(`设备外观: 0x${appearance.toString(16)}`)
|
||
break
|
||
|
||
case '00002a02-0000-1000-8000-00805f9b34fb': // 隐私标志
|
||
const privacyFlag = new DataView(value.buffer).getUint8(0)
|
||
addLog(`隐私标志: ${privacyFlag}`)
|
||
break
|
||
|
||
case '00002a03-0000-1000-8000-00805f9b34fb': // 重新连接地址
|
||
const reconnectAddress = Array.from(new Uint8Array(value.buffer))
|
||
.map(b => b.toString(16).padStart(2, '0'))
|
||
.join(':')
|
||
addLog(`重新连接地址: ${reconnectAddress}`)
|
||
break
|
||
|
||
case '00002a04-0000-1000-8000-00805f9b34fb': // 外设首选连接参数
|
||
const params = new DataView(value.buffer)
|
||
const minInterval = params.getUint16(0, true)
|
||
const maxInterval = params.getUint16(2, true)
|
||
const latency = params.getUint16(4, true)
|
||
const timeout = params.getUint16(6, true)
|
||
addLog(`连接参数: 最小间隔=${minInterval}ms, 最大间隔=${maxInterval}ms, 延迟=${latency}, 超时=${timeout}ms`)
|
||
break
|
||
|
||
case '00002aa6-0000-1000-8000-00805f9b34fb': // 中央地址解析
|
||
const centralAddressResolution = new DataView(value.buffer).getUint8(0)
|
||
addLog(`中央地址解析: ${centralAddressResolution ? '支持' : '不支持'}`)
|
||
break
|
||
|
||
default:
|
||
// 其他特征值，尝试作为文本读取
|
||
const text = String.fromCharCode(...new Uint8Array(value.buffer))
|
||
addLog(`未知特征值数据: ${text}`)
|
||
break
|
||
}
|
||
} catch (readError) {
|
||
addLog(`读取特征值 ${char.uuid} 失败: ${readError}`)
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
addLog(`读取通用访问服务信息失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 查找可写特征值
|
||
* 功能：在所有服务中查找支持写入操作的特征值
|
||
*/
|
||
const findWritableCharacteristics = async () => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
try {
|
||
addLog('查找可写特征值...')
|
||
|
||
const services = await bluetoothState.value.server.getPrimaryServices()
|
||
const writableChars = []
|
||
|
||
for (const service of services) {
|
||
addLog(`检查服务: ${service.uuid}`)
|
||
|
||
try {
|
||
const characteristics = await service.getCharacteristics()
|
||
|
||
for (const char of characteristics) {
|
||
const properties = char.properties
|
||
addLog(`特征值: ${char.uuid}`)
|
||
addLog(`属性: ${JSON.stringify(properties)}`)
|
||
|
||
// 检查是否支持写入
|
||
if (properties.write || properties.writeWithoutResponse) {
|
||
writableChars.push({
|
||
serviceUuid: service.uuid,
|
||
characteristicUuid: char.uuid,
|
||
properties: properties
|
||
})
|
||
addLog(`✓ 找到可写特征值: ${char.uuid}`)
|
||
}
|
||
|
||
// 检查是否支持读取
|
||
if (properties.read) {
|
||
addLog(`✓ 找到可读特征值: ${char.uuid}`)
|
||
}
|
||
|
||
// 检查是否支持通知
|
||
if (properties.notify) {
|
||
addLog(`✓ 找到可通知特征值: ${char.uuid}`)
|
||
}
|
||
}
|
||
} catch (charError) {
|
||
addLog(`获取特征值失败: ${charError}`)
|
||
}
|
||
}
|
||
|
||
if (writableChars.length > 0) {
|
||
addLog(`共找到 ${writableChars.length} 个可写特征值:`)
|
||
writableChars.forEach((char, index) => {
|
||
addLog(`${index + 1}. 服务: ${char.serviceUuid}`)
|
||
addLog(` 特征值: ${char.characteristicUuid}`)
|
||
addLog(` 属性: ${JSON.stringify(char.properties)}`)
|
||
})
|
||
|
||
// 使用第一个可写特征值
|
||
const firstWritable = writableChars[0]
|
||
const service = await bluetoothState.value.server.getPrimaryService(firstWritable.serviceUuid)
|
||
const characteristic = await service.getCharacteristic(firstWritable.characteristicUuid)
|
||
bluetoothState.value.writeCharacteristic = characteristic
|
||
addLog(`已设置写入特征值: ${firstWritable.characteristicUuid}`)
|
||
} else {
|
||
addLog('未找到任何可写的特征值')
|
||
addLog('该设备可能不支持通过蓝牙进行控制')
|
||
}
|
||
|
||
} catch (error) {
|
||
addLog(`查找可写特征值失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 尝试通用设备通信
|
||
* 功能：当设备没有特定服务时，尝试使用通用方式进行通信
|
||
*/
|
||
const tryGenericCommunication = async () => {
|
||
if (!bluetoothState.value.isConnected) {
|
||
addLog('设备未连接')
|
||
return
|
||
}
|
||
|
||
try {
|
||
addLog('尝试通用设备通信...')
|
||
|
||
// 首先读取通用访问服务信息
|
||
await readGenericAccessInfo()
|
||
|
||
// 查找可写特征值
|
||
await findWritableCharacteristics()
|
||
|
||
// 获取所有服务
|
||
const services = await bluetoothState.value.server.getPrimaryServices()
|
||
|
||
for (const service of services) {
|
||
addLog(`检查服务: ${service.uuid}`)
|
||
|
||
try {
|
||
const characteristics = await service.getCharacteristics()
|
||
|
||
for (const char of characteristics) {
|
||
addLog(`特征值: ${char.uuid}, 属性: ${JSON.stringify(char.properties)}`)
|
||
|
||
// 尝试读取可读的特征值
|
||
if (char.properties.read) {
|
||
try {
|
||
const value = await char.readValue()
|
||
const data = new Uint8Array(value.buffer)
|
||
const text = String.fromCharCode(...data)
|
||
addLog(`读取数据: ${text}`)
|
||
} catch (readError) {
|
||
addLog(`读取失败: ${readError}`)
|
||
}
|
||
}
|
||
|
||
// 尝试启用通知
|
||
if (char.properties.notify) {
|
||
try {
|
||
await char.startNotifications()
|
||
char.addEventListener('characteristicvaluechanged', onCharacteristicValueChanged)
|
||
addLog(`已启用通知: ${char.uuid}`)
|
||
} catch (notifyError) {
|
||
addLog(`启用通知失败: ${notifyError}`)
|
||
}
|
||
}
|
||
}
|
||
} catch (charError) {
|
||
addLog(`获取特征值失败: ${charError}`)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
addLog(`通用通信失败: ${error}`)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清除日志
|
||
* 功能：清空操作日志列表
|
||
*/
|
||
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">
|
||
<!-- 页面标题 -->
|
||
<div class="text-center mb-8">
|
||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
||
蓝牙设备测试
|
||
</h1>
|
||
<p class="text-gray-600 dark:text-gray-300">
|
||
Web Bluetooth API 设备连接与控制
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 支持状态 -->
|
||
<div class="mb-6">
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
||
<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 font-medium text-gray-900 dark:text-white">
|
||
Web Bluetooth API {{ bluetoothState.isSupported ? '支持' : '不支持' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- 设备控制面板 -->
|
||
<div class="space-y-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">
|
||
<button
|
||
@click="scanDevices"
|
||
:disabled="bluetoothState.isScanning || !bluetoothState.isSupported"
|
||
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="scanSpecificService"
|
||
:disabled="bluetoothState.isScanning || !bluetoothState.isSupported"
|
||
class="w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
|
||
>
|
||
{{ bluetoothState.isScanning ? '扫描中...' : '扫描特定服务设备' }}
|
||
</button>
|
||
|
||
<button
|
||
@click="connectDevice"
|
||
:disabled="!bluetoothState.selectedDevice || bluetoothState.isConnected"
|
||
class="w-full px-4 py-2 bg-green-600 hover:bg-green-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>
|
||
|
||
<button
|
||
@click="readGenericAccessInfo"
|
||
:disabled="!bluetoothState.isConnected"
|
||
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"
|
||
>
|
||
读取通用访问信息
|
||
</button>
|
||
|
||
<button
|
||
@click="findWritableCharacteristics"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-gray-400 text-white font-medium rounded-lg transition-colors"
|
||
>
|
||
查找可写特征值
|
||
</button>
|
||
|
||
<button
|
||
@click="tryGenericCommunication"
|
||
: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>
|
||
</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-3">
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">设备名称:</span>
|
||
<span class="text-gray-900 dark:text-white">{{ deviceInfo.name || '未连接' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">设备ID:</span>
|
||
<span class="text-gray-900 dark:text-white text-sm">{{ deviceInfo.id || '未连接' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">连接状态:</span>
|
||
<span
|
||
class="font-medium"
|
||
:class="deviceInfo.connected ? 'text-green-600' : 'text-red-600'"
|
||
>
|
||
{{ deviceInfo.connected ? '已连接' : '未连接' }}
|
||
</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">电池电量:</span>
|
||
<span class="text-gray-900 dark:text-white">{{ deviceInfo.batteryLevel }}%</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">固件版本:</span>
|
||
<span class="text-gray-900 dark:text-white">{{ deviceInfo.firmwareVersion || '未知' }}</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-600 dark:text-gray-300">服务数量:</span>
|
||
<span class="text-gray-900 dark:text-white">{{ deviceInfo.services.length }}</span>
|
||
</div>
|
||
</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">
|
||
<!-- 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 font-medium transition-colors"
|
||
:class="controlCommands.ledOn
|
||
? 'bg-yellow-500 hover:bg-yellow-600 text-white'
|
||
: 'bg-gray-300 hover:bg-gray-400 text-gray-700'"
|
||
>
|
||
{{ controlCommands.ledOn ? '关闭' : '开启' }}
|
||
</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"
|
||
@input="setMotorSpeed(controlCommands.motorSpeed)"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||
/>
|
||
</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"
|
||
@input="setTemperature(controlCommands.temperature)"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||
/>
|
||
</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"
|
||
@input="setHumidity(controlCommands.humidity)"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||
/>
|
||
</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">
|
||
<div>
|
||
<label class="block text-gray-600 dark:text-gray-300 mb-2">WiFi名称</label>
|
||
<input
|
||
type="text"
|
||
v-model="controlCommands.wifiSsid"
|
||
placeholder="请输入WiFi名称"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 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密码"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||
/>
|
||
</div>
|
||
<button
|
||
@click="sendWiFiConfig"
|
||
:disabled="!bluetoothState.isConnected"
|
||
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"
|
||
>
|
||
发送WiFi配置
|
||
</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>
|
||
<label class="block text-gray-600 dark:text-gray-300 mb-2">自定义命令</label>
|
||
<input
|
||
type="text"
|
||
v-model="controlCommands.customData"
|
||
placeholder="请输入自定义命令"
|
||
:disabled="!bluetoothState.isConnected"
|
||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||
/>
|
||
</div>
|
||
<button
|
||
@click="sendCustomCommand"
|
||
: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>
|
||
</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 text-sm bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded transition-colors"
|
||
>
|
||
清除
|
||
</button>
|
||
</div>
|
||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 h-96 overflow-y-auto">
|
||
<div 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 v-if="logs.length === 0" class="text-gray-500 dark:text-gray-400 text-center py-8">
|
||
暂无日志信息
|
||
</div>
|
||
</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;
|
||
}
|
||
</style> |