From 281af26d66bf4968641c6200c1a4e52e7761ef1e Mon Sep 17 00:00:00 2001
From: chuzhongzai <njy1822574439@outlook.com>
Date: Wed, 7 Dec 2022 11:17:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E7=BA=BF=E7=BC=A9=E7=95=A5=E5=9B=BE?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88(=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E8=87=B3=E5=90=8D=E5=AD=97=E8=BF=9B=E8=A1=8C=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=EF=BC=8C=E7=82=B9=E5=87=BB=E5=9B=BE=E7=89=87=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7)=E3=80=82=EF=BC=88=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  |  2 +-
 src/components/DashBoard.vue | 35 +++++++++++++++++++++--------------
 src/components/Side.vue      | 17 ++++++++++++-----
 src/store/index.js           |  5 +++++
 4 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2d47c60..0f04584 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue
index 9e0796b..4744ba4 100644
--- a/src/components/DashBoard.vue
+++ b/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
     }
   }
diff --git a/src/components/Side.vue b/src/components/Side.vue
index 301ce0a..65178e4 100644
--- a/src/components/Side.vue
+++ b/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
     }
   }
diff --git a/src/store/index.js b/src/store/index.js
index c25ec9f..28c6e23 100644
--- a/src/store/index.js
+++ b/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,                      //准备下载的视频