加入在线看的跳转按钮,精简代码

This commit is contained in:
emm 2022-08-31 19:11:40 +08:00
parent 749237a02d
commit be43729cd6
4 changed files with 124 additions and 123 deletions

View File

@ -1,7 +1,7 @@
<template>
<div class="app">
<el-container>
<el-aside width="590px">
<el-aside width="700px">
<Side/>
</el-aside>
<el-main>

View File

@ -1,61 +1,39 @@
<template>
<div class="DashBoard" v-show="loadComplete">
<el-row>
<el-col :span="24"> </el-col>
</el-row>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="8">
<el-input v-model="link" placeholder="输入链接"></el-input>
</el-col>
<el-col :span="8"></el-col>
</el-row>
<el-input v-model="link" placeholder="输入链接"/>
<br>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="12">
<el-button @click="post">提交下载</el-button>
<el-button @click="query">查询任务</el-button>
<el-button @click="searchByLink">查找任务</el-button>
</el-col>
<el-col :span="4"></el-col>
</el-row>
<el-button @click="query">查询本子</el-button>
<el-button @click="searchByLink">查找任务</el-button>
<br>
<hr>
<br>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="8">
<el-input v-model="keyword" placeholder="输入关键字" @change="searchByKeyword">
<template #prefix>
输入关键字查找
</template>
</el-input>
</el-col>
<el-col :span="8"></el-col>
</el-row>
<el-input v-model="keyword" placeholder="输入关键字查找任务" @change="searchByKeyword"/>
<br>
<el-row>
<el-col :span="11"></el-col>
<el-col :span="7">
<el-button>确定</el-button>
</el-col>
<el-col :span="6"></el-col>
</el-row>
<el-button>确定</el-button>
</div>
<el-dialog title="查询本子" v-model="preDownloadGallery">
<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">
目标分辨率:<el-select v-model="targetResolution">
<el-option v-for="(fileSize, resolution) in preDownloadGallery.availableResolution" :value="resolution"
:label="modify(resolution, fileSize)">
</el-option>
</el-select>
</tr>
</table>
<el-button @click="post" v-if="preDownloadGallery.availableResolution">下载</el-button>
</el-dialog>
<div class="DashBoard" v-show="!loadComplete">
<el-col :span="15">
<el-input v-model="AuthCode" class="validate">
<template #prefix>
请输入授权码
</template>
</el-input>
<el-checkbox v-model="isRemember" style="margin-left: 180px">是否记住授权码</el-checkbox>
<el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 100px">验证</el-button>
</el-col>
<el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
<el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
<el-button @click="validate" type="primary" @keydown.enter="validate" style="margin-left: 50px">验证</el-button>
</div>
</template>
@ -70,23 +48,35 @@ export default {
const AuthCode = ref("")
const keyword = ref("")
const isRemember = ref(false)
const targetResolution = ref("")
let timer
let preDownloadGallery = computed(() => {
return store.getters.preDownloadGallery
})
const loadComplete = computed(() => {
return store.getters.loadComplete
})
function modify(str1, str2){
return str1 + " " + str2
}
function post(){
if(link.value.trim() === ''){
ElMessage("请输入链接后再提交")
}
if(targetResolution.value === ''){
ElMessage("请选择分辨率再提交")
}
else {
let gid = link.value.split('/')[4]
if (!gid || !link.value.includes("hentai")) {
ElMessage("请检查链接输入是否正确")
}
else
store.dispatch("post", link.value)
store.dispatch("post", {link: link.value, targetResolution: targetResolution.value})
}
}
@ -104,7 +94,8 @@ export default {
}
else{
store.dispatch("validate", AuthCode.value)
localStorage.setItem("auth", AuthCode.value)
if(isRemember.value)
localStorage.setItem("auth", AuthCode.value)
}
}
@ -132,7 +123,21 @@ export default {
}
})
return {post, query, validate, searchByLink, searchByKeyword, link, loadComplete, AuthCode, keyword, isRemember, store}
return {post,
query,
validate,
searchByLink,
searchByKeyword,
modify,
link,
loadComplete,
AuthCode,
keyword,
isRemember,
preDownloadGallery,
targetResolution,
store
}
}
}
</script>
@ -142,13 +147,10 @@ export default {
width: auto;
height: 90vh;
background-color: ghostwhite;
text-align: center;
}
.validate{
width: auto;
background-color: ghostwhite;
display: block;
margin-left: 180px;
margin-top: 200px;
.el-input{
width: 300px;
}
</style>

View File

@ -3,34 +3,41 @@
<span>下载历史</span>
<div v-show="loadComplete" class="load_complete" >
<el-table :data="data">
<el-table-column type="expand">
<template #default="props">
名字:{{ 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}}
文件大小:{{props.row.fileSize}}<br>
分辨率:{{props.row.resolution}}
</template>
</el-table-column>
<el-table-column label="名字" width="300">
<template #default="scoped">
{{scoped.row.name}}
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<el-table-column label="操作" width="250">
<template #default="scoped">
<span v-show="scoped.row.download">
<el-button @click="downloadGallery(scoped.row.download)">下载</el-button>
<el-button @click="deleteGallery(scoped.row.gid)">删除</el-button>
<el-button @click="onlineReader(scoped.row.name)">在线看</el-button>
</span>
</template>
</el-table-column>
<el-table-column label="进度" width="60">
<template #default="scoped">
{{ scoped.row.progress }}
</template>
</el-table-column>
</el-table>
<el-row class="pageChanger">
<el-col>
<el-button @click="toMin">{{min}}</el-button>
@ -114,9 +121,6 @@ export default {
return store.getters.loadComplete
})
function update(){
store.dispatch("update")
}
function changePage(){
if(targetPage.value >= min.value && targetPage.value <= max.value)
@ -139,9 +143,12 @@ export default {
store.dispatch("deleteGallery", gid)
}
function onlineReader(name){
window.open("http://100.42.234.138:8080/1/gallery/" + encodeURI(name))
}
return {update,
data,
return {data,
min,
max,
targetPage,
@ -157,6 +164,7 @@ export default {
next,
downloadGallery,
deleteGallery,
onlineReader,
store
}
}

View File

@ -2,12 +2,12 @@ import vuex from "vuex"
import axios from "axios"
import {ElMessage} from "element-plus"
import qs from "qs"
const base_url = "http://107.189.14.196:8080/TaskHandler/"
const BaseUrl = "http://100.42.234.138:8888/"
const GalleryTaskHandlerUrl = BaseUrl + "GalleryTaskHandler/"
const actions = {
update(context){
const AuthCode = context.state.AuthCode
axios.get(base_url, {
axios.get(GalleryTaskHandlerUrl, {
params:{
param:"",
type:"all",
@ -17,20 +17,23 @@ const actions = {
let temp = []
context.commit("_empty")
JSON.parse(res.data.data).forEach((task) => {
temp.push(JSON.parse(task))
temp.push(task)
})
context.commit("_update", temp)
})
},
post(context, link){
post(context, data){
const AuthCode = context.state.AuthCode
axios.post(base_url, qs.stringify({
AuthCode:AuthCode,
link:link
axios.post(GalleryTaskHandlerUrl, qs.stringify({
AuthCode:AuthCode,
link:data.link,
targetResolution:data.targetResolution
})).then((res) => {
if(res.data.result === "success")
if(res.data.result === "success") {
ElMessage("提交成功")
context.commit("_setPreDownloadGallery", false)
}
else{
if(res.data.data)
ElMessage(res.data.data)
@ -42,7 +45,7 @@ const actions = {
},
query(context, link){
const AuthCode = context.state.AuthCode
axios.get(base_url, {
axios.get(GalleryTaskHandlerUrl, {
params:{
param:link,
type:'link',
@ -51,46 +54,19 @@ const actions = {
}).then((res) => {
if(res.data.result === 'success'){
const gallery = JSON.parse(res.data.data)
let message = "本子名字: " + gallery.name + "<br>"
message += "本子页数: " + gallery.pages + "<br>"
message += "gid: " + gallery.gid + "<br>"
if(gallery.language === "N/A")
message += "语言: 未知<br>"
else
message += "语言: " + gallery.language + "<br>"
message += "大小: " + gallery.fileSize + "<br>"
switch (gallery.status){
case "complete":
message += "状态: 下载完成"
break
case "posted" :
message += "状态: 等待中"
break
case "proceeding":
message += "状态: 下载中"
break
default:
break
}
console.log(gallery)
ElMessage({
dangerouslyUseHTMLString: true,
duration: 5000,
showClose: true,
message
})
context.commit("_setPreDownloadGallery", gallery)
}
else
ElMessage("查询失败")
})
},
validate(context, AuthCode){
axios.post(base_url + "validate?AuthCode=" + AuthCode).then((res)=>{
axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{
if(res.data.result === 'success'){
context.commit("_authed", AuthCode, context)
context.dispatch("update")
context.dispatch("update").then()
setInterval(() => {
context.dispatch("update")
context.dispatch("update").then()
}, 30000)
}
else{
@ -105,7 +81,7 @@ const actions = {
context.commit("_searchByKeyword", keyword)
},
deleteGallery(context, gid){
axios.delete(base_url, {params:{AuthCode:state.AuthCode, gid:gid}}).then((res) => {
axios.delete(GalleryTaskHandlerUrl, {params:{AuthCode:state.AuthCode, gid:gid}}).then((res) => {
if(res.data.result === "success"){
ElMessage("删除成功")
context.commit("_deleteGallery", gid)
@ -122,7 +98,7 @@ const mutations = {
state.totalTask.splice(0)
},
_update(state, tasks){
const download_url = base_url + "file?link="
const download_url = GalleryTaskHandlerUrl + "file?link="
tasks.forEach((task) => {
if(task.status === "posted"){
@ -154,6 +130,7 @@ const mutations = {
state.isAuth = false
state.AuthCode = ""
ElMessage("授权码错误")
localStorage.removeItem("auth")
},
_searchByLink(state, link){
let gid = link.split('/')[4]
@ -185,26 +162,34 @@ const mutations = {
}
},
_deleteGallery(state, gid){
state.totalTask.map((currentValue, index, arr) => {
return currentValue.gid === gid ? null: currentValue
state.totalTask.forEach((item, index, arr) => {
if(item.gid === gid){
arr.splice(index, 1)
}
})
if(state.searchTask.length !== 1){
state.searchTask.map(currentValue => {
return currentValue.gid === gid ? null : currentValue
})
}
},
_setPreDownloadGallery(state,gallery){
state.preDownloadGallery = gallery
},
_openHistoryPanel(state){
state.showHistory = true
},
_closeHistoryPanel(state){
state.showHistory = false
}
}
const state = {
totalTask:[], //存放数据的数组
page:1, //当前页数
length:8, //每页能有多少个链接
isAuth:false, //是否授权
AuthCode:'', //授权码
loadComplete:false, //是否加载完成
isInclude:false, //是否搜索到任务
searchTask:[] //搜索到的任务
totalTask:[], //存放数据的数组
page:1, //当前页数
length:8, //每页能有多少个链接
isAuth:false, //是否授权
AuthCode:'', //授权码
loadComplete:false, //是否加载完成
isInclude:false, //是否搜索到任务
searchTask:[], //搜索到的任务
preDownloadGallery:false, //准备下载的本子
showHistory:false
}
const getters = {
@ -243,6 +228,12 @@ const getters = {
},
loadComplete(state){
return state.loadComplete
},
preDownloadGallery(state){
return state.preDownloadGallery
},
showHistory(state){
return state.showHistory
}
}