feat: support create file and directories

server/src/index.ts

@@ -56,31 +56,60 @@ app.post('/api/list', async (req, res) => {
 
 app.post('/api/sync', async (req, res) => {
   const makePath = (p: string) => {
-    return path.join(...p.split('.')) + '.json'
+    return path.join(...p.split('/').filter(x => x))
   }
 
   const data = req.body as {
-    [task: string]: {
-      editor_info: {
-        path: string
+    dir: string[][]
+    file: string[][]
+    task: {
+      [task: string]: {
+        editor_info: {
+          path: string
+        }
       }
     }
   }
 
   const result: Record<string, Record<string, unknown>> = {}
 
-  for (const name in data) {
-    const task = data[name]
+  for (const dir of data.dir) {
+    await fs.mkdir(path.join(resDir, ...dir), { recursive: true })
+  }
+
+  const rmJson = async (dir: string) => {
+    for (const filename of await fs.readdir(dir)) {
+      const file = path.join(dir, filename)
+      if ((await fs.stat(file)).isDirectory()) {
+        await rmJson(file)
+      } else {
+        if (path.extname(filename) === '.json') {
+          await fs.rm(file)
+        }
+      }
+    }
+  }
+
+  await rmJson(resDir)
+
+  for (const file of data.file) {
+    if (file[file.length - 1].endsWith('.json')) {
+      result[path.join(...file)] = {}
+    }
+  }
+
+  for (const name in data.task) {
+    const task = data.task[name]
     const file = makePath(task.editor_info.path)
     result[file] = result[file] ?? {}
     result[file][name] = task
   }
 
   for (const file in result) {
-    await fs.writeFile(
-      path.join(resDir, file),
-      JSON.stringify(result[file], null, 4)
-    )
+    const target = path.join(resDir, file)
+    const dir = path.dirname(target)
+    await fs.mkdir(dir, { recursive: true })
+    await fs.writeFile(target, JSON.stringify(result[file], null, 4))
   }
 
   res.send({

src/App.vue

@@ -31,8 +31,12 @@ import {
 } from './history'
 import { loadData, syncData } from './loader'
 
+const expands = ref<string[]>(['root.'])
+
 onMounted(() => {
-  loadData()
+  loadData().then(folders => {
+    expands.value = ['root.', ...folders]
+  })
 })
 
 const someBackward = computed(() => {
@@ -115,10 +119,10 @@ const fastNavigate = computed<number>({
     </div>
     <div class="flex gap-2 flex-1 min-h-0">
       <NCard
-        class="max-w-xs min-h-0"
+        class="max-w-md min-h-0"
         content-style="max-height: 100%; display: flex; flex-direction: column"
       >
-        <TaskTree></TaskTree>
+        <TaskTree v-model:expand="expands"></TaskTree>
       </NCard>
       <NCard class="min-h-0" content-style="max-height: 100%">
         <template v-if="active && active in taskData.data">

src/Wrapper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NConfigProvider } from 'naive-ui'
+import { NConfigProvider, NDialogProvider } from 'naive-ui'
 import App from './App.vue'
 import hljs from 'highlight.js/lib/core'
 import hljs_json from 'highlight.js/lib/languages/json'
@@ -8,12 +8,9 @@ hljs.registerLanguage('json', hljs_json)
 </script>
 
 <template>
-  <Suspense>
-    <template #default>
-      <NConfigProvider :hljs="hljs" class="flex flex-col flex-1 min-h-0">
-        <App></App>
-      </NConfigProvider>
-    </template>
-    <template #fallback> loading... </template>
-  </Suspense>
+  <NDialogProvider>
+    <NConfigProvider :hljs="hljs" class="flex flex-col flex-1 min-h-0">
+      <App></App>
+    </NConfigProvider>
+  </NDialogProvider>
 </template>

src/components/TaskEdit.vue

@@ -23,7 +23,13 @@ import NavigateEdit from './NavigateEdit.vue'
 import RecognizerEdit from './RecognizerEdit.vue'
 import ActionEdit from './ActionEdit.vue'
 import { type Task, type Rect, type TextRepl, wrapProp } from '@/types'
-import { commitRename, taskData, commitDuplicate, commitDelete } from '@/data'
+import {
+  commitRename,
+  taskData,
+  commitDuplicate,
+  commitDelete,
+  isModified
+} from '@/data'
 import SingleNavigateEdit from './SingleNavigateEdit.vue'
 
 const props = defineProps<{
@@ -153,7 +159,7 @@ function tryDelete() {
 
   <div class="flex flex-col gap-4 max-h-full">
     <div class="flex justify-center gap-2 items-center">
-      <span class="text-lg"> {{ name }} </span>
+      <span class="text-lg"> {{ name }}{{ isModified(name) ? '*' : '' }} </span>
       <NButton @click="enterRename">
         <template #icon>
           <NIcon>

src/components/TaskTree.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { NInput, NTree, NIcon } from 'naive-ui'
-import { ref, computed } from 'vue'
-import { SearchOutlined } from '@vicons/material'
-import { taskTree, navigate, active } from '@/data'
+import { NInput, NTree, NIcon, type TreeOption } from 'naive-ui'
+import { ref, computed, h } from 'vue'
+import { ChangeCircleOutlined, SearchOutlined } from '@vicons/material'
+import { taskTree, navigate, active, isModified } from '@/data'
+import { renderLabel, renderPrefix, renderSuffix } from './TaskTreeRender'
+
+const expand = defineModel<string[]>('expand', {
+  required: true
+})
 
 const searchText = ref('')
 
@@ -16,10 +21,10 @@ const selectedKeysFilter = computed({
       return
     } else {
       const s = v[0]
-      if (s.endsWith('.')) {
+      if (s.endsWith('/')) {
         return
       }
-      const ps = s.split('.')
+      const ps = s.split('/')
       navigate(ps[ps.length - 1])
     }
   },
@@ -49,6 +54,7 @@ const treeHeight = computed(() => {
           height: treeHeight
         }"
         :data="[taskTree]"
+        v-model:expanded-keys="expand"
         v-model:selected-keys="selectedKeysFilter"
         block-line
         selectable
@@ -57,6 +63,9 @@ const treeHeight = computed(() => {
         :show-irrelevant-nodes="false"
         :cancelable="false"
         virtual-scroll
+        :render-label="renderLabel"
+        :render-prefix="renderPrefix"
+        :render-suffix="renderSuffix"
       ></NTree>
     </div>
   </div>