Support update theme from new theme package.

2019-08-22 22:04:08 +08:00 · 2019-08-22 22:04:08 +08:00 · 030bf541ef
parent c3745cdf13
commit 030bf541ef
4 changed files with 190 additions and 14 deletions
--- a/src/api/theme.js
+++ b/src/api/theme.js
@ -41,7 +41,7 @@ themeApi.getActivatedTheme = () => {

 themeApi.update = themeId => {
  return service({
-    url: `${baseUrl}/${themeId}`,
+    url: `${baseUrl}/fetching/${themeId}`,
    timeout: 60000,
    method: 'put'
  })
@ -94,6 +94,17 @@ themeApi.upload = (formData, uploadProgress, cancelToken) => {
  })
 }

+themeApi.updateByUpload = (formData, uploadProgress, cancelToken, themeId) => {
+  return service({
+    url: `${baseUrl}/upload/${themeId}`,
+    timeout: 86400000, // 24 hours
+    data: formData, // form data
+    onUploadProgress: uploadProgress,
+    cancelToken: cancelToken,
+    method: 'put'
+  })
+}
+
 themeApi.fetching = url => {
  return service({
    url: `${baseUrl}/fetching`,
--- a/src/components/Upload/UpdateTheme.vue
+++ b/src/components/Upload/UpdateTheme.vue
@ -0,0 +1,110 @@
+<template>
+  <div>
+    <a-upload-dragger
+      v-if="draggable"
+      :name="name"
+      :accept="accept"
+      :customRequest="handleUpload"
+      :remove="handleRemove"
+      @change="handleChange"
+    >
+      <slot
+        role="button"
+        class="ant-upload ant-upload-btn"
+      />
+    </a-upload-dragger>
+    <a-upload
+      v-else
+      :name="name"
+      :accept="accept"
+      :customRequest="handleUpload"
+      :remove="handleRemove"
+      @change="handleChange"
+    >
+      <slot />
+    </a-upload>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'UpdateTheme',
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'file'
+    },
+    themeId: {
+      type: String,
+      required: true
+    },
+    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)
+    },
+    handleRemove(file) {
+      this.$log.debug('Removed file', file)
+      this.$emit('remove', file)
+    },
+    handleUpload(option) {
+      this.$log.debug('Uploading option', option)
+      const CancelToken = axios.CancelToken
+      const source = CancelToken.source()
+
+      const data = new FormData()
+      data.append(this.name, 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,
+        this.themeId,
+        option.file
+      )
+        .then(response => {
+          this.$log.debug('Uploaded successfully', response)
+          option.onSuccess(response, option.file)
+          this.$emit('success', response, option.file)
+        })
+        .catch(error => {
+          this.$log.debug('Failed to upload file', error)
+          option.onError(error, error.response)
+          this.$emit('failure', error, option.file)
+        })
+      return {
+        abort: () => {
+          this.$log.debug('Upload operation aborted by the user')
+          source.cancel('Upload operation canceled by the user.')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>
--- a/src/components/index.js
+++ b/src/components/index.js
@ -4,11 +4,13 @@ import Vue from 'vue'
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import Upload from '@/components/Upload/Upload'
+import UpdateTheme from '@/components/Upload/UpdateTheme'

 const _components = {
  Ellipsis,
  FooterToolbar,
-  Upload
+  Upload,
+  UpdateTheme
 }

 const components = {}
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -90,7 +90,10 @@
                        />删除
                      </span>
                    </a-menu-item>
-                    <a-menu-item :key="2">
+                    <a-menu-item
+                      :key="2"
+                      v-if="item.repo"
+                    >
                      <a-popconfirm
                        :title="'确定更新【' + item.name + '】主题？'"
                        @confirm="handleUpdateTheme(item.id)"
@ -98,11 +101,20 @@
                        cancelText="取消"
                      >
                        <a-icon
-                          type="download"
+                          type="cloud"
                          style="margin-right:3px"
-                        />更新
+                        />在线更新
                      </a-popconfirm>
                    </a-menu-item>
+                    <a-menu-item
+                      :key="3"
+                      @click="handleShowUpdateNewThemeModal(item)"
+                    >
+                      <a-icon
+                        type="file"
+                        style="margin-right:3px"
+                      />从主题包更新
+                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
@ -278,7 +290,7 @@
            <a
              rel="noopener noreferrer"
              href="javascript:void(0);"
-              @click="()=>this.uploadVisible = true"
+              @click="()=>this.uploadThemeVisible = true"
            >安装主题</a>
          </a-menu-item>
          <a-menu-item>
@ -293,7 +305,7 @@
    </div>
    <a-modal
      title="安装主题"
-      v-model="uploadVisible"
+      v-model="uploadThemeVisible"
      :footer="null"
      :bodyStyle="{ padding: '0 24px 24px' }"
    >
@ -338,19 +350,39 @@
              multiple
              accept="application/zip"
              :uploadHandler="uploadHandler"
-              @change="handleChange"
+              @change="handleUploadChange"
              @success="handleUploadSuccess"
            >
              <p class="ant-upload-drag-icon">
                <a-icon type="inbox" />
              </p>
-              <p class="ant-upload-text">点击选择主题或将主题拖拽到此处</p>
+              <p class="ant-upload-text">点击选择主题包或将主题包拖拽到此处</p>
              <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
            </upload>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
+    <a-modal
+      title="更新主题"
+      v-model="uploadNewThemeVisible"
+      :footer="null"
+    >
+      <UpdateTheme
+        name="file"
+        :themeId="prepareUpdateTheme.id"
+        accept="application/zip"
+        :uploadHandler="updateByUploadHandler"
+        @change="handleNewThemeUploadChange"
+        @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>
+      </UpdateTheme>
+    </a-modal>
  </div>
 </template>

@ -370,7 +402,8 @@ export default {
    return {
      themeLoading: false,
      optionLoading: true,
-      uploadVisible: false,
+      uploadThemeVisible: false,
+      uploadNewThemeVisible: false,
      fetchButtonLoading: false,
      wrapperCol: {
        xl: { span: 12 },
@ -385,7 +418,9 @@ export default {
      themeSettings: [],
      themeProperty: null,
      fetchingUrl: null,
-      uploadHandler: themeApi.upload
+      uploadHandler: themeApi.upload,
+      updateByUploadHandler: themeApi.updateByUpload,
+      prepareUpdateTheme: {}
    }
  },
  computed: {
@ -462,7 +497,7 @@ export default {
      this.themeConfiguration = []
      this.themeProperty = null
    },
-    handleChange(info) {
+    handleUploadChange(info) {
      const status = info.file.status
      if (status === 'done') {
        this.$message.success(`${info.file.name} 主题上传成功！`)
@ -470,8 +505,21 @@ export default {
        this.$message.error(`${info.file.name} 主题上传失败！`)
      }
    },
+    handleNewThemeUploadChange(info) {
+      const status = info.file.status
+      if (status === 'done') {
+        this.$message.success(`${info.file.name} 主题更新成功！`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} 主题更新失败！`)
+      }
+    },
    handleUploadSuccess() {
-      this.uploadVisible = false
+      if (this.uploadThemeVisible) {
+        this.uploadThemeVisible = false
+      }
+      if (this.uploadNewThemeVisible) {
+        this.uploadNewThemeVisible = false
+      }
      this.loadThemes()
    },
    handleEllipsisClick(theme) {
@ -489,7 +537,7 @@ export default {
        .fetching(this.fetchingUrl)
        .then(response => {
          this.$message.success('拉取成功！')
-          this.uploadVisible = false
+          this.uploadThemeVisible = false
          this.loadThemes()
        })
        .finally(() => {
@ -501,6 +549,11 @@ export default {
        this.loadThemes()
        this.$message.success('刷新成功！')
      })
+    },
+    handleShowUpdateNewThemeModal(item) {
+      console.log(item)
+      this.prepareUpdateTheme = item
+      this.uploadNewThemeVisible = true
    }
  }
 }