From f4565b79b809364436792e84bb3b69647cb88b7d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 15 Sep 2021 00:12:55 +0800
Subject: [PATCH 1/5] refactor: upgrade codemirror version.

---
 package.json                                  |   4 +-
 src/components/Codemirror/Codemirror.vue      |  77 +++++
 src/styles/global.less                        |  11 -
 src/views/interface/ThemeEdit.vue             | 173 +++++-----
 .../system/developer/tabs/RuntimeLogs.vue     |  29 +-
 .../system/developer/tabs/StaticStorage.vue   |  17 +-
 yarn.lock                                     | 318 +++++++++++++++++-
 7 files changed, 493 insertions(+), 136 deletions(-)
 create mode 100644 src/components/Codemirror/Codemirror.vue

diff --git a/package.json b/package.json
index 3746a8263..bc3a8016c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,9 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/lang-html": "^0.19.1",
+    "@codemirror/lang-java": "^0.19.1",
     "ant-design-vue": "^1.7.8",
     "axios": "^0.21.4",
     "dayjs": "^1.10.7",
@@ -36,7 +39,6 @@
     "verte": "^0.0.12",
     "vue": "^2.6.14",
     "vue-clipboard2": "^0.3.2",
-    "vue-codemirror-lite": "^1.0.4",
     "vue-contextmenujs": "^1.3.13",
     "vue-count-to": "^1.0.13",
     "vue-dplayer": "0.0.10",
diff --git a/src/components/Codemirror/Codemirror.vue b/src/components/Codemirror/Codemirror.vue
new file mode 100644
index 000000000..932bdf853
--- /dev/null
+++ b/src/components/Codemirror/Codemirror.vue
@@ -0,0 +1,77 @@
+<template>
+  <div ref="codemirrorRef"></div>
+</template>
+<script>
+import { basicSetup } from '@codemirror/basic-setup'
+import { EditorView, keymap } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { indentWithTab } from '@codemirror/commands'
+
+export default {
+  name: 'Codemirror',
+  model: {
+    prop: 'value',
+    event: 'update:value'
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    extensions: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: String,
+      default: '500px'
+    }
+  },
+  data() {
+    return {
+      codemirrorState: null,
+      codemirrorView: null
+    }
+  },
+  mounted() {
+    this.handleInitCodemirror()
+  },
+  beforeDestroy() {
+    if (this.codemirrorView) {
+      this.codemirrorView.destroy()
+    }
+  },
+  methods: {
+    handleInitCodemirror() {
+      if (this.codemirrorView) {
+        this.codemirrorView.destroy()
+      }
+
+      const codemirrorRef = this.$refs.codemirrorRef
+
+      const onUpdateExtension = EditorView.updateListener.of(vu => {
+        if (vu.docChanged) {
+          const doc = vu.state.doc
+          this.$emit('update:value', doc.toString())
+        }
+      })
+
+      const defaultTheme = EditorView.theme({
+        '&': {
+          height: this.height
+        }
+      })
+
+      this.codemirrorState = EditorState.create({
+        doc: this.value,
+        extensions: [basicSetup, onUpdateExtension, keymap.of([indentWithTab]), defaultTheme, ...this.extensions]
+      })
+
+      this.codemirrorView = new EditorView({
+        state: this.codemirrorState,
+        parent: codemirrorRef
+      })
+    }
+  }
+}
+</script>
diff --git a/src/styles/global.less b/src/styles/global.less
index 01a50b7a5..2fcf0aca8 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -802,17 +802,6 @@ body {
   }
 }
 
