vite-uni-dev-tool 0.0.13 → 0.0.14

package/dist/v2/AppInfo/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view class="app-info-content">
+    <JsonPretty v-if="showJson" :data="appInfo" />
+    <Empty v-else />
+  </view>
+</template>
+<script>
+import JsonPretty from '../JsonPretty/index.vue';
+import Empty from '../Empty/index.vue';
+export default {
+  components: { JsonPretty, Empty },
+  props: {
+    appInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    showJson: () => {
+      try {
+        const str = JSON.stringify(props.appInfo);
+        if (typeof props.appInfo === 'object' && (str === '' || str === '{}')) {
+          return false;
+        }
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.app-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+</style>

package/dist/v2/AutoSizer/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <view class="auto-sizer">
+    <!-- 大小和slot 内容宽度一致 -->
+    <view class="listener-slot">
+      <slot></slot>
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-height-add"
+      :style="{
+        top: listenerSlot.height + 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-height-sub"
+      :style="{
+        top: listenerSlot.height - 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-width-add"
+      :style="{
+        left: listenerSlot.width + 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-width-sub"
+      :style="{
+        left: listenerSlot.width - 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+  </view>
+</template>
+
+<script>
+import { debounce } from '../../utils';
+
+export default {
+  inject: ['onSizeChange', 'itemsHeight'],
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    immediate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isMounted: false,
+      listenerSlot: {
+        width: 0,
+        height: 0,
+      },
+      size: {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+      observer: null,
+    };
+  },
+
+  created() {
+    this.debounceReact = debounce(
+      (rect) => {
+        if (Array.isArray(rect)) return;
+
+        // 获取屏幕尺寸
+        const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+
+        // 在尺寸更新时限制最大值
+        this.listenerSlot.height = Math.min(rect.height ?? 0, windowHeight);
+        this.listenerSlot.width = Math.min(rect.width ?? 0, windowWidth);
+
+        this?.onSizeChange?.(this.index, rect.height ?? 0);
+
+        this.size.width = rect.width ?? 0;
+        this.size.height = rect.height ?? 0;
+        this.size.top = rect.top ?? 0;
+        this.size.left = rect.left ?? 0;
+        this.size.right = rect.right ?? 0;
+        this.size.bottom = rect.bottom ?? 0;
+
+        if (this.immediate && !this.isMounted) {
+          this.$emit('resize', this.size);
+        }
+
+        if (this.isMounted) {
+          this.$emit('resize', this.size);
+        }
+
+        this.isMounted = true;
+      },
+      100,
+      true,
+    );
+
+    this.debounceGetSize = debounce(this.getSize, 100, true);
+  },
+
+  mounted() {
+    // 防止重复获取
+    // TODO
+    // if (this.itemsHeight && this.itemsHeight?.[this.index]) return;
+
+    // 初始大小
+    this.debounceGetSize();
+
+    // TODO 只有可视范围之内才获取大小
+    this.observer = uni.createIntersectionObserver(this, {
+      thresholds: [0, 1],
+    });
+    // 变大监听
+    this.observer
+      .relativeTo('.auto-sizer')
+      .observe('.anchor-height-add', this.debounceGetSize);
+    // 变小监听
+    this.observer
+      .relativeTo('.auto-sizer')
+      .observe('.anchor-height-sub', this.debounceGetSize);
+
+    // 变大监听
+    this.observer
+      .relativeTo('.auto-sizer')
+      .observe('.anchor-width-add', this.debounceGetSize);
+    // 变小监听
+    this.observer
+      .relativeTo('.auto-sizer')
+      .observe('.anchor-width-sub', this.debounceGetSize);
+  },
+
+  beforeDestroy() {
+    // 销毁监听
+    this.observer.disconnect();
+  },
+
+  methods: {
+    getSize() {
+      uni
+        .createSelectorQuery()
+        .in(this)
+        .select('.listener-slot')
+        .boundingClientRect(this.debounceReact)
+        .exec();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.auto-sizer {
+  position: relative;
+  overflow: hidden;
+  width: min-content;
+  height: min-content;
+}
+
+.anchor-height-add,
+.anchor-height-sub,
+.anchor-width-add,
+.anchor-width-sub {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+
+  background-color: skyblue;
+  visibility: hidden;
+}
+</style>

package/dist/v2/AutoSizer/index1.vue

@@ -0,0 +1,193 @@
+<template>
+  <view
+    class="l-resize l-class"
+    :class="{ 'l-resize-target': hasNoDefaultSlot }"
+    :style="[styles, lStyle]"
+  >
+    <!-- 插槽需要脱离父容器文档流，防止父容器固宽固高导致插槽大小被限制 -->
+    <view
+      ref="lResizeContainer"
+      class="l-resize__container l-container-class"
+      :style="[lStyle]"
+    >
+      <!-- 被监听的插槽 -->
+      <slot></slot>
+      <!-- 监听插槽变大 -->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="expandScrollTop"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 100000px; width: 100000px"
+        ></view>
+      </scroll-view>
+      <!-- 监听插槽变小 -->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 250%; width: 250%"
+        ></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getRect, addUnit } from './utils';
+
+export default {
+  props: {
+    lStyle: {
+      type: [String, Object],
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      width: 0,
+      height: 0,
+      hasNoDefaultSlot: false,
+      expandScrollTop: 0,
+      expandScrollLeft: 0,
+      shrinkScrollTop: 0,
+      shrinkScrollLeft: 0,
+      scrollEventCount: 0,
+      lastHeight: 0,
+      lastWidth: 0,
+      querySelector: '.l-resize__container',
+    };
+  },
+
+  computed: {
+    styles() {
+      // Vue2 中通过 this.$slots 访问插槽
+      if (this.$slots.default && (this.width || this.height)) {
+        return {
+          width: addUnit(this.width),
+          height: addUnit(this.height),
+        };
+      }
+      return {};
+    },
+  },
+
+  mounted() {
+    // 检查是否有默认插槽
+    this.hasNoDefaultSlot = !this.$slots.default;
+
+    // 初始获取尺寸
+    getRect(this.querySelector, this).then((res) => {
+      this.lastHeight = res.height || 0;
+      this.lastWidth = res.width || 0;
+      this.width = this.lastWidth;
+      this.height = this.lastHeight;
+      this.scrollToBottom({
+        width: this.lastWidth,
+        height: this.lastHeight,
+      });
+    });
+  },
+
+  methods: {
+    onScrollHandler() {
+      getRect(this.querySelector, this).then((res) => {
+        // 前两次滚动事件触发时通知尺寸变化
+        if (this.scrollEventCount++ === 0) {
+          this.resizeEvent(res);
+        }
+        // 屏蔽滚动条拉到底部的多余事件
+        if (this.scrollEventCount < 3) return;
+
+        const newHeight = res.height || 0;
+        const newWidth = res.width || 0;
+
+        // 更新容器尺寸
+        this.height = newHeight;
+        this.width = newWidth;
+
+        // 检查尺寸变化并触发事件
+        const emitStack = [];
+        if (newHeight !== this.lastHeight) {
+          this.lastHeight = newHeight;
+          emitStack.push(1);
+        }
+        if (newWidth !== this.lastWidth) {
+          this.lastWidth = newWidth;
+          emitStack.push(1);
+        }
+        if (emitStack.length > 0) {
+          this.resizeEvent(res);
+        }
+
+        // 滚动到底部
+        this.scrollToBottom({
+          width: this.lastWidth,
+          height: this.lastHeight,
+        });
+      });
+    },
+
+    scrollToBottom(res) {
+      this.expandScrollTop = 100000 + res.height;
+      this.shrinkScrollTop = 3 * this.height + res.height;
+      this.expandScrollLeft = 100000 + res.width;
+      this.shrinkScrollLeft = 3 * this.width + res.width;
+    },
+
+    resizeEvent(res) {
+      const result = {};
+      ['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((prop) => {
+        result[prop] = res[prop];
+      });
+      this.$emit('resize', result);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.l-resize {
+  &__container {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+  &-target,
+  &__wrapper {
+    background-color: aqua;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    overflow: hidden;
+    visibility: hidden;
+  }
+  &-target {
+    .l-resize__container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__wrapper {
+    &--placeholder {
+      transition: 0s;
+      animation: none;
+    }
+  }
+}
+</style>

package/dist/v2/AutoSizer/utils.ts

@@ -0,0 +1,49 @@
+import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+
+export function getRect(
+  selector: string,
+  context: ComponentInternalInstance | null | any,
+  node: boolean = false,
+) {
+  // 之前是个对象，现在改成实例，防止旧版会报错
+  if (context == null) {
+    return Promise.reject('context is null');
+  }
+  if (context?.context) {
+    context = context.context;
+  }
+
+  return new Promise<UniNamespace.NodeInfo>((resolve, reject) => {
+    const dom = uni.createSelectorQuery().in(context).select(selector);
+    const result: any = (rect: UniNamespace.NodeInfo) => {
+      if (rect) {
+        resolve(rect);
+      } else {
+        reject('no rect');
+      }
+    };
+
+    if (!node) {
+      dom.boundingClientRect(result).exec();
+    } else {
+      dom
+        .fields(
+          {
+            node: true,
+            size: true,
+            rect: true,
+          },
+          result,
+        )
+        .exec();
+    }
+  });
+}
+
+export function addUnit(value?: string | number): string {
+  if (!value) {
+    return '0px';
+  }
+
+  return typeof value === 'number' ? `${value}px` : value;
+}

package/dist/v2/CaptureScreen/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="capture-screen-content">
+    <view class="capture-screen-control">
+      <Tag style="margin-left: auto" mode="clear" @click="handleClear">
+        清空
+      </Tag>
+    </view>
+
+    <view class="capture-screen-list">
+      <view
+        class="capture-screen-item"
+        v-for="item in captureScreenList"
+        :key="item.timer + item.position"
+      >
+        <view class="info-row">时间：{{ item.timer }} </view>
+        <view class="info-row">页面：{{ item.position }}</view>
+      </view>
+
+      <Empty v-if="!captureScreenList || captureScreenList.length === 0" />
+    </view>
+  </view>
+</template>
+
+<script>
+import Empty from '../Empty/index.vue';
+import Tag from '../Tag/index.vue';
+
+export default {
+  components: {
+    Empty,
+    Tag,
+  },
+  props: {
+    /** @type {{position: string, time: string}[]} */
+    captureScreenList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    handleClear() {
+      this.$emit('clear');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.capture-screen-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.capture-screen-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.capture-screen-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.capture-screen-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+.info-row {
+  height: 28px;
+  line-height: 28px;
+}
+</style>

package/dist/v2/CloseButton/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <view class="close-button" @click="onClick"> × </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.close-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  border-radius: 50%;
+  border: 1px solid var(--dev-tool-text-color);
+  box-sizing: border-box;
+  color: var(--dev-tool-text-color);
+  transition:
+    border,
+    color 0.3s;
+}
+</style>

package/dist/v2/Connection/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <view class="connection-content">
+    <view class="connection-item">
+      <DevToolTitle>网络连接</DevToolTitle>
+      <view class="connection-item-content">
+        <view class="connection-row">
+          <view>IP地址：</view>
+          <Tag
+            :mode="
+              netWorkStatus.isConnected === undefined || netWorkStatus.ip
+                ? 'info'
+                : netWorkStatus.isConnected && netWorkStatus.ip
+                  ? 'success'
+                  : 'error'
+            "
+          >
+            {{
+              netWorkStatus.isConnected === undefined
+                ? '未获取'
+                : netWorkStatus.ip || '未获取'
+            }}
+          </Tag>
+        </view>
+        <view class="connection-row">
+          <view>连接状态：</view>
+          <Tag
+            :mode="
+              netWorkStatus.isConnected === undefined
+                ? 'info'
+                : netWorkStatus.isConnected
+                  ? 'success'
+                  : 'error'
+            "
+          >
+            {{
+              netWorkStatus.isConnected === undefined
+                ? '未获取'
+                : netWorkStatus.isConnected
+                  ? '已连接'
+                  : '已断开'
+            }}
+          </Tag>
+        </view>
+        <view class="connection-row">
+          <view>网络类型：</view>
+          <Tag mode="info">{{ netWorkStatus.networkType || '未获取' }}</Tag>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import Tag from '../Tag/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
+
+export default {
+  components: {
+    Tag,
+    DevToolTitle,
+  },
+  props: {
+    netWorkStatus: {
+      type: Object,
+      default() {
+        return {
+          isConnected: undefined,
+          networkType: undefined,
+          ip: undefined,
+        };
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.connection-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+.connection-item {
+  padding: 16px 16px 0 16px;
+  box-sizing: border-box;
+}
+
+.connection-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0;
+}
+</style>