vite-uni-dev-tool 0.0.1

package/dev/components/DevToolButton/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <view
+    ref="buttonRef"
+    class="dev-tool-button"
+    :style="{
+      fontSize: props.buttonFontSize,
+      backgroundColor: props.buttonBackgroundColor,
+      color: props.buttonColor,
+      width: props.buttonSize + 'px',
+      height: props.buttonSize + 'px',
+      cursor: isDragging ? 'move' : 'pointer',
+      ...buttonPosition
+    }"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    {{ buttonText }}
+  </view>
+</template>
+<script lang="ts" setup>
+import { onShow, onHide } from '@dcloudio/uni-app';
+import { ref, computed, reactive, onMounted } from 'vue';
+import { DEV_BUTTON_INFO } from '../../const';
+
+const emit = defineEmits<{ (e: 'click'): void }>();
+const props = withDefaults(
+  defineProps<{
+    buttonSize?: number;
+    buttonText?: string;
+    buttonColor?: string;
+    buttonFontSize?: string;
+    buttonBackgroundColor?: string;
+  }>(),
+  { buttonSize: 50 }
+);
+const sizeHalf = props.buttonSize / 2;
+
+let page: { pageX: number; pageY: number } = { pageX: 0, pageY: 0 };
+let startTime = 0;
+
+const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+// const buttonRef = ref();
+const buttonPosition = reactive({
+  left: windowWidth - props.buttonSize + 'px',
+  top: '80vh',
+  transition: 'none'
+});
+
+const isTouchDevice = computed(() => {
+  return typeof window !== 'undefined' && 'ontouchstart' in window;
+});
+
+function onTouchStart(touch: TouchEvent) {
+  page.pageX = touch.touches?.[0]?.pageX;
+  page.pageY = touch.touches?.[0]?.pageY;
+  startTime = Date.now();
+  buttonPosition.transition = 'none';
+}
+
+function onTouchMove(touch: TouchEvent) {
+  touch?.preventDefault?.();
+  touch?.stopPropagation?.();
+  if (!page) return;
+  if (Date.now() - startTime < 150) return;
+
+  if (mouseUpTimer) {
+    clearTimeout(mouseUpTimer);
+  }
+  updatePosition(
+    touch.touches[0].pageX,
+    touch.touches[0].pageY,
+    isTouchDevice.value
+  );
+}
+
+function onTouchEnd() {
+  if (Date.now() - startTime < 100) {
+    emit('click');
+  }
+
+  if (mouseUpTimer) {
+    clearTimeout(mouseUpTimer);
+  }
+  mouseUpTimer = setTimeout(() => {
+    onResize();
+  }, 3000);
+}
+
+let isDragging = ref(false); // 是否开始拖拽
+
+// 鼠标事件处理
+function onMouseDown(event: MouseEvent) {
+  if (isTouchDevice.value) return;
+  page.pageX = event.pageX;
+  page.pageY = event.pageY;
+  startTime = Date.now();
+  isDragging.value = true; // 开始鼠标按下时标记为拖拽状态
+  event.preventDefault(); // 防止选中内容
+  event.stopPropagation(); // 防止事件冒泡
+  buttonPosition.transition = 'none';
+}
+
+let timer: NodeJS.Timeout | null = null;
+function onResize() {
+  const { windowWidth } = uni.getSystemInfoSync();
+
+  buttonPosition.transition = 'all 0.3s ease-in-out';
+  buttonPosition.left = windowWidth - props.buttonSize + 'px';
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    buttonPosition.transition = 'none';
+
+    uni.setStorageSync(DEV_BUTTON_INFO, {
+      left: buttonPosition.left,
+      top: buttonPosition.top
+    });
+  }, 350);
+}
+
+onMounted(() => {
+  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
+    left: windowWidth - props.buttonSize + 'px',
+    top: '80vh'
+  };
+  buttonPosition.left = left;
+  buttonPosition.top = top;
+});
+
+onShow(() => {
+  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
+    left: windowWidth - props.buttonSize + 'px',
+    top: '80vh'
+  };
+  buttonPosition.left = left;
+  buttonPosition.top = top;
+
+  // #ifdef H5
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+  window.addEventListener('resize', onResize);
+  // #endif
+});
+
+onHide(() => {
+  // #ifdef H5
+  window.removeEventListener('mousemove', onMouseMove);
+  window.removeEventListener('mouseup', onMouseUp);
+  window.removeEventListener('resize', onResize);
+  // #endif
+});
+
+function onMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return; // 不是拖拽状态则不处理
+  event.preventDefault(); // 防止默认行为
+  const mouseX = event.pageX;
+  const mouseY = event.pageY;
+  if (mouseUpTimer) {
+    clearTimeout(mouseUpTimer);
+  }
+  updatePosition(mouseX, mouseY);
+}
+
+let mouseUpTimer: NodeJS.Timeout | null = null;
+function onMouseUp() {
+  isDragging.value = false; // 鼠标释放时取消拖拽状态
+  if (Date.now() - startTime < 150) {
+    emit('click');
+  }
+  if (mouseUpTimer) {
+    clearTimeout(mouseUpTimer);
+  }
+  mouseUpTimer = setTimeout(() => {
+    onResize();
+  }, 3000);
+}
+
+// 统一的位置更新函数
+function updatePosition(x: number, y: number, isTouch = false) {
+  if (y - sizeHalf > 0 && y < windowHeight - sizeHalf) {
+    if (isTouch) {
+      buttonPosition.top = y + sizeHalf + 'px';
+    } else {
+      buttonPosition.top = y - sizeHalf + 'px';
+    }
+  }
+  if (x - sizeHalf > 0 && x < windowWidth - sizeHalf) {
+    buttonPosition.left = x - sizeHalf + 'px';
+  }
+}
+</script>
+<style scoped>
+.dev-tool-button {
+  position: fixed;
+  z-index: 9999;
+  top: 80vh;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 16px;
+
+  background-color: rgba(255, 255, 255, 0);
+  cursor: pointer;
+}
+</style>