-.vue-codemirror-wrap {
-  .CodeMirror {
-    height: 700px;
-  }
-
-  .CodeMirror-gutters {
-    border-right: 1px solid #fff3f3;
-    background-color: #ffffff;
-  }
-}
-
 .select-attachment-checkbox {
   display: block;
   width: 100%;
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index d8ec26355..463756801 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -1,37 +1,36 @@
 <template>
   <page-view>
     <a-row :gutter="12">
-      <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24" class="pb-3">
+      <a-col :lg="6" :md="6" :sm="24" :xl="6" :xs="24" class="pb-3">
         <a-card :bodyStyle="{ padding: '16px' }">
           <template slot="title">
-            <a-select class="w-full" @change="onSelectTheme" v-model="selectedTheme.id" :loading="themesLoading">
-              <a-select-option v-for="(theme, index) in themes" :key="index" :value="theme.id"
-                >{{ theme.name }}
-                <a-icon v-if="theme.activated" type="check" />
+            <a-select v-model="themes.selectedId" :loading="themes.loading" class="w-full" @change="onSelectTheme">
+              <a-select-option v-for="(theme, index) in themes.data" :key="index" :value="theme.id">
+                {{ theme.name }}{{ theme.activated ? '（当前启用）' : '' }}
               </a-select-option>
             </a-select>
           </template>
-          <a-spin :spinning="filesLoading">
-            <theme-file v-if="files" :files="files" @listenToSelect="handleSelectFile" />
+          <a-spin :spinning="files.loading">
+            <theme-file v-if="files.data" :files="files.data" @listenToSelect="handleSelectFile" />
           </a-spin>
         </a-card>
       </a-col>
-      <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24" class="pb-3">
+      <a-col :lg="18" :md="18" :sm="24" :xl="18" :xs="24" class="pb-3">
         <a-card :bodyStyle="{ padding: '16px' }">
           <a-form layout="vertical">
             <a-form-item>
-              <codemirror v-model="content" :options="codemirrorOptions"></codemirror>
+              <Codemirror ref="editor" v-model="files.content" :extensions="editor.extensions" height="700px" />
             </a-form-item>
             <a-form-item>
               <ReactiveButton
-                @click="handlerSaveContent"
-                @callback="saveErrored = false"
-                :loading="saving"
-                :errored="saveErrored"
-                :disabled="buttonDisabled"
-                text="保存"
-                loadedText="保存成功"
+                :disabled="!files.content"
+                :errored="files.saveErrored"
+                :loading="files.saving"
                 erroredText="保存失败"
+                loadedText="保存成功"
+                text="保存"
+                @callback="files.saveErrored = false"
+                @click="handlerSaveContent"
               ></ReactiveButton>
             </a-form-item>
           </a-form>
@@ -45,130 +44,130 @@
 import themeApi from '@/api/theme'
 import ThemeFile from './components/ThemeFile'
 import { PageView } from '@/layouts'
-import { codemirror } from 'vue-codemirror-lite'
-import 'codemirror/mode/htmlmixed/htmlmixed.js'
+import Codemirror from '@/components/Codemirror/Codemirror'
+import { html } from '@codemirror/lang-html'
+import { javascript } from '@codemirror/lang-javascript'
+import { css } from '@codemirror/lang-css'
+
+const languageExtensionsMap = {
+  ftl: html(),
+  css: css(),
+  js: javascript()
+}
+
 export default {
   components: {
-    codemirror,
+    Codemirror,
     ThemeFile,
     PageView
   },
   data() {
     return {
-      buttonDisabled: true,
-      codemirrorOptions: {
-        tabSize: 4,
-        mode: 'text/html',
-        lineNumbers: true,
-        line: true
+      themes: {
+        data: [],
+        loading: false,
+        selectedId: null
+      },
+
+      files: {
+        data: [],
+        loading: false,
+        selected: {},
+        content: '',
+        saving: false,
+        saveErrored: false
       },
-      files: [],
-      filesLoading: false,
-      file: {},
-      content: '',
-      themes: [],
-      themesLoading: false,
-      selectedTheme: {},
-      saving: false,
-      saveErrored: false
+
+      editor: {
+        languageExtensionsMap,
+        extensions: []
+      }
     }
   },
   created() {
-    this.handleGetActivatedTheme()
-    this.handleListThemeFiles()
     this.handleListThemes()
   },
   methods: {
-    handleGetActivatedTheme() {
-      themeApi.getActivatedTheme().then(response => {
-        this.selectedTheme = response.data.data
-      })
-    },
-    handleListThemeFiles() {
-      this.filesLoading = true
-      themeApi
-        .listFilesActivated()
-        .then(response => {
-          this.files = response.data.data
-        })
-        .finally(() => {
-          setTimeout(() => {
-            this.filesLoading = false
-          }, 200)
-        })
-    },
     handleListThemes() {
-      this.themesLoading = true
+      this.themes.loading = true
       themeApi
         .list()
         .then(response => {
-          this.themes = response.data.data
+          this.themes.data = response.data.data
+
+          const activatedTheme = this.themes.data.find(item => item.activated)
+
+          if (activatedTheme) {
+            this.themes.selectedId = activatedTheme.id
+            this.onSelectTheme(activatedTheme.id)
+          }
         })
         .finally(() => {
-          setTimeout(() => {
-            this.themesLoading = false
-          }, 200)
+          this.themes.loading = false
         })
     },
     onSelectTheme(themeId) {
-      this.files = []
-      this.filesLoading = true
+      this.files.data = []
+      this.files.loading = true
       themeApi
         .listFiles(themeId)
         .then(response => {
-          this.files = response.data.data
-          this.content = ''
-          this.file = {}
+          this.files.data = response.data.data
+          this.files.content = ''
+          this.files.selected = {}
         })
         .finally(() => {
-          setTimeout(() => {
-            this.filesLoading = false
-          }, 200)
+          this.files.loading = false
         })
     },
     handleSelectFile(file) {
       const _this = this
       if (!file.editable) {
         this.$message.info('该文件不支持修改！')
-        this.content = ''
-        this.file = {}
-        this.buttonDisabled = true
+        this.files.content = ''
+        this.files.selected = {}
+        this.handleInitEditor()
         return
       }
-      if (
-        file.name === 'settings.yaml' ||
-        file.name === 'settings.yml' ||
-        file.name === 'theme.yaml' ||
-        file.name === 'theme.yml'
-      ) {
+      if (['settings.yaml', 'settings.yml', 'theme.yaml', 'theme.yml'].includes(file.name)) {
         this.$confirm({
           title: '警告：请谨慎修改该配置文件',
           content: '修改之后可能会产生不可预料的问题！',
           onCancel() {
-            _this.content = ''
-            _this.file = {}
-            _this.buttonDisabled = true
+            _this.files.content = ''
+            _this.files.selected = {}
+            _this.handleInitEditor()
           }
         })
       }
-      themeApi.getContent(this.selectedTheme.id, file.path).then(response => {
-        this.content = response.data.data
-        this.file = file
-        this.buttonDisabled = false
+      themeApi.getContent(this.themes.selectedId, file.path).then(response => {
+        this.files.content = response.data.data
+        this.files.selected = file
+        this.handleInitEditor()
       })
     },
     handlerSaveContent() {
-      this.saving = true
+      this.files.saving = true
       themeApi
-        .saveContent(this.selectedTheme.id, this.file.path, this.content)
+        .saveContent(this.themes.selectedId, this.files.selected.path, this.files.content)
         .catch(() => {
-          this.saveErrored = true
+          this.files.saveErrored = true
         })
         .finally(() => {
           setTimeout(() => {
-            this.saving = false
+            this.files.saving = false
           }, 400)
         })
+    },
+    handleInitEditor() {
+      this.$nextTick(() => {
+        const filename = this.files.selected.name
+        if (filename) {
+          const fileExtension = filename.substring(filename.lastIndexOf('.') + 1)
+          this.editor.extensions = [this.editor.languageExtensionsMap[fileExtension]]
+        }
+        this.$refs.editor.handleInitCodemirror()
+      })
     }
   }
 }
diff --git a/src/views/system/developer/tabs/RuntimeLogs.vue b/src/views/system/developer/tabs/RuntimeLogs.vue
index d94c83fbd..293f71b7a 100644
--- a/src/views/system/developer/tabs/RuntimeLogs.vue
+++ b/src/views/system/developer/tabs/RuntimeLogs.vue
@@ -2,45 +2,43 @@
   <a-form layout="vertical">
     <a-form-item>
       <a-spin :spinning="loading">
-        <codemirror v-model="logContent" :options="codemirrorOptions"></codemirror>
+        <Codemirror ref="editor" v-model="logContent" :extensions="editor.extensions" height="700px" />
       </a-spin>
     </a-form-item>
     <a-form-item>
       <a-space>
-        <a-select defaultValue="200" v-model="logLines" @change="handleLoadLogsLines" style="width: 100px">
+        <a-select v-model="logLines" defaultValue="200" style="width: 100px" @change="handleLoadLogsLines">
           <a-select-option value="200">200 行</a-select-option>
           <a-select-option value="500">500 行</a-select-option>
           <a-select-option value="800">800 行</a-select-option>
           <a-select-option value="1000">1000 行</a-select-option>
         </a-select>
-        <a-button type="primary" @click="handleLoadLogsLines()" :loading="loading">刷新</a-button>
-        <a-button type="dashed" @click="handleDownloadLogFile()" :loading="downloading">下载</a-button>
+        <a-button :loading="loading" type="primary" @click="handleLoadLogsLines()">刷新</a-button>
+        <a-button :loading="downloading" type="dashed" @click="handleDownloadLogFile()">下载</a-button>
       </a-space>
     </a-form-item>
   </a-form>
 </template>
 <script>
-import { codemirror } from 'vue-codemirror-lite'
-import 'codemirror/mode/shell/shell.js'
+import Codemirror from '@/components/Codemirror/Codemirror'
+import { java } from '@codemirror/lang-java'
 import adminApi from '@/api/admin'
 import { datetimeFormat } from '@/utils/datetime'
+
 export default {
   name: 'RuntimeLogs',
   components: {
-    codemirror
+    Codemirror
   },
   data() {
     return {
-      codemirrorOptions: {
-        tabSize: 4,
-        mode: 'shell',
-        lineNumbers: true,
-        line: true
-      },
       logContent: '',
       loading: false,
       logLines: 200,
-      downloading: false
+      downloading: false,
+      editor: {
+        extensions: [java()]
+      }
     }
   },
   beforeMount() {
@@ -57,6 +55,9 @@ export default {
         .getLogFiles(this.logLines)
         .then(response => {
           this.logContent = response.data.data
+          this.$nextTick(() => {
+            this.$refs.editor.handleInitCodemirror()
+          })
         })
         .finally(() => {
           setTimeout(() => {
diff --git a/src/views/system/developer/tabs/StaticStorage.vue b/src/views/system/developer/tabs/StaticStorage.vue
index 5b4405029..280b024b0 100644
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@@ -139,11 +139,7 @@
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <codemirror
-            ref="editor"
-            :value="editContentForm.model.content"
-            :options="editContentForm.codeMirror.options"
-          ></codemirror>
+          <Codemirror ref="editor" :value="editContentForm.model.content"></Codemirror>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -152,9 +148,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import staticApi from '@/api/static'
-import { codemirror } from 'vue-codemirror-lite'
-const context = require.context('codemirror/mode', true, /\.js$/)
-context.keys().map(context)
+import Codemirror from '@/components/Codemirror/Codemirror'
 const columns = [
   {
     title: '文件名',
@@ -181,7 +175,7 @@ const columns = [
 ]
 export default {
   components: {
-    codemirror
+    Codemirror
   },
   name: 'StaticStorage',
   data() {
@@ -242,8 +236,6 @@ export default {
   },
   beforeMount() {
     this.handleListStatics()
-    this.editContentForm.codeMirror.instance = require('codemirror')
-    this.editContentForm.codeMirror.instance.modeURL = 'codemirror/mode/%N/%N.js'
   },
   computed: {
     ...mapGetters(['options']),
@@ -367,6 +359,9 @@ export default {
       const postfix = arr[arr.length - 1]
       staticApi.getContent(_this.options.blog_url + file.relativePath).then(response => {
         _this.editContentForm.model.content = response.data
+        this.$nextTick(() => {
+          this.$refs.editor.handleInitCodemirror()
+        })
         const info = _this.editContentForm.codeMirror.instance.findModeByExtension(postfix)
         if (info === undefined) {
           _this.$message.error(`不支持编辑 "${postfix}" 类型的文件`)
diff --git a/yarn.lock b/yarn.lock
index 891774440..62518fa73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -786,6 +786,257 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@codemirror/autocomplete@^0.19.0":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.3.tgz#0266ac29617277d2d8cc7dcfb600c1e50c332d35"
+  integrity sha512-5juP6hVrHAogzQ0JUTQuibE8j1seqeGNJ98qLUPuliI6kLBg5INS4qvUI1Brqye+wYPFu7UHqrrn13RLh5YSzw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.2"
+    "@codemirror/tooltip" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/basic-setup@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/basic-setup/-/basic-setup-0.19.0.tgz#dc84dd735c8a88dd38c9dcc80cbfefa31d7e8f20"
+  integrity sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/closebrackets" "^0.19.0"
+    "@codemirror/commands" "^0.19.0"
+    "@codemirror/comment" "^0.19.0"
+    "@codemirror/fold" "^0.19.0"
+    "@codemirror/gutter" "^0.19.0"
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/history" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/lint" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/rectangular-selection" "^0.19.0"
+    "@codemirror/search" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/closebrackets@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz#69fdcee85779d638a00a42becd9f53a33a26d77f"
+  integrity sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/commands@^0.19.0":
+  version "0.19.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.19.4.tgz#455ce92fb058c05736a3722385fa1dbf7503d549"
+  integrity sha512-EW6ffAIdu7aGWWwEG4xRcKLR+1RXH7hJqMt5mbrxDSc2xAQBgqxIPFglcMeSkC7qqkwPuqv3xavVh1+0gQ0piQ==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/comment@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/comment/-/comment-0.19.0.tgz#4f23497924e9346898c2e0123011acc535a0bea6"
+  integrity sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/fold@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/fold/-/fold-0.19.0.tgz#cd57537870ff581ae57199a7658abe3f9908f2ed"
+  integrity sha512-cHbr2hqKe2pMls1Ia1a4IwXly87ljpmvPUKkul6H/Uv9kCwpQLOP3dGMPXbMGm/1hGjBF/0wnc+m2iba9iJBTQ==
+  dependencies:
+    "@codemirror/gutter" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/gutter@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.19.2.tgz#afc61dbe2977ff83aff8675200deab6d04244c5c"
+  integrity sha512-xiayxhc9uq1UXiG/r/E3AAYXZt+EtSdgdQXC4nlMHvbfw2EmtryfzGO3HrgasHRyAW8uNCaO9JO4n7mU7rm1rQ==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/highlight@^0.19.0":
+  version "0.19.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.4.tgz#2a985f6723815be4ef7684ab76d2b1519fe01c91"
+  integrity sha512-M7QfcEJWbC9aMX23UvLjqJlnwxVe9mGVPogSFujIQ4lC2Rocqalkx3NkmNDsNV8Q4RYTVB4+XiRPosq1tIY0Pw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    style-mod "^4.0.0"
+
+"@codemirror/history@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.19.0.tgz#cc8095c927c9566f7b69fa404074edde4c54d39c"
+  integrity sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/lang-css@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-0.19.1.tgz#19df3ac88abed982553c897e35d1bb79cb56d7a8"
+  integrity sha512-Eo1B19MNtDPoAeGyExq4vQZ/T0uvRpZ5NzUfHJisNg0TrZ3/JiLlWNJFTT18bQborNOk36GdzL1Fj39+3gH2Lw==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@lezer/css" "^0.15.0"
+
+"@codemirror/lang-html@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.1.tgz#9d71842d247eae9746fcee14a8dc41405911e01d"
+  integrity sha512-kQwkplKggcNok6gEVpG7Qx4IDFrwEHd99YWVNiOiRzPF019iSDAUmSv5Eh47yZPjF1VXOnm5FSIzgszzkYdiow==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/lang-css" "^0.19.0"
+    "@codemirror/lang-javascript" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    "@lezer/html" "^0.15.0"
+
+"@codemirror/lang-java@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-java/-/lang-java-0.19.1.tgz#c6bafabf3e1951d7a6a5bd4670afd277b909608c"
+  integrity sha512-yA3kcW2GgY0mC2a9dE+uRxGxPWeykfE/GqEPk4TSmhuU4ndmyDgM5QQP7pgnYSZmv2vKoyf4x7NMg8AF7lKXHQ==
+  dependencies:
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@lezer/java" "^0.15.0"
+
+"@codemirror/lang-javascript@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-0.19.1.tgz#157a145a3413c9774573956555c111e353640113"
+  integrity sha512-fFAP4nkfU36c14K8f6ytVYYeuX/2E7dJ+bD7UCZPWavXYjwdHAgDCJGH84MjhBSh0lMc908We80vyYg1j3MnRQ==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/lint" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/javascript" "^0.15.0"
+
+"@codemirror/language@^0.19.0":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.3.tgz#e4f61555dec0787f757b78348a54a00f3bb23c9c"
+  integrity sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.5"
+    "@lezer/lr" "^0.15.0"
+
+"@codemirror/lint@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.19.0.tgz#689d900aa13094093b41e87bf8b97943d6e9c62a"
+  integrity sha512-XjCIVJi2cUNlppwz0eGu0F93uFKJq1t2fupBQlDMr3hLmIxIRWjhvy66+Pw/ziH98XA8meLEGQX29umBAvym4w==
+  dependencies:
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/tooltip" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/matchbrackets@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/matchbrackets/-/matchbrackets-0.19.1.tgz#86dc57bc167e239731eb886bccd3b4e837dafadf"
+  integrity sha512-jBEW2Uu3hWcrrkwkauaikCAE7s5liCwbccFa6rLK6DzwaynOqCKJGyDsbkfrhikofNRc1yh4V3vwUuxt2u4QbA==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/panel@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.19.0.tgz#18c7a253a7a1ef686bece1ef13ec0e5eb6603265"
+  integrity sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/rangeset@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.19.1.tgz#03ab6f93fb60d9ba98f810b98ed9471cba1e3854"
+  integrity sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+
+"@codemirror/rectangular-selection@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/rectangular-selection/-/rectangular-selection-0.19.0.tgz#6ea8ea31f6a6db346cd3c5229bfdbbb2e77138e4"
+  integrity sha512-KdvoEweBgVsOcqdYFEinYGroS028pwUPkO3REzQC7Z/hT1KNqZUlyfoi6WBv3Gzp8b6l8NNA+rLnnYMSHlcGYA==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/search@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-0.19.1.tgz#0d53f9db9f8099d2de1e370efff61053f7d7833e"
+  integrity sha512-OBjaIvdFwiknmPoc/hFSistUN/hdumz7Wf0SyueL2tTIQ1MZDNnonC07+GEpiF6nTjcY6r+ifC0cf2X3o/FVqQ==
+  dependencies:
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^0.19.0", "@codemirror/state@^0.19.2":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.19.2.tgz#81de81f89e87b9362b8bc6d51135637dddd4d33d"
+  integrity sha512-dDqCrtkb0c/LYUlvQBLyLfkISEskbZnhvBbcVOF4j2AusJ1ptJ3EGMxBL9G16GP1TOdC1T613gA1J1qc3pbfGQ==
+  dependencies:
+    "@codemirror/text" "^0.19.0"
+
+"@codemirror/text@^0.19.0", "@codemirror/text@^0.19.2":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.19.3.tgz#c00d86c7bb28360aa8e94beff815586fbda8fd43"
+  integrity sha512-A0HBPZRwQ72XVMN1tg/pVUnvS5CKboBeHZE7cylYw0ljx9eX+NoYaK7apPSJO/Fwh9XhH9m8Va06EGc11VOzUw==
+
+"@codemirror/tooltip@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/tooltip/-/tooltip-0.19.2.tgz#a8f6b703edb64748106e136ec1f099a981a3f1d4"
+  integrity sha512-FMMGGLrr62Ck54NEz8yTGpgo8ihobAsC3sbeQg+OpY4jv9dt1yIP5B9LzsIV+TXQB57JZQZxtTqzkhnFq76haw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/view@^0.19.0":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.7.tgz#af2c5d9246bb44cac24dcd1a60e7b45dfe06f209"
+  integrity sha512-m9AKO8gec/QnyxR1uq182It0WwauTIaHkdjqtdlKx1IRgknH44SKIJIxwxZt4Y6VDhhivcEbugjoadNy0zR3wQ==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@fullhuman/postcss-purgecss@^2.1.2":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz#50a954757ec78696615d3e118e3fee2d9291882e"
@@ -1031,6 +1282,46 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.5.tgz#29266bdd335b650e58efeb25c789b32e0dcdddfa"
+  integrity sha512-ufcjclusHXGdhp4gSPbPD7sUd38SgOej7m5tAEuG2tNPzqzV0d1vwwLh57R6IwW79ml2mb3tUjAoDfqI7v1HEw==
+
+"@lezer/css@^0.15.0":
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-0.15.1.tgz#d6317a5a4c3d95a0f53af23f495c46b6eed1f789"
+  integrity sha512-ywBytH6Tr12VFx88loNwObrN2uuDTWIgf4tNCHmTu4ClhfY0cYNcyTqxWx62f3XymTfjX4Ms4eimq17MpEVqqQ==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/html@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-0.15.0.tgz#572c9444bc39c1afc0529a70e089abf7254edf5d"
+  integrity sha512-ErmgP/Vv0AhYJvs/Ekb9oue4IzBHemKLi7K8tJ0jgS+20Y8FGC9foK6knCXtEHqdPaxVGQH9PVp7gecLnzLd9Q==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/java@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@lezer/java/-/java-0.15.0.tgz#44da269cca36a9af1ad5c862552b2f2bf5847589"
+  integrity sha512-Od2Ugo93XjLxCIEKlrwJfacmSMd7lEnkVQgBjMsZofjwEKZ2Y2ue6URntMFFiftTlNXbE29vYbweWYluEq+Cdw==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/javascript@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-0.15.0.tgz#0033be1ff814c0d448e992cc3e0285b8b296135e"
+  integrity sha512-euFjbbyYmxpBls9FyBAKnGLEjaMFqfHvhfueA7M1PitZdieHu8KSblutmcwjpWKIV4eH4uElMZO2cPVe0aFxXA==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/lr@^0.15.0":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.2.tgz#e03581a31bc0b44a0b804aeb9fece050853778c5"
+  integrity sha512-gkQUkKCAw/zxOiTCGhjctV/C+FPmfwqXscM9EGgcYhUZewkLu2AsEl2Vlcral7xtDU0t6xwakT6Fw5jlMvMX6Q==
+  dependencies:
+    "@lezer/common" "^0.15.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -3158,11 +3449,6 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-codemirror@^5.22.0:
-  version "5.62.3"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.62.3.tgz#5cfdee6931c8b2d1b39ae773aaaaec2cc6b5558e"
-  integrity sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg==
-
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3500,6 +3786,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -10089,6 +10380,11 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-mod@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -10774,13 +11070,6 @@ vue-clipboard2@^0.3.2:
   dependencies:
     clipboard "^2.0.0"
 
-vue-codemirror-lite@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
-  integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
-  dependencies:
-    codemirror "^5.22.0"
-
 vue-contextmenujs@^1.3.13:
   version "1.3.13"
   resolved "https://registry.yarnpkg.com/vue-contextmenujs/-/vue-contextmenujs-1.3.13.tgz#3bdae023c7bd42095e78da4258000250d50ab8ef"
@@ -10931,6 +11220,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^1.0.0"
 
+w3c-keyname@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
 w3c-xmlserializer@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"

From 089c93f91acc6f57df25a2bc68996e6bd3aa4ece Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 15 Sep 2021 20:50:15 +0800
Subject: [PATCH 2/5] refactor: StaticStorage component.

---
 package-lock.json                             | 563 ++++++++++++++----
 .../system/developer/DeveloperOptions.vue     |  98 +--
 .../system/developer/tabs/RuntimeLogs.vue     |   8 +-
 .../system/developer/tabs/StaticStorage.vue   | 150 ++---
 vue.config.js                                 |   3 +
 5 files changed, 588 insertions(+), 234 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a66d0d78e..f2f0b9894 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3034,6 +3034,280 @@
         "minimist": "^1.2.0"
       }
     },
+    "@codemirror/autocomplete": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-0.19.3.tgz",
+      "integrity": "sha512-5juP6hVrHAogzQ0JUTQuibE8j1seqeGNJ98qLUPuliI6kLBg5INS4qvUI1Brqye+wYPFu7UHqrrn13RLh5YSzw==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.2",
+        "@codemirror/tooltip": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/basic-setup": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/basic-setup/-/basic-setup-0.19.0.tgz",
+      "integrity": "sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/closebrackets": "^0.19.0",
+        "@codemirror/commands": "^0.19.0",
+        "@codemirror/comment": "^0.19.0",
+        "@codemirror/fold": "^0.19.0",
+        "@codemirror/gutter": "^0.19.0",
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/history": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/lint": "^0.19.0",
+        "@codemirror/matchbrackets": "^0.19.0",
+        "@codemirror/rectangular-selection": "^0.19.0",
+        "@codemirror/search": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/closebrackets": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz",
+      "integrity": "sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/commands": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-0.19.4.tgz",
+      "integrity": "sha512-EW6ffAIdu7aGWWwEG4xRcKLR+1RXH7hJqMt5mbrxDSc2xAQBgqxIPFglcMeSkC7qqkwPuqv3xavVh1+0gQ0piQ==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/matchbrackets": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/comment": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/comment/-/comment-0.19.0.tgz",
+      "integrity": "sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/fold": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.0.tgz",
+      "integrity": "sha512-cHbr2hqKe2pMls1Ia1a4IwXly87ljpmvPUKkul6H/Uv9kCwpQLOP3dGMPXbMGm/1hGjBF/0wnc+m2iba9iJBTQ==",
+      "requires": {
+        "@codemirror/gutter": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/gutter": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.2.tgz",
+      "integrity": "sha512-xiayxhc9uq1UXiG/r/E3AAYXZt+EtSdgdQXC4nlMHvbfw2EmtryfzGO3HrgasHRyAW8uNCaO9JO4n7mU7rm1rQ==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/highlight": {
+      "version": "0.19.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/highlight/-/highlight-0.19.4.tgz",
+      "integrity": "sha512-M7QfcEJWbC9aMX23UvLjqJlnwxVe9mGVPogSFujIQ4lC2Rocqalkx3NkmNDsNV8Q4RYTVB4+XiRPosq1tIY0Pw==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "@codemirror/history": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/history/-/history-0.19.0.tgz",
+      "integrity": "sha512-E0H+lncH66IMDhaND9jgkjE7s0dhYfjCPmS+Ig2Yes9I8+UIEecIdObj8c8HPCFGctGg3fxXqRAw2mdHl2Wouw==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/lang-css": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-0.19.1.tgz",
+      "integrity": "sha512-Eo1B19MNtDPoAeGyExq4vQZ/T0uvRpZ5NzUfHJisNg0TrZ3/JiLlWNJFTT18bQborNOk36GdzL1Fj39+3gH2Lw==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@lezer/css": "^0.15.0"
+      }
+    },
+    "@codemirror/lang-html": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-0.19.1.tgz",
+      "integrity": "sha512-kQwkplKggcNok6gEVpG7Qx4IDFrwEHd99YWVNiOiRzPF019iSDAUmSv5Eh47yZPjF1VXOnm5FSIzgszzkYdiow==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/lang-css": "^0.19.0",
+        "@codemirror/lang-javascript": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@lezer/common": "^0.15.0",
+        "@lezer/html": "^0.15.0"
+      }
+    },
+    "@codemirror/lang-java": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-0.19.1.tgz",
+      "integrity": "sha512-yA3kcW2GgY0mC2a9dE+uRxGxPWeykfE/GqEPk4TSmhuU4ndmyDgM5QQP7pgnYSZmv2vKoyf4x7NMg8AF7lKXHQ==",
+      "requires": {
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@lezer/java": "^0.15.0"
+      }
+    },
+    "@codemirror/lang-javascript": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-0.19.1.tgz",
+      "integrity": "sha512-fFAP4nkfU36c14K8f6ytVYYeuX/2E7dJ+bD7UCZPWavXYjwdHAgDCJGH84MjhBSh0lMc908We80vyYg1j3MnRQ==",
+      "requires": {
+        "@codemirror/autocomplete": "^0.19.0",
+        "@codemirror/highlight": "^0.19.0",
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/lint": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/javascript": "^0.15.0"
+      }
+    },
+    "@codemirror/language": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-0.19.3.tgz",
+      "integrity": "sha512-6vjkRYHRJg/z9wdAk75nU2fQwCJBsh2HpkIjKXIHfzISSgLt5qSDxVhPd8Uu8PD5WMmFFP8tX7I9kdIt873o0A==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.5",
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@codemirror/lint": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-0.19.0.tgz",
+      "integrity": "sha512-XjCIVJi2cUNlppwz0eGu0F93uFKJq1t2fupBQlDMr3hLmIxIRWjhvy66+Pw/ziH98XA8meLEGQX29umBAvym4w==",
+      "requires": {
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/tooltip": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/matchbrackets": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/matchbrackets/-/matchbrackets-0.19.1.tgz",
+      "integrity": "sha512-jBEW2Uu3hWcrrkwkauaikCAE7s5liCwbccFa6rLK6DzwaynOqCKJGyDsbkfrhikofNRc1yh4V3vwUuxt2u4QbA==",
+      "requires": {
+        "@codemirror/language": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "@lezer/common": "^0.15.0"
+      }
+    },
+    "@codemirror/panel": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/panel/-/panel-0.19.0.tgz",
+      "integrity": "sha512-LJuu49xnuhaAztlhnLJQ57ddOirSyf8/lnl7twsQUG/05RkxodBZ9F7q8r5AOLqOkaQOy9WySEKX1Ur8lD9Q5w==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/rangeset": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.1.tgz",
+      "integrity": "sha512-WaKTEw8JB/3QFlQzpdgRoklopcWvG8O/Xp+rxxOfFKYTaeaejpY/tjpyBBg+Ea65Ka3m7+pPp9d5j/oR2rd9NA==",
+      "requires": {
+        "@codemirror/state": "^0.19.0"
+      }
+    },
+    "@codemirror/rectangular-selection": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/rectangular-selection/-/rectangular-selection-0.19.0.tgz",
+      "integrity": "sha512-KdvoEweBgVsOcqdYFEinYGroS028pwUPkO3REzQC7Z/hT1KNqZUlyfoi6WBv3Gzp8b6l8NNA+rLnnYMSHlcGYA==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/search": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-0.19.1.tgz",
+      "integrity": "sha512-OBjaIvdFwiknmPoc/hFSistUN/hdumz7Wf0SyueL2tTIQ1MZDNnonC07+GEpiF6nTjcY6r+ifC0cf2X3o/FVqQ==",
+      "requires": {
+        "@codemirror/panel": "^0.19.0",
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/text": "^0.19.0",
+        "@codemirror/view": "^0.19.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "@codemirror/state": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.2.tgz",
+      "integrity": "sha512-dDqCrtkb0c/LYUlvQBLyLfkISEskbZnhvBbcVOF4j2AusJ1ptJ3EGMxBL9G16GP1TOdC1T613gA1J1qc3pbfGQ==",
+      "requires": {
+        "@codemirror/text": "^0.19.0"
+      }
+    },
+    "@codemirror/text": {
+      "version": "0.19.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.3.tgz",
+      "integrity": "sha512-A0HBPZRwQ72XVMN1tg/pVUnvS5CKboBeHZE7cylYw0ljx9eX+NoYaK7apPSJO/Fwh9XhH9m8Va06EGc11VOzUw=="
+    },
+    "@codemirror/tooltip": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/tooltip/-/tooltip-0.19.2.tgz",
+      "integrity": "sha512-FMMGGLrr62Ck54NEz8yTGpgo8ihobAsC3sbeQg+OpY4jv9dt1yIP5B9LzsIV+TXQB57JZQZxtTqzkhnFq76haw==",
+      "requires": {
+        "@codemirror/state": "^0.19.0",
+        "@codemirror/view": "^0.19.0"
+      }
+    },
+    "@codemirror/view": {
+      "version": "0.19.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.7.tgz",
+      "integrity": "sha512-m9AKO8gec/QnyxR1uq182It0WwauTIaHkdjqtdlKx1IRgknH44SKIJIxwxZt4Y6VDhhivcEbugjoadNy0zR3wQ==",
+      "requires": {
+        "@codemirror/rangeset": "^0.19.0",
+        "@codemirror/state": "^0.19.2",
+        "@codemirror/text": "^0.19.0",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "@fullhuman/postcss-purgecss": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
@@ -3370,6 +3644,51 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@lezer/common": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.5.tgz",
+      "integrity": "sha512-ufcjclusHXGdhp4gSPbPD7sUd38SgOej7m5tAEuG2tNPzqzV0d1vwwLh57R6IwW79ml2mb3tUjAoDfqI7v1HEw=="
+    },
+    "@lezer/css": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-0.15.1.tgz",
+      "integrity": "sha512-ywBytH6Tr12VFx88loNwObrN2uuDTWIgf4tNCHmTu4ClhfY0cYNcyTqxWx62f3XymTfjX4Ms4eimq17MpEVqqQ==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/html": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-0.15.0.tgz",
+      "integrity": "sha512-ErmgP/Vv0AhYJvs/Ekb9oue4IzBHemKLi7K8tJ0jgS+20Y8FGC9foK6knCXtEHqdPaxVGQH9PVp7gecLnzLd9Q==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/java": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-0.15.0.tgz",
+      "integrity": "sha512-Od2Ugo93XjLxCIEKlrwJfacmSMd7lEnkVQgBjMsZofjwEKZ2Y2ue6URntMFFiftTlNXbE29vYbweWYluEq+Cdw==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/javascript": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-0.15.0.tgz",
+      "integrity": "sha512-euFjbbyYmxpBls9FyBAKnGLEjaMFqfHvhfueA7M1PitZdieHu8KSblutmcwjpWKIV4eH4uElMZO2cPVe0aFxXA==",
+      "requires": {
+        "@lezer/lr": "^0.15.0"
+      }
+    },
+    "@lezer/lr": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-0.15.2.tgz",
+      "integrity": "sha512-gkQUkKCAw/zxOiTCGhjctV/C+FPmfwqXscM9EGgcYhUZewkLu2AsEl2Vlcral7xtDU0t6xwakT6Fw5jlMvMX6Q==",
+      "requires": {
+        "@lezer/common": "^0.15.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -3396,9 +3715,9 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "3.15.2",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.15.2.tgz",
-          "integrity": "sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q=="
+          "version": "3.17.3",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.17.3.tgz",
+          "integrity": "sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw=="
         }
       }
     },
@@ -4586,23 +4905,6 @@
             "ms": "2.1.2"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4633,38 +4935,6 @@
             "ansi-regex": "^5.0.0"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.5.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
-          "dev": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "4.1.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-              "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            }
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -4768,9 +5038,9 @@
       "dev": true
     },
     "@vue/test-utils": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.2.1.tgz",
-      "integrity": "sha512-WBRdWNJwWTodJlV9mjunTrhgfsTPI5tMuxsCxqSmQs+vyB3ccZIYixnBrkxpKRsXyah/RtEv6+kUPZhnLd9smA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.2.2.tgz",
+      "integrity": "sha512-P+yiAsszoy8z1TqXiVUnAZaJj0WGGz5fCxm4bOSI6Cpwy1+PNYwYxDv0ROAA/SUtOPppV+aD8tp/QWwxf8ROJw==",
       "dev": true,
       "requires": {
         "dom-event-types": "^1.0.0",
@@ -5145,9 +5415,9 @@
       }
     },
     "ant-design-vue": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.7.6.tgz",
-      "integrity": "sha512-EOS6g/deT53xHxZDMOxedyBehXSNMGnxdOeQtDksmiRvCBrZs+yoFYoVOe9pmQ8EJ7XQLn8TMReiYbXi78kppA==",
+      "version": "1.7.8",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.7.8.tgz",
+      "integrity": "sha512-F1hmiS9vwbyfuFvlamdW5l9bHKqRlj9wHaGDIE41NZMWXyWy8qL0UFa/+I0Wl8gQWZCqODW5pN6Yfoyn85At3A==",
       "requires": {
         "@ant-design/icons": "^2.1.1",
         "@ant-design/icons-vue": "^2.0.0",
@@ -5413,17 +5683,17 @@
       "dev": true
     },
     "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
       "requires": {
-        "follow-redirects": "^1.10.0"
+        "follow-redirects": "^1.14.0"
       },
       "dependencies": {
         "follow-redirects": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
-          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+          "version": "1.14.4",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
+          "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
         }
       }
     },
@@ -7297,9 +7567,9 @@
       "dev": true
     },
     "clipboard": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
       "requires": {
         "good-listener": "^1.2.2",
         "select": "^1.1.2",
@@ -7387,11 +7657,6 @@
         "q": "^1.1.2"
       }
     },
-    "codemirror": {
-      "version": "5.55.0",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.55.0.tgz",
-      "integrity": "sha512-TumikSANlwiGkdF/Blnu/rqovZ0Y3Jh8yy9TqrPbSM0xxSucq3RgnpVDQ+mD9q6JERJEIT2FMuF/fBGfkhIR/g=="
-    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -7919,6 +8184,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crelt": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
+      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA=="
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -8235,9 +8505,9 @@
       }
     },
     "dayjs": {
-      "version": "1.10.5",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.5.tgz",
-      "integrity": "sha512-BUFis41ikLz+65iH6LHQCDm4YPMj5r1YFLdupPIyM4SGcXMmtiLQ7U37i+hGS8urIuqe7I/ou3IS1jVc4nbN4g=="
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
     },
     "de-indent": {
       "version": "1.0.2",
@@ -9326,9 +9596,9 @@
       }
     },
     "eslint-plugin-prettier": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
-      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz",
+      "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==",
       "dev": true,
       "requires": {
         "prettier-linter-helpers": "^1.0.0"
@@ -9854,9 +10124,9 @@
       "dev": true
     },
     "filepond": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.28.2.tgz",
-      "integrity": "sha512-D9JLsSMwAG8imNDYCLjk9qrkM4TXA8mR9VXpgnSn9FzBu7LroS/MfmTH45zHbujxLBdEeom75u3pK5EhwkNYkA=="
+      "version": "4.29.1",
+      "resolved": "https://registry.npmjs.org/filepond/-/filepond-4.29.1.tgz",
+      "integrity": "sha512-j2YMYxzhDXYQScARkkYb5NwwfOxLWKWJK3v/Wozq1gQX3s5XLY3GfJhR9ysqP5l4697J3gIn898fRG5Z61UYIQ=="
     },
     "filepond-plugin-file-validate-type": {
       "version": "1.2.6",
@@ -9864,9 +10134,9 @@
       "integrity": "sha512-3JFxpb4o5D4BssP/Drjn2GPpejg/QXzU4e3/Pq8IvIJuokHz95b6+RPYstQ+6ITKREYup0N8F/CO/OQfhVkUgg=="
     },
     "filepond-plugin-image-preview": {
-      "version": "4.6.6",
-      "resolved": "https://registry.npmjs.org/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.6.tgz",
-      "integrity": "sha512-zWbbpjNdvaVJ8tVsI2AYtjzVPMIqdsMhcSs3XlBKQXBMPmofGm3Xm2MT2QrZjhxBss03HeAp9Uf4Xab8lDgTlw=="
+      "version": "4.6.10",
+      "resolved": "https://registry.npmjs.org/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.10.tgz",
+      "integrity": "sha512-C7Q5Sr/d4RQb2nMNQR93OiMt91OHxpvmIBGl+CO1dZE46lM49NUfI08dyElAOxTslDcA8pAfjFFCKo0sNYbrBg=="
     },
     "filesize": {
       "version": "3.6.1",
@@ -10000,12 +10270,12 @@
       }
     },
     "flv.js": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.5.0.tgz",
