diff --git a/web/package.json b/web/package.json
index 4a2f1aa1a..dc7131596 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,9 @@
         "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
     },
     "dependencies": {
+        "@codemirror/lang-go": "^6.0.1",
+        "@codemirror/lang-javascript": "^6.2.2",
+        "@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",
@@ -21,6 +24,7 @@
         "@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",
@@ -41,6 +45,7 @@
         "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",
         "vuedraggable": "^4.1.0"
diff --git a/web/src/view/systemTools/autoCodeAdmin/index.vue b/web/src/view/systemTools/autoCodeAdmin/index.vue
index 88942fb25..5086258c9 100644
--- a/web/src/view/systemTools/autoCodeAdmin/index.vue
+++ b/web/src/view/systemTools/autoCodeAdmin/index.vue
@@ -215,22 +215,34 @@
               </div>
             </el-form-item>
             <el-form-item label="Api方法:">
-              <div
-                id="api"
-                class="h-[500px] w-full overflow-y-scroll"
-              ></div>
+              <codemirror
+                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 label="Server方法:">
-              <div
-                id="server"
-                class="h-[500px] w-full overflow-y-scroll"
-              ></div>
+              <codemirror
+                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 label="前端JSAPI方法:">
-              <div
-                id="js"
-                class="h-[500px] w-full overflow-y-scroll"
-              ></div>
+              <codemirror
+                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>
           </template>
         </el-form>
@@ -250,6 +262,13 @@ 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'
+
+
 const appStore = useAppStore()
 
 defineOptions({