Complete upload modal.

src/views/attachment/AttachmentList.vue

@@ -1,10 +1,6 @@
 <template>
   <page-view>
-    <a-row
+    <a-row :gutter="12" type="flex" align="middle">
-      :gutter="12"
-      type="flex"
-      align="middle"
-    >
       <a-col
         class="attachment-item"
         v-for="attachment in attachments"
@@ -15,32 +11,40 @@
         :sm="12"
         :xs="24"
       >
-        <a-card
+        <a-card :bodyStyle="{ padding: '1rem' , width: '240px' }" hoverable>
-          :bodyStyle="{ padding: '1rem' , width: '240px' }"
+          <img :src="attachment.thumbPath" :alt="attachment.name" slot="cover">
-          hoverable
-        >
-          <img
-            :src="attachment.thumbPath"
-            :alt="attachment.name"
-            slot="cover"
-          >
           <a-card-meta>
             <template slot="description">{{ attachment.name }}</template>
           </a-card-meta>
         </a-card>
       </a-col>
     </a-row>
-    <a-row
+    <a-row type="flex" justify="end" :gutter="12">
-      type="flex"
-      justify="end"
-      :gutter="12"
-    >
       <a-pagination
         v-model="pagination.page"
         :defaultPageSize="pagination.size"
         :total="pagination.total"
       ></a-pagination>
     </a-row>
+    <div class="upload-button">
+      <a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
+    </div>
+    <a-modal title="上传附件" v-model="uploadVisible" :footer="null">
+      <a-upload-dragger
+        name="file"
+        :multiple="true"
+        action="http://localhost:8090/admin/api/attachments/upload"
+        @change="handleChange"
+      >
+        <p class="ant-upload-drag-icon">
+          <a-icon type="inbox"/>
+        </p>
+        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
+        <p
+          class="ant-upload-hint"
+        >支持单个或批量上传</p>
+      </a-upload-dragger>
+    </a-modal>
   </page-view>
 </template>
 
@@ -53,6 +57,7 @@ export default {
   },
   data() {
     return {
+      uploadVisible: false,
       attachments: [],
       pagination: {
         page: 1,
@@ -72,6 +77,20 @@ export default {
         this.attachments = response.data.data.content
         this.pagination.total = response.data.data.total
       })
+    },
+    showUploadModal() {
+      this.uploadVisible = true
+    },
+    handleChange(info) {
+      const status = info.file.status
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (status === 'done') {
+        this.$message.success(`${info.file.name} file uploaded successfully.`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`)
+      }
     }
   }
 }
@@ -81,4 +100,10 @@ export default {
 .attachment-item {
   padding-bottom: 12px;
 }
+
+.upload-button {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+}
 </style>

src/views/interface/ThemeList.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row
+    <a-row :gutter="12" type="flex" align="middle">
-      :gutter="12"
-      type="flex"
-      align="middle"
-    >
       <a-col
         class="theme-item"
         :xl="6"
@@ -16,29 +12,14 @@
         :key="index"
       >
         <a-card :bodyStyle="{ padding: '14px' }">
-          <img
+          <img :alt="theme.name" :src="theme.screenshots" slot="cover">
-            :alt="theme.name"
-            :src="theme.screenshots"
-            slot="cover"
-          >
           <a-divider></a-divider>
           <div class="theme-control">
             <span class="theme-title">{{ theme.name }}</span>
             <a-button-group class="theme-button">
-              <a-button
+              <a-button type="primary" v-if="theme.activated" disabled>已启用</a-button>
-                type="primary"
+              <a-button type="primary" @click="activeTheme(theme.id)" v-else>启用</a-button>
-                v-if="theme.activated"
+              <a-button @click="settingDrawer(theme)" v-if="theme.hasOptions">设置</a-button>
-                disabled
-              >已启用</a-button>
-              <a-button
-                type="primary"
-                @click="activeTheme(theme.id)"
-                v-else
-              >启用</a-button>
-              <a-button
-                @click="settingDrawer(theme)"
-                v-if="theme.hasOptions"
-              >设置</a-button>
             </a-button-group>
           </div>
         </a-card>
@@ -53,22 +34,9 @@
       :visible="visible"
       destroyOnClose
     >
-      <a-row
+      <a-row :gutter="12" type="flex">
-        :gutter="12"
+        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-        type="flex"
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 10}">
-      >
-        <a-col
-          :xl="12"
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 10}"
-          >
             <img
               v-if="themeProperty"
               :alt="themeProperty.name"
@@ -77,18 +45,8 @@
             >
           </a-skeleton>
         </a-col>
-        <a-col
+        <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-          :xl="12"
+          <a-skeleton active :loading="optionLoading" :paragraph="{rows: 20}">
-          :lg="12"
-          :md="12"
-          :sm="24"
-          :xs="24"
-        >
-          <a-skeleton
-            active
-            :loading="optionLoading"
-            :paragraph="{rows: 20}"
-          >
             <a-tabs defaultActiveKey="0">
               <a-tab-pane
                 v-for="(group, index) in themeConfiguration"
@@ -138,17 +96,11 @@
                     </a-select>
                   </a-form-item>
                   <a-form-item>
-                    <a-button
+                    <a-button type="primary" @click="saveSettings">保存</a-button>
-                      type="primary"
-                      @click="saveSettings"
-                    >保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
-              <a-tab-pane
+              <a-tab-pane key="about" tab="关于">
-                key="about"
-                tab="关于"
-              >
                 <a-form-item>
                   <a-popconfirm
                     :title="'确定删除【' + themeProperty.name + '】主题？'"
@@ -165,6 +117,26 @@
         </a-col>
       </a-row>
     </a-drawer>
+    <div class="upload-button">
+      <a-button type="primary" shape="circle" icon="plus" size="large" @click="showUploadModal"></a-button>
+    </div>
+    <a-modal title="上传主题" v-model="uploadVisible" :footer="null">
+      <a-upload-dragger
+        name="file"
+        :multiple="true"
+        action="http://localhost:8090/admin/api/attachments/uploads"
+        @change="handleChange"
+        accept=".zip"
+      >
+        <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>
+    </a-modal>
   </div>
 </template>
 
@@ -175,6 +147,7 @@ export default {
   data() {
     return {
       optionLoading: true,
+      uploadVisible: false,
       wrapperCol: {
         xl: { span: 12 },
         lg: { span: 12 },
@@ -245,6 +218,20 @@ export default {
       this.optionLoading = false
       this.themeConfiguration = null
       this.themeProperty = null
+    },
+    showUploadModal() {
+      this.uploadVisible = true
+    },
+    handleChange(info) {
+      const status = info.file.status
+      if (status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (status === 'done') {
+        this.$message.success(`${info.file.name} file uploaded successfully.`)
+      } else if (status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`)
+      }
     }
   }
 }
@@ -266,4 +253,10 @@ export default {
 .theme-item .theme-control .theme-button {
   float: right;
 }
+
+.upload-button {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+}
 </style>