上线缩略图预览(点击名字进行切换以及放大)。（同步更新）

src/components/DashBoard.vue

@@ -16,7 +16,14 @@
     <br>
       <el-button @click="openPanel">打开面板</el-button>
     <br>
-    <el-button @click="showTips=true" type="danger">新增特性</el-button>
+    <div v-show="thumbnailGallery !== {}">
+      <span>
+        {{thumbnailGallery.shortName}}
+      </span><br>
+      <picture>
+        <el-image :src="thumbnailGallery.url" :preview-src-list="[thumbnailGallery.url,]" :initial-index="0" class="preview" style="height: 30vh"/>
+      </picture>
+    </div>
   </div>
 
   <el-dialog title="查询本子" v-model="chosenGallery" width="100">
@@ -56,15 +63,7 @@
     <el-button @click="postTask" v-if="!chosenVideo.resolution">下载</el-button>
     <el-button @click="deleteVideo" v-if="chosenVideo.resolution">删除</el-button>
   </el-dialog>
-  <el-dialog title="新增特性" v-model="showTips" width="100%" top="0vh">
-    <el-main style="font-size: 25px">
-      1.查询远程任务的意思是前端直接提交链接给服务器，查询这个链接所对应的任务状态，平常创建任务点这个。而查找当前页任务是指将右边的页面跳转到包含这个任务的页面里<br>
-      2.查找所有任务跟查询远程任务类似，把关键字提交给服务器查询，但是只会对应一个任务。(对应多个没写，一定不是因为我懒)。第二个查找当前页任务则是在前端查询到的任务里筛选包含这个关键字的任务<br>
-      3.左下新增切换排列顺序的功能，可以选择按名称/任务创建时间排序(只有正序，倒序懒得写了)<br><hr>
-      本来可以不用这么麻烦的，但是之前一直都是把所有任务加载到前端，浪费带宽，所以现在选择部分加载了，按照任务创建时间排序选择最新的40条任务，在这之前的任务可以通过查询远程任务/查找所有任务来访问到，或者直接去zfile页面找<hr>
-      然后移动端我是真的不会适配，现在这样已经尽力了，如果觉得不好用的话还是尽量从电脑下载吧
-    </el-main>
-  </el-dialog>
+
 
   <div class="DashBoard" v-show="!loadComplete">
       <el-input v-model="AuthCode" class="validate" placeholder="请输入授权码">
@@ -108,6 +107,10 @@ export default {
       return store.state.weekUsed
     })
 
+    let thumbnailGallery = computed(() => {
+      return store.state.thumbnailGallery
+    })
+
     function queryWeekUsedAmount(){
       store.dispatch("loadWeekUsedAmount")
     }
@@ -225,7 +228,7 @@ export default {
 
     return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, openPanel, onlineGalleryReader,
             queryWeekUsedAmount, deleteVideo, deleteGallery,
-            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips,
+            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips, thumbnailGallery,
       store
     }
   }

src/components/Side.vue

@@ -16,12 +16,15 @@
               <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
               <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
               <el-button @click="onlineGalleryReader(props.row.name)" :disabled="props.row.download === undefined">在线看</el-button>
+              <el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button>
             </template>
           </el-table-column>
 
-          <el-table-column label="名字" width="255px">
+          <el-table-column label="名字" width="240px">
             <template #default="scoped">
-              {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
+              <span @click="showThumbnail(scoped.row)">
+                {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
+              </span>
             </template>
           </el-table-column>
 
@@ -245,10 +248,15 @@ export default {
       window.open("http://zfile.lionwebsite.xyz/1/video/")
     }
 
+    function showThumbnail(gallery){
+      store.commit("_changeThumbnailGallery", gallery)
+      setTimeout(() => {document.querySelector(".preview > img").click()}, 1)
+    }
+
     return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
             isShowGalleryHistory, showType, showNameType, sortType, isOpenHistoryPanel,
             reverseEditMode, changePage, changeShowType, changeShowNameType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
-            deleteVideo, onlineGalleryReader, onlineVideoViewer, closeHistoryPanel,
+            deleteVideo, onlineGalleryReader, onlineVideoViewer, closeHistoryPanel, showThumbnail,
             store
     }
   }

src/store/index.js

@@ -440,12 +440,17 @@ const mutations = {
     },
     _closeHistoryPanel(state){
         state.isShowHistory = false
+    },
+    _changeThumbnailGallery(state, gallery){
+        state.thumbnailGallery = gallery
+        state.thumbnailGallery.url = GalleryManageUrl + "thumbnail/" + encodeURIComponent(gallery.name) + ".webp?AuthCode="+state.AuthCode
     }
 }
 
 const state = {
     totalGalleryTask:[],                   //存放本子数据的数组
     chosenGallery:false,                    //准备下载的本子
+    thumbnailGallery:{},                    //预览本子
 
     totalVideoTask:[],                      //存放视频数据的数组
     chosenVideo:false,                      //准备下载的视频