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

<template>
  <div class="DashBoard" v-show="loadComplete">

    <el-input v-model="link" placeholder="输入链接"/> <br>

    <el-button @click="queryTask">查询任务</el-button>
    <el-button @click="searchByLink">查找任务</el-button> <br>

    <br>
    <hr>
    <br>

    <el-input v-model="keyword" placeholder="输入关键字" @change="searchByKeyword"/>
    <br>
        <el-button>确定</el-button>
    <br>
      <el-button @click="openPanel">打开面板</el-button>
      <el-button @click="closePanel">关闭面板</el-button>
    <br>
    <el-button @click="deleteAuthCode">删除授权码</el-button>
  </div>

  <el-dialog title="查询本子" v-model="preDownloadGallery" width="100">
    <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="postTask" v-if="preDownloadGallery.availableResolution">下载</el-button>
  </el-dialog>
  <el-dialog title="查询视频" v-model="preDownloadVideo" width="100">
    <table>
      <tr>视频名字:{{preDownloadVideo.name}}</tr>
      <tr>视频网站: <el-link :href="preDownloadVideo.website">{{preDownloadVideo.website}}</el-link> </tr>
      <tr>视频链接: <el-link :href="preDownloadVideo.link">{{preDownloadVideo.link}}</el-link></tr>
      <tr>视频状态:{{preDownloadVideo.status}}</tr>
      <tr v-if="!preDownloadVideo.resolution">
        目标分辨率: <el-select v-model="targetResolution">
        <el-option v-for="(resolution) in preDownloadVideo.availableResolution" :value="resolution" :label="resolution"/>
      </el-select>
      </tr>
    </table>
    <el-button @click="postTask" v-if="!preDownloadVideo.resolution">下载</el-button>
  </el-dialog>

  <div class="DashBoard" v-show="!loadComplete">
      <el-input v-model="AuthCode" class="validate" placeholder="请输入授权码">
      </el-input>
      <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox><br>
      <el-button @click="validate" type="primary" @keydown.enter="validate">验证</el-button>
  </div>
</template>

<script>
import store from "../store";
import {computed, ref, onMounted} from "vue";
import {ElMessage} from "element-plus"
export default {
  name: "DashBoard",
  setup(){
    const link = ref("")
    const AuthCode = ref("")
    const keyword = ref("")
    const isRemember = ref(false)
    const targetResolution = ref("")
    let timer

    let preDownloadGallery = computed(() => {
      return store.getters.preDownloadGallery
    })

    let preDownloadVideo = computed(() => {
      return store.getters.preDownloadVideo
    })

    const loadComplete = computed(() => {
      return store.getters.loadComplete
    })

    function modify(str1, str2){
      return str1 + "   " + str2
    }

    function postTask(){
      if(!validateLink(link.value)){
        ElMessage("链接错误")
        return
      }
      if(targetResolution.value === ''){
        ElMessage("请选择分辨率再提交")
        return
      }
      let tempLink = coverLink(link.value)
      if(link.value.includes("hentai")) {
        store.dispatch("postGalleryTask", {link: tempLink, targetResolution: targetResolution.value})
        targetResolution.value = ""
      }
      else {
        store.dispatch("postVideoTask", {link: tempLink, targetResolution: targetResolution.value})
        targetResolution.value = ""
      }
    }

    function queryTask(){
      if(!validateLink(link.value)){
        ElMessage("链接错误")
        return
      }
      let tempLink
      if(link.value.includes("hentai")) {
        tempLink = coverLink(link.value)
        store.dispatch("queryGalleryTask", tempLink)
      }
      else{
        tempLink = coverLink(link.value)
        store.dispatch("queryVideoTask", tempLink)
      }
    }

    function validate(){
      if(AuthCode.value.trim() === ""){
        ElMessage("请输入授权码后再验证")
      }
      else{
        store.dispatch("validate", AuthCode.value)
        if(isRemember.value)
          localStorage.setItem("auth", AuthCode.value)
      }
    }

    function searchByLink() {
      if(link.value.trim() === ""){
        ElMessage("请输入链接后查找")
      }
      else {
        store.dispatch("searchByLink", link.value)
        openPanel()
      }
    }

    function searchByKeyword(){
      if(timer)
        clearTimeout(timer)
      timer = setTimeout(() => {
        store.dispatch("searchByKeyword", keyword.value)
      }, 500)
    }

    function coverLink(rawLink){
      let tempLink = ""
      if(rawLink.includes("hentai")) {
        if (rawLink.includes("exhentai.org"))
          tempLink = rawLink.replace("exhentai.org", "element-plus.org")
        else if (rawLink.includes("e-hentai.org"))
          tempLink = rawLink.replace("e-hentai.org", "element.org")
      }
      else if(rawLink.includes("xvideos.com") || rawLink.includes("pornhub.com")){
        tempLink = rawLink.replace("xvideos.com", "xiaomi.com").
        replace("cn.pornhub.com", "pixiv.com").
        replace("pornhub.com", "pixiv.com")
      }
      return tempLink;
    }

    function validateLink(rawLink){
      if(rawLink.trim() === "")
        return false
      if(rawLink.includes("hentai")){
        return rawLink.includes("/g/")
      }
      else if(rawLink.includes("xvideos.com")){
        return true
      }
      else if(rawLink.includes("pornhub.com")){
        return rawLink.includes("view_video.php")
      }
    }

    function openPanel(){
      store.commit("_openHistoryPanel")
    }

    function closePanel(){
      store.commit("_closeHistoryPanel")
    }

    function deleteAuthCode() {
      localStorage.clear()
    }


    onMounted(() => {
      const auth = localStorage.getItem("auth")
      if(auth !== null){
        store.dispatch("validate", auth)
      }
    })

    return {postTask,
            queryTask,
            validate,
            searchByLink,
            searchByKeyword,
            modify,
            openPanel,
            closePanel,
            deleteAuthCode,
            link,
            loadComplete,
            AuthCode,
            keyword,
            isRemember,
            preDownloadGallery,
            preDownloadVideo,
            targetResolution,
            store
    }
  }
}
</script>

<style scoped>
  .DashBoard{
    width: auto;
    height: 90vh;
    background-color: ghostwhite;
    text-align: center;
  }

  .validate{
    width: auto;
    background-color: ghostwhite;
    display: block;
    padding-left: 100px;
    padding-top: 200px;
  }

  .el-input{
    width: 250px;
  }
</style>