diff --git a/package-lock.json b/package-lock.json
index f256b8d..4222137 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       "devDependencies": {
         "@tsconfig/node18": "^18.2.0",
         "@types/node": "^18.17.0",
+        "@vicons/material": "^0.12.0",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vitejs/plugin-vue-jsx": "^3.0.1",
         "@vue/tsconfig": "^0.4.0",
@@ -1001,6 +1002,12 @@
       "integrity": "sha512-xlR1jahfizdplZYRU59JlUx9uzF1ARa8jbhM11ccpCJya8kvos5jwdm2ZAgxSCwOl0fq21svP18EVwPBXMQudw==",
       "dev": true
     },
+    "node_modules/@vicons/material": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/material/-/material-0.12.0.tgz",
+      "integrity": "sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
diff --git a/package.json b/package.json
index 1dcdd7c..25d6121 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@tsconfig/node18": "^18.2.0",
     "@types/node": "^18.17.0",
+    "@vicons/material": "^0.12.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/tsconfig": "^0.4.0",
diff --git a/src/TaskEdit.vue b/src/TaskEdit.vue
index 32a3c2a..fe9fda7 100644
--- a/src/TaskEdit.vue
+++ b/src/TaskEdit.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { NSelect, NButton, NSwitch, NInput } from 'naive-ui'
 import { computed, type Ref } from 'vue'
-import type { Task, Rect, TextRepl } from '@/types'
+import { type Task, type Rect, type TextRepl, wrapProp } from '@/types'
 import ClearButton from '@/components/ClearButton.vue'
 import SingleArrayEdit from '@/components/SingleArrayEdit.vue'
 import RectEdit from '@/components/RectEdit.vue'
 import TemplateEdit from '@/components/TemplateEdit.vue'
 import StringArrayEdit from '@/components/StringArrayEdit.vue'
 import JsonEdit from './components/JsonEdit.vue'
