fix: resolve the automatic save state invalid after refresh (#1004)

opentiny · Jan 13, 2025 · d955cd8 · d955cd8
1 parent a5b1df6
commit d955cd8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
@@ -20,7 +20,7 @@
               </tiny-select>
             </div>
             <div class="save-button-group">
-              <tiny-button type="primary" @click="autoSave">设置并保存</tiny-button>
+              <tiny-button type="primary" @click="saveConfig">设置并保存</tiny-button>
             </div>
           </div>
         </tiny-popover>
@@ -55,13 +55,13 @@
 </template>
 
 <script>
-import { reactive, ref, onUnmounted } from 'vue'
+import { reactive, ref, onUnmounted, onMounted } from 'vue'
 import { VueMonaco } from '@opentiny/tiny-engine-common'
 import { Button, Popover, DialogBox, Checkbox, Select } from '@opentiny/vue'
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { openCommon, saveCommon } from './js/index'
-import { isLoading } from './js/index'
+import { isLoading, setAutoSaveStatus, getAutoSaveStatus } from './js/index'
 import { constants } from '@opentiny/tiny-engine-utils'
 const { OPEN_DELAY } = constants
 
@@ -136,14 +136,22 @@ export default {
         saveSetTimeout()
       }, state.timeValue * 60 * 1000)
     }
-    const autoSave = () => {
+    const saveConfig = () => {
+      setAutoSaveStatus(state.checked)
       if (state.checked) {
         saveSetTimeout()
       } else {
         clearTimeout(state.preservationTime)
       }
     }
 
+    onMounted(() => {
+      state.checked = getAutoSaveStatus()
+      if (state.checked) {
+        saveSetTimeout()
+      }
+    })
+
     onUnmounted(() => {
       clearTimeout(state.preservationTime)
     })
@@ -158,7 +166,7 @@ export default {
       openApi,
       saveApi,
       delayOptions,
-      autoSave,
+      saveConfig,
       OPEN_DELAY
     }
   }

diff --git a/packages/toolbars/save/src/js/index.js b/packages/toolbars/save/src/js/index.js
@@ -25,7 +25,7 @@ import { constants } from '@opentiny/tiny-engine-utils'
 import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
 import meta from '../../meta'
 
-const { PAGE_STATUS } = constants
+const { PAGE_STATUS, AUTO_SAVED } = constants
 const state = reactive({
   visible: false,
   code: '',
@@ -175,3 +175,21 @@ export const openCommon = async () => {
     }
   })
 }
+
+export const getAutoSaveStatus = () => {
+  try {
+    const value = localStorage.getItem(AUTO_SAVED)
+    return JSON.parse(value) ?? false
+  } catch {
+    return false
+  }
+}
+
+export const setAutoSaveStatus = (status) => {
+  try {
+    localStorage.setItem(AUTO_SAVED, JSON.stringify(status))
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/packages/utils/src/constants/index.js b/packages/utils/src/constants/index.js
@@ -98,6 +98,8 @@ export const BROADCAST_CHANNEL = {
 
 export const STORAGE_KEY_FIXED_PANELS = `tiny-engine-fixed-panels-${CHANNEL_UID}`
 
+export const AUTO_SAVED = 'tiny-engine-auto-saved'
+
 export const TYPES = {
   ErrorType: 'error',
   ObjectType: 'object',