feat: support data import in install page. (#100)

package-lock.json

@@ -2429,9 +2429,9 @@
       }
     },
     "ant-design-vue": {
-      "version": "1.5.0-beta.1",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.5.0-beta.1.tgz",
-      "integrity": "sha512-Fv5vxO+qHakbjsswgZ70/bjiZK4FphdFxv31VjBJKfhA5Ud7K6sNqC0BVpYS8nL0BwxGCVG8I30efNdU3VifnA==",
+      "version": "1.5.0-rc.3",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-1.5.0-rc.3.tgz",
+      "integrity": "sha512-nQ1Z5ZJChuIxGqL60roxqKEy/Kbu3X8wNsZcAgKO1TeMrkvT/liGvhryu5Wad4ilUzhxfy22r/ESDpYEKSMakw==",
       "requires": {
         "@ant-design/icons": "^2.1.1",
         "@ant-design/icons-vue": "^2.0.0",
@@ -2683,9 +2683,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.2.3.tgz",
-      "integrity": "sha512-yMJ4i3x5qEGVgEMowZiBkx+rjDrsXf64BWdHENCtHLgyPiEE+2r8jvqMF1cghCgdGo4sWVLJ7MDwPQgGSPDCcw=="
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.2.4.tgz",
+      "integrity": "sha512-mTgzMJixkrh+5t2gbYoua8MLy11GHkQqFE6tbhY5Aqc4jEDGsR4BWP+sVQiYDHtzTMB8WIwI/ypObTVPcTZInw=="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -5239,9 +5239,9 @@
       }
     },
     "dom-align": {
-      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.10.4.tgz",
-      "integrity": "sha512-wytDzaru67AmqFOY4B9GUb/hrwWagezoYYK97D/vpK+ezg+cnuZO0Q2gltUPa7KfNmIqfRIYVCF8UhRDEHAmgQ=="
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.11.0.tgz",
+      "integrity": "sha512-c5xlri+XyxfgIGjJfayVIXo6j8aYh1jMlNlONh1UPTeGMW8T2kRVDcJMm2SryyPQ9i6FtjWyEnpDxT9SENXZBQ=="
     },
     "dom-closest": {
       "version": "0.2.0",

package.json

@@ -9,7 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "ant-design-vue": "^1.5.0-beta.1",
+    "ant-design-vue": "^1.5.0-rc.3",
     "axios": "^0.19.2",
     "enquire.js": "^2.1.6",
     "filepond": "^4.13.0",

src/api/migrate.js

@@ -0,0 +1,15 @@
+import service from '@/utils/service'
+
+const baseUrl = '/api/admin/migrations'
+
+const migrateApi = {}
+
+migrateApi.migrate = formData => {
+  return service({
+    url: `${baseUrl}/halo`,
+    data: formData,
+    method: 'post'
+  })
+}
+
+export default migrateApi

src/views/system/Installation.vue

@@ -24,6 +24,8 @@
               </a-step>
               <a-step title="博客信息">
               </a-step>
+              <a-step title="数据导入">
+              </a-step>
             </a-steps>
             <a-divider dashed />
             <!-- Blogger info -->
@@ -159,6 +161,23 @@
               </a-form-item>
             </a-form>
 
+            <!-- Data migration -->
+            <div v-show="stepCurrent == 2">
+              <a-alert
+                style="margin-bottom: 1rem"
+                message="如果有数据导入需求，请点击并选择之前导出的文件。需要注意的是，并不是所有数据都会导入，该初始化表单的数据会覆盖你导入的数据。"
+                type="info"
+              />
+              <FilePondUpload
+                ref="upload"
+                name="file"
+                accept="application/json"
+                label="拖拽或点击选择数据文件，请确认是否为 Halo 后台导出的文件。"
+                :multiple="false"
+                :uploadHandler="handleMigrationUpload"
+              ></FilePondUpload>
+            </div>
+
             <a-row
               class="install-action"
               type="flex"
@@ -174,12 +193,12 @@
                 >上一步</a-button>
                 <a-button
                   type="primary"
-                  v-if="stepCurrent != 1"
+                  v-if="stepCurrent != 2"
                   @click="handleNextStep"
                 >下一步</a-button>
               </div>
               <a-button
-                v-if="stepCurrent == 1"
+                v-if="stepCurrent == 2"
                 type="primary"
                 icon="upload"
                 @click="handleInstall"
@@ -194,18 +213,20 @@
 
 <script>
 import adminApi from '@/api/admin'
+import migrateApi from '@/api/migrate'
 
 export default {
   data() {
     return {
       installation: {},
       stepCurrent: 0,
+      migrationData: null,
       bloggerForm: this.$form.createForm(this)
     }
   },
   created() {
     this.verifyIsInstall()
-    this.installation.url = window.location.protocol + '//' + window.location.host
+    this.$set(this.installation, 'url', window.location.protocol + '//' + window.location.host)
   },
   methods: {
     verifyIsInstall() {
@@ -226,6 +247,14 @@ export default {
         }
       })
     },
+    handleMigrationUpload(data) {
+      this.$log.debug('Selected data', data)
+      this.migrationData = data
+      return new Promise((resolve, reject) => {
+        this.$log.debug('Handle uploading')
+        resolve()
+      })
+    },
     install() {
       adminApi.install(this.installation).then(response => {
         this.$log.debug('Installation response', response)
@@ -247,7 +276,21 @@ export default {
         return
       }
 
-      this.install()
+      if (this.migrationData) {
+        const hide = this.$message.loading('数据导入中...', 0)
+        migrateApi
+          .migrate(this.migrationData)
+          .then(response => {
+            this.$log.debug('Migrated successfullly')
+            this.$message.success('数据导入成功！')
+            this.install()
+          })
+          .finally(() => {
+            hide()
+          })
+      } else {
+        this.install()
+      }
     }
   }
 }