feat: indexdb存储人员名单，使用dexie

package.json

@@ -21,6 +21,7 @@
         "axios": "^1.7.8",
         "canvas-confetti": "^1.9.3",
         "dayjs": "^1.11.13",
+        "dexie": "^4.2.1",
         "github-markdown-css": "^5.8.0",
         "localforage": "^1.10.0",
         "markdown-it": "^14.1.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
+      dexie:
+        specifier: ^4.2.1
+        version: 4.2.1
       github-markdown-css:
         specifier: ^5.8.0
         version: 5.8.0
@@ -2701,6 +2704,9 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  dexie@4.2.1:
+    resolution: {integrity: sha512-Ckej0NS6jxQ4Po3OrSQBFddayRhTCic2DoCAG5zacOfOVB9P2Q5Xc5uL/nVa7ZVs+HdMnvUPzLFCB/JwpB6Csg==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -8238,6 +8244,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  dexie@4.2.1: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dom-serializer@0.2.2:

src/store/personConfig.ts

@@ -1,73 +1,73 @@
 import type { IPersonConfig, IPrizeConfig } from '@/types/storeType'
-
 import dayjs from 'dayjs'
 import { defineStore } from 'pinia'
+import { computed, ref, toRaw, watch } from 'vue'
+import { IndexDb } from '@/utils/dexie'
 import { defaultPersonList } from './data'
 import { usePrizeConfig } from './prizeConfig'
 
-export const usePersonConfig = defineStore('person', {
+// 获取IPersonConfig的key组成数组
-  state() {
+export const personListKey = Object.keys(defaultPersonList[0])
-    return {
+export const usePersonConfig = defineStore('person', () => {
-      personConfig: {
+    const personDb = new IndexDb('person', ['allPersonList', 'alreadyPersonList'], 1, personListKey)
+    // NOTE: state
+    const personConfig = ref({
         allPersonList: [] as IPersonConfig[],
         alreadyPersonList: [] as IPersonConfig[],
-      },
-    }
-  },
-  getters: {
-    // 获取全部配置
-    getPersonConfig(state) {
-      return state.personConfig
-    },
-    // 获取全部人员名单
-    getAllPersonList(state) {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-        return item
     })
-    },
+    personDb.getAllData('allPersonList').then((data) => {
+        personConfig.value.allPersonList = data
+    })
+    personDb.getAllData('alreadyPersonList').then((data) => {
+        console.log(data)
+        personConfig.value.alreadyPersonList = data
+    })
+
+    // NOTE: getter
+    // 获取全部配置
+    const getPersonConfig = computed(() => personConfig.value)
+    // 获取全部人员名单
+    const getAllPersonList = computed(() => personConfig.value.allPersonList)
     // 获取未获此奖的人员名单
-    getNotThisPrizePersonList(state: any) {
+    const getNotThisPrizePersonList = computed(() => {
         const currentPrize = usePrizeConfig().prizeConfig.currentPrize
-      const data = state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+        const data = personConfig.value.allPersonList.filter((item: IPersonConfig) => {
             return !item.prizeId.includes(currentPrize.id as string)
         })
 
         return data
-    },
+    })
+
     // 获取已中奖人员名单
-    getAlreadyPersonList(state) {
+    const getAlreadyPersonList = computed(() => {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
+        return personConfig.value.allPersonList.filter((item: IPersonConfig) => {
             return item.isWin === true
         })
-    },
-    // 获取中奖人员详情
-    getAlreadyPersonDetail(state) {
-      return state.personConfig.alreadyPersonList
-    },
-    // 获取未中奖人员名单
-    getNotPersonList(state) {
-      return state.personConfig.allPersonList.filter((item: IPersonConfig) => {
-        return item.isWin === false
     })
-    },
+    // 获取中奖人员详情
-  },
+    const getAlreadyPersonDetail = computed(() => personConfig.value.alreadyPersonList)
-  actions: {
+    // 获取未中奖人员名单
+    const getNotPersonList = computed(() => personConfig.value.allPersonList.filter((item: IPersonConfig) => {
+        return item.isWin === false
+    }))
+    // NOTE: action
     // 添加未中奖人员
-    addNotPersonList(personList: IPersonConfig[]) {
+    function addNotPersonList(personList: IPersonConfig[]) {
         if (personList.length <= 0) {
             return
         }
         personList.forEach((item: IPersonConfig) => {
-        this.personConfig.allPersonList.push(item)
+            personConfig.value.allPersonList.push(item)
         })
-    },
+        personDb.setAllData('allPersonList', personList)
+    }
     // 添加已中奖人员
-    addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
+    function addAlreadyPersonList(personList: IPersonConfig[], prize: IPrizeConfig | null) {
         if (personList.length <= 0) {
             return
         }
         personList.forEach((person: IPersonConfig) => {
-        this.personConfig.allPersonList.map((item: IPersonConfig) => {
+            personConfig.value.allPersonList.map((item: IPersonConfig) => {
                 if (item.id === person.id && prize != null) {
                     item.isWin = true
                     // person.isWin = true
@@ -77,83 +77,109 @@ export const usePersonConfig = defineStore('person', {
                     // person.prizeTime = new Date().toString()
                     item.prizeId.push(prize.id as string)
                 }
-
                 return item
             })
-        this.personConfig.alreadyPersonList.push(person)
+            personConfig.value.alreadyPersonList.push(person)
+            personDb.updateData('allPersonList', toRaw(person))
+            personDb.setData('alreadyPersonList', toRaw(person))
         })
-    },
+    }
     // 从已中奖移动到未中奖
-    moveAlreadyToNot(person: IPersonConfig) {
+    function moveAlreadyToNot(person: IPersonConfig) {
         if (person.id === undefined || person.id == null) {
             return
         }
-      const alreadyPersonListLength = this.personConfig.alreadyPersonList.length
+        const alreadyPersonListLength = personConfig.value.alreadyPersonList.length
-      for (let i = 0; i < this.personConfig.allPersonList.length; i++) {
+        for (let i = 0; i < personConfig.value.allPersonList.length; i++) {
-        if (person.id === this.personConfig.allPersonList[i].id) {
+            if (person.id === personConfig.value.allPersonList[i].id) {
-          this.personConfig.allPersonList[i].isWin = false
+                personConfig.value.allPersonList[i].isWin = false
-          this.personConfig.allPersonList[i].prizeName = []
+                personConfig.value.allPersonList[i].prizeName = []
-          this.personConfig.allPersonList[i].prizeTime = []
+                personConfig.value.allPersonList[i].prizeTime = []
-          this.personConfig.allPersonList[i].prizeId = []
+                personConfig.value.allPersonList[i].prizeId = []
-
+                personDb.updateData('allPersonList', toRaw(personConfig.value.allPersonList[i]))
                 break
             }
         }
+        const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
         for (let i = 0; i < alreadyPersonListLength; i++) {
-        this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) =>
+            personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) =>
                 item.id !== person.id,
             )
         }
-    },
+        personDb.deleteData('alreadyPersonList', person)
-    // 删除指定人员
+    }
-    deletePerson(person: IPersonConfig) {
+    // 删除指定人员
-      if (person.id !== undefined || person.id != null) {
+    function deletePerson(person: IPersonConfig) {
-        this.personConfig.allPersonList = this.personConfig.allPersonList.filter((item: IPersonConfig) => item.id !== person.id)
+        if (person.id !== undefined || person.id != null) {
-        this.personConfig.alreadyPersonList = this.personConfig.alreadyPersonList.filter((item: IPersonConfig) => item.id !== person.id)
+            const allPersonListRaw = toRaw(personConfig.value.allPersonList)
+            const alreadyPersonListRaw = toRaw(personConfig.value.alreadyPersonList)
+            personConfig.value.allPersonList = allPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
+            personConfig.value.alreadyPersonList = alreadyPersonListRaw.filter((item: IPersonConfig) => item.id !== person.id)
+            personDb.deleteData('allPersonList', person)
+            personDb.deleteData('alreadyPersonList', person)
+        }
     }
-    },
     // 删除所有人员
-    deleteAllPerson() {
+    function deleteAllPerson() {
-      this.personConfig.allPersonList = []
+        personConfig.value.allPersonList = []
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        personDb.deleteAll('allPersonList')
+        personDb.deleteAll('alreadyPersonList')
+    }
 
     // 删除所有人员
-    resetPerson() {
+    function resetPerson() {
-      this.personConfig.allPersonList = []
+        personConfig.value.allPersonList = []
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        personDb.deleteAll('allPersonList')
+        personDb.deleteAll('alreadyPersonList')
+    }
     // 重置已中奖人员
-    resetAlreadyPerson() {
+    function resetAlreadyPerson() {
         // 把已中奖人员合并到未中奖人员，要验证是否已存在
-      this.personConfig.allPersonList.forEach((item: IPersonConfig) => {
+        personConfig.value.allPersonList.forEach((item: IPersonConfig) => {
             item.isWin = false
             item.prizeName = []
             item.prizeTime = []
             item.prizeId = []
         })
-      this.personConfig.alreadyPersonList = []
+        personConfig.value.alreadyPersonList = []
-    },
+        const allPersonListRaw = toRaw(personConfig.value.allPersonList)
-    setDefaultPersonList() {
+        personDb.deleteAll('allPersonList')
-      this.personConfig.allPersonList = defaultPersonList
+        personDb.setAllData('allPersonList', allPersonListRaw)
-      this.personConfig.alreadyPersonList = []
+        personDb.deleteAll('alreadyPersonList')
-    },
+    }
+    function setDefaultPersonList() {
+        personConfig.value.allPersonList = defaultPersonList
+        personConfig.value.alreadyPersonList = []
+        personDb.setAllData('allPersonList', defaultPersonList)
+        personDb.deleteAll('alreadyPersonList')
+    }
     // 重置所有配置
-    reset() {
+    function reset() {
-      this.personConfig = {
+        personConfig.value = {
             allPersonList: [] as IPersonConfig[],
             alreadyPersonList: [] as IPersonConfig[],
         }
-    },
+        personDb.deleteAll('allPersonList')
-  },
+        personDb.deleteAll('alreadyPersonList')
-  persist: {
+    }
-    enabled: true,
+    return {
-    strategies: [
+        personConfig,
-      {
+        getPersonConfig,
-        // 如果要存储在localStorage中
+        getAllPersonList,
-        storage: localStorage,
+        getNotThisPrizePersonList,
-        key: 'personConfig',
+        getAlreadyPersonList,
-      },
+        getAlreadyPersonDetail,
-    ],
+        getNotPersonList,
-  },
+        addNotPersonList,
+        addAlreadyPersonList,
+        moveAlreadyToNot,
+        deletePerson,
+        deleteAllPerson,
+        resetPerson,
+        resetAlreadyPerson,
+        setDefaultPersonList,
+        reset,
+    }
 })

src/utils/dexie/index.ts

@@ -0,0 +1,108 @@
+import type { EntityTable } from 'dexie'
+import type { DbData } from './type'
+import dayjs from 'dayjs'
+import Dexie from 'dexie'
+
+class IndexDb {
+    name: string
+    dbStore: any
+    version: number
+    dbKeys: string[]
+    tableNames: string[]
+    constructor(name: string, tableNames: string[], version = 1, dbKeys: string[] = []) {
+        this.name = name // 数据库名称
+        this.version = version // 数据库版本号
+        this.dbKeys = dbKeys // 数据库key
+        this.tableNames = tableNames
+        this.dbStore = new Dexie(name) as Dexie & { [key: string]: EntityTable<DbData, 'id'> }
+        // 获取存在的key
+        const stores: Record<string, string> = {}
+        for (const tableName of tableNames) {
+            stores[tableName] = 'id,dateTime,type,uid' // 根据需要调整字段
+        }
+        this.dbStore.version(this.version).stores(stores)
+    }
+
+    setAllData(tableName: string, data: DbData[]) {
+        this.dbStore[tableName].bulkAdd(data)
+    }
+
+    /**
+     * @param data
+     * @description 添加单条数据，并为数据添加dataTime和type属性
+     */
+    setData(tableName: string, data: Partial<DbData>) {
+        if (!data.dateTime) {
+            data.dateTime = dayjs().format('YYYY-MM-DD HH:mm:ss:SSS')
+        }
+        if (!data.type) {
+            data.type = 'info'
+        }
+        this.dbStore[tableName].add(data)
+    }
+
+    // 更新单条数据
+    updateData(tableName: string, data: Partial<DbData>) {
+        this.dbStore[tableName].update(data.id, data)
+    }
+
+    /**
+     * @returns 所有数据Array
+     * @description 删除所有数据并返回被删除的数据
+     */
+    deleteAll(tableName: string) {
+        return this.dbStore[tableName].clear()
+    }
+
+    /**
+     * @param data
+     * @description 删除单条数据
+     */
+    deleteData(tableName: string, data: Partial<DbData>) {
+        this.dbStore[tableName].delete(data.id)
+    }
+
+    /**
+     * @returns 所有数据Array
+     * @description 获取所有数据
+     */
+    async getAllData(tableName: string, isAsc: boolean = true) {
+        const allData = await this.dbStore[tableName].toArray()
+        // return allData
+        return isAsc ? allData : allData.reverse()
+    }
+
+    // 分页获取数据
+    async getPageData(tableName: string, pageNum: number, pageSize: number, isAsc: boolean = true) {
+        const allData = await this.dbStore[tableName].toArray()
+        const start = (pageNum - 1) * pageSize
+        const end = pageNum * pageSize
+        return isAsc ? allData.slice(start, end) : allData.slice(end, start).reverse()
+    }
+
+    /**
+     * @returns 数据库总长度
+     * @description 获取所有数据的列表长度
+     */
+    getAllLength(tableName: string) {
+        return this.dbStore[tableName].count()
+    }
+
+    /**
+     *
+     * @param filter 根据筛选条件返回数据
+     * @returns
+     */
+    getFilterData(tableName: string, filter: string) {
+        return this.dbStore[tableName].filter((item: any) => {
+            return item.content.includes(filter)
+        }).toArray()
+    }
+
+    getKeys(tableName: string, key: string) {
+        // keys 方法获取所有主键
+        return this.dbStore[tableName].orderBy(key).keys()
+    }
+}
+
+export { IndexDb }

src/utils/dexie/type.ts

@@ -0,0 +1,3 @@
+export interface DbData {
+    [key: string]: any
+}