From a8bd8d9b44dcaae79ba60481d496ed069ef5bec8 Mon Sep 17 00:00:00 2001
From: songliting <1341839053@qq.com>
Date: Thu, 27 Oct 2022 10:35:01 +0800
Subject: [PATCH] #204 support python/openmldb/kylin

---
 src/components/CodeEditor/index.vue           |   8 +-
 src/config/index.js                           |   4 -
 src/config/lang.js                            |  45 ++++
 src/config/lang.json                          |  68 ++++++
 src/locale/en.json                            |   2 +
 src/locale/zh.json                            |   2 +
 .../Notebook/CellBox/CellConfigForm.vue       | 229 ++++++++++++++++++
 src/page/Workspace/Notebook/CellBox/index.vue | 115 ++++++---
 .../Workspace/Notebook/CellList/command.vue   |  20 +-
 .../Workspace/Notebook/CellList/index.vue     | 132 +++++-----
 src/page/Workspace/Notebook/CellList/util.js  |  68 ++++++
 .../Notebook/CollapseCode/Editor.vue          |  10 +-
 .../Workflow/components/CodeEditor/index.vue  |   2 +-
 13 files changed, 577 insertions(+), 128 deletions(-)
 create mode 100644 src/config/lang.js
 create mode 100644 src/config/lang.json
 create mode 100644 src/page/Workspace/Notebook/CellBox/CellConfigForm.vue
 create mode 100644 src/page/Workspace/Notebook/CellList/util.js

diff --git a/src/components/CodeEditor/index.vue b/src/components/CodeEditor/index.vue
index 6a6b25a..fa9149e 100644
--- a/src/components/CodeEditor/index.vue
+++ b/src/components/CodeEditor/index.vue
@@ -18,7 +18,7 @@
 <script>
 import ace from 'brace'
 import { mapActions } from 'vuex'
