vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/FilterSelect/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="filter-select-wrapper">
+  <view class="filter-select-wrapper" :style="customStyle">
     <view
       v-if="readonly"
       :class="`filter-select ${!modelValue ? 'filter-select-placeholder' : ''}`"
@@ -9,28 +9,41 @@
     </view>
     <input
       v-else
-      :class="`filter-select`"
+      class="filter-select"
       :value="label"
       :placeholder="placeholder || '请选择'"
-      @confirm="debounceInput"
+      @input="debounceInput"
+      @confirm="onInput"
       @focus="onOpenList"
     />
-    <view class="filter-select-clear" v-if="allowClear" @click="onClear">
+    <view
+      class="filter-select-clear"
+      v-if="allowClear && modelValue"
+      @click.stop="onClear"
+    >
       ×
     </view>
 
-    <view class="filter-select-list" v-if="isActive">
-      <view
-        v-for="item in options"
-        :key="item.value"
-        :class="`filter-select-item ${
-          item.value === modelValue ? 'filter-select-item-active' : ''
-        }`"
-        @click="onSelect(item)"
-      >
-        {{ item.label }}
+    <AppTransition
+      :show="isActive"
+      name="fade"
+      :duration="200"
+      :showContainer="false"
+      customStyle="position: absolute; top: 100%; left: 0; width: 100%; z-index: 10000;"
+    >
+      <view class="filter-select-list">
+        <view
+          v-for="item in options"
+          :key="item.value"
+          :class="`filter-select-item ${
+            item.value === modelValue ? 'filter-select-item-active' : ''
+          }`"
+          @click.stop="onSelect(item)"
+        >
+          {{ item.label }}
+        </view>
       </view>
-    </view>
+    </AppTransition>
 
     <view
       class="filter-select-mask"
@@ -42,12 +55,14 @@
 <script lang="ts" setup>
 import { debounce } from '../../utils';
 import { ref, computed } from 'vue';
+import AppTransition from '../AppTransition/index.vue';
 const props = defineProps<{
   placeholder?: string;
   modelValue?: string;
   readonly?: boolean;
   allowClear?: boolean;
   options?: { label: string; value: any }[];
+  customStyle?: Record<string, any> | string;
 }>();
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
@@ -66,7 +81,7 @@ const label = computed(() => {
 });
 
 function onInput(e: any) {
-  const value = e.detail.value;
+  const value = e.detail?.value ?? e.target?.value;
   emit('update:modelValue', value);
   emit('search', value);
 }
@@ -97,10 +112,8 @@ function onSelect(item: { label: string; value: any }) {
   width: 100%;
   min-width: 100px;
   height: 24px;
-
   border-radius: 4px;
   border: 1px solid var(--dev-tool-border-color);
-
   background-color: var(--dev-tool-bg-color);
   transition: background-color 0.3s;
   box-sizing: border-box;
@@ -110,11 +123,11 @@ function onSelect(item: { label: string; value: any }) {
   flex: 1;
   box-shadow: none;
   box-sizing: border-box;
-  border-radius: 5;
+  font: unset;
+  border-radius: 5px;
   font-family: inherit;
   color: var(--dev-tool-text-color);
   font-weight: 400;
-  font: unset;
   height: 24px;
   line-height: 24px;
   transition: color 0.3s;
@@ -134,14 +147,14 @@ function onSelect(item: { label: string; value: any }) {
 }
 
 .filter-select-list {
-  z-index: 9999;
-  position: absolute;
-  top: 24px;
-  left: 0;
   max-height: 300px;
   width: 100%;
   overflow: auto;
   background-color: var(--dev-tool-bg2-color);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  border: 1px solid var(--dev-tool-border-color);
+  border-radius: 4px;
+  margin-top: 4px;
 }
 
 .filter-select-item {

package/dist/v3/Instance/components/InstanceTreeNode.vue

@@ -0,0 +1,265 @@
+<template>
+  <view
+    class="instance-tree-node"
+    :class="{ 'is-active': isActive }"
+    @click="$emit('select', node)">
+    <template v-if="showLine">
+      <view
+        v-for="i in node.level"
+        :key="i"
+        class="instance-tree-indent"></view>
+    </template>
+
+    <!-- 展开/收起 图标 -->
+    <view
+      v-if="node.isStartNode && node.hasChildren"
+      class="instance-tree-toggle"
+      :class="{ 'is-collapsed': node.isCollapsed }"
+      @click.stop="node.uid !== undefined && $emit('toggle', node.uid)">
+      <!-- 更加圆润的 SVG 箭头 -->
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M9 18L15 12L9 6"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round" />
+      </svg>
+    </view>
+    <view
+      v-else-if="node.isStartNode"
+      class="instance-tree-toggle-placeholder"></view>
+
+    <!-- 节点主体 (开始标签 或 文本内容 或 注释) -->
+    <view
+      v-if="node.isStartNode"
+      class="instance-tree-tag-inline"
+      @click="$emit('select', node)">
+      <template v-if="node.type === 'v-cmt'">
+        <text class="instance-tree-comment">
+          {{ CMT_START }} {{ node.inlineContent || node?.content || '' }}
+        </text>
+        <text v-if="node.isInline" class="instance-tree-comment">
+          {{ CMT_END }}
+        </text>
+      </template>
+      <template v-else>
+        <text class="instance-tree-bracket">{{ LT }}</text>
+        <text class="instance-tree-tag">{{ node.type }}</text>
+
+        <!-- 渲染属性：id, style (来自 styles) -->
+        <!-- <template v-if="node.styles">
+          <block v-for="(val, key) in node.styles" :key="key">
+            <template v-if="['id', 'style'].includes(key)">
+              &nbsp;&nbsp;
+              <text class="instance-tree-attr-key">{{ key }}</text>
+              <text class="instance-tree-bracket">=</text>
+              <text class="instance-tree-attr-value">"{{ val }}"</text>
+            </template>
+          </block>
+        </template> -->
+
+        <!-- 渲染 class (来自 props) 以及 data- 属性 -->
+        <!-- <template v-if="node.props">
+          <block v-for="(val, key) in node.props" :key="key">
+            <template v-if="!key.startsWith('data-v-')">
+              &nbsp;&nbsp;
+              <text class="instance-tree-attr-key">{{ key }}</text>
+              <text class="instance-tree-bracket">=</text>
+              <text class="instance-tree-attr-value">"{{ val }}"</text>
+            </template>
+          </block>
+        </template> -->
+
+        <!-- 如果没有子节点且非内联（无内容），显示自闭合 -->
+        <template v-if="!node.hasChildren && !node.isInline">
+          <text class="instance-tree-bracket">{{ ST }}</text>
+        </template>
+
+        <template v-else>
+          <text class="instance-tree-bracket">{{ GT }}</text>
+
+          <!-- 如果收起了，显示 ... 及 闭合标签 -->
+          <template v-if="node.isCollapsed">
+            <text class="instance-tree-content">...</text>
+            <text class="instance-tree-bracket">{{ LT }}/</text>
+            <text class="instance-tree-tag">{{ node.type }}</text>
+            <text class="instance-tree-bracket">{{ GT }}</text>
+          </template>
+
+          <!-- 如果是空标签 (Optionally keep for compat, but !hasChildren covers most) -->
+          <template v-else-if="node.isEmptyTag">
+            <text class="instance-tree-bracket">{{ LT }}/</text>
+            <text class="instance-tree-tag">{{ node.type }}</text>
+            <text class="instance-tree-bracket">{{ GT }}</text>
+          </template>
+
+          <!-- 如果是内联文本 -->
+          <template v-else-if="node.isInline">
+            <text class="instance-tree-text-content">
+              {{ node.inlineContent }}
+            </text>
+            <view class="instance-tree-tag-inline">
+              <text class="instance-tree-bracket">{{ LT }}/</text>
+              <text class="instance-tree-tag">{{ node.type }}</text>
+              <text class="instance-tree-bracket">{{ GT }}</text>
+            </view>
+          </template>
+        </template>
+      </template>
+    </view>
+
+    <!-- 内容 -->
+    <view v-if="node.isContentNode" class="instance-tree-content">
+      <text v-if="node.type === 'v-cmt'" class="instance-tree-comment">
+        {{ node?.content }}
+      </text>
+      <text v-else>{{ node?.content }}</text>
+    </view>
+
+    <!-- 结束标签 -->
+    <view v-if="node.isEndNode" class="instance-tree-node-end">
+      <view
+        v-if="node.hasChildren"
+        class="instance-tree-toggle-placeholder"></view>
+      <template v-if="node.type === 'v-cmt'">
+        <text class="instance-tree-comment">{{ CMT_END }}</text>
+      </template>
+      <template v-else>
+        <view class="instance-tree-tag-inline">
+          <text class="instance-tree-bracket">{{ LT }}/</text>
+          <text class="instance-tree-tag">{{ node.type }}</text>
+          <text class="instance-tree-bracket">{{ GT }}</text>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+const CMT_START = '<!--';
+const CMT_END = '-->';
+const LT = '<';
+const GT = '>';
+const ST = '/>';
+
+const _props = defineProps<{
+  node: InstanceTree.FlattenedNodeWithEnd;
+  showLine?: boolean;
+  isActive?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'toggle', uid: string | number): void;
+  (e: 'select', node: any): void;
+}>();
+</script>
+<style scoped>
+.instance-tree-node {
+  display: flex;
+  align-items: center;
+  line-height: 20px;
+  font-size: 12px;
+  min-width: 100%;
+  width: fit-content;
+  box-sizing: border-box;
+}
+
+.instance-tree-node.is-active {
+  background-color: var(--dev-tool-selection-bg-color, rgb(55 148 255 / 23%));
+}
+
+.instance-tree-indent {
+  flex-shrink: 0;
+  width: 18px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.instance-tree-tag-inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.has-line {
+  border-left: 1px solid var(--dev-tool-border-color);
+}
+
+.instance-tree-bracket {
+  color: var(--dev-tool-bracket-color);
+}
+
+.instance-tree-content {
+  white-space: nowrap;
+  flex: 1; /* 占据剩余空间，配合 align-items */
+}
+
+.instance-tree-cmt {
+  white-space: nowrap;
+  color: var(--dev-tool-note-color);
+}
+
+.instance-tree-node-end {
+  display: flex;
+  align-items: center;
+}
+
+.instance-tree-tag {
+  white-space: nowrap;
+  color: var(--dev-tool-keyword-color);
+}
+
+.instance-tree-text-content {
+  color: var(--dev-tool-text-color, #333);
+  white-space: pre;
+}
+
+.instance-tree-comment {
+  color: var(--dev-tool-comment-color, #6a9955);
+  white-space: pre;
+  font-style: italic;
+}
+
+.instance-tree-attr-key {
+  color: var(--dev-tool-attr-key-color, #9cdcfe);
+  white-space: nowrap;
+}
+
+.instance-tree-attr-value {
+  color: var(--dev-tool-attr-value-color, #ce9178);
+  white-space: nowrap;
+}
+
+.instance-tree-toggle {
+  flex-shrink: 0;
+  width: 14px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s;
+  transform: rotate(90deg); /* 默认展开 */
+}
+
+.instance-tree-toggle.is-collapsed {
+  transform: rotate(0deg);
+}
+
+.instance-tree-toggle-placeholder {
+  flex-shrink: 0;
+  width: 14px;
+  height: 20px;
+}
+
+.instance-tree-arrow {
+  font-size: 16px;
+  color: var(--dev-tool-text-color-secondary, #888);
+  margin-top: -1px; /* 修正符号重心偏移 */
+}
+</style>

package/dist/v3/Instance/flatten.ts

@@ -0,0 +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;
+}