上线缩略图预览(鼠标移动至名字进行切换，点击图片进行放大)。（同步更新）

src/App.vue

@@ -6,7 +6,7 @@ import DashBoard from "./components/DashBoard.vue";
 <template>
   <div class="app">
     <el-container>
-      <el-aside width="700px">
+      <el-aside width="750px">
         <Side/>
       </el-aside>
       <el-main>

src/components/DashBoard.vue

@@ -14,9 +14,16 @@
     <br>
     <el-button @click="searchRemoteByKeyword">查找所有任务</el-button>
     <el-button @click="searchLocalByKeyword">查找当前页任务</el-button>
-    <hr>
     <br>
-    <el-button @click="showTips=true" type="danger">新增特性</el-button>
+    <hr>
+    <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"></el-image>
+      </picture>
+    </div>
   </div>
 
   <el-dialog title="查询本子" v-model="chosenGallery">
@@ -37,6 +44,7 @@
     <el-button @click="postTask" v-if="chosenGallery.availableResolution">下载</el-button>
     <tr v-if="!chosenGallery.availableResolution">
       <el-button @click="onlineGalleryReader(chosenGallery.name)">在线看</el-button>
+      <el-button @click="showThumbnailGallery(chosenGallery)">查看预览</el-button>
       <el-button @click="deleteGallery" >删除</el-button>
     </tr>
   </el-dialog>
@@ -57,15 +65,6 @@
     <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: 36px">
-      1.查询远程任务的意思是前端直接提交链接给服务器，查询这个链接所对应的任务状态，平常创建任务点这个。而查找当前页任务是指将右边的页面跳转到包含这个任务的页面里<br>
-      2.查找所有任务跟查询远程任务类似，把关键字提交给服务器查询，但是只会对应一个任务。(对应多个没写，一定不是因为我懒)。第二个查找当前页任务则是在前端查询到的任务里筛选包含这个关键字的任务<br>
-      3.左下新增切换排列顺序的功能，可以选择按名称/任务创建时间排序(只有正序，倒序懒得写了)<br><hr>
-      本来可以不用这么麻烦的，但是之前一直都是把所有任务加载到前端，浪费带宽，所以现在选择部分加载了，按照任务创建时间排序选择最新的40条任务，在这之前的任务可以通过查询远程任务/查找所有任务来访问到，或者直接去zfile页面找
-    </el-main>
-  </el-dialog>
-
   <div class="DashBoard" v-show="!loadComplete">
       <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
       <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
@@ -84,7 +83,6 @@ export default {
     let isRemember = ref(false)
     let keyword = ref("")
     let link = ref("")
-    let showTips = ref(false)
     let targetResolution = ref("")
 
     let chosenGallery = computed(() => {
@@ -107,6 +105,10 @@ export default {
       return store.state.weekUsed
     })
 
+    let thumbnailGallery = computed(() => {
+      return store.state.thumbnailGallery
+    })
+
     function queryWeekUsedAmount(){
       store.dispatch("loadWeekUsedAmount")
     }
@@ -211,6 +213,11 @@ export default {
       window.open("http://zfile.lionwebsite.xyz/1/gallery/" + encodeURI(name))
     }
 
+    function showThumbnailGallery(gallery){
+      store.commit("_changeThumbnailGallery", gallery)
+      document.querySelector(".preview > img").click()
+    }
+
     onMounted(() => {
       const auth = localStorage.getItem("auth")
       if(auth !== null){
@@ -219,9 +226,9 @@ export default {
     })
 
     return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword,
-            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader,
+            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader, showThumbnailGallery,
             link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed,
-            showTips,
+             thumbnailGallery,
       store
     }
   }

src/components/Side.vue

@@ -2,7 +2,7 @@
   <div class="side" style="width: 100%">
     <span v-show="loadComplete">{{showType === 'gallery' ? '本子' : '视频'}}历史</span>
     <div  v-show="loadComplete" class="load_complete">
-      <el-table :data="galleryTasks" v-show="isShowGalleryHistory" >
+      <el-table :data="galleryTasks" v-show="isShowGalleryHistory">
 
         <el-table-column type="expand">
           <template #default="props">
@@ -16,13 +16,15 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="名字" width="300">
+        <el-table-column label="名字" width="300vw">
           <template #default="scoped">
-            {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
+            <span @mouseover="showThumbnail(scoped.row)">
+                {{showNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
+            </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="操作" width="250">
+        <el-table-column label="操作" width="300vw">
           <template #default="scoped">
             <span>
               <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.download === undefined">下载</el-button>
@@ -248,10 +250,15 @@ export default {
       window.open("http://zfile.lionwebsite.xyz/1/video/")
     }
 
+    function showThumbnail(gallery){
+      if(gallery.download !== undefined)
+        store.commit("_changeThumbnailGallery", gallery)
+    }
+
     return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
             isShowGalleryHistory, showType, showNameType, sortType,
             reverseEditMode, changePage, changeShowType, changeShowNameType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
-            deleteVideo, onlineGalleryReader, onlineVideoViewer,
+            deleteVideo, onlineGalleryReader, onlineVideoViewer, showThumbnail,
             store
     }
   }

src/store/index.js

@@ -432,12 +432,17 @@ const mutations = {
     },
     _setMaskDomain(state, maskDomain){
         state.maskDomain = maskDomain
+    },
+    _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,                      //准备下载的视频