图形库

src/services/common.ts

@@ -9,7 +9,6 @@ import { noLoginTip, localStorageName } from '@/services/utils';
 import { upload, dataURLtoBlob } from '@/services/file';
 import { delImage, addCollection, updateCollection } from '@/services/api';
 import { baseVer } from '@/services/upgrade';
-import dayjs from 'dayjs';
 
 const dot = ref(false);
 
@@ -116,7 +115,6 @@ export const save = async (
   !data.version && (data.version = baseVer);
   if (!data.folder) {
     data.folder = '大屏';
-    data.tags = ['大屏'];
   }
   if (type === SaveType.SaveAs) {
     // 另存为一定走 新增 ，由于后端 未控制 userId 等属性，清空一下
@@ -417,3 +415,23 @@ export const fonts = [
   'Segoe UI Emoji',
   'Segoe UI Symbol',
 ];
+
+export const delAttrs = [
+  'userId',
+  'shared',
+  'team',
+  'owner',
+  'username',
+  'editor',
+  'editorId',
+  'editorName',
+  'createdAt',
+  'folder',
+  'image',
+  'id',
+  '_id',
+  'view',
+  'updatedAt',
+  'star',
+  'recommend',
+];

src/services/file.ts

@@ -1,26 +1,26 @@
-import axios from "axios";
+import axios from 'axios';
 
 export async function upload(
   blob: Blob,
   shared = false,
-  filename = "thumb.png",
-  directory = "/2D/缩略图"
+  filename = 'thumb.png',
+  directory = '/2D/缩略图'
 ) {
   const form = new FormData();
-  form.append("filename", filename);
-  form.append("directory", directory);
-  form.append("public", shared + "");
-  form.append("file", blob);
-  const ret: any = await axios.post("/api/image/upload", form);
-  if (ret.error) {
-    return null;
+  form.append('filename', filename);
+  form.append('directory', directory);
+  form.append('public', shared + '');
+  form.append('file', blob);
+  const ret: any = await axios.post('/api/image/upload', form);
+  if (!ret) {
+    return;
   }
 
   return ret;
 }
 
 export async function delImage(image: string) {
-  const ret: any = await axios.delete("/api" + image);
+  const ret: any = await axios.delete('/api' + image);
   if (ret.error) {
     return false;
   }
@@ -29,20 +29,20 @@ export async function delImage(image: string) {
 }
 
 export async function addImage(image: string) {
-  const ret: any = await axios.post("/api/user/image", { image });
+  const ret: any = await axios.post('/api/user/image', { image });
   if (ret.error) {
-    return "";
+    return '';
   }
 
   return ret.id;
 }
 
 export function filename(str: string) {
-  const i = str.lastIndexOf(".");
+  const i = str.lastIndexOf('.');
   return str.substring(0, i);
 }
 
-const units = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 export function formatBytes(size: number) {
   let l = 0;
   let n = size / 1024;
@@ -51,7 +51,7 @@ export function formatBytes(size: number) {
     n = n / 1024;
   }
 
-  return Math.round(n * 100) / 100 + " " + units[l];
+  return Math.round(n * 100) / 100 + ' ' + units[l];
 }
 
 /**
@@ -71,7 +71,7 @@ export async function readFile(file: Blob) {
 }
 
 export function dataURLtoBlob(base64: string) {
-  let arr: any = base64.split(","),
+  let arr: any = base64.split(','),
     mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]),
     n = bstr.length,
@@ -87,12 +87,12 @@ export function dataURLtoBlob(base64: string) {
  * @param img 图片
  */
 export function saveToBlob(img: HTMLImageElement): Blob {
-  const canvas: HTMLCanvasElement = document.createElement("canvas");
-  canvas.setAttribute("origin-clean", "false");
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
+  canvas.setAttribute('origin-clean', 'false');
   canvas.width = img.width;
   canvas.height = img.height;
 
-  const context: any = canvas.getContext("2d");
+  const context: any = canvas.getContext('2d');
   context.filter = window.getComputedStyle(img).filter;
   context.drawImage(img, 0, 0, canvas.width, canvas.height);
   return dataURLtoBlob(canvas.toDataURL());

src/views/components/Graphics.vue

@@ -26,25 +26,22 @@
             :key="item.name"
           >
             <div
-              class="show-item"
-              v-for="subItem in item.list"
+              class="graphic"
+              v-for="elem in item.list"
               :draggable="!groupType || groupType >= 10"
-              @dragstart="dragStart($event, subItem)"
-              @drag="drag($event, subItem)"
+              @dragstart="dragStart($event, elem)"
+              @drag="drag($event, elem)"
               @dragend="dragEnd()"
-              @click.stop="dragStart($event, subItem)"
-              @dblclick.stop="open(subItem)"
+              @click.stop="dragStart($event, elem)"
+              @dblclick.stop="open(elem)"
             >
-              <t-image v-if="subItem.image" :src="subItem.image" fit="cover" />
-              <div
-                class="svg-box"
-                v-else-if="subItem.svg"
-                v-html="subItem.svg"
-              />
+              <t-image v-if="elem.image" :src="elem.image" fit="cover" />
+              <div class="svg-box" v-else-if="elem.svg" v-html="elem.svg" />
               <svg v-else class="l-icon" aria-hidden="true">
-                <use :xlink:href="'#' + subItem.icon"></use>
+                <use :xlink:href="'#' + elem.icon"></use>
               </svg>
-              <p :title="subItem.name">{{ subItem.name }}</p>
+              <p :title="elem.name">{{ elem.name }}</p>
+              <div class="price" v-if="elem.price > 0">￥{{ elem.price }}</div>
             </div>
             <div
               v-if="!item.list || !item.list.length"
@@ -67,11 +64,11 @@ import axios from 'axios';
 import { cases, shapes, charts, formComponents } from '@/services/defaults';
 import { getPngFolders, getPngs } from '@/services/png';
 import { getIconFolders, getIcons } from '@/services/icons';
-import { getComponents, getComponentsList } from '@/services/api';
+import { getComponents, getComponentsList, getLe5leV } from '@/services/api';
 import { convertPen } from '@/services/upgrade';
 import { deepClone } from '@meta2d/core';
 import { isGif } from '@/services/utils';
-import { autoSave } from '@/services/common';
+import { autoSave, delAttrs } from '@/services/common';
 
 const activedGroup = ref('图形');
 
@@ -187,7 +184,7 @@ const getCaseProjects = async (name: string, group: string) => {
     {
       query: { tags: name, case: group },
       shared: 'true',
-      projection: { _id: 1, name: 1, image: 1 },
+      projection: { _id: 1, name: 1, image: 1, price: 1 },
     }
   );
 
@@ -331,9 +328,14 @@ const dragend = (event: any) => {
   event.target.style.opacity = 1;
 };
 
-const open = (item: any) => {
-  console.log(item);
+const open = async (item: any) => {
   autoSave();
+
+  const ret: any = await getLe5leV(item._id || item.id);
+  for (const k of delAttrs) {
+    delete (ret as any)[k];
+  }
+  meta2d.open(ret);
 };
 
 onMounted(() => {
@@ -424,7 +426,9 @@ onUnmounted(() => {
         grid-template-columns: 1fr 1fr 1fr;
         grid-row-gap: 20px;
       }
-      .show-item {
+      .graphic {
+        position: relative;
+
         &:hover {
           cursor: pointer;
           color: var(--color-primary-hover);
@@ -477,6 +481,20 @@ onUnmounted(() => {
             }
           }
         }
+
+        .price {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          display: inline-block;
+          z-index: 1;
+          border-radius: 2px;
+          background-color: #ff400060;
+          color: var(--color-bland);
+          font-size: 10px;
+          line-height: 1;
+          padding: 3px;
+        }
       }
     }
 
@@ -485,7 +503,7 @@ onUnmounted(() => {
         padding: 8px;
         grid-template-columns: 116px 116px;
       }
-      .show-item {
+      .graphic {
         p {
           margin-top: 10px;
           margin-bottom: 12px;

src/views/components/Header.vue

@@ -294,7 +294,7 @@ import JSZip from 'jszip';
 import axios from 'axios';
 import { switchTheme } from '@/services/theme';
 import { noLoginTip } from '@/services/utils';
-import { useDot, autoSave } from '@/services/common';
+import { useDot, autoSave, delAttrs } from '@/services/common';
 import {
   save,
   newFile,
@@ -304,7 +304,6 @@ import {
   showMagnifier,
   showMap,
   newfile,
-  title,
   drawPen,
   map,
   magnifier,
@@ -428,25 +427,6 @@ const openJson = async (file: File) => {
       data = upgrade(data, baseVer);
     }
     dealwithFormatbeforeOpen(data);
-    const delAttrs = [
-      'userId',
-      'shared',
-      'team',
-      'owner',
-      'username',
-      'editor',
-      'editorId',
-      'editorName',
-      'createdAt',
-      'folder',
-      'image',
-      'id',
-      '_id',
-      'view',
-      'updatedAt',
-      'star',
-      'recommend',
-    ];
     for (const k of delAttrs) {
       delete (data as any)[k];
     }