新增按照任务创建时间/名称排序， 默认只加载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="queryTask">查询远程任务</el-button>
-    <el-button @click="searchByLink">查找任务</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>本子名字:{{chosenGallery.name}}</tr>
-      <tr>本子页数:{{preDownloadGallery.pages}}</tr>
+      <tr>本子页数:{{chosenGallery.pages}}</tr>
-      <tr>本子语言:{{preDownloadGallery.language}}</tr>
+      <tr>本子语言:{{chosenGallery.language}}</tr>
-      <tr>本子大小:{{preDownloadGallery.fileSize}}</tr>
+      <tr>本子大小:{{chosenGallery.fileSize}}</tr>
-      <tr>本子状态:{{preDownloadGallery.status}}</tr>
+      <tr>本子状态:{{chosenGallery.status}}</tr>
-      <tr v-if="preDownloadGallery.availableResolution">
+      <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>视频名字:{{chosenVideo.name}}</tr>
-      <tr>视频网站: <el-link :href="preDownloadVideo.website">{{preDownloadVideo.website}}</el-link> </tr>
+      <tr>视频网站: <el-link :href="chosenVideo.website">{{chosenVideo.website}}</el-link> </tr>
-      <tr>视频链接: <el-link :href="preDownloadVideo.link">{{preDownloadVideo.link}}</el-link></tr>
+      <tr>视频链接: <el-link :href="chosenVideo.link">{{chosenVideo.link}}</el-link></tr>
-      <tr>视频状态:{{preDownloadVideo.status}}</tr>
+      <tr>视频状态:{{chosenVideo.status}}</tr>
-      <tr v-if="!preDownloadVideo.resolution">
+      <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(() => {
+    let chosenGallery = computed(() => {
-      return store.state.preDownloadGallery
+      return store.state.chosenGallery
     })
 
-    let preDownloadVideo = computed(() => {
+    let chosenVideo = computed(() => {
-      return store.state.preDownloadVideo
+      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(){
+    function searchLocalByKeyword(){
-      if(timer)
+      console.log(keyword.value)
-        clearTimeout(timer)
+      store.dispatch("searchLocalByKeyword",keyword.value)
-      timer = setTimeout(() => {
+    }
-        store.dispatch("searchByKeyword", keyword.value)
+
-      }, 500)
+    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,22 +222,10 @@ export default {
       }
     })
 
-    return {postTask,
+    return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, modify,
-            queryTask,
+            queryWeekUsedAmount, deleteVideo, deleteGallery, onlineGalleryReader,
-            validate,
+            link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed,
-            searchByLink,
+            showTips,
-            searchByKeyword,
-            modify,
-            queryWeekUsedAmount,
-            link,
-            loadComplete,
-            AuthCode,
-            keyword,
-            isRemember,
-            preDownloadGallery,
-            preDownloadVideo,
-            targetResolution,
-            weekUsed,
       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,
+    return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
-            videoTasks,
+            isShowGalleryHistory, showType, sortType,
-            min,
+            reverse, changePage, changeShowType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
-            max,
+            deleteVideo, onlineGalleryReader, onlineVideoViewer, operational,
-            targetPage,
-            loadComplete,
-            page,
-            isEditing,
-            inputNode,
-            isShowVideoHistory,
-            isShowGalleryHistory,
-            showType,
-            reverse,
-            changePage,
-            changeShowType,
-            toMax,
-            toMin,
-            previous,
-            next,
-            downloadTask,
-            deleteGallery,
-            deleteVideo,
-            onlineGalleryReader,
-            onlineVideoViewer,
-            operational,
             store
     }
   }
@@ -264,8 +256,8 @@ export default {
   }
   .pageChanger{
     position: absolute;
-    top:90vh;
+    top: 85vh;
-    left: 150px;
+    left: 75px;
   }
   .page{
     display: inline-block;

src/store/index.js

@@ -2,14 +2,15 @@ import vuex from "vuex"
 import axios from "axios"
 import {ElMessage} from "element-plus"
 import qs from "qs"
+import moment from 'moment'
 const BaseUrl = "http://downloader.lionwebsite.xyz/"
-const GalleryTaskHandlerUrl = BaseUrl + "GalleryManage/"
+const GalleryManageUrl = BaseUrl + "GalleryManage/"
-const VideoTaskHandlerUrl = BaseUrl + "VideoManage/"
+const VideoManageUrl = BaseUrl + "VideoManage/"
 
 const actions = {
     updateGalleryTasks(context){
         const AuthCode = context.state.AuthCode
-        axios.get(GalleryTaskHandlerUrl, {
+        axios.get(GalleryManageUrl, {
             params:{
                 param:"",
                 type:"all",
@@ -27,7 +28,7 @@ const actions = {
     },
     updateVideoTasks(context){
         const AuthCode = context.state.AuthCode
-        axios.get(VideoTaskHandlerUrl, {
+        axios.get(VideoManageUrl, {
             params:{
                 param:"123",
                 type:"all",
@@ -43,14 +44,14 @@ const actions = {
         })
     },
     postGalleryTask(context, data){
-        axios.post(GalleryTaskHandlerUrl, qs.stringify({
+        axios.post(GalleryManageUrl, qs.stringify({
             AuthCode:context.state.AuthCode,
             link:data.link,
             targetResolution:data.targetResolution
         })).then((res) => {
             if(res.data.result === "success") {
                 ElMessage("提交成功")
-                context.commit("_setPreDownloadGallery", {gallery:false, resolution:data.targetResolution})
+                context.commit("_setChosenGallery", {gallery:false, resolution:data.targetResolution})
             }
             else{
                 if(res.data.data)
@@ -62,14 +63,14 @@ const actions = {
         })
     },
     postVideoTask(context, data){
-        axios.post(VideoTaskHandlerUrl, qs.stringify({
+        axios.post(VideoManageUrl, qs.stringify({
             AuthCode:context.state.AuthCode,
             link: data.link,
             targetResolution: data.targetResolution
         })).then((res) => {
             if(res.data.result === "success") {
                 ElMessage("提交成功")
-                context.commit("_setPreDownloadVideo", {video:false, resolution:data.targetResolution})
+                context.commit("_setChosenVideo", {video:false, resolution:data.targetResolution})
             }
             else{
                 if(res.data.data)
@@ -82,7 +83,7 @@ const actions = {
     },
     queryGalleryTask(context, link){
         const AuthCode = context.state.AuthCode
-        axios.get(GalleryTaskHandlerUrl, {
+        axios.get(GalleryManageUrl, {
             params:{
                 param:link,
                 type:'link',
@@ -91,7 +92,7 @@ const actions = {
         }).then((res) => {
             if(res.data.result === 'success'){
                 const gallery = JSON.parse(res.data.data)
-                context.commit("_setPreDownloadGallery", {gallery})
+                context.commit("_setChosenGallery", {gallery})
             }
             else
                 ElMessage("查询失败")
@@ -99,7 +100,7 @@ const actions = {
     },
     queryVideoTask(context, link){
         const AuthCode = context.state.AuthCode
-        axios.get(VideoTaskHandlerUrl, {
+        axios.get(VideoManageUrl, {
             params:{
                 param: link,
                 type:"link",
@@ -108,7 +109,7 @@ const actions = {
         }).then((res) => {
             if(res.data.result === 'success'){
                 const video = JSON.parse(res.data.data)
-                context.commit("_setPreDownloadVideo", {video})
+                context.commit("_setChosenVideo", {video})
             }
             else
                 ElMessage("查询失败")
@@ -145,13 +146,14 @@ const actions = {
         })
     },
     loadWeekUsedAmount(context){
-        axios.get(GalleryTaskHandlerUrl + "weekUsedAmount", {
+        axios.get(GalleryManageUrl + "weekUsedAmount", {
             params: {
                 AuthCode: context.state.AuthCode
             }
         }).then((res) => {
             if(res.data.result === "success"){
                 context.state.weekUsed = JSON.parse(res.data.data)
+                ElMessage("查询用量成功")
             }else{
                 ElMessage("查询用量失败")
             }
@@ -160,11 +162,43 @@ const actions = {
     searchByLink(context, link){
         context.commit("_searchByLink", link)
     },
-    searchByKeyword(context, keyword){
+    searchLocalByKeyword(context, keyword){
-        context.commit("_searchByKeyword", keyword)
+        context.commit("_searchLocalByKeyword", keyword)
+    },
+    searchRemoteByKeyword(context, keyword){
+        if(context.state.showType === "gallery"){
+            axios.get(GalleryManageUrl, {
+                params:{
+                    type:"name",
+                    param:keyword
+                }
+            }).then((res) => {
+                if(res.data.result === 'success'){
+                    context.commit("_setChosenGallery", {'gallery':JSON.parse(res.data.data)})
+                }
+                else{
+                    ElMessage(res.data.data)
+                }
+            })
+        }
+        else{
+            axios.get(VideoManageUrl, {
+                params:{
+                    type:"name",
+                    param:keyword
+                }
+            }).then((res) => {
+                if(res.data.result === 'success'){
+                    context.commit("_setChosenVideo", {'video': JSON.parse(res.data.data)})
+                }
+                else{
+                    ElMessage(res.data.data)
+                }
+            })
+        }
     },
     deleteGallery(context, gid){
-        axios.delete(GalleryTaskHandlerUrl, {
+        axios.delete(GalleryManageUrl, {
             params:{
                 AuthCode:state.AuthCode,
                 gid
@@ -179,7 +213,7 @@ const actions = {
         })
     },
     deleteVideo(context, id){
-        axios.delete(VideoTaskHandlerUrl, {
+        axios.delete(VideoManageUrl, {
             params:{
                 AuthCode:state.AuthCode,
                 id
@@ -220,10 +254,17 @@ const mutations = {
                     if(url.host === mask['raw'])
                         tempLink = task.link.replace(mask['raw'], mask['mask'])
                 })
-                task.download = GalleryTaskHandlerUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
+                task.download = GalleryManageUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
             }
+            task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
             state.totalGalleryTask.push(task)
         })
+        state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
+            if(state.sortType === 'name')
+                return before.name > after.name ? 1: -1
+            else
+                return before.createTime - after.createTime
+        })
         if(state.isAuth && !state.loadComplete){
             state.loadComplete = true
             ElMessage("加载完成")
@@ -240,10 +281,17 @@ const mutations = {
                     if(url.host === mask['raw'])
                         tempLink = task.link.replace(mask['raw'], mask['mask'])
                 })
-                task.download = VideoTaskHandlerUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
+                task.download = VideoManageUrl + "file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
+                task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
             }
             state.totalVideoTask.push(task)
         })
+        state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
+            if(state.sortType === 'name')
+                return before.name > after.name ? 1: -1
+            else
+                return before.createTime - after.createTime
+        })
     },
     _changePage(state, targetPage){
         state.page = targetPage
@@ -282,7 +330,7 @@ const mutations = {
             ElMessage("已跳转到该任务所在页数")
         }
     },
-    _searchByKeyword(state, keyword){
+    _searchLocalByKeyword(state, keyword){
         state.searchTask.splice(0)
         state.page = 1
         let tasks
@@ -311,28 +359,45 @@ const mutations = {
                 arr.splice(index, 1)
         })
     },
-    _setPreDownloadGallery(state,data){
+    _setChosenGallery(state,data){
         if(data.gallery === false) {
-            state.preDownloadGallery.resolution = data.resolution
+            state.chosenGallery.resolution = data.resolution
-            state.preDownloadGallery.fileSize = "等待下载完成后再查看"
+            state.chosenGallery.fileSize = "等待下载完成后再查看"
-            state.preDownloadGallery.progress = "已提交"
+            state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
-            state.totalGalleryTask.push(state.preDownloadGallery)
+            state.chosenGallery.progress = "已提交"
+            state.totalGalleryTask.push(state.chosenGallery)
         }
-        state.preDownloadGallery = data.gallery
+        state.chosenGallery = data.gallery
     },
-    _setPreDownloadVideo(state,data){
+    _setChosenVideo(state,data){
         if(data.video === false) {
-            state.preDownloadVideo.resolution = data.resolution
+            state.chosenVideo.resolution = data.resolution
-            state.preDownloadVideo.fileSize = "下载完成后再查看"
+            state.chosenVideo.fileSize = "下载完成后再查看"
-            state.preDownloadVideo.duration = "下载完成后再查看"
+            state.chosenVideo.duration = "下载完成后再查看"
-            state.preDownloadVideo.progress = "已提交"
+            state.chosenVideo.createTimeDisplay = "下载完成后再查看"
-            state.totalVideoTask.push(state.preDownloadVideo)
+            state.chosenVideo.progress = "已提交"
+            state.totalVideoTask.push(state.chosenVideo)
         }
-        state.preDownloadVideo = data.video
+        state.chosenVideo = data.video
     },
     _setShowType(state, showType){
         state.showType = showType
     },
+    _setSortType(state, sortType){
+        state.sortType = sortType
+        state.totalGalleryTask =  state.totalGalleryTask.sort((before, after) => {
+            if(sortType === 'name')
+                return before.name > after.name ? 1: -1
+            else
+                return before.createTime - after.createTime
+        })
+        state.totalVideoTask = state.totalVideoTask.sort((before, after) => {
+            if(sortType === 'name')
+                return before.name > after.name ? 1: -1
+            else
+                return before.createTime - after.createTime
+        })
+    },
     _setMaskDomain(state, maskDomain){
         state.maskDomain = maskDomain
     }
@@ -340,10 +405,10 @@ const mutations = {
 
 const state = {
     totalGalleryTask:[],                   //存放本子数据的数组
-    preDownloadGallery:false,              //准备下载的本子
+    chosenGallery:false,              //准备下载的本子
 
     totalVideoTask:[],                      //存放视频数据的数组
-    preDownloadVideo:false,                 //准备下载的视频
+    chosenVideo:false,                 //准备下载的视频
 
     page:1,                                 //当前页数
     length:8,                               //每页能有多少个链接
@@ -355,7 +420,8 @@ const state = {
     isInclude:false,                        //是否搜索到任务
     searchTask:[],                          //搜索到的任务
     showHistory:'',                         //是否打开面板
-    showType:"gallery",                     //展示类型
+    showType:'gallery',                     //展示类型
+    sortType:'name',                        //排序类型
     weekUsed:{},
 
     maskDomain:[]