DEBUG store

src/database.js

@@ -1,108 +0,0 @@
-// 使用示例：
-// const db = new IndexedDB('myDatabase', 1, 'myStore')
-// await db.open()
-// await db.add({ id: 1, name: 'John' })
-// const data = await db.get(1)
-// console.log(data)
-// await db.delete(1)
-
-export default class IndexedDB {
-    constructor(databaseName, databaseVersion, storeName) {
-        this.databaseName = databaseName
-        this.databaseVersion = databaseVersion
-        this.storeName = storeName
-        this.db = null
-    }
-
-    open() {
-        return new Promise((resolve, reject) => {
-            const request = indexedDB.open(this.databaseName, this.databaseVersion)
-            request.onerror = (event) => {
-                reject(event.target.error)
-            }
-            request.onsuccess = (event) => {
-                this.db = event.target.result
-                resolve(this.db)
-            }
-            request.onupgradeneeded = (event) => {
-                const db = event.target.result
-                if (!db.objectStoreNames.contains(this.storeName)) {
-                    db.createObjectStore(this.storeName, { keyPath: 'id' })
-                }
-            }
-        })
-    }
-
-    add(data) {
-        console.log('add', data)
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction([this.storeName], 'readwrite')
-            const objectStore = transaction.objectStore(this.storeName)
-
-            // 判断是否已经存在
-            const request = objectStore.get(data.id)
-            request.onerror = (event) => {
-                reject(event.target.error)
-            }
-            request.onsuccess = (event) => {
-                if (event.target.result) return resolve(event.target.result)
-                const request = objectStore.add(data)
-                request.onerror = (event) => {
-                    reject(event.target.error)
-                }
-                request.onsuccess = (event) => {
-                    resolve(event.target.result)
-                }
-            }
-        })
-    }
-
-    get(id) {
-        console.log('get', id)
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction([this.storeName], 'readonly')
-            const objectStore = transaction.objectStore(this.storeName)
-            const request = objectStore.get(id)
-
-            request.onerror = (event) => {
-                reject(event.target.error)
-            }
-
-            request.onsuccess = (event) => {
-                resolve(event.target.result)
-            }
-        })
-    }
-
-    getAll() {
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction([this.storeName], 'readonly')
-            const objectStore = transaction.objectStore(this.storeName)
-            const request = objectStore.getAll()
-
-            request.onerror = (event) => {
-                reject(event.target.error)
-            }
-
-            request.onsuccess = (event) => {
-                resolve(event.target.result)
-            }
-        })
-    }
-
-    delete(id) {
-        return new Promise((resolve, reject) => {
-            const transaction = this.db.transaction([this.storeName], 'readwrite')
-            const objectStore = transaction.objectStore(this.storeName)
-            const request = objectStore.delete(id)
-
-            request.onerror = (event) => {
-                reject(event.target.error)
-            }
-
-            request.onsuccess = (event) => {
-                resolve(event.target.result)
-            }
-        })
-    }
-}

src/indexeddb.js

@@ -0,0 +1,50 @@
+export default class IndexedDB {
+    constructor(databaseName, databaseVersion) {
+        this.databaseName = databaseName
+        this.databaseVersion = databaseVersion
+        this.db = null
+    }
+
+    open(name) {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(this.databaseName, this.databaseVersion)
+            request.onerror = (event) => {
+                reject(event.target.error)
+            }
+            request.onsuccess = (event) => {
+                this.db = event.target.result
+                resolve(this.db)
+            }
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result
+                if (!db.objectStoreNames.contains('todo')) {
+                    db.createObjectStore(name, { keyPath: 'id' })
+                    console.log('store created:', name)
+                }
+            }
+        })
+    }
+
+    async store(name) {
+        if (!this.db) await this.open(name)
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction([name], 'readwrite')
+            const objectStore = transaction.objectStore(name)
+            resolve(objectStore)
+        })
+    }
+
+    getAll(name) {
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction([name], 'readonly')
+            const objectStore = transaction.objectStore(name)
+            const request = objectStore.getAll()
+            request.onerror = (event) => {
+                reject(event.target.error)
+            }
+            request.onsuccess = (event) => {
+                resolve(event.target.result)
+            }
+        })
+    }
+}

src/main.js

@@ -1,7 +1,7 @@
 import 'virtual:windi.css'
-import 'virtual:windi-devtools'
+//import 'virtual:windi-devtools'
 
-import IndexedDB from './database.js'
+import IndexedDB from './indexeddb.js'
 import MusicList from './music.js'
 import ClientList from './client.js'
 import Chat from './chat.js'
@@ -24,9 +24,11 @@ function appendBuffer(buffer1, buffer2) {
 //await imageStore.open()
 
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const musicStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
-await musicStore.open()
-const list = (await musicStore.getAll()).map(item => {
+const database = new IndexedDB('musicDatabase', 1)
+const musicStore = await database.store('musicObjectStore')
+
+//// 读取本地音乐列表并标识为缓存状态(本地缓存)
+const list = (await database.getAll('musicObjectStore')).map(item => {
   return { save: true, ...item }
 })
 
@@ -99,7 +101,6 @@ const musicList = new MusicList({
   },
   onupdate: item => {
     //console.info('更新音乐', item.name)
-    musicStore.put(item)
   },
   onerror: error => {
     console.error('音乐列表错误', error)

src/music.js

@@ -8,6 +8,7 @@ export default class MusicList {
         this.audio = new Audio()
         this.audio.autoplay = true
         this.audio.controls = true
+        this.audio.style.flexShrink = 0 // 防止在flex中被挤压变形
         this.audio.addEventListener('play', () => {
             this.event.onplay(this.playing)
         })
@@ -29,7 +30,6 @@ export default class MusicList {
                 whiteSpace: 'nowrap',
                 overflowX: 'hidden', // 溢出时隐藏
                 overflowY: 'auto',   // 溢出时显示滚动条
-                maxHeight: '70vh',   // 最大高度
                 listStyle: 'disc',   // 实心圆
                 padding: '0 1.1rem', // 列表左右留白
             }