lionwebsite-frontend-mobile/src/components/HentaiSearch.vue

<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("https://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
  }
  store.dispatch("queryGalleryTask", param.value)
}

function validateLink(rawLink){
  if(rawLink.trim() === "")
    return false
  if(rawLink.includes("hentai"))
    return rawLink.includes("/g/")
  else
    return false
}

function close(){
  emit("close")
}

function adjustGalleryName(name, length) {
  let truncated = '';
  let bytesCount = 0;

  for (const char of name) {
    const charCode = char.charCodeAt(0);
    const byteLength = charCode < 0x80 ? 1 : charCode < 0x800 ? 2 : 3;

    if (bytesCount + byteLength <= length) {
      truncated += char;
      bytesCount += byteLength;
    } else {
      truncated += "..."
      break;
    }
  }
  return truncated;
}
</script>

<template>
  <el-dialog title="里站搜索" v-model="isShowUp" top="0" style="margin-bottom: 0" fullscreen 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="75vh" ref="scrollBar">
      <div style="height: 20vh; width: 100%; border-radius: 5px; padding-bottom: 2vh" v-for="gallery in galleries">
        <el-image alt="picture" :preview-src-list="['https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl,]"
                  :src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl"
                  style="height:20vh;width:35vw;float: left;"
                  fit="contain"
                  loading="lazy"
        />
        <div style="font: bold 16px semi-condensed; height: 25vh; padding-left: 40vw;">
          <span>{{adjustGalleryName(gallery.name, 80)}}</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-group style=" margin-left: 50%; margin-top: -5vh">
            <el-button @click="store.dispatch('readOnlineGallery', gallery)">在线看</el-button>
            <el-button @click="param=gallery.link; queryRemoteTask()">查看详情</el-button>
          </el-button-group>
        </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>