feat: integrate js-lite-rest for data persistence

apps/web/package.json

@@ -52,6 +52,7 @@
     "highlight.js": "^11.11.1",
     "html-to-image": "^1.11.13",
     "isomorphic-dompurify": "^2.29.0",
+    "js-lite-rest": "^0.0.5",
     "juice": "^11.0.3",
     "lucide-vue-next": "^0.545.0",
     "marked": "^16.4.0",

apps/web/src/main.ts

@@ -1,6 +1,8 @@
 import { initializeMermaid } from '@md/core/utils'
+import JsLiteRest from 'js-lite-rest'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
+import { data } from '@/stores/defaultData'
 import App from './App.vue'
 
 import { setupComponents } from './utils/setup-components'
@@ -11,13 +13,38 @@ import 'vue-sonner/style.css'
 import '@/assets/index.css'
 import '@/assets/less/theme.less'
 
-// 异步初始化 mermaid，避免初始化顺序问题
-initializeMermaid().catch(console.error)
-
-setupComponents()
-
-const app = createApp(App)
-
-app.use(createPinia())
-
-app.mount(`#app`)
+;
+
+(async function () {
+  const storex = await JsLiteRest.create({
+    history: [],
+    posts: data.posts,
+  }, {
+    savePath: `storex`,
+  })
+  storex.use(async (args: any, next: any) => {
+    const restLog: any = {}
+    if (args[2]) {
+      // 统一处理 vue 包装的可能是响应式的特殊对象
+      args[2] = JSON.parse(JSON.stringify(args[2]))
+    }
+    let result = await next(args)
+    result = JSON.parse(JSON.stringify(result))
+    restLog.args = args
+    restLog.result = result
+    console.debug(`restLog`, args.slice(0, 2).join(`/`), args[2], result.data)
+    return result
+  })
+  window.storex = storex
+
+  // 异步初始化 mermaid，避免初始化顺序问题
+  initializeMermaid().catch(console.error)
+
+  setupComponents()
+
+  const app = createApp(App)
+
+  app.use(createPinia())
+
+  app.mount(`#app`)
+})()

apps/web/src/stores/defaultData.ts

@@ -0,0 +1,21 @@
+import { v4 as uuid } from 'uuid'
+import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
+
+const data = {
+  posts: [
+    {
+      id: uuid(),
+      title: `内容1`,
+      content: DEFAULT_CONTENT,
+      history: [
+        { datetime: new Date().toLocaleString(`zh-cn`), content: DEFAULT_CONTENT },
+      ],
+      createDatetime: new Date(),
+      updateDatetime: new Date(),
+    },
+  ],
+}
+
+export {
+  data,
+}

apps/web/src/stores/index.ts

@@ -11,8 +11,8 @@ import { cssSetup, theme as editorTheme } from '@md/shared/editor'
 import { toPng } from 'html-to-image'
 import { v4 as uuid } from 'uuid'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
-
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
+
 import {
   addPrefix,
   css2json,
@@ -30,6 +30,7 @@ import {
   sanitizeTitle,
 } from '@/utils'
 import { copyPlain } from '@/utils/clipboard'
+import { data } from './defaultData'
 
 /**********************************
  * Post 结构接口
@@ -117,18 +118,7 @@ export const useStore = defineStore(`store`, () => {
   /*******************************
    * 内容列表 posts：默认就带 id
    ******************************/
-  const posts = useStorage<Post[]>(addPrefix(`posts`), [
-    {
-      id: uuid(),
-      title: `内容1`,
-      content: DEFAULT_CONTENT,
-      history: [
-        { datetime: new Date().toLocaleString(`zh-cn`), content: DEFAULT_CONTENT },
-      ],
-      createDatetime: new Date(),
-      updateDatetime: new Date(),
-    },
-  ])
+  const posts = useStorage<Post[]>(addPrefix(`posts`), data.posts)
 
   // currentPostId 先存空串
   const currentPostId = useStorage(addPrefix(`current_post_id`), ``)
@@ -185,7 +175,7 @@ export const useStore = defineStore(`store`, () => {
   /********************************
    * CRUD
    ********************************/
-  const addPost = (title: string, parentId: string | null = null) => {
+  const addPost = async (title: string, parentId: string | null = null): Promise<void> => {
     const newPost: Post = {
       id: uuid(),
       title,
@@ -197,8 +187,12 @@ export const useStore = defineStore(`store`, () => {
       updateDatetime: new Date(),
       parentId,
     }
-    posts.value.push(newPost)
-    currentPostId.value = newPost.id
+    const res = await window.storex.post(`posts`, newPost)
+    posts.value.push(res)
+    currentPostId.value = res.id
+  }
+  const putPost = async (id: string, data: any): Promise<void> => {
+    window.storex.put(`posts/${id}`, { ...data, history: undefined }).catch(() => {})
   }
 
   const renamePost = (id: string, title: string) => {
@@ -207,11 +201,12 @@ export const useStore = defineStore(`store`, () => {
       post.title = title
   }
 
-  const delPost = (id: string) => {
+  const delPost = async (id: string): Promise<void> => {
     const idx = findIndexById(id)
     if (idx === -1)
       return
     posts.value.splice(idx, 1)
+    window.storex.delete(`posts/${id}`).catch(() => {})
     currentPostId.value = posts.value[Math.min(idx, posts.value.length - 1)]?.id ?? ``
   }
 
@@ -803,6 +798,7 @@ export const useStore = defineStore(`store`, () => {
     currentPostIndex,
     getPostById,
     addPost,
+    putPost,
     renamePost,
     delPost,
     isOpenPostSlider,

apps/web/src/types/global.d.ts

@@ -1,4 +1,5 @@
 interface Window {
+  storex: any
   __MP_Editor_JSAPI__: {
     invoke: (params: {
       apiName: string

apps/web/src/views/CodemirrorEditor.vue

@@ -420,6 +420,7 @@ function createFormTextArea(dom: HTMLDivElement) {
 
             currentPost.updateDatetime = new Date()
             currentPost.content = value
+            store.putPost(currentPost.id, currentPost)
           }, 300)
         }
       }),
@@ -516,6 +517,10 @@ onMounted(() => {
       content: currentPost.content,
       datetime: new Date().toLocaleString(`zh-CN`),
     })
+    window.storex.post(`history`, {
+      postsId: currentPost.id,
+      content: currentPost.content,
+    })
 
     currentPost.history.length = Math.min(currentPost.history.length, 10)
   }, 30 * 1000)