refactor: install page. (halo-dev/console#296)

* refactor: install page. * refactor: install page. * refactor: install page. * refactor: install page.
JohnNiang · Feb 25, 2021 · 566f365 · 566f365
1 parent b23d322
commit 566f365
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 259 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,11 +20,12 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "ant-design-vue": "^1.7.2",
+    "ant-design-vue": "^1.7.3",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "enquire.js": "^2.1.6",
     "filepond": "^4.25.1",
+    "filepond-plugin-file-validate-type": "^1.2.5",
     "filepond-plugin-image-preview": "^4.6.4",
     "flv.js": "^1.5.0",
     "halo-editor": "^2.8.2",

diff --git a/src/components/Button/ReactiveButton.vue b/src/components/Button/ReactiveButton.vue
@@ -4,6 +4,8 @@
     @click="handleClick"
     :icon="computedIcon"
     :loading="loading"
+    :size="size"
+    :block="block"
   >{{ computedText }}</a-button>
 </template>
 <script>
@@ -18,6 +20,14 @@ export default {
       type: String,
       default: null,
     },
+    size: {
+      type: String,
+      default: 'default',
+    },
+    block: {
+      type: Boolean,
+      default: false,
+    },
     loading: {
       type: Boolean,
       default: false,

diff --git a/src/components/Upload/FilePondUpload.vue b/src/components/Upload/FilePondUpload.vue
@@ -6,7 +6,7 @@
       :name="name"
       :allow-multiple="multiple"
       :allowRevert="false"
-      :accepted-file-types="accept"
+      :accepted-file-types="accepts"
       :maxParallelUploads="maxParallelUploads"
       :allowImagePreview="allowImagePreview"
       :maxFiles="maxFiles"
@@ -16,6 +16,8 @@
       labelFileProcessingError="上传错误"
       labelTapToCancel="点击取消"
       labelTapToRetry="点击重试"
+      labelFileTypeNotAllowed="不支持当前文件格式"
+      fileValidateTypeLabelExpectedTypes="请选择 {allTypes} 格式的文件"
       :files="fileList"
       :server="server"
       @init="handleFilePondInit"
@@ -33,49 +35,52 @@ import 'filepond/dist/filepond.min.css'
 // Plugins
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
+import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
 
 // Create component and regist plugins
-const FilePond = vueFilePond(FilePondPluginImagePreview)
+const FilePond = vueFilePond(FilePondPluginImagePreview, FilePondPluginFileValidateType)
 export default {
   name: 'FilePondUpload',
   components: {
-    FilePond
+    FilePond,
   },
   props: {
     name: {
       type: String,
       required: false,
-      default: 'file'
+      default: 'file',
     },
     filed: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     multiple: {
       type: Boolean,
       required: false,
-      default: true
+      default: true,
     },
-    accept: {
-      type: String,
+    accepts: {
+      type: Array,
       required: false,
-      default: ''
+      default: () => {
+        return []
+      },
     },
     label: {
       type: String,
       required: false,
-      default: '点击选择文件或将文件拖拽到此处'
+      default: '点击选择文件或将文件拖拽到此处',
     },
     uploadHandler: {
       type: Function,
-      required: true
+      required: true,
     },
     loadOptions: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
   computed: {
     ...mapGetters(['options']),
@@ -96,7 +101,7 @@ export default {
         return this.options.attachment_upload_max_files
       }
       return 1
-    }
+    },
   },
   data: function() {
     return {
@@ -134,11 +139,11 @@ export default {
               abort()
               this.$log.debug('Upload operation aborted by the user')
               source.cancel('Upload operation canceled by the user.')
-            }
+            },
           }
-        }
+        },
       },
-      fileList: []
+      fileList: [],
     }
   },
   methods: {
@@ -147,7 +152,7 @@ export default {
     },
     handleClearFileList() {
       this.$refs.pond.removeFiles()
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/src/styles/animate.less b/src/styles/animate.less
@@ -74,6 +74,20 @@
   animation-name: fadeInUp;
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}
+
 .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;

diff --git a/src/styles/style.less b/src/styles/style.less
@@ -10,31 +10,31 @@
   padding: 18px 28px 28px 28px;
   box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
 
-  .halo-logo {
-    margin-bottom: 20px;
-    text-align: center;
-
-    span {
-      vertical-align: text-bottom;
-      font-size: 38px;
-      display: inline-block;
-      font-weight: 600;
-      color: #1790fe;
-      background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
-      -webkit-text-fill-color: transparent;
-      -webkit-background-clip: text;
-      background-clip: text;
-
-      small {
-        margin-left: 5px;
-        font-size: 35%;
-      }
-    }
-  }
-
   .tip {
     cursor: pointer;
     margin-left: 0.5rem;
     float: right;
   }
 }
+
+.halo-logo {
+  margin-bottom: 20px;
+  text-align: center;
+
+  span {
+    vertical-align: text-bottom;
+    font-size: 38px;
+    display: inline-block;
+    font-weight: 600;
+    color: #1790fe;
+    background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+
+    small {
+      margin-left: 5px;
+      font-size: 35%;
+    }
+  }
+}
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
@@ -149,7 +149,7 @@
             <FilePondUpload
               ref="upload"
               name="file"
-              accept="application/zip"
+              :accepts="['application/zip']"
               label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
               :uploadHandler="installModal.local.uploadHandler"
               @success="handleUploadSucceed"
@@ -223,7 +223,7 @@
       <FilePondUpload
         ref="updateByupload"
         name="file"
-        accept="application/zip"
+        :accepts="['application/zip']"
         label="点击选择主题更新包或将主题更新包拖拽到此处<br>仅支持 ZIP 格式的文件"
         :uploadHandler="localUpdateModel.uploadHandler"
         :filed="localUpdateModel.selected.id"