refactor: 更新暂存提示逻辑#9

package.json

@@ -25,6 +25,7 @@
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
+    "spark-md5": "^3.0.2",
     "uid": "^2.0.0"
   },
   "devDependencies": {
@@ -33,6 +34,7 @@
     "@types/lodash": "^4.14.179",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
+    "@types/spark-md5": "^3.0.2",
     "@vitejs/plugin-react": "^1.0.7",
     "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",

src/store/actions/index.ts

@@ -1,6 +1,7 @@
 import { IMapEditor } from "@map";
 import { Action } from "redux";
 import { message, Modal } from "antd";
+import SparkMD5 from "spark-md5";
 import {
   registerHotkey,
   downloadJSON,
@@ -25,6 +26,7 @@ export class EditorAction {
   mapEditor: IMapEditor | null = null;
   store: IStore;
   id: string;
+  tempId: string = "";
   autoSaveTimer: number = -1;
 
   constructor(store: IStore) {
@@ -63,7 +65,11 @@ export class EditorAction {
       this._openProject(JSON.parse(cached));
     }
 
-    this.autoSaveTimer = setTimeout(() => this.saveTemp(), AutoCacheInterval);
+    // 自动的不强制save
+    this.autoSaveTimer = setTimeout(
+      () => this.saveTemp(false),
+      AutoCacheInterval
+    );
   }
 
   // ---------- public methods -------------
@@ -127,11 +133,21 @@ export class EditorAction {
     downloadJSON(mapOptions, "fine.fgd");
   }
 
-  async saveTemp() {
+  async saveTemp(forceSave = true) {
     clearTimeout(this.autoSaveTimer);
-    await setItem(this.id, JSON.stringify(this._getMapOptions()));
+    const tempContent = JSON.stringify(this._getMapOptions());
+
+    const tempId = SparkMD5.hash(tempContent);
+    const hasChanged = this.tempId !== tempId;
+    this.tempId = tempId;
+    if (hasChanged || forceSave) {
+      await setItem(this.id, tempContent);
       message.success("暂存成功~");
-    this.autoSaveTimer = setTimeout(() => this.saveTemp(), AutoCacheInterval);
+    }
+    this.autoSaveTimer = setTimeout(
+      () => this.saveTemp(false),
+      AutoCacheInterval
+    );
   }
 
   clearOverlays() {

yarn.lock

@@ -2535,6 +2535,11 @@
   resolved "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/spark-md5@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/@types/spark-md5/-/spark-md5-3.0.2.tgz#da2e8a778a20335fc4f40b6471c4b0d86b70da55"
+  integrity sha512-82E/lVRaqelV9qmRzzJ1PKTpyrpnT7mwdneKNJB9hUtypZDMggloDfFUCIqRRx3lYRxteCwXSq9c+W71Vf0QnQ==
+
 "@typescript-eslint/eslint-plugin@^5.5.0":
   version "5.14.0"
   resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.14.0.tgz#5119b67152356231a0e24b998035288a9cd21335"
@@ -5572,6 +5577,11 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spark-md5@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
+  integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
+
 splaytree@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/splaytree/-/splaytree-3.1.0.tgz#17d4a0108a6da3627579690b7b847241e18ddec8"