feat: support test case nav via shortcut (#510)

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/views/TestingPanel.vue

@@ -10,6 +10,7 @@ import type { Suite } from './types'
 import { API } from './net'
 import { Cache } from './cache'
 import { useI18n } from 'vue-i18n'
+import { Magic } from './magicKeys'
 
 const { t } = useI18n()
 
@@ -61,6 +62,39 @@ const handleTreeClick = (data: Tree) => {
   }
 }
 
+Magic.Keys((k) => {
+  const currentKey = currentNodekey.value
+
+  if (treeRef.value) {
+    treeRef.value.data.forEach((n) => {
+      if (n.children) {
+        n.children.forEach((c, index) => {
+          if (c.id === currentKey) {
+            var nextIndex = -1
+            if (k.endsWith('Up')) {
+              if (index > 0) {
+                nextIndex = index - 1
+              }
+            } else {
+              if (index < n.children.length - 1) {
+                nextIndex = index + 1
+              }
+            }
+
+            if (nextIndex >= 0 < n.children.length) {
+              const next = n.children[nextIndex]
+              currentNodekey.value = next.id
+              treeRef.value!.setCurrentKey(next.id)
+              treeRef.value!.setCheckedKeys([next.id], false)
+            }
+            return
+          }
+        })
+      }
+    })
+  }
+}, ['Alt+ArrowUp', 'Alt+ArrowDown'])
+
 const treeData = ref([] as Tree[])
 const treeRef = ref<InstanceType<typeof ElTree>>()
 const currentNodekey = ref('')
@@ -327,7 +361,6 @@ const suiteKinds = [{
               ref="treeRef"
               node-key="id"
               :filter-node-method="filterTestCases"
-              @node-click="handleTreeClick"
               @current-change="handleTreeClick"
               data-intro="This is the test suite tree. You can click the test suite to edit it."
             >

console/atest-ui/src/views/magicKeys.ts

@@ -17,11 +17,11 @@ limitations under the License.
 import { watch } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 
-function Keys(func: () => void, keys: string[]) {
+function Keys(func: (() => void) | ((k: string) => void), keys: string[]) {
     const magicKeys = useMagicKeys()
     keys.forEach(k => {
         watch(magicKeys[k], (v) => {
-            if (v) func()
+            if (v) func(k)
         })
     })
 }