-      "integrity": "sha512-7tFwccqkFXpA7RIED0KvuNny2qVnpuGc5nTGsRpzrCT+qtwIaZyciK5UgyvgtlAMYaPFzYS0wdI92JiSBKOyXw==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
       "requires": {
-        "es6-promise": "^4.2.5",
-        "webworkify": "^1.5.0"
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
       }
     },
     "follow-redirects": {
@@ -17179,6 +17449,11 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "style-mod": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
+      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw=="
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -18148,21 +18423,13 @@
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
     "vue-clipboard2": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
-      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
       "requires": {
         "clipboard": "^2.0.0"
       }
     },
-    "vue-codemirror-lite": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz",
-      "integrity": "sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=",
-      "requires": {
-        "codemirror": "^5.22.0"
-      }
-    },
     "vue-contextmenujs": {
       "version": "1.3.13",
       "resolved": "https://registry.npmjs.org/vue-contextmenujs/-/vue-contextmenujs-1.3.13.tgz",
@@ -18279,6 +18546,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.5.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
+      "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-ls": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/vue-ls/-/vue-ls-3.2.2.tgz",
@@ -18358,6 +18706,11 @@
         "browser-process-hrtime": "^1.0.0"
       }
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "w3c-xmlserializer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz",
@@ -18939,10 +19292,10 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
-    "webworkify": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
-      "integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
+    "webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
     },
     "whatwg-encoding": {
       "version": "1.0.5",
diff --git a/src/views/system/developer/DeveloperOptions.vue b/src/views/system/developer/DeveloperOptions.vue
index a86da933c..0bad86e45 100644
--- a/src/views/system/developer/DeveloperOptions.vue
+++ b/src/views/system/developer/DeveloperOptions.vue
@@ -2,36 +2,20 @@
   <page-view>
     <a-row>
       <a-col :span="24">
-        <div class="card-container" v-if="options.developer_mode">
-          <a-tabs type="card">
-            <a-tab-pane key="environment">
-              <span slot="tab"> <a-icon type="safety" />运行环境 </span>
-              <Environment />
-            </a-tab-pane>
-            <a-tab-pane key="runtimeLogs">
-              <span slot="tab"> <a-icon type="code" />实时日志 </span>
-              <RuntimeLogs />
-            </a-tab-pane>
-            <a-tab-pane key="optionsList">
-              <span slot="tab"> <a-icon type="table" />系统变量 </span>
-              <OptionsList />
-            </a-tab-pane>
-            <a-tab-pane key="staticStorage">
-              <span slot="tab"> <a-icon type="cloud" />静态存储 </span>
-              <StaticStorage />
-            </a-tab-pane>
-            <a-tab-pane key="settings">
-              <span slot="tab"> <a-icon type="setting" />设置 </span>
-              <SettingsForm />
+        <div v-if="options.developer_mode" class="card-container">
+          <a-tabs v-model="activeKey" type="card">
+            <a-tab-pane v-for="pane in panes" :key="pane.key">
+              <span slot="tab"> <a-icon :type="pane.icon" />{{ pane.title }} </span>
+              <component :is="pane.component"></component>
             </a-tab-pane>
           </a-tabs>
         </div>
         <a-alert
           v-else
-          message="提示"
           description="当前没有启用开发者选项，请启用之后再访问该页面！"
-          type="error"
+          message="提示"
           showIcon
+          type="error"
         />
       </a-col>
     </a-row>
@@ -40,22 +24,68 @@
 <script>
 import { mapGetters } from 'vuex'
 import { PageView } from '@/layouts'
-import Environment from './tabs/Environment'
-import RuntimeLogs from './tabs/RuntimeLogs'
-import SettingsForm from './tabs/SettingsForm'
-import OptionsList from './tabs/OptionsList'
-import StaticStorage from './tabs/StaticStorage'
+
 export default {
   components: {
-    PageView,
-    Environment,
-    RuntimeLogs,
-    SettingsForm,
-    OptionsList,
-    StaticStorage
+    PageView
+  },
+  data() {
+    const panes = [
+      {
+        title: '运行环境',
+        icon: 'safety',
+        component: () => import('./tabs/Environment'),
+        key: 'environment'
+      },
+      {
+        title: '实时日志',
+        icon: 'code',
+        component: () => import('./tabs/RuntimeLogs'),
+        key: 'runtimeLogs'
+      },
+      {
+        title: '系统变量',
+        icon: 'table',
+        component: () => import('./tabs/OptionsList'),
+        key: 'optionsList'
+      },
+      {
+        title: '静态存储',
+        icon: 'cloud',
+        component: () => import('./tabs/StaticStorage'),
+        key: 'staticStorage'
+      },
+      {
+        title: '设置',
+        icon: 'setting',
+        component: () => import('./tabs/SettingsForm'),
+        key: 'settings'
+      }
+    ]
+    return {
+      activeKey: panes[0].key,
+      panes
+    }
   },
   computed: {
     ...mapGetters(['options'])
+  },
+  beforeRouteEnter(to, from, next) {
+    // Get post id from query
+    const activeKey = to.query.activeKey
+    next(vm => {
+      if (activeKey) {
+        vm.activeKey = activeKey
+      }
+    })
+  },
+  watch: {
+    activeKey(newVal) {
+      if (newVal) {
+        const path = this.$router.history.current.path
+        this.$router.push({ path, query: { activeKey: newVal } }).catch(err => err)
+      }
+    }
   }
 }
 </script>
diff --git a/src/views/system/developer/tabs/RuntimeLogs.vue b/src/views/system/developer/tabs/RuntimeLogs.vue
index 293f71b7a..0a8ce5e7e 100644
--- a/src/views/system/developer/tabs/RuntimeLogs.vue
+++ b/src/views/system/developer/tabs/RuntimeLogs.vue
@@ -44,10 +44,6 @@ export default {
   beforeMount() {
     this.handleLoadLogsLines()
   },
-  updated() {
-    // 滚动条定位到底部
-    this.$el.querySelector('.CodeMirror-scroll').scrollTop = this.$el.querySelector('.CodeMirror-scroll').scrollHeight
-  },
   methods: {
     handleLoadLogsLines() {
       this.loading = true
@@ -60,9 +56,7 @@ export default {
           })
         })
         .finally(() => {
-          setTimeout(() => {
-            this.loading = false
-          }, 400)
+          this.loading = false
         })
     },
     handleDownloadLogFile() {
diff --git a/src/views/system/developer/tabs/StaticStorage.vue b/src/views/system/developer/tabs/StaticStorage.vue
index 280b024b0..8fd3b19e1 100644
--- a/src/views/system/developer/tabs/StaticStorage.vue
+++ b/src/views/system/developer/tabs/StaticStorage.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="option-tab-wrapper">
-    <a-card :bordered="false" :bodyStyle="{ padding: 0 }">
+    <a-card :bodyStyle="{ padding: 0 }" :bordered="false">
       <div class="table-operator">
-        <a-button type="primary" icon="cloud-upload" @click="uploadModal.visible = true">上传</a-button>
+        <a-button icon="cloud-upload" type="primary" @click="uploadModal.visible = true">上传</a-button>
         <a-button icon="plus" @click="handleOpenCreateDirectoryModal({})">
           新建文件夹
         </a-button>
-        <a-button icon="sync" @click="handleListStatics" :loading="list.loading">
+        <a-button :loading="list.loading" icon="sync" @click="handleListStatics">
           刷新
         </a-button>
       </div>
       <div class="mt-4">
         <a-table
-          :rowKey="record => record.id"
           :columns="list.columns"
           :dataSource="sortedStatics"
+          :loading="list.loading"
           :pagination="false"
+          :rowKey="record => record.id"
           size="middle"
-          :loading="list.loading"
         >
           <span slot="name" slot-scope="name">
             <ellipsis :length="64" tooltip>
@@ -28,20 +28,20 @@
             {{ createTime | moment }}
           </span>
           <span slot="action" slot-scope="text, record">
-            <a href="javascript:void(0);" v-if="!record.isFile" @click="handleUpload(record)">上传</a>
-            <a :href="options.blog_url + record.relativePath" target="_blank" v-else>访问</a>
+            <a v-if="!record.isFile" href="javascript:void(0);" @click="handleUpload(record)">上传</a>
+            <a v-else :href="options.blog_url + record.relativePath" target="_blank">访问</a>
             <a-divider type="vertical" />
             <a-dropdown :trigger="['click']">
-              <a href="javascript:void(0);" class="ant-dropdown-link">更多</a>
+              <a class="ant-dropdown-link" href="javascript:void(0);">更多</a>
               <a-menu slot="overlay">
-                <a-menu-item key="1" v-if="!record.isFile">
+                <a-menu-item v-if="!record.isFile" key="1">
                   <a href="javascript:void(0);" @click="handleOpenCreateDirectoryModal(record)">创建文件夹</a>
                 </a-menu-item>
                 <a-menu-item key="2">
                   <a-popconfirm
                     :title="record.isFile ? '你确定要删除该文件？' : '你确定要删除该文件夹？'"
-                    okText="确定"
                     cancelText="取消"
+                    okText="确定"
                     @confirm="handleDelete(record.relativePath)"
                   >
                     <a href="javascript:void(0);">删除</a>
@@ -50,7 +50,7 @@
                 <a-menu-item key="3">
                   <a href="javascript:void(0);" @click="handleOpenRenameModal(record)">重命名</a>
                 </a-menu-item>
-                <a-menu-item key="4" v-if="record.isFile">
+                <a-menu-item v-if="record.isFile" key="4">
                   <a href="javascript:void(0);" @click="handleOpenEditContentModal(record)">编辑</a>
                 </a-menu-item>
               </a-menu>
@@ -60,33 +60,33 @@
       </div>
     </a-card>
     <a-modal
-      title="上传文件"
       v-model="uploadModal.visible"
-      :footer="null"
       :afterClose="onUploadModalClose"
+      :footer="null"
       destroyOnClose
+      title="上传文件"
     >
       <FilePondUpload
         ref="upload"
-        name="file"
-        :uploadHandler="uploadModal.uploadHandler"
         :filed="list.selected.relativePath"
+        :uploadHandler="uploadModal.uploadHandler"
+        name="file"
       ></FilePondUpload>
     </a-modal>
     <a-modal v-model="directoryForm.visible" :afterClose="onDirectoryFormModalClose" title="创建文件夹">
       <template slot="footer">
         <ReactiveButton
-          @click="handleCreateDirectory"
-          @callback="handleCreateDirectoryCallback"
-          :loading="directoryForm.saving"
           :errored="directoryForm.saveErrored"
-          text="创建"
-          loadedText="创建成功"
+          :loading="directoryForm.saving"
           erroredText="创建失败"
+          loadedText="创建成功"
+          text="创建"
+          @callback="handleCreateDirectoryCallback"
+          @click="handleCreateDirectory"
         ></ReactiveButton>
       </template>
       <a-form-model ref="directoryForm" :model="directoryForm.model" :rules="directoryForm.rules" layout="vertical">
-        <a-form-model-item prop="name" label="文件夹名：">
+        <a-form-model-item label="文件夹名：" prop="name">
           <a-input ref="createDirectoryInput" v-model="directoryForm.model.name" @keyup.enter="handleCreateDirectory" />
         </a-form-model-item>
       </a-form-model>
@@ -94,52 +94,52 @@
     <a-modal v-model="renameForm.visible" :afterClose="onRenameModalClose" title="重命名">
       <template slot="footer">
         <ReactiveButton
-          @click="handleRenameDirectoryOrFile"
-          @callback="handleRenameDirectoryOrFileCallback"
-          :loading="renameForm.saving"
           :errored="renameForm.saveErrored"
-          text="重命名"
-          loadedText="重命名成功"
+          :loading="renameForm.saving"
           erroredText="重命名失败"
+          loadedText="重命名成功"
+          text="重命名"
+          @callback="handleRenameDirectoryOrFileCallback"
+          @click="handleRenameDirectoryOrFile"
         ></ReactiveButton>
       </template>
       <a-form-model ref="renameForm" :model="renameForm.model" :rules="renameForm.rules" layout="vertical">
-        <a-form-model-item prop="name" :label="list.selected.isFile ? '文件名：' : '文件夹名：'">
+        <a-form-model-item :label="list.selected.isFile ? '文件名：' : '文件夹名：'" prop="name">
           <a-input ref="renameModalInput" v-model="renameForm.model.name" @keyup.enter="handleRenameDirectoryOrFile" />
         </a-form-model-item>
       </a-form-model>
     </a-modal>
     <a-modal
       v-model="editContentForm.visible"
+      :closable="false"
+      :keyboard="false"
+      :maskClosable="false"
+      style="max-width: 1000px"
       title="编辑文件"
       width="80%"
-      style="max-width: 1000px"
-      :maskClosable="false"
-      :keyboard="false"
-      :closable="false"
     >
       <template slot="footer">
         <a-popconfirm
-          title="未保存的内容将会丢失，确定要退出吗？"
-          okText="确定"
           cancelText="取消"
+          okText="确定"
+          title="未保存的内容将会丢失，确定要退出吗？"
           @confirm="handleEditContentModalClose"
         >
           <a-button>取消</a-button>
         </a-popconfirm>
         <ReactiveButton
-          @click="handleContentEdit"
-          @callback="handleContentEditCallback"
-          :loading="editContentForm.saving"
           :errored="editContentForm.saveErrored"
-          text="保存"
-          loadedText="保存成功"
+          :loading="editContentForm.saving"
           erroredText="保存失败"
+          loadedText="保存成功"
+          text="保存"
+          @callback="handleContentEditCallback"
+          @click="handleContentEdit"
         ></ReactiveButton>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <Codemirror ref="editor" :value="editContentForm.model.content"></Codemirror>
+          <Codemirror ref="editor" v-model="editContentForm.model.content" height="600px"></Codemirror>
         </a-form-item>
       </a-form>
     </a-modal>
@@ -149,6 +149,7 @@
 import { mapGetters } from 'vuex'
 import staticApi from '@/api/static'
 import Codemirror from '@/components/Codemirror/Codemirror'
+
 const columns = [
   {
     title: '文件名',
@@ -222,15 +223,7 @@ export default {
         },
         visible: false,
         saving: false,
-        saveErrored: false,
-        codeMirror: {
-          instance: null,
-          options: {
-            tabSize: 4,
-            lineNumbers: true,
-            line: true
-          }
-        }
+        saveErrored: false
       }
     }
   },
