vite-uni-dev-tool 0.0.13 → 0.0.15

package/dist/v2/DevTool/index.vue

@@ -0,0 +1,162 @@
+<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>
+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 { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
+
+export default {
+  components: {
+    DevToolButton,
+    DevToolWindow,
+  },
+  data() {
+    return {
+      isActive: false,
+      buttonProps: {
+        buttonSize: 50,
+        buttonText: '🐜',
+        buttonColor: '#fff',
+        buttonFontSize: '16px',
+        buttonBackgroundColor: 'rgba(255, 255, 255, 0)',
+      },
+      windowData: {},
+      devToolWindowVisible: false,
+      devToolButtonVisible: false,
+      sourceFileServers: [],
+      mode: '',
+      zIndex: 1000,
+      useDevSource: false,
+    };
+  },
+  beforeMount() {
+    // 初始化状态
+    const {
+      devToolButtonVisible: showButton = false,
+      devToolWindowVisible: showWindow = false,
+    } = getDevToolInfo();
+
+    this.isActive = true;
+    this.devToolButtonVisible = showButton;
+    this.devToolWindowVisible = showWindow;
+
+    // 注册事件监听
+    eventBus.on(DEV_BUTTON_VISIBLE, this.onShowDevToolButton);
+    eventBus.on(DEV_WINDOW_VISIBLE, this.onShowDevToolWindow);
+    eventBus.on(DEV_OPTION_SEND, this.onDevOptionSend);
+
+    // 下一帧发送获取配置请求
+    this.$nextTick(() => {
+      eventBus.emit(DEV_WINDOW_MESSAGE, { type: DEV_OPTION_GET, data: {} });
+    });
+  },
+  beforeUnmount() {
+    // 触发关闭事件并移除监听
+    eventBus.emit(DEV_WINDOW_MESSAGE, {
+      type: DEV_WINDOW_CLOSE,
+      data: {},
+    });
+    eventBus.off(DEV_BUTTON_VISIBLE, this.onShowDevToolButton);
+    eventBus.off(DEV_WINDOW_VISIBLE, this.onShowDevToolWindow);
+  },
+  onShow() {
+    this.isActive = true;
+    const {
+      devToolButtonVisible: showButton = false,
+      devToolWindowVisible: showWindow = false,
+    } = getDevToolInfo();
+
+    this.devToolWindowVisible = showWindow;
+    this.devToolButtonVisible = showButton;
+
+    // 如果窗口可见，触发打开事件
+    if (this.devToolWindowVisible) {
+      this.onSendMessage({
+        type: DEV_WINDOW_OPEN,
+        data: {},
+      });
+    }
+  },
+  onHide() {
+    this.isActive = false;
+    this.devToolWindowVisible = false;
+  },
+  methods: {
+    onDevToolButtonClick() {
+      this.onShowDevToolWindow(true);
+      this.onSendMessage({
+        type: DEV_WINDOW_OPEN,
+        data: {},
+      });
+    },
+    onShowDevToolButton(show) {
+      if (!this.isActive) return;
+      const { devToolButtonVisible: showButton = false } = getDevToolInfo();
+      this.devToolButtonVisible = show ?? showButton;
+    },
+    onShowDevToolWindow(show) {
+      if (!this.isActive) return;
+
+      this.devToolWindowVisible = show;
+      setDevToolInfo({
+        devToolWindowVisible: show,
+      });
+    },
+    onSendMessage(param) {
+      eventBus.emit(DEV_WINDOW_MESSAGE, param);
+    },
+    onDevOptionSend(options) {
+      if (options) {
+        // 更新按钮配置
+        this.buttonProps.buttonSize = options.buttonSize ?? 50;
+        this.buttonProps.buttonText = options.buttonText ?? '🐜';
+        this.buttonProps.buttonColor = options.buttonColor ?? '#fff';
+        this.buttonProps.buttonFontSize = options.buttonFontSize ?? '16px';
+        this.buttonProps.buttonBackgroundColor =
+          options.buttonBackgroundColor ?? 'rgba(255, 255, 255, 0)';
+
+        // 更新其他配置
+        this.sourceFileServers = options.sourceFileServers ?? [];
+        this.mode = options.mode ?? '';
+        this.useDevSource = options.useDevSource ?? false;
+        this.zIndex = options.zIndex ?? 1000;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/dist/v2/DevToolButton/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <view
+    ref="buttonRef"
+    class="dev-tool-button"
+    :style="{
+      fontSize: buttonFontSize,
+      backgroundColor: buttonBackgroundColor,
+      color: buttonColor,
+      width: buttonSize + 'px',
+      height: buttonSize + 'px',
+      cursor: isDragging ? 'move' : 'pointer',
+      zIndex: zIndex,
+      ...buttonPosition,
+    }"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    {{ buttonText }}
+  </view>
+</template>
+
+<script>
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
+
+export default {
+  props: {
+    buttonSize: {
+      type: Number,
+      default: 50,
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    buttonColor: {
+      type: String,
+      default: '#fff',
+    },
+    buttonFontSize: {
+      type: String,
+      default: '16px',
+    },
+    buttonBackgroundColor: {
+      type: String,
+      default: 'rgba(255, 255, 255, 0)',
+    },
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
+  },
+
+  data() {
+    return {
+      buttonPosition: {
+        left: '',
+        top: '',
+        transition: 'none',
+      },
+      isDragging: false,
+      page: { pageX: 0, pageY: 0 },
+      startTime: 0,
+      timer: null,
+      mouseUpTimer: null,
+      windowWidth: 0,
+      windowHeight: 0,
+      sizeHalf: 0,
+    };
+  },
+
+  computed: {
+    isTouchDevice() {
+      return typeof window !== 'undefined' && 'ontouchstart' in window;
+    },
+  },
+
+  mounted() {
+    const sysInfo = uni.getSystemInfoSync();
+    this.windowWidth = sysInfo.windowWidth;
+    this.windowHeight = sysInfo.windowHeight;
+    this.sizeHalf = this.buttonSize / 2;
+
+    // 初始化位置
+    const { left, top } = getDevToolInfo();
+    this.buttonPosition.left =
+      left || this.windowWidth - this.buttonSize + 'px';
+    this.buttonPosition.top = top || '80vh';
+  },
+
+  onShow() {
+    // H5 环境下注册鼠标事件
+    // #ifdef H5
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('resize', this.onResize);
+    // #endif
+  },
+
+  onHide() {
+    // #ifdef H5
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('resize', this.onResize);
+    // #endif
+  },
+
+  methods: {
+    onTouchStart(touch) {
+      touch.stopPropagation();
+      this.page.pageX = touch.touches?.[0]?.pageX;
+      this.page.pageY = touch.touches?.[0]?.pageY;
+      this.startTime = Date.now();
+      this.buttonPosition.transition = 'none';
+    },
+
+    onTouchMove(touch) {
+      touch?.preventDefault?.();
+      touch?.stopPropagation?.();
+      if (!this.page) return;
+      if (Date.now() - this.startTime < 150) return;
+
+      if (this.mouseUpTimer) {
+        clearTimeout(this.mouseUpTimer);
+      }
+      this.updatePosition(
+        touch.touches[0].pageX,
+        touch.touches[0].pageY,
+        this.isTouchDevice,
+      );
+    },
+
+    onTouchEnd(e) {
+      e.stopPropagation();
+      if (Date.now() - this.startTime < 100) {
+        this.$emit('click');
+      }
+
+      if (this.mouseUpTimer) {
+        clearTimeout(this.mouseUpTimer);
+      }
+      this.mouseUpTimer = setTimeout(() => {
+        this.onResize();
+      }, 3000);
+    },
+
+    onMouseDown(event) {
+      if (this.isTouchDevice) return;
+      this.page.pageX = event.pageX;
+      this.page.pageY = event.pageY;
+      this.startTime = Date.now();
+      this.isDragging = true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.buttonPosition.transition = 'none';
+    },
+
+    onMouseMove(event) {
+      if (!this.isDragging) return;
+      event.preventDefault();
+      const mouseX = event.pageX;
+      const mouseY = event.pageY;
+      if (this.mouseUpTimer) {
+        clearTimeout(this.mouseUpTimer);
+      }
+      this.updatePosition(mouseX, mouseY);
+    },
+
+    onMouseUp() {
+      this.isDragging = false;
+      if (Date.now() - this.startTime < 150) {
+        this.$emit('click');
+      }
+      if (this.mouseUpTimer) {
+        clearTimeout(this.mouseUpTimer);
+      }
+      this.mouseUpTimer = setTimeout(() => {
+        this.onResize();
+      }, 3000);
+    },
+
+    onResize() {
+      const { windowWidth } = uni.getSystemInfoSync();
+
+      this.buttonPosition.transition = 'all 0.3s ease-in-out';
+      this.buttonPosition.left = windowWidth - this.buttonSize + 'px';
+
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        this.buttonPosition.transition = 'none';
+        setDevToolInfo({
+          left: this.buttonPosition.left,
+          top: this.buttonPosition.top,
+        });
+      }, 350);
+    },
+
+    updatePosition(x, y, isTouch = false) {
+      // 限制 Y 轴位置
+      if (y - this.sizeHalf > 0 && y < this.windowHeight - this.sizeHalf) {
+        if (isTouch) {
+          this.buttonPosition.top = y + this.sizeHalf + 'px';
+        } else {
+          this.buttonPosition.top = y - this.sizeHalf + 'px';
+        }
+      }
+      // 限制 X 轴位置
+      if (x - this.sizeHalf > 0 && x < this.windowWidth - this.sizeHalf) {
+        this.buttonPosition.left = x - this.sizeHalf + 'px';
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dev-tool-button {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+</style>

package/dist/v2/DevToolTitle/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <view class="dev-tool-title" :style="innerStyle"> <slot /> </view>
+</template>
+<script>
+export default {
+  props: {
+    innerStyle: {
+      type: [Object, String],
+      default: () => ({}),
+    },
+  },
+};
+</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>