[Enhancement] Support automatic prompt function of code editor

Author: qianmoQ

docs/docs/assets/images/versions/1.16.0/img_10.png

@@ -22,6 +22,8 @@ DBM Version for `1.16.0` is development!
   ![img.png](../../assets/images/versions/1.16.0/img_7.png) <br />
   ![img.png](../../assets/images/versions/1.16.0/img_8.png) <br />
   ![img.png](../../assets/images/versions/1.16.0/img_9.png) <br />
+- Support automatic prompt function of code editor <br />
+  ![img.png](../../assets/images/versions/1.16.0/img_10.png) <br />
 
 #### UI
 

docs/docs/development/version/1.16.0-development.md

@@ -13,6 +13,7 @@ releaseInfo:
     - SSH login is supported #40
     - Support query ClickHouse to dynamically add configuration
     - Support metadata management to filter the database
+    - Support automatic prompt function of code editor
 
     #### Docs
 

electron-builder.yml

@@ -86,6 +86,9 @@ export class QueryComponent extends BaseComponent implements AfterViewInit {
     setTimeout(() => {
       const codeMirror = this.codeEditors.get(this.containerSelected)['codeMirror'];
       // const queryInstance = this;
+      codeMirror.on('inputRead', () => {
+        codeMirror.showHint();
+      })
       codeMirror.addKeyMap({
         'Ctrl-Enter': function(cm) {
           // queryInstance.handlerExecute(null);

src/renderer/app/pages/query/query/query.component.ts

@@ -0,0 +1,22 @@
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+  -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+  border-radius: 3px;
+  border: 1px solid silver;
+
+  background: white;
+  font-size: 90%;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+}

src/renderer/editor.hints.css

@@ -37,3 +37,6 @@
 @import "~codemirror/theme/monokai.css";
 @import "~codemirror/theme/moxer.css";
 //@import "~codemirror/theme/";
+
+// Wait for all themes to load after loading, load the hint style to prevent style confusion
+@import './editor.hints.css';

src/renderer/editor.theme.scss

@@ -18,6 +18,9 @@ export class EditorService extends PersistenceService implements BaseService {
       lineWrapping: true,
       styleActiveLine: true,
       foldGutter: true,
+      hintOptions: {
+        completeSingle: false
+      },
       lineComment: ['\/\/'],
       keyMap: 'sublime',
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers']