lionwebsite-frontend-desktop/src/components/Side.vue

<template>
  <div class="side" style="width: 100%">
    <div  v-show="loadComplete" class="load_complete">
      <el-table :data="currentTasks"
                :empty-text="emptyText"
                :row-key="gallery=>gallery.gid"
                class="table"
                @cellMouseEnter="showThumbnail"
      >

        <el-table-column type="expand">
          <template #default="props">
            名字:{{ props.row.name}} <br>
            链接:<el-link :href="props.row.link">链接</el-link> <br>
            语言:{{props.row.language}} <br>
            页数:{{props.row.pages}} <br>
            文件大小:{{props.row.fileSize}}<br>
            分辨率:{{props.row.resolution}}<br>
            任务创建时间:{{props.row.createTimeDisplay}}<br>
            <span v-show="isLion">
              downloader:{{props.row.downloader}}
            </span>

            <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.status !== '下载完成'">删除</el-button>
          </template>
        </el-table-column>

        <el-table-column label="名字" width="300vw">
          <template #default="scoped">
            {{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300vw">
          <template #default="scoped">
            <span>
              <el-button @click="downloadTask(scoped.row.download)" :disabled="scoped.row.status !== '下载完成'">下载</el-button>
              <el-button @click="changeGalleryCollect(scoped.row.gid, scoped.row.isCollect)">{{scoped.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
              <el-button @click="readOnlineGallery(scoped.row)">在线看</el-button>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="进度" width="80">
          <template #default="scoped">
            {{ scoped.row.progress }}
          </template>
        </el-table-column>
      </el-table>
      <el-row class="pageChanger">
        <el-col v-if="username !== 'test'">
          <el-select v-model="category" @change="changeCategory">
            <template #prefix>
              分类
            </template>
                <el-option value="myCollect" label="我的收藏"/>
                <el-option value="myDownload" label="我的下载"/>
                <el-option value="total" label="全部"/>
              </el-select>
          <el-select v-model="sortType" @change="changeSortType" style="width: 170px">
              <template #prefix>
                排序
              </template>
                <el-option value="name" label="名字"/>
                <el-option value="shortName" label="简洁名字"/>
                <el-option value="createTime" label="任务创建时间"/>
              </el-select>
          <el-select v-model="galleryNameType" @change="changeGalleryNameType">
              <template #prefix>
                显示
              </template>
                  <el-option value="name" label="名字"/>
                  <el-option value="shortName" label="简洁名字"/>
              </el-select>
        </el-col>
        <el-col>
          <el-button @click="toMin">{{min}}</el-button>
          <el-button @click="previous">-</el-button>
          <el-input v-model="targetPage"
                    @change="changePage"
                    v-show="isEditingPage"
                    @blur="reverseEditMode"
                    class="page"
                    ref="inputNode"></el-input>
          <span @click="reverseEditMode" v-show="!isEditingPage" class="page">{{page}}</span>
          <el-button @click="next">+</el-button>
          <el-button @click="toMax">{{max}}</el-button>
        </el-col>
      </el-row>
    </div>
    <OnlineReader/>

    <span v-show="!loadComplete" class="side">请输入授权码后再查看</span>
  </div>
</template>

<script setup>
import store from "../store";
import {computed, ref} from "vue";
import OnlineReader from "./OnlineReader.vue";

//输入
let inputNode = ref(null)
//是否正在编辑页数
let isEditingPage = ref(false)

let category = computed(() => {
  return store.state.category
})
let galleryNameType = computed(() => {
  return store.state.galleryNameType
})
let sortType = computed(() => {
  return store.state.sortType
})
let targetPage = ref(1)                     // 当前页数
let username = computed(() => {
  return store.state.username
})

//防抖计时器
let debounceTimer = 0
//是否加载完成
let loadComplete = computed(() => {
  return store.state.loadComplete
})

let currentTasks = computed(() => {
  return store.getters.currentTasks ? store.getters.currentTasks: null
})

let min = computed(() => {
  return store.getters.min
})
let max = computed(() => {
  if(targetPage.value > store.getters.max)
    store.commit("_changePage", store.getters.max)
  return store.getters.max
})
let page = computed(() => {
  targetPage.value = store.state.page
  return store.state.page
})
let isLion = computed(() => {
  return store.state.userId === 3
})

let emptyText = computed(() => {
  let action = category.value === 'myDownload' ? '下载': '收藏'
  return '您未' + action + "过"
})

//翻页
function next() {
  if(targetPage.value < max.value) {
    targetPage.value++
    store.commit("_changePage", targetPage.value)
  }
}
function previous() {
  if(targetPage.value > min.value) {
    targetPage.value--
    store.commit("_changePage", targetPage.value)
  }
}
function toMax() {
  store.commit("_changePage", max.value)
  targetPage.value = max.value
}
function toMin(){
  store.commit("_changePage", min.value)
  targetPage.value = min.value
}
function changePage(){
  if(targetPage.value >= min.value && targetPage.value <= max.value)
    store.commit("_changePage", targetPage.value)
}
function reverseEditMode(){
  isEditingPage.value = !isEditingPage.value
  if(isEditingPage.value){
    inputNode.value.focus()
  }
  targetPage.value = page.value
}

//改变展示类型
function changeCategory(value){
  store.commit("_setCategory", value)
}
function changeGalleryNameType(){
  store.commit("_setShowNameType", galleryNameType.value)
}
function changeSortType(){
  store.commit("_setSortType", sortType.value)
}

//收藏
function changeGalleryCollect(gid, isCollect){
  if(isCollect)
    store.dispatch("disCollectGallery", gid)
  else
    store.dispatch("collectGallery", gid)
}

//下载，删除，在线看
function downloadTask(link){
  window.open(link)
}
function deleteGallery(gid){
  store.dispatch("deleteGallery", gid)
}
function readOnlineGallery(gallery){
  store.dispatch("readOnlineGallery", gallery)
}

//显示缩略图
function showThumbnail(gallery){
  if(gallery.status === "下载完成" && 'thumb_link' in gallery) {
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
      store.commit("_changeThumbnailGallery", gallery)
    }, 500)
  }
}
</script>

<style>
  .side{
    text-align: center;
    height: 300px;
  }
  span{
    display: block;
  }
  .pageChanger{
    margin-top: 5vh;
  }
  .el-select{
    width: 135px;
  }
  .page{
    display: inline-block;
    width: 50px;
  }
</style>