抽取里站搜索为单独组件，翻页时回到顶部（同步更新）调整里站搜索使其界面更大
This commit is contained in:
chuzhongzai
parent
07eb3567b4
commit
de77d812d0
@ -103,35 +103,7 @@
|
||||
</el-footer>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="里站搜索" v-model="isQuerying" top="0" style="margin-bottom: 0">
|
||||
<div style="text-align: center">
|
||||
<el-input v-model="keyword"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
|
||||
</div>
|
||||
<el-scrollbar height="525px">
|
||||
<div style="height: 251px; width: 100%; border-radius: 5px" v-for="gallery in galleries">
|
||||
<el-image alt="picture" :preview-src-list="['http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl,]"
|
||||
:src="'http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl"
|
||||
style="height:250px;width:250px;float: left;"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div style="font: bold 16px semi-condensed; margin-top: 10px; padding-top: 15px; padding-left: 275px">
|
||||
<span>{{gallery.name}}</span><br><br>
|
||||
<span>上传时间：{{gallery.uploadTime}}</span><br>
|
||||
<span>页数：{{gallery.page}}</span><br>
|
||||
<span class="ct6">类型：{{gallery.type}}</span><br>
|
||||
<a :href="gallery.link">链接</a><br>
|
||||
<el-button style="position: relative; margin-left: 80%" @click="param=gallery.link; queryRemoteTask()">下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div style="padding-top: 10px; text-align: center">
|
||||
<el-button @click="queryGalleries(queryPage.first)" :disabled="queryPage.first === undefined">首页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.previous)" :disabled="queryPage.previous === undefined">上一页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.next)" :disabled="queryPage.next === undefined">下一页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.last)" :disabled="queryPage.last === undefined">尾页</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<HentaiSearch v-model:is-querying="isQuerying" @close="closeQueryPanel"></HentaiSearch>
|
||||
|
||||
<el-dialog title="配置" v-model="isConfig">
|
||||
<div>
|
||||
@ -195,6 +167,7 @@ import {computed, ref, onMounted} from "vue";
|
||||
import {ElMessage} from "element-plus"
|
||||
import axios from "axios";
|
||||
import qs from "qs";
|
||||
import HentaiSearch from "./HentaiSearch.vue";
|
||||
|
||||
//授权码相关
|
||||
let AuthCode = ref("")
|
||||
@ -208,8 +181,6 @@ let isViewingTag = ref(false)
|
||||
let isConfig = ref(false)
|
||||
let isDark = ref(false)
|
||||
let keyword = ref("")
|
||||
let galleries = ref([])
|
||||
let queryPage = ref({})
|
||||
let darkConfig = ref({})
|
||||
let lengthPerPage = ref(0)
|
||||
|
||||
@ -306,14 +277,6 @@ function postTask(){
|
||||
}
|
||||
|
||||
//查询任务
|
||||
function queryRemoteTask(){
|
||||
if(!validateLink(param.value)){
|
||||
ElMessage("链接错误")
|
||||
return
|
||||
}
|
||||
let tempLink = coverLink(param.value)
|
||||
store.dispatch("queryGalleryTask", tempLink)
|
||||
}
|
||||
function queryLocalTask(){
|
||||
switch (type.value){
|
||||
case "link":
|
||||
@ -410,35 +373,9 @@ function resetLocalQuery(){
|
||||
store.commit("_searchLocalByKeyword", "")
|
||||
param.value = ""
|
||||
}
|
||||
function queryGalleries(link) {
|
||||
let tempParam
|
||||
if (link !== null) {
|
||||
let url = new URL(link)
|
||||
tempParam = url.search.replace("?f_search=", "")
|
||||
} else {
|
||||
tempParam = keyword.value
|
||||
}
|
||||
tempParam = tempParam.replace(" ", "+")
|
||||
document.getElementById("loading").style.display = "inline-block";
|
||||
|
||||
axios.get("http://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
|
||||
.then((res) => {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
if (res.data.result === "success") {
|
||||
let tempGalleries = JSON.parse(res.data.data)
|
||||
queryPage.value.first = 'first' in res.data ? res.data.first : undefined
|
||||
queryPage.value.previous = 'previous' in res.data ? res.data.previous : undefined
|
||||
queryPage.value.next = 'next' in res.data ? res.data.next : undefined
|
||||
queryPage.value.last = 'last' in res.data ? res.data.last : undefined
|
||||
|
||||
galleries.value.splice(0)
|
||||
tempGalleries.forEach((gallery) => {
|
||||
galleries.value.push(gallery)
|
||||
})
|
||||
} else {
|
||||
ElMessage({message: res.data.data, type: "error"})
|
||||
}
|
||||
})
|
||||
function closeQueryPanel(){
|
||||
isQuerying.value = false
|
||||
}
|
||||
|
||||
function deleteGallery(){
|
||||
@ -603,18 +540,4 @@ function saveConfig(){
|
||||
.el-input{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 2px solid #ccc;
|
||||
border-top-color: #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
131
src/components/HentaiSearch.vue
Normal file
131
src/components/HentaiSearch.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<script setup>
|
||||
|
||||
import {ref, watch} from "vue";
|
||||
import axios from "axios";
|
||||
import {ElMessage} from "element-plus";
|
||||
import store from "../store/index.js";
|
||||
|
||||
let props = defineProps(['isQuerying'])
|
||||
let emit = defineEmits(['close'])
|
||||
let scrollBar = ref()
|
||||
let keyword = ref("")
|
||||
let queryPage = ref({})
|
||||
let galleries = ref([])
|
||||
let param = ref()
|
||||
let isShowUp = ref()
|
||||
|
||||
watch(props, () => {
|
||||
isShowUp.value = props.isQuerying
|
||||
})
|
||||
|
||||
function queryGalleries(link) {
|
||||
let tempParam
|
||||
if (link !== null) {
|
||||
let url = new URL(link)
|
||||
tempParam = url.search.replace("?f_search=", "")
|
||||
} else {
|
||||
tempParam = keyword.value
|
||||
}
|
||||
tempParam = tempParam.replace(" ", "+")
|
||||
document.getElementById("loading").style.display = "inline-block";
|
||||
|
||||
axios.get("http://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
|
||||
.then((res) => {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
if (res.data.result === "success") {
|
||||
let tempGalleries = JSON.parse(res.data.data)
|
||||
queryPage.value.first = 'first' in res.data ? res.data.first : undefined
|
||||
queryPage.value.previous = 'previous' in res.data ? res.data.previous : undefined
|
||||
queryPage.value.next = 'next' in res.data ? res.data.next : undefined
|
||||
queryPage.value.last = 'last' in res.data ? res.data.last : undefined
|
||||
|
||||
galleries.value.splice(0)
|
||||
tempGalleries.forEach((gallery) => {
|
||||
galleries.value.push(gallery)
|
||||
})
|
||||
|
||||
scrollBar.value.setScrollTop(0)
|
||||
} else {
|
||||
ElMessage({message: res.data.data, type: "error"})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function queryRemoteTask(){
|
||||
if(!validateLink(param.value)){
|
||||
ElMessage("链接错误")
|
||||
return
|
||||
}
|
||||
let tempLink = coverLink(param.value)
|
||||
store.dispatch("queryGalleryTask", tempLink)
|
||||
}
|
||||
|
||||
function validateLink(rawLink){
|
||||
if(rawLink.trim() === "")
|
||||
return false
|
||||
if(rawLink.includes("hentai"))
|
||||
return rawLink.includes("/g/")
|
||||
else
|
||||
return false
|
||||
}
|
||||
|
||||
function coverLink(rawLink){
|
||||
return rawLink.replace("exhentai.org", "element-plus.org").replace("e-hentai.org", "element.org");
|
||||
}
|
||||
|
||||
function close(){
|
||||
emit("close")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog title="里站搜索" v-model="isShowUp" top="0" style="margin-bottom: 0" @close="close">
|
||||
<div style="text-align: center">
|
||||
<el-input v-model="keyword"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
|
||||
</div>
|
||||
<el-scrollbar height="75vh" ref="scrollBar">
|
||||
<div style="height: 251px; width: 100%; " v-for="gallery in galleries">
|
||||
<el-image alt="picture" :preview-src-list="['http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl,]"
|
||||
:src="'http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl"
|
||||
style="height:250px;width:250px;float: left;"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div style="font: bold 16px semi-condensed; margin-top: 10px; padding-top: 15px; padding-left: 275px">
|
||||
<span>{{gallery.name}}</span><br><br>
|
||||
<span>上传时间：{{gallery.uploadTime}}</span><br>
|
||||
<span>页数：{{gallery.page}}</span><br>
|
||||
<span class="ct6">类型：{{gallery.type}}</span><br>
|
||||
<a :href="gallery.link">链接</a><br>
|
||||
<el-button style=" margin-left: 80%; margin-top: -5vh" @click="param=gallery.link; queryRemoteTask()">下载</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div style="padding-top: 1vh; text-align: center">
|
||||
<el-button @click="queryGalleries(queryPage.first)" :disabled="queryPage.first === undefined">首页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.previous)" :disabled="queryPage.previous === undefined">上一页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.next)" :disabled="queryPage.next === undefined">下一页</el-button>
|
||||
<el-button @click="queryGalleries(queryPage.last)" :disabled="queryPage.last === undefined">尾页</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-input{
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 2px solid #ccc;
|
||||
border-top-color: #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@ -35,6 +35,7 @@ function jump(targetIndex){
|
||||
links.value = props.currentLinks.slice(targetIndex * lengthPerPage.value, (targetIndex + 1) * lengthPerPage.value)
|
||||
index.value = targetIndex
|
||||
temp_index.value = targetIndex + 1
|
||||
onlineReadingScrollbar.value.setScrollTop(0)
|
||||
}
|
||||
|
||||
function closeDialog(){
|
||||
@ -43,12 +44,15 @@ function closeDialog(){
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog title="在线预览" v-model="isShowUp" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
|
||||
<div style="font-size: 20px; text-align: center; " v-if="max > 0">
|
||||
{{index + 1}} - {{(index) * lengthPerPage + 1}} ~ {{(index + 1) * lengthPerPage + 1 > currentLinks.length? currentLinks.length: (index + 1) * lengthPerPage + 1}}
|
||||
</div>
|
||||
<el-dialog v-model="isShowUp" width="90%" style="margin-top: 0; margin-bottom: 0; padding: 0" @close="closeDialog">
|
||||
<template #header>
|
||||
在线预览
|
||||
<div style="font-size: 3vh; display: inline" v-if="max > 0">
|
||||
{{index + 1}} - {{(index) * lengthPerPage + 1}} ~ {{(index + 1) * lengthPerPage + 1 > currentLinks.length? currentLinks.length: (index + 1) * lengthPerPage + 1}}
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar height="75vh" ref="onlineReadingScrollbar">
|
||||
<el-image v-for="(link, i) in links" :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'ghostwhite'}"
|
||||
<el-image v-for="(link, i) in links" :src="link" :style="{'width': store.state.imageWidth, 'padding-right': store.state.imagePadding, 'background-color': 'gary'}"
|
||||
:preview-src-list="currentLinks" :initial-index="index * lengthPerPage + i" loading="lazy"/>
|
||||
</el-scrollbar>
|
||||
|
||||
@ -68,7 +72,7 @@ function closeDialog(){
|
||||
<el-input-number v-model="temp_index" :min="1" :max="max"/>
|
||||
< {{max}}
|
||||
<el-button @click="jump(index + 1)" :disabled="index === max - 1">下一页</el-button><br>
|
||||
<el-button @click="jump(temp_index - 1)" >跳转</el-button>
|
||||
<el-button @click="jump(temp_index - 1)" size="large">跳转</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
@ -129,8 +129,8 @@ const actions = {
|
||||
//
|
||||
// width = width - (width % 10)
|
||||
//写死图片合适宽度
|
||||
state.imageWidth = 550 + 'px'
|
||||
state.imagePadding = 10 + 'px'
|
||||
state.imageWidth = 27 + 'vw'
|
||||
state.imagePadding = 1 + 'vw'
|
||||
}
|
||||
else
|
||||
context.commit("_unAuthed")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user