From 2663c579ff5342c42039768786ab246767c7a3d7 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Dec 2020 13:50:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E8=BE=93=E5=85=A5=E5=9B=BE=E7=89=87URL?=
 =?UTF-8?q?=E7=9A=84=E5=9C=B0=E6=96=B9=E6=9B=BF=E6=8D=A2=E6=88=90=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/preview/ImageViewer.vue        | 19 +++++++++++--------
 src/styles/home-index.scss                    |  5 +++++
 .../setting/articles/categoryManager.vue      |  4 +++-
 src/views/setting/articles/tagManager.vue     |  5 +++--
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/preview/ImageViewer.vue b/src/components/preview/ImageViewer.vue
index 87f5604..e8948ca 100644
--- a/src/components/preview/ImageViewer.vue
+++ b/src/components/preview/ImageViewer.vue
@@ -85,15 +85,18 @@
         if(visible){
           this.images = []
           let viewIndex = 0
+          const findIndex = this.fileList.findIndex(file => file.id === this.file.id)
           this.fileList.forEach((element,index) => {
-            if(!element.isFolder && element.contentType.indexOf('image') > -1){
-              let url = fileConfig.previewUrl(this.$store.state.user.name, element)
-              if(this.shareId){
-                url = fileConfig.publicPreviewUrl(element.id);
-              }
-              this.images.push(url)
-              if(this.file.id === element.id){
-                viewIndex = this.images.length-1
+            if(index < findIndex + 5 && index > findIndex - 5 ) {
+              if(!element.isFolder && element.contentType.indexOf('image') > -1){
+                let url = fileConfig.previewUrl(this.$store.state.user.name, element)
+                if(this.shareId){
+                  url = fileConfig.publicPreviewUrl(element.id);
+                }
+                this.images.push(url)
+                if(this.file.id === element.id){
+                  viewIndex = this.images.length-1
+                }
               }
             }
           });
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index 6718272..377dfc0 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -298,6 +298,11 @@
   top: 80%;
   color: #ffffff;
 }
+/deep/ .grid-item-text-image-size {
+  position: absolute;
+  top: 70%;
+  color: #ffffff;
+}
 /deep/ .grid-item-text:hover {
   color: #19ACF9;
 }
diff --git a/src/views/setting/articles/categoryManager.vue b/src/views/setting/articles/categoryManager.vue
index fda414b..82244fa 100644
--- a/src/views/setting/articles/categoryManager.vue
+++ b/src/views/setting/articles/categoryManager.vue
@@ -23,7 +23,7 @@
           <div class="instruction">此文字用于描述分类, 在该分类首页中它会被显示.</div>
         </el-form-item>
         <el-form-item label="分类背景" prop="categoryBackground">
-          <el-input type="textarea" v-model="form.categoryBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
+          <upload-image-input v-model="form.categoryBackground"/>
           <div class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图.</div>
         </el-form-item>
         <el-form-item>
@@ -105,9 +105,11 @@
 
 <script>
 import categoryApi from "@/api/category";
+import UploadImageInput from "@/components/input/UploadImageInput";
 
 export default {
   name: 'categoryManager',
+  components: {UploadImageInput},
   data() {
     return {
       title: "分类管理",
diff --git a/src/views/setting/articles/tagManager.vue b/src/views/setting/articles/tagManager.vue
index 2d0f13b..3c54e2c 100644
--- a/src/views/setting/articles/tagManager.vue
+++ b/src/views/setting/articles/tagManager.vue
@@ -10,7 +10,7 @@
           <div class="instruction">标签缩略名用于创建友好的链接形式, 如果留空则默认使用标签名称.</div>
         </el-form-item>
         <el-form-item label="标签背景" prop="categoryBackground">
-          <el-input type="textarea" v-model="form.tagBackground" :autosize="{ minRows: 2, maxRows: 6 }"/>
+          <upload-image-input v-model="form.tagBackground"/>
           <div class="instruction">在这里填入图片的URL地址, 以在该标签页面显示一个背景大图.</div>
         </el-form-item>
         <el-form-item>
@@ -47,9 +47,11 @@
 <script>
 import tagApi from "@/api/tag";
 import categoryApi from "@/api/category";
+import UploadImageInput from "@/components/input/UploadImageInput";
 
 export default {
   name: 'tagManager',
+  components: {UploadImageInput},
   data() {
     return {
       title: "标签管理",
@@ -85,7 +87,6 @@ export default {
       })
     },
     handleCheckTagChange(value) {
-      console.log(value)
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.tags.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.tags.length;