fix more

src/components/views/xmInfo.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { AgGridVue } from 'ag-grid-vue3'
 import type { ColDef, GridOptions } from 'ag-grid-community'
+import localforage from 'localforage'
 import 'ag-grid-enterprise'
 	import {
 
@@ -62,8 +63,6 @@ interface XmInfoState {
   detailRows: DetailRow[]
 }
 
-const DB_NAME = 'jgjs-pricing-db'
-const DB_STORE = 'form-state'
 const DB_KEY = 'xm-info-v3'
 const DEFAULT_PROJECT_NAME = 'xxx造价咨询服务'
 
@@ -282,41 +281,15 @@ const pinnedTopRowData = computed(() => [
   }
 ])
 
-const openDB = () =>
-  new Promise<IDBDatabase>((resolve, reject) => {
-    const request = window.indexedDB.open(DB_NAME, 1)
 
-    request.onupgradeneeded = () => {
-      const db = request.result
-      if (!db.objectStoreNames.contains(DB_STORE)) {
-        db.createObjectStore(DB_STORE)
-      }
-    }
-
-    request.onsuccess = () => resolve(request.result)
-    request.onerror = () => reject(request.error)
-  })
 
 const saveToIndexedDB = async () => {
   try {
-    const db = await openDB()
-    const tx = db.transaction(DB_STORE, 'readwrite')
-    const store = tx.objectStore(DB_STORE)
-
     const payload: XmInfoState = {
       projectName: projectName.value,
-      detailRows: detailRows.value
+  detailRows: JSON.parse(JSON.stringify(detailRows.value)) 
     }
-
-    store.put(payload, DB_KEY)
-
-    await new Promise<void>((resolve, reject) => {
-      tx.oncomplete = () => resolve()
-      tx.onerror = () => reject(tx.error)
-      tx.onabort = () => reject(tx.error)
-    })
-
-    db.close()
+    await localforage.setItem(DB_KEY, payload)
   } catch (error) {
     console.error('saveToIndexedDB failed:', error)
   }
@@ -324,24 +297,8 @@ const saveToIndexedDB = async () => {
 
 const loadFromIndexedDB = async () => {
   try {
-    const db = await openDB()
-    const tx = db.transaction(DB_STORE, 'readonly')
-    const store = tx.objectStore(DB_STORE)
-    const request = store.get(DB_KEY)
-
-    const data = await new Promise<XmInfoState | undefined>((resolve, reject) => {
-      request.onsuccess = () => resolve(request.result as XmInfoState | undefined)
-      request.onerror = () => reject(request.error)
-    })
-
-    await new Promise<void>((resolve, reject) => {
-      tx.oncomplete = () => resolve()
-      tx.onerror = () => reject(tx.error)
-      tx.onabort = () => reject(tx.error)
-    })
-
-    db.close()
-
+    const data = await localforage.getItem<XmInfoState>(DB_KEY)
+console.log(data)
     if (data) {
       projectName.value = data.projectName || DEFAULT_PROJECT_NAME
       detailRows.value = mergeWithDictRows(data.detailRows)
@@ -363,24 +320,29 @@ const schedulePersist = () => {
   }, 250)
 }
 
-const handleBeforeUnload = () => {
-  void saveToIndexedDB()
-}
+// const handleBeforeUnload = () => {
+//   void saveToIndexedDB()
+// }
 
+let gridPersistTimer: ReturnType<typeof setTimeout> | null = null
 const handleCellValueChanged = () => {
-  schedulePersist()
+  if (gridPersistTimer) clearTimeout(gridPersistTimer)
+  gridPersistTimer = setTimeout(() => {
+    void saveToIndexedDB()
+  }, 1000)
 }
 
 watch(projectName, schedulePersist)
 
 onMounted(async () => {
   await loadFromIndexedDB()
-  window.addEventListener('beforeunload', handleBeforeUnload)
+  // window.addEventListener('beforeunload', handleBeforeUnload)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('beforeunload', handleBeforeUnload)
+  // window.removeEventListener('beforeunload', handleBeforeUnload)
   if (persistTimer) clearTimeout(persistTimer)
+  if (gridPersistTimer) clearTimeout(gridPersistTimer)
   void saveToIndexedDB()
 })
 const processCellForClipboard = (params:any) => {