vite-uni-dev-tool 0.0.10 → 0.0.12

package/dev/components/DevTool/index.vue

@@ -7,6 +7,7 @@
       :buttonColor="buttonProps.buttonColor"
       :buttonFontSize="buttonProps.buttonFontSize"
       :buttonBackgroundColor="buttonProps.buttonBackgroundColor"
+      :zIndex="zIndex"
       @click="onDevToolButtonClick"
     />
     <DevToolWindow
@@ -15,12 +16,10 @@
       :sourceFileServers="sourceFileServers"
       :mode="mode"
       :useDevSource="useDevSource"
+      :zIndex="zIndex + 1"
       @close="onShowDevToolWindow(false)"
       @sendMessage="onSendMessage"
     />
-    <!-- <view class="devTool-canvas">
-      <canvas canvas-id="fullscreenCanvas" id="fullscreenCanvas" />
-    </view> -->
   </view>
 </template>
 <script lang="ts" setup>
@@ -31,8 +30,8 @@ import DevToolWindow from '../DevToolWindow/index.vue';
 import { eventBus } from '../../core';
 
 import {
-  EVENT_DEV_BUTTON,
-  EVENT_DEV_WINDOW,
+  DEV_BUTTON_VISIBLE,
+  DEV_WINDOW_VISIBLE,
   DEV_WINDOW_MESSAGE,
   DEV_WINDOW_OPEN,
   DEV_WINDOW_CLOSE,
@@ -40,6 +39,7 @@ import {
   DEV_OPTION_SEND,
 } from '../../const';
 import type { DevTool } from '../../type';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 let isActive = false;
 
@@ -60,6 +60,8 @@ const sourceFileServers = ref<string[]>([]);
 
 const mode = ref<string>();
 
+const zIndex = ref(1000);
+
 const useDevSource = ref(false);
 
 function onDevToolButtonClick() {
@@ -72,14 +74,20 @@ function onDevToolButtonClick() {
 
 function onShowDevToolButton(show: boolean) {
   if (!isActive) return;
-  devToolButtonVisible.value = show ?? uni.getStorageSync(EVENT_DEV_BUTTON);
+
+  const { devToolButtonVisible: showButton = false } = getDevToolInfo();
+
+  devToolButtonVisible.value = show ?? showButton;
 }
 
 async function onShowDevToolWindow(show: boolean) {
   if (!isActive) return;
 
   devToolWindowVisible.value = show;
-  uni.setStorageSync(EVENT_DEV_WINDOW, show);
+
+  setDevToolInfo({
+    devToolWindowVisible: show,
+  });
 }
 
 function onSendMessage(param: { type: string; data: Record<string, any> }) {
@@ -100,19 +108,25 @@ function onDevOptionSend(options: DevTool.DevToolOptions) {
     mode.value = options.mode ?? '';
 
     useDevSource.value = options.useDevSource ?? false;
+
+    zIndex.value = options.zIndex ?? 1000;
   }
 }
 
 onLoad(() => {
   // 共享状态
 
-  const show = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
+  const {
+    devToolButtonVisible: showButton = false,
+
+    devToolWindowVisible: showWindow = false,
+  } = getDevToolInfo();
 
   isActive = true;
-  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
-  devToolWindowVisible.value = show;
-  eventBus.on(EVENT_DEV_BUTTON, onShowDevToolButton);
-  eventBus.on(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  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(() => {
@@ -125,14 +139,21 @@ onUnload(() => {
     type: DEV_WINDOW_CLOSE,
     data: {},
   });
-  eventBus.off(EVENT_DEV_BUTTON, onShowDevToolButton);
-  eventBus.off(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  eventBus.off(DEV_BUTTON_VISIBLE, onShowDevToolButton);
+  eventBus.off(DEV_WINDOW_VISIBLE, onShowDevToolWindow);
 });
 
 onShow(() => {
   isActive = true;
-  devToolWindowVisible.value = uni.getStorageSync(EVENT_DEV_WINDOW) || false;
-  devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
+  const {
+    devToolButtonVisible: showButton = false,
+
+    devToolWindowVisible: showWindow = false,
+  } = getDevToolInfo();
+
+  devToolWindowVisible.value = showWindow;
+  devToolButtonVisible.value = showButton;
+
   if (devToolWindowVisible.value) {
     onSendMessage({
       type: DEV_WINDOW_OPEN,
@@ -164,19 +185,4 @@ onHide(() => {
 
   -webkit-tap-highlight-color: transparent;
 }
-
-.dev-tool-canvas {
-  position: fixed;
-  z-index: -1000;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  opacity: 0;
-}
-
-#fullscreenCanvas {
-  width: 100vw;
-  height: 100vh;
-}
 </style>

package/dev/components/DevToolButton/index.vue

@@ -9,6 +9,7 @@
       width: props.buttonSize + 'px',
       height: props.buttonSize + 'px',
       cursor: isDragging ? 'move' : 'pointer',
+      zIndex: zIndex,
       ...buttonPosition,
     }"
     @touchstart="onTouchStart"
@@ -22,7 +23,7 @@
 <script lang="ts" setup>
 import { onShow, onHide } from '@dcloudio/uni-app';
 import { ref, computed, reactive, onMounted } from 'vue';
-import { DEV_BUTTON_INFO } from '../../const';
+import { getDevToolInfo, setDevToolInfo } from '../../devToolInfo';
 
 const emit = defineEmits<{ (e: 'click'): void }>();
 const props = withDefaults(
@@ -32,8 +33,9 @@ const props = withDefaults(
     buttonColor?: string;
     buttonFontSize?: string;
     buttonBackgroundColor?: string;
+    zIndex?: number;
   }>(),
-  { buttonSize: 50 },
+  { buttonSize: 50, zIndex: 1000 },
 );
 const sizeHalf = props.buttonSize / 2;
 
@@ -113,8 +115,7 @@ function onResize() {
   }
   timer = setTimeout(() => {
     buttonPosition.transition = 'none';
-
-    uni.setStorageSync(DEV_BUTTON_INFO, {
+    setDevToolInfo({
       left: buttonPosition.left,
       top: buttonPosition.top,
     });
@@ -122,19 +123,15 @@ function onResize() {
 }
 
 onMounted(() => {
-  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
-    left: windowWidth - props.buttonSize + 'px',
-    top: '80vh',
-  };
+  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
+    getDevToolInfo();
   buttonPosition.left = left;
   buttonPosition.top = top;
 });
 
 onShow(() => {
-  const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
-    left: windowWidth - props.buttonSize + 'px',
-    top: '80vh',
-  };
+  const { left = windowWidth - props.buttonSize + 'px', top = '80vh' } =
+    getDevToolInfo();
   buttonPosition.left = left;
   buttonPosition.top = top;
 

package/dev/components/DevToolTitle/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <view class="dev-tool-title" :style="style"> <slot /> </view>
+  <view class="dev-tool-title" :style="innerStyle"> <slot /> </view>
 </template>
 <script lang="ts" setup>
-defineProps<{ style?: any }>();
+defineProps<{ innerStyle?: any }>();
 </script>
 <style scoped>
 .dev-tool-title {