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

This commit is contained in:
piexlMax(奇淼 2024-11-07 18:33:33 +08:00
parent b2cfbb95b6
commit e75fa0bd84
3 changed files with 18 additions and 51 deletions

View File

@ -10,10 +10,6 @@
"fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit" "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
}, },
"dependencies": { "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", "@element-plus/icons-vue": "^2.3.1",
"@form-create/designer": "^3.2.6", "@form-create/designer": "^3.2.6",
"@form-create/element-ui": "^3.2.10", "@form-create/element-ui": "^3.2.10",
@ -25,7 +21,6 @@
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.7.7", "axios": "^1.7.7",
"chokidar": "^4.0.0", "chokidar": "^4.0.0",
"codemirror": "^6.0.1",
"core-js": "^3.38.1", "core-js": "^3.38.1",
"default-passive-events": "^2.0.0", "default-passive-events": "^2.0.0",
"echarts": "5.5.1", "echarts": "5.5.1",
@ -46,9 +41,9 @@
"vform3-builds": "^3.0.10", "vform3-builds": "^3.0.10",
"vite-auto-import-svg": "^1.1.0", "vite-auto-import-svg": "^1.1.0",
"vue": "^3.5.7", "vue": "^3.5.7",
"vue-codemirror": "^6.1.1",
"vue-echarts": "^7.0.3", "vue-echarts": "^7.0.3",
"vue-router": "^4.4.3", "vue-router": "^4.4.3",
"vue3-ace-editor": "^2.2.4",
"vuedraggable": "^4.1.0" "vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {

View File

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

View File

@ -485,14 +485,7 @@
</div> </div>
</div> </div>
</template> </template>
<codemirror <v-ace-editor v-model:value="webCode" lang="vue" theme="github_dark" class="h-full" />
v-model="webCode"
placeholder="Code goes here..."
:style="{ height: '800px',width:'100%' }"
:indent-with-tab="true"
:tab-size="2"
:extensions=" [vue(), oneDark]"
/>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
@ -513,10 +506,13 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import WarningBar from '@/components/warningBar/warningBar.vue' import WarningBar from '@/components/warningBar/warningBar.vue'
import {getDB, getTable, getColumn, butler} from '@/api/autoCode' 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 {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({ defineOptions({
name: 'ExportTemplate' name: 'ExportTemplate'
}) })