feat: 添加缓存功能

Author: juwenzhang

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint && pnpm format
+pnpm format && pnpm lint

demo/react-lyric-demo/src/App.tsx

@@ -30,7 +30,9 @@ const App = () => {
         height="60vh"
         showAudioControl={true}
         onLyricChange={handleLyricChange}
-        onAudioPlay={(isPlaying) => console.log('音频播放状态:', isPlaying)}
+        onAudioPlay={(isPlaying: boolean) =>
+          console.log('音频播放状态:', isPlaying)
+        }
       />
     </div>
   )

package.json

@@ -5,7 +5,9 @@
   "version": "1.0.0",
   "scripts": {
     "dev": "pnpm -filter demo dev",
-    "build": "pnpm -filter \"packages/**\" build",
+    "build": "pnpm -filter core build && pnpm -filter react build",
+    "build:core": "pnpm -filter core build",
+    "build:react": "pnpm -filter react build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "format": "prettier --write .",
     "prepare": "husky",
@@ -33,6 +35,7 @@
     "markdownlint-cli": "^0.47.0",
     "prettier": "^3.1.0",
     "rimraf": "^6.1.2",
+    "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   },
   "config": {

packages/core/src/utils/lyricCache.ts

@@ -12,6 +12,14 @@ export interface LyricCacheOptions {
    * 缓存过期时间（毫秒）
    */
   expiration?: number
+  /**
+   * IndexedDB数据库名称
+   */
+  dbName?: string
+  /**
+   * IndexedDB存储对象名称
+   */
+  storeName?: string
 }
 
 /**
@@ -29,10 +37,57 @@ interface CacheData {
 export class LyricCache {
   private prefix: string
   private expiration: number
+  private dbName: string
+  private storeName: string
+  private db: IDBDatabase | null = null
+  private dbReady: Promise<void> | null = null
 
   constructor(options: LyricCacheOptions = {}) {
     this.prefix = options.prefix || 'lyric_cache_'
     this.expiration = options.expiration || 7 * 24 * 60 * 60 * 1000 // 默认7天
+    this.dbName = options.dbName || 'lyric_cache_db'
+    this.storeName = options.storeName || 'lyrics'
+    this.initDB()
+  }
+
+  /**
+   * 初始化IndexedDB
+   */
+  private initDB(): void {
+    if (typeof window === 'undefined' || !('indexedDB' in window)) {
+      console.warn('IndexedDB is not supported in this environment')
+      return
+    }
+
+    this.dbReady = new Promise<void>((resolve) => {
+      const request = window.indexedDB.open(this.dbName, 1)
+
+      request.onerror = () => {
+        console.error('Error opening IndexedDB:', request.error)
+        resolve() // 即使失败也继续，回退到localStorage
+      }
+
+      request.onsuccess = () => {
+        this.db = request.result
+        resolve()
+      }
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          db.createObjectStore(this.storeName, { keyPath: 'key' })
+        }
+      }
+    })
+  }
+
+  /**
+   * 确保DB已初始化
+   */
+  private ensureDBInitialized(): void {
+    if (!this.dbReady) {
+      this.initDB()
+    }
   }
 
   /**
@@ -55,20 +110,155 @@ export class LyricCache {
     return now - data.timestamp > expirationTime
   }
 
+  /**
+   * 检查localStorage是否有足够空间
+   * @param data 要存储的数据
+   * @returns 是否有足够空间
+   */
+  private hasLocalStorageSpace(data: string): boolean {
+    if (typeof window === 'undefined' || !('localStorage' in window)) {
+      return false
+    }
+
+    try {
+      const testKey = `${this.prefix}test`
+      window.localStorage.setItem(testKey, data)
+      window.localStorage.removeItem(testKey)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  /**
+   * 使用IndexedDB存储数据
+   * @param key 缓存键
+   * @param data 缓存数据
+   */
+  private async setToIndexedDB(key: string, data: CacheData): Promise<boolean> {
+    this.ensureDBInitialized()
+    if (!this.dbReady) return false
+
+    await this.dbReady
+    if (!this.db) return false
+
+    const db = this.db
+    return new Promise<boolean>((resolve) => {
+      const transaction = db.transaction(this.storeName, 'readwrite')
+      const store = transaction.objectStore(this.storeName)
+      const request = store.put({ key, ...data })
+
+      request.onsuccess = () => resolve(true)
+      request.onerror = () => {
+        console.error('Error storing data in IndexedDB:', request.error)
+        resolve(false)
+      }
+    })
+  }
+
+  /**
+   * 从IndexedDB获取数据
+   * @param key 缓存键
+   * @returns 缓存数据或null
+   */
+  private async getFromIndexedDB(key: string): Promise<BaseLyricItem[] | null> {
+    this.ensureDBInitialized()
+    if (!this.dbReady) return null
+
+    await this.dbReady
+    if (!this.db) return null
+
+    const db = this.db
+    return new Promise<BaseLyricItem[] | null>((resolve) => {
+      const transaction = db.transaction(this.storeName, 'readonly')
+      const store = transaction.objectStore(this.storeName)
+      const request = store.get(key)
+
+      request.onsuccess = () => {
+        const data = request.result
+        if (!data) {
+          resolve(null)
+          return
+        }
+
+        if (this.isExpired(data)) {
+          this.removeFromIndexedDB(key)
+          resolve(null)
+          return
+        }
+
+        resolve(data.data)
+      }
+
+      request.onerror = () => {
+        console.error('Error getting data from IndexedDB:', request.error)
+        resolve(null)
+      }
+    })
+  }
+
+  /**
+   * 从IndexedDB移除数据
+   * @param key 缓存键
+   */
+  private async removeFromIndexedDB(key: string): Promise<void> {
+    this.ensureDBInitialized()
+    if (!this.dbReady) return
+
+    await this.dbReady
+    if (!this.db) return
+
+    const db = this.db
+    const transaction = db.transaction(this.storeName, 'readwrite')
+    const store = transaction.objectStore(this.storeName)
+    store.delete(key)
+  }
+
+  /**
+   * 清除IndexedDB中的所有数据
+   */
+  private async clearIndexedDB(): Promise<void> {
+    this.ensureDBInitialized()
+    if (!this.dbReady) return
+
+    await this.dbReady
+    if (!this.db) return
+
+    const db = this.db
+    const transaction = db.transaction(this.storeName, 'readwrite')
+    const store = transaction.objectStore(this.storeName)
+    store.clear()
+  }
+
   /**
    * 缓存歌词
    * @param key 缓存键
    * @param data 歌词数据
    */
-  set(key: string, data: BaseLyricItem[]): void {
+  async set(key: string, data: BaseLyricItem[]): Promise<void> {
     try {
       const cacheKey = this.generateKey(key)
       const cacheData: CacheData = {
         data,
         timestamp: Date.now(),
         expiration: this.expiration,
       }
-      localStorage.setItem(cacheKey, JSON.stringify(cacheData))
+
+      const jsonData = JSON.stringify(cacheData)
+
+      // 尝试使用localStorage
+      if (this.hasLocalStorageSpace(jsonData)) {
+        window.localStorage.setItem(cacheKey, jsonData)
+        return
+      }
+
+      // localStorage空间不足，尝试使用IndexedDB
+      const storedInIndexedDB = await this.setToIndexedDB(cacheKey, cacheData)
+      if (storedInIndexedDB) {
+        return
+      }
+
+      console.warn('Failed to cache lyric in both localStorage and IndexedDB')
     } catch (error) {
       console.error('Error caching lyric:', error)
     }
@@ -79,19 +269,29 @@ export class LyricCache {
    * @param key 缓存键
    * @returns 缓存的歌词数据，或null如果不存在或已过期
    */
-  get(key: string): BaseLyricItem[] | null {
+  async get(key: string): Promise<BaseLyricItem[] | null> {
     try {
       const cacheKey = this.generateKey(key)
-      const cachedData = localStorage.getItem(cacheKey)
-      if (!cachedData) {
-        return null
+
+      // 尝试从localStorage获取
+      if (typeof window !== 'undefined' && 'localStorage' in window) {
+        const cachedData = window.localStorage.getItem(cacheKey)
+        if (cachedData) {
+          const parsedData: CacheData = JSON.parse(cachedData)
+          if (!this.isExpired(parsedData)) {
+            return parsedData.data
+          }
+          this.remove(key)
+        }
       }
-      const parsedData: CacheData = JSON.parse(cachedData)
-      if (this.isExpired(parsedData)) {
-        this.remove(key)
-        return null
+
+      // 从localStorage获取失败，尝试从IndexedDB获取
+      const indexedDBData = await this.getFromIndexedDB(cacheKey)
+      if (indexedDBData) {
+        return indexedDBData
       }
-      return parsedData.data
+
+      return null
     } catch (error) {
       console.error('Error getting cached lyric:', error)
       return null
@@ -102,10 +302,13 @@ export class LyricCache {
    * 移除缓存的歌词
    * @param key 缓存键
    */
-  remove(key: string): void {
+  async remove(key: string): Promise<void> {
     try {
       const cacheKey = this.generateKey(key)
-      localStorage.removeItem(cacheKey)
+      if (typeof window !== 'undefined' && 'localStorage' in window) {
+        window.localStorage.removeItem(cacheKey)
+      }
+      await this.removeFromIndexedDB(cacheKey)
     } catch (error) {
       console.error('Error removing cached lyric:', error)
     }
@@ -114,14 +317,20 @@ export class LyricCache {
   /**
    * 清除所有缓存的歌词
    */
-  clear(): void {
+  async clear(): Promise<void> {
     try {
-      const keys = Object.keys(localStorage)
-      keys.forEach((key) => {
-        if (key.startsWith(this.prefix)) {
-          localStorage.removeItem(key)
-        }
-      })
+      // 清除localStorage中的缓存
+      if (typeof window !== 'undefined' && 'localStorage' in window) {
+        const keys = Object.keys(window.localStorage)
+        keys.forEach((key) => {
+          if (key.startsWith(this.prefix)) {
+            window.localStorage.removeItem(key)
+          }
+        })
+      }
+
+      // 清除IndexedDB中的缓存
+      await this.clearIndexedDB()
     } catch (error) {
       console.error('Error clearing cached lyrics:', error)
     }
@@ -132,8 +341,9 @@ export class LyricCache {
    * @param key 缓存键
    * @returns 是否存在有效缓存
    */
-  has(key: string): boolean {
-    return this.get(key) !== null
+  async has(key: string): Promise<boolean> {
+    const data = await this.get(key)
+    return data !== null
   }
 }