Squashed commit of the following:

commit 55f1634
Author: nekosu <liao.hy@outlook.com>
Date:   Thu Aug 10 01:31:28 2023 +0800

    feat: finial clean

commit 323bdbb
Author: nekosu <liao.hy@outlook.com>
Date:   Thu Aug 10 01:30:13 2023 +0800

    refactor: migrate to useVModel

commit 9d010f6
Author: nekosu <liao.hy@outlook.com>
Date:   Wed Aug 9 23:02:18 2023 +0800

    refactor: clean old fs

commit 8bb9ecb
Author: nekosu <liao.hy@outlook.com>
Date:   Wed Aug 9 20:51:37 2023 +0800

    feat: migrate into new fs

commit d4cdde6
Author: nekosu <liao.hy@outlook.com>
Date:   Wed Aug 9 20:01:21 2023 +0800

    refactor: api

commit e2b8aae
Author: nekosu <liao.hy@outlook.com>
Date:   Wed Aug 9 19:53:07 2023 +0800

    feat: Reimplement fs

commit fe3fd08
Author: nekosu <liao.hy@outlook.com>
Date:   Wed Aug 9 13:16:43 2023 +0800

    refactor: switch history to vueuse history

package.json

@@ -24,11 +24,11 @@
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.3.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "crypto-es": "^2.0.4",
-    "immer": "^10.0.2",
     "jszip": "^3.10.1",
     "naive-ui": "^2.34.4",
     "npm-run-all": "^4.1.5",
@@ -37,6 +37,7 @@
     "tailwindcss": "^3.3.3",
     "typescript": "~5.1.6",
     "vite": "^4.4.6",
-    "vue-tsc": "^1.8.6"
+    "vue-tsc": "^1.8.6",
+    "zipson": "^0.2.12"
   }
 }

src/App.vue

@@ -9,19 +9,17 @@ import {
 } from '@vicons/material'
 import { produce } from 'immer'
 import { NButton, NCard, NIcon } from 'naive-ui'
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
-import { active } from './data'
-import { getTask, setTask } from './data/task'
-import { history } from './history'
 import { loadFS, saveFS } from './loader'
 
-import { fs } from '@/data/fs'
+import { active, getTask, history, setTask } from '@/data'
+import { type PathKey, fs } from '@/filesystem'
 
 import TaskEdit from '@/components/TaskEdit.vue'
 import TaskTree from '@/components/TaskTree.vue'
 
-const expands = ref<string[]>(['/'])
+const expands = ref<PathKey[]>(['/' as PathKey])
 
 onMounted(async () => {
   await loadFS()
@@ -30,12 +28,12 @@ onMounted(async () => {
       ev.stopPropagation()
       ev.preventDefault()
       if (ev.shiftKey) {
-        if (fs.canRedo()) {
-          fs.redo()
+        if (fs.history.canRedo.value) {
+          fs.history.redo()
         }
       } else {
-        if (fs.canUndo()) {
-          fs.undo()
+        if (fs.history.canUndo.value) {
+          fs.history.undo()
         }
       }
     }
@@ -46,23 +44,23 @@ onMounted(async () => {
 <template>
   <div class="flex flex-col gap-2 flex-1 min-h-0">
     <div class="flex gap-2">
-      <NButton :disabled="!fs.canUndo()" @click="() => fs.undo()">
+      <NButton :disabled="!fs.history.canUndo.value" @click="fs.history.undo">
         <template #icon>
           <NIcon>
             <UndoOutlined></UndoOutlined>
           </NIcon>
         </template>
       </NButton>
-      <NButton :disabled="!fs.canRedo()" @click="() => fs.redo()">
+      <NButton :disabled="!fs.history.canRedo.value" @click="fs.history.redo">
         <template #icon>
           <NIcon>
             <RedoOutlined></RedoOutlined>
           </NIcon>
         </template>
       </NButton>
       <NButton
-        :disabled="!history.info.canUndo()"
-        @click="() => history.info.undo()"
+        :disabled="!history.info.canUndo.value"
+        @click="history.info.undo()"
       >
         <template #icon>
           <NIcon>
@@ -71,8 +69,8 @@ onMounted(async () => {
         </template>
       </NButton>
       <NButton
-        :disabled="!history.info.canRedo()"
-        @click="() => history.info.redo()"
+        :disabled="!history.info.canRedo.value"
+        @click="history.info.redo()"
       >
         <template #icon>
           <NIcon>
@@ -108,9 +106,9 @@ onMounted(async () => {
           <TaskEdit
             :name="active"
             :value="getTask(active)!"
-            :edit="
-              prod => {
-                setTask(active!, produce(getTask(active)!, prod))
+            @update:value="
+              task => {
+                setTask(active!, task)
               }
             "
           ></TaskEdit>
@@ -119,3 +117,4 @@ onMounted(async () => {
     </div>
   </div>
 </template>
+./data/history

src/api.ts

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+export async function load() {
+  return (
+    await axios.post('/api/load', null, {
+      responseType: 'arraybuffer'
+    })
+  ).data as ArrayBuffer
+}
+
+export async function save(blob: Blob) {
+  const form = new FormData()
+  form.append('file', blob)
+  await axios.post('/api/save', form, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}