feat: some optimize

src/components/ImageHover.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NAvatar, NPopover } from 'naive-ui'
+
+const props = defineProps<{
+  url: string | string[]
+}>()
+
+function makeUrl(v: string | null) {
+  return v ? `/res/${v}` : '/favicon-32x32.png'
+}
+
+const first = computed(() => {
+  return props.url instanceof Array
+    ? props.url.length > 0
+      ? props.url[0]
+      : null
+    : props.url
+})
+</script>
+
+<template>
+  <NPopover trigger="hover" placement="bottom">
+    <template #trigger>
+      <!-- <img :src="url" /> -->
+      <div class="w-8 h-8 flex justify-center items-center">
+        <NAvatar object-fit="contain" :src="makeUrl(first)"></NAvatar>
+      </div>
+    </template>
+
+    <div class="flex flex-col items-center">
+      <template v-if="props.url instanceof Array">
+        <img v-for="(u, i) in props.url" :key="i" :src="makeUrl(u)" />
+      </template>
+      <img v-else :src="makeUrl(first)" />
+    </div>
+  </NPopover>
+</template>

src/components/SingleNavigateEdit.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { NButton, NIcon, NAutoComplete } from 'naive-ui'
+import { NButton, NIcon, NAutoComplete, NPopover } from 'naive-ui'
 import { computed } from 'vue'
-import { MovingOutlined } from '@vicons/material'
+import {
+  MovingOutlined,
+  WavingHandOutlined,
+  AdsClickOutlined,
+  SwipeRightOutlined,
+  TranslateOutlined
+} from '@vicons/material'
 import { taskData } from '@/data'
+import ImageHover from './ImageHover.vue'
 
 defineProps<{
   navigate?: (to: string) => void
@@ -12,6 +19,14 @@ const val = defineModel<string>('value', {
   required: true
 })
 
+const navTask = computed(() => {
+  if (val.value in taskData.data) {
+    return taskData.data[val.value]
+  } else {
+    return null
+  }
+})
+
 const options = computed(() => {
   const lowerSearch = val.value.toLowerCase()
   return Object.keys(taskData.data)
@@ -49,5 +64,42 @@ const options = computed(() => {
       :options="options"
       placeholder="task"
     ></NAutoComplete>
+    <template v-if="navTask">
+      <template v-if="navTask.template">
+        <ImageHover :url="navTask.template"></ImageHover>
+      </template>
+      <template v-else-if="navTask.text">
+        <NPopover trigger="hover">
+          <template #trigger>
+            <NButton>
+              <template #icon>
+                <NIcon>
+                  <TranslateOutlined></TranslateOutlined>
+                </NIcon>
+              </template>
+            </NButton>
+          </template>
+
+          <span>
+            {{ navTask.text }}
+          </span>
+        </NPopover>
+      </template>
+      <NButton>
+        <template #icon>
+          <NIcon>
+            <WavingHandOutlined
+              v-if="!navTask.action || navTask.action === 'DoNothing'"
+            ></WavingHandOutlined>
+            <AdsClickOutlined
+              v-else-if="navTask.action === 'Click'"
+            ></AdsClickOutlined>
+            <SwipeRightOutlined
+              v-else-if="navTask.action === 'Swipe'"
+            ></SwipeRightOutlined>
+          </NIcon>
+        </template>
+      </NButton>
+    </template>
   </div>
 </template>

src/components/TaskTreeRender.tsx

@@ -17,10 +17,12 @@ import { NButton, NIcon, useDialog, type TreeOption, NInput } from 'naive-ui'
 import { computed, ref } from 'vue'
 
 export function renderLabel({ option }: { option: TreeOption }) {
-  if (isModified(option.label!)) {
-    return option.label + '*'
+  const label = option.label!
+  const text = isModified(label) ? label + '*' : label
+  if (label.endsWith('.json')) {
+    return <span class=" text-green-600">{text}</span>
   } else {
-    return option.label
+    return <span>{text}</span>
   }
 }
 

src/components/TemplateEdit.vue

@@ -6,6 +6,7 @@ import SingleArrayEdit from './SingleArrayEdit.vue'
 import ClearButton from './ClearButton.vue'
 import SingleArrayButton from './SingleArrayButton.vue'
 import FloatInput from './FloatInput.vue'
+import ImageHover from './ImageHover.vue'
 
 const templDef = ''
 const threDef = 0.7
@@ -67,17 +68,21 @@ const fixThre = (v: number) => {
   <SingleArrayEdit
     v-model:value="taskTemplate"
     :def="() => templDef"
-    :is-t="(v: string | string[]) => (typeof v === 'string')"
-    :on-add="() => {
-      if (!isThresholdSingle) {
-        (taskThreshold as number[]).push(threDef)
+    :is-t="(v: string | string[]) => typeof v === 'string'"
+    :on-add="
+      () => {
+        if (!isThresholdSingle) {
+          ;(taskThreshold as number[]).push(threDef)
+        }
       }
-    }"
-    :on-del="idx => {
-      if (!isThresholdSingle) {
-        (taskThreshold as number[]).splice(idx, 1)
+    "
+    :on-del="
+      idx => {
+        if (!isThresholdSingle) {
+          ;(taskThreshold as number[]).splice(idx, 1)
+        }
       }
-    }"
+    "
   >
     <template #edit="{ value, update, index }">
       <div class="flex gap-2">
@@ -91,24 +96,14 @@ const fixThre = (v: number) => {
           :nullable="false"
           :def="threDef"
           :value="(taskThreshold as number[])[index]"
-          @update:value="v => {
-            (taskThreshold as number[])[index] = v
-          }"
+          @update:value="
+            v => {
+              ;(taskThreshold as number[])[index] = v
+            }
+          "
           :alter="fixThre"
         ></FloatInput>
-        <NPopover trigger="hover" placement="bottom">
-          <template #trigger>
-            <NButton>
-              <template #icon>
-                <NIcon>
-                  <SearchOutlined></SearchOutlined>
-                </NIcon>
-              </template>
-            </NButton>
-          </template>
-
-          <img :src="`/res/${value}`" />
-        </NPopover>
+        <ImageHover :url="value"></ImageHover>
       </div>
     </template>
   </SingleArrayEdit>
@@ -124,7 +119,7 @@ const fixThre = (v: number) => {
       v-if="isThresholdSingle"
       :nullable="true"
       :def="threDef"
-      :value="(taskThreshold as number)"
+      :value="taskThreshold as number"
       @update:value="
         v => {
           taskThreshold = v