修改：所有需要输入图片URL的地方替换成图片输入组件

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
+                }
               }
             }
           });

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;
 }

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: "分类管理",

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;