🆕导入配置文件完成

web/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@unocss/eslint-config": "^0.55.7",
+    "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^10.4.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.12",

web/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@unocss/eslint-config':
         specifier: ^0.55.7
         version: 0.55.7(eslint@8.50.0)(typescript@5.2.2)
+      '@vicons/ionicons5':
+        specifier: ^0.12.0
+        version: 0.12.0
       '@vueuse/core':
         specifier: ^10.4.1
         version: 10.4.1(vue@3.3.4)
@@ -1046,6 +1049,9 @@ packages:
   '@vavt/util@1.4.0':
     resolution: {integrity: sha512-qLhaokwifMTFqoo4UE2JZUyaxCzX9T4WcIt2KzznbtBrCM4CG119pY/cKqq6jDa3c1phUvPCoIfjWfnF9nj4NA==}
 
+  '@vicons/ionicons5@0.12.0':
+    resolution: {integrity: sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==}
+
   '@vite-plugin-vue-devtools/core@1.0.0-rc.7':
     resolution: {integrity: sha512-Tv9JeRZQ6KDwSkOQJvXc5TBcc4fkSazA96GDhi99v4VCthTgXjnhaah41CeZD3hFDKnNS0MHKFFqN+RHAgYDyQ==}
     peerDependencies:
@@ -5490,6 +5496,8 @@ snapshots:
 
   '@vavt/util@1.4.0': {}
 
+  '@vicons/ionicons5@0.12.0': {}
+
   '@vite-plugin-vue-devtools/core@1.0.0-rc.7(vite@4.4.11(@types/node@20.5.1)(sass@1.69.0)(terser@5.21.0))':
     dependencies:
       '@babel/parser': 7.23.0

web/src/api/setting.js

@@ -1,5 +1,10 @@
 import { request } from '@/utils'
 
 export default {
-  exportConfig: () => request.get('/setting/export'), // 获取当前登陆用户信息
+  exportConfig: () => request.get('/setting/export'), // 导出配置
+  importConfig: (data) => request.post('/setting/import',data,{
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  }),
 }

web/src/layout/components/header/components/Export.vue

@@ -5,13 +5,55 @@
   <n-icon mr-20 size="18" style="cursor: pointer" @click="exportConfig()">
     <icon-ph-export-bold />
   </n-icon>
+  <n-modal
+    v-model:show="showImportUploader"
+    transform-origin="center"
+    preset="card"
+    title="导入配置"
+    :bordered="false"
+    size="large"
+    style="width: 400px"
+    header-style="text-align: center"
+  >
+    <n-upload
+      ref="uploadRef"
+      :multiple="false"
+      directory-dnd
+      :max="1"
+      :custom-request="customRequest"
+      name="file"
+      accept=".json"
+      :default-upload="false"
+      @before-upload="uploadCheck"
+    >
+      <n-upload-dragger>
+        <div style="margin-bottom: 12px">
+          <n-icon size="48" :depth="3">
+            <ArchiveIcon />
+          </n-icon>
+        </div>
+        <n-text style="font-size: 16px">
+          点击或者拖动文件到该区域来上传
+        </n-text>
+        <n-p depth="3" style="margin: 8px 0 0 0">
+          注意：上传后将覆盖原有的配置以及客户端数据等，请谨慎操作！
+        </n-p>
+      </n-upload-dragger>
+    </n-upload>
+    <n-button type="primary" style="margin-left: 40%" @click="submitUpload">确定</n-button>
+  </n-modal>
 </template>
 
 <script setup>
 import api from '@/api/setting'
+import { ArchiveOutline as ArchiveIcon } from "@vicons/ionicons5";
+
+const showImportUploader = ref(false)
+const uploadRef = ref(null)
+
 // 导入
 function importConfig() {
-  console.log('导入配置')
+  showImportUploader.value = true
 }
 
 // 导出
@@ -19,7 +61,7 @@ function exportConfig() {
   $dialog.confirm({
     type: 'warning',
     title: '导出配置',
-    content: `是否导出需要导出系统全部配置？`,
+    content: `是否需要导出系统全部配置？`,
     async confirm() {
       api.exportConfig().then(response => {
         const blob = new Blob([JSON.stringify(response.data)], {
@@ -37,4 +79,36 @@ function exportConfig() {
     },
   })
 }
+
+// 上传前检查
+function uploadCheck(data) {
+  if (data.file.file?.name !== "config.json") {
+    $message.error("导入文件只能是[config.json]");
+    return false;
+  }
+  if (data.file.file?.type !== "application/json") {
+    $message.error("只能上传json类型文件，请重新上传");
+    return false;
+  }
+  return true;
+}
+
+// 自定义上传
+function customRequest(file) {
+  api.importConfig({
+    file: file.file.file,
+  }).then(response => {
+    if (response.data.code === 200) {
+      showImportUploader.value = false;
+    } else {
+      $message.error(response.data.message);
+    }
+  })
+
+}
+
+// 点击按钮上传
+function submitUpload() {
+  uploadRef.value?.submit();
+}
 </script>