feat: add backward ref view

src/components/TaskEdit.vue

@@ -20,15 +20,17 @@ import {
 import { computed, ref } from 'vue'
 
 import { commitDelete, commitDuplicate, commitMove, navigate } from '@/data'
-import { taskIndex } from '@/data/task'
+import { taskBackwardIndex, taskIndex } from '@/data/task'
 import { Util } from '@/fs'
 import type { UseProducer } from '@/persis'
 import type { Task } from '@/types'
 
 import ActionEdit from './ActionEdit.vue'
 import MiscEdit from './MiscEdit.vue'
 import RecognizerEdit from './RecognizerEdit.vue'
+import ClearButton from '@/components/atomic/ClearButton.vue'
 import JsonEdit from '@/components/atomic/JsonEdit.vue'
+import ArrayNavigateEdit from '@/components/task/ArrayNavigateEdit.vue'
 import SingleNavigateEdit from '@/components/task/SingleNavigateEdit.vue'
 
 const props = defineProps<{
@@ -39,14 +41,14 @@ const props = defineProps<{
 
 const hash = computed(() => {
   const [, , hash] = Util.pathdiv(props.name)
-  return hash
+  return hash!
 })
 
 const showRename = ref(false)
 const titleCache = ref('')
 
 function enterRename() {
-  titleCache.value = hash.value!
+  titleCache.value = hash.value
   showRename.value = true
 }
 
@@ -193,7 +195,7 @@ function tryDelete() {
         class="flex flex-col flex-1 overflow-y-auto min-h-0"
         style="min-width: 500px"
       >
-        <NCollapse :default-expanded-names="['reco', 'act', 'misc']">
+        <NCollapse :default-expanded-names="['reco', 'act', 'misc', 'ref']">
           <NCollapseItem title="识别" name="reco">
             <RecognizerEdit :value="value" :edit="edit"></RecognizerEdit>
           </NCollapseItem>
@@ -203,10 +205,33 @@ function tryDelete() {
           <NCollapseItem title="其他" name="misc">
             <MiscEdit :value="value" :edit="edit"></MiscEdit>
           </NCollapseItem>
+          <NCollapseItem title="引用" name="ref">
+            <div
+              class="grid items-center"
+              style="
+                grid-template-columns: max-content minmax(0, 1fr);
+                column-gap: 0.5rem;
+                row-gap: 1rem;
+              "
+            >
+              <ClearButton propkey="<unknown>" :value="null" :edit="() => {}">
+                前序任务
+              </ClearButton>
+              <ArrayNavigateEdit
+                :value="
+                  taskBackwardIndex[hash].sort((a, b) => a.localeCompare(b)) ??
+                  []
+                "
+                :edit="() => {}"
+                array
+                readonly
+              ></ArrayNavigateEdit>
+            </div>
+          </NCollapseItem>
         </NCollapse>
       </div>
       <JsonEdit
-        style="width: 400px"
+        style="width: 450px"
         :value="value"
         @update:value="v => edit(() => v)"
       ></JsonEdit>

src/components/array/ArrayEdit.vue

@@ -21,12 +21,12 @@ const props = withDefaults(
     def: () => T
     isT: (v: T | T[]) => boolean
     nullable?: boolean
+    readonly?: boolean
     type?: 'both' | 'single' | 'multi'
     onAdd?: () => void
     onDel?: (idx: number) => void
   }>(),
   {
-    nullable: false,
     type: 'both'
   }
 )
@@ -112,7 +112,10 @@ function remove(idx: number) {
 
 <template>
   <div class="flex flex-col gap-2">
-    <div class="flex gap-2" v-if="type === 'both' || !single || value === null">
+    <div
+      class="flex gap-2"
+      v-if="!readonly && (type === 'both' || !single || value === null)"
+    >
       <SwitchButton v-if="type === 'both'" v-model:value="single">
         <DataArrayOutlined></DataArrayOutlined>
       </SwitchButton>

src/components/task/ArrayNavigateEdit.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { navigate } from '@/data'
 import type { UseProducer } from '@/persis'
 
 import SingleNavigateEdit from './SingleNavigateEdit.vue'
@@ -10,6 +9,8 @@ type T = string | string[] | null
 defineProps<{
   value: T
   edit: UseProducer<T>
+  array?: boolean
+  readonly?: boolean
 }>()
 </script>
 
@@ -18,14 +19,16 @@ defineProps<{
     :value="value"
     :edit="edit"
     :nullable="true"
+    :readonly="readonly"
+    :type="array ? 'multi' : 'both'"
     :def="() => ''"
     :is-t="(v: string | string[]) => typeof v === 'string'"
   >
     <template #edit="{ value, edit }">
       <SingleNavigateEdit
         :value="value"
         :edit="edit"
-        :navigate="navigate"
+        :readonly="readonly"
       ></SingleNavigateEdit>
     </template>
   </ArrayEdit>

src/components/task/SingleNavigateEdit.vue

@@ -24,6 +24,7 @@ type T = string
 const props = defineProps<{
   value: T
   edit: UseProducer<T>
+  readonly?: boolean
 }>()
 
 const navTask = computed(() => {
@@ -65,6 +66,7 @@ const options = computed(() => {
       </template>
     </NButton>
     <NAutoComplete
+      :readonly="readonly"
       :value="value"
       @update:value="
         v => {

src/data/task.ts

@@ -22,6 +22,31 @@ export const taskIndex = computed(() => {
   return res
 })
 
+function wrapNext(v?: string | string[]) {
+  return v ? (typeof v === 'string' ? [v] : v) : []
+}
+
+export const taskBackwardIndex = computed(() => {
+  const res: Record<string, string[]> = {}
+  for (const name in taskIndex.value) {
+    const keys = ['next', 'timeout_next', 'runout_next'] as const
+    const task = getTask(taskIndex.value[name])
+    if (!task) {
+      continue
+    }
+    for (const key of keys) {
+      let arr = wrapNext(task[key])
+      for (const to of arr) {
+        if (!(to in res)) {
+          res[to] = []
+        }
+        res[to].push(name)
+      }
+    }
+  }
+  return res
+})
+
 export function setTask(path: string | null, v: Task) {
   if (!path) {
     return