大改，使用pinia传值，indexdb做持久化

src/components/common/HtFeeGrid.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { defineComponent, h, onActivated, onBeforeUnmount, onMounted, ref, watch, type PropType } from 'vue'
+import { computed, defineComponent, h, onActivated, onBeforeUnmount, onMounted, ref, watch, type PropType } from 'vue'
 import { AgGridVue } from 'ag-grid-vue3'
 import type { ColDef, GridApi, GridOptions, GridReadyEvent, ICellRendererParams } from 'ag-grid-community'
 import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale'
-import localforage from 'localforage'
 import { myTheme, gridOptions } from '@/lib/diyAgGridOptions'
 import { parseNumberOrNull } from '@/lib/number'
 import { formatThousandsFlexible } from '@/lib/numberFormat'
 import { roundTo, toDecimal } from '@/lib/decimal'
 import { Button } from '@/components/ui/button'
-import { useHtFeeMethodReloadStore } from '@/pinia/htFeeMethodReload'
+import { useZxFwPricingStore } from '@/pinia/zxFwPricing'
 import { Trash2 } from 'lucide-vue-next'
 import {
   AlertDialogAction,
@@ -40,10 +39,11 @@ interface FeeGridState {
 const props = defineProps<{
   title: string
   storageKey: string
-  syncMainStorageKey?: string
-  syncRowId?: string
+  htMainStorageKey?: string
+  htRowId?: string
+  htMethodType?: 'quantity-unit-price-fee'
 }>()
-const htFeeMethodReloadStore = useHtFeeMethodReloadStore()
+const zxFwPricingStore = useZxFwPricingStore()
 
 const createRowId = () => `fee-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`
 const SUBTOTAL_ROW_ID = 'fee-subtotal-fixed'
@@ -76,11 +76,35 @@ const ensureSubtotalRow = (rows: FeeRow[]) => {
   return [...normalRows, createSubtotalRow()]
 }
 
-const detailRows = ref<FeeRow[]>([])
+const fallbackDetailRows = ref<FeeRow[]>([])
 const gridApi = ref<GridApi<FeeRow> | null>(null)
 const deleteConfirmOpen = ref(false)
 const pendingDeleteRowId = ref<string | null>(null)
 const pendingDeleteRowName = ref('')
+const useHtMethodState = computed(
+  () => Boolean(props.htMainStorageKey && props.htRowId && props.htMethodType)
+)
+const detailRows = computed<FeeRow[]>({
+  get: () => {
+    if (!useHtMethodState.value) return fallbackDetailRows.value
+    const state = zxFwPricingStore.getHtFeeMethodState<FeeGridState>(
+      props.htMainStorageKey!,
+      props.htRowId!,
+      props.htMethodType!
+    )
+    const rows = state?.detailRows
+    return Array.isArray(rows) ? rows : []
+  },
+  set: rows => {
+    if (!useHtMethodState.value) {
+      fallbackDetailRows.value = rows
+      return
+    }
+    zxFwPricingStore.setHtFeeMethodState(props.htMainStorageKey!, props.htRowId!, props.htMethodType!, {
+      detailRows: rows
+    })
+  }
+})
 
 const addRow = () => {
   const normalRows = detailRows.value.filter(row => !isSubtotalRow(row))
@@ -193,10 +217,15 @@ const saveToIndexedDB = async () => {
     const payload: FeeGridState = {
       detailRows: JSON.parse(JSON.stringify(buildPersistDetailRows()))
     }
-
-    await localforage.setItem(props.storageKey, payload)
-    if (props.syncMainStorageKey && props.syncRowId) {
-      htFeeMethodReloadStore.emit(props.syncMainStorageKey, props.syncRowId)
+    if (useHtMethodState.value) {
+      zxFwPricingStore.setHtFeeMethodState(
+        props.htMainStorageKey!,
+        props.htRowId!,
+        props.htMethodType!,
+        payload
+      )
+    } else {
+      zxFwPricingStore.setKeyState(props.storageKey, payload)
     }
   } catch (error) {
     console.error('saveToIndexedDB failed:', error)
@@ -205,7 +234,13 @@ const saveToIndexedDB = async () => {
 
 const loadFromIndexedDB = async () => {
   try {
-    const data = await localforage.getItem<FeeGridState>(props.storageKey)
+    const data = useHtMethodState.value
+      ? await zxFwPricingStore.loadHtFeeMethodState<FeeGridState>(
+          props.htMainStorageKey!,
+          props.htRowId!,
+          props.htMethodType!
+        )
+      : await zxFwPricingStore.loadKeyState<FeeGridState>(props.storageKey)
     detailRows.value = mergeWithStoredRows(data?.detailRows)
     syncComputedValuesToRows()
   } catch (error) {
@@ -363,8 +398,6 @@ const detailGridOptions: GridOptions<FeeRow> = {
   treeData: false
 }
 
-let gridPersistTimer: ReturnType<typeof setTimeout> | null = null
-
 const handleGridReady = (event: GridReadyEvent<FeeRow>) => {
   gridApi.value = event.api
 }
@@ -372,10 +405,7 @@ const handleGridReady = (event: GridReadyEvent<FeeRow>) => {
 const handleCellValueChanged = () => {
   syncComputedValuesToRows()
   gridApi.value?.refreshCells({ force: true })
-  if (gridPersistTimer) clearTimeout(gridPersistTimer)
-  gridPersistTimer = setTimeout(() => {
-    void saveToIndexedDB()
-  }, 300)
+  void saveToIndexedDB()
 }
 
 onMounted(async () => {
@@ -394,7 +424,6 @@ watch(
 )
 
 onBeforeUnmount(() => {
-  if (gridPersistTimer) clearTimeout(gridPersistTimer)
   gridApi.value = null
   void saveToIndexedDB()
 })