抽取里站搜索为单独组件，翻页时回到顶部（同步更新）

src/components/DashBoard.vue

@@ -80,36 +80,7 @@
     </tr>
   </el-dialog>
 
-
+  <HentaiSearch :is-querying="isQuerying" @close="closeQueryPanel"></HentaiSearch>
-  <el-dialog title="里站搜索" v-model="isQuerying" top="0" style="margin-bottom: 0" width="100%" class="el-dialogClass">
-    <div style="text-align: center">
-      <el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
-    </div>
-    <el-scrollbar height="65vh">
-      <div style="height: 20vh; 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:20vh;width:35vw;float: left;"
-                  fit="contain"
-                  loading="lazy"
-        />
-        <div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
-          <span>{{gallery.name}}</span><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: 65%;" @click="param=gallery.link; queryRemoteTask()" type="primary">下载</el-button>
-        </div>
-      </div><br>
-    </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>
 
   <el-dialog title="修改授权码" v-model="isAlterAuthCode" width="100%">
     <el-form>
@@ -198,6 +169,7 @@ import store from "../store";
 import {computed, ref, onMounted} from "vue";
 import {ElMessage} from "element-plus"
 import axios from "axios";
+import HentaiSearch from "./HentaiSearch.vue";
 
 //授权码相关
 let AuthCode = ref("")
@@ -211,8 +183,6 @@ let isViewingTag = ref(false)
 let isConfig = ref(false)
 let isDark = ref(false)
 let keyword = ref("furry yaoi")
-let galleries = ref([])
-let queryPage = ref({})
 let darkConfig = ref({})
 let lengthPerPage = ref(0)
 
@@ -415,35 +385,8 @@ function resetLocalQuery(){
   store.commit("_searchLocalByTag", [''])
   param.value = ""
 }
-function queryGalleries(link){
+function closeQueryPanel(){
-  let tempParam
+  isQuerying.value = false
-  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"})
-        }
-      })
 }
 
 //删除任务
@@ -627,17 +570,4 @@ function saveConfig(){
     padding-left: 0;
     padding-right: 0;
   }
-  #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>

src/components/HentaiSearch.vue

@@ -0,0 +1,134 @@
+<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)
+          })
+        }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" width="100%" class="el-dialogClass" @close="close">
+    <div style="text-align: center">
+      <el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
+    </div>
+    <el-scrollbar height="65vh" ref="scrollBar">
+      <div style="height: 20vh; 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:20vh;width:35vw;float: left;"
+                  fit="contain"
+                  loading="lazy"
+        />
+        <div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
+          <span>{{gallery.name}}</span><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: 65%;" @click="param=gallery.link; queryRemoteTask()" type="primary">下载</el-button>
+        </div>
+      </div><br>
+    </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>
+</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); }
+}
+
+.el-dialogClass .el-dialog__body{
+  padding-left: 0;
+  padding-right: 0;
+}
+</style>

src/components/OnlineReader.vue

@@ -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(){