vite-uni-dev-tool 1.1.0 → 1.2.0

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

@@ -1,265 +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>
+<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>