From 4d278db8cb6f6f2653641f10931399427d93e3c3 Mon Sep 17 00:00:00 2001
From: nekosu <liao.hy@outlook.com>
Date: Fri, 4 Aug 2023 11:12:30 +0800
Subject: [PATCH] refactor: optimize structure

---
 src/App.vue                       |   2 +-
 src/components/ActionEdit.vue     | 161 +++++++++++++-------------
 src/components/RecognizerEdit.vue | 181 ++++++++++++++++--------------
 src/components/TaskEdit.vue       |  28 +----
 4 files changed, 186 insertions(+), 186 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2057e6a..f5e6b22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -154,7 +154,7 @@ const treeHeight = computed(() => {
               v-model:selected-keys="selectedKeysFilter"
               block-line
               selectable
-              default-expand-all
+              expand-on-click
               :pattern="searchText"
               :show-irrelevant-nodes="false"
               :cancelable="false"
diff --git a/src/components/ActionEdit.vue b/src/components/ActionEdit.vue
index ec50094..4a1f9fd 100644
--- a/src/components/ActionEdit.vue
+++ b/src/components/ActionEdit.vue
@@ -53,80 +53,89 @@ const taskCustomActParam = wrapProp(task, 'custom_action_param')
 </script>
 
 <template>
-  <ClearButton v-model="taskAct"> 动作 </ClearButton>
-  <NSelect
-    v-model:value="taskAct"
-    :options="actOptions"
-    :placeholder="actOptions[0].label"
-  ></NSelect>
-  <template v-if="taskActValue === 'Click'">
-    <TargetEdit
-      name="目标"
-      v-model:offset="taskTargetOfs"
-      :value="taskTarget === true ? 1 : taskTarget"
-      :navigate="navigate"
-      @update:value="
-        v => {
-          taskTarget = v === 1 ? true : v
-        }
-      "
-    ></TargetEdit>
-  </template>
-  <template v-else-if="taskActValue === 'Swipe'">
-    <TargetEdit
-      name="起点"
-      v-model:offset="taskBeginOfs"
-      :value="taskBegin === true ? 1 : taskBegin"
-      :navigate="navigate"
-      @update:value="
-        v => {
-          taskBegin = v === 1 ? true : v
-        }
-      "
-    ></TargetEdit>
-    <TargetEdit
-      required
-      name="终点"
-      v-model:offset="taskEndOfs"
-      :value="taskEnd === true ? 1 : taskEnd"
-      :navigate="navigate"
-      @update:value="
-        v => {
-          taskEnd = v === 1 ? true : v
-        }
-      "
-    ></TargetEdit>
-  </template>
-  <template v-else-if="taskActValue === 'Key'">
-    <ClearButton v-model="taskKey"> 按键 </ClearButton>
-    <span> {{ taskKey }} </span>
-  </template>
-  <template v-else-if="taskActValue === 'StartApp'">
-    <ClearButton v-model="taskPackage"> 包名 </ClearButton>
-    <StringArrayEdit
-      type="single"
-      :nullable="true"
-      def=""
-      :value="taskPackage"
-      @update:value="v => {taskPackage = v as string}"
-      placeholder="package/activity"
-    ></StringArrayEdit>
-  </template>
-  <template v-else-if="taskActValue === 'StopApp'">
-    <ClearButton v-model="taskPackage"> 包名 </ClearButton>
-    <StringArrayEdit
-      type="single"
-      :nullable="true"
-      def=""
-      :value="taskPackage"
-      @update:value="v => {taskPackage = v as string}"
-      placeholder="package"
-    ></StringArrayEdit>
-  </template>
-  <template v-else-if="taskActValue === 'Custom'">
-    <ClearButton v-model="taskCustomAct" invalid> 任务名 </ClearButton>
-    <NInput v-model:value="taskCustomAct" placeholder="task"></NInput>
-    <ClearButton v-model="taskCustomActParam"> 任务参数 </ClearButton>
-    <JsonEdit v-model:value="taskCustomActParam"></JsonEdit>
-  </template>
+  <div
+    class="grid items-center"
+    style="
+      grid-template-columns: max-content minmax(0, 1fr);
+      column-gap: 0.5rem;
+      row-gap: 1rem;
+    "
+  >
+    <ClearButton v-model="taskAct"> 动作 </ClearButton>
+    <NSelect
+      v-model:value="taskAct"
+      :options="actOptions"
+      :placeholder="actOptions[0].label"
+    ></NSelect>
+    <template v-if="taskActValue === 'Click'">
+      <TargetEdit
+        name="目标"
+        v-model:offset="taskTargetOfs"
+        :value="taskTarget === true ? 1 : taskTarget"
+        :navigate="navigate"
+        @update:value="
+          v => {
+            taskTarget = v === 1 ? true : v
+          }
+        "
+      ></TargetEdit>
+    </template>
+    <template v-else-if="taskActValue === 'Swipe'">
+      <TargetEdit
+        name="起点"
+        v-model:offset="taskBeginOfs"
+        :value="taskBegin === true ? 1 : taskBegin"
+        :navigate="navigate"
+        @update:value="
+          v => {
+            taskBegin = v === 1 ? true : v
+          }
+        "
+      ></TargetEdit>
+      <TargetEdit
+        required
+        name="终点"
+        v-model:offset="taskEndOfs"
+        :value="taskEnd === true ? 1 : taskEnd"
+        :navigate="navigate"
+        @update:value="
+          v => {
+            taskEnd = v === 1 ? true : v
+          }
+        "
+      ></TargetEdit>
+    </template>
+    <template v-else-if="taskActValue === 'Key'">
+      <ClearButton v-model="taskKey"> 按键 </ClearButton>
+      <span> {{ taskKey }} </span>
+    </template>
+    <template v-else-if="taskActValue === 'StartApp'">
+      <ClearButton v-model="taskPackage"> 包名 </ClearButton>
+      <StringArrayEdit
+        type="single"
+        :nullable="true"
+        def=""
+        :value="taskPackage"
+        @update:value="v => {taskPackage = v as string}"
+        placeholder="package/activity"
+      ></StringArrayEdit>
+    </template>
+    <template v-else-if="taskActValue === 'StopApp'">
+      <ClearButton v-model="taskPackage"> 包名 </ClearButton>
+      <StringArrayEdit
+        type="single"
+        :nullable="true"
+        def=""
+        :value="taskPackage"
+        @update:value="v => {taskPackage = v as string}"
+        placeholder="package"
+      ></StringArrayEdit>
+    </template>
+    <template v-else-if="taskActValue === 'Custom'">
+      <ClearButton v-model="taskCustomAct" invalid> 任务名 </ClearButton>
+      <NInput v-model:value="taskCustomAct" placeholder="task"></NInput>
+      <ClearButton v-model="taskCustomActParam"> 任务参数 </ClearButton>
+      <JsonEdit v-model:value="taskCustomActParam"></JsonEdit>
+    </template>
+  </div>
 </template>
diff --git a/src/components/RecognizerEdit.vue b/src/components/RecognizerEdit.vue
index 5bdece0..e44c089 100644
--- a/src/components/RecognizerEdit.vue
+++ b/src/components/RecognizerEdit.vue
@@ -42,92 +42,101 @@ 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>
+  <div
+    class="grid items-center"
+    style="
+      grid-template-columns: max-content minmax(0, 1fr);
+      column-gap: 0.5rem;
+      row-gap: 1rem;
+    "
+  >
+    <ClearButton v-model="taskReco"> 识别 </ClearButton>
     <NSelect
-      :options="templMethodOptions"
-      v-model:value="taskMethod"
-      placeholder="5"
+      v-model:value="taskReco"
+      :options="recoOptions"
+      :placeholder="recoOptions[0].label"
     ></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="''"
-      placeholder="text"
-    ></StringArrayEdit>
-    <ClearButton v-model="taskReplace"> 文本替换 </ClearButton>
-    <SingleArrayEdit
-      v-model:value="taskReplace"
-      :nullable="true"
-      :def="() => (['', ''] 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]])"
-            placeholder="替换"
-          >
-          </NInput>
-          <NInput
-            :value="value[1]"
-            @update:value="(v: string) => update([value[0], v])"
-            placeholder="为"
-          >
-          </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 ?? ''"
-      @update:value="v => (taskCustomReco = v)"
-    ></NInput>
-    <ClearButton v-model="taskCustomRecoParam"> 识别参数 </ClearButton>
-    <JsonEdit v-model:value="taskCustomRecoParam"></JsonEdit>
-  </template>
+    <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="''"
+        placeholder="text"
+      ></StringArrayEdit>
+      <ClearButton v-model="taskReplace"> 文本替换 </ClearButton>
+      <SingleArrayEdit
+        v-model:value="taskReplace"
+        :nullable="true"
+        :def="() => (['', ''] 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]])"
+              placeholder="替换"
+            >
+            </NInput>
+            <NInput
+              :value="value[1]"
+              @update:value="(v: string) => update([value[0], v])"
+              placeholder="为"
+            >
+            </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 ?? ''"
+        @update:value="v => (taskCustomReco = v)"
+      ></NInput>
+      <ClearButton v-model="taskCustomRecoParam"> 识别参数 </ClearButton>
+      <JsonEdit v-model:value="taskCustomRecoParam"></JsonEdit>
+    </template>
+  </div>
 </template>
diff --git a/src/components/TaskEdit.vue b/src/components/TaskEdit.vue
index e5e0492..d493fa5 100644
--- a/src/components/TaskEdit.vue
+++ b/src/components/TaskEdit.vue
@@ -180,31 +180,13 @@ function tryDelete() {
       <div class="flex gap-2">
         <NCollapse :default-expanded-names="['reco', 'act', 'misc']">
           <NCollapseItem title="识别" name="reco">
-            <div
-              class="grid items-center"
-              style="
-                grid-template-columns: max-content minmax(0, 1fr);
-                column-gap: 0.5rem;
-                row-gap: 1rem;
-              "
-            >
-              <RecognizerEdit v-model:value="task"></RecognizerEdit>
-            </div>
+            <RecognizerEdit v-model:value="task"></RecognizerEdit>
           </NCollapseItem>
           <NCollapseItem title="动作" name="act">
-            <div
-              class="grid items-center"
-              style="
-                grid-template-columns: max-content minmax(0, 1fr);
-                column-gap: 0.5rem;
-                row-gap: 1rem;
-              "
-            >
-              <ActionEdit
-                v-model:value="task"
-                :navigate="s => $emit('navigate', s)"
-              ></ActionEdit>
-            </div>
+            <ActionEdit
+              v-model:value="task"
+              :navigate="s => $emit('navigate', s)"
+            ></ActionEdit>
           </NCollapseItem>
           <NCollapseItem title="其他" name="misc">
             <div