vite-uni-dev-tool 0.0.12 → 0.0.13

package/dev/components/DevTool/index.vue

@@ -1,188 +0,0 @@
-<template>
-  <view class="dev-tool">
-    <DevToolButton
-      v-if="devToolButtonVisible"
-      :buttonSize="buttonProps.buttonSize"
-      :buttonText="buttonProps.buttonText"
-      :buttonColor="buttonProps.buttonColor"
-      :buttonFontSize="buttonProps.buttonFontSize"
-      :buttonBackgroundColor="buttonProps.buttonBackgroundColor"
-      :zIndex="zIndex"
-      @click="onDevToolButtonClick"
-    />
-    <DevToolWindow
-      :open="devToolWindowVisible"
-      :data="windowData"
-      :sourceFileServers="sourceFileServers"
-      :mode="mode"
-      :useDevSource="useDevSource"
-      :zIndex="zIndex + 1"
-      @close="onShowDevToolWindow(false)"
-      @sendMessage="onSendMessage"
-    />
-  </view>
-</template>
-<script lang="ts" setup>
-import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
-import { reactive, ref, nextTick } from 'vue';
-import DevToolButton from '../DevToolButton/index.vue';
-import DevToolWindow from '../DevToolWindow/index.vue';
-import { eventBus } from '../../core';
-
-import {
-  DEV_BUTTON_VISIBLE,
-  DEV_WINDOW_VISIBLE,
-  DEV_WINDOW_MESSAGE,
-  DEV_WINDOW_OPEN,
-  DEV_WINDOW_CLOSE,
-  DEV_OPTION_GET,
-  DEV_OPTION_SEND,
-} from '../../const';
-import type { DevTool } from '../../type';
-import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-
-let isActive = false;
-
-const buttonProps = reactive({
-  buttonSize: 50,
-  buttonText: '🐜',
-  buttonColor: '#fff',
-  buttonFontSize: '16px',
-  buttonBackgroundColor: 'rgba(255, 255, 255, 0)',
-});
-
-const windowData = ref<DevTool.WindowData>({});
-
-const devToolWindowVisible = ref(false);
-const devToolButtonVisible = ref(false);
-
-const sourceFileServers = ref<string[]>([]);
-
-const mode = ref<string>();
-
-const zIndex = ref(1000);
-
-const useDevSource = ref(false);
-
-function onDevToolButtonClick() {
-  onShowDevToolWindow(true);
-  onSendMessage({
-    type: DEV_WINDOW_OPEN,
-    data: {},
-  });
-}
-
-function onShowDevToolButton(show: boolean) {
-  if (!isActive) return;
-
-  const { devToolButtonVisible: showButton = false } = getDevToolInfo();
-
-  devToolButtonVisible.value = show ?? showButton;
-}
-
-async function onShowDevToolWindow(show: boolean) {
-  if (!isActive) return;
-
-  devToolWindowVisible.value = show;
-
-  setDevToolInfo({
-    devToolWindowVisible: show,
-  });
-}
-
-function onSendMessage(param: { type: string; data: Record<string, any> }) {
-  eventBus.emit(DEV_WINDOW_MESSAGE, param);
-}
-
-function onDevOptionSend(options: DevTool.DevToolOptions) {
-  if (options) {
-    buttonProps.buttonSize = options.buttonSize ?? 50;
-    buttonProps.buttonText = options.buttonText ?? '🐜';
-    buttonProps.buttonColor = options.buttonColor ?? '#fff';
-    buttonProps.buttonFontSize = options.buttonFontSize ?? '16px';
-    buttonProps.buttonBackgroundColor =
-      options.buttonBackgroundColor ?? 'rgba(255, 255, 255, 0)';
-
-    sourceFileServers.value = options.sourceFileServers ?? [];
-
-    mode.value = options.mode ?? '';
-
-    useDevSource.value = options.useDevSource ?? false;
-
-    zIndex.value = options.zIndex ?? 1000;
-  }
-}
-
-onLoad(() => {
-  // 共享状态
-
-  const {
-    devToolButtonVisible: showButton = false,
-
-    devToolWindowVisible: showWindow = false,
-  } = getDevToolInfo();
-
-  isActive = true;
-  devToolButtonVisible.value = showButton;
-  devToolWindowVisible.value = showWindow;
-  eventBus.on(DEV_BUTTON_VISIBLE, onShowDevToolButton);
-  eventBus.on(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
-  eventBus.on(DEV_OPTION_SEND, onDevOptionSend);
-
-  nextTick(() => {
-    eventBus.emit(DEV_WINDOW_MESSAGE, { type: DEV_OPTION_GET, data: {} });
-  });
-});
-
-onUnload(() => {
-  eventBus.emit(DEV_WINDOW_MESSAGE, {
-    type: DEV_WINDOW_CLOSE,
-    data: {},
-  });
-  eventBus.off(DEV_BUTTON_VISIBLE, onShowDevToolButton);
-  eventBus.off(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
-});
-
-onShow(() => {
-  isActive = true;
-  const {
-    devToolButtonVisible: showButton = false,
-
-    devToolWindowVisible: showWindow = false,
-  } = getDevToolInfo();
-
-  devToolWindowVisible.value = showWindow;
-  devToolButtonVisible.value = showButton;
-
-  if (devToolWindowVisible.value) {
-    onSendMessage({
-      type: DEV_WINDOW_OPEN,
-      data: {},
-    });
-  }
-});
-onHide(() => {
-  isActive = false;
-  devToolWindowVisible.value = false;
-});
-</script>
-<style scoped>
-.dev-tool {
-  --dev-tool-main-color: #9254de;
-  --dev-tool-border-color: #f0f0f0;
-  --dev-tool-normal-bg-color: #f9f9f9;
-  --dev-tool-warn-color: #ffa940;
-  --dev-tool-warn-bg-color: #fff7e6;
-  --dev-tool-error-color: #ff4d4f;
-  --dev-tool-error-bg-color: #fff1f0;
-  --dev-tool-success-color: #bae637;
-  --dev-tool-success-bg-color: #fcffe6;
-
-  --dev-tool-base-font-size: 12px;
-  --dev-tool-tag-font-size: 10px;
-  --dev-tool-tips-font-size: 10px;
-  font-size: 12px;
-
-  -webkit-tap-highlight-color: transparent;
-}
-</style>

package/dev/components/DevToolButton/index.vue

@@ -1,210 +0,0 @@
-<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',
-      zIndex: zIndex,
-      ...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 { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
-
-const emit = defineEmits<{ (e: 'click'): void }>();
-const props = withDefaults(
-  defineProps<{
-    buttonSize?: number;
-    buttonText?: string;
-    buttonColor?: string;
-    buttonFontSize?: string;
-    buttonBackgroundColor?: string;
-    zIndex?: number;
-  }>(),
-  { buttonSize: 50, zIndex: 1000 },
-);
-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: number | 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';
-    setDevToolInfo({
-      left: buttonPosition.left,
-      top: buttonPosition.top,
-    });
-  }, 350);
-}
-
-onMounted(() => {
-  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
-    getDevToolInfo();
-  buttonPosition.left = left;
-  buttonPosition.top = top;
-});
-
-onShow(() => {
-  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
-    getDevToolInfo();
-  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: number | 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: 1000;
-  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>

package/dev/components/DevToolTitle/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <view class="dev-tool-title" :style="innerStyle"> <slot /> </view>
-</template>
-<script lang="ts" setup>
-defineProps<{ innerStyle?: any }>();
-</script>
-<style scoped>
-.dev-tool-title {
-  display: flex;
-  align-items: center;
-  height: 32px;
-}
-.dev-tool-title::before {
-  content: '';
-  margin-right: 8px;
-  width: 2px;
-  height: 18px;
-  border-radius: 2px;
-  background-color: var(--dev-tool-main-color);
-}
-</style>