diff --git a/components/smart/CodeMirror.vue b/components/smart/CodeMirror.vue
new file mode 100644
index 000000000..f4dfc315f
--- /dev/null
+++ b/components/smart/CodeMirror.vue
@@ -0,0 +1,85 @@
+<template>
+  <div ref="editor" class="w-full block"></div>
+</template>
+
+<script>
+import Codemirror from "codemirror"
+
+import "codemirror/lib/codemirror.css"
+import "codemirror/theme/juejin.css"
+import "codemirror/addon/fold/foldgutter.css"
+
+import "codemirror/addon/fold/foldgutter"
+import "codemirror/addon/fold/brace-fold"
+import "codemirror/addon/fold/comment-fold"
+import "codemirror/addon/fold/indent-fold"
+
+import "codemirror/mode/javascript/javascript"
+
+const DEFAULT_THEME = "juejin"
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+    mode: {
+      type: Object,
+      default: () => {
+        return {
+          name: "javascript",
+          json: true,
+        }
+      },
+    },
+  },
+
+  data() {
+    return {
+      editor: null,
+      cacheValue: "",
+    }
+  },
+
+  watch: {
+    value(value) {
+      if (value !== this.cacheValue) {
+        this.editor.setValue(value)
+        this.cacheValue = value
+      }
+    },
+    mode(mode) {
+      this.editor.setOption("mode", mode)
+    },
+  },
+
+  mounted() {
+    console.log(Codemirror.modes)
+    this.editor = Codemirror(this.$refs.editor, {
+      value: this.value,
+      mode: this.mode,
+      lineNumbers: true,
+      inputStyle: "textarea",
+      foldGutter: true,
+      theme: DEFAULT_THEME,
+      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    })
+    this.editor.on("change", (instance) => {
+      const val = instance.doc.getValue()
+      this.cacheValue = val
+      this.$emit("input", val)
+    })
+  },
+}
+</script>
+
+<style>
+.CodeMirror {
+  @apply block;
+  @apply border-b;
+  @apply border-dividerLight;
+  @apply h-auto;
+  @apply w-full;
+}
+</style>
diff --git a/package-lock.json b/package-lock.json
index 13bea05f5..bb3502c93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "ace-builds": "^1.4.12",
         "acorn": "^8.4.1",
         "acorn-walk": "^8.1.1",
+        "codemirror": "^5.62.3",
         "core-js": "^3.16.4",
         "esprima": "^4.0.1",
         "firebase": "^9.0.0",
@@ -13065,6 +13066,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz",
+      "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg=="
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -46032,6 +46038,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz",
+      "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg=="
+    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
diff --git a/package.json b/package.json
index 1bfe4b707..867955c4f 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "ace-builds": "^1.4.12",
     "acorn": "^8.4.1",
     "acorn-walk": "^8.1.1",
+    "codemirror": "^5.62.3",
     "core-js": "^3.16.4",
     "esprima": "^4.0.1",
     "firebase": "^9.0.0",