support to show the key binding on each page

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -9,7 +9,7 @@ import {
     Guide,
     DataAnalysis, Help, Setting
 } from '@element-plus/icons-vue'
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { API } from './views/net'
 import { Cache } from './views/cache'
 import TestingPanel from './views/TestingPanel.vue'
@@ -98,6 +98,21 @@ const theme = ref(getTheme())
 watch(theme, (e) => {
     setTheme(e)
 })
+
+const keyBindingsDialogVisible = ref(false)
+const keyBindings = ref([])
+const showKeyBindingsDialog = (keys: any) => {
+  keyBindingsDialogVisible.value = true
+  keyBindings.value = keys.detail || []
+}
+
+onMounted(() => {
+  window.addEventListener('show-key-bindings-dialog', showKeyBindingsDialog)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('show-key-bindings-dialog', showKeyBindingsDialog)
+})
 </script>
 
 <template>
@@ -212,6 +227,18 @@ watch(theme, (e) => {
             </el-col>
         </el-row>
     </el-dialog>
+
+    <el-drawer v-model="keyBindingsDialogVisible" size="50%">
+      <template #header>
+        <h4>{{ t('title.keyBindings') }}</h4>
+      </template>
+      <template #default>
+        <el-table :data="keyBindings">
+          <el-table-column prop="keys" label="Key" />
+          <el-table-column prop="description" label="Description" />
+        </el-table>
+      </template>
+    </el-drawer>
 </template>
 
 <style>

console/atest-ui/src/locales/en.json

@@ -54,7 +54,8 @@
         "proxy": "Proxy",
         "secure": "Secure",
         "data": "Data",
-        "setting": "Setting"
+        "setting": "Setting",
+        "keyBindings": "Key Bindings"
     },
     "tip": {
         "filter": "Filter Keyword",

console/atest-ui/src/locales/zh.json

@@ -49,7 +49,8 @@
         "proxy": "代理",
         "secure": "安全",
         "data": "数据",
-        "setting": "设置"
+        "setting": "设置",
+        "keyBindings": "按键绑定"
     },
     "tip": {
         "filter": "过滤",

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

@@ -110,10 +110,12 @@ function addStore() {
 
 Magic.AdvancedKeys([{
   Keys: ['Alt+KeyE', 'ctrl+n'],
-  Func: addStore
+  Func: addStore,
+  Description: 'Add a new store'
 }, {
   Keys: ['Alt+KeyR'],
-  Func: loadStores
+  Func: loadStores,
+  Description: 'Refresh the store list'
 }])
 
 const rules = reactive<FormRules<Store>>({

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

@@ -18,9 +18,13 @@ function queryFuncs() {
     })
 }
 
-Magic.Keys(() => {
-    dialogVisible.value = true
-}, ['Alt+KeyT'])
+Magic.AdvancedKeys([{
+    Keys: ['Alt+KeyT'],
+    Func: () => {
+        dialogVisible.value = true
+    },
+    Description: 'Open template functions dialog',
+}])
 </script>
 
 <template>

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

@@ -44,9 +44,6 @@ const emit = defineEmits(['updated','toHistoryPanel'])
 let querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.suite!)
 const testResultActiveTab = ref(Cache.GetPreference().responseActiveTab)
 watch(testResultActiveTab, Cache.WithResponseActiveTab)
-Magic.Keys(() => {
-  testResultActiveTab.value = 'output'
-}, ['Alt+KeyO'])
 
 const parameters = ref([] as Pair[])
 const requestLoading = ref(false)
@@ -59,7 +56,6 @@ const sendRequest = async () => {
     runTestCase()
   }
 }
-Magic.Keys(sendRequest, ['Alt+S', 'Alt+ß'])
 
 const runTestCaseResultHandler = (e: any) => {
   requestLoading.value = false
@@ -712,15 +708,6 @@ const deleteAllHistory = async (formEl) => {
 const options = GetHTTPMethods()
 const requestActiveTab = ref(Cache.GetPreference().requestActiveTab)
 watch(requestActiveTab, Cache.WatchRequestActiveTab)
-Magic.Keys(() => {
-  requestActiveTab.value = 'query'
-}, ['Alt+KeyQ'])
-Magic.Keys(() => {
-  requestActiveTab.value = 'header'
-}, ['Alt+KeyH'])
-Magic.Keys(() => {
-  requestActiveTab.value = 'body'
-}, ['Alt+KeyB'])
 
 function bodyFiledExpectChange() {
   const data = testCaseWithSuite.value.data.response.bodyFieldsExpect
@@ -910,7 +897,6 @@ const openDuplicateTestCaseDialog = () => {
     duplicateTestCaseDialog.value = true
     targetTestCaseName.value = props.name + '-copy'
 }
-Magic.Keys(openDuplicateTestCaseDialog, ['Alt+KeyD'])
 const duplicateTestCase = () => {
     API.DuplicateTestCase(props.suite, props.suite, props.name, targetTestCaseName.value,(d) => {
         duplicateTestCaseDialog.value = false
@@ -922,18 +908,50 @@ const duplicateTestCase = () => {
         emit('updated')
     })
 }
-Magic.Keys(() => {
-  if (duplicateTestCaseDialog.value) {
-    duplicateTestCase()
-  }
-}, ['Alt+KeyO'])
 
 const renameTestCase = (name: string) => {
   const suiteName = props.suite
   API.RenameTestCase(suiteName, suiteName, props.name, name, (d) => {
     emit('updated', suiteName, name)
   })
 }
+
+Magic.AdvancedKeys([{
+  Keys: ['Alt+S', 'Alt+ß'],
+  Func: sendRequest,
+  Description: 'Send the request'
+}, {
+  Keys: ['Alt+KeyD'],
+  Func: openDuplicateTestCaseDialog,
+  Description: 'Duplicate the test case'
+}, {
+  Keys: ['Alt+KeyO'],
+  Func: () => {
+    if (duplicateTestCaseDialog.value) {
+      duplicateTestCase()
+    }
+    testResultActiveTab.value = 'output'
+  },
+  Description: 'Open the output tab'
+}, {
+  Keys: ['Alt+KeyB'],
+  Func: () => {
+    testResultActiveTab.value = 'body'
+  },
+  Description: 'Open the body tab'
+}, {
+  Keys: ['Alt+KeyH'],
+  Func: () => {
+    testResultActiveTab.value = 'header'
+  },
+  Description: 'Open the header tab'
+}, {
+  Keys: ['Alt+KeyQ'],
+  Func: () => {
+    testResultActiveTab.value = 'query'
+  },
+  Description: 'Open the query tab'
+}])
 </script>
 
 <template>

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

@@ -131,7 +131,6 @@ const saveTestSuite = () => {
     }
   )
 }
-Magic.Keys(saveTestSuite, ['Alt+S', 'Alt+ß'])
 
 const isFullScreen = ref(false)
 const dialogVisible = ref(false)
@@ -153,7 +152,16 @@ function openNewTestCaseDialog() {
   dialogVisible.value = true
   querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.name!)
 }
-Magic.Keys(openNewTestCaseDialog, ['Alt+N', 'Alt+dead'])
+
+Magic.AdvancedKeys([{
+  Keys: ['Alt+N', 'Alt+dead'],
+  Func: openNewTestCaseDialog,
+  Description: 'Open new test case dialog',
+}, {
+  Keys: ['Alt+S', 'Alt+ß'],
+  Func: saveTestSuite,
+  Description: 'Save test suite',
+}])
 
 const submitTestCaseForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return

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

@@ -37,8 +37,15 @@ const AdvancedKeys = (keys: MagicKey[]) => {
     keys.push({
         Keys: ['ctrl+/'],
         Func: () => {
-            console.log('Advanced keys dialog opened')
+            const event = new CustomEvent('show-key-bindings-dialog', {
+                detail: keys.map((k) => ({
+                    keys: k.Keys.join(', '),
+                    description: k.Description ?? 'No description',
+                })),
+            })
+            window.dispatchEvent(event)
         },
+        Description: 'Show key bindings dialog',
     })
 
     keys.forEach((key: MagicKey) => {