-import { PythonTag, SpecialCodeSuggestKey } from '../../config'
+import { LANG, PythonTag, SpecialCodeSuggestKey } from '@/config/lang'
 
 export default {
   props: {
@@ -63,9 +63,9 @@ export default {
   },
   watch: {
     value (newVal, oldVal) {
-      if (this.readOnly) {
+      // if (this.readOnly) {
         this.content = newVal
-      }
+      // }
       this.checkLang()
 
       ;(oldVal || '').split('').forEach(i => {
@@ -178,7 +178,7 @@ export default {
         for (let index in this.newCellList) {
           index = index * 1
           const { editType, content } = this.newCellList[index]
-          if (index < cellIndex && editType !== 'Markdown') {
+          if (index < cellIndex && editType !== LANG.MARKDOWN) {
             const lineList = content.split('\n')
             lineNum += lineList.length
             beforeCellValue =
diff --git a/src/config/index.js b/src/config/index.js
index 0784a1a..1bcca41 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -17,10 +17,6 @@ export const dataSourceList = [
 ]
 export const notebookNameReg = /^[\u4e00-\u9fa9A-Za-z0-9_]+$/
 
-export const MarkdownTag = '--%markdown'
-export const PythonTag = '#%python'
-export const SpecialCodeSuggestKey = ['.', '/', '`', '\'', '"']
-
 /**
  * key: file type
  * value: suffix
diff --git a/src/config/lang.js b/src/config/lang.js
new file mode 100644
index 0000000..cca8747
--- /dev/null
+++ b/src/config/lang.js
@@ -0,0 +1,45 @@
+export { default } from './lang.json'
+export const SpecialCodeSuggestKey = ['.', '/', '`', '\'', '"']
+
+export const PYTHON_PREFIX = '#%'
+export const OPENMLDB_PREFIX = '--%'
+export const KYLIN_PREFIX = '--%'
+
+export const PythonTag = '#%python'
+export const MarkdownTag = '--%markdown'
+export const OpenMLDBTag = '--%openmldb'
+export const KylinTag = '--%kylin'
+
+export const LANG = {
+  BYZER: 'byzer',
+  PYTHON: 'python',
+  OPENMLDB: 'openmldb',
+  KYLIN: 'kylin',
+  MARKDOWN: 'markdown'
+}
+
+export const LANG_PREFIX = {
+  [LANG.PYTHON]: PYTHON_PREFIX,
+  [LANG.OPENMLDB]: OPENMLDB_PREFIX,
+  [LANG.KYLIN]: KYLIN_PREFIX,
+  [LANG.MARKDOWN]: null,
+  [LANG.BYZER]: null
+}
+
+export const LANG_TAG = {
+  [LANG.PYTHON]: PythonTag,
+  [LANG.OPENMLDB]: OpenMLDBTag,
+  [LANG.KYLIN]: KylinTag,
+  [LANG.MARKDOWN]: MarkdownTag,
+  [LANG.BYZER]: null
+}
+
+export const langList = [
+  {label: 'Byzer-lang', value: LANG.BYZER},
+  {label: 'Python', value: LANG.PYTHON},
+  {label: 'OpenMLDB', value: LANG.OPENMLDB},
+  {label: 'Kylin', value: LANG.KYLIN},
+  {label: 'Markdown', value: LANG.MARKDOWN }
+]
+
+
diff --git a/src/config/lang.json b/src/config/lang.json
new file mode 100644
index 0000000..e124ae5
--- /dev/null
+++ b/src/config/lang.json
@@ -0,0 +1,68 @@
+{
+  "python": {
+    "input": {
+      "required": true,
+      "default": ""
+    },
+    "output": {
+      "required": false,
+      "default": ""
+    },
+    "schema": {
+      "required": true,
+      "default": ""
+    },
+    "runIn": {
+      "required": false,
+      "default": "driver",
+      "options": ["driver", "executor"]
+    },
+    "dataMode": {
+      "required": false,
+      "default": "data",
+      "options": ["data", "model"]
+    } ,
+    "cache": {
+      "required": false,
+      "default": true,
+      "options": [true, false]
+    },
+    "env": {
+      "required": true,
+      "default": ""
+    }
+  },
+  "openmldb": {
+    "url": {
+      "required": true,
+      "default": ""
+    },
+    "db": {
+      "required": true,
+      "default": ""
+    },
+    "execute_mode": {
+      "required": true,
+      "default": "offline",
+      "options": ["offline", "online"]
+    },
+    "output": {
+      "required": true,
+      "default": ""
+    }
+  },
+  "kylin": {
+    "url": {
+      "required": true,
+      "default": ""
+    },
+    "db": {
+      "required": true,
+      "default": ""
+    },
+    "output": {
+      "required": true,
+      "default": ""
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/locale/en.json b/src/locale/en.json
index 0bc39d8..fb63d51 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -19,6 +19,8 @@
   "close": "Close",
   "submit": "Submit",
   "cancel": "Cancel",
+  "apply": "Apply",
+  "applied": "Applied",
   "tip": "Tip",
   "pleaseInput": "Please input",
   "pleaseSelect": "Please select",
diff --git a/src/locale/zh.json b/src/locale/zh.json
index befd6c0..d356633 100644
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -19,6 +19,8 @@
   "close": "关闭",
   "submit": "提交",
   "cancel": "取消",
+  "apply": "应用",
+  "applied": "已应用",
   "tip": "提示",
   "pleaseInput": "请输入",
   "pleaseSelect": "请选择",
diff --git a/src/page/Workspace/Notebook/CellBox/CellConfigForm.vue b/src/page/Workspace/Notebook/CellBox/CellConfigForm.vue
new file mode 100644
index 0000000..c535255
--- /dev/null
+++ b/src/page/Workspace/Notebook/CellBox/CellConfigForm.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="cell-config">
+    <el-form :model="ruleForm" ref="ruleForm" label-width="180px" size="small" class="lang-config">
+      <!-- 默认配置 根据 cellInfo 里面的值填充进去 -->
+      <el-form-item 
+        :label="item"
+        :prop="item"
+        v-for="item in Object.keys(langConfig)"
+        :key="item"
+        :required="langConfig[item].required"
+        :rules="[
+          { required: langConfig[item].required, message: langConfig[item].options ? $t('pleaseSelect'): $t('pleaseInput')},
+        ]"
+        >
+        <el-select v-model="ruleForm[item]" :placeholder="$t('pleaseSelect')" v-if="langConfig[item].options">
+          <el-option :label="opt.toString()" :value="opt" v-for="opt in langConfig[item].options" :key="opt"></el-option>
+        </el-select>
+        <el-input v-model="ruleForm[item]" v-else :placeholder="$t('pleaseInput')"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- 自己添加的其他配置 key value 形式的 -->
+    <el-form class="paramer-config" :model="parameterForm" ref="parameterForm" label-width="0px" size="small">
+      <div class="paramer-config-item" v-for="(item, index) in parameterForm.parameter" :key="item.key">
+        <div class="key-value-item left">
+          <el-form-item
+            label=""
+            :key="'parameter.' + index + '.name'"
+            :prop="'parameter.' + index + '.name'"
+            :rules="[
+              { required: true, message: $t('pleaseInput')},
+            ]"
+            >
+            <el-input v-model="item.name" placeholder="Key" />
+          </el-form-item>
+        </div>
+        <div class="key-value-item">
+          <el-form-item 
+            label=""
+            :key="'parameter.' + index + '.value'"
+            :prop="'parameter.' + index + '.value'"
+            :rules="[
+              { required: true, message: $t('pleaseInput')},
+            ]">
+            <el-input v-model="item.value" placeholder="Value" />
+          </el-form-item>
+        </div>
+        <div class="minus-btn">
+          <el-button icon="el-icon-minus" size="small" @click="handleMinusParam(index)" />
+        </div>
+      </div>
+    </el-form>
+    <div class="btns">
+      <el-button icon="el-icon-plus" size="small" @click="handleAddParam">{{$t('add')}}</el-button>
+      <div class="btns-submit">
+        <template v-if="applied">
+          <el-button size="mini" type="primary" v-if="applied" disabled icon="el-icon-check">{{$t('apply')}}</el-button>
+          <el-button size="mini" v-if="applied" @click="handleCloseForm">{{$t('close')}}</el-button>
+        </template>
+        <template v-else>
+          <el-button size="mini" type="primary" @click="handleApply" >{{$t('apply')}}</el-button>
+          <el-button size="mini" @click="handleCancel" >{{$t('cancel')}}</el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Vue, Component, Watch } from 'vue-property-decorator'
+import { getCellConfig, getDefaultConfig, getLangByContent, getConfigObj } from '../CellList/util'
+import langObj from '@/config/lang.json'
+import { LANG_PREFIX, LANG_TAG } from '@/config/lang'
+
+@Component({
+  props: ['cellInfo']
+})
+export default class CellConfigForm extends Vue {
+  ruleForm = {}
+  parameterForm = {
+    parameter: []
+  }
+
+  langConfig = null
+  applied = false
+  lang = ''
+
+  @Watch('cellInfo', { immediate: true, deep: true }) 
+  onCellInfoChange (newVal) {
+    const { editType, content = '' } = newVal
+    const lang = editType ?? getLangByContent(content)
+    this.lang = lang
+    this.getInitForm(newVal)
+    this.setApply(newVal)
+  }
+  @Watch('ruleForm', { deep: true })
+  onRuleFormChange () {
+    this.setApply(this.cellInfo)
+  }
+  @Watch('parameterForm.parameter', { deep: true })
+  onParameterFormChange () {
+    this.setApply(this.cellInfo)
+  }
+
+  getInitForm (cellInfo) {
+    this.langConfig = langObj[this.lang]
+    if (!LANG_PREFIX[this.lang]) return 
+    const { config }= getDefaultConfig(this.lang)
+    const cellConfig = getCellConfig(cellInfo, this.lang)
+    const { defaultConfig, optionalConfig } = this.getCellFormConfig(config, getConfigObj(cellConfig, this.lang))
+    this.ruleForm = {
+      ...defaultConfig
+    }
+    this.parameterForm = {
+      parameter: optionalConfig
+    }
+  }
+
+  setApply (cellInfo) {
+    const cellConfig = getCellConfig(cellInfo, this.lang)
+    const curConfig = this.getAllConfigs()
+    this.applied = cellConfig === curConfig
+  }
+  
+
+  getCellFormConfig (langConfig, cellConfig) {
+    let defaultConfig = {}
+    let optionalConfig = []
+    for (let key in langConfig) {
+      defaultConfig[key] = cellConfig[key] ?? langConfig[key]
+    }
+    for (let key in cellConfig) {
+      if (langConfig[key] === undefined) {
+        optionalConfig.push({name: key, value: cellConfig[key], key: Math.random()})
+      }
+    }
+    return {
+      defaultConfig,
+      optionalConfig
+    }
+  }
+
+  handleAddParam () {
+    this.parameterForm.parameter.push({
+      name: '', value: '', key: Math.random()
+    })
+  }
+  handleMinusParam (index) {
+    this.parameterForm.parameter.splice(index, 1)
+  }
+
+  handleCancel () {
+    this.$refs.ruleForm.resetFields()
+    this.$refs.parameterForm.resetFields()
+    this.getInitForm(this.cellInfo)
+  }
+
+  handleCloseForm () {
+    this.$emit('onHideForm')
+  }
+
+  getAllConfigs () {
+    const parameterConfig = {}
+    this.parameterForm.parameter.forEach(item => {
+      parameterConfig[item.name] = item.value
+    })
+    const allConfigs = {
+      ...this.ruleForm,
+      ...parameterConfig
+    }
+    const prefix = LANG_PREFIX[this.lang]
+    const tag = LANG_TAG[this.lang]
+    let str = tag 
+    for (const [key, value] of Object.entries(allConfigs)) {
+      str += `\n${prefix}`.concat(`${key}=${value}`)
+    }
+    return str
+  }
+
+  async handleApply () {
+    try {
+      let list = [this.$refs.ruleForm.validate()]
+      if (this.parameterForm.parameter.length) {
+        list.push(this.$refs.parameterForm.validate())
+      }
+      await Promise.all(list)
+      const configs = this.getAllConfigs()
+      this.$emit('changeCellConfig', configs)
+    } catch {
+      console.log('validate failed')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cell-config {
+  border: 1px solid #E6EBF4;
+  padding: 16px 24px;
+  margin-bottom: 8px;
+  .lang-config {
+    width: 360px;
+  }
+  .paramer-config {
+    width: 420px;
+    margin-bottom: 8px; 
+    margin-top: 16px;
+    &-item {
+      height: 32px;
+      display: flex;
+      margin-bottom: 16px;
+      .key-value-item {
+        width: 180px;
+        &.left {
+          padding-right: 8px;
+        }
+      }
+      .minus-btn {
+        margin-left: 8px;
+      }
+    }
+  }
+  .btns {
+    padding-left: 180px;
+    .btns-submit {
+      margin-top: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/page/Workspace/Notebook/CellBox/index.vue b/src/page/Workspace/Notebook/CellBox/index.vue
index fbe36b4..c81e3fb 100644
--- a/src/page/Workspace/Notebook/CellBox/index.vue
+++ b/src/page/Workspace/Notebook/CellBox/index.vue
@@ -5,27 +5,48 @@
       <div><icon-btn icon="el-ksd-icon-grab_dots_16" class="move-cell" :disabled="isRunningAll" /></div>
       <div class="mt-5"><icon-btn icon="el-ksd-icon-add_22" :handler="handleAddBelow" /></div>
     </div>
-    <div class="cell-box-container" :class="{'active': isActive, 'is-md-cell': editType === 'Markdown'}" v-if="showCode">
-      <!-- Code编辑器 & log -->
-      <div v-if="editType === 'Byzer-lang' || editType === 'Python'">
-        <div class="mock-editor" :class="!(mode === 'edit' && selectCell.id === cellId) && 'preview'"><div class="mock-editor-gutter"></div><div class="mock-editor-content"></div></div>
-        <CodeEditor
-          @changeMode="changeMode"
+    <div class="cell-box-container" :class="{'active': isActive, 'is-md-cell': editType === LANG.MARKDOWN}" v-if="showCode">
+      <!-- markdown编辑器 -->
+      <template v-if="editType === LANG.MARKDOWN">
+        <CodeMarkdownEditor
           :cellId="cellId"
-          :readOnly="mode !== 'edit'"
           :ref="'cellEditor' + cellId"
           :value="content"
-          :editType="editType"
-          :newCellList="newCellList"
+          :mode="mode"
+          :isSelected="selectCell.id === cellId"
           @changeContent="changeContent"
-          @gotoNextCell="gotoNextCell"
-          :isSelected="selectCell.id===cellId"
+          @changeMdMode="changeMdMode"
         />
-      </div>
-      <div class="cell-btns" :ref="'cellHover' + cellId">
-        <ActionButton :actions="actions" />
-      </div>
-      <div v-if="editType === 'Byzer-lang' || editType === 'Python'">
+      </template>
+      <template v-else>
+        <!-- Code编辑器 & log -->
+        <CellConfigForm 
+          v-if="showConfigForm"
+          :cellInfo="cellInfo"
+          @changeCellConfig="handleChangeCellConfig"
+          @onHideForm="showConfigForm = false"
+        />
+        <div class="code-container">
+          <div class="mock-editor" :class="!(mode === 'edit' && selectCell.id === cellId) && 'preview'"><div class="mock-editor-gutter"></div><div class="mock-editor-content"></div></div>
+          <CodeEditor
+            @changeMode="changeMode"
+            :cellId="cellId"
+            :readOnly="mode !== 'edit'"
+            :ref="'cellEditor' + cellId"
+            :value="content"
+            :editType="editType"
+            :newCellList="newCellList"
+            @changeContent="changeContent"
+            @gotoNextCell="gotoNextCell"
+            :isSelected="selectCell.id===cellId"
+          />
+          <div class="cell-btns" :ref="'cellHover' + cellId">
+            <el-tag @click="showConfigForm = true"><i class="el-icon-setting"></i>{{ getEditType() }}</el-tag>
+            <div class="actions">
+              <ActionButton :actions="actions" />
+            </div>
+          </div>
+        </div>
         <div class="excute-result" v-if="status !== 'NEW' || loadingExcute" v-loading="loadingExcute">
           <el-tabs v-model="activeTab" class="tabs_button">
             <el-tab-pane label="Result" name="result">
@@ -48,18 +69,6 @@
             </el-tab-pane>
           </el-tabs>
         </div>
-      </div>
-      <!-- markdown编辑器 -->
-      <template v-else-if="editType === 'Markdown'">
-        <CodeMarkdownEditor
-          :cellId="cellId"
-          :ref="'cellEditor' + cellId"
-          :value="content"
-          :mode="mode"
-          :isSelected="selectCell.id === cellId"
-          @changeContent="changeContent"
-          @changeMdMode="changeMdMode"
-        />
       </template>
     </div>
     <div class="cell-box-container" :class="{'active': isActive}" v-else>
@@ -78,8 +87,11 @@ import ExcuteResult from '../ExcuteResult'
 import CollapseCode from '../CollapseCode'
 import ExcuteDetail from '../ExcuteDetail'
 import LogMessage from '../LogMessage'
+import CellConfigForm from './CellConfigForm'
 import { mapMutations, mapActions, mapGetters, mapState } from 'vuex'
-import { JOB_STATUS, MarkdownTag } from '@/config'
+import { JOB_STATUS } from '@/config'
+import { LANG, MarkdownTag, LANG_PREFIX, langList } from '@/config/lang'
+import { getCellConfig } from '../CellList/util'
 
 export default {
   props: ['cellInfo', 'selectCell', 'disableDelete', 'isRunningAll', 'currentNotebook', 'mode', 'cellId', 'newCellList', 'showAllCell'],
@@ -97,10 +109,12 @@ export default {
       showExcuteDetails: true,
       startTime: 0,
       showAddCode: false,
-      editType: this.cellInfo.editType || 'Byzer-lang', // 编辑器类型
+      editType: this.cellInfo.editType || LANG?.BYZER, // 编辑器类型
       mdMode: 'preview',
       innerMaxHeight: '',
-      loadingExcute: false
+      loadingExcute: false,
+      LANG: LANG,
+      showConfigForm: false
     }
   },
   components: {
@@ -110,7 +124,8 @@ export default {
     ExcuteResult,
     CollapseCode,
     ExcuteDetail,
-    LogMessage
+    LogMessage,
+    CellConfigForm
   },
   created () {
     this.calInnerMaxHeight()
@@ -142,7 +157,8 @@ export default {
     cellInfo: {
       handler (newVal) {
         this.content = this.cellInfo.content
-        this.editType = this.cellInfo.editType || 'Byzer-lang'
+        this.editType = this.cellInfo.editType || LANG?.BYZER
+        this.showConfigForm = Boolean(LANG_PREFIX[this.editType])
         if (!newVal.job_id) {
           this.excuteResult = {}
           this.status = 'NEW'
@@ -179,6 +195,9 @@ export default {
     ...mapMutations({
       addResult: 'SET_LOADED_CELL_LIST'
     }),
+    getEditType () {
+      return langList.find(item => item.value === this.editType)?.label
+    },
     changeMdMode (mode) {
       if (this.isDemo) return
       this.mdMode = mode
@@ -225,7 +244,7 @@ export default {
       this.$emit('handleStopHere')
     },
     async handleRun () {
-      if (this.editType === 'Markdown') {
+      if (this.editType === LANG.MARKDOWN) {
         // markdown
         this.changeStatus('1')
         this.loading = false
@@ -340,13 +359,13 @@ export default {
     changeContent (value) {
       let newValue = value
       this.content = newValue
-      if (this.editType === 'Markdown') {
+      if (this.editType === LANG.MARKDOWN) {
         newValue = `${MarkdownTag}${newValue}`
       }
       this.$emit('changeCellContent', {
         value: newValue,
         cellInfo: this.cellInfo,
-        reserve: this.editType === 'Markdown'
+        reserve: this.editType === LANG.MARKDOWN
       })
     },
     gotoNextCell (type) {
@@ -354,6 +373,14 @@ export default {
     },
     changeMode (mode) {
       this.$emit('changeMode', mode)
+    },
+    handleChangeCellConfig (config) {
+      const curConfig = getCellConfig(this.selectCell)
+      const str = this.selectCell.content.replace(curConfig, config)
+       this.$emit('changeCellContent', {
+        value: str,
+        cellInfo: this.cellInfo
+      })
     }
   },
   beforeDestory () {
@@ -362,7 +389,6 @@ export default {
 }
 </script>
 <style lang="scss">
-
 .cell-box {
   width: 100%;
   position: relative;
@@ -400,6 +426,9 @@ export default {
     &:hover {
       box-shadow: 0px 1px 4px rgba(63, 89, 128, 0.16);
     }
+    .code-container {
+      position: relative;
+    }
     .mock-editor {
       display: flex;
       height: 19px;
@@ -433,7 +462,6 @@ export default {
     }
     .cell-btns {
       z-index: 999;
-      // height: 30px;
       padding: 4px 5px;
       padding-top: 0;
       display: none;
@@ -441,6 +469,17 @@ export default {
       position: absolute;
       right: 8px;
       top: 10px;
+      .el-tag {
+        cursor: pointer;
+      }
+      .el-icon-setting {
+        margin-right: 5px;
+      }
+      .actions {
+        display: inline-block;
+        vertical-align: middle;
+        padding: 2px;
+      }
     }
     .excute-result {
       margin-top: 15px;
diff --git a/src/page/Workspace/Notebook/CellList/command.vue b/src/page/Workspace/Notebook/CellList/command.vue
index f9a87ba..9a54a8b 100644
--- a/src/page/Workspace/Notebook/CellList/command.vue
+++ b/src/page/Workspace/Notebook/CellList/command.vue
@@ -3,7 +3,9 @@
 </template>
 <script>
 import { debounce } from 'lodash'
-import { PythonTag } from '../../../../config'
+import { LANG } from '@/config/lang'
+import { getLangByContent } from './util'
+
 
 export default {
   name: 'cellList',
@@ -157,7 +159,7 @@ export default {
      * @Date: 2021-09-01 17:09:13
      */
     checkAndChangeTitleLevel (tag) {
-      if ((this.currentNotebook.id === this.activeNotebookId) && this.selectCell?.editType === 'Markdown') {
+      if ((this.currentNotebook.id === this.activeNotebookId) && this.selectCell?.editType === LANG.MARKDOWN) {
         const {id} = this.selectCell
         // editor元素
         const node = this.$refs['cell' + id][0].$refs['cellEditor'+ id]
@@ -310,10 +312,9 @@ export default {
       }
     },
     getSelectedText () {
-      const editorType = ['Byzer-lang', 'Python']
       const { editType, id } = this.selectCell
       const node = this.$refs['cell' + id][0].$refs['cellEditor' + id]
-      if (editorType.includes(editType)) {
+      if (editType !== LANG.MARKDOWN) {
         const editor = node.$refs['codeEditor' + id].editor
         return editor.getSelectedText()
       }
@@ -348,13 +349,10 @@ export default {
     changeCurrentEditType () {
       if (this.currentNotebook.id === this.activeNotebookId) {
         let editType = ''
-        if (this.selectCell.editType === 'Byzer-lang' || this.selectCell.editType === 'Python') {
-          editType = 'Markdown'
+        if (this.selectCell.editType !== LANG.MARKDOWN) {
+          editType = LANG.MARKDOWN
         } else {
-          editType = 'Byzer-lang'
-          if (this.selectCell.content.split('\n').map(i => i.trim()).indexOf(PythonTag) > -1) {
-            editType = 'Python'
-          }
+          editType = getLangByContent(this.selectCell.content) ?? LANG.BYZER
         }
         this.handleChanged(editType);
       }
@@ -362,7 +360,7 @@ export default {
     changeModeToEdit () {
       this.changeMode('edit')
       const { id, editType } = this.selectCell
-      if (editType === 'Markdown') {
+      if (editType === LANG.MARKDOWN) {
         // editor元素
         const node = this.$refs['cell' + id][0].$refs['cellEditor'+ id]
         node.dblClickStatus = false
diff --git a/src/page/Workspace/Notebook/CellList/index.vue b/src/page/Workspace/Notebook/CellList/index.vue
index 0430cce..38970b4 100644
--- a/src/page/Workspace/Notebook/CellList/index.vue
+++ b/src/page/Workspace/Notebook/CellList/index.vue
@@ -26,14 +26,12 @@
         <div class="btn" v-if="!isDemo">
           <icon-btn icon="el-ksd-icon-add_22" :disabled="isRunningAll" :text="$t('notebook.addCell')" :handler="() => handleAddCell({ type: 'below' }, selectCell)" />
         </div>
-        <el-dropdown class="btn divider" @command="handleChanged" v-if="!isDemo">
+        <el-dropdown class="btn divider" @command="handleLangChange" v-if="!isDemo">
           <span class="drop-text hasEvent">
-            {{ editType }}<i class="el-ksd-icon-arrow_down_22 font-22"></i>
+            {{ getEditType() }}<i class="el-ksd-icon-arrow_down_22 font-22"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="Byzer-lang">Byzer-lang</el-dropdown-item>
-            <el-dropdown-item command="Python">Python</el-dropdown-item>
-            <el-dropdown-item command="Markdown">Markdown</el-dropdown-item>
+            <el-dropdown-item v-for="item in langList" :disabled="item.value === editType" :key="item.value" :command="item.value">{{item.label}}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <div class="btn" v-if="!isDemo">
@@ -185,9 +183,9 @@ import SetDemo from '@/components/SetDemo'
 import { debounce, cloneDeep } from 'lodash'
 import draggable from 'vuedraggable'
 import cellCommand from './command.vue'
-import { MarkdownTag } from '@/config'
-import { PythonTag } from '../../../../config'
 import { formatGetParams } from '../../../../util'
+import { LANG, langList, PythonTag, MarkdownTag, OpenMLDBTag, KylinTag, LANG_PREFIX } from '@/config/lang'
+import { getDefaultConfig, getLangByContent, getCellConfig } from './util'
 
 export default {
   name: 'cellList',
@@ -222,7 +220,8 @@ export default {
       setDemoParams: null,
       showAllCell: true,
       showProgressDuration: 3000,
-      runningStatus: 'NEW'
+      runningStatus: 'NEW',
+      langList: langList
     }
   },
   props: ['removeTabId', 'currentNotebook', 'activeNotebookId'],
@@ -322,13 +321,13 @@ export default {
     },
     selectCell: {
       handler (newVal, oldValue) {
-        const {id, editType} = newVal
-        const {editType: oldEditType} = oldValue
+        const { id, editType, content } = newVal
+        const { editType: oldEditType } = oldValue
         if (id) {
-          this.editType = newVal.editType || ''
+          this.editType = editType || getLangByContent(content)
           if (
-            editType === 'Markdown' &&
-            (oldEditType === 'Byzer-lang' || oldEditType === 'Python')
+            editType === LANG.MARKDOWN && 
+            Object.values(LANG).some(lang => oldEditType === lang && oldEditType !== LANG.MARKDOWN)
           ) {
             const mdEditorInstance = this.$refs['cell' + id][0].$refs[
               'cellEditor' + id
@@ -395,6 +394,9 @@ export default {
     ...mapActions('CreateNoteBookModal', {
       callCreateNoteBookModal: 'CALL_MODAL'
     }),
+    getEditType () {
+      return langList.find(item => item.value === this.editType)?.label
+    },
     progressColor () {
       const statusObj = {
         'ERROR': '#CA1616',
@@ -521,15 +523,15 @@ export default {
             }
           })
           const node = this.$refs['cell' + item.id][0].$refs['cellEditor'+ item.id]
-          if (item.editType === 'Byzer-lang' || item.editType === 'Python') {
+          if (item.editType === LANG.MARKDOWN) {
+            // markdown可以直接修改content
+            node.content = lineList.join('\n')
+          } else {
             // ace-editor直接改content来修改文本会导致Ctrl+Z无法undo
             // 并且光标可能会重置在{column:0, row: 0}的位置
             const editor = node.$refs['codeEditor'+ cellId].editor
             const cursorPos = editor?.getCursorPosition()
             editor?.setValue(lineList.join('\n'), cursorPos)
-          } else {
-            // markdown可以直接修改content
-            node.content = lineList.join('\n')
           }
           item.content = lineList.join('\n')
         }
@@ -575,7 +577,7 @@ export default {
         const runBtnNode = this.$refs['cell' + item.id][0].$refs['cellHover' + item.id]
         // 点击的位置不在包裹editor的li中
         if (containerNode && !containerNode.contains(event.target)) {
-          if (item.editType === 'Markdown') {
+          if (item.editType === LANG.MARKDOWN) {
             // markdown变为预览模式
             node && (node.mdMode = 'preview')
           }
@@ -588,7 +590,7 @@ export default {
             if (!btnNode.contains(event.target)) {
               // 模式变为编辑模式
               this.changeMode('edit')
-              if (item.editType === 'Markdown' && node) {
+              if (item.editType === LANG.MARKDOWN && node) {
                 // markdown变为编辑模式并聚焦
                 node.singleClick()
               }
@@ -597,35 +599,49 @@ export default {
         }
       })
     },
+
+    getLangConfig (value, lang) {
+      const prefix = LANG_PREFIX[lang]
+      return value.split('\n').filter(item => item).filter(item => !item.startsWith(prefix)).join('\n')
+    },
+    
     /**
      * @description: 下拉框change事件
      * @param {e} new editType
      * @Date: 2021-08-27 10:22:54
      */
-    handleChanged (e) {
-      this.editType = e
+    handleLangChange (type) {
+      this.editType = type
       this.refreshSelectCell()
       let newValue = this.selectCell?.content || ''
       const index = this.newCellList.findIndex(i => i.id === this.selectCell.id)
       this.$set(this.newCellList, index, Object.assign(this.newCellList[index], {
-        editType: e
+        editType: type
       }))
-      if (e === 'Markdown') {
+      if (type === LANG.MARKDOWN) {
         newValue = `${MarkdownTag}${newValue}`
         this.handleSave()
       } else {
         if (newValue.startsWith(MarkdownTag)) {
           newValue = newValue.replace(MarkdownTag, '')
         }
-        const index = newValue.split('\n').map(i => i.trim()).indexOf(PythonTag)
-        if (e === 'Python' && index < 0) {
-          newValue = PythonTag + '\n' + newValue
-          this.setEditorValue(newValue)
-        }
-        if (e === 'Byzer-lang') {
-          if (index > -1) {
-            newValue = newValue.replace(PythonTag, '')
+        // index: 先找到行数 是否是 1 判断当前的语言是什么
+        // 如果是从当前的切换到其他的语言，新增默认配置
+        const valueArr = newValue.split('\n').filter(item => item).map(i => i.trim())
+        const isPython = valueArr.indexOf(PythonTag) === 0
+        const isOpenMLDB = valueArr.indexOf(OpenMLDBTag) === 0
+        const isKylin = valueArr.indexOf(KylinTag) === 0
+        if (type !== LANG.MARKDOWN) {
+          if (isPython && type !== LANG.PYTHON) {
+            // 替换掉以 python 前缀开头的人
+            newValue = this.getLangConfig(newValue, LANG.PYTHON)
+          } else if (isOpenMLDB && type !== LANG.OPENMLDB) {
+            newValue = this.getLangConfig(newValue, LANG.OPENMLDB)
+          } else if (isKylin && type !== LANG.KYLIN) {
+            newValue = this.getLangConfig(newValue, LANG.KYLIN)
           }
+          const { configStr } = getDefaultConfig(type)
+          newValue = configStr + '\n' + newValue
           this.setEditorValue(newValue)
         }
         if (this.mode === 'command') {
@@ -680,20 +696,9 @@ export default {
       }
       const { id, type } = this.activeNotebook
       this.changeNotebookMode({notebookId: id, type, mode})
-      if (
-        mode === 'command' &&
-        (this.selectCell.editType === 'Byzer-lang' ||
-          this.selectCell.editType === 'Python')
-      ) {
+      if (this.selectCell.editType !== LANG.MARKDOWN) {
         // 切换为command模式后ace editor失焦
-        this.handleCodeBlur()
-      } else if (
-        mode === 'edit' &&
-        (this.selectCell.editType === 'Byzer-lang' ||
-          this.selectCell.editType === 'Python')
-      ) {
-        // 切换为edit模式后ace editor聚焦
-        this.handleCodeFocus(this.selectCell.id)
+        mode === 'command' ? this.handleCodeBlur() : this.handleCodeFocus(this.selectCell.id)
       }
       this.bindSomeKey()
     },
@@ -817,14 +822,9 @@ export default {
           item.content = item.content.replace(MarkdownTag, '')
           // ！！！从备份中取保存前编辑器的模式
           const temp = this.oldCellList.find(i => i.id === item.id) || {}
-          item.editType = temp.editType || 'Markdown'
+          item.editType = temp.editType || LANG.MARKDOWN
         } else {
-          item.editType = 'Byzer-lang'
-          if (
-            (item.content || '').split('\n').map(i => i.trim()).indexOf(PythonTag) > -1
-          ) {
-            item.editType = 'Python'
-          }
+          item.editType = getLangByContent(item.content) ?? item.BYZER
         }
         return item
       })
@@ -885,7 +885,7 @@ export default {
         // 处理content并保存
         this.oldCellList = cloneDeep(this.newCellList).map(item => {
           item.content = item.content || ''
-          if (item.editType === 'Markdown') {
+          if (item.editType === LANG.MARKDOWN) {
             if (!(item.content || '').startsWith(MarkdownTag)) {
               item.content = MarkdownTag + item.content
             }
@@ -1019,18 +1019,8 @@ export default {
     changeInput: debounce(function ({ value, cellInfo }) {
       const index = this.newCellList.findIndex(v => v.id === cellInfo.id)
       this.newCellList[index].content = value
-      let editType = 'Byzer-lang'
+      let editType = getLangByContent(value)
       // 保存时给markdown添加标记
-      if ((value || '').startsWith(MarkdownTag)) {
-        editType = 'Markdown'
-      } else if (
-        (value || '')
-          .split('\n')
-          .map(i => i.trim())
-          .indexOf(PythonTag) > -1
-      ) {
-        editType = 'Python'
-      }
       this.$set(
         this.newCellList,
         index,
@@ -1069,7 +1059,18 @@ export default {
         console.log(e)
       }
     },
+    getNewCellConfig (cellIndex, lang) {
+      const lastCellIndex = cellIndex - 1
+      if (lastCellIndex > -1) {
+        const lastCell = this.newCellList[lastCellIndex]
+        return getCellConfig(lastCell)
+      } else {
+        return getDefaultConfig(lang)
+      }
+    },
     async handleAddCell (data, cell) {
+      const { editType } = cell
+      console.log('handleAddCell ~ editType', editType, this.editType)
       const { type } = data
       const index = this.newCellList.findIndex(v => v.id === cell.id)
       const insertIndex = type === 'below' ? index + 1 : index
@@ -1090,8 +1091,11 @@ export default {
         this.loadingSave = false
         this.newCellList = this.dataProcess(res.data.cell_list)
         this.selectCell = Object.assign(newCell.data, {
-          editType: 'Byzer-lang'
+          editType: this.editType,
+          content: this.getNewCellConfig(insertIndex, this.editType)
         })
+        this.newCellList[insertIndex] = this.selectCell
+        await this.autoSaveCell()
         this.changeMode('edit')
         this.autoScrollCells(insertIndex)
       } catch (e) {
diff --git a/src/page/Workspace/Notebook/CellList/util.js b/src/page/Workspace/Notebook/CellList/util.js
new file mode 100644
index 0000000..0eb4dbe
--- /dev/null
+++ b/src/page/Workspace/Notebook/CellList/util.js
@@ -0,0 +1,68 @@
+import langConfig from '@/config/lang.json'
+import { LANG_PREFIX, LANG_TAG, LANG } from '@/config/lang'
+
+export function getDefaultConfig (lang) {
+  const config = langConfig[lang]
+  const prefix = LANG_PREFIX[lang]
+  const tag = LANG_TAG[lang]
+  let str = ''
+  let obj = {}
+  if (tag) {
+    str = `${tag}`
+    const keys = Object.keys(config)
+    keys.forEach(key => {
+      obj[key] = config[key].default
+      str += `\n${prefix}${key}=${config[key].default}`
+    })
+  }
+  return { configStr: tag ? str + '\n' : str, config: obj}
+}
+
+// 获取 cell 的配置， 根据前缀截取 前面几个
+export function getCellConfig (cell) {
+  const { editType } = cell
+  const prefix = LANG_PREFIX[editType]
+  if (!prefix) return ''
+  const tag = LANG_TAG[editType]
+  const content = cell.content.split('\n')
+  const newContent = content.filter((item, index) => {
+    const prevItem = content[index - 1]
+    return item.startsWith(prefix) && (prevItem?.startsWith(prefix) || prevItem === tag )
+  }).filter(item => item)
+  tag && newContent.unshift(tag)
+  return newContent.join('\n')
+}
+
+export function getConfigObj (config, lang) {
+  const configList = config.split('\n')
+  const prefix = LANG_PREFIX[lang]
+  if (!prefix) return {}
+  const obj = {}
+  configList.forEach(item => {
+    const arr = item.split('=')
+    if (Object.values(LANG_TAG).includes(arr[0])) return
+    const key = arr[0].split(prefix)[1]
+    if (key?.trim()) {
+      obj[key] = arr[1]
+    }
+  })
+  return obj
+}
+
+export function getLangByTag (value = '', tag) {
+  return value.split('\n').map(i => i.trim()).indexOf(tag) > -1
+}
+
+export function getLangByContent (value = '') {
+  if (value.startsWith(LANG_TAG[LANG.MARKDOWN])) {
+    return LANG.MARKDOWN
+  } else if (getLangByTag(value, LANG_TAG[LANG.PYTHON])) {
+    return LANG.PYTHON
+  } else if (getLangByTag(value, LANG_TAG[LANG.OPENMLDB])) {
+    return LANG.OPENMLDB
+  } else if (getLangByTag(value, LANG_TAG[LANG.KYLIN])) {
+    return LANG.KYLIN
+  } else {
+    return LANG.BYZER
+  }
+}
\ No newline at end of file
diff --git a/src/page/Workspace/Notebook/CollapseCode/Editor.vue b/src/page/Workspace/Notebook/CollapseCode/Editor.vue
index b06ffc0..a14469c 100644
--- a/src/page/Workspace/Notebook/CollapseCode/Editor.vue
+++ b/src/page/Workspace/Notebook/CollapseCode/Editor.vue
@@ -19,17 +19,15 @@ hljs.registerLanguage('byzer', require('./byzer_highlight'))
 hljs.registerLanguage('python', require('highlight.js/lib/languages/python'))
 hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'))
 require('highlight.js/styles/vs.css') 
+
+import { langList } from '@/config/lang'
+
 @Component({
   props: ['content', 'lang']
 })
 export default class CollapseCodeEditor extends Vue {
   valueArr = []
   value = ''
-  langObj = {
-    'Byzer-lang': 'byzer',
-    'Markdown': 'markdown',
-    'Python': 'python'
-  }
   hljs = hljs
   @Watch('content')
   onContentChange (newVal) {
@@ -38,7 +36,7 @@ export default class CollapseCodeEditor extends Vue {
     }
   }
   get curLang () {
-    return this.langObj[this.lang]
+    return langList.find(item => item.value === this.lang).value
   }
 }
 </script>
diff --git a/src/page/Workspace/Workflow/components/CodeEditor/index.vue b/src/page/Workspace/Workflow/components/CodeEditor/index.vue
index db54ea9..93b426e 100644
--- a/src/page/Workspace/Workflow/components/CodeEditor/index.vue
+++ b/src/page/Workspace/Workflow/components/CodeEditor/index.vue
@@ -10,7 +10,7 @@
 import { Vue, Component, Watch } from 'vue-property-decorator'
 import { mapActions } from 'vuex'
 import ace from 'brace'
-import { SpecialCodeSuggestKey } from '../../../../../config'
+import { SpecialCodeSuggestKey } from '@/config/lang'
 @Component({
   props: {
     height: {