perfect_save

src/services/common.ts

@@ -8,6 +8,7 @@ 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);
 
@@ -41,7 +42,8 @@ export enum SaveType {
 }
 export const save = async (
   type: SaveType = SaveType.Save,
-  component?: boolean
+  component?: boolean,
+  flag: boolean = false
 ) => {
   meta2d.stopAnimate();
   const data: Meta2dBackData = meta2d.data();
@@ -92,7 +94,7 @@ export const save = async (
     (meta2d.store.data as Meta2dBackData).image = data.image;
   }
 
-  if (component) {
+  if (data.component || component) {
     data.component = true;
     // pens 存储原数据用于二次编辑 ； componentDatas 组合后的数据，用于复用
     data.componentDatas = meta2d.toComponent(
@@ -152,8 +154,7 @@ export const save = async (
   }
 
   //  保存图纸之后的钩子函数
-  (window as any).afterSaveMeta2d &&
-    (await (window as any).afterSaveMeta2d(ret));
+  globalThis.afterSaveMeta2d && (await globalThis.afterSaveMeta2d(ret));
   if (
     !data._id ||
     data.owner?.id !== user.id ||
@@ -172,14 +173,12 @@ export const save = async (
     });
   }
 
-  MessagePlugin.success('保存成功！');
-  // 保存成功，重新请求文件夹
-  meta2d.emit('t-save-success', true);
-  // 已保存，不再是新的，无需提示保存
+  flag && MessagePlugin.success('保存成功！');
   dot.value = false;
   localforage.removeItem(localStorageName);
   return true;
 };
+
 const pen = ref(false);
 export const drawPen = () => {
   meta2d.inactive();
@@ -242,29 +241,33 @@ export const unsave = '当前文件未保存，是否继续？（开通vip可享
 //未登录，当前文件可能不会保存
 //
 export const newFile = async () => {
-  notificFn(newfile, true);
-  // if (!(user && user.id)) {
-  //   if (await showNotification(unLogin)) {
-  //     newfile(false);
-  //   }
-  // } else {
-  //   if (dot.value) {
-  //     if (!user.vipExpired) {
-  //       if (await save(SaveType.Save)) {
-  //         //TODO 保存报错了需要save吗
-  //         newfile(false);
-  //       }
-  //     } else {
-  //       if (await showNotification(unsave)) {
-  //         newfile(false);
-  //       }
-  //     }
-  //   } else {
-  //     newfile(false);
-  //   }
-  // }
+  autoSave();
+  setTimeout(() => {
+    newfile();
+  }, 1000);
 };
 
+export function autoSave() {
+  if (!dot.value) {
+    return;
+  }
+  const data: any = meta2d.data();
+  if (
+    user &&
+    user.id &&
+    user.isVip &&
+    data._id &&
+    !data.component &&
+    data.owner &&
+    data.owner.id === user.id
+  ) {
+    save(SaveType.Save);
+  } else {
+    data.updateAt = dayjs().format();
+    localforage.setItem(localStorageName, JSON.stringify(data));
+  }
+}
+
 export const notificFn = async (fn: Function, params: any) => {
   if (!(user && user.id)) {
     if (await showNotification(unLogin)) {
@@ -272,7 +275,7 @@ export const notificFn = async (fn: Function, params: any) => {
     }
   } else {
     if (dot.value) {
-      if (!user.vipExpired) {
+      if (!user.isVip) {
         if (await save(SaveType.Save)) {
           //TODO 保存报错了需要save吗
           // newfile(false);

src/views/components/ContextMenu.vue

@@ -170,7 +170,6 @@ function choosePens(): boolean {
 }
 
 function layerMove(type: 'top' | 'bottom' | 'up' | 'down') {
-  console.log('layer');
   const pens = meta2d.store.active;
   if (hasImage()) {
     if (type === 'top') {

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, notificFn } from '@/services/common';
+import { useDot, autoSave } from '@/services/common';
 import {
   save,
   newFile,
@@ -400,14 +400,14 @@ function load(newT: boolean = false) {
       newT && newfile(true);
       // 路由跳转 可能在 openFile 后执行
       if (elem.files[0].name.endsWith('.json')) {
-        openJson(elem.files[0], newT);
+        openJson(elem.files[0]);
       } else if (elem.files[0].name.endsWith('.svg')) {
         MessagePlugin.info(
           '可二次编辑但转换存在损失，若作为图片使用，请使用右侧属性面板的上传图片功能'
         );
         openSvg(elem.files[0]);
       } else if (elem.files[0].name.endsWith('.zip')) {
-        openZip(elem.files[0], newT);
+        openZip(elem.files[0]);
       } else {
         MessagePlugin.info('打开文件只支持 json，svg，zip 格式');
       }
@@ -416,7 +416,7 @@ function load(newT: boolean = false) {
   input.click();
 }
 
-const openJson = async (file: File, isNew: boolean = false) => {
+const openJson = async (file: File) => {
   const text = await readFile(file);
   try {
     let data: Meta2dBackData = JSON.parse(text);
@@ -428,17 +428,28 @@ const openJson = async (file: File, isNew: boolean = false) => {
       data = upgrade(data, baseVer);
     }
     dealwithFormatbeforeOpen(data);
-    data._id = undefined;
-    if (!isNew) {
-      delete data.owner;
-      delete data.editor;
-      delete data.username;
-      delete data.editorId;
-      delete data.editorName;
+    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];
     }
-    // if (!(window as any).meta2dFolder?.includes(data.folder)) {
-    //   delete data.folder;
-    // }
     meta2d.open(data);
   } catch (e) {
     console.log(e);
@@ -452,13 +463,13 @@ const openSvg = async (file: File) => {
   MessagePlugin.info('svg转换成功，请点击画布决定放置位置');
 };
 
-const openZip = async (file: File, isNew: boolean = false) => {
+const openZip = async (file: File) => {
   if (!(user && user.id)) {
     MessagePlugin.warning(noLoginTip);
     return;
   }
 
-  if (user.vipExpired) {
+  if (user.isVip) {
     // vipVisible.value = true;
     gotoAccount();
     return;
@@ -561,16 +572,27 @@ const openZip = async (file: File, isNew: boolean = false) => {
         data = upgrade(data, baseVer);
       }
       dealwithFormatbeforeOpen(data);
-      data._id = undefined;
-      if (!isNew) {
-        delete data.owner;
-        delete data.editor;
-        delete data.username;
-        delete data.editorId;
-        delete data.editorName;
-      }
-      if (!(window as any).meta2dFolder?.includes(data.folder)) {
-        delete data.folder;
+      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];
       }
       meta2d.open(data);
     }
@@ -580,15 +602,10 @@ const openZip = async (file: File, isNew: boolean = false) => {
 };
 
 async function loadFile(newT: boolean = false) {
-  // if (dot.value) {
-  //   if (await showNotification(title)) {
-  //     load(newT);
-  //   }
-  // } else {
-  //   load(newT);
-  // }
-  //默认 导入新建项目
-  notificFn(load, newT);
+  autoSave();
+  setTimeout(() => {
+    load(newT);
+  }, 1000);
 }
 
 async function openFile() {
@@ -618,7 +635,7 @@ const downloadZip = async () => {
     return;
   }
 
-  if (user.vipExpired) {
+  if (!user.isVip) {
     gotoAccount();
     return;
   }
@@ -653,7 +670,7 @@ const downloadHtml = async () => {
     return;
   }
 
-  if (user.vipExpired) {
+  if (!user.isVip) {
     gotoAccount();
     return;
   }
@@ -707,7 +724,7 @@ async function downloadAsFrame(type: Frame) {
     return;
   }
 
-  if (user.vipExpired) {
+  if (!user.isVip) {
     gotoAccount();
     return;
   }

src/views/components/View.vue

@@ -4,14 +4,32 @@
       <t-tooltip content="新建" placement="bottom">
         <a><t-icon name="add" @click="newFile" /></a>
       </t-tooltip>
-      <t-tooltip content="保存" placement="bottom">
+      <t-tooltip content="保存为大屏" placement="bottom">
         <a>
-          <t-badge dot :showZero="false" :count="dot ? 1 : 0">
-            <t-icon name="save" @click="save(SaveType.Save)" /></t-badge
+          <t-badge
+            :style="{
+              color: canSave ? '' : '#4f5b75',
+              cursor: canSave ? '' : 'not-allowed',
+            }"
+            dot
+            :showZero="false"
+            :count="dot ? 1 : 0"
+          >
+            <t-icon
+              name="save"
+              @click="canSave && save(SaveType.Save, false, true)" /></t-badge
         ></a>
       </t-tooltip>
       <t-tooltip content="保存为我的组件" placement="bottom">
-        <a><t-icon name="layers" @click="save(SaveType.Save, true)" /></a>
+        <a
+          :style="{
+            color: canSaveComponent ? '' : '#4f5b75',
+            cursor: canSaveComponent ? '' : 'not-allowed',
+          }"
+          ><t-icon
+            name="layers"
+            @click="canSaveComponent && save(SaveType.Save, true, true)"
+        /></a>
       </t-tooltip>
       <t-tooltip content="格式化（双击可连续使用）" placement="bottom">
         <a
@@ -642,7 +660,8 @@ const publishChargeDialog = reactive<any>({});
 onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
-  open();
+  open(true);
+  saveStatusChange();
   // @ts-ignore
   meta2d.on('active', active);
   // @ts-ignore
@@ -677,7 +696,7 @@ onMounted(() => {
     if (
       user &&
       user.id &&
-      !user.vipExpired &&
+      !user.isVip &&
       data._id &&
       !data.component &&
       data.owner &&
@@ -695,10 +714,29 @@ const watcher = watch(
   () => route.query,
   async () => {
     open();
+    saveStatusChange();
   }
 );
 
-const open = async () => {
+const canSave = ref(true);
+const canSaveComponent = ref(true);
+
+const saveStatusChange = () => {
+  if (route.query.id) {
+    if (route.query.component === 'true') {
+      canSave.value = false;
+    } else if (route.query.component === 'false') {
+      canSaveComponent.value = false;
+    } else {
+      canSaveComponent.value = false;
+    }
+  } else {
+    canSave.value = true;
+    canSaveComponent.value = true;
+  }
+};
+
+const open = async (flag: boolean = false) => {
   if (route.query.id) {
     const ret: any = await getLe5leV(route.query.id + '');
     if (ret) {
@@ -711,9 +749,13 @@ const open = async () => {
       qrcode.url = qr;
     }
   } else {
-    const data: string = await localforage.getItem(localStorageName);
-    if (data) {
-      meta2d.open(JSON.parse(data));
+    if (flag) {
+      const data: string = await localforage.getItem(localStorageName);
+      if (data) {
+        meta2d.open(JSON.parse(data));
+      }
+    } else {
+      meta2d.open({ pens: [] } as any);
     }
   }
   meta2d.store.data.x = meta2d.store.options.x || 0;
@@ -1175,7 +1217,6 @@ const importDataset = async () => {
     },
   ];
   const data: any = await importExcel(columns);
-  console.log('data', data);
   dataDialog.dataset = data;
 };