feat: support to show the key binding on each page (#721)

* chore: move styles into css files

* support to show the key binding on each page

* move the magic key dialog into a component

* add shortcuts on the data manager page

---------

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

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -19,6 +19,7 @@ import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
 import DataManager from './views/DataManager.vue'
+import MagicKey from './components/MagicKey.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t, locale: i18nLocale } = useI18n()
@@ -101,15 +102,14 @@ watch(theme, (e) => {
 </script>
 
 <template>
-  <el-container style="height: 100%;">
+  <el-container class="full-height">
     <el-aside width="auto" style="display: flex; flex-direction: column;">
-      <el-radio-group v-model="isCollapse">
+      <el-radio-group v-model="isCollapse" class="el-menu">
         <el-radio-button :value="false">+</el-radio-button>
         <el-radio-button :value="true">-</el-radio-button>
       </el-radio-group>
       <el-menu
-        class="el-menu-vertical"
-        style="height: 100%;"
+        class="el-menu-vertical full-height"
         :default-active="activeMenu"
         :collapse="isCollapse"
         @select="handleSelect"
@@ -145,7 +145,7 @@ watch(theme, (e) => {
       </el-menu>
     </el-aside>
 
-    <el-main style="padding-top: 0px;">
+    <el-main class="center-zone">
       <div class="top-menu">
         <el-col style="display: flex; align-items: center;">
           <el-icon @click="settingDialogVisible=true" size="20"><Setting /></el-icon>
@@ -213,10 +213,15 @@ watch(theme, (e) => {
             </el-col>
         </el-row>
     </el-dialog>
+
+    <MagicKey />
 </template>
 
 <style>
 .el-menu-vertical:not(.el-menu--collapse) {
   width: 200px;
 }
+.el-menu-vertical:is(.el-menu--collapse) {
+  width: 80px;
+}
 </style>

console/atest-ui/src/assets/base.css

@@ -19,6 +19,8 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --center-zone-side-padding: 5px;
 }
 
 /* semantic color variables for this project */
@@ -34,6 +36,12 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+
+  --tool-box-bottom: 5px;
+  --tool-box-position: absolute;
+
+  --page-title-right-padding: 10px;
+  --page-title-bottom-padding: 5px;
 }
 
 *,
@@ -67,3 +75,27 @@ html.dark .el-main {
   color: #fff;
 }
 
+.center-zone {
+  padding-left: var(--center-zone-side-padding) !important;
+  padding-right: var(--center-zone-side-padding) !important;
+  padding-top: 0px !important;
+}
+
+.tool-box {
+  position: var(--tool-box-position);
+  bottom: var(--tool-box-bottom);
+}
+
+.edit-button {
+  height: 32px !important;
+  margin-left: 10px;
+}
+
+.page-title {
+  padding-right: var(--page-title-right-padding);
+}
+
+.page-header {
+  height: 32px;
+  padding-bottom: var(--page-title-bottom-padding, 0px);
+}

console/atest-ui/src/assets/main.css

@@ -2,8 +2,7 @@
 
 #app {
     margin: 0 auto;
-    padding: 1rem;
-    padding-top: 40px;
+    {{/* padding-top: 40px; */}}
     height: 100vh;
     font-weight: normal;
 }
@@ -14,6 +13,14 @@
     right: 20px;
 }
 
+.full-height {
+    height: 100%;
+}
+
+.full-width {
+    width: 100%;
+}
+
 a,
 .green {
     text-decoration: none;

console/atest-ui/src/components/EditButton.vue

@@ -40,7 +40,7 @@ const handleInputConfirm = () => {
         @keyup.enter="handleInputConfirm"
         @blur="handleInputConfirm"
       />
-      <el-button v-else class="button-new-tag" size="small" @click="showInput">
+      <el-button v-else class="button-new-tag" size="small edit-button" @click="showInput">
         {{ value }}
       </el-button>
     </span>

console/atest-ui/src/components/MagicKey.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Magic } from '@/views/magicKeys'
+
+const { t } = useI18n()
+const keyBindingsDialogVisible = ref(false)
+const keyBindings = ref([])
+const showKeyBindingsDialog = (keys: any) => {
+  keyBindingsDialogVisible.value = true
+  keyBindings.value = keys.detail || []
+}
+
+onMounted(() => {
+  window.addEventListener(Magic.MagicKeyEventName, showKeyBindingsDialog)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener(Magic.MagicKeyEventName, showKeyBindingsDialog)
+})
+</script>
+
+<template>
+    <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="t('field.shortcut')" />
+          <el-table-column prop="description" :label="t('field.description')" />
+        </el-table>
+      </template>
+    </el-drawer>
+</template>

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

@@ -35,6 +35,8 @@
         "updateStore": "Update Store",
         "createSecret": "Create Secret",
         "secretManager": "Secret Manager",
+        "storeManager": "Store Manager",
+        "dataManager": "Data Manager",
         "protoContent": "Proto Content",
         "protoFile": "Proto File",
         "protoImport": "Proto Import",
@@ -53,7 +55,8 @@
         "proxy": "Proxy",
         "secure": "Secure",
         "data": "Data",
-        "setting": "Setting"
+        "setting": "Setting",
+        "keyBindings": "Key Bindings"
     },
     "tip": {
         "filter": "Filter Keyword",
@@ -78,6 +81,8 @@
         "key": "Key",
         "value": "Value",
         "proxy": "Proxy",
+        "shortcut": "Shortcut",
+        "description": "Description",
         "insecure": "Insecure"
     },
     "proxy": {

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

@@ -35,6 +35,8 @@
         "updateStore": "更新存储",
         "createSecret": "创建凭据",
         "secretManager": "凭据管理",
+        "storeManager": "存储管理",
+        "dataManager": "数据管理",
         "apiRequestParameter": "API 请求参数",
         "codeGenerator": "代码生成",
         "testing": "测试",
@@ -48,7 +50,8 @@
         "proxy": "代理",
         "secure": "安全",
         "data": "数据",
-        "setting": "设置"
+        "setting": "设置",
+        "keyBindings": "按键绑定"
     },
     "tip": {
         "filter": "过滤",
@@ -73,6 +76,8 @@
         "key": "键",
         "value": "值",
         "proxy": "代理",
+        "shortcut": "快捷键",
+        "description": "描述",
         "insecure": "忽略证书验证"
     },
     "proxy": {

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

@@ -10,7 +10,10 @@ import { Codemirror } from 'vue-codemirror'
 import HistoryInput from '../components/HistoryInput.vue'
 import type { Ref } from 'vue'
 import { Refresh, Document } from '@element-plus/icons-vue'
+import { Magic } from './magicKeys'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const stores: Ref<Store[]> = ref([])
 const kind = ref('')
 const store = ref('')
@@ -259,10 +262,19 @@ const tryShowPrettyJSON = (row: any, column: any, cell: HTMLTableCellElement, ev
 watch(largeContent, (e) => {
   largeContentDialogVisible.value = e !== ''
 })
+
+Magic.AdvancedKeys([{
+  Keys: ['Ctrl+E'],
+  Func: executeQuery,
+  Description: 'Execute query'
+}])
 </script>
 
 <template>
   <div>
+    <div class="page-header">
+      <span class="page-title">{{t('title.dataManager')}}</span>
+    </div>
     <el-container style="height: calc(100vh - 80px);">
       <el-aside v-if="kind === 'atest-store-orm' || kind === 'atest-store-iotdb' || kind === 'atest-store-cassandra' || kind === 'atest-store-elasticsearch' || kind === 'atest-store-opengemini'">
         <el-scrollbar>

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

@@ -66,8 +66,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-    <div>{{t('title.secretManager')}}</div>
-    <div>
+    <div class="page-header">
+      <span class="page-title">{{t('title.secretManager')}}</span>
         <el-button type="primary" @click="addSecret" :icon="Edit">{{t('button.new')}}</el-button>
     </div>
     <el-table :data="secrets" style="width: 100%">

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

@@ -67,7 +67,6 @@ function loadStores() {
   })
 }
 loadStores()
-Magic.Keys(loadStores, ['Alt+KeyR'])
 
 function deleteStore(name: string) {
   API.DeleteStore(name, () => {
@@ -108,7 +107,16 @@ function addStore() {
     dialogVisible.value = true
     createAction.value = true
 }
-Magic.Keys(addStore, ['Alt+KeyN'])
+
+Magic.AdvancedKeys([{
+  Keys: ['Alt+KeyE', 'ctrl+n'],
+  Func: addStore,
+  Description: 'Add a new store'
+}, {
+  Keys: ['Alt+KeyR'],
+  Func: loadStores,
+  Description: 'Refresh the store list'
+}])
 
 const rules = reactive<FormRules<Store>>({
   name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
@@ -211,10 +219,10 @@ const storeExtLink = ref('')
 </script>
 
 <template>
-    <div>Store Manager</div>
-    <div>
-        <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
-        <Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
+    <div class="page-header">
+      <span class="page-title">{{t('title.storeManager')}}</span>
+      <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
+      <Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
     </div>
     <el-table :data="stores" style="width: 100%" v-loading=storesLoading>
       <el-table-column :label="t('field.name')" width="180">