diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index 46556bba53..7010d4ac82 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -82,7 +82,7 @@
     "@opentiny/vue-renderless": "~3.10.0",
     "@opentiny/vue-theme": "~3.10.0",
     "@vue/babel-plugin-jsx": "1.1.1",
-    "@vue/repl": "^1.3.0",
+    "@vue/repl": "^2.9.0",
     "@vueuse/core": "^9.6.0",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
diff --git a/packages/design-core/src/preview/src/preview/Preview.vue b/packages/design-core/src/preview/src/preview/Preview.vue
index dbb768ee58..facd066768 100644
--- a/packages/design-core/src/preview/src/preview/Preview.vue
+++ b/packages/design-core/src/preview/src/preview/Preview.vue
@@ -1,5 +1,6 @@
 <template>
   <Repl
+    :editor="Monaco"
     :store="store"
     :sfcOptions="sfcOptions"
     :showCompileOutput="false"
@@ -10,7 +11,8 @@
 </template>
 
 <script>
-import { Repl, ReplStore, File, compileFile } from '@vue/repl'
+import { Repl, ReplStore } from '@vue/repl'
+import Monaco from '@vue/repl/monaco-editor'
 import vueJsx from '@vue/babel-plugin-jsx'
 import { transformSync } from '@babel/core'
 import { Notify } from '@opentiny/vue'
@@ -90,22 +92,12 @@ export default {
     store.setImportMap(importMap)
 
     // 相比store.setFiles，只要少了state.activeFile = state.files[filename]，因为改变activeFile会触发多余的文件解析
-    const setFiles = async (newFiles, mainfileName = 'App.vue') => {
-      const files = {}
-      Object.entries(newFiles).forEach(([fileName, fileCode]) => {
-        files[fileName] = new File(fileName, fileCode)
-      })
-      const compilingList = Object.values(files).map((file) => compileFile(store, file))
-
-      await Promise.all(compilingList)
-      store.state.mainFile = mainfileName
-      store.state.files = files
+    const setFiles = async (newFiles, mainFileName) => {
+      await store.setFiles(newFiles, mainFileName)
+      // 强制更新 codeSandbox
       store.state.resetFlip = !store.state.resetFlip
     }
 
-    const files = store.getFiles()
-    Object.assign(files, srcFiles)
-
     const addUtilsImportMap = (utils = []) => {
       const utilsImportMaps = {}
       utils.forEach(({ type, content: { package: packageName, cdnLink } }) => {
@@ -117,9 +109,9 @@ export default {
       store.setImportMap(newImportMap)
     }
 
-    const params = getSearchParams()
+    const queryParams = getSearchParams()
 
-    const promiseList = [fetchCode(params), fetchMetaData(params), setFiles(files, 'Main.vue')]
+    const promiseList = [fetchCode(queryParams), fetchMetaData(queryParams), setFiles(srcFiles, 'src/Main.vue')]
     Promise.all(promiseList).then(([codeList, metaData]) => {
       addUtilsImportMap(metaData.utils || [])
       const codeErrorMsgs = codeList
@@ -164,8 +156,8 @@ export default {
         newFiles[panelName] = panelValue
       }
 
-      const appJsCode = processAppJsCode(newFiles['app.js'], params.styles)
- 
+      const appJsCode = processAppJsCode(newFiles['app.js'], queryParams.styles)
+
       newFiles['app.js'] = appJsCode
 
       codeList.map(fixScriptLang).forEach(assignFiles)
@@ -180,7 +172,8 @@ export default {
 
     return {
       store,
-      sfcOptions
+      sfcOptions,
+      Monaco
     }
   }
 }