feat: support sql completion for table names

Author: LinuxSuRen

console/atest-ui/package-lock.json

@@ -16,6 +16,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@codemirror/lang-sql": "github:codemirror/lang-sql",
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",

console/atest-ui/package.json

@@ -42,6 +42,8 @@
 
   --page-title-right-padding: 10px;
   --page-title-bottom-padding: 5px;
+
+  --sql-editor-height: 180px;
 }
 
 *,
@@ -99,3 +101,8 @@ html.dark .el-main {
   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

@@ -11,6 +11,7 @@
         "send": "Send",
         "copy": "Copy",
         "ok": "OK",
+        "next-page": "Next",
         "reload": "Reload",
         "insertSample": "Insert Sample",
         "toolbox": "Tool Box",

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

@@ -11,6 +11,7 @@
         "send": "发送",
         "copy": "拷贝",
         "ok": "确定",
+        "next-page": "下一页",
         "reload": "重新加载",
         "insertSample": "插入样例",
         "toolbox": "工具箱",

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

@@ -7,6 +7,7 @@ import type { Pair } from './types'
 import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
 import { ElMessage } from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
+import { sql, StandardSQL } from "@codemirror/lang-sql"
 import HistoryInput from '../components/HistoryInput.vue'
 import type { Ref } from 'vue'
 import { Refresh, Document } from '@element-plus/icons-vue'
@@ -176,7 +177,9 @@ const ormDataHandler = (data: QueryData) => {
   }
 
   tablesTree.value = []
+  sqlConfig.value.schema = {}
   queryDataMeta.value.tables.forEach((i) => {
+    sqlConfig.value.schema[i] = []
     tablesTree.value.push({
       label: i,
     })
@@ -194,6 +197,13 @@ const keyValueDataHandler = (data: QueryData) => {
   })
 }
 
+const sqlConfig = ref({
+  dialect: StandardSQL,
+  defaultSchema: queryDataMeta.value.currentDatabase,
+  upperCaseKeywords: true,
+  schema: {}
+})
+
 const executeQuery = async () => {
   if (sqlQuery.value === '') {
     switch (kind.value) {
@@ -264,7 +274,7 @@ watch(largeContent, (e) => {
 })
 
 Magic.AdvancedKeys([{
-  Keys: ['Ctrl+E'],
+  Keys: ['Ctrl+E', 'Ctrl+Enter'],
   Func: executeQuery,
   Description: 'Execute query'
 }])
@@ -342,11 +352,16 @@ Magic.AdvancedKeys([{
                 </el-input>
               </el-col>
               <el-col :span="2">
-                <el-button type="primary" @click="nextPage">Next</el-button>
+                <el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
               </el-col>
             </el-row>
           </el-form>
-          <Codemirror v-model="sqlQuery" v-if="complexEditor" style="height: 180px"/>
+            <Codemirror
+            v-model="sqlQuery"
+            v-if="complexEditor"
+            style="height: var(--sql-editor-height);"
+            :extensions="[sql(sqlConfig)]"
+            />
         </el-header>
         <el-main>
           <div style="display: flex; gap: 8px;">