新增按照任务创建时间/名称排序， 默认只加载40个任务，剩下的需要手动查询，移除本地搜索的定时器，新增新特性提示(同步更新)

src/components/DashBoard.vue

@@ -5,47 +5,65 @@
     <hr>
     <el-input v-model="link" placeholder="输入链接"/>
     <br>
-    <el-button @click="queryTask">查询任务</el-button>
-    <el-button @click="searchByLink">查找任务</el-button>
+    <el-button @click="queryTask">查询远程任务</el-button>
+    <el-button @click="searchByLink">查找当前页任务</el-button>
     <br>
     <hr>
     <br>
-    <el-input v-model="keyword" placeholder="输入关键字查找任务" @change="searchByKeyword"/>
+    <el-input v-model="keyword" placeholder="输入关键字"/>
     <br>
-    <el-button>确定</el-button>
+    <el-button @click="searchRemoteByKeyword">查找所有任务</el-button>
+    <el-button @click="searchLocalByKeyword">查找当前页任务</el-button>
+    <hr>
+    <br>
+    <el-button @click="showTips=true" type="danger">新增特性</el-button>
   </div>
 
-  <el-dialog title="查询本子" v-model="preDownloadGallery">
+  <el-dialog title="查询本子" v-model="chosenGallery">
     <table>
-      <tr>本子名字:{{preDownloadGallery.name}}</tr>
-      <tr>本子页数:{{preDownloadGallery.pages}}</tr>
-      <tr>本子语言:{{preDownloadGallery.language}}</tr>
-      <tr>本子大小:{{preDownloadGallery.fileSize}}</tr>
-      <tr>本子状态:{{preDownloadGallery.status}}</tr>
-      <tr v-if="preDownloadGallery.availableResolution">
+      <tr>本子名字:{{chosenGallery.name}}</tr>
+      <tr>本子页数:{{chosenGallery.pages}}</tr>
+      <tr>本子语言:{{chosenGallery.language}}</tr>
+      <tr>本子大小:{{chosenGallery.fileSize}}</tr>
+      <tr>本子状态:{{chosenGallery.status}}</tr>
+      <tr v-if="chosenGallery.availableResolution">
         目标分辨率:<el-select v-model="targetResolution">
-          <el-option v-for="(fileSize, resolution) in preDownloadGallery.availableResolution" :value="resolution"
+          <el-option v-for="(fileSize, resolution) in chosenGallery.availableResolution" :value="resolution"
                      :label="modify(resolution, fileSize)">
           </el-option>
         </el-select>
       </tr>
     </table>
-    <el-button @click="postTask" v-if="preDownloadGallery.availableResolution">下载</el-button>
+    <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="deleteGallery" >删除</el-button>
+    </tr>
   </el-dialog>
 
-  <el-dialog title="查询视频" v-model="preDownloadVideo">
+  <el-dialog title="查询视频" v-model="chosenVideo">
     <table>
-      <tr>视频名字:{{preDownloadVideo.name}}</tr>
-      <tr>视频网站: <el-link :href="preDownloadVideo.website">{{preDownloadVideo.website}}</el-link> </tr>
-      <tr>视频链接: <el-link :href="preDownloadVideo.link">{{preDownloadVideo.link}}</el-link></tr>
-      <tr>视频状态:{{preDownloadVideo.status}}</tr>
-      <tr v-if="!preDownloadVideo.resolution">
+      <tr>视频名字:{{chosenVideo.name}}</tr>
+      <tr>视频网站: <el-link :href="chosenVideo.website">{{chosenVideo.website}}</el-link> </tr>
+      <tr>视频链接: <el-link :href="chosenVideo.link">{{chosenVideo.link}}</el-link></tr>
+      <tr>视频状态:{{chosenVideo.status}}</tr>
+      <tr v-if="!chosenVideo.resolution">
         目标分辨率: <el-select v-model="targetResolution">
-          <el-option v-for="(resolution) in preDownloadVideo.availableResolution" :value="resolution" :label="resolution"/>
+          <el-option v-for="(resolution) in chosenVideo.availableResolution" :value="resolution" :label="resolution"/>
         </el-select>
       </tr>
     </table>
-    <el-button @click="postTask" v-if="!preDownloadVideo.resolution">下载</el-button>
+    <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: 36px">
+      1.查询远程任务的意思是前端直接提交链接给服务器，查询这个链接所对应的任务状态，平常创建任务点这个。而查找当前页任务是指将右边的页面跳转到包含这个任务的页面里<br>
+      2.查找所有任务跟查询远程任务类似，把关键字提交给服务器查询，但是只会对应一个任务。(对应多个没写，一定不是因为我懒)。第二个查找当前页任务则是在前端查询到的任务里筛选包含这个关键字的任务<br>
+      3.左下新增切换排列顺序的功能，可以选择按名称/任务创建时间排序(只有正序，倒序懒得写了)<br><hr>
+      本来可以不用这么麻烦的，但是之前一直都是把所有任务加载到前端，浪费带宽，所以现在选择部分加载了，按照任务创建时间排序选择最新的40条任务，在这之前的任务可以通过查询远程任务/查找所有任务来访问到，或者直接去zfile页面找
+    </el-main>
   </el-dialog>
 
   <div class="DashBoard" v-show="!loadComplete">
