抽取里站搜索为单独组件，翻页时回到顶部（同步更新）调整里站搜索使其界面更大

src/components/DashBoard.vue

@@ -103,35 +103,7 @@
     </el-footer>
   </el-dialog>
 
-  <el-dialog title="里站搜索" v-model="isQuerying" top="0" style="margin-bottom: 0">
+  <HentaiSearch v-model:is-querying="isQuerying"  @close="closeQueryPanel"></HentaiSearch>
-    <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>
 
   <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)
+function closeQueryPanel(){
-      .then((res) => {
+  isQuerying.value = false
-        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 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>

src/components/HentaiSearch.vue

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

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(){
@@ -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">
+  <el-dialog 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">
+    <template #header>
-      {{index + 1}} - {{(index) * lengthPerPage + 1}} ~ {{(index + 1) * lengthPerPage + 1 > currentLinks.length? currentLinks.length: (index + 1) * lengthPerPage + 1}}
+      在线预览
-    </div>
+      <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"/>
       &lt; {{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>

src/store/index.js

@@ -129,8 +129,8 @@ const actions = {
                 //
                 // width = width - (width % 10)
                 //写死图片合适宽度
-                state.imageWidth = 550 + 'px'
+                state.imageWidth = 27 + 'vw'
-                state.imagePadding = 10 + 'px'
+                state.imagePadding = 1 + 'vw'
             }
             else
                 context.commit("_unAuthed")