refactor: ♻️ 界面设置页面重构，抽离逻辑 #96

src/views/Config/Global/FaceConfig/components/UploadDialog.vue

@@ -0,0 +1,75 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/FileUpload/type'
+import localforage from 'localforage'
+import { v4 as uuidv4 } from 'uuid'
+import { computed, ref, watch } from 'vue'
+import { useToast } from 'vue-toast-notification'
+import CustomDialog from '@/components/Dialog/index.vue'
+import FileUpload from '@/components/FileUpload/index.vue'
+
+interface Props {
+  importAllConfigData: (data: any) => void
+}
+
+const props = defineProps<Props>()
+const toast = useToast()
+const limitType = ref('application/json')
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const jsonFileData = ref<IFileData | null>(null)
+
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    jsonFileData.value = null
+    return
+  }
+  const isJson = /application\/json/.test(fileData?.type || '')
+  if (!isJson) {
+    toast.open({
+      message: '不是json文件，请检查',
+      type: 'error',
+      position: 'top-right',
+    })
+    return
+  }
+  jsonFileData.value = fileData
+}
+
+function submitUpload() {
+  if (jsonFileData.value) {
+    // 把文件转化为json数据
+    const jsonData = jsonFileData.value.dataUrl
+    console.log('jsonData', jsonData)
+    props.importAllConfigData(jsonData)
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    title="设置文件上传"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <FileUpload v-if="visible" :limit-type="limitType" mode="json" @upload-file="uploadFile" />
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>