fix: 抽离update hook

src/App.vue

@@ -18,7 +18,7 @@ import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
 import { AppProvider } from '@/components/AppProvider'
 import { I18n } from '@/components/I18n'
 
-import { useDarkThemeHook, useThemeOverridesHook, useHook } from '@/hooks'
+import { useDarkThemeHook, useThemeOverridesHook, useCode } from '@/hooks'
 
 // 暗黑主题
 const darkTheme = useDarkThemeHook()
@@ -27,5 +27,5 @@ const darkTheme = useDarkThemeHook()
 const overridesTheme = useThemeOverridesHook()
 
 // 代码主题
-const hljsTheme = useHook()
+const hljsTheme = useCode()
 </script>

src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from '@/hooks/theme.hook'
-export * from '@/hooks/previewScale.hook'
-export * from '@/hooks/code.hook'
+export * from '@/hooks/useTheme.hook'
+export * from '@/hooks/usePreviewScale.hook'
+export * from '@/hooks/useCode.hook'

src/hooks/useCode.hook.ts

@@ -2,7 +2,7 @@ import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
 import typescript from 'highlight.js/lib/languages/typescript'
 
-export const useHook = () => {
+export const useCode = () => {
   hljs.registerLanguage('json', json)
   hljs.registerLanguage('typescript', typescript)
   return hljs

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -64,13 +64,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, PropType } from 'vue'
-import { UploadCustomRequestOptions } from 'naive-ui'
-import { FileTypeEnum } from '@/enums/fileTypeEnum'
-import { readFile, downloadFile } from '@/utils'
+import { ref, computed, watch, PropType } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
+import { useFile } from '../../hooks/useFile.hooks'
 
 const props = defineProps({
   targetData: {
@@ -88,11 +86,12 @@ const props = defineProps({
 const tableTitle = ['字段', '映射', '状态']
 
 const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
-const uploadFileListRef = ref()
 const source = ref()
 const dimensions = ref()
 const dimensionsAndSource = ref()
 
+const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(props.targetData)
+
 // 获取数据
 const getSource = computed(() => {
   return JSON.stringify(source.value)
@@ -139,41 +138,6 @@ watch(() => props.targetData?.option?.dataset, (newData) => {
 }, {
   immediate: true
 })
-
-//@ts-ignore
-const beforeUpload = ({ file }) => {
-  uploadFileListRef.value = []
-  const type = file.file.type
-  if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
-    window['$message'].warning('仅支持上传 【JSON】 格式文件，请重新上传！')
-    return false
-  }
-  return true
-}
-
-// 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(() => {
-    if (file.file) {
-      readFile(file.file).then((fileData: any) => {
-        props.targetData.option.dataset = JSON.parse(fileData)
-      });
-    } else {
-      window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
-    }
-  })
-}
-
-// 下载文件
-const download = () => {
-  try {
-    window['$message'].success('下载中，请耐心等待...')
-    downloadFile(JSON.stringify(props.targetData?.option?.dataset), undefined, 'json')
-  } catch (error) {
-    window['$message'].success('下载失败，数据错误！')
-  }
-}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/hooks/useFile.hooks.ts

@@ -1,3 +1,51 @@
-const useFile = () => {
+import { ref, toRef, nextTick } from 'vue'
+import { UploadCustomRequestOptions } from 'naive-ui'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { readFile, downloadFile } from '@/utils'
 
+export const useFile = (targetData: any) => {
+  const uploadFileListRef = ref()
+  const option = toRef(targetData, 'option')
+  console.log(option)
+  //@ts-ignore
+  const beforeUpload = ({ file }) => {
+    uploadFileListRef.value = []
+    const type = file.file.type
+    if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
+      window['$message'].warning('仅支持上传 【JSON】 格式文件，请重新上传！')
+      return false
+    }
+    return true
+  }
+
+  // 自定义上传操作
+  const customRequest = (options: UploadCustomRequestOptions) => {
+    const { file } = options
+    nextTick(() => {
+      if (file.file) {
+        readFile(file.file).then((fileData: any) => {
+          option.value.dataset = JSON.parse(fileData)
+          console.log(option.value.dataset)
+        })
+      } else {
+        window['$message'].error('导入数据失败，请稍后重试或联系管理员！')
+      }
+    })
+  }
+
+  // 下载文件
+  const download = () => {
+    try {
+      window['$message'].success('下载中，请耐心等待...')
+      downloadFile(JSON.stringify(option.value.dataset), undefined, 'json')
+    } catch (error) {
+      window['$message'].success('下载失败，数据错误！')
+    }
+  }
+  return {
+    uploadFileListRef,
+    beforeUpload,
+    customRequest,
+    download
+  }
 }