vite-uni-dev-tool 1.2.0 → 1.2.1

package/dist/v3/DevTool/components/Instance/transformTree.ts

@@ -7,21 +7,23 @@ import {
 } from 'vue';
 import { getRecordedChildren } from './registry';
 
-// 类型守卫函数，检查是否为VNode类型
-function isVNode(child: any): child is VNode {
-  return child != null && typeof child === 'object' && 'type' in child;
+// 类型守卫函数，检查是否为Vnode类型
+function isVNode(child: unknown): child is VNode {
+  return (
+    child != null && typeof child === 'object' && 'type' in (child as object)
+  );
 }
 
 // 类型守卫函数，检查是否为包含component属性的对象
 function hasComponentProperty(
-  child: any,
+  child: unknown,
 ): child is VNode & { component?: ComponentInternalInstance } {
-  return isVNode(child) && 'component' in child;
+  return isVNode(child) && 'component' in (child as object);
 }
 
 // 类型守卫函数，检查是否为Symbol类型且具有description属性
 function isSymbolWithDescription(
-  value: any,
+  value: unknown,
 ): value is symbol & { description?: string } {
   return typeof value === 'symbol';
 }
@@ -33,35 +35,49 @@ interface SimpleTreeNode {
   content?: string;
   hasChildren?: boolean;
   // 分类存储属性
-  props?: Record<string, any>;
-  styles?: Record<string, any>;
-  other?: Record<string, any>;
-  provides?: Record<string, any>;
-  data?: Record<string, any>;
-  functions?: Record<string, any>;
-  emits?: Record<string, any>;
+  props?: Record<string, unknown>;
+  styles?: Record<string, unknown>;
+  other?: Record<string, unknown>;
+  provides?: Record<string, unknown>;
+  data?: Record<string, unknown>;
+  functions?: Record<string, unknown>;
+  emits?: Record<string, unknown>;
+}
+
+interface VNodeWithInternals extends Record<string, unknown> {
+  uid?: string | number;
+  type?: unknown;
+  props?: Record<string, unknown> | null;
+  children?: unknown;
+  component?: unknown;
+  subTree?: unknown;
+  provides?: Record<string | symbol, unknown>;
+  setupState?: Record<string, unknown>;
+  data?: Record<string, unknown>;
+  emitsOptions?: string[] | Record<string, unknown>;
+  devtoolsRawSetupState?: Record<string, unknown>;
 }
 
 /**
  * 分类提取属性
  */
-function extractCategorizedData(vnode: any): {
-  props: Record<string, any>;
-  styles: Record<string, any>;
-  other: Record<string, any>;
-  provides: Record<string, any>;
-  data: Record<string, any>;
-  functions: Record<string, any>;
-  emits: Record<string, any>;
+function extractCategorizedData(vnode: VNodeWithInternals): {
+  props: Record<string, unknown>;
+  styles: Record<string, unknown>;
+  other: Record<string, unknown>;
+  provides: Record<string, unknown>;
+  data: Record<string, unknown>;
+  functions: Record<string, unknown>;
+  emits: Record<string, unknown>;
 } {
-  const styles: any = {};
-  const props: any = {};
-  const other: any = {};
-  const provides: any = {};
-  const data: any = {};
-  const emits: any = {};
+  const styles: Record<string, unknown> = {};
+  const props: Record<string, unknown> = {};
+  const other: Record<string, unknown> = {};
+  const provides: Record<string, unknown> = {};
+  const data: Record<string, unknown> = {};
+  const emits: Record<string, unknown> = {};
 
-  const vnodeProps = vnode.props || {};
+  const vnodeProps = (vnode.props as Record<string, unknown>) || {};
 
   // 1. 提取样式相关 (id, style)
   const styleKeys = ['id', 'style'];
@@ -71,7 +87,7 @@ function extractCategorizedData(vnode: any): {
     let val = vnodeProps[key];
     if (val !== undefined && val !== null && val !== '') {
       if (key === 'style' && isObject(val)) {
-        val = Object.entries(val)
+        val = Object.entries(val as object)
           .filter(([_, v]) => v !== undefined && v !== null && v !== '')
           .map(([k, v]) => `${k}: ${v}`)
           .join('; ');
@@ -95,24 +111,25 @@ function extractCategorizedData(vnode: any): {
   // 3. 提取其他元数据
   other.uid = vnode.uid;
   if (vnode.type) {
+    const vType = vnode.type as Record<string, string>;
     other.type = isString(vnode.type)
       ? vnode.type
       : isObject(vnode.type)
-        ? (vnode.type as any).name || (vnode.type as any).__name || 'Component'
+        ? vType.name || vType.__name || 'Component'
         : String(vnode.type);
 
-    if (isObject(vnode.type) && (vnode.type as any).__file) {
-      other.file = (vnode.type as any).__file;
+    if (isObject(vnode.type) && vType.__file) {
+      other.file = vType.__file;
     }
   }
 
   // 如果有 slots
   if (vnode.children && !isArray(vnode.children) && isObject(vnode.children)) {
-    other.slots = Object.keys(vnode.children);
+    other.slots = Object.keys(vnode.children as object);
   }
 
   // 4. 提取 provides
-  const currentProvides = vnode.provides;
+  const currentProvides = vnode.provides as Record<string | symbol, unknown>;
 
   if (currentProvides) {
     Reflect.ownKeys(currentProvides).forEach((key) => {
@@ -126,20 +143,20 @@ function extractCategorizedData(vnode: any): {
   }
 
   // 5. 提取 data (仅当 vnode.component 存在时)
-  const functions: any = {};
+  const functions: Record<string, unknown> = {};
   if (vnode.setupState || vnode.data) {
     // 优先取 setupState (Script Setup / Composition API), 其次取 data (Options API)
     // 注意：setupState 包含了响应式引用的解包值
-    const allData: any = {};
+    const allData: Record<string, unknown> = {};
 
     // 处理 setupState
     if (isObject(vnode.setupState)) {
-      Object.assign(allData, vnode.setupState);
+      Object.assign(allData, vnode.setupState as object);
     }
 
     // 处理 Options API data
     if (isObject(vnode.data)) {
-      Object.assign(allData, vnode.data);
+      Object.assign(allData, vnode.data as object);
     }
 
     if (isObject(allData)) {
@@ -151,13 +168,15 @@ function extractCategorizedData(vnode: any): {
         )
           return;
 
-        const value = (allData as any)[key];
+        const value = (allData as Record<string | symbol, unknown>)[key];
         let keyStr = typeof key === 'symbol' ? String(key) : key;
 
         // 标记 Ref 和 Reactive
         // 优先检查 devtoolsRawSetupState 获取原始 Ref
-        const rawSetupState = (vnode as any).devtoolsRawSetupState || {};
-        const rawValue = rawSetupState[key];
+        const rawSetupState =
+          (vnode as Record<string, Record<string, unknown>>)
+            .devtoolsRawSetupState || {};
+        const rawValue = rawSetupState[key as string];
 
         if (rawValue && isRef(rawValue)) {
           keyStr += ' (Ref)';
@@ -178,7 +197,10 @@ function extractCategorizedData(vnode: any): {
 
   // 6. 提取 emits
   // 优先从组件实例获取归一化的 emitsOptions, 其次从类型定义获取
-  const emitsOptions = vnode?.emitsOptions || vnode.type?.emits;
+  const emitsOptions = (vnode?.emitsOptions ||
+    (vnode.type as Record<string, unknown>)?.emits) as
+    | string[]
+    | Record<string, unknown>;
   if (emitsOptions) {
     if (isArray(emitsOptions)) {
       emitsOptions.forEach((emit: string) => {
@@ -212,107 +234,37 @@ function extractNameFromFile(file: string): string | undefined {
   return match ? match[1] : undefined;
 }
 
-function getComponentName(type: any): string {
+function getComponentName(type: unknown): string {
   if (!type) return 'Anonymous';
   if (typeof type === 'string') return type;
   if (typeof type === 'object') {
+    const t = type as Record<string, string>;
     return (
-      type.name ||
-      type.__name ||
-      (type.__file ? extractNameFromFile(type.__file) : undefined) ||
+      t.name ||
+      t.__name ||
+      (t.__file ? extractNameFromFile(t.__file) : undefined) ||
       'Anonymous'
     );
   }
   if (typeof type === 'function') {
-    return type.name || type.__name || 'Anonymous';
+    const f = type as { name?: string; __name?: string };
+    return f.name || f.__name || 'Anonymous';
   }
   return 'Anonymous';
 }
 
-// ... existing code ...
-
-// ... types ...
-
-export function simpleTree(vNode?: any, depth = 0): SimpleTreeNode | null {
-  // ... check valid ...
-  if (vNode === null || typeof vNode !== 'object' || depth > 40) {
-    return null;
-  }
-  // ... rest of simpleTree func ...
-
-  // 确保只使用必需的属性
-  const simplifiedInstance: InstanceTree.SimplifiedComponentInternalInstance = {
-    type: vNode.type,
-    subTree: vNode.subTree,
-    uid: vNode.uid,
-    ...(vNode.component && { component: vNode.component }),
-    ...(vNode.children && { children: vNode.children }),
-  };
-
-  const children: SimpleTreeNode[] = [];
-
-  // 获取子节点
-  if (simplifiedInstance.subTree) {
-    if ('data-dev-tool' in (simplifiedInstance.subTree.props ?? {})) {
-      return null;
-    } else {
-      children.push(
-        ...getSimpleChildrenFromVNode(simplifiedInstance.subTree, depth),
-      );
-    }
-  }
-
-  // 插槽 fallback
-  if (children.length === 0 && simplifiedInstance.children) {
-    if (isArray(simplifiedInstance.children)) {
-      const slotChildren = getSimpleChildrenFromVNode(
-        {
-          children: simplifiedInstance.children,
-        },
-        depth,
-      );
-      children.push(...slotChildren);
-    }
-  }
-
-  // GLOBAL fallback
-  if (children.length === 0 && vNode.uid !== undefined) {
-    const recordedChildren = getRecordedChildren(vNode.uid);
-    recordedChildren.forEach((childInst) => {
-      const childTree = simpleTree(childInst, depth + 1);
-      if (childTree) {
-        children.push(childTree);
-      }
-    });
-  }
-
-  const hasChildrenFlag = children.length > 0;
-  const uid = vNode.uid !== undefined ? vNode.uid : getNextUid();
-  const typeName = getComponentName(simplifiedInstance.type);
-
-  const nodeInfo: SimpleTreeNode = {
-    type: typeName,
-    uid,
-    children,
-    hasChildren: hasChildrenFlag,
-    ...extractCategorizedData(vNode),
-  };
-
-  return nodeInfo;
-}
-
 /**
- * 从 VNode 获取简化的子节点 (仅保留组件节点)
+ * 从 Vnode 获取简化的子节点 (仅保留组件节点)
  */
 function getSimpleChildrenFromVNode(
-  vnode: any,
+  vnode: VNodeWithInternals,
   depth: number = 0,
 ): SimpleTreeNode[] {
   const children: SimpleTreeNode[] = [];
   if (vnode.children) {
     // 统一转为数组处理，兼容单节点和多节点
     const rawChildren = isArray(vnode.children)
-      ? vnode.children
+      ? (vnode.children as unknown[])
       : isObject(vnode.children)
         ? [vnode.children]
         : isString(vnode.children)
@@ -320,19 +272,21 @@ function getSimpleChildrenFromVNode(
           : [];
 
     for (const child of rawChildren) {
-      if (
-        child &&
-        typeof child === 'object' &&
-        'props' in child &&
-        child.props &&
-        'data-dev-tool' in child.props
-      ) {
+      if (!child || typeof child !== 'object') continue;
+
+      const childObj = child as unknown as VNodeWithInternals;
+      const childProps = (childObj.props as Record<string, unknown>) || {};
+
+      if (childProps['data-dev-tool']) {
         continue;
       }
 
       // 1. 如果是组件实例，直接处理
-      if (hasComponentProperty(child) && child?.component) {
-        const childTree = simpleTree(child.component, depth + 1);
+      if (hasComponentProperty(child) && child.component) {
+        const childTree = simpleTree(
+          child.component as unknown as Record<string, unknown>,
+          depth + 1,
+        );
         if (childTree) {
           children.push(childTree);
         }
@@ -340,32 +294,35 @@ function getSimpleChildrenFromVNode(
       // 2. 如果是函数式组件
       else if (isVNode(child) && typeof child.type === 'function') {
         const uid =
-          (child as any).uid !== undefined ? (child as any).uid : getNextUid();
+          childObj.uid !== undefined
+            ? (childObj.uid as string | number)
+            : getNextUid();
         const typeName = getComponentName(child.type);
         children.push({
           type: typeName,
           uid,
           children: [],
           hasChildren: false,
-          ...extractCategorizedData(child),
+          ...extractCategorizedData(childObj),
         });
       }
       // 3. 如果是 VNode 且是 Fragmentation/Block (带 children 的非组件节点)，需要深入查找内部的组件
       else if (isVNode(child)) {
         // 如果是 Fragment，递归查找子节点
         if (child.type && isSymbolWithDescription(child.type)) {
-          const desc = child.type.description;
+          const desc = (child.type as { description?: string }).description;
           const isFragment = desc === 'v-fgt' || desc === 'Fragment';
           if (isFragment) {
-            const fragmentChildren = getSimpleChildrenFromVNode(child, depth);
+            const fragmentChildren = getSimpleChildrenFromVNode(
+              childObj,
+              depth,
+            );
             children.push(...fragmentChildren);
           }
         }
         // 如果是普通 HTML 元素或其他容器，也需要递归查找其 children 中的组件
-        // 例如 <view><MyComponent /></view>，我们需要找到 MyComponent
         else if (isString(child.type) || isObject(child.type)) {
-          // 递归查找子节点中的组件，但不把当前节点加入树中（因为我们只关心组件）
-          const subChildren = getSimpleChildrenFromVNode(child, depth);
+          const subChildren = getSimpleChildrenFromVNode(childObj, depth);
           children.push(...subChildren);
         }
       }
@@ -373,3 +330,64 @@ function getSimpleChildrenFromVNode(
   }
   return children;
 }
+
+export function simpleTree(
+  vNode?: Record<string, unknown>,
+  depth = 0,
+): SimpleTreeNode | null {
+  if (!vNode || typeof vNode !== 'object' || depth > 40) {
+    return null;
+  }
+
+  const vNodeObj = vNode as unknown as VNodeWithInternals;
+  const children: SimpleTreeNode[] = [];
+
+  // 1. 获取子节点
+  const subTree = vNodeObj.subTree as VNodeWithInternals | undefined;
+  if (subTree) {
+    const subProps = (subTree.props as Record<string, unknown>) || {};
+    if (!subProps['data-dev-tool']) {
+      children.push(...getSimpleChildrenFromVNode(subTree, depth));
+    }
+  }
+
+  // 2. 插槽 fallback
+  if (children.length === 0 && vNodeObj.children) {
+    if (isArray(vNodeObj.children)) {
+      const slotChildren = getSimpleChildrenFromVNode(
+        { children: vNodeObj.children } as VNodeWithInternals,
+        depth,
+      );
+      children.push(...slotChildren);
+    }
+  }
+
+  // 3. GLOBAL fallback
+  if (children.length === 0 && typeof vNodeObj.uid === 'number') {
+    const recordedChildren = getRecordedChildren(vNodeObj.uid);
+    recordedChildren.forEach((childInst) => {
+      const childTree = simpleTree(
+        childInst as unknown as Record<string, unknown>,
+        depth + 1,
+      );
+      if (childTree) {
+        children.push(childTree);
+      }
+    });
+  }
+
+  const hasChildrenFlag = children.length > 0;
+  const uid =
+    vNodeObj.uid !== undefined
+      ? (vNodeObj.uid as string | number)
+      : getNextUid();
+  const typeName = getComponentName(vNodeObj.type);
+
+  return {
+    type: typeName,
+    uid,
+    children,
+    hasChildren: hasChildrenFlag,
+    ...extractCategorizedData(vNodeObj),
+  };
+}

package/dist/v3/DevTool/components/SettingList/index.vue

@@ -47,6 +47,7 @@
       :barrage-start-top="barrageStartTop"
       :barrage-duration="barrageDuration"
       :barrage-max-length="barrageMaxLength"
+      :barrage-allow-drag="barrageAllowDrag"
       :barrage-types="barrageTypes"
       :barrage-show-when-open="barrageShowWhenOpen"
       :sizeFormat="sizeFormat"
@@ -56,6 +57,7 @@
       @change-barrage-start-top="onChangeBarrageStartTop"
       @change-barrage-duration="onChangeBarrageDuration"
       @change-barrage-max-length="onChangeBarrageMaxLength"
+      @change-barrage-allow-drag="onChangeBarrageAllowDrag"
       @change-barrage-types="onChangeBarrageTypes"
       @change-barrage-show-when-open="onChangeBarrageShowWhenOpen" />
   </scroll-view>
@@ -89,6 +91,7 @@ defineProps<{
   barrageStartTop?: number; // 新增
   barrageDuration?: number; // 时长
   barrageMaxLength?: number; // 长度
+  barrageAllowDrag?: boolean; // 允许拖动
   barrageTypes?: string[]; // 类型
   barrageShowWhenOpen?: boolean;
   buildInfo?: {
@@ -121,6 +124,7 @@ const emit = defineEmits<{
   (e: 'change-barrage-start-top', value: number): void;
   (e: 'change-barrage-duration', value: number): void;
   (e: 'change-barrage-max-length', value: number): void;
+  (e: 'change-barrage-allow-drag', value: boolean): void;
   (e: 'change-barrage-types', value: string[]): void;
   (e: 'change-barrage-show-when-open', value: boolean): void;
   (e: 'change-use-transition', value: boolean): void;
@@ -168,6 +172,10 @@ function onChangeBarrageMaxLength(v: number) {
   emit('change-barrage-max-length', v);
 }
 
+function onChangeBarrageAllowDrag(v: boolean) {
+  emit('change-barrage-allow-drag', v);
+}
+
 function onChangeBarrageTypes(v: string[]) {
   emit('change-barrage-types', v);
 }

package/dist/v3/DevTool/components/SettingList/modules/SettingBarrage.vue

@@ -23,6 +23,16 @@
       </view>
 
       <view v-if="barrageVisible" class="barrage-advanced">
+        <!-- 是否允许拖动 -->
+        <view class="setting-row">
+          <view class="setting-label">{{ t('common.barrageAllowDrag') }}</view>
+          <switch
+            :checked="barrageAllowDrag"
+            @change="onBarrageAllowDragChange"
+            color="var(--dev-tool-main-color)"
+            style="transform: scale(0.7)" />
+        </view>
+
         <!-- 轨道数量 -->
         <view class="setting-row-group">
           <view class="setting-row-header">
@@ -157,6 +167,7 @@ const props = defineProps<{
   barrageStartTop?: number;
   barrageDuration?: number;
   barrageMaxLength?: number;
+  barrageAllowDrag?: boolean;
   barrageTypes?: string[];
   barrageShowWhenOpen?: boolean;
 }>();
@@ -168,6 +179,7 @@ const emit = defineEmits<{
   (e: 'change-barrage-start-top', value: number): void;
   (e: 'change-barrage-duration', value: number): void;
   (e: 'change-barrage-max-length', value: number): void;
+  (e: 'change-barrage-allow-drag', value: boolean): void;
   (e: 'change-barrage-types', value: string[]): void;
   (e: 'change-barrage-show-when-open', value: boolean): void;
 }>();
@@ -210,6 +222,10 @@ function onMaxLengthChange(e: any) {
   emit('change-barrage-max-length', e.detail.value);
 }
 
+function onBarrageAllowDragChange(e: any) {
+  emit('change-barrage-allow-drag', !!e.detail.value);
+}
+
 function onTypesChange(e: any) {
   let values = e.detail.value;
   // 如果全部取消，至少保留一个之前的