vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v3/DevTool/index.vue

@@ -0,0 +1,217 @@
+<template>
+  <view :class="`dev-tool dev-tool-${theme}`">
+    <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"
+      :theme="theme"
+      @close="onShowDevToolWindow(false)"
+      @sendMessage="onSendMessage"
+      @changeTheme="onChangeTheme"
+    />
+  </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);
+
+const theme = ref<string>('dart');
+
+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;
+  }
+}
+
+function onChangeTheme(t: string) {
+  theme.value = t;
+}
+
+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-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;
+  -webkit-tap-highlight-color: transparent;
+}
+.dev-tool-light {
+  --dev-tool-bg-color: rgba(255, 255, 255, 0.8);
+  --dev-tool-bg2-color: rgba(255, 255, 255, 0.95);
+
+  --dev-tool-text-color: #000;
+  --dev-tool-border-color: #f0f0f0;
+  --dev-tool-info-color: #9c9c9c;
+  --dev-tool-log-color: #f9f9f9;
+  --dev-tool-nil-color: #020201;
+  --dev-tool-string-color: #888888;
+  --dev-tool-number-color: #1d8ce0;
+  --dev-tool-boolean-color: #1d8ce0;
+  --dev-tool-symbol-color: bisque;
+}
+
+.dev-tool-dart {
+  --dev-tool-bg-color: rgba(0, 0, 0, 0.8);
+  --dev-tool-bg2-color: rgba(43, 43, 43, 0.8);
+
+  --dev-tool-text-color: #fff;
+  --dev-tool-border-color: #3d3d3d;
+
+  --dev-tool-log-color: #f9f9f9;
+}
+</style>

package/dist/v3/DevToolButton/index.vue

@@ -0,0 +1,210 @@
+<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/dist/v3/DevToolTitle/index.vue

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