vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{AutoSizer → components/AutoSizer}/index1.vue

@@ -1,184 +1,184 @@
-<template>
-  <view
-    class="l-resize l-class"
-    :class="{ 'l-resize-target': hasNoDefaultSlot }"
-    :style="[styles, lStyle]"
-  >
-    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
-    <view
-      ref="l-resize__container"
-      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 lang="ts" setup>
-import { ref, onMounted, getCurrentInstance, computed } from 'vue';
-import { getRect, addUnit } from './utils';
-
-interface ResizeResult {
-  bottom?: number;
-  top?: number;
-  left?: number;
-  right?: number;
-  height?: number;
-  width?: number;
-}
-
-defineProps<{
-  lStyle?: any;
-}>();
-
-const emit = defineEmits(['resize']);
-
-const context = getCurrentInstance();
-const width = ref(0);
-const hasNoDefaultSlot = ref(false);
-const height = ref(0);
-const expandScrollTop = ref(0);
-const expandScrollLeft = ref(0);
-const shrinkScrollTop = ref(0);
-const shrinkScrollLeft = ref(0);
-
-let scrollEventCount = 0;
-let lastHeight = 0;
-let lastWidth = 0;
-const querySelector = '.l-resize__container';
-let onScrollHandlerClone = () => {
-  getRect(querySelector, context).then((res: ResizeResult) => {
-    // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
-    if (scrollEventCount++ === 0) {
-      resizeEvent(res);
-    }
-    // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
-    if (scrollEventCount < 3) return;
-    // 手动设置父容器高宽，防止父容器坍塌
-    // 滚动完，重新获取容器新的高度
-    const newHeight = res.height;
-    const newWidth = res.width;
-    // 立即填充父容器高宽
-    height.value = newHeight ?? 0;
-    width.value = newWidth ?? 0;
-    // 宽高都改变时，只需要触发一次 size 事件
-    const emitStack = [];
-    if (newHeight !== lastHeight) {
-      lastHeight = newHeight ?? 0;
-      emitStack.push(1);
-    }
-    if (newWidth !== lastWidth) {
-      lastWidth = newWidth ?? 0;
-      emitStack.push(1);
-    }
-    if (emitStack.length !== 0) {
-      resizeEvent(res);
-    }
-    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
-    scrollToBottom({ width: lastWidth, height: lastHeight });
-  });
-};
-let onScrollHandler = () => {
-  if (onScrollHandlerClone) {
-    onScrollHandlerClone();
-  }
-};
-const scrollToBottom = (res: Record<string, number>) => {
-  expandScrollTop.value = 100000 + res.height;
-  shrinkScrollTop.value = 3 * height.value + res.height;
-  expandScrollLeft.value = 100000 + res.width;
-  shrinkScrollLeft.value = 3 * width.value + res.width;
-};
-const resizeEvent = (res: ResizeResult) => {
-  const result: any = {};
-  ['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
-    result[propName] = res[propName as keyof ResizeResult];
-  });
-  emit('resize', result);
-};
-const styles = computed(() => {
-  if (context && context.slots?.default && (width.value || height.value)) {
-    return {
-      width: addUnit(width.value),
-      height: addUnit(height.value),
-    };
-  }
-  return {};
-});
-onMounted(() => {
-  // const options = { context };
-  hasNoDefaultSlot.value = !context?.slots.default;
-  getRect(querySelector, context).then((res) => {
-    // 闭包记录容器高度
-    lastHeight = res.height ?? 0;
-    lastWidth = res.width ?? 0;
-    // 立即填充父容器高宽
-    width.value = lastWidth;
-    height.value = lastHeight;
-
-    scrollToBottom({ width: lastWidth, height: lastHeight });
-  });
-});
-</script>
-<style lang="scss" scoped>
-.l-resize {
-  &__container {
-    position: absolute;
-    min-width: 1px;
-    min-height: 1px;
-  }
-
-  &-target,
-  &__wrapper {
-    background-color: aqua;
-    position: absolute;
-    inset: 0;
-    z-index: -9999;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  &-target {
-    .l-resize__container {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__wrapper {
-    &--placeholder {
-      transition: 0s;
-      animation: none;
-    }
-  }
-}
-</style>
+<template>
+  <view
+    class="l-resize l-class"
+    :class="{ 'l-resize-target': hasNoDefaultSlot }"
+    :style="[styles, lStyle]"
+  >
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view
+      ref="l-resize__container"
+      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 lang="ts" setup>
+import { ref, onMounted, getCurrentInstance, computed } from 'vue';
+import { getRect, addUnit } from './utils';
+
+interface ResizeResult {
+  bottom?: number;
+  top?: number;
+  left?: number;
+  right?: number;
+  height?: number;
+  width?: number;
+}
+
+defineProps<{
+  lStyle?: any;
+}>();
+
+const emit = defineEmits(['resize']);
+
+const context = getCurrentInstance();
+const width = ref(0);
+const hasNoDefaultSlot = ref(false);
+const height = ref(0);
+const expandScrollTop = ref(0);
+const expandScrollLeft = ref(0);
+const shrinkScrollTop = ref(0);
+const shrinkScrollLeft = ref(0);
+
+let scrollEventCount = 0;
+let lastHeight = 0;
+let lastWidth = 0;
+const querySelector = '.l-resize__container';
+let onScrollHandlerClone = () => {
+  getRect(querySelector, context).then((res: ResizeResult) => {
+    // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+    if (scrollEventCount++ === 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+    if (scrollEventCount < 3) return;
+    // 手动设置父容器高宽，防止父容器坍塌
+    // 滚动完，重新获取容器新的高度
+    const newHeight = res.height;
+    const newWidth = res.width;
+    // 立即填充父容器高宽
+    height.value = newHeight ?? 0;
+    width.value = newWidth ?? 0;
+    // 宽高都改变时，只需要触发一次 size 事件
+    const emitStack = [];
+    if (newHeight !== lastHeight) {
+      lastHeight = newHeight ?? 0;
+      emitStack.push(1);
+    }
+    if (newWidth !== lastWidth) {
+      lastWidth = newWidth ?? 0;
+      emitStack.push(1);
+    }
+    if (emitStack.length !== 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+};
+let onScrollHandler = () => {
+  if (onScrollHandlerClone) {
+    onScrollHandlerClone();
+  }
+};
+const scrollToBottom = (res: Record<string, number>) => {
+  expandScrollTop.value = 100000 + res.height;
+  shrinkScrollTop.value = 3 * height.value + res.height;
+  expandScrollLeft.value = 100000 + res.width;
+  shrinkScrollLeft.value = 3 * width.value + res.width;
+};
+const resizeEvent = (res: ResizeResult) => {
+  const result: any = {};
+  ['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+    result[propName] = res[propName as keyof ResizeResult];
+  });
+  emit('resize', result);
+};
+const styles = computed(() => {
+  if (context && context.slots?.default && (width.value || height.value)) {
+    return {
+      width: addUnit(width.value),
+      height: addUnit(height.value),
+    };
+  }
+  return {};
+});
+onMounted(() => {
+  // const options = { context };
+  hasNoDefaultSlot.value = !context?.slots.default;
+  getRect(querySelector, context).then((res) => {
+    // 闭包记录容器高度
+    lastHeight = res.height ?? 0;
+    lastWidth = res.width ?? 0;
+    // 立即填充父容器高宽
+    width.value = lastWidth;
+    height.value = lastHeight;
+
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+});
+</script>
+<style lang="scss" scoped>
+.l-resize {
+  &__container {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+
+  &-target,
+  &__wrapper {
+    background-color: aqua;
+    position: absolute;
+    inset: 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/v3/{AutoSizer → components/AutoSizer}/utils.ts

@@ -1,49 +1,49 @@
-import type { ComponentInternalInstance } 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;
-}
+import type { ComponentInternalInstance } 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/v3/components/Barrage/BarrageItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <view class="barrage-item" :style="itemStyle" @animationend="onAnimationEnd">
+    <view class="barrage-content" :class="type">
+      <view class="barrage-type-tag">
+        {{ typeTag }}
+      </view>
+      <view class="barrage-text">{{ text }}</view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  text: string;
+  type: string;
+  top: number;
+  duration: number;
+  delay?: number; // 新增延迟属性，毫秒单位
+  maxLength?: number;
+  color?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'remove'): void;
+}>();
+
+const typeTag = computed(() => {
+  const t = props.type.toLowerCase();
+  if (t === 'network') return 'NET';
+  return t.toUpperCase();
+});
+
+const itemStyle = computed(() => ({
+  top: `${props.top}px`,
+  '--barrage-duration': `${props.duration}s`,
+  '--barrage-delay': `${props.delay || 0}ms`,
+  '--barrage-max-width': props.maxLength ? 'none' : '300px',
+  color: props.color || 'inherit',
+}));
+
+function onAnimationEnd() {
+  emit('remove');
+}
+</script>
+
+<style scoped>
+.barrage-item {
+  position: fixed;
+  left: 100%;
+  top: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10001;
+  display: flex;
+  will-change: transform;
+  animation: barrage-move var(--barrage-duration) linear var(--barrage-delay)
+    forwards;
+}
+
+.barrage-item:hover {
+  animation-play-state: paused;
+  z-index: 20000;
+}
+
+@keyframes barrage-move {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(calc(-100vw - 100%));
+  }
+}
+
+.barrage-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 16px;
+  background: rgb(0 0 0 / 60%);
+  backdrop-filter: blur(4px);
+  color: #fff;
+  font-size: 12px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Log & Info: 白色/中性系 */
+.barrage-content.log,
+.barrage-content.info {
+  background: rgb(255 255 255 / 90%);
+  color: #333;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+}
+
+.barrage-content.log .barrage-type-tag,
+.barrage-content.info .barrage-type-tag {
+  background: rgb(0 0 0 / 10%);
+}
+
+/* Warn: 黄橙色系 */
+.barrage-content.warn {
+  background: rgb(180 100 0 / 75%);
+  box-shadow: 0 0 10px rgb(255 149 0 / 30%);
+}
+
+/* Error & Network: 红色系 */
+.barrage-content.error,
+.barrage-content.network {
+  background: rgb(180 30 20 / 75%);
+  box-shadow: 0 0 10px rgb(255 59 48 / 30%);
+}
+
+/* Debug: 灰色系 */
+.barrage-content.debug {
+  background: rgb(80 80 80 / 75%);
+  box-shadow: 0 0 10px rgb(142 142 147 / 30%);
+}
+
+.barrage-type-tag {
+  font-weight: bold;
+  margin-right: 6px;
+  font-size: 10px;
+  padding: 2px 4px;
+  background: rgb(0 0 0 / 5%);
+  border-radius: 4px;
+}
+
+.barrage-text {
+  max-width: var(--barrage-max-width, 300px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>