@@ -255,9 +248,7 @@ export default {
           this.list.data = response.data.data
         })
         .finally(() => {
-          setTimeout(() => {
-            this.list.loading = false
-          }, 200)
+          this.list.loading = false
         })
     },
     handleDelete(path) {
@@ -275,22 +266,20 @@ export default {
       this.uploadModal.visible = true
     },
     handleOpenCreateDirectoryModal(file) {
-      const _this = this
-      _this.list.selected = file
-      _this.directoryForm.visible = true
-      _this.$nextTick(() => {
-        _this.$refs.createDirectoryInput.focus()
+      this.list.selected = file
+      this.directoryForm.visible = true
+      this.$nextTick(() => {
+        this.$refs.createDirectoryInput.focus()
       })
     },
     handleCreateDirectory() {
-      const _this = this
-      _this.$refs.directoryForm.validate(valid => {
+      this.$refs.directoryForm.validate(valid => {
         if (valid) {
           this.directoryForm.saving = true
           staticApi
-            .createFolder(_this.list.selected.relativePath, _this.directoryForm.model.name)
+            .createFolder(this.list.selected.relativePath, this.directoryForm.model.name)
             .catch(() => {
-              _this.directoryForm.saveErrored = true
+              this.directoryForm.saveErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -310,12 +299,11 @@ export default {
       }
     },
     handleOpenRenameModal(file) {
-      const _this = this
-      _this.list.selected = file
-      _this.$set(_this.renameForm.model, 'name', file.name)
-      _this.renameForm.visible = true
-      _this.$nextTick(() => {
-        const inputRef = _this.$refs.renameModalInput
+      this.list.selected = file
+      this.$set(this.renameForm.model, 'name', file.name)
+      this.renameForm.visible = true
+      this.$nextTick(() => {
+        const inputRef = this.$refs.renameModalInput
         const tmp = inputRef.value.split('.')
         inputRef.focus()
         if (tmp.length <= 1) {
@@ -326,14 +314,13 @@ export default {
       })
     },
     handleRenameDirectoryOrFile() {
-      const _this = this
-      _this.$refs.renameForm.validate(valid => {
+      this.$refs.renameForm.validate(valid => {
         if (valid) {
           this.renameForm.saving = true
           staticApi
-            .rename(_this.list.selected.relativePath, _this.renameForm.model.name)
+            .rename(this.list.selected.relativePath, this.renameForm.model.name)
             .catch(() => {
-              _this.renameForm.saveErrored = true
+              this.renameForm.saveErrored = true
             })
             .finally(() => {
               setTimeout(() => {
@@ -353,32 +340,19 @@ export default {
       }
     },
     handleOpenEditContentModal(file) {
-      const _this = this
-      _this.list.selected = file
-      const arr = file.name.split('.')
-      const postfix = arr[arr.length - 1]
-      staticApi.getContent(_this.options.blog_url + file.relativePath).then(response => {
-        _this.editContentForm.model.content = response.data
+      this.list.selected = file
+      staticApi.getContent(this.options.blog_url + file.relativePath).then(response => {
+        this.editContentForm.model.content = response.data
+        this.editContentForm.visible = true
         this.$nextTick(() => {
           this.$refs.editor.handleInitCodemirror()
         })
-        const info = _this.editContentForm.codeMirror.instance.findModeByExtension(postfix)
-        if (info === undefined) {
-          _this.$message.error(`不支持编辑 "${postfix}" 类型的文件`)
-        } else {
-          _this.editContentForm.visible = true
-          _this.$nextTick(() => {
-            const editor = _this.$refs.editor.editor
-            editor.setOption('mode', info.mime)
-            _this.editContentForm.codeMirror.instance.autoLoadMode(editor, info.mode)
-          })
-        }
       })
     },
     handleContentEdit() {
       this.editContentForm.saving = true
       staticApi
-        .save(this.list.selected.relativePath, this.$refs.editor.editor.getValue())
+        .save(this.list.selected.relativePath, this.editContentForm.model.content)
         .catch(() => {
           this.editContentForm.saveErrored = true
         })
diff --git a/vue.config.js b/vue.config.js
index 8612edfac..24b52ef32 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,6 +4,9 @@ module.exports = {
   css: {
     loaderOptions: {
       less: {
+        modifyVars: {
+          'border-radius-base': '2px'
+        },
         javascriptEnabled: true
       }
     }

From 7e1034f23eae11ea7e82b8f5e9d2bd2a73569576 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 15 Sep 2021 21:17:58 +0800
Subject: [PATCH 3/5] refactor: upgrade codemirror version.

---
 src/views/system/developer/tabs/RuntimeLogs.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/views/system/developer/tabs/RuntimeLogs.vue b/src/views/system/developer/tabs/RuntimeLogs.vue
index 0a8ce5e7e..1cc39ad08 100644
--- a/src/views/system/developer/tabs/RuntimeLogs.vue
+++ b/src/views/system/developer/tabs/RuntimeLogs.vue
@@ -53,6 +53,8 @@ export default {
           this.logContent = response.data.data
           this.$nextTick(() => {
             this.$refs.editor.handleInitCodemirror()
+            const scrollerView = this.$el.querySelector('.cm-scroller')
+            scrollerView.scrollTop = scrollerView.scrollHeight - scrollerView.clientHeight
           })
         })
         .finally(() => {

From 42b1283e7ecb418108fad44565b0625da460c86e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 15 Sep 2021 21:20:03 +0800
Subject: [PATCH 4/5] chore: add editorconfig file.

---
 .editorconfig | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..ebe51d3bf
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file

From 9edd4854b33e78528fa303c96f0ea71a69bb6c74 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 15 Sep 2021 21:43:32 +0800
Subject: [PATCH 5/5] chore: update editorconfig.

---
 .editorconfig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.editorconfig b/.editorconfig
index ebe51d3bf..53fe05444 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,4 +9,4 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = false
-insert_final_newline = false
\ No newline at end of file
+insert_final_newline = true
\ No newline at end of file