diff --git a/packages/editor/src/layouts/Layout.vue b/packages/editor/src/components/Layout.vue
similarity index 98%
rename from packages/editor/src/layouts/Layout.vue
rename to packages/editor/src/components/Layout.vue
index 9d9ee856..9c2f1183 100644
--- a/packages/editor/src/layouts/Layout.vue
+++ b/packages/editor/src/components/Layout.vue
@@ -23,7 +23,7 @@
 <script lang="ts" setup name="MEditorLayout">
 import { onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from './Resizer.vue';
+import Resizer from '../layouts/Resizer.vue';
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index f1b4545c..6637070c 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -48,6 +48,7 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
+export { default as Layout } from './components/Layout.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 89b0e4bc..dc80e820 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -48,10 +48,10 @@ import { computed, inject, ref, watch } from 'vue';
 import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
 
+import Layout from '../components/Layout.vue';
 import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
-import Layout from './Layout.vue';
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
index 36ac24c9..dea344cb 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
@@ -7,7 +7,7 @@
     :before-close="saveAndClose"
     :append-to-body="true"
   >
-    <layout v-model:left="left" :min-left="45" class="code-editor-layout">
+    <Layout v-model:left="left" :min-left="45" class="code-editor-layout">
       <!-- 左侧列表 -->
       <template #left v-if="mode === CodeEditorMode.LIST">
         <TMagicTree
@@ -53,7 +53,7 @@
               </div>
             </template>
             <div class="m-editor-wrapper">
-              <magic-code-editor
+              <MagicCodeEditor
                 v-if="codeConfig"
                 ref="codeEditor"
                 class="m-editor-container"
@@ -65,7 +65,7 @@
                   formatOnPaste: true,
                   readOnly: !editable,
                 }"
-              ></magic-code-editor>
+              ></MagicCodeEditor>
               <div class="m-editor-content-bottom" v-if="editable">
                 <TMagicButton type="primary" class="button" @click="saveCode">保存</TMagicButton>
                 <TMagicButton type="primary" class="button" @click="saveAndClose">关闭</TMagicButton>
@@ -77,7 +77,7 @@
           </TMagicCard>
         </div>
       </template>
-    </layout>
+    </Layout>
   </TMagicDialog>
 </template>
 
@@ -88,10 +88,10 @@ import type * as monaco from 'monaco-editor';
 
 import { TMagicButton, TMagicCard, TMagicDialog, TMagicInput, tMagicMessage, TMagicTree } from '@tmagic/design';
 
+import Layout from '../../../components/Layout.vue';
 import type { CodeBlockContent, CodeDslList, ListState, Services } from '../../../type';
 import { CodeEditorMode } from '../../../type';
 import MagicCodeEditor from '../../CodeEditor.vue';
-import Layout from '../../Layout.vue';
 
 const services = inject<Services>('services');