feat: 更换代码编辑器，增加不同node的兼容性。

flipped-aurora · Nov 7, 2024 · e75fa0b · e75fa0b
1 parent b2cfbb9
commit e75fa0b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 51 deletions.
diff --git a/web/package.json b/web/package.json
@@ -10,10 +10,6 @@
         "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
     },
     "dependencies": {
-        "@codemirror/lang-go": "^6.0.1",
-        "@codemirror/lang-javascript": "^6.2.2",
-        "@codemirror/lang-vue": "^0.1.3",
-        "@codemirror/theme-one-dark": "^6.1.2",
         "@element-plus/icons-vue": "^2.3.1",
         "@form-create/designer": "^3.2.6",
         "@form-create/element-ui": "^3.2.10",
@@ -25,7 +21,6 @@
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.7.7",
         "chokidar": "^4.0.0",
-        "codemirror": "^6.0.1",
         "core-js": "^3.38.1",
         "default-passive-events": "^2.0.0",
         "echarts": "5.5.1",
@@ -46,9 +41,9 @@
         "vform3-builds": "^3.0.10",
         "vite-auto-import-svg": "^1.1.0",
         "vue": "^3.5.7",
-        "vue-codemirror": "^6.1.1",
         "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.3",
+        "vue3-ace-editor": "^2.2.4",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {

diff --git a/web/src/view/systemTools/autoCodeAdmin/index.vue b/web/src/view/systemTools/autoCodeAdmin/index.vue
@@ -184,7 +184,7 @@
             <el-input v-model="autoFunc.abbreviation" placeholder="请输入缩写" disabled />
           </el-form-item>
 
-          
+
           <el-form-item label="是否AI填充：">
             <el-switch v-model="autoFunc.isAi" /> <span class="text-sm text-red-600 p-2">当前ai帮写存在不稳定因素，生成代码后请注意手动调整部分内容</span>
           </el-form-item>
@@ -196,34 +196,13 @@
               </div>
             </el-form-item>
             <el-form-item label="Api方法:">
-              <codemirror
-                v-model="autoFunc.apiFunc"
-                placeholder="Code goes here..."
-                :style="{ height: '300px',width:'100%' }"
-                :indent-with-tab="true"
-                :tab-size="2"
-                :extensions=" [go(), oneDark]"
-              />
+              <v-ace-editor v-model:value="autoFunc.apiFunc" lang="golang" theme="github_dark" class="h-80 w-full" />
             </el-form-item>
             <el-form-item label="Server方法:">
-              <codemirror
-                v-model="autoFunc.serverFunc"
-                placeholder="Code goes here..."
-                :style="{ height: '300px',width:'100%' }"
-                :indent-with-tab="true"
-                :tab-size="2"
-                :extensions=" [go(), oneDark]"
-              />
+              <v-ace-editor v-model:value="autoFunc.serverFunc" lang="golang" theme="github_dark" class="h-80 w-full" />
             </el-form-item>
             <el-form-item label="前端JSAPI方法:">
-              <codemirror
-                v-model="autoFunc.jsFunc"
-                placeholder="Code goes here..."
-                :style="{ height: '300px',width:'100%' }"
-                :indent-with-tab="true"
-                :tab-size="2"
-                :extensions=" [javascript(), oneDark]"
-              />
+              <v-ace-editor v-model:value="autoFunc.jsFunc" lang="javascript" theme="github_dark" class="h-80 w-full" />
             </el-form-item>
           </template>
 
@@ -263,18 +242,15 @@
 import { getSysHistory, rollback, delSysHistory,addFunc,butler } from "@/api/autoCode.js";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { ref,onMounted } from "vue";
+import { ref } from "vue";
 import { formatDate } from "@/utils/format";
 import { toUpperCase } from "@/utils/stringFun"
 import  {useAppStore} from "@/pinia";
-import { Marked } from "marked";
-import { markedHighlight } from "marked-highlight";
-import hljs from 'highlight.js'
 
-import { Codemirror } from 'vue-codemirror'
-  import { javascript } from '@codemirror/lang-javascript'
-  import { go } from '@codemirror/lang-go'
-  import { oneDark } from '@codemirror/theme-one-dark'
+import { VAceEditor } from "vue3-ace-editor"
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-golang';
+import 'ace-builds/src-noconflict/theme-github_dark';
 
 
 const appStore = useAppStore()
@@ -343,7 +319,7 @@ const addFuncBtn =  (row) => {
   funcFlag.value = true;
 };
 
-const funcFlag = ref(false);
+const funcFlag = ref(true);
 
 const closeFunc = () => {
   funcFlag.value = false;

diff --git a/web/src/view/systemTools/exportTemplate/exportTemplate.vue b/web/src/view/systemTools/exportTemplate/exportTemplate.vue
@@ -485,14 +485,7 @@
           </div>
         </div>
       </template>
-      <codemirror
-          v-model="webCode"
-          placeholder="Code goes here..."
-          :style="{ height: '800px',width:'100%' }"
-          :indent-with-tab="true"
-          :tab-size="2"
-          :extensions=" [vue(), oneDark]"
-      />
+      <v-ace-editor v-model:value="webCode" lang="vue" theme="github_dark" class="h-full" />
     </el-drawer>
   </div>
 </template>
@@ -513,10 +506,13 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { ref, reactive } from 'vue'
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import {getDB, getTable, getColumn, butler} from '@/api/autoCode'
-import {vue} from "@codemirror/lang-vue";
-import {oneDark} from "@codemirror/theme-one-dark";
-import {Codemirror} from "vue-codemirror";
 import {getCode} from './code'
+import { VAceEditor } from "vue3-ace-editor"
+
+import 'ace-builds/src-noconflict/mode-vue';
+import 'ace-builds/src-noconflict/theme-github_dark';
+
+
 defineOptions({
   name: 'ExportTemplate'
 })