294 lines
8.5 KiB
Vue
294 lines
8.5 KiB
Vue
<template>
|
|
<div class="side-table-wrapper">
|
|
<div v-show="loadComplete" class="load_complete">
|
|
<el-tag :type="store.state.connectionStatus === 'connected' ? 'success' : 'warning'" role="status">
|
|
{{ {connected: '进度已连接', connecting: '正在连接进度', reconnecting: '连接中断，正在重连', disconnected: '进度连接已断开'}[store.state.connectionStatus] }}
|
|
</el-tag>
|
|
<el-table :data="currentTasks"
|
|
:height="tableHeight"
|
|
:empty-text="emptyText"
|
|
:row-key="gallery=>gallery.gid"
|
|
class="table"
|
|
@cellMouseEnter="showThumbnail"
|
|
>
|
|
|
|
<el-table-column type="expand">
|
|
<template #default="props">
|
|
<div class="detail-info">
|
|
名字:{{ 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>
|
|
</div>
|
|
|
|
<el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.status !== '下载完成'">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="名字" min-width="200">
|
|
<template #default="scoped">
|
|
{{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" width="360">
|
|
<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>
|
|
<el-button v-if="scoped.row.status !== '下载完成'"
|
|
@click="retryGallery(scoped.row.gid)"
|
|
:loading="retryingGids.has(scoped.row.gid)">
|
|
重试
|
|
</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="loading-text">请输入授权码后再查看</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import store from "../store";
|
|
import {computed, ref, watch} 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 retryingGids = ref(new Set())
|
|
//是否加载完成
|
|
let loadComplete = computed(() => {
|
|
return store.state.loadComplete
|
|
})
|
|
|
|
let currentTasks = computed(() => {
|
|
return store.getters.currentTasks ? store.getters.currentTasks: null
|
|
})
|
|
|
|
let tableHeight = computed(() => 'calc(100vh - 130px)')
|
|
|
|
let min = computed(() => {
|
|
return store.getters.min
|
|
})
|
|
let max = computed(() => {
|
|
return store.getters.max
|
|
})
|
|
let page = computed(() => {
|
|
return store.state.page
|
|
})
|
|
let isLion = computed(() => {
|
|
return store.state.userId === 3
|
|
})
|
|
|
|
// 同步 store.page → local targetPage，并在 page 超出 max 时修正
|
|
watch(page, (newPage) => {
|
|
targetPage.value = newPage
|
|
})
|
|
watch(max, (newMax) => {
|
|
if(targetPage.value > newMax)
|
|
store.commit("_changePage", newMax)
|
|
})
|
|
|
|
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(value){
|
|
store.commit("_setGalleryNameType", value)
|
|
}
|
|
function changeSortType(value){
|
|
store.commit("_setSortType", 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)
|
|
}
|
|
async function retryGallery(gid){
|
|
if(retryingGids.value.has(gid))
|
|
return
|
|
retryingGids.value.add(gid)
|
|
try {
|
|
await store.dispatch("retryGallery", gid)
|
|
} finally {
|
|
retryingGids.value.delete(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 scoped>
|
|
.side-table-wrapper {
|
|
height: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading-text {
|
|
display: block;
|
|
text-align: center;
|
|
padding-top: 200px;
|
|
color: var(--text-secondary, #86909c);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pageChanger {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page {
|
|
display: inline-block;
|
|
width: 50px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.detail-info {
|
|
line-height: 1.8;
|
|
}
|
|
.detail-info > span {
|
|
display: block;
|
|
}
|
|
</style>
|