diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
index cf40180e..a79c2f61 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
@@ -1,64 +1,12 @@
 import { ref, nextTick } from 'vue'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { fetchChartComponent, fetchConfigComponent } from '@/packages/index'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { getUUID, readFile, goDialog } from '@/utils'
-import { createComponent } from '@/packages'
-
-// 更新函数
-const updateComponent = async (fileData: any, isSplace = false) => {
-  const chartEditStore = useChartEditStore()
-  const chartHistoryStore = useChartHistoryStore()
-  if (isSplace) {
-    // 清除列表
-    chartEditStore.componentList = []
-    // 清除历史记录
-    chartHistoryStore.clearBackStack()
-    chartHistoryStore.clearForwardStack()
-  }
-  // 列表组件注册
-  fileData.componentList.forEach(async (e: CreateComponentType) => {
-    if (!window['$vue'].component(e.chartConfig.chartKey)) {
-      window['$vue'].component(
-        e.chartConfig.chartKey,
-        fetchChartComponent(e.chartConfig)
-      )
-      window['$vue'].component(
-        e.chartConfig.conKey,
-        fetchConfigComponent(e.chartConfig)
-      )
-    }
-  })
-  // 数据赋值
-  for (const key in fileData) {
-    // 组件
-    if (key === ChartEditStoreEnum.COMPONENT_LIST) {
-      for (const comItem of fileData[key]) {
-        // 补充 class 上的方法
-        let newComponent: CreateComponentType = await createComponent(
-          comItem.chartConfig
-        )
-        // 不保存到记录
-        chartEditStore.addComponentList(
-          Object.assign(newComponent, { ...comItem, id: getUUID() }),
-          false,
-          true
-        )
-      }
-    } else {
-      // 非组件(顺便排除脏数据)
-      if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
-      Object.assign((chartEditStore as any)[key], fileData[key])
-    }
-  }
-}
+import { readFile, goDialog } from '@/utils'
+import { useSync } from '@/views/chart/hooks/useSync.hook'
 
 export const useFile = () => {
   const importUploadFileListRef = ref()
+  const { updateComponent } = useSync()
 
   // 上传-前置
   //@ts-ignore
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
new file mode 100644
index 00000000..fe58cb3a
--- /dev/null
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -0,0 +1,66 @@
+import { getUUID } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
+import { CreateComponentType } from '@/packages/index.d'
+
+// 请求处理
+export const useSync = () => {
+  const chartEditStore = useChartEditStore()
+  const chartHistoryStore = useChartHistoryStore()
+
+  /**
+   * * 组件动态注册
+   * @param projectData 项目数据
+   * @param isSplace 是否替换数据
+   * @returns 
+   */
+  const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
+    if (isSplace) {
+      // 清除列表
+      chartEditStore.componentList = []
+      // 清除历史记录
+      chartHistoryStore.clearBackStack()
+      chartHistoryStore.clearForwardStack()
+    }
+    // 列表组件注册
+    projectData.componentList.forEach(async (e: CreateComponentType) => {
+      if (!window['$vue'].component(e.chartConfig.chartKey)) {
+        window['$vue'].component(
+          e.chartConfig.chartKey,
+          fetchChartComponent(e.chartConfig)
+        )
+        window['$vue'].component(
+          e.chartConfig.conKey,
+          fetchConfigComponent(e.chartConfig)
+        )
+      }
+    })
+    // 数据赋值
+    for (const key in projectData) {
+      // 组件
+      if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        for (const comItem of projectData[key]) {
+          // 补充 class 上的方法
+          let newComponent: CreateComponentType = await createComponent(
+            comItem.chartConfig
+          )
+          chartEditStore.addComponentList(
+            Object.assign(newComponent, {...comItem, id: getUUID()}),
+            false,
+            true
+          )
+        }
+      } else {
+        // 非组件(顺便排除脏数据)
+        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
+        Object.assign((chartEditStore as any)[key], projectData[key])
+      }
+    }
+  }
+
+  return {
+    updateComponent
+  }
+}
\ No newline at end of file