vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -0,0 +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>