Merge branch 'master' into master

Author: LinuxSuRen

console/atest-ui/package-lock.json

@@ -16,6 +16,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "github:codemirror/lang-sql",
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",
@@ -45,6 +47,7 @@
     "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/test-utils": "^2.4.0",
     "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.21",
     "cypress": "^13.1.0",
     "eslint": "^9.27.0",
     "eslint-plugin-cypress": "^4.1.0",
@@ -54,8 +57,10 @@
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^26.1.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.6",
     "prettier": "^3.4.2",
     "start-server-and-test": "^2.0.0",
+    "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.1",
     "typescript": "~5.0.4",
     "vite": "^4.5.5",

console/atest-ui/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

console/atest-ui/postcss.config.js

@@ -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'
 import ElementPlus from 'element-plus'; 
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs' 
@@ -111,15 +112,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"
@@ -155,7 +155,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>
@@ -223,10 +223,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/App.vue

@@ -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,15 @@
   --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;
+
+  --sql-editor-height: 180px;
+  --payload-editor-height: 180px;
 }
 
 *,
@@ -67,3 +78,32 @@ 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);
+}
+
+.block-align-right {
+  display: flex;
+  justify-content: flex-end;
+}

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

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

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

@@ -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/assets/tailwind.css

@@ -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/components/EditButton.vue

@@ -11,6 +11,7 @@
         "send": "Send",
         "copy": "Copy",
         "ok": "OK",
+        "next-page": "Next",
         "reload": "Reload",
         "insertSample": "Insert Sample",
         "toolbox": "Tool Box",
@@ -35,6 +36,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 +56,8 @@
         "proxy": "Proxy",
         "secure": "Secure",
         "data": "Data",
-        "setting": "Setting"
+        "setting": "Setting",
+        "keyBindings": "Key Bindings"
     },
     "tip": {
         "filter": "Filter Keyword",
@@ -78,6 +82,8 @@
         "key": "Key",
         "value": "Value",
         "proxy": "Proxy",
+        "shortcut": "Shortcut",
+        "description": "Description",
         "insecure": "Insecure"
     },
     "proxy": {