vite-uni-dev-tool 1.1.0 → 1.2.1

package/dist/v3/DevTool/components/BluetoothList/BluetoothTool.vue

@@ -1,730 +1,730 @@
-<template>
-  <view class="bluetooth-tool" :style="customStyle">
-    <view class="bluetooth-tool-control">
-      <DevToolTitle>
-        {{ device.name || device.localName || device.deviceId }}
-      </DevToolTitle>
-
-      <CircularButton
-        style="margin-left: auto"
-        text="×"
-        @click="emit('back')" />
-    </view>
-
-    <!-- 配置区域 -->
-    <view class="tool-config">
-      <view class="config-item">
-        <text class="label">{{ t('bluetooth.service') }}:</text>
-        <Pick
-          v-model="selectedServiceUuid"
-          :options="
-            services.map((item) => ({ label: item.uuid, value: item.uuid }))
-          "
-          :placeholder="t('bluetooth.selectService')"
-          @change="onServiceChangePick"
-          customStyle="width: 200px" />
-        <view class="refresh-btn" @click="fetchServices">↻</view>
-      </view>
-
-      <view class="config-item" v-if="selectedService">
-        <text class="label">{{ t('bluetooth.characteristic') }}:</text>
-        <Pick
-          v-model="selectedCharUuid"
-          :options="
-            characteristics.map((item) => ({
-              label: item.uuid,
-              value: item.uuid,
-            }))
-          "
-          :placeholder="t('bluetooth.selectChar')"
-          @change="onCharacteristicChangePick"
-          customStyle="width: 200px" />
-      </view>
-
-      <view class="char-props" v-if="selectedCharacteristic">
-        {{ t('bluetooth.properties') }}:
-        <text class="prop-tag" v-if="selectedCharacteristic.properties?.read">
-          {{ t('bluetooth.propertyRead') }}
-        </text>
-        <text class="prop-tag" v-if="selectedCharacteristic.properties?.write">
-          {{ t('bluetooth.propertyWrite') }}
-        </text>
-        <text class="prop-tag" v-if="selectedCharacteristic.properties?.notify">
-          {{ t('bluetooth.propertyNotify') }}
-        </text>
-        <text
-          class="prop-tag"
-          v-if="selectedCharacteristic.properties?.indicate">
-          {{ t('bluetooth.propertyIndicate') }}
-        </text>
-      </view>
-
-      <view
-        class="notify-switch"
-        v-if="
-          selectedCharacteristic &&
-          (selectedCharacteristic.properties?.notify ||
-            selectedCharacteristic.properties?.indicate)
-        ">
-        <text>{{ t('bluetooth.receiveNotify') }}</text>
-        <switch
-          :checked="isNotifying"
-          @change="(e: any) => toggleNotify(e)"
-          style="transform: scale(0.7)" />
-      </view>
-    </view>
-
-    <!-- 日志区域 -->
-    <view class="log-area">
-      <scroll-view scroll-y class="log-scroll" :scroll-top="scrollTop">
-        <view
-          v-for="(log, index) in logs"
-          :key="index"
-          :class="['log-item', log.type]">
-          <view class="log-time">{{ log.time }}</view>
-          <view class="log-dir">
-            {{
-              log.type === 'send'
-                ? t('bluetooth.tx')
-                : log.type === 'receive'
-                  ? t('bluetooth.rx')
-                  : t('bluetooth.sys')
-            }}
-          </view>
-          <view class="log-content">{{ log.content }}</view>
-        </view>
-        <view v-if="logs.length === 0" class="empty-log">
-          {{ t('bluetooth.noData') }}
-        </view>
-      </scroll-view>
-      <view class="log-actions">
-        <view class="format-switch" @click="isHexFormat = !isHexFormat">
-          {{ t('bluetooth.format') }}: {{ isHexFormat ? 'HEX' : 'TEXT' }} ({{
-            t('common.refresh')
-          }})
-        </view>
-        <view class="clear-btn" @click="clearLogs">
-          {{ t('common.clear') }}
-        </view>
-      </view>
-    </view>
-
-    <!-- 发送区域 -->
-    <view class="send-container">
-      <view class="send-options">
-        <view class="opt-item">
-          {{ t('bluetooth.suffix') }}:
-          <switch
-            :checked="appendCRLF"
-            @change="(e: any) => (appendCRLF = e.detail.value)"
-            style="transform: scale(0.6)" />
-          &#92;r&#92;n
-        </view>
-        <view class="opt-item">
-          {{ t('bluetooth.mode') }}:
-          <Pick
-            :options="writeTypeOptionsPick"
-            v-model="selectedWriteTypePick"
-            :placeholder="t('bluetooth.auto')"
-            customStyle="width: 100px; margin-left: 4px;"
-            :allowClear="false"
-            :readonly="true" />
-        </view>
-      </view>
-      <view class="send-area">
-        <textarea
-          v-model="sendText"
-          class="send-input"
-          :placeholder="t('bluetooth.placeholder')"
-          :maxlength="-1" />
-        <view class="send-btn" @click="sendData">
-          {{ t('bluetooth.send') }}
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
-import type { DevTool } from '../../../../type';
-import DevToolTitle from '../DevToolTitle/index.vue';
-import CircularButton from '../../../components/CircularButton/index.vue';
-import Pick from '../../../components/Pick/index.vue';
-import useBluetooth from '../../../hooks/useBluetooth';
-import { useI18n } from '../../../../i18n';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-  device: DevTool.BluetoothItem;
-  contentHeight: number;
-  customStyle?: Record<string, any>;
-}>();
-
-const emit = defineEmits<{
-  (e: 'back'): void;
-}>();
-
-const {
-  getBLEServices,
-  getBLECharacteristics,
-  writeBLEMessage,
-  subscribeBLEMessage,
-  onBLEMessageReceived,
-} = useBluetooth();
-
-interface BLEService {
-  uuid: string;
-  isPrimary: boolean;
-}
-
-interface BLECharacteristic {
-  uuid: string;
-  properties: {
-    read: boolean;
-    write: boolean;
-    notify: boolean;
-    indicate: boolean;
-    writeNoResponse?: boolean;
-  };
-}
-
-// --- 状态定义 ---
-const services = ref<BLEService[]>([]);
-const selectedService = ref<BLEService | null>(null);
-const selectedServiceUuid = ref('');
-
-const characteristics = ref<BLECharacteristic[]>([]);
-const selectedCharacteristic = ref<BLECharacteristic | null>(null);
-const selectedCharUuid = ref('');
-const isNotifying = ref(false);
-
-const sendText = ref('');
-const isHexFormat = ref(true); // 默认以 HEX 显示和发送
-const appendCRLF = ref(false); // 是否自动追加换行
-
-// WriteType Pick 选项
-const writeTypeOptionsPick = computed(() => [
-  { label: t('bluetooth.auto'), value: '0' },
-  { label: 'Write', value: '1' },
-  { label: 'WriteNoResp', value: '2' },
-]);
-const selectedWriteTypePick = ref('0');
-
-const logs = ref<
-  Array<{ type: 'send' | 'receive' | 'system'; time: string; content: string }>
->([]);
-const scrollTop = ref(0);
-
-// --- 辅助函数 ---
-const getTime = () => {
-  const now = new Date();
-  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;
-};
-
-const addLog = (type: 'send' | 'receive' | 'system', content: string) => {
-  logs.value.push({ type, time: getTime(), content });
-  if (logs.value.length > 500) {
-    logs.value.shift(); // 限制最多500条日志
-  }
-  nextTick(() => {
-    scrollTop.value = logs.value.length * 100; // 简单粗暴滚动到底部
-  });
-};
-
-const clearLogs = () => {
-  logs.value = [];
-};
-
-// 字符串转 ArrayBuffer
-const stringToArrayBuffer = (str: string) => {
-  const buffer = new ArrayBuffer(str.length);
-  const dataView = new DataView(buffer);
-  for (let i = 0; i < str.length; i++) {
-    dataView.setUint8(i, str.charCodeAt(i));
-  }
-  return buffer;
-};
-
-// Hex 字符串转 ArrayBuffer (支持空格分隔或去空格无缝连接)
-const hexStringToArrayBuffer = (hexStr: string) => {
-  const hex = hexStr.replace(/\s+/g, '');
-  if (hex.length % 2 !== 0) {
-    throw new Error('Hex string must have an even number of characters');
-  }
-  const buffer = new ArrayBuffer(hex.length / 2);
-  const dataView = new DataView(buffer);
-  for (let i = 0; i < hex.length; i += 2) {
-    dataView.setUint8(i / 2, parseInt(hex.substring(i, i + 2), 16));
-  }
-  return buffer;
-};
-
-// ArrayBuffer 转 Hex 字符串
-const arrayBufferToHexString = (buffer: ArrayBuffer) => {
-  const uint8Array = new Uint8Array(buffer);
-  return Array.from(uint8Array, (byte) =>
-    byte.toString(16).padStart(2, '0').toUpperCase(),
-  ).join(' ');
-};
-
-// ArrayBuffer 转 字符串
-const arrayBufferToString = (buffer: ArrayBuffer) => {
-  return String.fromCharCode.apply(
-    null,
-    new Uint8Array(buffer) as unknown as number[],
-  );
-};
-
-// --- 业务操作 ---
-
-const fetchServices = async () => {
-  try {
-    uni.showLoading({ title: t('bluetooth.gettingService') });
-    const res = await getBLEServices(props.device.deviceId);
-    services.value = (res as BLEService[]).filter((item) => item.isPrimary);
-    if (services.value.length > 0) {
-      addLog(
-        'system',
-        `${t('bluetooth.gettingService')} ${services.value.length} ${t('bluetooth.service')}`,
-      );
-    } else {
-      addLog('system', t('bluetooth.noDevice'));
-    }
-  } catch (error: unknown) {
-    const err = error as { message?: string };
-    addLog(
-      'system',
-      `${t('bluetooth.gettingService')}${t('common.error')}: ${err.message || 'Error'}`,
-    );
-  } finally {
-    uni.hideLoading();
-  }
-};
-
-const onServiceChangePick = async (item: { value: any }) => {
-  const index = services.value.findIndex((s) => s.uuid === item.value);
-  if (index === -1) return;
-
-  selectedService.value = services.value[index];
-  selectedCharacteristic.value = null; // 重置特征值
-  selectedCharUuid.value = '';
-  characteristics.value = [];
-  isNotifying.value = false;
-
-  if (!selectedService.value) return;
-
-  try {
-    uni.showLoading({ title: t('bluetooth.gettingChar') });
-    const res = await getBLECharacteristics(
-      props.device.deviceId,
-      selectedService.value!.uuid as string,
-    );
-    characteristics.value = res as BLECharacteristic[];
-    addLog(
-      'system',
-      `${t('bluetooth.gettingChar')} ${res.length} ${t('bluetooth.characteristic')} (${selectedService.value!.uuid})`,
-    );
-  } catch (error: unknown) {
-    const err = error as { message?: string };
-    addLog(
-      'system',
-      `${t('bluetooth.gettingChar')}${t('common.error')}: ${err.message || 'Error'}`,
-    );
-  } finally {
-    uni.hideLoading();
-  }
-};
-
-const onCharacteristicChangePick = (item: { value: any }) => {
-  const index = characteristics.value.findIndex((c) => c.uuid === item.value);
-  if (index === -1) return;
-
-  selectedCharacteristic.value = characteristics.value[index];
-  isNotifying.value = false;
-  addLog(
-    'system',
-    `${t('bluetooth.characteristic')}: ${selectedCharacteristic.value?.uuid}`,
-  );
-};
-
-const toggleNotify = async (e: { detail: { value: boolean } }) => {
-  if (!selectedCharacteristic.value) return;
-  const targetState = (e.detail as { value: boolean }).value;
-  try {
-    uni.showLoading({
-      title: targetState ? t('bluetooth.notifying') : t('bluetooth.stopNotify'),
-    });
-    await subscribeBLEMessage(
-      props.device.deviceId,
-      selectedService.value!.uuid as string,
-      selectedCharacteristic.value.uuid as string,
-      targetState,
-    );
-    isNotifying.value = targetState;
-    addLog(
-      'system',
-      `${targetState ? t('bluetooth.notifyEnabled') : t('bluetooth.notifyDisabled')} (${selectedCharacteristic.value.uuid})`,
-    );
-  } catch (error: unknown) {
-    const err = error as { message?: string };
-    // 恢复开关状态
-    isNotifying.value = !targetState;
-    addLog(
-      'system',
-      `${t('bluetooth.notifyToggleFail')}: ${err.message || 'Error'}`,
-    );
-  } finally {
-    uni.hideLoading();
-  }
-};
-
-const sendData = async () => {
-  if (!selectedService.value || !selectedCharacteristic.value) {
-    uni.showToast({ title: t('bluetooth.selectCharFirst'), icon: 'none' });
-    return;
-  }
-  if (
-    !selectedCharacteristic.value.properties?.write &&
-    !selectedCharacteristic.value.properties?.writeNoResponse
-  ) {
-    uni.showToast({ title: t('bluetooth.charNotWritable'), icon: 'none' });
-    return;
-  }
-  if (!sendText.value) return;
-
-  let finalStr = sendText.value;
-  if (appendCRLF.value) {
-    if (isHexFormat.value) {
-      finalStr += ' 0D 0A';
-    } else {
-      finalStr += '\r\n';
-    }
-  }
-
-  let buffer: ArrayBuffer;
-  try {
-    if (isHexFormat.value) {
-      buffer = hexStringToArrayBuffer(finalStr);
-    } else {
-      buffer = stringToArrayBuffer(finalStr);
-    }
-  } catch (_error: unknown) {
-    uni.showToast({ title: t('bluetooth.invalidData'), icon: 'none' });
-    return;
-  }
-
-  try {
-    const rawVal = finalStr;
-    let writeTypeStr: string | undefined;
-    if (selectedWriteTypePick.value === '1') writeTypeStr = 'write';
-    else if (selectedWriteTypePick.value === '2')
-      writeTypeStr = 'writeNoResponse';
-    else {
-      writeTypeStr = selectedCharacteristic.value.properties?.write
-        ? 'write'
-        : 'writeNoResponse';
-    }
-
-    // 规避底层的 Proxy 或内存池引起的环境桥接报错：
-    // 使用纯粹的新 ArrayBuffer 处理
-    const pureBuffer = buffer.slice(0);
-
-    const res = await writeBLEMessage(
-      props.device.deviceId,
-      selectedService.value!.uuid as string,
-      selectedCharacteristic.value.uuid as string,
-      pureBuffer,
-      writeTypeStr as 'write' | 'writeNoResponse',
-    );
-    console.log('[DevTool] BLE Write Success:', res);
-    addLog('send', rawVal);
-  } catch (error: unknown) {
-    const err = error as { message?: string };
-    addLog('system', `${t('bluetooth.sendFail')}: ${err.message || 'Error'}`);
-  }
-};
-
-// 监听接收到的消息
-onBLEMessageReceived((res: unknown) => {
-  const result = res as {
-    deviceId: string;
-    characteristicId: string;
-    value: ArrayBuffer;
-  };
-  // 不再过滤当前 deviceId，以便接收所有设备的广播。这里我们将设备ID和特征字附加上，以作区分。
-  const arrBuf = result.value;
-  const content = isHexFormat.value
-    ? arrayBufferToHexString(arrBuf)
-    : arrayBufferToString(arrBuf);
-
-  let prefix = '';
-  if (result.deviceId !== props.device.deviceId) {
-    prefix = `[${t('bluetooth.fromDevice')}: ${result.deviceId.substring(result.deviceId.length - 5)}] `;
-  }
-
-  // 可以根据需要暴露特征字
-  prefix += `[${t('bluetooth.charField')}:${result.characteristicId.substring(4, 8)}] `;
-
-  addLog('receive', prefix + content);
-});
-
-onMounted(() => {
-  fetchServices();
-});
-
-onUnmounted(() => {
-  // 离开时如果正在通知，尝试关闭它以免耗电
-  if (
-    isNotifying.value &&
-    selectedCharacteristic.value &&
-    selectedService.value
-  ) {
-    subscribeBLEMessage(
-      props.device.deviceId,
-      selectedService.value.uuid as string,
-      selectedCharacteristic.value.uuid as string,
-      false,
-    ).catch(() => {});
-  }
-});
-</script>
-
-<style scoped>
-.bluetooth-tool {
-  position: fixed;
-  width: 100vw;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--dev-tool-bg3-color);
-  box-sizing: border-box;
-}
-
-.bluetooth-tool-control {
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.tool-config {
-  padding: 12px 16px;
-  background: var(--dev-tool-bg-color);
-  border-bottom: 2px solid var(--dev-tool-bg3-color);
-}
-
-.config-item {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-
-  /* 覆盖原生样式的部分，适配 Pick */
-  overflow: visible;
-}
-
-.label {
-  font-size: 12px;
-  color: var(--dev-tool-text-color-tips);
-  width: 90px;
-  flex-shrink: 0;
-}
-
-.picker-inner {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.refresh-btn {
-  margin-left: 8px;
-  color: var(--dev-tool-primary-color, #007aff);
-  cursor: pointer;
-  padding: 4px;
-}
-
-.char-props {
-  font-size: 12px;
-  color: var(--dev-tool-text-color-tips);
-  margin-top: 4px;
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.prop-tag {
-  background: var(--dev-tool-primary-color, #007aff);
-  color: #fff;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 10px;
-}
-
-.notify-switch {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 12px;
-  color: var(--dev-tool-text-color);
-  border-top: 1px dashed var(--dev-tool-border-color);
-  padding-top: 8px;
-}
-
-.log-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 12px 16px;
-}
-
-.log-scroll {
-  flex: 1;
-  border: 1px solid var(--dev-tool-border-color);
-  border-radius: 4px;
-  background: var(--dev-tool-component-bg, #fafafa);
-  padding: 8px;
-  overflow-y: auto;
-}
-
-.log-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 6px;
-  word-break: break-all;
-}
-
-.log-time {
-  color: var(--dev-tool-text-color-tips);
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-
-.log-dir {
-  font-weight: bold;
-  margin-right: 8px;
-  width: 40px;
-  flex-shrink: 0;
-}
-
-.log-content {
-  flex: 1;
-}
-
-.log-item.system .log-dir {
-  color: #8f8f8f;
-}
-
-.log-item.system .log-content {
-  color: #8f8f8f;
-}
-
-.log-item.send .log-dir {
-  color: #ff9500;
-}
-
-.log-item.send .log-content {
-  color: var(--dev-tool-text-color);
-}
-
-.log-item.receive .log-dir {
-  color: #4cd964;
-}
-
-.log-item.receive .log-content {
-  color: var(--dev-tool-primary-color, #007aff);
-}
-
-.empty-log {
-  text-align: center;
-  color: var(--dev-tool-text-color-tips);
-  margin-top: 20px;
-  font-size: 12px;
-}
-
-.log-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  font-size: 12px;
-}
-
-.format-switch {
-  color: var(--dev-tool-primary-color, #007aff);
-  cursor: pointer;
-}
-
-.clear-btn {
-  color: #ff3b30;
-  cursor: pointer;
-}
-
-.send-container {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--dev-tool-border-color);
-  background: var(--dev-tool-component-bg, #f8f8f8);
-}
-
-.send-options {
-  display: flex;
-  align-items: center;
-  padding: 4px 16px;
-  font-size: 12px;
-  color: var(--dev-tool-text-color-tips);
-  gap: 16px;
-  border-bottom: 1px dashed var(--dev-tool-border-color);
-}
-
-.opt-item {
-  display: flex;
-  align-items: center;
-}
-
-.mode-picker {
-  margin-left: 4px;
-  color: var(--dev-tool-primary-color, #007aff);
-}
-
-.send-area {
-  display: flex;
-  padding: 8px 16px;
-  height: 80px;
-}
-
-.send-input {
-  flex: 1;
-  border: 1px solid var(--dev-tool-border-color);
-  border-radius: 4px;
-  padding: 8px;
-  background: var(--dev-tool-bg-color);
-  font-size: 14px;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.send-btn {
-  width: 60px;
-  margin-left: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--dev-tool-primary-color, #007aff);
-  color: #fff;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.send-btn:active {
-  opacity: 0.8;
-}
-</style>
+<template>
+  <view class="bluetooth-tool" :style="customStyle">
+    <view class="bluetooth-tool-control">
+      <DevToolTitle>
+        {{ device.name || device.localName || device.deviceId }}
+      </DevToolTitle>
+
+      <CircularButton
+        style="margin-left: auto"
+        text="×"
+        @click="emit('back')" />
+    </view>
+
+    <!-- 配置区域 -->
+    <view class="tool-config">
+      <view class="config-item">
+        <text class="label">{{ t('bluetooth.service') }}:</text>
+        <Pick
+          v-model="selectedServiceUuid"
+          :options="
+            services.map((item) => ({ label: item.uuid, value: item.uuid }))
+          "
+          :placeholder="t('bluetooth.selectService')"
+          @change="onServiceChangePick"
+          customStyle="width: 200px" />
+        <view class="refresh-btn" @click="fetchServices">↻</view>
+      </view>
+
+      <view class="config-item" v-if="selectedService">
+        <text class="label">{{ t('bluetooth.characteristic') }}:</text>
+        <Pick
+          v-model="selectedCharUuid"
+          :options="
+            characteristics.map((item) => ({
+              label: item.uuid,
+              value: item.uuid,
+            }))
+          "
+          :placeholder="t('bluetooth.selectChar')"
+          @change="onCharacteristicChangePick"
+          customStyle="width: 200px" />
+      </view>
+
+      <view class="char-props" v-if="selectedCharacteristic">
+        {{ t('bluetooth.properties') }}:
+        <text class="prop-tag" v-if="selectedCharacteristic.properties?.read">
+          {{ t('bluetooth.propertyRead') }}
+        </text>
+        <text class="prop-tag" v-if="selectedCharacteristic.properties?.write">
+          {{ t('bluetooth.propertyWrite') }}
+        </text>
+        <text class="prop-tag" v-if="selectedCharacteristic.properties?.notify">
+          {{ t('bluetooth.propertyNotify') }}
+        </text>
+        <text
+          class="prop-tag"
+          v-if="selectedCharacteristic.properties?.indicate">
+          {{ t('bluetooth.propertyIndicate') }}
+        </text>
+      </view>
+
+      <view
+        class="notify-switch"
+        v-if="
+          selectedCharacteristic &&
+          (selectedCharacteristic.properties?.notify ||
+            selectedCharacteristic.properties?.indicate)
+        ">
+        <text>{{ t('bluetooth.receiveNotify') }}</text>
+        <switch
+          :checked="isNotifying"
+          @change="(e: any) => toggleNotify(e)"
+          style="transform: scale(0.7)" />
+      </view>
+    </view>
+
+    <!-- 日志区域 -->
+    <view class="log-area">
+      <scroll-view scroll-y class="log-scroll" :scroll-top="scrollTop">
+        <view
+          v-for="(log, index) in logs"
+          :key="index"
+          :class="['log-item', log.type]">
+          <view class="log-time">{{ log.time }}</view>
+          <view class="log-dir">
+            {{
+              log.type === 'send'
+                ? t('bluetooth.tx')
+                : log.type === 'receive'
+                  ? t('bluetooth.rx')
+                  : t('bluetooth.sys')
+            }}
+          </view>
+          <view class="log-content">{{ log.content }}</view>
+        </view>
+        <view v-if="logs.length === 0" class="empty-log">
+          {{ t('bluetooth.noData') }}
+        </view>
+      </scroll-view>
+      <view class="log-actions">
+        <view class="format-switch" @click="isHexFormat = !isHexFormat">
+          {{ t('bluetooth.format') }}: {{ isHexFormat ? 'HEX' : 'TEXT' }} ({{
+            t('common.refresh')
+          }})
+        </view>
+        <view class="clear-btn" @click="clearLogs">
+          {{ t('common.clear') }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 发送区域 -->
+    <view class="send-container">
+      <view class="send-options">
+        <view class="opt-item">
+          {{ t('bluetooth.suffix') }}:
+          <switch
+            :checked="appendCRLF"
+            @change="(e: any) => (appendCRLF = e.detail.value)"
+            style="transform: scale(0.6)" />
+          &#92;r&#92;n
+        </view>
+        <view class="opt-item">
+          {{ t('bluetooth.mode') }}:
+          <Pick
+            :options="writeTypeOptionsPick"
+            v-model="selectedWriteTypePick"
+            :placeholder="t('bluetooth.auto')"
+            customStyle="width: 100px; margin-left: 4px;"
+            :allowClear="false"
+            :readonly="true" />
+        </view>
+      </view>
+      <view class="send-area">
+        <textarea
+          v-model="sendText"
+          class="send-input"
+          :placeholder="t('bluetooth.placeholder')"
+          :maxlength="-1" />
+        <view class="send-btn" @click="sendData">
+          {{ t('bluetooth.send') }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
+import type { DevTool } from '../../../../type';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import Pick from '../../../components/Pick/index.vue';
+import useBluetooth from '../../../hooks/useBluetooth';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  device: DevTool.BluetoothItem;
+  contentHeight: number;
+  customStyle?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+}>();
+
+const {
+  getBLEServices,
+  getBLECharacteristics,
+  writeBLEMessage,
+  subscribeBLEMessage,
+  onBLEMessageReceived,
+} = useBluetooth();
+
+interface BLEService {
+  uuid: string;
+  isPrimary: boolean;
+}
+
+interface BLECharacteristic {
+  uuid: string;
+  properties: {
+    read: boolean;
+    write: boolean;
+    notify: boolean;
+    indicate: boolean;
+    writeNoResponse?: boolean;
+  };
+}
+
+// --- 状态定义 ---
+const services = ref<BLEService[]>([]);
+const selectedService = ref<BLEService | null>(null);
+const selectedServiceUuid = ref('');
+
+const characteristics = ref<BLECharacteristic[]>([]);
+const selectedCharacteristic = ref<BLECharacteristic | null>(null);
+const selectedCharUuid = ref('');
+const isNotifying = ref(false);
+
+const sendText = ref('');
+const isHexFormat = ref(true); // 默认以 HEX 显示和发送
+const appendCRLF = ref(false); // 是否自动追加换行
+
+// WriteType Pick 选项
+const writeTypeOptionsPick = computed(() => [
+  { label: t('bluetooth.auto'), value: '0' },
+  { label: 'Write', value: '1' },
+  { label: 'WriteNoResp', value: '2' },
+]);
+const selectedWriteTypePick = ref('0');
+
+const logs = ref<
+  Array<{ type: 'send' | 'receive' | 'system'; time: string; content: string }>
+>([]);
+const scrollTop = ref(0);
+
+// --- 辅助函数 ---
+const getTime = () => {
+  const now = new Date();
+  return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;
+};
+
+const addLog = (type: 'send' | 'receive' | 'system', content: string) => {
+  logs.value.push({ type, time: getTime(), content });
+  if (logs.value.length > 500) {
+    logs.value.shift(); // 限制最多500条日志
+  }
+  nextTick(() => {
+    scrollTop.value = logs.value.length * 100; // 简单粗暴滚动到底部
+  });
+};
+
+const clearLogs = () => {
+  logs.value = [];
+};
+
+// 字符串转 ArrayBuffer
+const stringToArrayBuffer = (str: string) => {
+  const buffer = new ArrayBuffer(str.length);
+  const dataView = new DataView(buffer);
+  for (let i = 0; i < str.length; i++) {
+    dataView.setUint8(i, str.charCodeAt(i));
+  }
+  return buffer;
+};
+
+// Hex 字符串转 ArrayBuffer (支持空格分隔或去空格无缝连接)
+const hexStringToArrayBuffer = (hexStr: string) => {
+  const hex = hexStr.replace(/\s+/g, '');
+  if (hex.length % 2 !== 0) {
+    throw new Error('Hex string must have an even number of characters');
+  }
+  const buffer = new ArrayBuffer(hex.length / 2);
+  const dataView = new DataView(buffer);
+  for (let i = 0; i < hex.length; i += 2) {
+    dataView.setUint8(i / 2, parseInt(hex.substring(i, i + 2), 16));
+  }
+  return buffer;
+};
+
+// ArrayBuffer 转 Hex 字符串
+const arrayBufferToHexString = (buffer: ArrayBuffer) => {
+  const uint8Array = new Uint8Array(buffer);
+  return Array.from(uint8Array, (byte) =>
+    byte.toString(16).padStart(2, '0').toUpperCase(),
+  ).join(' ');
+};
+
+// ArrayBuffer 转 字符串
+const arrayBufferToString = (buffer: ArrayBuffer) => {
+  return String.fromCharCode.apply(
+    null,
+    new Uint8Array(buffer) as unknown as number[],
+  );
+};
+
+// --- 业务操作 ---
+
+const fetchServices = async () => {
+  try {
+    uni.showLoading({ title: t('bluetooth.gettingService') });
+    const res = await getBLEServices(props.device.deviceId);
+    services.value = (res as BLEService[]).filter((item) => item.isPrimary);
+    if (services.value.length > 0) {
+      addLog(
+        'system',
+        `${t('bluetooth.gettingService')} ${services.value.length} ${t('bluetooth.service')}`,
+      );
+    } else {
+      addLog('system', t('bluetooth.noDevice'));
+    }
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    addLog(
+      'system',
+      `${t('bluetooth.gettingService')}${t('common.error')}: ${err.message || 'Error'}`,
+    );
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const onServiceChangePick = async (item: { value: any }) => {
+  const index = services.value.findIndex((s) => s.uuid === item.value);
+  if (index === -1) return;
+
+  selectedService.value = services.value[index];
+  selectedCharacteristic.value = null; // 重置特征值
+  selectedCharUuid.value = '';
+  characteristics.value = [];
+  isNotifying.value = false;
+
+  if (!selectedService.value) return;
+
+  try {
+    uni.showLoading({ title: t('bluetooth.gettingChar') });
+    const res = await getBLECharacteristics(
+      props.device.deviceId,
+      selectedService.value!.uuid as string,
+    );
+    characteristics.value = res as BLECharacteristic[];
+    addLog(
+      'system',
+      `${t('bluetooth.gettingChar')} ${res.length} ${t('bluetooth.characteristic')} (${selectedService.value!.uuid})`,
+    );
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    addLog(
+      'system',
+      `${t('bluetooth.gettingChar')}${t('common.error')}: ${err.message || 'Error'}`,
+    );
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const onCharacteristicChangePick = (item: { value: any }) => {
+  const index = characteristics.value.findIndex((c) => c.uuid === item.value);
+  if (index === -1) return;
+
+  selectedCharacteristic.value = characteristics.value[index];
+  isNotifying.value = false;
+  addLog(
+    'system',
+    `${t('bluetooth.characteristic')}: ${selectedCharacteristic.value?.uuid}`,
+  );
+};
+
+const toggleNotify = async (e: { detail: { value: boolean } }) => {
+  if (!selectedCharacteristic.value) return;
+  const targetState = (e.detail as { value: boolean }).value;
+  try {
+    uni.showLoading({
+      title: targetState ? t('bluetooth.notifying') : t('bluetooth.stopNotify'),
+    });
+    await subscribeBLEMessage(
+      props.device.deviceId,
+      selectedService.value!.uuid as string,
+      selectedCharacteristic.value.uuid as string,
+      targetState,
+    );
+    isNotifying.value = targetState;
+    addLog(
+      'system',
+      `${targetState ? t('bluetooth.notifyEnabled') : t('bluetooth.notifyDisabled')} (${selectedCharacteristic.value.uuid})`,
+    );
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    // 恢复开关状态
+    isNotifying.value = !targetState;
+    addLog(
+      'system',
+      `${t('bluetooth.notifyToggleFail')}: ${err.message || 'Error'}`,
+    );
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const sendData = async () => {
+  if (!selectedService.value || !selectedCharacteristic.value) {
+    uni.showToast({ title: t('bluetooth.selectCharFirst'), icon: 'none' });
+    return;
+  }
+  if (
+    !selectedCharacteristic.value.properties?.write &&
+    !selectedCharacteristic.value.properties?.writeNoResponse
+  ) {
+    uni.showToast({ title: t('bluetooth.charNotWritable'), icon: 'none' });
+    return;
+  }
+  if (!sendText.value) return;
+
+  let finalStr = sendText.value;
+  if (appendCRLF.value) {
+    if (isHexFormat.value) {
+      finalStr += ' 0D 0A';
+    } else {
+      finalStr += '\r\n';
+    }
+  }
+
+  let buffer: ArrayBuffer;
+  try {
+    if (isHexFormat.value) {
+      buffer = hexStringToArrayBuffer(finalStr);
+    } else {
+      buffer = stringToArrayBuffer(finalStr);
+    }
+  } catch (_error: unknown) {
+    uni.showToast({ title: t('bluetooth.invalidData'), icon: 'none' });
+    return;
+  }
+
+  try {
+    const rawVal = finalStr;
+    let writeTypeStr: string | undefined;
+    if (selectedWriteTypePick.value === '1') writeTypeStr = 'write';
+    else if (selectedWriteTypePick.value === '2')
+      writeTypeStr = 'writeNoResponse';
+    else {
+      writeTypeStr = selectedCharacteristic.value.properties?.write
+        ? 'write'
+        : 'writeNoResponse';
+    }
+
+    // 规避底层的 Proxy 或内存池引起的环境桥接报错：
+    // 使用纯粹的新 ArrayBuffer 处理
+    const pureBuffer = buffer.slice(0);
+
+    const res = await writeBLEMessage(
+      props.device.deviceId,
+      selectedService.value!.uuid as string,
+      selectedCharacteristic.value.uuid as string,
+      pureBuffer,
+      writeTypeStr as 'write' | 'writeNoResponse',
+    );
+    console.log('[DevTool] BLE Write Success:', res);
+    addLog('send', rawVal);
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    addLog('system', `${t('bluetooth.sendFail')}: ${err.message || 'Error'}`);
+  }
+};
+
+// 监听接收到的消息
+onBLEMessageReceived((res: unknown) => {
+  const result = res as {
+    deviceId: string;
+    characteristicId: string;
+    value: ArrayBuffer;
+  };
+  // 不再过滤当前 deviceId，以便接收所有设备的广播。这里我们将设备ID和特征字附加上，以作区分。
+  const arrBuf = result.value;
+  const content = isHexFormat.value
+    ? arrayBufferToHexString(arrBuf)
+    : arrayBufferToString(arrBuf);
+
+  let prefix = '';
+  if (result.deviceId !== props.device.deviceId) {
+    prefix = `[${t('bluetooth.fromDevice')}: ${result.deviceId.substring(result.deviceId.length - 5)}] `;
+  }
+
+  // 可以根据需要暴露特征字
+  prefix += `[${t('bluetooth.charField')}:${result.characteristicId.substring(4, 8)}] `;
+
+  addLog('receive', prefix + content);
+});
+
+onMounted(() => {
+  fetchServices();
+});
+
+onUnmounted(() => {
+  // 离开时如果正在通知，尝试关闭它以免耗电
+  if (
+    isNotifying.value &&
+    selectedCharacteristic.value &&
+    selectedService.value
+  ) {
+    subscribeBLEMessage(
+      props.device.deviceId,
+      selectedService.value.uuid as string,
+      selectedCharacteristic.value.uuid as string,
+      false,
+    ).catch(() => {});
+  }
+});
+</script>
+
+<style scoped>
+.bluetooth-tool {
+  position: fixed;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dev-tool-bg3-color);
+  box-sizing: border-box;
+}
+
+.bluetooth-tool-control {
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.tool-config {
+  padding: 12px 16px;
+  background: var(--dev-tool-bg-color);
+  border-bottom: 2px solid var(--dev-tool-bg3-color);
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  /* 覆盖原生样式的部分，适配 Pick */
+  overflow: visible;
+}
+
+.label {
+  font-size: 12px;
+  color: var(--dev-tool-text-color-tips);
+  width: 90px;
+  flex-shrink: 0;
+}
+
+.picker-inner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.refresh-btn {
+  margin-left: 8px;
+  color: var(--dev-tool-primary-color, #007aff);
+  cursor: pointer;
+  padding: 4px;
+}
+
+.char-props {
+  font-size: 12px;
+  color: var(--dev-tool-text-color-tips);
+  margin-top: 4px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.prop-tag {
+  background: var(--dev-tool-primary-color, #007aff);
+  color: #fff;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+}
+
+.notify-switch {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: var(--dev-tool-text-color);
+  border-top: 1px dashed var(--dev-tool-border-color);
+  padding-top: 8px;
+}
+
+.log-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 12px 16px;
+}
+
+.log-scroll {
+  flex: 1;
+  border: 1px solid var(--dev-tool-border-color);
+  border-radius: 4px;
+  background: var(--dev-tool-component-bg, #fafafa);
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.log-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 6px;
+  word-break: break-all;
+}
+
+.log-time {
+  color: var(--dev-tool-text-color-tips);
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.log-dir {
+  font-weight: bold;
+  margin-right: 8px;
+  width: 40px;
+  flex-shrink: 0;
+}
+
+.log-content {
+  flex: 1;
+}
+
+.log-item.system .log-dir {
+  color: #8f8f8f;
+}
+
+.log-item.system .log-content {
+  color: #8f8f8f;
+}
+
+.log-item.send .log-dir {
+  color: #ff9500;
+}
+
+.log-item.send .log-content {
+  color: var(--dev-tool-text-color);
+}
+
+.log-item.receive .log-dir {
+  color: #4cd964;
+}
+
+.log-item.receive .log-content {
+  color: var(--dev-tool-primary-color, #007aff);
+}
+
+.empty-log {
+  text-align: center;
+  color: var(--dev-tool-text-color-tips);
+  margin-top: 20px;
+  font-size: 12px;
+}
+
+.log-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.format-switch {
+  color: var(--dev-tool-primary-color, #007aff);
+  cursor: pointer;
+}
+
+.clear-btn {
+  color: #ff3b30;
+  cursor: pointer;
+}
+
+.send-container {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--dev-tool-border-color);
+  background: var(--dev-tool-component-bg, #f8f8f8);
+}
+
+.send-options {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px;
+  font-size: 12px;
+  color: var(--dev-tool-text-color-tips);
+  gap: 16px;
+  border-bottom: 1px dashed var(--dev-tool-border-color);
+}
+
+.opt-item {
+  display: flex;
+  align-items: center;
+}
+
+.mode-picker {
+  margin-left: 4px;
+  color: var(--dev-tool-primary-color, #007aff);
+}
+
+.send-area {
+  display: flex;
+  padding: 8px 16px;
+  height: 80px;
+}
+
+.send-input {
+  flex: 1;
+  border: 1px solid var(--dev-tool-border-color);
+  border-radius: 4px;
+  padding: 8px;
+  background: var(--dev-tool-bg-color);
+  font-size: 14px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.send-btn {
+  width: 60px;
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dev-tool-primary-color, #007aff);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.send-btn:active {
+  opacity: 0.8;
+}
+</style>