feat:iframe-thumbImg

src/services/api.ts

@@ -55,9 +55,10 @@ export async function getCollectionList(
   return await axios.post(`/api/data/${collection}/list`, data, config);
 }
 
-export async function getLe5leV(id: string) {
+export async function getLe5leV(id: string, projection?: any) {
   return await axios.post('/api/data/le5leV/get', {
     id,
+    projection,
   });
 }
 
@@ -71,12 +72,20 @@ export async function getComponentsList(data: any, config: any) {
   return await axios.post('/api/data/le5leV-components/list', data, config);
 }
 
-export async function getLe5le3d(id: string) {
+export async function getLe5le3d(id: string, projection?: any) {
   return await axios.post(`/api/data/le5le3d/get`, {
     id,
+    projection,
   });
 }
 
 export async function getProjectsList(data: any, config: any) {
   return await axios.post('/api/data/le5leV/list', data, config);
 }
+
+export async function getLe5le2d(id: string, projection?: any) {
+  return await axios.post('/api/data/le5le2d/get', {
+    id,
+    projection,
+  });
+}

src/views/components/Graphics.vue

@@ -292,6 +292,7 @@ import WechatPay from './WechatPay.vue';
 import { filename } from '@/services/file';
 import { useUser } from '@/services/user';
 import { iframeCustom } from '@/services/defaults';
+import { getLe5le3d } from '@/services/api';
 
 const { user } = useUser();
 const { setFolder, getFolder } = useFolder();
@@ -842,6 +843,11 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
     //方案
     data = item.data || item;
   } else if (item['3d']) {
+    const res: any = await getLe5le3d(item._id || item.id, {
+      image: 1,
+      _id: 1,
+      name: 1,
+    });
     data = {
       name: 'iframe',
       x: 0,
@@ -860,6 +866,7 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
       width: meta2d.store.data.width || meta2d.store.options.width,
       height: meta2d.store.data.height || meta2d.store.options.height,
       externElement: true,
+      thumbImg: res.image,
       iframe: 'https://view3d.le5le.com/?id=' + (item._id || item.id),
     };
   } else if (item.component) {
@@ -1258,7 +1265,25 @@ const onMenu = async (val: string) => {
         return;
       }
       // 前端: 添加组件到目标文件夹
-      group.list.push(contextmenu.component);
+      let data: any;
+      if (contextmenu.component.component) {
+        data = {
+          component: true,
+          image: contextmenu.component.image,
+          name: contextmenu.component.name,
+          visible: true,
+          _id: contextmenu.component._id || contextmenu.component.id,
+        };
+      } else {
+        data = {
+          image: contextmenu.component.image,
+          name: contextmenu.component.name,
+          tags: contextmenu.component.tags,
+          visible: true,
+          _id: contextmenu.component._id || contextmenu.component.id,
+        };
+      }
+      group.list.push(data);
       // 前端：从源文件夹移出组件
       contextmenu.group.list.forEach((item: any, index: number, arr: any[]) => {
         if (id === item._id || id === item.id) {

src/views/components/PenProps.vue

@@ -1159,8 +1159,9 @@ import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { useUser } from '@/services/user';
-import { getter } from '@meta2d/core';
+import { getter, queryURLParams } from '@meta2d/core';
 import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
+import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
 
 const { user } = useUser();
 const headers = {
@@ -1317,6 +1318,34 @@ const decimalRound = (val: number) => {
 const changeValue = (prop: string) => {
   updatePen(data.pen, prop);
   selections.pen[prop] = getter(data.pen, prop);
+  if (prop === 'iframe') {
+    getThumbImg();
+  }
+};
+
+const getThumbImg = async () => {
+  //改iframe地址后
+  let arr = data.pen.iframe.split('?');
+  let id = queryURLParams(arr[1]).id;
+  if (!id) {
+    return;
+  }
+  let projection = {
+    image: 1,
+    _id: 1,
+    name: 1,
+  };
+  let res: any;
+  if (arr[0].indexOf('2d.le5le') !== -1) {
+    res = await getLe5le2d(id, projection);
+  } else if (arr[0].indexOf('v.le5le') !== -1) {
+    res = await getLe5leV(id, projection);
+  } else if (arr[0].indexOf('3d.le5le') !== -1) {
+    res = await getLe5le3d(id, projection);
+  }
+  if (res) {
+    data.pen.thumbImg = res.image;
+  }
 };
 
 const changeID = (value: any) => {