vite-uni-dev-tool 1.1.0 → 1.2.0

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

@@ -1,226 +1,226 @@
-/**
- * 将树结构扁平化并添加层级及闭合层级信息（包含闭合节点）
- * 这个函数会为每个节点添加开始和结束标记，形成类似括号匹配的结构
- * @param tree - 生成的树结构
- * @param collapsedIds - 收起的节点UID集合
- * @param result - 结果数组 (递归使用)
- * @param level - 当前层级，默认为0
- * @param parentUid - 父节点UID，默认为undefined
- * @returns 扁平化的节点数组（包含闭合节点）
- */
-// 栈中的项结构，用于模拟递归帧
-type StackItem = {
-  node: InstanceTree.TreeNode;
-  level: number;
-  parentUid?: string | number;
-  processed: boolean; // false: 处理开始标记和入栈子节点; true: 处理结束标记
-};
-
-export function flattenTreeWithEndMarkers(
-  tree: InstanceTree.TreeNode | null,
-  expandedIds: Set<string | number>,
-  result: InstanceTree.FlattenedNodeWithEnd[] = [],
-  level: number = 0,
-  parentUid?: string | number,
-): InstanceTree.FlattenedNodeWithEnd[] {
-  if (!tree) {
-    return result;
-  }
-
-  // 使用栈代替递归
-  const stack: StackItem[] = [
-    { node: tree, level, parentUid, processed: false },
-  ];
-
-  while (stack.length > 0) {
-    const frame = stack[stack.length - 1]; // 查看栈顶，不直接 pop
-    const { node, level, parentUid, processed } = frame;
-
-    if (processed) {
-      // 阶段2：后序处理（处理结束标记）
-      stack.pop(); // 真正移除
-
-      // 重新计算一些基本状态用于判断是否需要结束标记
-      // 注意：这些状态必须与开始标记阶段一致
-      const hasChildren =
-        (node.hasChildren ||
-          (node.children && node.children.length > 0) ||
-          (node.content !== undefined &&
-            node.content !== null &&
-            node.content !== '')) ??
-        false;
-
-      const isExpanded =
-        node.uid !== undefined ? expandedIds.has(node.uid) : false;
-      const isCollapsed = !isExpanded;
-      const isEmptyTag = !hasChildren && !isCollapsed;
-
-      // 判断内联状态 (必须完全复刻开始阶段的逻辑)
-      let isInline = false;
-      if (!isCollapsed) {
-        if (node.type === 'v-cmt') {
-          const content = node.content || '';
-          if (!content.includes('\n')) {
-            isInline = true;
-          }
-        } else {
-          const hasChildrenNodes = node.children && node.children.length > 0;
-          const hasContentValue =
-            node.content !== undefined &&
-            node.content !== null &&
-            node.content !== '';
-          if (hasChildrenNodes && node.children) {
-            const allText = node.children.every((c) => c.type === 'text');
-            if (allText) {
-              isInline = true;
-            }
-          } else if (hasContentValue) {
-            isInline = true;
-          }
-        }
-      }
-
-      // 如果收起了，或是空标签，或是内联展示，就不生成结束标记
-      if (isCollapsed || isEmptyTag || isInline) {
-        continue;
-      }
-
-      // 添加结束标记
-      const endNode: InstanceTree.FlattenedNodeWithEnd = {
-        type: node.type,
-        level: level,
-        ...(node.uid !== undefined && { uid: node.uid }),
-        ...(node.content !== undefined && { content: '' }),
-        ...(parentUid !== undefined && { parentUid: parentUid }),
-        isEndNode: true,
-        hasChildren,
-      };
-
-      if (endNode.type || endNode.content) {
-        result.push(endNode);
-      }
-    } else {
-      // 阶段1：前序处理（生成开始标记，处理内容，将子节点入栈）
-      frame.processed = true; // 标记为已处理过开始阶段，下次循环处理结束阶段
-
-      const hasChildren =
-        (node.hasChildren ||
-          (node.children && node.children.length > 0) ||
-          (node.content !== undefined &&
-            node.content !== null &&
-            node.content !== '')) ??
-        false;
-
-      const isExpanded =
-        node.uid !== undefined ? expandedIds.has(node.uid) : false;
-      const isCollapsed = !isExpanded;
-      const isEmptyTag = !hasChildren && !isCollapsed;
-
-      let isInline = false;
-      let inlineContent = '';
-      if (!isCollapsed) {
-        if (node.type === 'v-cmt') {
-          const content = node.content || '';
-          if (!content.includes('\n')) {
-            isInline = true;
-            inlineContent = content;
-          }
-        } else {
-          const hasChildrenNodes = node.children && node.children.length > 0;
-          const hasContentValue =
-            node.content !== undefined &&
-            node.content !== null &&
-            node.content !== '';
-
-          if (hasChildrenNodes && node.children) {
-            const allText = node.children.every((c) => c.type === 'text');
-            if (allText) {
-              isInline = true;
-              inlineContent = node.children
-                .map((c) => c.content || '')
-                .join('');
-            }
-          } else if (hasContentValue) {
-            isInline = true;
-            inlineContent = node.content!;
-          }
-        }
-      }
-
-      // 生成开始标记
-      const startNode: InstanceTree.FlattenedNodeWithEnd = {
-        type: node.type,
-        level: level,
-        ...(node.uid !== undefined && { uid: node.uid }),
-        ...(node.content !== undefined && { content: '' }),
-        ...(parentUid !== undefined && { parentUid: parentUid }),
-        isStartNode: true,
-        hasChildren: node.type === 'v-cmt' || isInline ? false : hasChildren,
-        isCollapsed,
-        isEmptyTag,
-        isInline,
-        inlineContent,
-        props: node.props,
-        styles: node.styles,
-        other: node.other,
-        provides: node.provides,
-        data: node.data,
-        functions: node.functions,
-        emits: node.emits,
-      };
-
-      if (startNode.type || startNode.content) {
-        result.push(startNode);
-      }
-
-      if (isCollapsed || isEmptyTag || isInline) {
-        // 不需要处理子节点，直接移除栈顶项（其实就是刚才的 frame），因为不需要后序处理结束标记了
-        // 注意：这里需要把刚刚标记为 true 的 frame 彻底 pop 掉
-        // 但为了简单，可以在这里直接 continue，并且因为 frame.processed 已经是 true，
-        // 下次循环会进入上面的 if(processed) 分支。
-        // 为了不在那里重复计算 isInline 等逻辑，我们在那里也加了检查。
-        // 不过更高效的做法是如果这里决定不再深入，直接 pop。
-        stack.pop();
-        continue;
-      }
-
-      // 处理多行内容节点
-      if (
-        node.content !== undefined &&
-        node.content !== null &&
-        node.content !== ''
-      ) {
-        const content = node.content || '';
-        const lines = content.split('\n');
-        // 是否有 startNode 决定了 level 偏移
-        const hasStart = !!(startNode.type || startNode.content);
-
-        lines.forEach((line) => {
-          const contentNode: InstanceTree.FlattenedNodeWithEnd = {
-            type: node.type,
-            level: level + (hasStart ? 1 : 0),
-            content: line,
-            parentUid: node.uid,
-            isContentNode: true,
-          };
-          result.push(contentNode);
-        });
-      }
-
-      // 将子节点入栈 (注意：栈是后进先出，所以要逆序入栈，从而保证正序处理)
-      if (node.children && node.children.length > 0) {
-        for (let i = node.children.length - 1; i >= 0; i--) {
-          const child = node.children[i];
-          stack.push({
-            node: child,
-            level: level + 1,
-            parentUid: node.uid,
-            processed: false,
-          });
-        }
-      }
-    }
-  }
-
-  return result;
-}
+/**
+ * 将树结构扁平化并添加层级及闭合层级信息（包含闭合节点）
+ * 这个函数会为每个节点添加开始和结束标记，形成类似括号匹配的结构
+ * @param tree - 生成的树结构
+ * @param collapsedIds - 收起的节点UID集合
+ * @param result - 结果数组 (递归使用)
+ * @param level - 当前层级，默认为0
+ * @param parentUid - 父节点UID，默认为undefined
+ * @returns 扁平化的节点数组（包含闭合节点）
+ */
+// 栈中的项结构，用于模拟递归帧
+type StackItem = {
+  node: InstanceTree.TreeNode;
+  level: number;
+  parentUid?: string | number;
+  processed: boolean; // false: 处理开始标记和入栈子节点; true: 处理结束标记
+};
+
+export function flattenTreeWithEndMarkers(
+  tree: InstanceTree.TreeNode | null,
+  expandedIds: Set<string | number>,
+  result: InstanceTree.FlattenedNodeWithEnd[] = [],
+  level: number = 0,
+  parentUid?: string | number,
+): InstanceTree.FlattenedNodeWithEnd[] {
+  if (!tree) {
+    return result;
+  }
+
+  // 使用栈代替递归
+  const stack: StackItem[] = [
+    { node: tree, level, parentUid, processed: false },
+  ];
+
+  while (stack.length > 0) {
+    const frame = stack[stack.length - 1]; // 查看栈顶，不直接 pop
+    const { node, level, parentUid, processed } = frame;
+
+    if (processed) {
+      // 阶段2：后序处理（处理结束标记）
+      stack.pop(); // 真正移除
+
+      // 重新计算一些基本状态用于判断是否需要结束标记
+      // 注意：这些状态必须与开始标记阶段一致
+      const hasChildren =
+        (node.hasChildren ||
+          (node.children && node.children.length > 0) ||
+          (node.content !== undefined &&
+            node.content !== null &&
+            node.content !== '')) ??
+        false;
+
+      const isExpanded =
+        node.uid !== undefined ? expandedIds.has(node.uid) : false;
+      const isCollapsed = !isExpanded;
+      const isEmptyTag = !hasChildren && !isCollapsed;
+
+      // 判断内联状态 (必须完全复刻开始阶段的逻辑)
+      let isInline = false;
+      if (!isCollapsed) {
+        if (node.type === 'v-cmt') {
+          const content = node.content || '';
+          if (!content.includes('\n')) {
+            isInline = true;
+          }
+        } else {
+          const hasChildrenNodes = node.children && node.children.length > 0;
+          const hasContentValue =
+            node.content !== undefined &&
+            node.content !== null &&
+            node.content !== '';
+          if (hasChildrenNodes && node.children) {
+            const allText = node.children.every((c) => c.type === 'text');
+            if (allText) {
+              isInline = true;
+            }
+          } else if (hasContentValue) {
+            isInline = true;
+          }
+        }
+      }
+
+      // 如果收起了，或是空标签，或是内联展示，就不生成结束标记
+      if (isCollapsed || isEmptyTag || isInline) {
+        continue;
+      }
+
+      // 添加结束标记
+      const endNode: InstanceTree.FlattenedNodeWithEnd = {
+        type: node.type,
+        level: level,
+        ...(node.uid !== undefined && { uid: node.uid }),
+        ...(node.content !== undefined && { content: '' }),
+        ...(parentUid !== undefined && { parentUid: parentUid }),
+        isEndNode: true,
+        hasChildren,
+      };
+
+      if (endNode.type || endNode.content) {
+        result.push(endNode);
+      }
+    } else {
+      // 阶段1：前序处理（生成开始标记，处理内容，将子节点入栈）
+      frame.processed = true; // 标记为已处理过开始阶段，下次循环处理结束阶段
+
+      const hasChildren =
+        (node.hasChildren ||
+          (node.children && node.children.length > 0) ||
+          (node.content !== undefined &&
+            node.content !== null &&
+            node.content !== '')) ??
+        false;
+
+      const isExpanded =
+        node.uid !== undefined ? expandedIds.has(node.uid) : false;
+      const isCollapsed = !isExpanded;
+      const isEmptyTag = !hasChildren && !isCollapsed;
+
+      let isInline = false;
+      let inlineContent = '';
+      if (!isCollapsed) {
+        if (node.type === 'v-cmt') {
+          const content = node.content || '';
+          if (!content.includes('\n')) {
+            isInline = true;
+            inlineContent = content;
+          }
+        } else {
+          const hasChildrenNodes = node.children && node.children.length > 0;
+          const hasContentValue =
+            node.content !== undefined &&
+            node.content !== null &&
+            node.content !== '';
+
+          if (hasChildrenNodes && node.children) {
+            const allText = node.children.every((c) => c.type === 'text');
+            if (allText) {
+              isInline = true;
+              inlineContent = node.children
+                .map((c) => c.content || '')
+                .join('');
+            }
+          } else if (hasContentValue) {
+            isInline = true;
+            inlineContent = node.content!;
+          }
+        }
+      }
+
+      // 生成开始标记
+      const startNode: InstanceTree.FlattenedNodeWithEnd = {
+        type: node.type,
+        level: level,
+        ...(node.uid !== undefined && { uid: node.uid }),
+        ...(node.content !== undefined && { content: '' }),
+        ...(parentUid !== undefined && { parentUid: parentUid }),
+        isStartNode: true,
+        hasChildren: node.type === 'v-cmt' || isInline ? false : hasChildren,
+        isCollapsed,
+        isEmptyTag,
+        isInline,
+        inlineContent,
+        props: node.props,
+        styles: node.styles,
+        other: node.other,
+        provides: node.provides,
+        data: node.data,
+        functions: node.functions,
+        emits: node.emits,
+      };
+
+      if (startNode.type || startNode.content) {
+        result.push(startNode);
+      }
+
+      if (isCollapsed || isEmptyTag || isInline) {
+        // 不需要处理子节点，直接移除栈顶项（其实就是刚才的 frame），因为不需要后序处理结束标记了
+        // 注意：这里需要把刚刚标记为 true 的 frame 彻底 pop 掉
+        // 但为了简单，可以在这里直接 continue，并且因为 frame.processed 已经是 true，
+        // 下次循环会进入上面的 if(processed) 分支。
+        // 为了不在那里重复计算 isInline 等逻辑，我们在那里也加了检查。
+        // 不过更高效的做法是如果这里决定不再深入，直接 pop。
+        stack.pop();
+        continue;
+      }
+
+      // 处理多行内容节点
+      if (
+        node.content !== undefined &&
+        node.content !== null &&
+        node.content !== ''
+      ) {
+        const content = node.content || '';
+        const lines = content.split('\n');
+        // 是否有 startNode 决定了 level 偏移
+        const hasStart = !!(startNode.type || startNode.content);
+
+        lines.forEach((line) => {
+          const contentNode: InstanceTree.FlattenedNodeWithEnd = {
+            type: node.type,
+            level: level + (hasStart ? 1 : 0),
+            content: line,
+            parentUid: node.uid,
+            isContentNode: true,
+          };
+          result.push(contentNode);
+        });
+      }
+
+      // 将子节点入栈 (注意：栈是后进先出，所以要逆序入栈，从而保证正序处理)
+      if (node.children && node.children.length > 0) {
+        for (let i = node.children.length - 1; i >= 0; i--) {
+          const child = node.children[i];
+          stack.push({
+            node: child,
+            level: level + 1,
+            parentUid: node.uid,
+            processed: false,
+          });
+        }
+      }
+    }
+  }
+
+  return result;
+}

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

