lion/lionwebsite-frontend-desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
chuzhongzai 2022-10-20 10:06:51 +08:00
parent 9672c045ca
commit 3daff3b8fc
3 changed files with 195 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/DashBoard.vue
View File

@ -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
}
}
}

58
src/components/Side.vue
View File

@ -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;

138
src/store/index.js
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
}
@ -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:[]