From 8fb9867902c1eab92285a5401b63395fdb689088 Mon Sep 17 00:00:00 2001
From: Bruce <bruce.lu@vesoft.com>
Date: Tue, 28 Nov 2023 15:34:26 +0800
Subject: [PATCH] New Console (#674)

* New Console (#665)

* mod: update fetch space list logic

* feat: add schema in console

* mod: remove

* feat: add editor hightlight

* mod: update monaco editor

* mod: update drawer

* feat: add / history provider

* feat: support running select rows

* mod: code review

---------

Co-authored-by: Nut He <18328704+hetao92@users.noreply.github.com>

* feat: monaco-editor worker

* fix: rebase

* mod: remove npmrc

* fix: explain

* chore: remove console doc sider

---------

Co-authored-by: Nut He <18328704+hetao92@users.noreply.github.com>
---
 .npmrc                                        |   1 -
 app/components/CodeMirror/index.less          |  37 --
 app/components/CodeMirror/index.tsx           | 192 ----------
 app/components/GQLCodeMirror/index.tsx        |  11 +-
 app/components/MonacoEditor/index.module.less |  32 ++
 app/components/MonacoEditor/index.tsx         | 354 ++++++++++++++++++
 app/config/locale/en-US.ts                    |   6 +
 app/config/locale/zh-CN.ts                    |   6 +
 app/config/nebulaQL.ts                        | 130 ++++++-
 app/pages/Console/Drawer/NgqlDrawer.tsx       | 107 ++++++
 app/pages/Console/Drawer/SchemaDrawer.tsx     | 198 ++++++++++
 app/pages/Console/Drawer/index.module.less    | 179 +++++++++
 app/pages/Console/HistoryBtn.tsx              |  24 +-
 .../OutputBox/ForceGraph/index.module.less    |   5 +
 .../Console/OutputBox/ForceGraph/index.tsx    |  42 ++-
 app/pages/Console/OutputBox/index.module.less |  47 ++-
 app/pages/Console/OutputBox/index.tsx         |  52 ++-
 app/pages/Console/index.module.less           | 185 ++++++++-
 app/pages/Console/index.tsx                   | 256 +++++++++----
 app/pages/MainPage/index.tsx                  |   2 +-
 .../Schema/SchemaConfig/DDLModal/index.tsx    |  15 +-
 app/stores/console.ts                         |  13 +
 app/stores/graph.ts                           |  10 +
 app/stores/schema.ts                          |  46 ++-
 app/stores/twoGraph.ts                        |   9 +-
 index.html                                    |   8 +
 package-lock.json                             |  88 ++++-
 package.json                                  |   4 +-
 tsconfig.json                                 |   1 +
 29 files changed, 1636 insertions(+), 424 deletions(-)
 delete mode 100644 .npmrc
 delete mode 100644 app/components/CodeMirror/index.less
 delete mode 100644 app/components/CodeMirror/index.tsx
 create mode 100644 app/components/MonacoEditor/index.module.less
 create mode 100644 app/components/MonacoEditor/index.tsx
 create mode 100644 app/pages/Console/Drawer/NgqlDrawer.tsx
 create mode 100644 app/pages/Console/Drawer/SchemaDrawer.tsx
 create mode 100644 app/pages/Console/Drawer/index.module.less

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index e7afe103..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-registry=https://registry.npm.taobao.org
\ No newline at end of file
diff --git a/app/components/CodeMirror/index.less b/app/components/CodeMirror/index.less
deleted file mode 100644
index 1db08138..00000000
--- a/app/components/CodeMirror/index.less
+++ /dev/null
@@ -1,37 +0,0 @@
-@import '@app/common.less';
-
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-	word-break: break-all !important;
-}
-
-.CodeMirror {
-	resize: vertical;
-	overflow: auto !important;
-	.notes {
-		color: gray;
-		.cm-keyword {
-			color: gray;
-		}
-	}
-	pre, span {
-		font-family: Roboto-Mono,sans-serif;
-	}
-}
-
-.CodeMirror {
-	font-family: Roboto-Mono, sans-serif;
-	.CodeMirror-gutters {
-		background: @lightBlue;
-	}
-	.CodeMirror-linenumber {
-		display: flex;
-		justify-content: center;
-		color: @darkGray;
-	}
-	.CodeMirror-scroll {
-		padding-bottom: 0;
-		margin-right: 0;
-		overflow: auto !important;
-	}
-}
\ No newline at end of file
diff --git a/app/components/CodeMirror/index.tsx b/app/components/CodeMirror/index.tsx
deleted file mode 100644
index 792b482c..00000000
--- a/app/components/CodeMirror/index.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { PureComponent } from 'react';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/comment/comment';
-import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/hint/show-hint.css';
-import 'codemirror/keymap/sublime';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/mode/meta';
-import 'codemirror/theme/monokai.css';
-
-import { ban, keyWords, operators } from '@app/config/nebulaQL';
-
-import './index.less';
-
-interface IProps {
-  options?: object;
-  value: string;
-  ref?: any;
-  width?: string;
-  height?: string;
-  onShiftEnter?: () => void;
-  onChange?: (value: string) => void;
-  onBlur?: (value: string) => void;
-  onChangeLine?: () => void;
-}
-
-export default class ReactCodeMirror extends PureComponent<IProps, any> {
-  codemirror;
-  editor;
-  textarea;
-  constructor(props) {
-    super(props);
-  }
-  public componentDidMount() {
-    CodeMirror.defineMode('nebula', () => {
-      return {
-        token: stream => {
-          if (stream.eatSpace()) {
-            return null;
-          }
-          stream.eatWhile(/[\$:\w\u4e00-\u9fa5]/);
-          const cur = stream.current();
-          if (keyWords.some(item => item === cur)) {
-            return 'keyword';
-          } else if (operators.some(item => item === cur)) {
-            return 'def';
-          } else if (ban.some(item => item === cur)) {
-            return 'error';
-          }
-          stream.next();
-        },
-      };
-    });
-
-    CodeMirror.registerHelper('hint', 'nebula', cm => {
-      const cur = cm.getCursor();
-      const token = cm.getTokenAt(cur);
-      const str = token.string;
-      const start = token.start;
-      const end = cur.ch;
-
-      if (str === '') {
-        return;
-      }
-
-      const list = [...keyWords, ...operators, ...ban].filter(item => {
-        return item.indexOf(str) === 0;
-      });
-
-      if (list.length) {
-        return {
-          list,
-          from: CodeMirror.Pos(cur.line, start),
-          to: CodeMirror.Pos(cur.line, end),
-        };
-      }
-    });
-    this.renderCodeMirror();
-  }
-  renderCodeMirror() {
-    // parameters of the combined
-    const options = {
-      tabSize: 2,
-      fontSize: '14px',
-      autoCloseBrackets: true,
-      matchBrackets: true,
-      showCursorWhenSelecting: true,
-      lineWrapping: true,
-      // show number of rows
-      lineNumbers: true,
-      fullScreen: true,
-      mode: 'nebula',
-      ...this.props.options,
-    };
-    this.editor = CodeMirror.fromTextArea(this.textarea, options);
-    // Getting CodeMirror is used to get some of these constants
-    this.codemirror = CodeMirror;
-    // event
-    this.editor.on('change', this.codemirrorValueChange);
-    this.editor.on('keydown', this.keydown);
-    this.editor.on('blur', this.blur);
-    const { value, width, height } = this.props;
-    this.editor.setValue(value || '');
-    if (width || height) {
-      // set size
-      this.editor.setSize(width, height);
-    }
-  }
-  blur = instance => {
-    if (this.props.onBlur) {
-      this.props.onBlur(instance.doc.getValue());
-    }
-  };
-
-  keydown = (_, change) => {
-    if (change.shiftKey === true && change.keyCode === 13) {
-      if (this.props.onShiftEnter) {
-        this.props.onShiftEnter();
-      }
-      change.preventDefault();
-    }
-  };
-
-  codemirrorValueChange = (doc, change) => {
-    doc.eachLine(line => {
-      if(line.text.startsWith('//') || line.text.startsWith('#')) {
-        doc.addLineClass(line, 'wrap', 'notes');
-      } else if (line.wrapClass === 'notes') {
-        doc.removeLineClass(line, 'wrap', 'notes');
-      }
-    });
-    if (change.origin !== 'setValue') {
-      if (this.props.onChange) {
-        this.props.onChange(doc.getValue());
-      }
-    }
-    if (change.origin === '+input') {
-      CodeMirror.commands.autocomplete(this.editor, null, {
-        completeSingle: false,
-      });
-    }
-    if (
-      this.props.onChangeLine &&
-      (change.origin === '+delete' || change.origin === '+input')
-    ) {
-      this.props.onChangeLine();
-    }
-  };
-
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const { options, value } = nextProps;
-    await this.setOptions(options);
-    if (value !== this.editor.getValue()) {
-      this.editor.setValue(value || '');
-    }
-  }
-
-  async setOptions(options) {
-    if (typeof options === 'object') {
-      const mode = CodeMirror.findModeByName(options.mode);
-      if (mode && mode.mode) {
-        await import(/* @vite-ignore */`codemirror/mode/${mode.mode}/${mode.mode}.js`);
-      }
-      if (mode) {
-        options.mode = mode.mime;
-      }
-      Object.keys(options).forEach(name => {
-        if (options[name] && JSON.stringify(options[name])) {
-          this.editor.setOption(name, options[name]);
-        }
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.editor) {
-      this.editor.toTextArea();
-    }
-  }
-
-  render() {
-    return (
-      <textarea
-        ref={instance => {
-          this.textarea = instance;
-        }}
-      />
-    );
-  }
-}
diff --git a/app/components/GQLCodeMirror/index.tsx b/app/components/GQLCodeMirror/index.tsx
index bc7a4cc0..3cb596a5 100644
--- a/app/components/GQLCodeMirror/index.tsx
+++ b/app/components/GQLCodeMirror/index.tsx
@@ -1,26 +1,19 @@
 import { Collapse, CollapseProps } from 'antd';
 import { useI18n } from '@vesoft-inc/i18n';
 
-import CodeMirror from '@app/components/CodeMirror';
+import MonacoEditor from '@app/components/MonacoEditor';
 
 import styles from './index.module.less';
 interface IOptions {
   [propName: string]: any;
 }
 const GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => {
-  const options = {
-    keyMap: 'sublime',
-    fullScreen: true,
-    mode: 'nebula',
-    readOnly: true,
-    ...props.option,
-  };
   const { intl } = useI18n();
   const items: CollapseProps['items'] = [
     {
       key: 'ngql',
       label: intl.get('common.exportNGQL'),
-      children: <CodeMirror value={props.currentGQL} options={options} height="80px" />,
+      children: <MonacoEditor value={props.currentGQL} readOnly height="80px" />,
     },
   ];
   return <Collapse className={styles.exportGql} items={items} />;
diff --git a/app/components/MonacoEditor/index.module.less b/app/components/MonacoEditor/index.module.less
new file mode 100644
index 00000000..a1d5b9c2
--- /dev/null
+++ b/app/components/MonacoEditor/index.module.less
@@ -0,0 +1,32 @@
+// :global {
+//   /* padding between the gutter and code */
+//   .monaco-editor .view-line {
+//     padding-left: 5px;
+//   }
+
+//   /* fix cursor location */
+//   .monaco-editor .cursor {
+//     margin-left: 5px;
+//   }
+
+//   /* fix highlighted text selection */
+//   .monaco-editor .selectionHighlight {
+//     margin-left: 5px;
+//   }
+
+//   /* fix highlighted brackets */
+//   .monaco-editor .bracket-match {
+//     margin-left: 5px;
+//   }
+
+//   /* fix multiline text selection */
+//   .monaco-editor .cslr.selected-text {
+//     margin-left: 5px;
+//   }
+
+//   /* fix multiline text selection */
+//   .monaco-editor .bottom-left-radius, .monaco-editor .top-left-radius {
+//     margin-left: 5px;
+//   }
+
+// }
\ No newline at end of file
diff --git a/app/components/MonacoEditor/index.tsx b/app/components/MonacoEditor/index.tsx
new file mode 100644
index 00000000..8daa5215
--- /dev/null
+++ b/app/components/MonacoEditor/index.tsx
@@ -0,0 +1,354 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import * as monaco from 'monaco-editor';
+import Editor, { useMonaco, loader } from '@monaco-editor/react';
+import {
+  keyWords,
+  operators,
+  nebulaFunction,
+  nebulaWordsUppercase,
+  propertyReference,
+  parameterDeclaration,
+} from '@app/config/nebulaQL';
+import { useI18n } from '@vesoft-inc/i18n';
+import { handleEscape } from '@app/utils/function';
+import { SchemaItemOverview } from '@app/stores/console';
+import styles from './index.module.less';
+
+// avoid loading monaco twice
+if (!loader.__getMonacoInstance()) {
+  loader.config({ monaco });
+  loader.init();
+}
+
+interface IProps {
+  schema?: SchemaItemOverview;
+  height?: string;
+  onInstanceChange?: (instance, monaco) => void;
+  value: string;
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
+  onShiftEnter?: () => void;
+}
+
+const checkNeedEscape = (str) => {
+  // check if it starts with a number or contains special characters or is a keyword
+  return /^\d/.test(str) || /[^A-Za-z0-9_]/.test(str) || keyWords.includes(str.toUpperCase());
+};
+
+const regexFormat = (list) => {
+  return list.map((i) => {
+    let item = handleEscape(i).replace(/[.*+?^${}()|[\]\\]/g, `\\$&`);
+    if (checkNeedEscape(i)) {
+      item = `\`${item}\``;
+    }
+    return item;
+  });
+};
+
+const getInsertProvideText = (str) => {
+  if (checkNeedEscape(str)) {
+    return `\`${handleEscape(str)}\``;
+  }
+  return str;
+};
+
+// create highlight rule regex for tag & edge
+const createSchemaRegex = (patterns, words, type) => {
+  if (words.length === 0) {
+    return [];
+  }
+  const wordPattern = words.join('|');
+  return patterns.map((pattern) => [new RegExp(pattern.replace('WORDS', wordPattern), 'g'), type]);
+};
+
+const patterns = [
+  '\\b(WORDS)\\b',
+  '(^|\\s)(WORDS)(\\s|$)', // There can be spaces before and after the string
+  '(?<=^|\\s|\\.\\s|:\\s)(WORDS)', // There can be a '.' or ':' before the string.
+];
+const MonacoEditor = (props: IProps) => {
+  const { intl, currentLocale } = useI18n();
+  const monaco = useMonaco();
+  const providersRef = useRef([]);
+  const { onShiftEnter, schema, value, onChange, readOnly, onInstanceChange, height } = props;
+  const [tags, edges] = useMemo(
+    () =>
+      schema?.children?.reduce(
+        ([_tags, _edges], i) => {
+          if (i.type === 'tag') {
+            _tags.push(i.name);
+          } else if (i.type === 'edge') {
+            _edges.push(i.name);
+          }
+          return [_tags, _edges];
+        },
+        [[], []],
+      ) || [[], []],
+    [schema],
+  );
+  const fields = useMemo(
+    () =>
+      schema?.children
+        ?.map((k) =>
+          k.children.map((f) => ({
+            name: f.Field,
+            type: f.Type,
+            parent: k.name,
+          })),
+        )
+        .flat() || [],
+    [schema],
+  );
+  const setMonacoProvider = useCallback(() => {
+    // register syntax highlighting
+    const highlightProvider = monaco?.languages.setMonarchTokensProvider('ngql', {
+      keywords: keyWords,
+      operators,
+      tags,
+      edges,
+      propertyReference,
+      tokenizer: {
+        //@ts-ignore
+        root: [
+          ...createSchemaRegex(patterns, regexFormat(tags), 'tag'),
+          ...createSchemaRegex(patterns, regexFormat(edges), 'edge'),
+          [new RegExp('^\\s*(//|#).*', 'gm'), 'comment'], // start with // or # is comment
+          [
+            /[a-zA-Z_$][\w$]*/,
+            {
+              cases: {
+                '@keywords': { token: 'keyword' },
+              },
+            },
+          ],
+          [/".*?"/, 'string'],
+          [/'.*?'/, 'string'],
+          [/`.*?`/, 'string'],
+        ].filter(Boolean),
+      },
+    });
+    // register a completion item provider for keywords
+    const keywordProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: () => {
+        const suggestions = [
+          ...nebulaWordsUppercase.map((k) => ({
+            label: k,
+            kind: monaco.languages.CompletionItemKind.Keyword,
+            insertText: k,
+            detail: intl.get('common.keyword'),
+            sortText: '1', // monaco completion suggestions sort by sortText, 1: keyword 2: tag 3: edge 4: field 5: function
+          })),
+        ];
+        return { suggestions: suggestions };
+      },
+    });
+    const parameterProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: () => {
+        const suggestions = [
+          ...parameterDeclaration.map((k) => ({
+            label: k,
+            kind: monaco.languages.CompletionItemKind.Enum,
+            insertText: k.slice(1),
+            sortText: '5',
+          })),
+        ];
+        return { suggestions: suggestions };
+      },
+      triggerCharacters: [':'],
+    });
+
+    const propertyReferenceProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: () => {
+        const suggestions = [
+          ...propertyReference.map((k) => ({
+            label: k,
+            kind: monaco.languages.CompletionItemKind.Variable,
+            insertText: k.slice(1),
+            sortText: '1', // monaco completion suggestions sort by sortText, 1: keyword 2: tag 3: edge 4: field 5: function
+          })),
+        ];
+        return { suggestions: suggestions };
+      },
+      triggerCharacters: ['$'],
+    });
+    // register a completion item provider for tags and edges, can trigger by ':' and '.'
+    const schemaInfoProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: () => {
+        const suggestions = [
+          ...tags.map((k: string) => ({
+            label: k,
+            kind: monaco.languages.CompletionItemKind.Property,
+            detail: intl.get('common.tag'),
+            insertText: getInsertProvideText(k),
+            sortText: '2',
+          })),
+          ...edges.map((k: string) => ({
+            label: k,
+            kind: monaco.languages.CompletionItemKind.Property,
+            detail: intl.get('common.edge'),
+            insertText: getInsertProvideText(k),
+            sortText: '3',
+          })),
+          ...fields.map((field: { name: string; parent: string; type: string }) => ({
+            label: field.name,
+            kind: monaco.languages.CompletionItemKind.Field,
+            detail: `${field.parent}.${field.name}(${field.type}))`,
+            insertText: getInsertProvideText(field.name),
+            sortText: '4',
+          })),
+        ];
+        return { suggestions };
+      },
+      triggerCharacters: [':', '.'],
+    });
+    const regex = /^properties\(.*\)$/g; // match properties()
+    // register a completion item provider for fields, can trigger by '.'
+    const schemaInfoTriggerProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: (model, position) => {
+        const textUntilPosition = model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: 1,
+          endLineNumber: position.lineNumber,
+          endColumn: position.column,
+        });
+
+        const words = textUntilPosition.split(' ');
+        const lastWord = words[words.length - 1].slice(0, -1); // get the last word and remove the last character '.'
+        const suggestions = fields
+          ?.filter((field) => field.parent === lastWord || regex.test(lastWord))
+          .map((field) => ({
+            label: field.name,
+            kind: monaco.languages.CompletionItemKind.Field,
+            detail: `${field.parent}.${field.name}(${field.type}))`,
+            insertText: getInsertProvideText(field.name),
+            sortText: '4',
+          }));
+
+        return { suggestions };
+      },
+      triggerCharacters: ['.'],
+    });
+    // register a completion item provider for functions
+    const funcProvider = monaco?.languages.registerCompletionItemProvider('ngql', {
+      //@ts-ignore
+      provideCompletionItems: () => {
+        const suggestions = nebulaFunction.map((f) => ({
+          label: `${f}()`,
+          kind: monaco.languages.CompletionItemKind.Function,
+          detail: intl.get('common.function'),
+          insertText: `${f}($1)`,
+          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+          sortText: '5',
+        }));
+
+        return { suggestions };
+      },
+    });
+    providersRef.current = [
+      highlightProvider,
+      parameterProvider,
+      keywordProvider,
+      propertyReferenceProvider,
+      schemaInfoProvider,
+      schemaInfoTriggerProvider,
+      funcProvider,
+    ];
+  }, [currentLocale, monaco, tags, edges, fields]);
+
+  const clearProviders = useCallback(() => {
+    if (providersRef.current.length > 0) {
+      providersRef.current.forEach((provider) => provider?.dispose());
+      providersRef.current = [];
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!monaco) return;
+    const languages = monaco.languages.getLanguages();
+    if (languages.some((i) => i.id == 'ngql')) return;
+    monaco?.languages.register({ id: 'ngql' });
+    monaco?.editor.defineTheme('studio', {
+      base: 'vs',
+      inherit: true,
+      rules: [
+        { token: 'comment', foreground: '808080' }, // comment color
+        { token: 'tag', foreground: 'F4C56F' }, // tag color
+        { token: 'edge', foreground: 'bff46f' }, // edge color
+        { token: 'field', foreground: 'FFA500' }, // edge color
+        { token: 'keyword', foreground: '770088' }, // keyword color
+      ],
+      colors: {
+        'editorGutter.background': '#83838316', // line number gutter color
+        'editorLineNumber.foreground': '#A1A1AA', // line number color
+        'editorLineNumber.activeForeground': '#A1A1AA',
+        'editor.foreground': '#000000',
+        'editorCursor.foreground': '#A1A1AA', // Set cursor color
+      },
+    });
+    monaco?.editor.setTheme('studio');
+    monaco?.languages.setLanguageConfiguration('ngql', {
+      autoClosingPairs: [
+        { open: '{', close: '}' },
+        { open: '[', close: ']' },
+        { open: '(', close: ')' },
+        { open: '"', close: '"' },
+        { open: "'", close: "'" },
+        { open: '`', close: '`' },
+      ],
+    });
+    setMonacoProvider();
+  }, [monaco]);
+
+  const onMount = (editor, monaco) => {
+    editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
+      onShiftEnter?.();
+    });
+    onInstanceChange?.(editor, monaco);
+  };
+
+  useEffect(() => {
+    if (!schema?.name && !monaco?.editor) return;
+    clearProviders();
+    monaco?.editor && setMonacoProvider();
+    return () => {
+      clearProviders();
+    };
+  }, [schema]);
+
+  return (
+    <Editor
+      height={height || '300px'}
+      defaultLanguage="ngql"
+      className={styles.editor}
+      value={value}
+      onChange={onChange}
+      theme="studio"
+      options={{
+        // cursorStyle: 'block',
+        scrollbar: {
+          vertical: 'hidden',
+          horizontal: 'hidden',
+        },
+        roundedSelection: false,
+        scrollBeyondLastLine: false,
+        overviewRulerBorder: false,
+        hideCursorInOverviewRuler: true,
+        overviewRulerLanes: 0,
+        lineNumbersMinChars: 3,
+        // glyphMargin: true,
+        lineDecorationsWidth: 0,
+        renderLineHighlight: 'none',
+        readOnly,
+        minimap: { enabled: false },
+      }}
+      onMount={onMount}
+    />
+  );
+};
+
+export default MonacoEditor;
diff --git a/app/config/locale/en-US.ts b/app/config/locale/en-US.ts
index eef4b240..7cecfcd0 100644
--- a/app/config/locale/en-US.ts
+++ b/app/config/locale/en-US.ts
@@ -66,6 +66,9 @@ export default {
     prev: 'Previous',
     createTime: 'Create Time',
     rerun: 'Rerun',
+    keyword: 'Keyword',
+    function: 'Function',
+    historyRecord: 'History',
   },
   doc: {
     welcome: 'Welcome to',
@@ -162,6 +165,9 @@ export default {
     clearFavorites: 'Clear Favorites',
     selectSpace: 'Please select Graph Space',
     planTree: 'Plan',
+    historyTip: 'You can directly use the "/" key in the console to quickly select historical query statements.',
+    runSelectionRows: 'Run selected rows',
+    selectEmpty: 'Please select the row',
   },
   explore: {
     vertexStyle: 'Vertex Color',
diff --git a/app/config/locale/zh-CN.ts b/app/config/locale/zh-CN.ts
index eda96a3d..40c5b090 100644
--- a/app/config/locale/zh-CN.ts
+++ b/app/config/locale/zh-CN.ts
@@ -66,6 +66,9 @@ export default {
     prev: '上一步',
     createTime: '创建时间',
     rerun: '重新导入',
+    keyword: '关键字',
+    function: '函数',
+    historyRecord: '历史记录',
   },
   doc: {
     welcome: '欢迎使用',
@@ -156,6 +159,9 @@ export default {
     clearFavorites: '清空收藏夹',
     selectSpace: '请选择图空间',
     planTree: '执行计划',
+    historyTip: '您可以直接输入“/”键快速选择历史查询语句。',
+    runSelectionRows: '运行选中行',
+    selectEmpty: '请先选择要运行的行',
   },
   explore: {
     vertexStyle: '节点颜色',
diff --git a/app/config/nebulaQL.ts b/app/config/nebulaQL.ts
index fc5b87de..410d84ef 100644
--- a/app/config/nebulaQL.ts
+++ b/app/config/nebulaQL.ts
@@ -1,4 +1,4 @@
-const nebulaWordsUppercase = [
+export const nebulaWordsUppercase = [
   'ACROSS',
   'ADD',
   'ALTER',
@@ -23,6 +23,7 @@ const nebulaWordsUppercase = [
   'DOUBLE',
   'DOWNLOAD',
   'DROP',
+  'DURATION',
   'EDGE',
   'EDGES',
   'EXISTS',
@@ -205,8 +206,6 @@ const nebulaWordsUppercase = [
   'ZONES',
   'FALSE',
   'TRUE',
-  ':PARAM',
-  ':PARAMS',
 ];
 
 export const ban = ['use', 'USE'];
@@ -293,9 +292,132 @@ export const operators = [
   'uuid',
   // assignment
   '=>',
+  'IS Null',
+  'IS NOT NULL',
+  'IS EMPTY',
+  'IS NOT EMPTY',
 ];
 
-const nebulaWordsLowercase = nebulaWordsUppercase.map(w => w.toLowerCase());
+export const propertyReference = ['$^', '$$', '$-'];
+
+export const parameterDeclaration = [':PARAM', ':PARAMS'];
+const mathFunctions = [
+  'abs',
+  'floor',
+  'ceil',
+  'round',
+  'sqrt',
+  'cbrt',
+  'hypot',
+  'pow',
+  'exp',
+  'exp2',
+  'log',
+  'log2',
+  'log10',
+  'sin',
+  'asin',
+  'cos',
+  'acos',
+  'tan',
+  'atan',
+  'rand',
+  'rand32',
+  'rand64',
+  'bit_and',
+  'bit_or',
+  'bit_xor',
+  'size',
+  'range',
+  'sign',
+  'e',
+  'pi',
+  'radians',
+];
+const staticFunctions = ['avg', 'count', 'max', 'min', 'collect', 'std', 'sum'];
+
+const stringFunctions = [
+  'strcasecmp',
+  'lower',
+  'toLower',
+  'upper',
+  'toUpper',
+  'length',
+  'trim',
+  'ltrim',
+  'rtrim',
+  'left',
+  'right',
+  'lpad',
+  'rpad',
+  'substr',
+  'substring',
+  'reverse',
+  'replace',
+  'split',
+  'concat',
+  'concat_ws',
+  'extract',
+  'json_extract',
+];
+const dateFunctions = ['now', 'date', 'time', 'datetime', 'timestamp', 'duration'];
+const schemaFunctions = [
+  'id',
+  'properties',
+  'type',
+  'rank',
+  'src',
+  'dst',
+  'tags',
+  'labels',
+  'typeid',
+  'startNode',
+  'endNode',
+];
+const listFunctions = [
+  'range',
+  'reverse',
+  'tail',
+  'head',
+  'last',
+  'reduce',
+  'keys',
+  'labels',
+  'nodes',
+  'relationships',
+];
+
+const typeConvertFunctions = ['toBoolean', 'toFloat', 'toString', 'toInteger', 'toSet', 'hash'];
+const conditionalFunctions = ['coallesce'];
+const predicateFunctions = ['exists', 'any', 'all', 'none', 'single'];
+const geoFunctions = [
+  'ST_Point',
+  'ST_GeogFromText',
+  'ST_ASText',
+  'ST_Centroid',
+  'ST_ISValid',
+  'ST_Intersects',
+  'ST_Covers',
+  'ST_CoveredBy',
+  'ST_DWithin',
+  'ST_Distance',
+  'S2_CellIdFromPoint',
+  'S2_CoveringCellIds',
+];
+
+export const nebulaFunction = [
+  ...mathFunctions,
+  ...staticFunctions,
+  ...stringFunctions,
+  ...dateFunctions,
+  ...schemaFunctions,
+  ...listFunctions,
+  ...typeConvertFunctions,
+  ...conditionalFunctions,
+  ...predicateFunctions,
+  ...geoFunctions,
+];
+const nebulaWordsLowercase = nebulaWordsUppercase.map((w) => w.toLowerCase());
 
 export const keyWords = [...nebulaWordsUppercase, ...nebulaWordsLowercase];
 
diff --git a/app/pages/Console/Drawer/NgqlDrawer.tsx b/app/pages/Console/Drawer/NgqlDrawer.tsx
new file mode 100644
index 00000000..ea2f18a7
--- /dev/null
+++ b/app/pages/Console/Drawer/NgqlDrawer.tsx
@@ -0,0 +1,107 @@
+import { useMemo, useState } from 'react';
+import { Input, List } from 'antd';
+import { observer } from 'mobx-react-lite';
+import Icon from '@app/components/Icon';
+import { SearchOutlined } from '@ant-design/icons';
+
+import styles from './index.module.less';
+
+const isIncluded = (a: string, b: string) => {
+  return a.toLowerCase().includes(b.toLowerCase());
+};
+
+//TODO modify the content
+const Doc = [
+  {
+    title:
+      "CREATE TAG [IF NOT EXISTS] <tag_name> ( <prop_name> <data_type> [NULL | NOT NULL] [DEFAULT <default_value>] [COMMENT '<comment>'] [{, <prop_name> <data_type> [NULL | NOT NULL] [DEFAULT <default_value>] [COMMENT '<comment>']} ...] ) [TTL_DURATION = <ttl_duration>] [TTL_COL = <prop_name>] [COMMENT = '<comment>']",
+    description: '通过指定名称创建一个 Tag。',
+  },
+  {
+    title: 'DROP TAG [IF EXISTS] <tag_name>',
+    description: '删除当前工作空间内所有点上的指定 Tag。',
+  },
+  {
+    title:
+      "ALTER TAG <tag_name> <alter_definition> [, alter_definition] ...] [ttl_definition [, ttl_definition] ... ] [COMMENT = '<comment>']",
+    description: '修改 Tag 的结构。例如增删属性、修改数据类型，也可以为属性设置、修改 TTL（Time-To-Live)。',
+  },
+  {
+    title: 'SHOW TAGS',
+    description: '显示当前图空间内的所有 Tag 名称。',
+  },
+  {
+    title: 'DESC[RIBE] TAG <tag_name>',
+    description: '查看指定 Tag 的详细信息，例如字段名称、数据类型等。',
+  },
+  {
+    title: 'DELETE TAG <tag_name_list> FROM <VID>',
+    description: '删除指定点上的指定 Tag。',
+  },
+];
+interface IProps {
+  onItemClick: (title: string) => void;
+}
+const NgqlDrawer = (props: IProps) => {
+  const [open, setOpen] = useState(false);
+  const { onItemClick } = props;
+  const [searchVal, setSearchVal] = useState('');
+  const onSearch = (e) => {
+    const { value } = e.target;
+    setSearchVal(value);
+  };
+  const data = useMemo(
+    () => Doc.filter((i) => isIncluded(i.title, searchVal) || isIncluded(i.description, searchVal)),
+    [searchVal],
+  );
+  return (
+    <>
+      {!open && (
+        <div className={styles.toggleDrawer} onClick={() => setOpen(true)}>
+          <Icon type="icon-nav-taskList" className={styles.toggleBtn} />
+          <Icon type="icon-Thumbnail-pack_down" className={styles.toggleBtn} />
+        </div>
+      )}
+      {open && (
+        <div className={styles.consoleDrawer}>
+          <div className={styles.header}>
+            <div className={styles.label}>
+              <Icon type="icon-nav-taskList" className={styles.toggleBtn} />
+              <span>Ngql</span>
+            </div>
+            <Icon type="icon-studio-btn-close" className={styles.closeBtn} onClick={() => setOpen(false)} />
+          </div>
+          <div className={styles.content}>
+            <Input
+              placeholder="Search..."
+              prefix={<SearchOutlined />}
+              className={styles.inputSearch}
+              onChange={onSearch}
+            />
+            <List
+              itemLayout="horizontal"
+              dataSource={data}
+              className={styles.docList}
+              renderItem={(item, index) => (
+                <List.Item className={styles.ngqlItem}>
+                  <span className={styles.index}>{index + 1}</span>
+                  <div className={styles.itemContent}>
+                    <span className={styles.title} onClick={() => onItemClick(item.title)}>
+                      {item.title}
+                    </span>
+                    <span className={styles.description}>{item.description}</span>
+                  </div>
+                </List.Item>
+              )}
+            />
+          </div>
+          <div className={styles.footer}>
+            <Icon type="icon-Thumbnail-pack_up" className={styles.toggleBtn} onClick={() => setOpen(false)} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default observer(NgqlDrawer);
diff --git a/app/pages/Console/Drawer/SchemaDrawer.tsx b/app/pages/Console/Drawer/SchemaDrawer.tsx
new file mode 100644
index 00000000..1029242f
--- /dev/null
+++ b/app/pages/Console/Drawer/SchemaDrawer.tsx
@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Input, Tree } from 'antd';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@app/stores';
+import styles from './index.module.less';
+import Icon from '@app/components/Icon';
+import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { useI18n } from '@vesoft-inc/i18n';
+
+const isIncluded = (a: string, b: string) => {
+  return a.toLowerCase().includes(b.toLowerCase());
+};
+
+const SchemaDrawer = () => {
+  const { intl } = useI18n();
+  const [open, setOpen] = useState(false);
+  const { schema, console } = useStore();
+  const { schemaOverview, update, currentSpace } = console;
+  const [searchVal, setSearchVal] = useState('');
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const getSchemaInfo = useCallback(async () => {
+    if (schemaOverview.length) return;
+    const { code, data } = await schema.getSpaces();
+    if (code === 0) {
+      update({
+        schemaOverview: data.map((item) => ({
+          name: item,
+          type: 'space',
+          children: [],
+        })),
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (currentSpace) {
+      setExpandedKeys(Array.from(new Set([...expandedKeys, currentSpace])));
+    }
+  }, [currentSpace]);
+  const formatSchemaInfo = (payload: { data: any[]; parent?: string; space?: string }) => {
+    const { data, parent, space } = payload;
+    const typeConfig = {
+      space: {
+        isLeaf: false,
+        getTitle: (item) => item.name,
+        getKey: (item) => item.name,
+        getName: (item) => item.name,
+        icon: <Icon type="icon-workflow-autoLayout" className={styles.treeNodeIcon} />,
+      },
+      tag: {
+        isLeaf: false,
+        getTitle: (item) => item.name,
+        getKey: (item) => `${space}.${item.name}`,
+        getName: (item) => item.name,
+        icon: <Icon type="icon-Thumbnail-graphView" className={styles.treeNodeIcon} />,
+      },
+      edge: {
+        isLeaf: false,
+        getTitle: (item) => item.name,
+        getKey: (item) => `${space}.${item.name}`,
+        getName: (item) => item.name,
+        icon: <Icon type="icon-nav-findPath" className={styles.treeNodeIcon} />,
+      },
+      field: {
+        isLeaf: true,
+        getTitle: (item) => (
+          <>
+            <span className={styles.fieldTypeName}>{item.Field}</span>
+            <span className={styles.fieldTypeTag}>{item.Type}</span>
+          </>
+        ),
+        getKey: (item) => `${space}.${parent}.${item.Field}`,
+        getName: (item) => item.Field,
+      },
+    };
+    return data.map((item) => {
+      const config = typeConfig[item.type];
+      const space = item.type === 'space' ? item.name : parent;
+      const name = config.getName(item);
+      return {
+        title: config.getTitle(item),
+        key: config.getKey(item),
+        type: item.type,
+        isLeaf: config.isLeaf,
+        parent,
+        space,
+        name,
+        children: item.children?.length ? formatSchemaInfo({ data: item.children, parent: name, space }) : [],
+        icon: config.icon,
+      };
+    });
+  };
+  const onLoadData = async (node) => {
+    const { name, space, type, children, isLeaf } = node;
+    if (children.length || isLeaf) return;
+    if (type === 'space') {
+      const [tags, edges] = await Promise.all([schema.getTags(name), schema.getEdges(name)]);
+      update({
+        schemaOverview: schemaOverview.map((i) => {
+          if (i.name !== name) return i;
+          return {
+            ...i,
+            children: [
+              ...tags.map((tag) => ({
+                name: tag,
+                type: 'tag',
+                children: [],
+              })),
+              ...edges.map((edge) => ({
+                name: edge,
+                type: 'edge',
+                children: [],
+              })),
+            ],
+          };
+        }),
+      });
+    } else {
+      const { code, data } = await schema.getTagOrEdgeInfo(node.type, name, space);
+      if (code === 0) {
+        const newData = schemaOverview.map((i) => {
+          if (i.name !== space) return i;
+          return {
+            ...i,
+            children: i.children.map((j) => {
+              if (j.name === name) {
+                return {
+                  ...j,
+                  children: data.tables.map((i) => ({ ...i, type: 'field' })),
+                };
+              }
+              return j;
+            }),
+          };
+        });
+        update({ schemaOverview: newData });
+      }
+    }
+  };
+
+  const onSearch = (e) => {
+    const { value } = e.target;
+    setSearchVal(value);
+  };
+  const data = useMemo(() => {
+    let _data = schemaOverview || [];
+    if (searchVal !== '') {
+      _data = _data.filter((i) => isIncluded(i.name, searchVal));
+    }
+    return formatSchemaInfo({ data: _data });
+  }, [schemaOverview, searchVal]);
+  useEffect(() => {
+    getSchemaInfo();
+  }, []);
+  return (
+    <>
+      {!open && (
+        <div className={styles.toggleDrawer} onClick={() => setOpen(true)}>
+          <Icon type="icon-Thumbnail-treeView" className={styles.toggleBtn} />
+          <Icon type="icon-Thumbnail-pack_up" className={styles.toggleBtn} />
+        </div>
+      )}
+      {open && (
+        <div className={styles.consoleDrawer}>
+          <div className={styles.header}>
+            <div className={styles.label}>
+              <Icon type="icon-Thumbnail-treeView" className={styles.toggleBtn} />
+              <span>{intl.get('common.schema')}</span>
+            </div>
+            <Icon type="icon-studio-btn-close" className={styles.closeBtn} onClick={() => setOpen(false)} />
+          </div>
+          <div className={styles.content}>
+            <Input
+              placeholder="Search space name..."
+              prefix={<SearchOutlined />}
+              className={styles.inputSearch}
+              onChange={onSearch}
+            />
+            <Tree
+              onExpand={setExpandedKeys}
+              expandedKeys={expandedKeys}
+              switcherIcon={<DownOutlined />}
+              blockNode
+              showIcon
+              selectable={false}
+              treeData={data}
+              loadData={onLoadData}
+            />
+          </div>
+          <div className={styles.footer}>
+            <Icon type="icon-Thumbnail-pack_down" className={styles.toggleBtn} onClick={() => setOpen(false)} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default observer(SchemaDrawer);
diff --git a/app/pages/Console/Drawer/index.module.less b/app/pages/Console/Drawer/index.module.less
new file mode 100644
index 00000000..ac5fb952
--- /dev/null
+++ b/app/pages/Console/Drawer/index.module.less
@@ -0,0 +1,179 @@
+@import '@app/common.less';
+.toggleDrawer {
+  width: 53px;
+  padding: 10px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 700;
+  border-width: 20px 0 1px 1px;
+  border-color: #ececee;
+  pointer-events: all;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+.docList {
+  .ngqlItem {
+    padding: 12px 15px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    .index {
+      margin-right: 5px;
+    }
+    .itemContent {
+      display: flex;
+      flex-direction: column;
+      .title {
+        cursor: pointer;
+        margin-bottom: 10px;
+        &:hover {
+          background: @lightBlue;
+        }
+      }
+      .description {
+        color: #A1A1AA;
+      }
+    }
+  }
+  
+}
+
+
+@keyframes panelOut {
+  0%{
+    left: 0px;
+    opacity: 0;
+    width: 0;
+  }
+  100%{
+    left: 0;
+    opacity: 1; 
+    width: 280px;
+  }
+}
+
+.consoleDrawer {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  background-color: white;
+  border-left: 1px solid #E0E0E0;
+  animation: panelOut 400ms;
+  animation-fill-mode: forwards;
+  flex: 0 0 auto;
+  .header {
+    display: flex;
+    height: 60px;
+    padding: 12px 15px;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #D4D4D8;
+    .label {
+      display: flex;
+      align-items: flex-end;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      & > span:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+  .content {
+    overflow: auto;
+    &::-webkit-scrollbar{
+      display: none;
+    }
+    flex: 1;
+    .inputSearch {
+      border: none;
+      border-radius: 0;
+      background-color: #8383831A;
+      color: #71717A;
+      &:focus, &:hover {
+        box-shadow: none !important;
+        border-bottom-width: 0
+      }
+      :global(.ant-input) {
+        background-color: transparent;
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    padding: 10px;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+    flex: 0;
+  }
+  :global {
+    .ant-tree-treenode {
+      padding: 12px 10px;
+      border-bottom: 1px solid #E4E4E7;
+    }
+    .ant-tree-node-content-wrapper {
+      display: flex;
+      align-items: center;
+      padding: 0;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .ant-tree-title {
+      font-size: 16px;
+      font-style: normal;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: pre-wrap;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      text-align: left;
+      word-break: break-all;
+    }
+    .ant-tree-iconEle:not(:empty) {
+      display: inline-flex !important;
+      align-items: center;
+    }
+    .ant-tree-switcher-noop {
+      display: none;
+    }
+  }
+  .fieldTypeName {
+    max-width: 65%;
+    display: inline-flex;
+  }
+  .fieldTypeTag {
+    margin-left: 5px;
+    padding: 2px 10px;
+    border-radius: 26px;
+    background-color: #8383831A;
+    color: #0961B3;
+  }
+  .treeNodeIcon > svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.toggleBtn > svg {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.closeBtn {
+  cursor: pointer;
+  & > svg {
+    width: 24px;
+    height: 24px;
+  }
+}
diff --git a/app/pages/Console/HistoryBtn.tsx b/app/pages/Console/HistoryBtn.tsx
index f8f0aa5c..0c738a6f 100644
--- a/app/pages/Console/HistoryBtn.tsx
+++ b/app/pages/Console/HistoryBtn.tsx
@@ -4,7 +4,6 @@ import Icon from '@app/components/Icon';
 import { useI18n } from '@vesoft-inc/i18n';
 import styles from './index.module.less';
 
-
 interface IProps {
   onGqlSelect: (gql: string) => void;
 }
@@ -46,22 +45,13 @@ const HistoryBtn = (props: IProps) => {
 
   return (
     <>
-      <Tooltip
-        title={intl.get('common.seeTheHistory')}
-        placement="top"
-      >
-        <Icon
-          className={styles.btnOperations}
-          type="icon-studio-btn-history"
-          onClick={handleView}
-        />
+      <Tooltip title={intl.get('common.seeTheHistory')} placement="top">
+        <Icon className={styles.btnOperations} type="icon-studio-btn-history" onClick={handleView} />
       </Tooltip>
       <Modal
         title={
           <>
-            <span>
-              {intl.get('common.NGQLHistoryList')}
-            </span>
+            <span>{intl.get('common.NGQLHistoryList')}</span>
             <Button type="link" onClick={handleClear}>
               {intl.get('console.deleteHistory')}
             </Button>
@@ -72,15 +62,15 @@ const HistoryBtn = (props: IProps) => {
         footer={null}
         onCancel={() => setVisible(false)}
       >
+        <div className={styles.tips}>
+          <span className={styles.tipContent}>{intl.get('console.historyTip')}</span>
+        </div>
         {
           <List
             itemLayout="horizontal"
             dataSource={data}
             renderItem={(item: string) => (
-              <List.Item
-                style={{ cursor: 'pointer', wordBreak: 'break-all' }}
-                onClick={() => handleSelect(item)}
-              >
+              <List.Item style={{ cursor: 'pointer', wordBreak: 'break-all' }} onClick={() => handleSelect(item)}>
                 {renderStr(item)}
               </List.Item>
             )}
diff --git a/app/pages/Console/OutputBox/ForceGraph/index.module.less b/app/pages/Console/OutputBox/ForceGraph/index.module.less
index db25eec5..9d608ee4 100644
--- a/app/pages/Console/OutputBox/ForceGraph/index.module.less
+++ b/app/pages/Console/OutputBox/ForceGraph/index.module.less
@@ -1,8 +1,13 @@
 @import '@app/common.less';
+.forceGraphCanvas {
+  height: 100%;
+}
 .forceGraph {
   position: relative;
   width: 100%;
+  height: 100%;
   flex: auto;
+  overflow: hidden;
 }
 .graphLoading {
   position: absolute;
diff --git a/app/pages/Console/OutputBox/ForceGraph/index.tsx b/app/pages/Console/OutputBox/ForceGraph/index.tsx
index 2825a64b..43bf993d 100644
--- a/app/pages/Console/OutputBox/ForceGraph/index.tsx
+++ b/app/pages/Console/OutputBox/ForceGraph/index.tsx
@@ -19,8 +19,10 @@ interface IProps {
   onGraphInit: (graph: GraphStore) => void;
 }
 const ForceGraphBox = (props: IProps) => {
-  const [uuid ] = useState(uuidv4());
-  const { graphInstances: { graphs, initGraph, clearGraph, renderData } } = useStore();
+  const [uuid] = useState(uuidv4());
+  const {
+    graphInstances: { graphs, initGraph, clearGraph, renderData },
+  } = useStore();
   const grapfDomRef = useRef<any>();
   const { data, spaceVidType, onGraphInit, space } = props;
   const [loading, setLoading] = useState(false);
@@ -51,23 +53,29 @@ const ForceGraphBox = (props: IProps) => {
   const { nodes, links, nodesSelected, linksSelected } = currentGraph || {};
   const selected = nodesSelected && (nodesSelected.size > 0 || linksSelected.size > 0);
   return (
-    <div className="explore-main-canvas">
+    <div className={styles.forceGraphCanvas}>
       {loading && <Spin className={styles.graphLoading} />}
       <div id={uuid} className={styles.forceGraph} ref={grapfDomRef} />
-      {currentGraph && <>
-        <OperationPanel graph={currentGraph} />
-        <Menu id={uuid} />
-        <DisplayPanel
-          data={
-            selected ? {
-              nodes: [...nodesSelected],
-              links: [...linksSelected]
-            } : {
-              nodes: [...nodes || []],
-              links: [...links || []]
-            }} 
-          spaceVidType={spaceVidType} />
-      </>}
+      {currentGraph && (
+        <>
+          <OperationPanel graph={currentGraph} />
+          <Menu id={uuid} />
+          <DisplayPanel
+            data={
+              selected
+                ? {
+                    nodes: [...nodesSelected],
+                    links: [...linksSelected],
+                  }
+                : {
+                    nodes: [...(nodes || [])],
+                    links: [...(links || [])],
+                  }
+            }
+            spaceVidType={spaceVidType}
+          />
+        </>
+      )}
     </div>
   );
 };
diff --git a/app/pages/Console/OutputBox/index.module.less b/app/pages/Console/OutputBox/index.module.less
index ec934bf8..70d38704 100644
--- a/app/pages/Console/OutputBox/index.module.less
+++ b/app/pages/Console/OutputBox/index.module.less
@@ -8,7 +8,6 @@
   flex-direction: column;
   margin: 20px 0;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
 
   .outputHeader {
     padding: 12px 15px;
@@ -20,14 +19,14 @@
       flex: 1;
       display: inline-block;
       margin: 0;
-      background-color: #DFFFDA;
+      background: #00bfa54d;
       border-radius: 6px;
       padding: 11px 14px;
       cursor: pointer;
       font-family: Roboto-Regular, sans-serif;
       font-weight: 500;
       font-size: 18px;
-      color: #27AE60;
+      color: #00bfa5;
     }
 
     .gqlValue {
@@ -41,8 +40,8 @@
     }
 
     .errorInfo {
-      background-color: #fff2f0;
-      color: #ff4d4f;
+      background-color: #d32f2f4d;
+      color: #d32f2f;
     }
 
     .outputOperations {
@@ -62,7 +61,7 @@
         }
 
         &.btnYellow svg {
-          color: #F2C94C;
+          color: #f2c94c;
         }
       }
 
@@ -78,16 +77,17 @@
 
   .tabContainer {
     position: relative;
-    border-top: 1px solid #E0E0E0;
+    border-top: 1px solid #e0e0e0;
     flex: 1;
     white-space: pre;
+    overflow: auto;
 
     .outputTab {
-      min-height: 300px;
-      max-height: 720px;
+      height: 100%;
 
       &> :global(.ant-tabs-nav) {
         width: 80px;
+        height: 100%;
 
         :global {
           .ant-tabs-tab {
@@ -103,7 +103,6 @@
               flex-direction: column;
               align-items: center;
               justify-content: center;
-              color: @darkGray;
 
               .anticon {
                 margin-right: 0;
@@ -116,21 +115,24 @@
             }
 
             &.ant-tabs-tab-active {
-              background: @lightBlue;
+              background: #0d8bff;
 
               .ant-tabs-tab-btn {
-                color: @blue;
+                color: #fff;
               }
             }
           }
         }
-
       }
 
       &> :global(.ant-tabs-content-holder) {
+        position: relative;
+        background-color: #fff;
+        overflow: auto;
+        
         :global {
           .ant-tabs-content {
-
+            height: 100%;
             .ant-table,
             .ant-pagination {
               margin: 20px;
@@ -142,6 +144,7 @@
               background-color: @lightBlue;
               max-height: 700px;
               overflow: auto;
+              height: 100%;
             }
           }
         }
@@ -149,6 +152,7 @@
 
       .errContainer {
         padding: 20px;
+        color: #d32f2f;
       }
     }
 
@@ -170,7 +174,7 @@
     padding: 15px 18px;
     width: 100%;
     height: 65px;
-    border-top: 1px solid #E0E0E0;
+    border-top: 1px solid #e0e0e0;
     font-family: Roboto-Regular, sans-serif;
     font-size: 16px;
     color: @darkBlue;
@@ -190,6 +194,19 @@
         margin-right: 10px;
       }
     }
+
+    .resizeBtn {
+      position: absolute;
+      bottom: 5px;
+      right: 10px;
+      cursor: ns-resize;
+      transition: none;
+
+      svg {
+        width: 28px;
+        height: 28px;
+      }
+    }
   }
 }
 
diff --git a/app/pages/Console/OutputBox/index.tsx b/app/pages/Console/OutputBox/index.tsx
index a6d1c9fe..018cd915 100644
--- a/app/pages/Console/OutputBox/index.tsx
+++ b/app/pages/Console/OutputBox/index.tsx
@@ -1,6 +1,6 @@
 import { Button, Table, Tabs, Tooltip, Popover } from 'antd';
 import { BigNumber } from 'bignumber.js';
-import { useCallback, useEffect, useState, useMemo } from 'react';
+import { useCallback, useEffect, useState, useMemo, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@app/stores';
 import { trackEvent } from '@app/utils/stat';
@@ -38,7 +38,12 @@ const OutputBox = (props: IProps) => {
   const [isFavorited, setIsFavorited] = useState(false);
   const [showGraph, setShowGraph] = useState(false);
   const [graph, setGraph] = useState<GraphStore | null>(null);
+  const [height, setHeight] = useState(null);
   const [tab, setTab] = useState('');
+  const outputBoxRef = useRef<HTMLDivElement>();
+  const headerRef = useRef<HTMLDivElement>();
+  const position: React.MutableRefObject<Record<string, number>> = useRef({});
+
   const initData = useCallback(() => {
     let _columns = [] as any;
     let _dataSource = [] as any;
@@ -100,6 +105,10 @@ const OutputBox = (props: IProps) => {
 
   useEffect(() => {
     initData();
+    return () => {
+      document.removeEventListener('mousemove', onDrag);
+      document.removeEventListener('mouseup', onDragEnd);
+    };
   }, []);
 
   const handleTabChange = useCallback((key) => {
@@ -212,6 +221,33 @@ const OutputBox = (props: IProps) => {
       edges,
     });
   };
+
+  const onDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const bbox = outputBoxRef.current.getBoundingClientRect();
+    position.current = {
+      startY: e.pageY,
+      height: bbox.height,
+    };
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', onDragEnd);
+  };
+
+  const onDrag = (e: MouseEvent) => {
+    e.preventDefault();
+    const dy = e.pageY - position.current.startY;
+    const height = dy + position.current.height;
+    const header = headerRef.current.getBoundingClientRect();
+    if (height <= header.height + 70) return;
+    setHeight(height);
+    graph?.resize();
+  };
+
+  const onDragEnd = () => {
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', onDragEnd);
+  };
+
   const resultSuccess = code === 0;
   const items = useMemo(() => {
     const isDot = data.headers[0] === 'format';
@@ -296,8 +332,15 @@ const OutputBox = (props: IProps) => {
     ].filter(Boolean);
   }, [gql, data, dataSource, columns]);
   return (
-    <div className={styles.outputBox}>
-      <div className={styles.outputHeader}>
+    <div
+      className={styles.outputBox}
+      ref={outputBoxRef}
+      style={{
+        height: height ? `${height}px` : undefined,
+        position: 'relative',
+      }}
+    >
+      <div className={styles.outputHeader} ref={headerRef}>
         <p
           className={cls(styles.gql, { [styles.errorInfo]: !resultSuccess })}
           onClick={() => onHistoryItem(gql, space)}
@@ -364,6 +407,9 @@ const OutputBox = (props: IProps) => {
                   </Button>
                 )}
               </div>
+              <div className={styles.resizeBtn} draggable onMouseDown={onDragStart}>
+                <Icon type="icon-rightclickmenu-fitToSelection" />
+              </div>
             </div>
           )}
         </>
diff --git a/app/pages/Console/index.module.less b/app/pages/Console/index.module.less
index d8ad8bc4..e7b0bb10 100644
--- a/app/pages/Console/index.module.less
+++ b/app/pages/Console/index.module.less
@@ -1,5 +1,25 @@
 @import '@app/common.less';
 .nebulaConsole {
+  display: flex;
+  position: relative;
+  height: calc(100vh - 60px);
+  overflow: auto;
+  width: 100%;
+  &::-webkit-scrollbar{
+    display: none;
+  }
+  .resultContainer {
+    overflow: auto;
+    margin-bottom: 30px;
+  }
+  
+  .consoleContainer {
+    overflow-x: hidden;
+    flex: 1 1 auto; 
+    width: auto; 
+    border-left: 1px solid #D4D4D8;
+    border-right: 1px solid #D4D4D8;
+  }
   .spaceSelect {
     display: flex;
     align-items: center;
@@ -7,9 +27,7 @@
       .ant-select {
         width: 306px;
         .ant-select-selector {
-          background: @lightBlue;
           border-radius: 3px;
-          border: none;
         }
         .ant-select-selection-item {
           color: @darkBlue;
@@ -29,10 +47,8 @@
     }
   }
   .consolePanel {
-    margin-top: 25px;
     background: #FFFFFF;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
     padding: 14px 30px;
     .panelHeader {
       margin-bottom: 15px;
@@ -158,11 +174,23 @@
 	height: 80%;
 	overflow: hidden;
 	position: relative;
+  .tips {
+    border-radius: 11px;
+    background: #D4EBFF;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    .tipContent {
+      color: #0D8BFF;
+    }
+  }
   &:global(.ant-modal .ant-modal-content) {
     position: relative;
     height: 100%;
     overflow: auto;
     :global {
+      .ant-modal-header {
+        border-bottom: none;
+      }
       .ant-modal-body {
         padding-top: 0px;
       }
@@ -177,4 +205,151 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.toggleDrawer {
+  width: 53px;
+  padding: 10px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 700;
+  border-width: 20px 0 1px 1px;
+  border-color: #ececee;
+  pointer-events: all;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.treeNodeTitle {
+  display: inline-flex;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: pre-wrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-align: left;
+  word-break: break-all;
+}
+
+.ngqlItem {
+  display: block;
+  cursor: pointer;
+  padding: 0 5px;
+  &:hover {
+    background: @lightBlue;
+  }
+}
+
+@keyframes panelOut {
+  0%{
+    left: 0px;
+    opacity: 0;
+    width: 0;
+  }
+  100%{
+    left: 0;
+    opacity: 1; 
+    width: 280px;
+  }
+}
+
+.consoleDrawer {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  background-color: white;
+  border-left: 1px solid #E0E0E0;
+  animation: panelOut 400ms;
+  animation-fill-mode: forwards;
+  flex: 0 0 auto;
+  .header {
+    display: flex;
+    height: 60px;
+    padding: 12px 15px;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #D4D4D8;
+    .label {
+      display: flex;
+      align-items: flex-end;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      & > span:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+  .content {
+    overflow: auto;
+    &::-webkit-scrollbar{
+      display: none;
+    }
+  }
+  .footer {
+    display: flex;
+    padding: 10px;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+  }
+  :global {
+    .ant-tree-treenode {
+      padding: 12px 10px;
+      border-bottom: 1px solid #E4E4E7;
+    }
+    .ant-tree-node-content-wrapper {
+      display: flex;
+      align-items: center;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .ant-tree-title {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: pre-wrap;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-align: left;
+      word-break: break-all;
+    }
+    .ant-tree-switcher-noop {
+      display: none;
+    }
+  }
+  .fieldTypeTag {
+    margin-left: 5px;
+    padding: 2px 10px;
+    border-radius: 26px;
+    background-color: #8383831A;
+    color: #0961B3;
+  }
+  .treeNodeIcon > svg{
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.toggleBtn > svg {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.closeBtn {
+  cursor: pointer;
+  & > svg {
+    width: 24px;
+    height: 24px;
+  }
+}
diff --git a/app/pages/Console/index.tsx b/app/pages/Console/index.tsx
index 3b9650d4..32c840f5 100644
--- a/app/pages/Console/index.tsx
+++ b/app/pages/Console/index.tsx
@@ -1,17 +1,22 @@
-import { Button, Select, Tooltip, message } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { Button, Select, Spin, Tooltip, message } from 'antd';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { trackEvent, trackPageView } from '@app/utils/stat';
 import { useStore } from '@app/stores';
 import Icon from '@app/components/Icon';
-import CodeMirror from '@app/components/CodeMirror';
+import MonacoEditor from '@app/components/MonacoEditor';
 import { useI18n } from '@vesoft-inc/i18n';
+import { safeParse } from '@app/utils/function';
 import OutputBox from './OutputBox';
 import HistoryBtn from './HistoryBtn';
 import FavoriteBtn from './FavoriteBtn';
 import CypherParameterBox from './CypherParameterBox';
 import ExportModal from './ExportModal';
+import SchemaDrawer from './Drawer/SchemaDrawer';
+// import NgqlDrawer from './Drawer/NgqlDrawer';
 import styles from './index.module.less';
+import { SchemaItemOverview } from '@app/stores/console';
+
 const Option = Select.Option;
 
 // split from semicolon out of quotation marks
@@ -20,18 +25,14 @@ const SEMICOLON_REG = /((?:[^;'"]*(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*')[^;'"]*)+)|
 const getHistory = () => {
   const value: string | null = localStorage.getItem('history');
   if (value && value !== 'undefined' && value !== 'null') {
-    return JSON.parse(value).slice(0, 15);
+    return safeParse<string[]>(value)?.slice(0, 15) || [];
   }
   return [];
 };
 
 interface IProps {
-  onExplorer?: (params: {
-    space: string;
-    vertexes: any[], 
-    edges: any[]
-  }) => void,
-  templateRender?: (data?) => JSX.Element
+  onExplorer?: (params: { space: string; vertexes: any[]; edges: any[] }) => void;
+  templateRender?: (data?) => JSX.Element;
 }
 const Console = (props: IProps) => {
   const { schema, console } = useStore();
@@ -56,28 +57,33 @@ const Console = (props: IProps) => {
     spaceVidType: string;
     [key: string]: any;
   }>(null);
+  const [schemaTree, setSchemaTree] = useState<SchemaItemOverview>({} as SchemaItemOverview);
+  const [editorLoading, setEditorLoading] = useState(false);
   const editor = useRef<any>(null);
+  const ref = useRef(null);
+  const historyProviderRef = useRef(null);
   useEffect(() => {
     trackPageView('/console');
     getSpaces();
     getParams();
     getFavoriteList();
+    currentSpace && handleSwitchSpace(currentSpace);
+    return () => {
+      historyProviderRef.current?.dispose();
+    };
   }, []);
 
   const checkSwitchSpaceGql = (query: string) => {
     const queryList = query.split(SEMICOLON_REG).filter(Boolean);
     const reg = /^USE `?.+`?(?=[\s*;?]?)/gim;
-    if (queryList.some(sentence => sentence.trim().match(reg))) {
+    if (queryList.some((sentence) => sentence.trim().match(reg))) {
       return intl.get('common.disablesUseToSwitchSpace');
     }
   };
 
   const updateGql = (value: string, space?: string) => {
     update({ currentGQL: value, currentSpace: space || currentSpace });
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
+    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
   };
 
   const handleSaveQuery = (query: string) => {
@@ -85,43 +91,43 @@ const Console = (props: IProps) => {
       const history = getHistory();
       history.unshift(query);
       localStorage.setItem('history', JSON.stringify(history));
+      setHistoryProvider();
     }
   };
 
-  const handleRun = async () => {
-    if(editor.current) {
-      const value = editor.current!.editor.getValue();
-      const query = value.split('\n').filter(i => !i.trim().startsWith('//') && !i.trim().startsWith('#')).join('\n');
-      if (!query) {
-        message.error(intl.get('common.sorryNGQLCannotBeEmpty'));
-        return;
-      }
-      const errInfo = checkSwitchSpaceGql(query);
-      if (errInfo) {
-        return message.error(errInfo);
-      }
-  
-      editor.current!.editor.execCommand('goDocEnd');
-      handleSaveQuery(query);
-      await runGQL({ gql: query, editorValue: value });
+  const handleRun = async (text?: string) => {
+    if (!editor.current) return;
+    const _editor = editor.current.editor;
+    const editorValue = _editor.getValue();
+    const value = text || editorValue;
+    const query = value
+      .split('\n')
+      .filter((i) => !i.trim().startsWith('//') && !i.trim().startsWith('#'))
+      .join('\n');
+    if (!query) {
+      message.error(intl.get('common.sorryNGQLCannotBeEmpty'));
+      return;
+    }
+    const errInfo = checkSwitchSpaceGql(query);
+    if (errInfo) {
+      return message.error(errInfo);
     }
+
+    handleSaveQuery(query);
+    await runGQL({ gql: query, editorValue });
   };
 
   const addParam = (param: string) => {
     update({ currentGQL: currentGQL + ` $${param}` });
   };
 
-  const handleResultConfig = (data: {
-    space: string;
-    spaceVidType: string;
-    [key: string]: any;
-  }) => {
+  const handleResultConfig = (data: { space: string; spaceVidType: string; [key: string]: any }) => {
     setModalData(data);
     setModalVisible(true);
   };
 
   const handleExplorer = async (data) => {
-    if(!onExplorer) {
+    if (!onExplorer) {
       return;
     }
     await onExplorer!(data);
@@ -131,16 +137,99 @@ const Console = (props: IProps) => {
   const handleGetSpaces = (open: boolean) => {
     open && getSpaces();
   };
+  const setHistoryProvider = () => {
+    historyProviderRef.current?.dispose();
+    const { monaco } = editor.current;
+    let history = getHistory();
+    history = history.map((i) => `/${i}`);
+    if (!history.length) return;
+    historyProviderRef.current = monaco?.languages.registerCompletionItemProvider('ngql', {
+      provideCompletionItems: (model, position) => {
+        const word = model.getWordUntilPosition(position);
+        if (word.word !== '') return;
+        const suggestions = [
+          ...Array.from(new Set(history)).map((k: string, index) => {
+            const sortText = String(index + 1);
+            return {
+              label: k,
+              kind: monaco.languages.CompletionItemKind.Text,
+              insertText: k.slice(1),
+              detail: intl.get('common.historyRecord'),
+              sortText,
+              range: {
+                startLineNumber: position.lineNumber,
+                endLineNumber: position.lineNumber,
+                startColumn: position.column - 1,
+                endColumn: position.column,
+              },
+            };
+          }),
+        ];
+        return { suggestions: suggestions };
+      },
+      triggerCharacters: ['/'],
+    });
+  };
+
+  const onInstanceMount = (instance, monaco) => {
+    editor.current = {
+      editor: instance,
+      monaco: monaco,
+    };
+    instance.addAction({
+      id: 'my-unique-id',
+      label: intl.get('console.runSelectionRows'),
+      // keybindings: [
+      //   monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E,
+      // ],
+      contextMenuGroupId: 'myMenu',
+      contextMenuOrder: 1.5,
+      run: function () {
+        const _editor = editor.current.editor;
+        let value = '';
+        const selection = _editor.getSelection();
+        if (selection.startLineNumber !== selection.endLineNumber || selection.startColumn !== selection.endColumn) {
+          for (let lineNumber = selection.startLineNumber; lineNumber <= selection.endLineNumber; lineNumber++) {
+            value += _editor.getModel().getLineContent(lineNumber) + '\n';
+          }
+        }
+        if (value === '') {
+          message.info(intl.get('console.selectEmpty'));
+          return;
+        }
+        handleRun(value);
+      },
+    });
+    setHistoryProvider();
+  };
+  const handleEditorChange = useCallback((value: string) => update({ currentGQL: value }), []);
+  const handleSwitchSpace = useCallback(async (space: string) => {
+    setEditorLoading(true);
+    try {
+      await updateCurrentSpace(space);
+      const data = await schema.getSchemaTree(space);
+      data && setSchemaTree(data);
+    } finally {
+      setEditorLoading(false);
+    }
+  }, []);
   return (
     <div className={styles.nebulaConsole}>
-      <div className="studioCenterLayout">
-        <div className={styles.consolePanel}>
+      <SchemaDrawer />
+      <div className={styles.consoleContainer}>
+        <div className={styles.consolePanel} ref={ref}>
           <div className={styles.panelHeader}>
             <span className={styles.title}>{`${window.gConfig.databaseName} ${intl.get('common.console')}`}</span>
             <div className={styles.operations}>
               <div className={styles.spaceSelect}>
-                <Select allowClear value={currentSpace || null} placeholder={intl.get('console.selectSpace')} onDropdownVisibleChange={handleGetSpaces} onChange={updateCurrentSpace}>
-                  {spaces.map(space => (
+                <Select
+                  allowClear
+                  value={currentSpace || null}
+                  placeholder={intl.get('console.selectSpace')}
+                  onDropdownVisibleChange={handleGetSpaces}
+                  onChange={handleSwitchSpace}
+                >
+                  {spaces.map((space) => (
                     <Option value={space} key={space}>
                       {space}
                     </Option>
@@ -152,55 +241,64 @@ const Console = (props: IProps) => {
                 <FavoriteBtn onGqlSelect={updateGql} />
                 <HistoryBtn onGqlSelect={updateGql} />
                 <Tooltip title={intl.get('common.empty')} placement="top">
-                  <Icon className={styles.btnOperations} type="icon-studio-btn-clear" onClick={() => update({ currentGQL: '' })} />
+                  <Icon
+                    className={styles.btnOperations}
+                    type="icon-studio-btn-clear"
+                    onClick={() => update({ currentGQL: '' })}
+                  />
                 </Tooltip>
-                <Button type="primary" onClick={handleRun} loading={runGQLLoading}>
+                <Button type="primary" onClick={() => handleRun()} loading={runGQLLoading}>
                   <Icon type="icon-studio-btn-play" />
-                  {intl.get('common.run')} 
+                  {intl.get('common.run')}
                 </Button>
               </div>
             </div>
           </div>
-          <div className={styles.codeInput}>
-            <CypherParameterBox onSelect={addParam} data={paramsMap} />
-            <CodeMirror
-              value={currentGQL}
-              onChange={value => update({ currentGQL: value })}
-              ref={editor}
-              height="120px"
-              onShiftEnter={handleRun}
-              options={{
-                keyMap: 'sublime',
-                fullScreen: true,
-                mode: 'nebula',
-              }}
-            />
-          </div>
+          <Spin spinning={editorLoading} delay={200}>
+            <div className={styles.codeInput}>
+              <CypherParameterBox onSelect={addParam} data={paramsMap} />
+              <MonacoEditor
+                onInstanceChange={onInstanceMount}
+                schema={schemaTree}
+                value={currentGQL}
+                onChange={handleEditorChange}
+                onShiftEnter={handleRun}
+              />
+            </div>
+          </Spin>
         </div>
-        <div className="result-wrap">
-          {results.length > 0 ? results.map((item, index) => (
+        <div className={styles.resultContainer}>
+          {results.length > 0 ? (
+            results.map((item, index) => (
+              <OutputBox
+                key={item.id}
+                index={index}
+                result={item}
+                templateRender={templateRender}
+                onExplorer={onExplorer ? handleExplorer : undefined}
+                onHistoryItem={(gql, space) => updateGql(gql, space)}
+                onResultConfig={handleResultConfig}
+              />
+            ))
+          ) : (
             <OutputBox
-              key={item.id}
-              index={index}
-              result={item}
-              templateRender={templateRender}
-              onExplorer={onExplorer ? handleExplorer : undefined}
-              onHistoryItem={(gql, space) => updateGql(gql, space)}
-              onResultConfig={handleResultConfig}
+              key="empty"
+              index={0}
+              result={{ id: 'empty', gql: '', code: 0, data: { headers: [], tables: [] } }}
+              onHistoryItem={(gql) => updateGql(gql)}
             />
-          )) : <OutputBox
-            key="empty"
-            index={0}
-            result={{ id: 'empty', gql: '', code: 0, data: { headers: [], tables: [] } }}
-            onHistoryItem={gql => updateGql(gql)}
-          />}
+          )}
         </div>
       </div>
-      {modalVisible && <ExportModal 
-        visible={modalVisible} 
-        data={modalData} 
-        onClose={() => setModalVisible(false)}
-        onExplorer={handleExplorer} />}
+      {/* <NgqlDrawer onItemClick={(v) => updateGql(currentGQL + v)} /> */}
+      {modalVisible && (
+        <ExportModal
+          visible={modalVisible}
+          data={modalData}
+          onClose={() => setModalVisible(false)}
+          onExplorer={handleExplorer}
+        />
+      )}
     </div>
   );
 };
diff --git a/app/pages/MainPage/index.tsx b/app/pages/MainPage/index.tsx
index 71255b0f..2773059e 100644
--- a/app/pages/MainPage/index.tsx
+++ b/app/pages/MainPage/index.tsx
@@ -21,7 +21,7 @@ const MainPage = () => {
               path={route.path}
               render={() => (
                 <>
-                  <Suspense fallback={<Spin />}>
+                  <Suspense fallback={<Spin style={{ marginTop: 32 }} />}>
                     <Content>
                       <Route component={route.component} />
                     </Content>
diff --git a/app/pages/Schema/SchemaConfig/DDLModal/index.tsx b/app/pages/Schema/SchemaConfig/DDLModal/index.tsx
index a283de65..de9cfcf5 100644
--- a/app/pages/Schema/SchemaConfig/DDLModal/index.tsx
+++ b/app/pages/Schema/SchemaConfig/DDLModal/index.tsx
@@ -3,7 +3,7 @@ import Icon from '@app/components/Icon';
 import { useCallback, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import CodeMirror from '@app/components/CodeMirror';
+import MonacoEditor from '@app/components/MonacoEditor';
 
 import { useStore } from '@app/stores';
 import { handleKeyword } from '@app/utils/function';
@@ -15,14 +15,9 @@ interface IProps {
   open: boolean;
   onCancel?: () => void;
 }
-const options = {
-  keyMap: 'sublime',
-  fullScreen: true,
-  mode: 'nebula',
-  readOnly: true,
-};
+
 const sleepGql = `:sleep 20;`;
-const DDLButton = (props: IProps) => {
+const DDLModal = (props: IProps) => {
   const { space, open, onCancel } = props;
   const { intl } = useI18n();
   const [loading, setLoading] = useState(false);
@@ -114,7 +109,7 @@ const DDLButton = (props: IProps) => {
                 {intl.get('common.duplicate')}
               </Button>
             </CopyToClipboard>
-            <CodeMirror value={ddl} options={options} />
+            <MonacoEditor value={ddl} readOnly />
           </div>
         )}
       </Spin>
@@ -122,4 +117,4 @@ const DDLButton = (props: IProps) => {
   );
 };
 
-export default observer(DDLButton);
+export default observer(DDLModal);
\ No newline at end of file
diff --git a/app/stores/console.ts b/app/stores/console.ts
index 16ad2739..62192570 100644
--- a/app/stores/console.ts
+++ b/app/stores/console.ts
@@ -6,6 +6,7 @@ import { getI18n } from '@vesoft-inc/i18n';
 import { safeParse } from '@app/utils/function';
 import { NgqlRes } from '@app/utils/websocket';
 import { getRootStore } from '.';
+import { IField } from '@app/interfaces/schema';
 
 const { intl } = getI18n();
 
@@ -32,6 +33,16 @@ export type HistoryResult = NgqlRes & {
   space?: string;
   spaceVidType?: string;
 };
+interface IProperty {
+  name: string;
+  type: string;
+  children: IField[];
+}
+export interface SchemaItemOverview {
+  name: string;
+  type: string;
+  children: IProperty[];
+}
 
 const DEFAULT_GQL = 'SHOW SPACES;';
 export class ConsoleStore {
@@ -44,9 +55,11 @@ export class ConsoleStore {
     id: string;
     content: string;
   }[];
+  schemaOverview = [] as SchemaItemOverview[];
   constructor() {
     makeAutoObservable(this, {
       results: observable.ref,
+      schemaOverview: observable.ref,
       currentSpace: observable,
       paramsMap: observable,
       currentGQL: observable,
diff --git a/app/stores/graph.ts b/app/stores/graph.ts
index 49fe47de..89a2a0c0 100644
--- a/app/stores/graph.ts
+++ b/app/stores/graph.ts
@@ -400,11 +400,21 @@ export class GraphStore {
 
   destroyGraph() {
     this.twoGraph?.destroy();
+    window.removeEventListener('resize', this.resize);
   }
 
+  resize = () => {
+    if (!this.twoGraph) return;
+    const rect = this.twoGraph.container.getBoundingClientRect();
+    this.width = rect.width;
+    this.height = rect.height;
+    this.twoGraph.resize();
+  };
+
   // init ForceGraph instance ,it will be called only once
   initGraph = ({ container }: { container: HTMLElement }) => {
     this.twoGraph = new TwoGraph(this, container);
+    window.addEventListener('resize', this.resize);
   };
 }
 
diff --git a/app/stores/schema.ts b/app/stores/schema.ts
index 522ba233..76357198 100644
--- a/app/stores/schema.ts
+++ b/app/stores/schema.ts
@@ -223,10 +223,10 @@ export class SchemaStore {
   };
 
   // edges
-  getEdges = async () => {
+  getEdges = async (space?: string) => {
     const { code, data } = await service.execNGQL({
       gql: `show edges;`,
-      space: this.currentSpace,
+      space: space || this.currentSpace,
     });
     if (code === 0) {
       const edgeTypes = data.tables.map((item) => item.Name);
@@ -258,8 +258,8 @@ export class SchemaStore {
     }
   };
 
-  getEdgeList = async () => {
-    const edgeTypes = await this.getEdges();
+  getEdgeList = async (space?: string) => {
+    const edgeTypes = await this.getEdges(space);
     if (edgeTypes) {
       const edgeList: IEdge[] = [];
       await Promise.all(
@@ -268,7 +268,7 @@ export class SchemaStore {
             name: item,
             fields: [],
           };
-          const { code, data } = await this.getTagOrEdgeInfo(ISchemaEnum.Edge, item);
+          const { code, data } = await this.getTagOrEdgeInfo(ISchemaEnum.Edge, item, space);
           if (code === 0) {
             edge.fields = data.tables;
           }
@@ -276,6 +276,7 @@ export class SchemaStore {
         }),
       );
       this.update({ edgeList });
+      return edgeList;
     }
   };
 
@@ -302,10 +303,10 @@ export class SchemaStore {
   };
 
   // tags
-  getTags = async () => {
+  getTags = async (space?: string) => {
     const { code, data } = await service.execNGQL({
       gql: `SHOW TAGS;`,
-      space: this.currentSpace,
+      space: space || this.currentSpace,
     });
 
     if (code === 0) {
@@ -336,8 +337,8 @@ export class SchemaStore {
     );
   };
 
-  getTagList = async () => {
-    const tags = await this.getTags();
+  getTagList = async (space?: string) => {
+    const tags = await this.getTags(space);
     if (tags) {
       const tagList: ITag[] = [];
       await Promise.all(
@@ -346,7 +347,7 @@ export class SchemaStore {
             name: item,
             fields: [],
           };
-          const { code, data } = await this.getTagOrEdgeInfo(ISchemaEnum.Tag, item);
+          const { code, data } = await this.getTagOrEdgeInfo(ISchemaEnum.Tag, item, space);
           if (code === 0) {
             tag.fields = data.tables;
           }
@@ -354,6 +355,7 @@ export class SchemaStore {
         }),
       );
       this.update({ tagList });
+      return tagList;
     }
   };
 
@@ -411,9 +413,9 @@ export class SchemaStore {
     return null;
   };
 
-  getTagOrEdgeInfo = async (type: ISchemaType, name: string) => {
+  getTagOrEdgeInfo = async (type: ISchemaType, name: string, space?: string) => {
     const gql = `desc ${type}  ${handleKeyword(name)}`;
-    const { code, data } = await service.execNGQL({ gql, space: this.currentSpace });
+    const { code, data } = await service.execNGQL({ gql, space: space || this.currentSpace });
     return { code, data };
   };
 
@@ -793,6 +795,26 @@ export class SchemaStore {
       message.warning(err.toString());
     }
   };
+
+  getSchemaTree = async (space) => {
+    const [tagList, edgeList] = await Promise.all([this.getTagList(space), this.getEdgeList(space)]);
+    return {
+      name: space,
+      type: 'space',
+      children: [
+        ...tagList.map((item) => ({
+          name: item.name,
+          type: 'tag',
+          children: item.fields,
+        })),
+        ...edgeList.map((item) => ({
+          name: item.name,
+          type: 'edge',
+          children: item.fields,
+        })),
+      ],
+    };
+  };
 }
 
 const schemaStore = new SchemaStore();
diff --git a/app/stores/twoGraph.ts b/app/stores/twoGraph.ts
index 242521b0..9c76cdb4 100644
--- a/app/stores/twoGraph.ts
+++ b/app/stores/twoGraph.ts
@@ -16,7 +16,6 @@ class TwoGraph {
   canvas: HTMLCanvasElement | null;
   // running status to make renderer render
   running = false;
-  progressValue = 0;
   transform: ITransform = { k: 1, x: 0, y: 0 };
   instance: ForceGraphInstance;
   autorunDisposer: IReactionDisposer;
@@ -75,6 +74,7 @@ class TwoGraph {
   init = () => {
     const { graph } = this;
     const Graph = ForceGraph()(this.container);
+    const rect = this.container.getBoundingClientRect();
     this.canvas = this.container.querySelector('canvas');
     Graph.d3Force('link')!
       .distance((d) => {
@@ -84,7 +84,7 @@ class TwoGraph {
     Graph.d3Force('x', forceX().strength(0.0085));
     Graph.d3Force('y', forceY().strength(0.0085));
     Graph.d3Force('charge')!.strength(-100);
-    Graph.width(1100).height(400);
+    Graph.width(rect.width).height(700);
     Graph.onZoom((v) => {
       this.setTransform(v);
       graph.setPointer({
@@ -312,6 +312,11 @@ class TwoGraph {
     );
   };
 
+  resize() {
+    this.instance.width(this.graph.width);
+    this.instance.height(this.graph.height);
+  }
+
   zoom = (type: 'out' | 'in') => {
     const scale = this.instance.zoom();
     let newScale;
diff --git a/index.html b/index.html
index e28802aa..e5b9d05f 100644
--- a/index.html
+++ b/index.html
@@ -80,6 +80,14 @@
     </div>
   </div>
   <script type="module" src="./app/index.tsx"></script>
+  <script type="module">
+    import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+    self.MonacoEnvironment = {
+      getWorker(_, _label) {
+        return new editorWorker();
+      },
+    };
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7466a8cd..e98c5c69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,10 @@
       "dependencies": {
         "@ant-design/icons": "^5.1.3",
         "@ant-design/pro-layout": "^7.13.5",
+        "@monaco-editor/react": "^4.6.0",
         "@vesoft-inc/force-graph": "2.0.7",
         "@vesoft-inc/i18n": "^1.0.1",
-        "@vesoft-inc/icons": "^1.0.0-beta.5",
+        "@vesoft-inc/icons": "^1.1.0",
         "@vesoft-inc/nebula-explain-graph": "^1.0.2-beta.2",
         "@vesoft-inc/veditor": "^4.4.12",
         "antd": "^5.8.4",
@@ -22,7 +23,6 @@
         "bezier-js": "^4.1.1",
         "bignumber.js": "^9.0.2",
         "classnames": "^2.3.1",
-        "codemirror": "^5.65.0",
         "core-js": "^3.21.1",
         "d3-force-3d": "^3.0.2",
         "d3-selection": "2",
@@ -1236,6 +1236,30 @@
         "react": "*"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2057,9 +2081,9 @@
       }
     },
     "node_modules/@vesoft-inc/icons": {
-      "version": "1.0.0-beta.5",
-      "resolved": "https://registry.npmmirror.com/@vesoft-inc/icons/-/icons-1.0.0-beta.5.tgz",
-      "integrity": "sha512-3ffxgUi3D7juCF6+vSY31pIPe6rcrkkLvBcP28pD5hfilbIBQNdBRVUfd6wVihERBVR12x1bfbXseXzeaZMfMA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vesoft-inc/icons/-/icons-1.1.0.tgz",
+      "integrity": "sha512-scXMh5DF08JFazbVr73ph8IJGMQ/KjqUUtxWTHYQ5eNo3cI08n6VLWCBV5/K3haDq7TFZ8ZTmZw9lEdSpX2Aag=="
     },
     "node_modules/@vesoft-inc/nebula-explain-graph": {
       "version": "1.0.2-beta.2",
@@ -2689,11 +2713,6 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
-    "node_modules/codemirror": {
-      "version": "5.65.2",
-      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.2.tgz",
-      "integrity": "sha512-SZM4Zq7XEC8Fhroqe3LxbEEX1zUPWH1wMr5zxiBuiUF64iYOUH/JI88v4tBag8MiBS8B8gRv8O1pPXGYXQ4ErA=="
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
@@ -5244,6 +5263,12 @@
         }
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==",
+      "peer": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
@@ -7716,6 +7741,11 @@
         "node": ">=0.1.14"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -9307,6 +9337,22 @@
       "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
       "requires": {}
     },
+    "@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "requires": {
+        "@monaco-editor/loader": "^1.4.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -9902,9 +9948,9 @@
       }
     },
     "@vesoft-inc/icons": {
-      "version": "1.0.0-beta.5",
-      "resolved": "https://registry.npmmirror.com/@vesoft-inc/icons/-/icons-1.0.0-beta.5.tgz",
-      "integrity": "sha512-3ffxgUi3D7juCF6+vSY31pIPe6rcrkkLvBcP28pD5hfilbIBQNdBRVUfd6wVihERBVR12x1bfbXseXzeaZMfMA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vesoft-inc/icons/-/icons-1.1.0.tgz",
+      "integrity": "sha512-scXMh5DF08JFazbVr73ph8IJGMQ/KjqUUtxWTHYQ5eNo3cI08n6VLWCBV5/K3haDq7TFZ8ZTmZw9lEdSpX2Aag=="
     },
     "@vesoft-inc/nebula-explain-graph": {
       "version": "1.0.2-beta.2",
@@ -10435,11 +10481,6 @@
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
       "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
-    "codemirror": {
-      "version": "5.65.2",
-      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.2.tgz",
-      "integrity": "sha512-SZM4Zq7XEC8Fhroqe3LxbEEX1zUPWH1wMr5zxiBuiUF64iYOUH/JI88v4tBag8MiBS8B8gRv8O1pPXGYXQ4ErA=="
-    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz",
@@ -12448,6 +12489,12 @@
       "integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
       "requires": {}
     },
+    "monaco-editor": {
+      "version": "0.44.0",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.44.0.tgz",
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==",
+      "peer": true
+    },
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
@@ -14309,6 +14356,11 @@
       "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz",
       "integrity": "sha512-EeNzTVfj+1In7aSLPKDD03F/ly4RxEuF/EX0YcOG0cKoPXs+SLZxDawQbexQDBzwROs4VKLWTOaZQlZkGBFEIQ=="
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
diff --git a/package.json b/package.json
index 56c0b697..2fe9ba58 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,10 @@
   "dependencies": {
     "@ant-design/icons": "^5.1.3",
     "@ant-design/pro-layout": "^7.13.5",
+    "@monaco-editor/react": "^4.6.0",
     "@vesoft-inc/force-graph": "2.0.7",
     "@vesoft-inc/i18n": "^1.0.1",
-    "@vesoft-inc/icons": "^1.0.0-beta.5",
+    "@vesoft-inc/icons": "^1.1.0",
     "@vesoft-inc/nebula-explain-graph": "^1.0.2-beta.2",
     "@vesoft-inc/veditor": "^4.4.12",
     "antd": "^5.8.4",
@@ -29,7 +30,6 @@
     "bezier-js": "^4.1.1",
     "bignumber.js": "^9.0.2",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.0",
     "core-js": "^3.21.1",
     "d3-force-3d": "^3.0.2",
     "d3-selection": "2",
diff --git a/tsconfig.json b/tsconfig.json
index fa0ecc75..c06f8d07 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,7 @@
     "allowUnusedLabels": true,
     "strictPropertyInitialization": false,
     "noFallthroughCasesInSwitch": true,
+    "allowImportingTsExtensions": true,
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
     "strictNullChecks": false,