@@ -1,94 +1,94 @@
-<template>
-  <VirtualList
-    :data="flatData"
-    :pageSize="pageSize"
-    :height="height"
-    :itemHeight="itemHeight"
-    scroll-with-animation
-    showBackTop
-    :dataChangeScrollToTop="false"
-    scrollX>
-    <template v-slot="{ list, start }">
-      <InstanceTreeNode
-        v-for="(item, index) in list"
-        :key="start + index"
-        :style="{ height: '20px' }"
-        :showLine="showLine"
-        :node="item"
-        :isActive="selectedUid === item.uid"
-        @toggle="onToggle"
-        @select="handleSelect" />
-    </template>
-  </VirtualList>
-</template>
-<script lang="ts" setup>
-import VirtualList from '../../../components/VirtualList/index.vue';
-import InstanceTreeNode from './components/InstanceTreeNode.vue';
-import { computed, ref, markRaw, shallowRef, watch } from 'vue';
-import { simpleTreeCtx, resetUidCount } from './transformTreeCtx';
-import { flattenTreeWithEndMarkers } from './flatten';
-
-const props = withDefaults(
-  defineProps<{
-    data: any;
-    pageSize?: number;
-    height?: number | string;
-    showLine?: boolean;
-    itemHeight?: number;
-  }>(),
-  {
-    pageSize: 30,
-    height: 400,
-    showLine: false,
-    itemHeight: 20,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'select', node: any): void;
-}>();
-
-const expandedIds = ref<Set<string | number>>(new Set());
-const selectedUid = ref<string | number | undefined>(undefined);
-
-const handleSelect = (node: any) => {
-  selectedUid.value = node.uid;
-  emit('select', node);
-};
-
-const onToggle = (uid: string | number) => {
-  if (expandedIds.value.has(uid)) {
-    expandedIds.value.delete(uid);
-  } else {
-    expandedIds.value.add(uid);
-  }
-  expandedIds.value = new Set(expandedIds.value); // 触发响应式更新
-};
-
-const treeData = shallowRef<InstanceTree.TreeNode | null>(null);
-
-watch(
-  () => props.data,
-  (val) => {
-    resetUidCount();
-    const tree = simpleTreeCtx(val) as any;
-
-    // 默认展开第一层
-    if (tree && tree.uid && expandedIds.value.size === 0) {
-      expandedIds.value.add(tree.uid);
-      expandedIds.value = new Set(expandedIds.value);
-    }
-
-    treeData.value = tree ? markRaw(tree) : null;
-  },
-  { immediate: true },
-);
-
-const flatData = computed(() => {
-  if (!treeData.value) return [];
-  const result: InstanceTree.FlattenedNodeWithEnd[] = [];
-  flattenTreeWithEndMarkers(treeData.value, expandedIds.value, result);
-  return markRaw(result);
-});
-</script>
-<style scoped></style>
+<template>
+  <VirtualList
+    :data="flatData"
+    :pageSize="pageSize"
+    :height="height"
+    :itemHeight="itemHeight"
+    scroll-with-animation
+    showBackTop
+    :dataChangeScrollToTop="false"
+    scrollX>
+    <template v-slot="{ list, start }">
+      <InstanceTreeNode
+        v-for="(item, index) in list"
+        :key="start + index"
+        :style="{ height: '20px' }"
+        :showLine="showLine"
+        :node="item"
+        :isActive="selectedUid === item.uid"
+        @toggle="onToggle"
+        @select="handleSelect" />
+    </template>
+  </VirtualList>
+</template>
+<script lang="ts" setup>
+import VirtualList from '../../../components/VirtualList/index.vue';
+import InstanceTreeNode from './components/InstanceTreeNode.vue';
+import { computed, ref, markRaw, shallowRef, watch } from 'vue';
+import { simpleTreeCtx, resetUidCount } from './transformTreeCtx';
+import { flattenTreeWithEndMarkers } from './flatten';
+
+const props = withDefaults(
+  defineProps<{
+    data: any;
+    pageSize?: number;
+    height?: number | string;
+    showLine?: boolean;
+    itemHeight?: number;
+  }>(),
+  {
+    pageSize: 30,
+    height: 400,
+    showLine: false,
+    itemHeight: 20,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'select', node: any): void;
+}>();
+
+const expandedIds = ref<Set<string | number>>(new Set());
+const selectedUid = ref<string | number | undefined>(undefined);
+
+const handleSelect = (node: any) => {
+  selectedUid.value = node.uid;
+  emit('select', node);
+};
+
+const onToggle = (uid: string | number) => {
+  if (expandedIds.value.has(uid)) {
+    expandedIds.value.delete(uid);
+  } else {
+    expandedIds.value.add(uid);
+  }
+  expandedIds.value = new Set(expandedIds.value); // 触发响应式更新
+};
+
+const treeData = shallowRef<InstanceTree.TreeNode | null>(null);
+
+watch(
+  () => props.data,
+  (val) => {
+    resetUidCount();
+    const tree = simpleTreeCtx(val) as any;
+
+    // 默认展开第一层
+    if (tree && tree.uid && expandedIds.value.size === 0) {
+      expandedIds.value.add(tree.uid);
+      expandedIds.value = new Set(expandedIds.value);
+    }
+
+    treeData.value = tree ? markRaw(tree) : null;
+  },
+  { immediate: true },
+);
+
+const flatData = computed(() => {
+  if (!treeData.value) return [];
+  const result: InstanceTree.FlattenedNodeWithEnd[] = [];
+  flattenTreeWithEndMarkers(treeData.value, expandedIds.value, result);
+  return markRaw(result);
+});
+</script>
+<style scoped></style>