diff --git a/packages/editor/src/fields/CodeSelectCol.vue b/packages/editor/src/fields/CodeSelectCol.vue
index 83fcefb0..63bb3cde 100644
--- a/packages/editor/src/fields/CodeSelectCol.vue
+++ b/packages/editor/src/fields/CodeSelectCol.vue
@@ -43,8 +43,8 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
-import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',
diff --git a/packages/editor/src/fields/DataSourceMethodSelect.vue b/packages/editor/src/fields/DataSourceMethodSelect.vue
index 49feb42c..6fca5209 100644
--- a/packages/editor/src/fields/DataSourceMethodSelect.vue
+++ b/packages/editor/src/fields/DataSourceMethodSelect.vue
@@ -40,8 +40,8 @@ import type { CodeBlockContent, Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
-import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
 defineOptions({
   name: 'MEditorDataSourceMethodSelect',
diff --git a/packages/editor/src/fields/DataSourceMethods.vue b/packages/editor/src/fields/DataSourceMethods.vue
index 1576591c..cb3cdbc5 100644
--- a/packages/editor/src/fields/DataSourceMethods.vue
+++ b/packages/editor/src/fields/DataSourceMethods.vue
@@ -25,8 +25,8 @@ import type { CodeBlockContent } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
-import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
 defineOptions({
   name: 'MEditorDataSourceMethods',
diff --git a/packages/editor/src/hooks/index.ts b/packages/editor/src/hooks/index.ts
new file mode 100644
index 00000000..5eab9d68
--- /dev/null
+++ b/packages/editor/src/hooks/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './use-code-block-edit';
+export * from './use-data-source-method';
+export * from './use-stage';
diff --git a/packages/editor/src/utils/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts
similarity index 100%
rename from packages/editor/src/utils/use-code-block-edit.ts
rename to packages/editor/src/hooks/use-code-block-edit.ts
diff --git a/packages/editor/src/utils/use-data-source-method.ts b/packages/editor/src/hooks/use-data-source-method.ts
similarity index 98%
rename from packages/editor/src/utils/use-data-source-method.ts
rename to packages/editor/src/hooks/use-data-source-method.ts
index 9e1a2e61..7020a1fa 100644
--- a/packages/editor/src/utils/use-data-source-method.ts
+++ b/packages/editor/src/hooks/use-data-source-method.ts
@@ -5,8 +5,7 @@ import { tMagicMessage } from '@tmagic/design';
 import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-
-import { getConfig } from './config';
+import { getConfig } from '@editor/utils/config';
 
 export const useDataSourceMethod = () => {
   const codeConfig = ref<CodeBlockContent>();
diff --git a/packages/editor/src/utils/stage.ts b/packages/editor/src/hooks/use-stage.ts
similarity index 98%
rename from packages/editor/src/utils/stage.ts
rename to packages/editor/src/hooks/use-stage.ts
index 6e876f5d..64eba92b 100644
--- a/packages/editor/src/utils/stage.ts
+++ b/packages/editor/src/hooks/use-stage.ts
@@ -6,8 +6,7 @@ import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
 import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
-
-import { getGuideLineFromCache } from './editor';
+import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
 const page = computed(() => editorService.get('page'));
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index a1b1ca4d..0bab250b 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -39,6 +39,7 @@ import './theme/index.scss';
 
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
+export * from './hooks';
 export * from './utils';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
index 331046a4..ce513e9a 100644
--- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue
@@ -35,8 +35,8 @@ import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeDeleteErrorType, Services } from '@editor/type';
-import { useCodeBlockEdit } from '@editor/utils/use-code-block-edit';
 
 import CodeBlockList from './CodeBlockList.vue';
 
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 95764172..9ff4cdc2 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -36,9 +36,9 @@ import type { MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
-import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
diff --git a/packages/editor/src/utils/index.ts b/packages/editor/src/utils/index.ts
index 01bda653..8254ea25 100644
--- a/packages/editor/src/utils/index.ts
+++ b/packages/editor/src/utils/index.ts
@@ -20,5 +20,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';