@@ -67,14 +85,14 @@ export default {
     const keyword = ref("")
     const isRemember = ref(false)
     const targetResolution = ref("")
-    let timer
+    const showTips = ref(false)
 
-    let preDownloadGallery = computed(() => {
-      return store.state.preDownloadGallery
+    let chosenGallery = computed(() => {
+      return store.state.chosenGallery
     })
 
-    let preDownloadVideo = computed(() => {
-      return store.state.preDownloadVideo
+    let chosenVideo = computed(() => {
+      return store.state.chosenVideo
     })
 
     let maskDomain = computed(() => {
@@ -133,6 +151,14 @@ export default {
       }
     }
 
+    function deleteVideo(){
+      store.dispatch("deleteVideo", chosenVideo.value.id)
+    }
+
+    function deleteGallery(){
+      store.dispatch("deleteGallery", chosenGallery.value.gid)
+    }
+
     function validate(){
       if(AuthCode.value.trim() === ""){
         ElMessage("请输入授权码后再验证")
@@ -153,12 +179,13 @@ export default {
       }
     }
 
-    function searchByKeyword(){
-      if(timer)
-        clearTimeout(timer)
-      timer = setTimeout(() => {
-        store.dispatch("searchByKeyword", keyword.value)
-      }, 500)
+    function searchLocalByKeyword(){
+      console.log(keyword.value)
+      store.dispatch("searchLocalByKeyword",keyword.value)
+    }
+
+    function searchRemoteByKeyword(){
+      store.dispatch("searchRemoteByKeyword", keyword.value)
     }
 
     function coverLink(rawLink){
@@ -184,6 +211,10 @@ export default {
       }
     }
 
+    function onlineGalleryReader(name){
+      window.open("http://zfile.lionwebsite.xyz/1/gallery/" + encodeURI(name))
+    }
+
     onMounted(() => {
       const auth = localStorage.getItem("auth")
       if(auth !== null){
@@ -191,23 +222,11 @@ export default {
       }
     })
 
-    return {postTask,
-            queryTask,
-            validate,
-            searchByLink,
-            searchByKeyword,
-            modify,
-            queryWeekUsedAmount,
-            link,
-            loadComplete,
-            AuthCode,
-            keyword,
-            isRemember,
-            preDownloadGallery,
-            preDownloadVideo,
-            targetResolution,
-            weekUsed,
-            store
+    return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, modify,
+            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader,
+            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed,
+            showTips,
+      store
     }
   }
 }

src/components/Side.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="side" style="width: 100%">
-    <span v-show="loadComplete">{{showType}}历史</span>
+    <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">
@@ -11,7 +11,8 @@
             语言:{{props.row.language}} <br>
             页数:{{props.row.pages}} <br>
             文件大小:{{props.row.fileSize}}<br>
-            分辨率:{{props.row.resolution}}
+            分辨率:{{props.row.resolution}}<br>
+            任务创建时间:{{props.row.createTimeDisplay}}<br>
           </template>
         </el-table-column>
 
@@ -46,6 +47,7 @@
             文件大小:{{props.row.fileSize}} <br>
             视频长度:{{props.row.duration}} <br>
             分辨率:{{props.row.resolution}} <br>
+            任务创建时间:{{props.row.createTimeDisplay}}<br>
           </template>
         </el-table-column>
 
@@ -73,6 +75,12 @@
       </el-table>
 
       <el-row class="pageChanger">
+        <el-col>
+          排列顺序:<el-select v-model="sortType" @change="changeSortType">
+            <el-option value="name" label="名字"></el-option>
+            <el-option value="time" label="任务创建时间"></el-option>
+          </el-select>
+        </el-col>
         <el-col>
           <el-button @click="toMin">{{min}}</el-button>
           <el-button @click="previous">-</el-button>
@@ -106,7 +114,8 @@ export default {
     const isEditing = ref(false)
 
     let inputNode = ref(null)
-    let showType = ref("本子")
+    let showType = ref("gallery")
+    let sortType = ref("name")
 
     let galleryTasks = computed(() => {
       if(store.getters.galleryTasks)
@@ -210,44 +219,27 @@ export default {
     function changeShowType(){
       if(isShowVideoHistory.value){
         store.commit("_setShowType", "gallery")
-        showType.value = "本子"
+        showType.value = "gallery"
       }
       else{
         store.commit("_setShowType", "video")
-        showType.value = "视频"
+        showType.value = "video"
       }
     }
 
+    function changeSortType(sortType){
+      store.commit("_setSortType", sortType)
+    }
+
     function operational(download){
       return download === undefined
     }
 
 
-    return {galleryTasks,
-            videoTasks,
-            min,
-            max,
-            targetPage,
-            loadComplete,
-            page,
-            isEditing,
-            inputNode,
-            isShowVideoHistory,
-            isShowGalleryHistory,
-            showType,
-            reverse,
-            changePage,
-            changeShowType,
-            toMax,
-            toMin,
-            previous,
-            next,
-            downloadTask,
-            deleteGallery,
-            deleteVideo,
-            onlineGalleryReader,
-            onlineVideoViewer,
-            operational,
+    return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
+            isShowGalleryHistory, showType, sortType,
+            reverse, changePage, changeShowType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
+            deleteVideo, onlineGalleryReader, onlineVideoViewer, operational,
             store
     }
   }
@@ -264,8 +256,8 @@ export default {
   }
   .pageChanger{
     position: absolute;
-    top:90vh;
-    left: 150px;
+    top: 85vh;
+    left: 75px;
   }
   .page{
     display: inline-block;