feat:elementTree-tag

src/services/common.ts

@@ -11,7 +11,7 @@ import { upload, dataURLtoBlob } from '@/services/file';
 import { delImage, addCollection, updateCollection } from '@/services/api';
 import { baseVer } from '@/services/upgrade';
 import { debounce } from './debouce';
-import { deepClone } from '@meta2d/core';
+import { deepClone, isDomShapes } from '@meta2d/core';
 
 const assets = reactive({
   home: 'https://le5le.com',
@@ -553,12 +553,30 @@ const calcElem = (node: any) => {
   if (!node) {
     return;
   }
-
+  let tag = '中';
+  if (
+    isDomShapes.includes(node.name) ||
+    node.name.endsWith('Dom') ||
+    meta2d.store.options.domShapes.includes(node.name)
+  ) {
+    tag = 'dom';
+  } else if (node.template) {
+    tag = '模板';
+  } else if (node.name === 'image') {
+    if (node.isBottom) {
+      tag = '下层';
+    } else {
+      tag = '上层';
+    }
+  } else {
+    tag = '中层';
+  }
   const elem: any = {
     label: (node as any).description || node.name,
     value: node.id,
     locked: node.locked,
     visible: node.visible,
+    tag,
   };
 
   if (!node.children) {

src/views/components/ElementTree.vue

@@ -41,6 +41,9 @@
           }"
           style="width: 36px; height: 16px"
         >
+          <t-tag theme="primary" variant="light-outline">
+            {{ node.data.tag }}</t-tag
+          >
           <t-tooltip
             class="mr-4"
             v-if="!node.data.locked"
@@ -237,6 +240,7 @@ const calcElem = (node: Pen) => {
     value: node.id,
     locked: node.locked,
     visible: node.visible,
+    tag: (node as any).tag,
   };
 
   if (!node.children) {
@@ -396,6 +400,19 @@ onBeforeUnmount(() => {
     overflow-y: auto;
     width: 100%;
   }
+  .t-tree {
+    .t-tag {
+      background-color: #4583ff33;
+      position: absolute;
+      right: 45px;
+      width: 45.6px;
+      height: 21.6px;
+      font-size: 10px;
+      line-height: 14px;
+      transform: scale(0.83333);
+      transform-origin: 0 0;
+    }
+  }
 
   .groups-panel {
     flex-shrink: 0;