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

This commit is contained in:
chuzhongzai 2022-10-20 10:07:39 +08:00
parent 3d57901ea5
commit 67278c0faf
3 changed files with 194 additions and 132 deletions

View File

@ -1,54 +1,69 @@
<template>
<div class="DashBoard" v-show="loadComplete">
<span>E站额度本周已用:{{weekUsed.weekUsedAmount}} 上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
<span>E站额度本周已用:{{weekUsed.weekUsedAmount}} <br>上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
<el-button @click="queryWeekUsedAmount">查询用量</el-button>
<hr>
<el-input v-model="link" placeholder="输入链接"/> <br>
<el-button @click="queryTask">查询任务</el-button>
<el-button @click="searchByLink">查找任务</el-button> <br>
<el-button @click="queryTask">查询远程任务</el-button>
<el-button @click="searchByLink">查找当前页任务</el-button> <br>
<br>
<hr>
<br>
<el-input v-model="keyword" placeholder="输入关键字" @change="searchByKeyword"/>
<el-input v-model="keyword" placeholder="输入关键字" @change="searchLocalByKeyword"/>
<br>
<el-button>确定</el-button>
<el-button @click="searchRemoteByKeyword">查找所有任务</el-button>
<el-button @click="searchLocalByKeyword">查找当前页任务</el-button>
<br>
<el-button @click="openPanel">打开面板</el-button>
<el-button @click="closePanel">关闭面板</el-button>
<br>
<el-button @click="deleteAuthCode">删除授权码</el-button>
<el-button @click="showTips=true" type="danger">新增特性</el-button>
</div>
<el-dialog title="查询本子" v-model="preDownloadGallery" width="100">
<el-dialog title="查询本子" v-model="chosenGallery" width="100">
<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" width="100">
<el-dialog title="查询视频" v-model="chosenVideo" width="100">
<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: 25px">
1.查询远程任务的意思是前端直接提交链接给服务器查询这个链接所对应的任务状态平常创建任务点这个而查找当前页任务是指将右边的页面跳转到包含这个任务的页面里<br>
2.查找所有任务跟查询远程任务类似把关键字提交给服务器查询但是只会对应一个任务(对应多个没写一定不是因为我懒)第二个查找当前页任务则是在前端查询到的任务里筛选包含这个关键字的任务<br>
3.左下新增切换排列顺序的功能可以选择按名称/任务创建时间排序(只有正序倒序懒得写了)<br><hr>
本来可以不用这么麻烦的但是之前一直都是把所有任务加载到前端浪费带宽所以现在选择部分加载了按照任务创建时间排序选择最新的40条任务在这之前的任务可以通过查询远程任务/查找所有任务来访问到或者直接去zfile页面找<hr>
然后移动端我是真的不会适配现在这样已经尽力了如果觉得不好用的话还是尽量从电脑下载吧
</el-main>
</el-dialog>
<div class="DashBoard" v-show="!loadComplete">
@ -71,14 +86,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(() => {
@ -137,6 +152,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("请输入授权码后再验证")
@ -158,12 +181,12 @@ export default {
}
}
function searchByKeyword(){
if(timer)
clearTimeout(timer)
timer = setTimeout(() => {
store.dispatch("searchByKeyword", keyword.value)
}, 500)
function searchLocalByKeyword(){
store.dispatch("searchLocalByKeyword", keyword.value)
}
function searchRemoteByKeyword(){
store.dispatch("searchRemoteByKeyword", keyword.value)
}
function coverLink(rawLink){
@ -197,8 +220,8 @@ export default {
store.commit("_closeHistoryPanel")
}
function deleteAuthCode() {
localStorage.clear()
function onlineGalleryReader(name){
window.open("http://zfile.lionwebsite.xyz/1/gallery/" + encodeURI(name))
}
@ -209,25 +232,10 @@ export default {
}
})
return {postTask,
queryTask,
validate,
searchByLink,
searchByKeyword,
modify,
openPanel,
closePanel,
deleteAuthCode,
queryWeekUsedAmount,
link,
loadComplete,
AuthCode,
keyword,
isRemember,
preDownloadGallery,
preDownloadVideo,
targetResolution,
weekUsed
return {postTask, queryTask, validate, searchByLink, searchLocalByKeyword, searchRemoteByKeyword, modify, openPanel, closePanel, onlineGalleryReader,
queryWeekUsedAmount, deleteVideo, deleteGallery,
link, loadComplete, AuthCode, keyword, isRemember, chosenGallery, chosenVideo, targetResolution, weekUsed, showTips,
store
}
}
}

View File

@ -1,30 +1,31 @@
<template>
<el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="150" @close="closeHistoryPanel" :title="showType">
<el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="150" @close="closeHistoryPanel" :title="showType === 'gallery' ? '本子' : '视频'">
<div class="side">
<div v-show="loadComplete" class="load_complete">
<div v-show="loadComplete" class="load_complete">
<el-table :data="galleryTasks" v-show="isShowGalleryHistory">
<el-table-column type="expand">
<el-table-column type="expand" width="25px">
<template #default="props">
名字:{{ props.row.name}} <br>
<!-- 名字:{{ props.row.name}} <br>-->
链接:<el-link :href="props.row.link">Link</el-link> <br>
语言:{{props.row.language}} <br>
页数:{{props.row.pages}} <br>
文件大小:{{props.row.fileSize}}<br>
分辨率:{{props.row.resolution}}<br>
任务创建时间:{{props.row.createTimeDisplay}}<br>
<el-button @click="downloadTask(props.row.download)" :disabled="operational(props.row.download)">下载</el-button>
<el-button @click="deleteGallery(props.row.gid)" :disabled="operational(props.row.download)">删除</el-button>
<el-button @click="onlineGalleryReader(props.row.name)" :disabled="operational(props.row.download)">在线看</el-button>
</template>
</el-table-column>
<el-table-column label="名字" width="200">
<el-table-column label="名字" width="255px">
<template #default="scoped">
{{scoped.row.name}}
</template>
</el-table-column>
<el-table-column label="进度" width="60">
<el-table-column label="进度" width="55px">
<template #default="scoped">
{{ scoped.row.progress }}
</template>
@ -34,12 +35,13 @@
<el-table :data="videoTasks" v-show="isShowVideoHistory">
<el-table-column type="expand">
<template #default="props">
名字:{{props.row.name}} <br>
<!-- 名字:{{props.row.name}} <br>-->
网站:{{props.row.website}} <br>
链接:<el-link :href="props.row.link">链接</el-link> <br>
文件大小:{{props.row.fileSize}} <br>
视频长度:{{props.row.duration}} <br>
分辨率:{{props.row.resolution}} <br>
任务创建时间:{{props.row.createTimeDisplay}}<br>
<el-button @click="downloadTask(props.row.download)" :disabled="operational(props.row.download)">下载</el-button>
<el-button @click="deleteVideo(props.row.id)" :disabled="operational(props.row.download)">删除</el-button>
<el-button @click="onlineVideoViewer()" :disabled="operational(props.row.download)">在线看</el-button>
@ -61,6 +63,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>
@ -73,8 +81,6 @@
<span @click="reverse" v-show="!isEditing" class="page">{{page}}</span>
<el-button @click="next">+</el-button>
<el-button @click="toMax">{{max}}</el-button>
</el-col>
<el-col>
<el-button @click="changeShowType">切换</el-button>
</el-col>
</el-row>
@ -94,7 +100,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)
@ -205,46 +212,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,
isOpenHistoryPanel,
isShowVideoHistory,
isShowGalleryHistory,
showType,
reverse,
changePage,
changeShowType,
closeHistoryPanel,
toMax,
toMin,
previous,
next,
downloadTask,
deleteGallery,
deleteVideo,
onlineGalleryReader,
onlineVideoViewer,
operational,
return {galleryTasks, videoTasks, min, max, targetPage, loadComplete, page, isEditing, inputNode, isShowVideoHistory,
isShowGalleryHistory, showType, sortType, isOpenHistoryPanel,
reverse, changePage, changeShowType, changeSortType, toMax, toMin, previous, next, downloadTask, deleteGallery,
deleteVideo, onlineGalleryReader, onlineVideoViewer, operational, closeHistoryPanel,
store
}
}
@ -261,7 +249,7 @@ export default {
.pageChanger{
position: absolute;
top:88vh;
left: 45px;
left: 30px;
}
.page{
display: inline-block;

View File

@ -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 VideoTaskHandlerUrl = BaseUrl + "VideoManage/"
const GalleryManageUrl = BaseUrl + "GalleryManage/"
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){
context.commit("_searchByKeyword", keyword)
searchLocalByKeyword(context, 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.preDownloadGallery.fileSize = "等待下载完成后再查看"
state.preDownloadGallery.progress = "已提交"
state.totalGalleryTask.push(state.preDownloadGallery)
state.chosenGallery.resolution = data.resolution
state.chosenGallery.fileSize = "等待下载完成后再查看"
state.chosenGallery.createTimeDisplay = "等待下载完成后再查看"
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.preDownloadVideo.fileSize = "下载完成后再查看"
state.preDownloadVideo.duration = "下载完成后再查看"
state.preDownloadVideo.progress = "已提交"
state.totalVideoTask.push(state.preDownloadVideo)
state.chosenVideo.resolution = data.resolution
state.chosenVideo.fileSize = "下载完成后再查看"
state.chosenVideo.duration = "下载完成后再查看"
state.chosenVideo.createTimeDisplay = "下载完成后再查看"
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
},
@ -346,13 +411,13 @@ const mutations = {
const state = {
totalGalleryTask:[], //存放本子数据的数组
preDownloadGallery:false, //准备下载的本子
chosenGallery:false, //准备下载的本子
totalVideoTask:[], //存放视频数据的数组
preDownloadVideo:false, //准备下载的视频
chosenVideo:false, //准备下载的视频
page:1, //当前页数
length:8, //每页能有多少个链接
length:5, //每页能有多少个链接
isAuth:false, //是否授权
AuthCode:'', //授权码
@ -362,6 +427,7 @@ const state = {
searchTask:[], //搜索到的任务
isShowHistory:false, //是否打开面板
showType:"gallery", //展示类型
sortType:"name", //排序类型
weekUsed:{},
maskDomain:[]