+import NavigateEdit from './components/NavigateEdit.vue'
+import RecognizerEdit from '@/components/RecognizerEdit.vue'
 
 defineProps<{
   name: string
@@ -20,55 +22,6 @@ const task = defineModel<Task>('value', {
   required: true
 })
 
-type RemUndefined<T> = T extends undefined ? never : T
-
-function wrapProp<T extends Record<string, unknown>, K extends string>(
-  obj: Ref<T>,
-  key: K
-) {
-  return computed<RemUndefined<T[K]> | null>({
-    set(v: RemUndefined<T[K]> | null) {
-      if (v === null) {
-        if (key in obj.value) {
-          delete obj.value[key]
-        }
-      } else {
-        obj.value[key] = v
-      }
-    },
-    get(): RemUndefined<T[K]> | null {
-      return (obj.value[key] ?? null) as RemUndefined<T[K]> | null
-    }
-  })
-}
-
-const recoOptions = ['DirectHit', 'TemplateMatch', 'OCR', 'Custom'].map(x => ({
-  label: x,
-  value: x
-}))
-
-const taskReco = wrapProp(task, 'recognition')
-const taskRecoValue = computed(() => taskReco.value ?? 'DirectHit')
-
-const taskRoi = wrapProp(task, 'roi')
-
-const taskTemplate = wrapProp(task, 'template')
-const taskThreshold = wrapProp(task, 'threshold')
-
-const taskMethod = wrapProp(task, 'method')
-const templMethodOptions = [1, 3, 5].map(x => ({
-  label: `${x}`,
-  value: x
-}))
-const taskGMask = wrapProp(task, 'green_mask')
-
-const taskText = wrapProp(task, 'text')
-const taskReplace = wrapProp(task, 'replace')
-const taskOnlyRec = wrapProp(task, 'only_rec')
-
-const taskCustomReco = wrapProp(task, 'custom_recognizer')
-const taskCustomRecoParam = wrapProp(task, 'custom_recognizer_param')
-
 const taskNext = wrapProp(task, 'next')
 const taskNextArr = computed(() =>
   typeof taskNext.value === 'string'
@@ -93,101 +46,12 @@ const taskNextArr = computed(() =>
           row-gap: 1rem;
         "
       >
-        <ClearButton v-model="taskReco"> 识别 </ClearButton>
-        <NSelect
-          v-model:value="taskReco"
-          :options="recoOptions"
-          :placeholder="recoOptions[0].label"
-        ></NSelect>
-        <template v-if="taskRecoValue !== 'Custom'">
-          <ClearButton v-model="taskRoi"> 区域 </ClearButton>
-          <SingleArrayEdit
-            v-model:value="taskRoi"
-            :def="() => [0, 0, 0, 0] as Rect"
-            :is-t="
-              v =>
-                v instanceof Array && v.length === 4 && typeof v[0] === 'number'
-            "
-          >
-            <template #edit="{ value, update }">
-              <RectEdit :value="value" @update:value="update"></RectEdit>
-            </template>
-          </SingleArrayEdit>
-        </template>
-        <template v-if="taskRecoValue === 'TemplateMatch'">
-          <TemplateEdit
-            v-model:template="taskTemplate"
-            v-model:threshold="taskThreshold"
-          ></TemplateEdit>
-          <ClearButton v-model="taskMethod"> 匹配算法 </ClearButton>
-          <NSelect
-            :options="templMethodOptions"
-            v-model:value="taskMethod"
-            placeholder="5"
-          ></NSelect>
-          <ClearButton v-model="taskGMask"> 绿色掩码 </ClearButton>
-          <div>
-            <NSwitch
-              :value="taskGMask ?? false"
-              @update:value="(v: boolean) => taskGMask = v"
-            ></NSwitch>
-          </div>
-        </template>
-        <template v-if="taskRecoValue === 'OCR'">
-          <ClearButton v-model="taskText" invalid> 文本 </ClearButton>
-          <StringArrayEdit
-            v-model:value="taskText"
-            :def="'test'"
-          ></StringArrayEdit>
-          <ClearButton v-model="taskReplace"> 文本替换 </ClearButton>
-          <SingleArrayEdit
-            v-model:value="taskReplace"
-            :nullable="true"
-            :def="() => (['aaa', 'bbb'] as TextRepl)"
-            :is-t="(v: TextRepl | TextRepl[]) => (v.length === 2 && typeof v[0] === 'string')"
-          >
-            <template #edit="{ value, update }">
-              <div class="flex gap-2">
-                <NInput
-                  :value="value[0]"
-                  @update:value="(v: string) => update([v, value[1]])"
-                >
-                  <template #prefix> 替换: </template>
-                </NInput>
-                <NInput
-                  :value="value[1]"
-                  @update:value="(v: string) => update([value[0], v])"
-                >
-                  <template #prefix> 为: </template>
-                </NInput>
-              </div>
-            </template>
-          </SingleArrayEdit>
-          <ClearButton v-model="taskOnlyRec"> 仅识别 </ClearButton>
-          <div>
-            <NSwitch
-              :value="taskOnlyRec ?? false"
-              @update:value="(v: boolean) => taskOnlyRec = v"
-            ></NSwitch>
-          </div>
-        </template>
-        <template v-if="taskRecoValue === 'Custom'">
-          <ClearButton v-model="taskCustomReco" invalid> 识别器 </ClearButton>
-          <NInput
-            :value="taskCustomReco ?? 'demo_reco'"
-            @update:value="v => (taskCustomReco = v)"
-          ></NInput>
-          <ClearButton v-model="taskCustomRecoParam"> 识别参数 </ClearButton>
-          <JsonEdit v-model:value="taskCustomRecoParam"></JsonEdit>
-        </template>
+        <RecognizerEdit v-model:value="task"></RecognizerEdit>
         <ClearButton v-model="taskNext"> 导航 </ClearButton>
-        <div class="flex flex-col gap-2">
-          <div v-for="(s, i) in taskNextArr" :key="i" class="flex">
-            <NButton @click="$emit('navigate', s)">
-              {{ s }}
-            </NButton>
-          </div>
-        </div>
+        <NavigateEdit
+          v-model:value="taskNext"
+          :navigate="s => $emit('navigate', s)"
+        ></NavigateEdit>
       </div>
       <JsonEdit v-model:value="task"></JsonEdit>
     </div>
diff --git a/src/components/NavigateEdit.vue b/src/components/NavigateEdit.vue
new file mode 100644
index 0000000..2630882
--- /dev/null
+++ b/src/components/NavigateEdit.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import SingleArrayEdit from './SingleArrayEdit.vue'
+import SingleNavigateEdit from './SingleNavigateEdit.vue'
+
+defineProps<{
+  navigate: (to: string) => void
+}>()
+
+const val = defineModel<string | string[] | null>('value', {
+  required: true
+})
+</script>
+
+<template>
+  <SingleArrayEdit
+    v-model:value="val"
+    :nullable="true"
+    :no-single="true"
+    :def="() => 'FakeTask'"
+    :is-t="(v: string | string[]) => (typeof v === 'string')"
+  >
+    <template #edit="{ value, update }">
+      <SingleNavigateEdit
+        :value="value"
+        @update:value="update"
+        :navigate="navigate"
+      ></SingleNavigateEdit>
+    </template>
+  </SingleArrayEdit>
+</template>
diff --git a/src/components/RecognizerEdit.vue b/src/components/RecognizerEdit.vue
new file mode 100644
index 0000000..8f73999
--- /dev/null
+++ b/src/components/RecognizerEdit.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { NSelect, NButton, NSwitch, NInput } from 'naive-ui'
+import { computed, type Ref } from 'vue'
+import { type Task, type Rect, type TextRepl, wrapProp } from '@/types'
+import ClearButton from './ClearButton.vue'
+import SingleArrayEdit from './SingleArrayEdit.vue'
+import RectEdit from './RectEdit.vue'
+import TemplateEdit from './TemplateEdit.vue'
+import StringArrayEdit from './StringArrayEdit.vue'
+import JsonEdit from './JsonEdit.vue'
+import NavigateEdit from './NavigateEdit.vue'
+
+const task = defineModel<Task>('value', {
+  required: true
+})
+
+const recoOptions = ['DirectHit', 'TemplateMatch', 'OCR', 'Custom'].map(x => ({
+  label: x,
+  value: x
+}))
+
+const taskReco = wrapProp(task, 'recognition')
+const taskRecoValue = computed(() => taskReco.value ?? 'DirectHit')
+
+const taskRoi = wrapProp(task, 'roi')
+
+const taskTemplate = wrapProp(task, 'template')
+const taskThreshold = wrapProp(task, 'threshold')
+
+const taskMethod = wrapProp(task, 'method')
+const templMethodOptions = [1, 3, 5].map(x => ({
+  label: `${x}`,
+  value: x
+}))
+const taskGMask = wrapProp(task, 'green_mask')
+
+const taskText = wrapProp(task, 'text')
+const taskReplace = wrapProp(task, 'replace')
+const taskOnlyRec = wrapProp(task, 'only_rec')
+
+const taskCustomReco = wrapProp(task, 'custom_recognizer')
+const taskCustomRecoParam = wrapProp(task, 'custom_recognizer_param')
+</script>
+
+<template>
+  <ClearButton v-model="taskReco"> 识别 </ClearButton>
+  <NSelect
+    v-model:value="taskReco"
+    :options="recoOptions"
+    :placeholder="recoOptions[0].label"
+  ></NSelect>
+  <template v-if="taskRecoValue !== 'Custom'">
+    <ClearButton v-model="taskRoi"> 识别区域 </ClearButton>
+    <SingleArrayEdit
+      v-model:value="taskRoi"
+      :nullable="true"
+      :def="() => [0, 0, 0, 0] as Rect"
+      :is-t="
+        v => v instanceof Array && v.length === 4 && typeof v[0] === 'number'
+      "
+    >
+      <template #edit="{ value, update }">
+        <RectEdit :value="value" @update:value="update"></RectEdit>
+      </template>
+    </SingleArrayEdit>
+  </template>
+  <template v-if="taskRecoValue === 'TemplateMatch'">
+    <TemplateEdit
+      v-model:template="taskTemplate"
+      v-model:threshold="taskThreshold"
+    ></TemplateEdit>
+    <ClearButton v-model="taskMethod"> 匹配算法 </ClearButton>
+    <NSelect
+      :options="templMethodOptions"
+      v-model:value="taskMethod"
+      placeholder="5"
+    ></NSelect>
+    <ClearButton v-model="taskGMask"> 绿色掩码 </ClearButton>
+    <div>
+      <NSwitch
+        :value="taskGMask ?? false"
+        @update:value="(v: boolean) => taskGMask = v"
+      ></NSwitch>
+    </div>
+  </template>
+  <template v-if="taskRecoValue === 'OCR'">
+    <ClearButton v-model="taskText" invalid> 文本 </ClearButton>
+    <StringArrayEdit v-model:value="taskText" :def="'test'"></StringArrayEdit>
+    <ClearButton v-model="taskReplace"> 文本替换 </ClearButton>
+    <SingleArrayEdit
+      v-model:value="taskReplace"
+      :nullable="true"
+      :def="() => (['aaa', 'bbb'] as TextRepl)"
+      :is-t="(v: TextRepl | TextRepl[]) => (v.length === 2 && typeof v[0] === 'string')"
+    >
+      <template #edit="{ value, update }">
+        <div class="flex gap-2">
+          <NInput
+            :value="value[0]"
+            @update:value="(v: string) => update([v, value[1]])"
+          >
+            <template #prefix> 替换: </template>
+          </NInput>
+          <NInput
+            :value="value[1]"
+            @update:value="(v: string) => update([value[0], v])"
+          >
+            <template #prefix> 为: </template>
+          </NInput>
+        </div>
+      </template>
+    </SingleArrayEdit>
+    <ClearButton v-model="taskOnlyRec"> 仅识别 </ClearButton>
+    <div>
+      <NSwitch
+        :value="taskOnlyRec ?? false"
+        @update:value="(v: boolean) => taskOnlyRec = v"
+      ></NSwitch>
+    </div>
+  </template>
+  <template v-if="taskRecoValue === 'Custom'">
+    <ClearButton v-model="taskCustomReco" invalid> 识别器 </ClearButton>
+    <NInput
+      :value="taskCustomReco ?? 'demo_reco'"
+      @update:value="v => (taskCustomReco = v)"
+    ></NInput>
+    <ClearButton v-model="taskCustomRecoParam"> 识别参数 </ClearButton>
+    <JsonEdit v-model:value="taskCustomRecoParam"></JsonEdit>
+  </template>
+</template>
diff --git a/src/components/SingleArrayEdit.vue b/src/components/SingleArrayEdit.vue
index 48a3108..6c45483 100644
--- a/src/components/SingleArrayEdit.vue
+++ b/src/components/SingleArrayEdit.vue
@@ -6,13 +6,15 @@ import SingleArrayButton from './SingleArrayButton.vue'
 const props = withDefaults(
   defineProps<{
     nullable?: boolean
+    noSingle?: boolean
     def: () => T
     isT: (v: T | T[]) => boolean
     onAdd?: () => void
     onDel?: (idx: number) => void
   }>(),
   {
-    nullable: false
+    nullable: false,
+    noSingle: false
   }
 )
 
@@ -60,7 +62,11 @@ const single = computed({
 function add() {
   if (isSingle.value) {
     if (props.nullable && val.value === null) {
-      val.value = props.def()
+      if (props.noSingle) {
+        val.value = [props.def()]
+      } else {
+        val.value = props.def()
+      }
     }
   } else {
     ;(val.value as T[]).push(props.def())
@@ -92,7 +98,10 @@ function remove(idx: number) {
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex gap-2">
-      <SingleArrayButton v-model:value="single"></SingleArrayButton>
+      <SingleArrayButton
+        v-if="!noSingle"
+        v-model:value="single"
+      ></SingleArrayButton>
       <NButton :disabled="single && val !== null" @click="add"> 添加 </NButton>
     </div>
     <div
diff --git a/src/components/SingleNavigateEdit.vue b/src/components/SingleNavigateEdit.vue
new file mode 100644
index 0000000..2cb8a4f
--- /dev/null
+++ b/src/components/SingleNavigateEdit.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { NButton, NIcon, NAutoComplete } from 'naive-ui'
+import { computed } from 'vue'
+import { NavigateNextOutlined } from '@vicons/material'
+import { taskData } from '@/data'
+
+defineProps<{
+  navigate: (to: string) => void
+}>()
+
+const val = defineModel<string>('value', {
+  required: true
+})
+
+const options = computed(() => {
+  const lowerSearch = val.value.toLowerCase()
+  return Object.keys(taskData.data)
+    .map(name => ({
+      name,
+      type: name.toLowerCase().startsWith(lowerSearch)
+        ? 0
+        : name.toLowerCase().indexOf(lowerSearch) !== -1
+        ? 1
+        : 2
+    }))
+    .filter(({ type }) => type < 2)
+    .sort((a, b) => a.type - b.type)
+    .map(x => ({
+      label: x.name,
+      value: x.name
+    }))
+})
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <NButton @click="navigate(value)">
+      <template #icon>
+        <NIcon>
+          <NavigateNextOutlined></NavigateNextOutlined>
+        </NIcon>
+      </template>
+      跳转
+    </NButton>
+    <NAutoComplete
+      v-model:value="val"
+      :input-props="{
+        autocomplete: 'disabled'
+      }"
+      :options="options"
+      placeholder="邮箱"
+    ></NAutoComplete>
+  </div>
+</template>
diff --git a/src/data.ts b/src/data.ts
index 4710907..a1e1bc4 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -1,6 +1,7 @@
 import type { TreeOption } from 'naive-ui'
 import { computed, reactive } from 'vue'
 import type { Task } from './types'
+import { loadData } from './demo/loader'
 
 export interface TaskData {
   [task: string]: Task
@@ -63,483 +64,4 @@ export const taskTree = computed<TreeOption[]>(() => {
   return result
 })
 
-taskData.data = JSON.parse(`{
-  "Combat": {
-      "next": [
-          "EnterTheShow",
-          "Sub_StartUp"
-      ]
-  },
-  "EnterTheShow": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/EnterTheShow.png",
-      "roi": [
-          926,
-          221,
-          229,
-          153
-      ],
-      "action": "Click",
-      "next_doc": "Set in code."
-  },
-  "MainChapter_1": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/MainChapter_1.png",
-      "roi": [
-          60,
-          98,
-          318,
-          455
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "MainChapter_2": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/MainChapter_2.png",
-      "roi": [
-          340,
-          99,
-          310,
-          452
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "MainChapter_3": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/MainChapter_3.png",
-      "roi": [
-          618,
-          98,
-          313,
-          455
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "MainChapter_4": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/MainChapter_4.png",
-      "roi": [
-          897,
-          108,
-          316,
-          444
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "Sub_ResourceChapterLabel": {
-      "is_sub": true,
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/ResourceChapterLabel.png",
-      "threshold": 0.98,
-      "roi": [
-          230,
-          577,
-          145,
-          142
-      ],
-      "action": "Click"
-  },
-  "ResourceChapter_LP": {
-      "doc": "尘埃运动",
-      "next": [
-          "ResourceChapter_LPEnter",
-          "Sub_ResourceChapterLabel"
-      ]
-  },
-  "ResourceChapter_LPEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/ResourceChapter_LPEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "ResourceChapter_MA": {
-      "doc": "猪鼻美学",
-      "next": [
-          "ResourceChapter_MAEnter",
-          "Sub_ResourceChapterLabel",
-          "Sub_SwipeRightForChapter"
-      ]
-  },
-  "ResourceChapter_MAEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/ResourceChapter_MAEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "ResourceChapter_HP": {
-      "doc": "丰收时令",
-      "next": [
-          "ResourceChapter_HPEnter",
-          "Sub_ResourceChapterLabel",
-          "Sub_SwipeRightForChapter"
-      ]
-  },
-  "ResourceChapter_HPEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/ResourceChapter_HPEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "Sub_PromotionChapterLabel": {
-      "is_sub": true,
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/PromotionChapterLabel.png",
-      "threshold": 0.98,
-      "roi": [
-          388,
-          578,
-          157,
-          133
-      ],
-      "action": "Click"
-  },
-  "PromotionChapter_ME": {
-      "doc": "群山之声",
-      "next": [
-          "PromotionChapter_MEEnter",
-          "Sub_PromotionChapterLabel"
-      ]
-  },
-  "PromotionChapter_MEEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/PromotionChapter_MEEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "PromotionChapter_SL": {
-      "doc": "星陨之所",
-      "next": [
-          "PromotionChapter_SLEnter",
-          "Sub_PromotionChapterLabel"
-      ]
-  },
-  "PromotionChapter_SLEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/PromotionChapter_SLEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "PromotionChapter_SS": {
-      "doc": "深林之形",
-      "next": [
-          "PromotionChapter_SSEnter",
-          "Sub_PromotionChapterLabel",
-          "Sub_SwipeRightForChapter"
-      ]
-  },
-  "PromotionChapter_SSEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/PromotionChapter_SSEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "PromotionChapter_BW": {
-      "doc": "荒兽之野",
-      "next": [
-          "PromotionChapter_BWEnter",
-          "Sub_PromotionChapterLabel",
-          "Sub_SwipeRightForChapter"
-      ]
-  },
-  "PromotionChapter_BWEnter": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/PromotionChapter_BWEnter.png",
-      "threshold": 0.9,
-      "roi": [
-          0,
-          153,
-          1280,
-          367
-      ],
-      "action": "Click",
-      "next": "SwipeLeftAndFindStage"
-  },
-  "Sub_SwipeRightForChapter": {
-      "is_sub": true,
-      "action": "Swipe",
-      "begin": [
-          1100,
-          300,
-          100,
-          100
-      ],
-      "end": [
-          100,
-          300,
-          100,
-          100
-      ]
-  },
-  "SwipeLeftAndFindStage": {
-      "next": [
-          "TargetStageName",
-          "TheFarLeftOfStageList",
-          "SwipeLeftForStageList"
-      ]
-  },
-  "TargetStageName": {
-      "recognition": "OCR",
-      "text_doc": "Set in code.",
-      "roi": [
-          0,
-          470,
-          1280,
-          160
-      ],
-      "action": "Click",
-      "next": [
-          "StageDifficulty"
-      ]
-  },
-  "TheFarLeftOfStageList": {
-      "recognition": "OCR",
-      "text": "01",
-      "roi": [
-          0,
-          470,
-          1280,
-          160
-      ],
-      "next": [
-          "Combat"
-      ]
-  },
-  "SwipeLeftForStageList": {
-      "action": "Swipe",
-      "begin": [
-          100,
-          550,
-          100,
-          50
-      ],
-      "end": [
-          1100,
-          550,
-          100,
-          50
-      ],
-      "next": [
-          "SwipeLeftAndFindStage"
-      ]
-  },
-  "StageDifficulty": {
-      "next_doc": "Set in code."
-  },
-  "StageDifficulty_Story": {
-      "recognition": "OCR",
-      "text": [
-          "故事"
-      ],
-      "roi": [
-          837,
-          167,
-          443,
-          194
-      ],
-      "action": "Click",
-      "next": [
-          "ReadyForAction"
-      ]
-  },
-  "StageDifficulty_Hard": {
-      "recognition": "OCR",
-      "text": [
-          "厄险"
-      ],
-      "roi": [
-          837,
-          167,
-          443,
-          194
-      ],
-      "action": "Click",
-      "next": [
-          "ReadyForAction"
-      ]
-  },
-  "StageDifficulty_None": {
-      "next": [
-          "ReadyForAction"
-      ]
-  },
-  "ReadyForAction": {
-      "recognition": "OCR",
-      "text": [
-          "开始行动"
-      ],
-      "roi": [
-          900,
-          500,
-          380,
-          220
-      ],
-      "action": "Click",
-      "next": [
-          "SwitchToReplay",
-          "OpenReplaysTimes"
-      ]
-  },
-  "SwitchToReplay": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/SwitchToReplay.png",
-      "roi": [
-          781,
-          581,
-          145,
-          139
-      ],
-      "action": "Click",
-      "next": [
-          "OpenReplaysTimes"
-      ]
-  },
-  "OpenReplaysTimes": {
-      "recognition": "TemplateMatch",
-      "template": "template/Combat/OpenReplaysTimes.png",
-      "roi": [
-          737,
-          586,
-          174,
-          134
-      ],
-      "action": "Click",
-      "next": [
-          "SetReplaysTimes",
-          "StartReplay"
-      ]
-  },
-  "SetReplaysTimes": {
-      "recognition": "OCR",
-      "text_doc": "Set in code.",
-      "roi": [
-          791,
-          391,
-          73,
-          238
-      ],
-      "action": "Click",
-      "next": [
-          "StartReplay"
-      ]
-  },
-  "StartReplay": {
-      "recognition": "OCR",
-      "text": [
-          "复现"
-      ],
-      "roi": [
-          958,
-          537,
-          235,
-          136
-      ],
-      "action": "Click",
-      "next": [
-          "Replaying",
-          "StartReplay",
-          "RecoveryPage"
-      ]
-  },
-  "RecoveryPage": {
-      "recognition": "OCR",
-      "text": [
-          "活性",
-          "恢复"
-      ],
-      "roi": [
-          465,
-          571,
-          277,
-          149
-      ],
-      "action": "Click",
-      "target": "StartReplay",
-      "next": [
-          "HomeFlag",
-          "Sub_StartUp"
-      ]
-  },
-  "Replaying": {
-      "recognition": "OCR",
-      "text": [
-          "行为",
-          "复现"
-      ],
-      "roi": [
-          1078,
-          77,
-          202,
-          143
-      ],
-      "post_delay": 5000,
-      "next": [
-          "Replaying",
-          "Victory"
-      ]
-  },
-  "Victory": {
-      "recognition": "OCR",
-      "text": [
-          "战斗",
-          "胜利"
-      ],
-      "roi": [
-          678,
-          10,
-          473,
-          240
-      ],
-      "action": "Click",
-      "next": [
-          "Victory",
-          "HomeFlag",
-          "Sub_StartUp"
-      ]
-  }
-}`)
+loadData()
diff --git a/src/demo/awards.json b/src/demo/awards.json
new file mode 100644
index 0000000..af1dffc
--- /dev/null
+++ b/src/demo/awards.json
@@ -0,0 +1,91 @@
+{
+  "Awards": {
+    "next": [
+      "Sub_MailBadge",
+      "Sub_DailyBadge",
+      "HomeFlag",
+      "Sub_ObtainedAwards",
+      "Sub_StartUp"
+    ]
+  },
+  "Sub_MailBadge": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Awards/MailBadge.png",
+    "threshold": 0.98,
+    "roi": [47, 115, 108, 108],
+    "action": "Click",
+    "next": ["CollectMailAwards", "Sub_MailBadge"]
+  },
+  "CollectMailAwards": {
+    "recognition": "TemplateMatch",
+    "template": "Awards/CollectMailAwards.png",
+    "roi": [109, 551, 191, 132],
+    "action": "Click",
+    "next": ["Sub_ObtainedAwards", "NoMailAwards", "CollectMailAwards"]
+  },
+  "Sub_ObtainedAwards": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Awards/ObtainedAwards.png",
+    "roi": [524, 62, 232, 158],
+    "action": "Click"
+  },
+  "NoMailAwards": {
+    "recognition": "TemplateMatch",
+    "template": "Awards/NoMailAwards.png",
+    "roi": [952, 39, 164, 163],
+    "next": ["HomeFlag", "Sub_HomeButton", "Sub_BackButton"]
+  },
+  "Sub_DailyBadge": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Awards/DailyBadge.png",
+    "threshold": 0.98,
+    "action": "Click",
+    "roi": [44, 194, 111, 110],
+    "next": [
+      "Sub_CollectDailyAwards",
+      "Sub_ObtainedDailyAwards",
+      "WeeklyAwardsBadge",
+      "DailyAwardsPageFlag"
+    ]
+  },
+  "Sub_CollectDailyAwards": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": [
+      "Awards/CollectDailyAwards.png",
+      "Awards/CollectSingleDailyAwards.png"
+    ],
+    "action": "Click",
+    "post_wait_freezes": 1,
+    "roi": [1075, 63, 201, 183]
+  },
+  "Sub_ObtainedDailyAwards": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Awards/ObtainedAwards.png",
+    "roi": [524, 62, 232, 158],
+    "action": "Click"
+  },
+  "WeeklyAwardsBadge": {
+    "recognition": "TemplateMatch",
+    "template": "Awards/WeeklyAwardsBadge.png",
+    "threshold": 0.98,
+    "action": "Click",
+    "roi": [1165, 0, 111, 113],
+    "next": [
+      "Sub_CollectDailyAwards",
+      "Sub_ObtainedDailyAwards",
+      "WeeklyAwardsBadge",
+      "Sub_BackButton",
+      "HomeFlag"
+    ]
+  },
+  "DailyAwardsPageFlag": {
+    "recognition": "TemplateMatch",
+    "template": "Awards/DailyAwardsPageFlag.png",
+    "roi": [458, 0, 138, 136]
+  }
+}
diff --git a/src/demo/combat.json b/src/demo/combat.json
new file mode 100644
index 0000000..4ecb99d
--- /dev/null
+++ b/src/demo/combat.json
@@ -0,0 +1,264 @@
+{
+  "Combat": {
+    "next": ["EnterTheShow", "Sub_StartUp"]
+  },
+  "EnterTheShow": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/EnterTheShow.png",
+    "roi": [926, 221, 229, 153],
+    "action": "Click",
+    "next_doc": "Set in code."
+  },
+  "MainChapter_1": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/MainChapter_1.png",
+    "roi": [60, 98, 318, 455],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "MainChapter_2": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/MainChapter_2.png",
+    "roi": [340, 99, 310, 452],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "MainChapter_3": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/MainChapter_3.png",
+    "roi": [618, 98, 313, 455],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "MainChapter_4": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/MainChapter_4.png",
+    "roi": [897, 108, 316, 444],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "Sub_ResourceChapterLabel": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Combat/ResourceChapterLabel.png",
+    "threshold": 0.98,
+    "roi": [230, 577, 145, 142],
+    "action": "Click"
+  },
+  "ResourceChapter_LP": {
+    "doc": "尘埃运动",
+    "next": ["ResourceChapter_LPEnter", "Sub_ResourceChapterLabel"]
+  },
+  "ResourceChapter_LPEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/ResourceChapter_LPEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "ResourceChapter_MA": {
+    "doc": "猪鼻美学",
+    "next": [
+      "ResourceChapter_MAEnter",
+      "Sub_ResourceChapterLabel",
+      "Sub_SwipeRightForChapter"
+    ]
+  },
+  "ResourceChapter_MAEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/ResourceChapter_MAEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "ResourceChapter_HP": {
+    "doc": "丰收时令",
+    "next": [
+      "ResourceChapter_HPEnter",
+      "Sub_ResourceChapterLabel",
+      "Sub_SwipeRightForChapter"
+    ]
+  },
+  "ResourceChapter_HPEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/ResourceChapter_HPEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "Sub_PromotionChapterLabel": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "Combat/PromotionChapterLabel.png",
+    "threshold": 0.98,
+    "roi": [388, 578, 157, 133],
+    "action": "Click"
+  },
+  "PromotionChapter_ME": {
+    "doc": "群山之声",
+    "next": ["PromotionChapter_MEEnter", "Sub_PromotionChapterLabel"]
+  },
+  "PromotionChapter_MEEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/PromotionChapter_MEEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "PromotionChapter_SL": {
+    "doc": "星陨之所",
+    "next": ["PromotionChapter_SLEnter", "Sub_PromotionChapterLabel"]
+  },
+  "PromotionChapter_SLEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/PromotionChapter_SLEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "PromotionChapter_SS": {
+    "doc": "深林之形",
+    "next": [
+      "PromotionChapter_SSEnter",
+      "Sub_PromotionChapterLabel",
+      "Sub_SwipeRightForChapter"
+    ]
+  },
+  "PromotionChapter_SSEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/PromotionChapter_SSEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "PromotionChapter_BW": {
+    "doc": "荒兽之野",
+    "next": [
+      "PromotionChapter_BWEnter",
+      "Sub_PromotionChapterLabel",
+      "Sub_SwipeRightForChapter"
+    ]
+  },
+  "PromotionChapter_BWEnter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/PromotionChapter_BWEnter.png",
+    "threshold": 0.9,
+    "roi": [0, 153, 1280, 367],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "Sub_SwipeRightForChapter": {
+    "is_sub": true,
+    "action": "Swipe",
+    "begin": [1100, 300, 100, 100],
+    "end": [100, 300, 100, 100]
+  },
+  "SwipeLeftAndFindStage": {
+    "next": [
+      "TargetStageName",
+      "TheFarLeftOfStageList",
+      "SwipeLeftForStageList"
+    ]
+  },
+  "TargetStageName": {
+    "recognition": "OCR",
+    "text_doc": "Set in code.",
+    "roi": [0, 470, 1280, 160],
+    "action": "Click",
+    "next": ["StageDifficulty"]
+  },
+  "TheFarLeftOfStageList": {
+    "recognition": "OCR",
+    "text": "01",
+    "roi": [0, 470, 1280, 160]
+  },
+  "SwipeLeftForStageList": {
+    "action": "Swipe",
+    "begin": [300, 550, 100, 50],
+    "end": [900, 550, 100, 50],
+    "next": ["SwipeLeftAndFindStage"]
+  },
+  "StageDifficulty": {
+    "next_doc": "Set in code."
+  },
+  "StageDifficulty_Story": {
+    "recognition": "OCR",
+    "text": ["故事"],
+    "roi": [837, 167, 443, 194],
+    "action": "Click",
+    "next": ["ReadyForAction"]
+  },
+  "StageDifficulty_Hard": {
+    "recognition": "OCR",
+    "text": ["厄险"],
+    "roi": [837, 167, 443, 194],
+    "action": "Click",
+    "next": ["ReadyForAction"]
+  },
+  "StageDifficulty_None": {
+    "next": ["ReadyForAction"]
+  },
+  "ReadyForAction": {
+    "recognition": "OCR",
+    "text": ["开始行动"],
+    "roi": [900, 500, 380, 220],
+    "action": "Click",
+    "next": ["SwitchToReplay", "OpenReplaysTimes"]
+  },
+  "SwitchToReplay": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/SwitchToReplay.png",
+    "roi": [781, 581, 145, 139],
+    "action": "Click",
+    "next": ["OpenReplaysTimes"]
+  },
+  "OpenReplaysTimes": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/OpenReplaysTimes.png",
+    "roi": [737, 586, 174, 134],
+    "action": "Click",
+    "next": ["SetReplaysTimes", "StartReplay"]
+  },
+  "SetReplaysTimes": {
+    "recognition": "OCR",
+    "text_doc": "Set in code.",
+    "roi": [791, 391, 73, 238],
+    "action": "Click",
+    "next": ["StartReplay"]
+  },
+  "StartReplay": {
+    "recognition": "OCR",
+    "text": ["复现"],
+    "roi": [958, 537, 235, 136],
+    "action": "Click",
+    "next": ["Replaying", "StartReplay", "RecoveryPage"]
+  },
+  "RecoveryPage": {
+    "recognition": "OCR",
+    "text": ["活性", "恢复"],
+    "roi": [465, 571, 277, 149],
+    "action": "Click",
+    "target": "StartReplay",
+    "next": ["HomeFlag", "Sub_StartUp"]
+  },
+  "Replaying": {
+    "recognition": "OCR",
+    "text": ["行为", "复现"],
+    "roi": [1078, 77, 202, 143],
+    "post_delay": 5000,
+    "next": ["Replaying", "Victory"]
+  },
+  "Victory": {
+    "recognition": "OCR",
+    "text": ["战斗", "胜利"],
+    "roi": [678, 10, 473, 240],
+    "action": "Click",
+    "next": ["Victory", "HomeFlag", "Sub_StartUp"]
+  }
+}
diff --git a/src/demo/combat_activity.json b/src/demo/combat_activity.json
new file mode 100644
index 0000000..2512769
--- /dev/null
+++ b/src/demo/combat_activity.json
@@ -0,0 +1,36 @@
+{
+  "ANightmareAtGreenLake": {
+    "next": ["ANightmareAtGreenLakeEnterTheShow", "Sub_StartUp"]
+  },
+  "ANightmareAtGreenLakeEnterTheShow": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/Activity/ANightmareAtGreenLakeEnterTheShow.png",
+    "roi": [940, 144, 244, 146],
+    "action": "Click",
+    "post_wait_freezes": 1,
+    "next": ["ANightmareAtGreenLakeMainChapter"]
+  },
+  "ANightmareAtGreenLakeMainChapter": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/Activity/ANightmareAtGreenLakeMainChapter.png",
+    "roi": [892, 400, 146, 177],
+    "action": "Click",
+    "next": "SwipeLeftAndFindStage"
+  },
+  "ActivityStageDifficulty": {
+    "next": ["ActivityStageDifficulty_Hard", "ActivityStageDifficultyToRight"]
+  },
+  "ActivityStageDifficulty_Hard": {
+    "recognition": "OCR",
+    "text": ["艰难"],
+    "roi": [945, 168, 210, 171],
+    "next": ["ReadyForAction"]
+  },
+  "ActivityStageDifficultyToRight": {
+    "recognition": "TemplateMatch",
+    "template": "Combat/Activity/ActivityStageDifficultyToRight.png",
+    "roi": [1126, 183, 130, 139],
+    "action": "Click",
+    "next": ["ActivityStageDifficulty"]
+  }
+}
diff --git a/src/demo/loader.ts b/src/demo/loader.ts
new file mode 100644
index 0000000..fe7cec8
--- /dev/null
+++ b/src/demo/loader.ts
@@ -0,0 +1,28 @@
+import Awards from './awards.json'
+import Combat_Act from './combat_activity.json'
+import Combat from './combat.json'
+import Psychube from './psychube.json'
+import Startup from './startup.json'
+import Wilderness from './wilderness.json'
+import { taskData, type TaskData } from '@/data'
+
+function appendPath(data: TaskData, path: string) {
+  for (const key in data) {
+    data[key].editor_info = {
+      path,
+      ...(data[key].editor_info ?? {})
+    }
+  }
+  return data
+}
+
+export function loadData() {
+  taskData.data = {
+    ...appendPath(Awards as any, 'Awards'),
+    ...appendPath(Combat_Act as any, 'CombatActivity'),
+    ...appendPath(Combat as any, 'Combat'),
+    ...appendPath(Psychube as any, 'Psychube'),
+    ...appendPath(Startup as any, 'Startup'),
+    ...appendPath(Wilderness as any, 'Wilderness')
+  }
+}
diff --git a/src/demo/psychube.json b/src/demo/psychube.json
new file mode 100644
index 0000000..2924539
--- /dev/null
+++ b/src/demo/psychube.json
@@ -0,0 +1,74 @@
+{
+  "Psychube": {
+    "next": [
+      "PsychubeEnterTheShow",
+      "PsychubeResourceStages",
+      "FreePsychubeStages",
+      "PsychubeStages_7",
+      "Sub_StartUp"
+    ]
+  },
+  "PsychubeEnterTheShow": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/EnterTheShow.png",
+    "roi": [926, 221, 229, 153],
+    "action": "Click",
+    "next": ["PsychubeResourceStages"]
+  },
+  "PsychubeResourceStages": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/ResourceStages.png",
+    "roi": [218, 571, 169, 149],
+    "action": "Click",
+    "next": ["FreePsychubeStages", "NoFreePsychubeStagesFlag"]
+  },
+  "FreePsychubeStages": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/FreePsychubeStages.png",
+    "roi": [180, 203, 246, 306],
+    "action": "Click",
+    "next": ["PsychubeStages_7", "PsychubeReadyForAction"]
+  },
+  "NoFreePsychubeStagesFlag": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/NoFreePsychubeStagesFlag.png",
+    "roi": [732, 210, 233, 297],
+    "next": ["HomeFlag", "Sub_StartUp"]
+  },
+  "PsychubeStages_7": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/PsychubeStages_7.png",
+    "roi": [306, 492, 271, 179],
+    "action": "Click",
+    "next": ["PsychubeReadyForAction", "PsychubeStages_7"]
+  },
+  "PsychubeReadyForAction": {
+    "recognition": "OCR",
+    "text": ["开始行动"],
+    "roi": [958, 537, 235, 136],
+    "action": "Click",
+    "next": ["PsychubeSwitchToReplay", "PsychubeSetReplaysTimes", "StartReplay"]
+  },
+  "PsychubeSwitchToReplay": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/SwitchToReplay.png",
+    "roi": [781, 581, 145, 139],
+    "action": "Click",
+    "next": ["PsychubeSetReplaysTimes", "StartReplay"]
+  },
+  "PsychubeSetReplaysTimes": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/SetReplaysTimes.png",
+    "threshold": 0.8,
+    "roi": [737, 586, 174, 134],
+    "action": "Click",
+    "next": ["PsychubeReplayTwice", "PsychubeSetReplaysTimes"]
+  },
+  "PsychubeReplayTwice": {
+    "recognition": "TemplateMatch",
+    "template": "Psychube/ReplayTwice.png",
+    "roi": [740, 463, 168, 148],
+    "action": "Click",
+    "next": ["PsychubeReplayTwice", "StartReplay"]
+  }
+}
diff --git a/src/demo/startup.json b/src/demo/startup.json
new file mode 100644
index 0000000..9ba6f84
--- /dev/null
+++ b/src/demo/startup.json
@@ -0,0 +1,136 @@
+{
+  "Sub_StartUp": {
+    "is_sub": true,
+    "next": [
+      "HomeFlag",
+      "Sub_HomeButton",
+      "Sub_BackButton",
+      "Sub_HomeLoading",
+      "Sub_ObtainedAwards",
+      "Sub_AccumulatedSignIn",
+      "Sub_BirthdayReward",
+      "Sub_Reward",
+      "StartGame",
+      "CloseAnnouncement",
+      "Download",
+      "GameLoading",
+      "BluePochLogo",
+      "Disclaimer",
+      "Stop"
+    ]
+  },
+  "Start1999": {
+    "action": "StartApp",
+    "package": "com.shenlan.m.reverse1999/com.ssgame.mobile.gamesdk.frame.AppStartUpActivity"
+  },
+  "BluePochLogo": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/BluePochLogo.png",
+    "roi": [298, 163, 620, 336],
+    "next": [
+      "BluePochLogo",
+      "Disclaimer",
+      "GameLoading",
+      "Download",
+      "StartGame",
+      "CloseAnnouncement"
+    ]
+  },
+  "Disclaimer": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/Disclaimer.png",
+    "roi": [512, 107, 238, 214],
+    "next": [
+      "Disclaimer",
+      "GameLoading",
+      "Download",
+      "StartGame",
+      "CloseAnnouncement"
+    ]
+  },
+  "GameLoading": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/GameLoading.png",
+    "roi": [323, 0, 599, 563],
+    "next": ["GameLoading", "Download", "StartGame", "CloseAnnouncement"]
+  },
+  "Download": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/Download.png",
+    "roi": [712, 390, 187, 150],
+    "action": "Click",
+    "next": ["GameLoading", "Download", "StartGame", "CloseAnnouncement"]
+  },
+  "CloseAnnouncement": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/CloseAnnouncement.png",
+    "roi": [1105, 40, 143, 140],
+    "action": "Click",
+    "next": ["Sub_HomeLoading", "HomeFlag", "StartGame", "CloseAnnouncement"]
+  },
+  "StartGame": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/StartGame.png",
+    "roi": [517, 458, 242, 163],
+    "action": "Click",
+    "next": [
+      "Sub_BackButton",
+      "Sub_ObtainedAwards",
+      "Sub_AccumulatedSignIn",
+      "Sub_BirthdayReward",
+      "Sub_Reward",
+      "Sub_HomeLoading",
+      "HomeFlag",
+      "StartGame",
+      "CloseAnnouncement"
+    ]
+  },
+  "Sub_HomeLoading": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "StartUp/HomeLoading.png",
+    "roi": [459, 359, 364, 152]
+  },
+  "HomeFlag": {
+    "recognition": "TemplateMatch",
+    "template": "StartUp/HomeFlag.png",
+    "roi": [1022, 419, 194, 166]
+  },
+  "Sub_BackButton": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": ["StartUp/BackButton.png", "StartUp/BackButton_White.png"],
+    "roi": [0, 0, 134, 138],
+    "action": "Click"
+  },
+  "Sub_HomeButton": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": ["StartUp/HomeButton.png", "StartUp/HomeButton_White.png"],
+    "roi": [70, 0, 144, 144],
+    "action": "Click"
+  },
+  "Stop": {},
+  "Sub_Reward": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "StartUp/Reward.png",
+    "roi": [419, 90, 297, 148],
+    "action": "Click",
+    "target": [0, 0, 526, 590]
+  },
+  "Sub_AccumulatedSignIn": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "StartUp/AccumulatedSignIn.png",
+    "roi": [562, 483, 347, 163],
+    "action": "Click"
+  },
+  "Sub_BirthdayReward": {
+    "is_sub": true,
+    "recognition": "TemplateMatch",
+    "template": "StartUp/BirthdayReward.png",
+    "roi": [803, 273, 121, 121],
+    "action": "Click"
+  }
+}
diff --git a/src/demo/wilderness.json b/src/demo/wilderness.json
new file mode 100644
index 0000000..4a00005
--- /dev/null
+++ b/src/demo/wilderness.json
@@ -0,0 +1,101 @@
+{
+  "Wilderness": {
+    "next": [
+      "EnterWilderness",
+      "CollectEXP",
+      "CollectMoney",
+      "CollectTrust",
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_StartUp"
+    ]
+  },
+  "EnterWilderness": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/EnterWilderness.png",
+    "roi": [889, 348, 242, 132],
+    "action": "Click",
+    "next": [
+      "EnterWilderness",
+      "CollectEXP",
+      "CollectMoney",
+      "CollectTrust",
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeLoading"
+    ]
+  },
+  "CollectEXP": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/CollectEXP.png",
+    "roi": [455, 87, 139, 134],
+    "action": "Click",
+    "post_wait_freezes": 1,
+    "next": [
+      "CollectMoney",
+      "CollectTrust",
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeButton",
+      "HomeFlag"
+    ]
+  },
+  "CollectMoney": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/CollectMoney.png",
+    "roi": [685, 34, 132, 134],
+    "action": "Click",
+    "post_wait_freezes": 1,
+    "next": [
+      "CollectTrust",
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeButton",
+      "HomeFlag"
+    ]
+  },
+  "CollectTrust": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/CollectTrust.png",
+    "roi": [0, 58, 188, 438],
+    "action": "Click",
+    "next": [
+      "TrustMax",
+      "CollectTrust",
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeButton",
+      "HomeFlag"
+    ]
+  },
+  "TrustDialogueNext": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/TrustDialogueNext.png",
+    "roi": [1119, 631, 124, 89],
+    "action": "Click",
+    "next": [
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeButton",
+      "HomeFlag"
+    ]
+  },
+  "TrustDialogueInteraction": {
+    "recognition": "TemplateMatch",
+    "template": "Wilderness/TrustDialogueInteraction.png",
+    "roi": [1095, 42, 185, 593],
+    "action": "Click",
+    "next": [
+      "TrustDialogueNext",
+      "TrustDialogueInteraction",
+      "Sub_HomeButton",
+      "HomeFlag"
+    ]
+  },
+  "TrustMax": {
+    "recognition": "OCR",
+    "text": ["MAX"],
+    "roi": [0, 24, 185, 638],
+    "next": ["Sub_HomeButton", "HomeFlag"]
+  }
+}
diff --git a/src/types.ts b/src/types.ts
index fc61039..13e4a87 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { computed, type Ref } from 'vue'
+
 export type Rect = [number, number, number, number]
 export type TextRepl = [string, string]
 
