feat:sim卡管理界面添加页面状态保存

src/stores/initStores.ts

@@ -25,6 +25,7 @@ import { useSiteRuntimeChartConfigStore } from './modules/views/siteRuntimeChart
 import { useXlogViewsStateStore } from './modules/views/xlogViewsState'
 import { useSiteInfoManageStateStore } from './modules/views/siteInfoManageState'
 import { useFaultRecordStateStore } from './modules/views/faultRecordState'
+import { useSimCardManageStateStore } from './modules/views/simCardManageState'
 
 // 全局注册表
 // type StoreDefinitionFn =
@@ -47,11 +48,15 @@ export const InitStores = () => {
   InitOneStore(useXlogViewsStateStore())
   InitOneStore(useSiteInfoManageStateStore())
   InitOneStore(useFaultRecordStateStore())
+  InitOneStore(useSimCardManageStateStore())
 
   // 监听登录事件，重置Store
   globalThis.AppEvents.on('user:login', () => {
     const siteInfoManageStateStore = useSiteInfoManageStateStore()
     siteInfoManageStateStore.$reset()
+
+    const simCardManageStateStore = useSimCardManageStateStore()
+    simCardManageStateStore.$reset()
   })
 }
 

src/stores/modules/views/simCardManageState.ts

@@ -0,0 +1,105 @@
+import { defineSetupStore } from '@/stores/public/template'
+import type { SimCardStatus, SimCardPlatform } from '@/service/simCardManage/interface'
+
+const STORES_KEY = 'SimCardManageStateStore'
+const CURRENT_VERSION = '0.0.0'
+
+/** 状态过期时间：1 小时（毫秒） */
+const EXPIRE_MS = 60 * 60 * 1000
+
+/** SIM 卡管理界面需要保存的界面状态 */
+export interface SimCardManageState {
+  searchKeyword: string // GICCID 搜索关键词
+  selectStatus: SimCardStatus[] // 状态筛选
+  selectPlatform: SimCardPlatform[] // 平台筛选
+  page: number // 当前页
+  pageSize: number // 每页条数
+}
+
+function createDefaultState(): SimCardManageState {
+  return {
+    searchKeyword: '',
+    selectStatus: [],
+    selectPlatform: [],
+    page: 1,
+    pageSize: 10,
+  }
+}
+
+export const useSimCardManageStateStore = defineSetupStore(
+  STORES_KEY,
+  CURRENT_VERSION,
+  () => {
+    // 界面状态
+    const state = ref<SimCardManageState>(createDefaultState())
+    // 状态保存时间戳（毫秒）。0 表示尚未保存
+    const savedAt = ref<number>(0)
+
+    function $reset() {
+      state.value = createDefaultState()
+      savedAt.value = 0
+    }
+
+    /** 判断已保存状态是否已过期（超过 1 小时或从未保存） */
+    function isExpired(): boolean {
+      if (savedAt.value === 0) return true
+      return Date.now() - savedAt.value > EXPIRE_MS
+    }
+
+    /** 保存界面状态，并刷新保存时间戳 */
+    function save(next: SimCardManageState) {
+      state.value = {
+        searchKeyword: next.searchKeyword,
+        selectStatus: [...next.selectStatus],
+        selectPlatform: [...next.selectPlatform],
+        page: next.page,
+        pageSize: next.pageSize,
+      }
+      savedAt.value = Date.now()
+    }
+
+    /**
+     * 读取界面状态（惰性过期）：
+     * - 未过期：返回已保存状态的副本
+     * - 已过期：清空并返回默认状态
+     */
+    function restore(): SimCardManageState {
+      if (isExpired()) {
+        $reset()
+        return createDefaultState()
+      }
+      return {
+        searchKeyword: state.value.searchKeyword,
+        selectStatus: [...state.value.selectStatus],
+        selectPlatform: [...state.value.selectPlatform],
+        page: state.value.page,
+        pageSize: state.value.pageSize,
+      }
+    }
+
+    return {
+      // normal state
+      state,
+      savedAt,
+
+      // reactive state - ref()
+
+      // reactive getters - computed()
+
+      // normal getters - function()
+      isExpired,
+      restore,
+
+      // actions - function()
+      save,
+      $reset,
+    }
+  },
+  {
+    persist: {
+      key: STORES_KEY, // 存储 key
+      storage: localStorage, // 与其他 views state 保持一致
+      debug: true,
+    },
+  },
+)

src/views/sim-card-manage/index.vue

@@ -117,10 +117,13 @@ import type {
 import SimCardDataView from './component/simCardDataView.vue'
 import SiteInfoView from '../site-info-manage/component/siteInfoView.vue'
 import { useSimCardMonthlyCache, cacheKey } from './useSimCardMonthlyCache'
+import { useSimCardManageStateStore } from '@/stores/modules/views/simCardManageState'
 
 const dialog = useDialog()
 const message = useMessage()
 
+const simCardManageStateStore = useSimCardManageStateStore()
+
 const { memoryCache, loadingSet, failedSet, computeDailyIncrement, onPageChange, getWithPriority } =
   useSimCardMonthlyCache()
 
@@ -414,10 +417,27 @@ const handleListQuery = async () => {
   const status = selectStatus.value.length > 0 ? selectStatus.value.join(',') : undefined
   const platform = selectPlatform.value.length > 0 ? selectPlatform.value.join(',') : undefined
 
+  // 保存当前界面状态（每次查询都反映了完整的搜索/筛选/分页状态），刷新 1 小时过期时间
+  simCardManageStateStore.save({
+    searchKeyword: searchKeyword.value,
+    selectStatus: selectStatus.value,
+    selectPlatform: selectPlatform.value,
+    page: pageNum,
+    pageSize,
+  })
+
   await querySimCardInfoList(pageSize, pageNum, searchKeyword.value, status, platform)
 }
 
 onMounted(async () => {
+  // 恢复上次界面状态（超过 1 小时自动失效，返回默认值）
+  const saved = simCardManageStateStore.restore()
+  searchKeyword.value = saved.searchKeyword
+  selectStatus.value = saved.selectStatus
+  selectPlatform.value = saved.selectPlatform
+  tablePagination.page = saved.page
+  tablePagination.pageSize = saved.pageSize
+
   // 请求查询数据
   await handleListQuery()