vite-uni-dev-tool 1.0.0 → 1.1.0

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

@@ -0,0 +1,167 @@
+<template>
+  <view class="bluetooth-content">
+    <view class="bluetooth-control">
+      <DevToolTitle>{{ t('bluetooth.title') }}</DevToolTitle>
+
+      <view class="control-btns">
+        <Tag v-if="!isSearching" mode="clear" @click="startSearch">
+          {{ t('bluetooth.startSearch') }}
+        </Tag>
+        <Tag v-else mode="clear" @click="stopSearch">
+          {{ t('bluetooth.stopSearch') }}
+        </Tag>
+        <Tag mode="clear" @click="clear">{{ t('common.clear') }}</Tag>
+      </view>
+    </view>
+
+    <VirtualList
+      v-if="devices && devices.length > 0"
+      class="bluetooth-list"
+      :pageSize="20"
+      :height="contentHeight - 32 - 32"
+      :data="devices">
+      <template #default="{ list, start, itemsHeight, onSizeChange }">
+        <AutoSize
+          v-for="(item, index) in list"
+          :key="start + index"
+          :index="start + index"
+          :id="`dev-bluetooth-${start + index}`"
+          :itemsHeight="itemsHeight"
+          :onSizeChange="onSizeChange">
+          <BluetoothItem
+            :bluetoothItem="item"
+            @pair="handlePair"
+            @connect="handleConnect"
+            @disconnect="handleDisconnect"
+            @tool="handleTool" />
+        </AutoSize>
+      </template>
+    </VirtualList>
+
+    <Empty v-else />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { DevTool } from '../../../../type';
+import DevToolTitle from '../DevToolTitle/index.vue';
+import BluetoothItem from './BluetoothItem.vue';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
+import useBluetooth from '../../../hooks/useBluetooth';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+const emits = defineEmits<{
+  (e: 'openTool', device: DevTool.BluetoothItem): void;
+}>();
+
+defineProps<{
+  contentHeight: number;
+}>();
+
+const {
+  devices,
+  isSearching,
+  startBluetoothDevicesDiscovery,
+  stopBluetoothDevicesDiscovery,
+  connectDevice,
+  disconnectDevice,
+  pairDevice,
+} = useBluetooth();
+
+const startSearch = () => {
+  startBluetoothDevicesDiscovery();
+};
+
+const stopSearch = () => {
+  stopBluetoothDevicesDiscovery();
+};
+
+const clear = () => {
+  devices.value = [];
+};
+
+const handlePair = async (deviceId: string) => {
+  try {
+    uni.showLoading({ title: t('bluetooth.requestPairing') });
+    await pairDevice(deviceId);
+    uni.showToast({ title: t('bluetooth.pairRequestSent'), icon: 'success' });
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    uni.showToast({
+      title: err.message || t('bluetooth.pairRequestFail'),
+      icon: 'none',
+    });
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const handleConnect = async (deviceId: string) => {
+  try {
+    uni.showLoading({ title: t('bluetooth.connecting') });
+    await connectDevice(deviceId);
+    uni.showToast({ title: t('bluetooth.connectSuccess'), icon: 'success' });
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    uni.showToast({
+      title: err.message || t('bluetooth.connectFail'),
+      icon: 'none',
+    });
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const handleDisconnect = async (deviceId: string) => {
+  try {
+    uni.showLoading({ title: t('bluetooth.disconnecting') });
+    await disconnectDevice(deviceId);
+    uni.showToast({ title: t('bluetooth.disconnectSuccess'), icon: 'success' });
+  } catch (error: unknown) {
+    const err = error as { message?: string };
+    uni.showToast({
+      title: err.message || t('bluetooth.disconnectFail'),
+      icon: 'none',
+    });
+  } finally {
+    uni.hideLoading();
+  }
+};
+
+const handleTool = (device: DevTool.BluetoothItem) => {
+  emits('openTool', device);
+};
+</script>
+
+<style scoped>
+.bluetooth-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.bluetooth-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.control-btns {
+  display: flex;
+  gap: 8px;
+}
+
+.bluetooth-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+</style>

package/dist/v3/{CaptureScreen → DevTool/components/CaptureScreen}/index.vue

@@ -1,109 +1,109 @@
-<template>
-  <view class="capture-screen-content">
-    <view class="capture-screen-control">
-      <DevToolTitle> {{ t('captureScreen.title') }} </DevToolTitle>
-      <Tag
-        style="margin-left: auto"
-        customStyle="margin-left: auto"
-        mode="clear"
-        @click="emit('clear')"
-      >
-        {{ t('common.clear') }}
-      </Tag>
-    </view>
-
-    <view class="capture-screen-list">
-      <view
-        class="capture-screen-item"
-        v-for="(item, index) in screenList"
-        :key="index"
-      >
-        <view class="capture-info-row">
-          {{ t('captureScreen.type') }}：<Tag mode="primary">{{
-            item.type
-          }}</Tag>
-        </view>
-        <view class="capture-info-row"
-          >{{ t('captureScreen.page') }}：{{ item.position }}</view
-        >
-        <view
-          class="capture-info-row-time"
-          v-if="item.type === 'captureScreen'"
-        >
-          <view
-            >{{ t('captureScreen.captureTime') }}：{{ item.startTime }}</view
-          >
-          <!-- <view>结束时间：{{ item.endTime }}</view> -->
-        </view>
-        <view class="capture-info-row-time" v-else>
-          <view>{{ t('captureScreen.startTime') }}：{{ item.startTime }}</view>
-          <view>{{ t('captureScreen.endTime') }}：{{ item.endTime }}</view>
-        </view>
-        <view class="capture-info-row" v-if="item.path">
-          {{ t('captureScreen.path') }}：{{ item.path }}
-        </view>
-      </view>
-
-      <Empty v-if="!screenList || screenList.length === 0" />
-    </view>
-  </view>
-</template>
-<script lang="ts" setup>
-import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../type';
-import Empty from '../Empty/index.vue';
-import Tag from '../Tag/index.vue';
-import { useI18n } from '../../i18n';
-
-const { t } = useI18n();
-
-defineProps<{
-  screenList: DevTool.ScreenItem[];
-}>();
-
-const emit = defineEmits<{
-  (e: 'clear'): void;
-}>();
-</script>
-<style scoped>
-.capture-screen-content {
-  height: 100%;
-  font-size: var(--dev-tool-base-font-size);
-}
-
-.capture-screen-list {
-  height: calc(100% - 32px);
-  overflow: auto;
-}
-
-.capture-screen-control {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 16px;
-  height: 32px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-  box-sizing: border-box;
-}
-
-.capture-screen-item {
-  padding: 16px;
-  border-bottom: 1px solid var(--dev-tool-border-color);
-}
-
-.capture-info-row {
-  display: flex;
-  align-items: center;
-  min-height: 24px;
-  line-height: 24px;
-  word-break: break-all;
-}
-
-.capture-info-row-time {
-  display: flex;
-  justify-content: space-between;
-  height: 24px;
-  line-height: 24px;
-}
-</style>
+<template>
+  <view class="capture-screen-content">
+    <view class="capture-screen-control">
+      <DevToolTitle> {{ t('captureScreen.title') }} </DevToolTitle>
+      <Tag
+        style="margin-left: auto"
+        customStyle="margin-left: auto"
+        mode="clear"
+        @click="emit('clear')"
+      >
+        {{ t('common.clear') }}
+      </Tag>
+    </view>
+
+    <view class="capture-screen-list">
+      <view
+        class="capture-screen-item"
+        v-for="(item, index) in screenList"
+        :key="index"
+      >
+        <view class="capture-info-row">
+          {{ t('captureScreen.type') }}：<Tag mode="primary">{{
+            item.type
+          }}</Tag>
+        </view>
+        <view class="capture-info-row"
+          >{{ t('captureScreen.page') }}：{{ item.position }}</view
+        >
+        <view
+          class="capture-info-row-time"
+          v-if="item.type === 'captureScreen'"
+        >
+          <view
+            >{{ t('captureScreen.captureTime') }}：{{ item.startTime }}</view
+          >
+          <!-- <view>结束时间：{{ item.endTime }}</view> -->
+        </view>
+        <view class="capture-info-row-time" v-else>
+          <view>{{ t('captureScreen.startTime') }}：{{ item.startTime }}</view>
+          <view>{{ t('captureScreen.endTime') }}：{{ item.endTime }}</view>
+        </view>
+        <view class="capture-info-row" v-if="item.path">
+          {{ t('captureScreen.path') }}：{{ item.path }}
+        </view>
+      </view>
+
+      <Empty v-if="!screenList || screenList.length === 0" />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import DevToolTitle from '../DevToolTitle/index.vue';
+import type { DevTool } from '../../../../type';
+import Empty from '../../../components/Empty/index.vue';
+import Tag from '../../../components/Tag/index.vue';
+import { useI18n } from '../../../../i18n';
+
+const { t } = useI18n();
+
+defineProps<{
+  screenList: DevTool.ScreenItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'clear'): void;
+}>();
+</script>
+<style scoped>
+.capture-screen-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.capture-screen-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.capture-screen-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.capture-screen-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+
+.capture-info-row {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  line-height: 24px;
+  word-break: break-all;
+}
+
+.capture-info-row-time {
+  display: flex;
+  justify-content: space-between;
+  height: 24px;
+  line-height: 24px;
+}
+</style>