@@ -46,46 +48,74 @@ type Recognition = {
   custom_recognizer_param?: unknown
 }
 
-type DoNothing = {
-  action?: 'DoNothing'
-}
+// type DoNothing = {
+//   action?: 'DoNothing'
+// }
+
+// type Click = {
+//   action: 'Click'
+//   target?: true | string | Rect
+//   target_offset?: Rect
+// }
+
+// type Swipe = {
+//   action: 'Swipe'
+//   begin?: true | string | Rect
+//   begin_offset?: Rect
+//   end: true | string | Rect
+//   end_offset?: Rect
+//   duration?: number
+// }
+
+// type Key = {
+//   action: 'Key'
+//   key: string | number | number[]
+// }
+
+// type StartApp = {
+//   action: 'StartApp'
+//   package?: string
+// }
+
+// type StopApp = {
+//   action: 'StopApp'
+//   package?: string
+// }
+
+// type StopTask = {
+//   action: 'StopTask'
+// }
+
+// type ActCustom = {
+//   action: 'Custom'
+//   custom_action: string
+//   custom_action_param: unknown
+// }
+
+type Action = {
+  action?:
+    | 'DoNothing'
+    | 'Click'
+    | 'Swipe'
+    | 'Key'
+    | 'StartApp'
+    | 'StopApp'
+    | 'StopTask'
+    | 'Custom'
 
-type Click = {
-  action: 'Click'
   target?: true | string | Rect
   target_offset?: Rect
-}
 
-type Swipe = {
-  action: 'Swipe'
   begin?: true | string | Rect
   begin_offset?: Rect
-  end: true | string | Rect
+  end?: true | string | Rect
   end_offset?: Rect
   duration?: number
-}
 
-type Key = {
-  action: 'Key'
-  key: string | number | number[]
-}
+  key?: string | number | number[]
 
-type StartApp = {
-  action: 'StartApp'
   package?: string
-}
 
-type StopApp = {
-  action: 'StopApp'
-  package?: string
-}
-
-type StopTask = {
-  action: 'StopTask'
-}
-
-type ActCustom = {
-  action: 'Custom'
   custom_action: string
   custom_action_param: unknown
 }
@@ -99,15 +129,15 @@ type WaitFreezes = {
 }
 
 // type Recognition = DirectHit | TemplateMatch | OCR | RecCustom
-type Action =
-  | DoNothing
-  | Click
-  | Swipe
-  | Key
-  | StartApp
-  | StopApp
-  | StopTask
-  | ActCustom
+// type Action =
+//   | DoNothing
+//   | Click
+//   | Swipe
+//   | Key
+//   | StartApp
+//   | StopApp
+//   | StopTask
+//   | ActCustom
 
 export type Task = Recognition &
   Action & {
@@ -127,3 +157,24 @@ export type Task = Recognition &
       path?: string
     }
   }
+
+type RemUndefined<T> = T extends undefined ? never : T
+export function wrapProp<T extends Record<string, unknown>, K extends string>(
+  obj: Ref<T>,
+  key: K
+) {
+  return computed<RemUndefined<T[K]> | null>({
+    set(v: RemUndefined<T[K]> | null) {
+      if (v === null) {
+        if (key in obj.value) {
+          delete obj.value[key]
+        }
+      } else {
+        obj.value[key] = v
+      }
+    },
+    get(): RemUndefined<T[K]> | null {
+      return (obj.value[key] ?? null) as RemUndefined<T[K]> | null
+    }
+  })
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3e5b621..d0cc4d7 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,