Merge branch 'main' of github.com:le5le-com/visualization-design

src/services/common.ts

@@ -176,21 +176,6 @@ export const save = async (
   }
   if (type === SaveType.SaveAs) {
     // 另存为一定走 新增 ，由于后端 未控制 userId 等属性，清空一下
-    const delAttrs = [
-      'userId',
-      '_id',
-      'id',
-      'shared',
-      'star',
-      'view',
-      'username',
-      'editorName',
-      'editorId',
-      'createdAt',
-      'updatedAt',
-      'recommend',
-      'team',
-    ];
     for (const k of delAttrs) {
       delete (data as any)[k];
     }
@@ -376,6 +361,11 @@ export const newFile = () => {
   }, 300);
 };
 
+export const inTreePanel = reactive({
+  value: false,
+  timer: undefined,
+});
+
 const tree = reactive({
   list: [],
   patch: true,
@@ -481,7 +471,7 @@ export const delAttrs = [
   'editorId',
   'editorName',
   'createdAt',
-  'folder',
+  'tags',
   'image',
   'id',
   '_id',

src/views/components/ElementTree.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="elements">
     <div class="title" style="margin: 8px 0 0 12px">视图结构</div>
+
     <t-tree
       class="flex-grow"
       ref="tree"
@@ -142,7 +143,7 @@ import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 import { LockState, Pen } from '@meta2d/core';
-import { getPenTree, setChildrenVisible } from '@/services/common';
+import { getPenTree, inTreePanel, setChildrenVisible } from '@/services/common';
 
 const tree = ref<any>(null);
 const data = reactive<any>({
@@ -158,8 +159,16 @@ onBeforeMount(() => {
   meta2d.on('redo', getTree);
   meta2d.on('delete', getTree);
   meta2d.on('combine', getTree);
+  meta2d.on('click', getActived);
+
+  if (inTreePanel.timer) {
+    clearTimeout(inTreePanel.timer);
+    inTreePanel.timer = undefined;
+  }
+  inTreePanel.value = true;
 
   getTree();
+  getActived();
 
   const d = meta2d.store.data as any;
   if (!d.groups) {
@@ -172,6 +181,15 @@ const getTree = () => {
   data.tree = getPenTree();
 };
 
+const getActived = () => {
+  data.actived = [];
+  if (meta2d.store.active) {
+    for (const pen of meta2d.store.active) {
+      data.actived.push(pen.id);
+    }
+  }
+};
+
 const calcElem = (node: Pen) => {
   if (!node) {
     return;
@@ -300,6 +318,11 @@ onBeforeUnmount(() => {
   meta2d.off('redo', getTree);
   meta2d.off('delete', getTree);
   meta2d.off('combine', getTree);
+  meta2d.on('click', getActived);
+
+  inTreePanel.timer = setTimeout(() => {
+    inTreePanel.value = false;
+  }, 1000);
 });
 </script>
 <style lang="postcss" scoped>

src/views/components/FileProps.vue

@@ -242,7 +242,7 @@ import { useUser } from '@/services/user';
 import { getCookie } from '@/services/cookie';
 import ElementTree from './ElementTree.vue';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
-import { autoSave, useAssets } from '@/services/common';
+import { autoSave, inTreePanel, useAssets } from '@/services/common';
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const headers = {
@@ -349,6 +349,9 @@ const changeValue = (e: any, key: string) => {
 };
 
 onMounted(() => {
+  if (inTreePanel.value) {
+    data.tab = 2;
+  }
   openData();
   meta2d.on('opened', openData);
 });

src/views/components/Graphics.vue

@@ -413,7 +413,15 @@ const getCaseProjects = async (name: string, current = 1, pageSize = 1000) => {
     {
       query,
       shared: 'true',
-      projection: { id: 1, _id: 1, name: 1, image: 1, price: 1, case: 1 },
+      projection: {
+        id: 1,
+        _id: 1,
+        name: 1,
+        image: 1,
+        price: 1,
+        case: 1,
+      },
+      sort: { createdAt: 1 },
     },
     {
       params: {
@@ -1172,7 +1180,7 @@ onUnmounted(() => {
         }
         p {
           margin-top: 10px;
-          padding: 0 10px;
+          padding: 0 8px;
           text-align: center;
           font-size: 12px;
           height: 12px;

src/views/components/PenProps.vue

@@ -1002,6 +1002,9 @@
       <t-tab-panel :value="4" label="交互">
         <PenEvents :pen="data.pen" />
       </t-tab-panel>
+      <t-tab-panel :value="5" label="结构">
+        <ElementTree />
+      </t-tab-panel>
     </t-tabs>
   </div>
 </template>
@@ -1014,10 +1017,11 @@ import Iconfonts from './common/Iconfonts.vue';
 import PenAnimates from './PenAnimates.vue';
 import PenDatas from './PenDatas.vue';
 import PenEvents from './PenEvents.vue';
+import ElementTree from './ElementTree.vue';
 
 import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
-import { autoSave, fonts } from '@/services/common';
+import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 
 const headers = {
@@ -1044,6 +1048,9 @@ const iconsDrawer = reactive<any>({
 });
 
 onBeforeMount(() => {
+  if (inTreePanel.value) {
+    data.tab = 5;
+  }
   const d = meta2d.store.data as any;
   if (!d.groups) {
     d.groups = [];