refactor: add storage engine (#1118)

* feat: add storage adapter

* refactor: add storage engine

Author: yanglbme

apps/web/src/components/ai/chat-box/AIAssistantPanel.vue

@@ -26,6 +26,7 @@ import useAIConfigStore from '@/stores/aiConfig'
 import { useEditorStore } from '@/stores/editor'
 import { useQuickCommands } from '@/stores/quickCommands'
 import { useUIStore } from '@/stores/ui'
+import { store } from '@/utils'
 import { copyPlain } from '@/utils/clipboard'
 
 /* ---------- 组件属性 ---------- */
@@ -107,7 +108,7 @@ function applyQuickCommand(cmd: QuickCommandRuntime) {
 
 /* ---------- 初始数据 ---------- */
 onMounted(async () => {
-  const saved = localStorage.getItem(memoryKey)
+  const saved = await store.get(memoryKey)
   messages.value = saved ? JSON.parse(saved) : getDefaultMessages()
   await scrollToBottom(true)
 })
@@ -186,13 +187,13 @@ function editMessage(content: string) {
   })
 }
 
-function resetMessages() {
+async function resetMessages() {
   if (fetchController.value) {
     fetchController.value.abort()
     fetchController.value = null
   }
   messages.value = getDefaultMessages()
-  localStorage.setItem(memoryKey, JSON.stringify(messages.value))
+  await store.setJSON(memoryKey, messages.value)
   scrollToBottom(true)
 }
 
@@ -380,7 +381,7 @@ async function sendMessage() {
     await scrollToBottom(true)
   }
   finally {
-    localStorage.setItem(memoryKey, JSON.stringify(messages.value))
+    await store.setJSON(memoryKey, messages.value)
     loading.value = false
     fetchController.value = null
   }

apps/web/src/components/ai/image-generator/AIImageGeneratorPanel.vue

@@ -22,6 +22,7 @@ import { Textarea } from '@/components/ui/textarea'
 import useAIImageConfigStore from '@/stores/aiImageConfig'
 import { useEditorStore } from '@/stores/editor'
 import { useUIStore } from '@/stores/ui'
+import { store } from '@/utils'
 import { copyPlain } from '@/utils/clipboard'
 import AIImageConfig from './AIImageConfig.vue'
 
@@ -69,28 +70,27 @@ function isImageExpired(timestamp: number): boolean {
   return now - timestamp > EXPIRY_TIME
 }
 
-function cleanExpiredImages() {
-  const savedImages = localStorage.getItem(`ai_generated_images`)
-  const savedPrompts = localStorage.getItem(`ai_image_prompts`)
-  const savedTimestamps = localStorage.getItem(`ai_image_timestamps`)
+async function cleanExpiredImages() {
+  const savedImages = await store.get(`ai_generated_images`)
+  const savedTimestamps = await store.get(`ai_image_timestamps`)
 
   if (!savedImages) {
     return
   }
 
-  const images = JSON.parse(savedImages)
-  const prompts = savedPrompts ? JSON.parse(savedPrompts) : []
-  const timestamps = savedTimestamps ? JSON.parse(savedTimestamps) : []
+  const images = await store.getJSON(`ai_generated_images`, [])
+  const prompts = await store.getJSON(`ai_image_prompts`, [])
+  const timestamps = await store.getJSON(`ai_image_timestamps`, [])
 
   // 如果没有时间戳数据，说明是旧版本，默认清除所有数据
   if (!savedTimestamps || timestamps.length === 0) {
     console.log(`🧹 检测到旧版本数据，清除所有过期图片`)
     generatedImages.value = []
     imagePrompts.value = []
     imageTimestamps.value = []
-    localStorage.removeItem(`ai_generated_images`)
-    localStorage.removeItem(`ai_image_prompts`)
-    localStorage.removeItem(`ai_image_timestamps`)
+    await store.remove(`ai_generated_images`)
+    await store.remove(`ai_image_prompts`)
+    await store.remove(`ai_image_timestamps`)
     return
   }
 
@@ -111,28 +111,28 @@ function cleanExpiredImages() {
   imagePrompts.value = validPrompts
   imageTimestamps.value = validTimestamps
 
-  // 如果有数据被清除，更新localStorage
+  // 如果有数据被清除，更新存储
   if (validImages.length < images.length) {
     console.log(`🧹 清除了 ${images.length - validImages.length} 张过期图片`)
     if (validImages.length > 0) {
-      localStorage.setItem(`ai_generated_images`, JSON.stringify(validImages))
-      localStorage.setItem(`ai_image_prompts`, JSON.stringify(validPrompts))
-      localStorage.setItem(`ai_image_timestamps`, JSON.stringify(validTimestamps))
+      await store.setJSON(`ai_generated_images`, validImages)
+      await store.setJSON(`ai_image_prompts`, validPrompts)
+      await store.setJSON(`ai_image_timestamps`, validTimestamps)
     }
     else {
-      localStorage.removeItem(`ai_generated_images`)
-      localStorage.removeItem(`ai_image_prompts`)
-      localStorage.removeItem(`ai_image_timestamps`)
+      await store.remove(`ai_generated_images`)
+      await store.remove(`ai_image_prompts`)
+      await store.remove(`ai_image_timestamps`)
     }
   }
 
   console.log(`📊 过期检查完成，有效图片数量:`, validImages.length)
 }
 
 /* ---------- 初始数据 ---------- */
-onMounted(() => {
+onMounted(async () => {
   // 先进行过期检查和清理
-  cleanExpiredImages()
+  await cleanExpiredImages()
 
   // 确保数组长度一致
   const imagesLength = generatedImages.value.length
@@ -147,9 +147,9 @@ onMounted(() => {
     generatedImages.value = []
     imagePrompts.value = []
     imageTimestamps.value = []
-    localStorage.removeItem(`ai_generated_images`)
-    localStorage.removeItem(`ai_image_prompts`)
-    localStorage.removeItem(`ai_image_timestamps`)
+    await store.remove(`ai_generated_images`)
+    await store.remove(`ai_image_prompts`)
+    await store.remove(`ai_image_timestamps`)
   }
   else {
     // 补齐较短的数组
@@ -274,9 +274,9 @@ async function generateImage() {
           imageTimestamps.value = imageTimestamps.value.slice(0, 20)
         }
 
-        localStorage.setItem(`ai_generated_images`, JSON.stringify(generatedImages.value))
-        localStorage.setItem(`ai_image_prompts`, JSON.stringify(imagePrompts.value))
-        localStorage.setItem(`ai_image_timestamps`, JSON.stringify(imageTimestamps.value))
+        await store.setJSON(`ai_generated_images`, generatedImages.value)
+        await store.setJSON(`ai_image_prompts`, imagePrompts.value)
+        await store.setJSON(`ai_image_timestamps`, imageTimestamps.value)
 
         // 清空输入框
         prompt.value = ``
@@ -311,14 +311,14 @@ function cancelGeneration() {
 }
 
 /* ---------- 清空图像 ---------- */
-function clearImages() {
+async function clearImages() {
   generatedImages.value = []
   imagePrompts.value = []
   imageTimestamps.value = []
   currentImageIndex.value = 0
-  localStorage.removeItem(`ai_generated_images`)
-  localStorage.removeItem(`ai_image_prompts`)
-  localStorage.removeItem(`ai_image_timestamps`)
+  await store.remove(`ai_generated_images`)
+  await store.remove(`ai_image_prompts`)
+  await store.remove(`ai_image_timestamps`)
 }
 
 /* ---------- 下载图像 ---------- */
@@ -446,9 +446,9 @@ async function regenerateWithPrompt(promptText: string) {
           imageTimestamps.value = imageTimestamps.value.slice(0, 20)
         }
 
-        localStorage.setItem(`ai_generated_images`, JSON.stringify(generatedImages.value))
-        localStorage.setItem(`ai_image_prompts`, JSON.stringify(imagePrompts.value))
-        localStorage.setItem(`ai_image_timestamps`, JSON.stringify(imageTimestamps.value))
+        await store.setJSON(`ai_generated_images`, generatedImages.value)
+        await store.setJSON(`ai_image_prompts`, imagePrompts.value)
+        await store.setJSON(`ai_image_timestamps`, imageTimestamps.value)
       }
     }
     else {

apps/web/src/components/editor/CustomUploadForm.vue

@@ -3,11 +3,11 @@ import { Compartment } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
 import { javascriptSetup, theme } from '@md/shared'
 import { useUIStore } from '@/stores/ui'
-import { removeLeft } from '@/utils'
+import { removeLeft, store } from '@/utils'
 
-const code = useLocalStorage(`formCustomConfig`, removeLeft(`
+const code = store.reactive(`formCustomConfig`, removeLeft(`
   const { file, util, okCb, errCb } = CUSTOM_ARG
-  const param = new FormData()
+  param = new FormData()
   param.append('file', file)
   util.axios.post('${window.location.origin}/upload', param, {
     headers: { 'Content-Type': 'multipart/form-data' }
@@ -51,7 +51,6 @@ onUnmounted(() => {
 
 function formCustomSave() {
   const str = editor.value!.state.doc.toString()
-  localStorage.setItem(`formCustomConfig`, str)
   code.value = str
   toast.success(`保存成功`)
 }

apps/web/src/components/editor/InsertMpCardDialog.vue

@@ -3,7 +3,7 @@ import { toTypedSchema } from '@vee-validate/yup'
 import { Field, Form } from 'vee-validate'
 import * as yup from 'yup'
 import { useEditorStore } from '@/stores/editor'
-import { addPrefix } from '@/utils'
+import { addPrefix, store } from '@/utils'
 
 /** 编辑器实例和全局弹窗状态 */
 const editorStore = useEditorStore()
@@ -29,7 +29,7 @@ interface Config {
 }
 
 /** 表单字段 */
-const config = useStorage<Config>(addPrefix(`mp-profile`), {
+const config = store.reactive<Config>(addPrefix(`mp-profile`), {
   id: ``,
   name: ``,
   logo: ``,