Refactor theme upload

src/api/theme.js

@@ -1,4 +1,3 @@
-import axios from 'axios'
 import service from '@/utils/service'
 
 const baseUrl = '/api/admin/themes'
@@ -76,9 +75,6 @@ themeApi.getProperty = themeId => {
   })
 }
 
-themeApi.CancelToken = axios.CancelToken
-themeApi.isCancel = axios.isCancel
-
 themeApi.upload = (formData, uploadProgress, cancelToken) => {
   return service({
     url: `${baseUrl}/upload`,

src/components/Upload/Upload.vue

@@ -1,10 +1,99 @@
 <template>
-  <div>upload</div>
+  <div>
+    <a-upload-dragger
+      v-if="draggable"
+      :name="name"
+      :multiple="multiple"
+      :accept="accept"
+      :customRequest="handleUpload"
+      @change="handleChange"
+    >
+      <slot
+        role="button"
+        class="ant-upload ant-upload-btn"
+      />
+    </a-upload-dragger>
+    <a-upload
+      v-else
+      :name="name"
+      :multiple="multiple"
+      :accept="accept"
+      :customRequest="handleUpload"
+      @change="handleChange"
+    >
+      <slot />
+    </a-upload>
+  </div>
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
-  name: 'Upload'
+  name: 'Upload',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    draggable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    accept: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    uploadHandler: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    handleChange(info) {
+      this.$emit('change', info)
+    },
+    handleUpload(option) {
+      this.$log.debug('Uploading option', option)
+      const CancelToken = axios.CancelToken
+      const source = CancelToken.source()
+
+      const data = new FormData()
+      data.append('file', option.file)
+
+      this.uploadHandler(
+        data,
+        progressEvent => {
+          if (progressEvent.total > 0) {
+            progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
+          }
+          this.$log.debug('Uploading percent: ', progressEvent.percent)
+          option.onProgress(progressEvent)
+        },
+        source.token
+      )
+        .then(response => {
+          option.onSuccess(response, option.file)
+          this.$emit('success', response, option.file)
+        })
+        .catch(error => {
+          option.onError(error, error.response)
+          this.$emit('failure', error, option.file)
+        })
+      return {
+        abort: () => {
+          source.cancel('Upload operation canceled by the user.')
+        }
+      }
+    }
+  }
 }
 </script>
 

src/store/modules/app.js

@@ -24,7 +24,7 @@ const app = {
     autoHideHeader: false,
     color: null,
     weak: false,
-    multiTab: true
+    multiTab: false
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {

src/views/interface/ThemeList.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
       <a-col
         class="theme-item"
         :xl="6"
@@ -11,24 +15,46 @@
         v-for="(theme, index) in themes"
         :key="index"
       >
-        <a-card hoverable :title="theme.name">
-          <img :alt="theme.name" :src="theme.screenshots" slot="cover">
-          <template class="ant-card-actions" slot="actions">
+        <a-card
+          hoverable
+          :title="theme.name"
+        >
+          <img
+            :alt="theme.name"
+            :src="theme.screenshots"
+            slot="cover"
+          >
+          <template
+            class="ant-card-actions"
+            slot="actions"
+          >
             <div v-if="theme.activated">
-              <a-icon type="unlock" theme="twoTone"/>已启用
+              <a-icon
+                type="unlock"
+                theme="twoTone"
+              />已启用
             </div>
-            <div v-else @click="handleActivateClick(theme)">
+            <div
+              v-else
+              @click="handleActivateClick(theme)"
+            >
               <a-icon type="lock" />启用
             </div>
             <div @click="handleEditClick(theme)">
               <a-icon type="setting" />设置
             </div>
             <a-dropdown placement="topCenter">
-              <a class="ant-dropdown-link" href="#">
+              <a
+                class="ant-dropdown-link"
+                href="#"
+              >
                 <a-icon type="ellipsis" />更多
               </a>
               <a-menu slot="overlay">
-                <a-menu-item :key="1" :disabled="theme.activated">
+                <a-menu-item
+                  :key="1"
+                  :disabled="theme.activated"
+                >
                   <a-popconfirm
                     v-if="!theme.activated"
                     :title="'确定删除【' + theme.name + '】主题？'"
@@ -57,11 +83,28 @@
       :visible="visible"
       destroyOnClose
     >
-      <a-row :gutter="12" type="flex">
-        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
+      <a-row
+        :gutter="12"
+        type="flex"
+      >
+        <a-col
+          :xl="12"
+          :lg="12"
+          :md="12"
+          :sm="24"
+          :xs="24"
+        >
+          <a-skeleton
+            active
+            :loading="optionLoading"
+            :paragraph="{rows: 10}"
+          >
             <a-card :bordered="false">
-              <img :alt="themeProperty.name" :src="themeProperty.screenshots" slot="cover">
+              <img
+                :alt="themeProperty.name"
+                :src="themeProperty.screenshots"
+                slot="cover"
+              >
               <a-card-meta
                 :title="themeProperty.author.name"
                 :description="themeProperty.description"
@@ -72,15 +115,32 @@
                   size="large"
                   slot="avatar"
                 />
-                <a-avatar v-else size="large" slot="avatar">{{ themeProperty.author.name }}</a-avatar>
+                <a-avatar
+                  v-else
+                  size="large"
+                  slot="avatar"
+                >{{ themeProperty.author.name }}</a-avatar>
               </a-card-meta>
             </a-card>
           </a-skeleton>
         </a-col>
-        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
+        <a-col
+          :xl="12"
+          :lg="12"
+          :md="12"
+          :sm="24"
+          :xs="24"
+        >
+          <a-skeleton
+            active
+            :loading="optionLoading"
+            :paragraph="{rows: 20}"
+          >
             <div class="card-container">
-              <a-tabs type="card" defaultActiveKey="0">
+              <a-tabs
+                type="card"
+                defaultActiveKey="0"
+              >
                 <a-tab-pane
                   v-for="(group, index) in themeConfiguration"
                   :key="index.toString()"
@@ -129,7 +189,10 @@
                       </a-select>
                     </a-form-item>
                     <a-form-item>
-                      <a-button type="primary" @click="saveSettings">保存</a-button>
+                      <a-button
+                        type="primary"
+                        @click="saveSettings"
+                      >保存</a-button>
                     </a-form-item>
                   </a-form>
                 </a-tab-pane>
@@ -140,7 +203,13 @@
       </a-row>
     </a-drawer>
     <div class="upload-button">
-      <a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
+      <a-button
+        type="primary"
+        shape="circle"
+        icon="plus"
+        size="large"
+        @click="showUploadModal"
+      ></a-button>
     </div>
     <a-modal
       title="安装主题"
@@ -149,29 +218,38 @@
       :bodyStyle="{ padding: '0 24px 24px' }"
     >
       <a-tabs defaultActiveKey="1">
-        <a-tab-pane tab="本地上传" key="1">
-          <upload />
-          <a-upload-dragger
+        <a-tab-pane
+          tab="本地上传"
+          key="1"
+        >
+          <upload
             name="file"
-            :multiple="true"
+            multiple
             accept="application/zip"
-            :customRequest="handleUpload"
+            :uploadHandler="uploadHandler"
             @change="handleChange"
+            @success="handleUploadSuccess"
           >
             <p class="ant-upload-drag-icon">
               <a-icon type="inbox" />
             </p>
             <p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
             <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
-          </a-upload-dragger>
+          </upload>
         </a-tab-pane>
-        <a-tab-pane tab="远程拉取" key="2">
+        <a-tab-pane
+          tab="远程拉取"
+          key="2"
+        >
           <a-form layout="vertical">
             <a-form-item label="远程地址：">
               <a-input v-model="fetchingUrl" />
             </a-form-item>
             <a-form-item>
-              <a-button type="primary" @click="handleFetching">确定</a-button>
+              <a-button
+                type="primary"
+                @click="handleFetching"
+              >确定</a-button>
             </a-form-item>
           </a-form>
         </a-tab-pane>
@@ -199,7 +277,8 @@ export default {
       themeConfiguration: null,
       themeSettings: [],
       themeProperty: null,
-      fetchingUrl: null
+      fetchingUrl: null,
+      uploadHandler: themeApi.upload
     }
   },
   computed: {
@@ -271,6 +350,9 @@ export default {
         this.$message.error(`${info.file.name} 主题上传失败`)
       }
     },
+    handleUploadSuccess() {
+      this.loadThemes()
+    },
     handleEllipsisClick(theme) {
       this.$log.debug('Ellipsis clicked', theme)
     },
@@ -280,39 +362,6 @@ export default {
     handleActivateClick(theme) {
       this.activeTheme(theme.id)
     },
-    handleUpload(option) {
-      this.$log.debug('Uploading option', option)
-      const CancelToken = themeApi.CancelToken
-      const source = CancelToken.source()
-
-      const data = new FormData()
-      data.append('file', option.file)
-      themeApi
-        .upload(
-          data,
-          progressEvent => {
-            if (progressEvent.total > 0) {
-              progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
-            }
-            this.$log.debug('Uploading percent: ', progressEvent.percent)
-            option.onProgress(progressEvent)
-          },
-          source.token
-        )
-        .then(response => {
-          option.onSuccess(response, option.file)
-          this.loadThemes()
-        })
-        .catch(error => {
-          option.onError(error, error.response)
-        })
-
-      return {
-        abort: () => {
-          source.cancel('Upload operation canceled by the user.')
-        }
-      }
-    },
     handleFetching() {
       themeApi.fetching(this.fetchingUrl).then(response => {
         this.$message.success('上传成功')