对调主页跟侧边栏，优化界面
This commit is contained in:
chuzhongzai
parent
128fe31fe8
commit
853ed0c2f2
@ -8,10 +8,10 @@ import DashBoard from "./components/DashBoard.vue";
|
||||
<template>
|
||||
<div class="app">
|
||||
<el-container>
|
||||
<DashBoard/>
|
||||
<main>
|
||||
<Side/>
|
||||
<el-main>
|
||||
<DashBoard/>
|
||||
</el-main>
|
||||
</main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,35 +1,19 @@
|
||||
<template>
|
||||
<div class="DashBoard" v-show="loadComplete">
|
||||
<el-drawer class="DashBoard" v-model="store.state.isShowHistory" size="90%" direction="ltr">
|
||||
<span>E站额度本周已用:{{weekUsed.weekUsedAmount}} <br>上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
|
||||
<el-button @click="queryWeekUsedAmount">查询用量</el-button>
|
||||
<hr>
|
||||
<el-row>
|
||||
<el-col>
|
||||
查询参数类型: <el-select style="width: 125px" v-model="type" @change="resetLocalQuery()">
|
||||
<el-option value="link" label="链接"/>
|
||||
<el-option value="keyword" label="关键字"/>
|
||||
<el-option value="tag" label="标签"/>
|
||||
</el-select><br>
|
||||
<el-input style="width: 200px;" v-model="param" v-if="type !== 'tag'">
|
||||
<template #prepend>
|
||||
参数:
|
||||
链接:
|
||||
</template>
|
||||
</el-input>
|
||||
<div v-if="type === 'tag'">
|
||||
<el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)">
|
||||
{{store.state.tags.get(tid).tag}}
|
||||
</el-tag>
|
||||
<el-autocomplete v-model="param" :fetch-suggestions="completeQueryTag" @select="handleTagSelect" ref="tagInput" placeholder="检索标签"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-button @click="queryRemoteTask" v-show="type === 'link'">远程查询</el-button>
|
||||
<el-button @click="queryLocalTask">当前页查询</el-button>
|
||||
<el-button @click="removeAllQueryTag" v-show="type === 'tag'">清空查询标签</el-button>
|
||||
<el-button @click="queryRemoteTask" v-show="type === 'link'">解析链接</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<hr>
|
||||
<el-button @click="openPanel">打开面板</el-button>
|
||||
<el-button @click="isQuerying = true">里站搜索</el-button>
|
||||
<el-button @click="isAlterAuthCode = true">修改授权码</el-button>
|
||||
<el-button @click="deleteAuthCode">删除本地授权码</el-button>
|
||||
@ -50,7 +34,7 @@
|
||||
style="height: 30vh" fit="contain"/>
|
||||
</picture>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog title="查询本子" v-model="chosenGallery" width="100%">
|
||||
<table>
|
||||
@ -530,6 +514,11 @@ function dark(){
|
||||
html.classList.add('dark')
|
||||
document.querySelector(".DashBoard").style.setProperty("background-color", null)
|
||||
document.querySelector(".app").style.setProperty("background-color", null)
|
||||
let galleries = document.querySelectorAll("#gallery");
|
||||
for(let gallery of galleries){
|
||||
gallery.style.setProperty("background-color", null)
|
||||
}
|
||||
|
||||
}
|
||||
function light(){
|
||||
let html = document.querySelector("html")
|
||||
@ -538,6 +527,11 @@ function light(){
|
||||
|
||||
document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
|
||||
document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
|
||||
let galleries = document.querySelectorAll("#gallery");
|
||||
if(galleries !== undefined && galleries.length !== 0)
|
||||
for(let gallery of galleries){
|
||||
gallery.style.setProperty("background-color", "FloralWhite")
|
||||
}
|
||||
}
|
||||
function saveConfig(){
|
||||
if(darkConfig.value.customTime) {
|
||||
@ -570,7 +564,6 @@ function saveConfig(){
|
||||
|
||||
.validate{
|
||||
width: 50vw;
|
||||
background-color: ghostwhite;
|
||||
display: block;
|
||||
padding-top: 200px;
|
||||
padding-left: 20vw;
|
||||
|
||||
@ -14,6 +14,7 @@ let queryPage = ref({})
|
||||
let galleries = ref([])
|
||||
let param = ref()
|
||||
let isShowUp = ref()
|
||||
let isLoading = ref()
|
||||
watch(props, () => {
|
||||
isShowUp.value = props.isQuerying
|
||||
})
|
||||
@ -27,11 +28,11 @@ function queryGalleries(link){
|
||||
tempParam = keyword.value
|
||||
}
|
||||
tempParam = tempParam.replace(" ", "+")
|
||||
document.getElementById("loading").style.display = "inline-block";
|
||||
isLoading = true
|
||||
|
||||
axios.get("https://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
|
||||
.then((res) => {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
isLoading = false
|
||||
if (res.data.result === "success") {
|
||||
let tempGalleries = JSON.parse(res.data.data)
|
||||
queryPage.value.first = 'first' in res.data ? res.data.first : undefined
|
||||
@ -74,23 +75,42 @@ function coverLink(rawLink){
|
||||
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" width="100%" class="el-dialogClass" @close="close">
|
||||
<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"/>
|
||||
<el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading" v-if="isLoading"/>
|
||||
</div>
|
||||
<el-scrollbar height="65vh" ref="scrollBar">
|
||||
<div style="height: 20vh; width: 100%; border-radius: 5px" v-for="gallery in galleries">
|
||||
<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.replace('/t', ''),]"
|
||||
:src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl.replace('/t', '') "
|
||||
style="height:20vh;width:35vw;float: left;"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw">
|
||||
<span>{{gallery.name}}</span><br>
|
||||
<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>
|
||||
@ -120,7 +140,7 @@ function close(){
|
||||
border-top-color: #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
display: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
@ -82,7 +82,7 @@ function set_current_page(page){
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0">
|
||||
<el-dialog v-model="isShowUp" @close="closeDialog" width="100%" top="0" fullscreen >
|
||||
<template #header style="padding-bottom: 0">
|
||||
在线预览: {{currentGallery.name}} 页数：{{currentGallery.pages}}<br>
|
||||
<div style="font-size: 3vh; display: inline" v-if="max > 0">
|
||||
|
||||
@ -1,48 +1,50 @@
|
||||
<template>
|
||||
<el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" >
|
||||
<div class="side">
|
||||
<div v-show="loadComplete" class="load_complete">
|
||||
<el-table :data="currentTasks" :empty-text="emptyText" :row-key="gallery=>gallery.gid">
|
||||
|
||||
<el-table-column type="expand" width="25px">
|
||||
<template #default="props">
|
||||
名字:{{ props.row.name}} <br>
|
||||
链接:<el-link :href="props.row.link">Link</el-link> <br>
|
||||
语言:{{props.row.language}} <br>
|
||||
页数:{{props.row.pages}} <br>
|
||||
文件大小:{{props.row.fileSize}}<br>
|
||||
分辨率:{{props.row.resolution}}<br>
|
||||
任务创建时间:{{props.row.createTimeDisplay}}<br>
|
||||
标签:{{props.row.tag === '' ? '无': props.row.tag}} <br>
|
||||
<span v-show="isLion">
|
||||
downloader:{{props.row.downloader}}
|
||||
<el-scrollbar max-height="80vh">
|
||||
<div v-for="gallery in currentTasks" :style="{'height': '20vh', 'background': isDark() ? '': 'FloralWhite', 'border-radius': '1%',
|
||||
'margin-bottom': '10px'}"
|
||||
@click="viewInfo(gallery)" id="gallery">
|
||||
<el-image :src="'https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/0?gid=' + gallery.gid"
|
||||
style="height: 20vh; width: 35vw; float:left"
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
></el-image>
|
||||
<div style="font: bold 16px semi-condensed;">
|
||||
{{adjustGalleryName(gallery.name, 95)}}<br>
|
||||
页数:{{gallery.pages}}<br>
|
||||
语言:{{gallery.language}}
|
||||
<span v-if="gallery.download !== undefined">
|
||||
下载进度: {{gallery.progress}}
|
||||
</span>
|
||||
|
||||
<el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
|
||||
<el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
|
||||
<el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-if="isLion">分享</el-button>
|
||||
<el-button @click="changeGalleryCollect(props.row.gid, props.row.isCollect)" :disabled="props.row.download === undefined">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
|
||||
<el-button @click="onlineGalleryReader(props.row)" :disabled="props.row.download === undefined">在线看</el-button>
|
||||
<el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button><br>
|
||||
<el-button @click="editGalleryTag(props.row)" :disabled="props.row.download === undefined">编辑标签</el-button>
|
||||
<el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新本子</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="名字" width="240px">
|
||||
<template #default="scoped">
|
||||
<span @click="showThumbnail(scoped.row)">
|
||||
{{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="进度" width="55px">
|
||||
<template #default="scoped">
|
||||
{{ scoped.row.progress }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-button @click="store.state.isShowHistory = true">三</el-button>
|
||||
<el-select style="width: 22vw" v-model="type">
|
||||
<el-option value="keyword" label="关键字"/>
|
||||
<el-option value="tag" label="标签"/>
|
||||
</el-select>
|
||||
<el-input style="width: 63vw" v-model="param" v-show="type === 'keyword'" placeholder="关键字搜索">
|
||||
<template #append>
|
||||
<el-button @click="queryLocalTask">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-autocomplete v-model="param" :fetch-suggestions="generateQueryTag"
|
||||
@select="handleQueryTagSelect" placeholder="检索标签"
|
||||
style="width: 63vw" v-if="type === 'tag'">
|
||||
<template #append>
|
||||
<el-button :disabled="paramForTags.length === 0" @click="removeAllQueryTag">清空tag</el-button>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)" size="large" style="display: inline-block" v-if="paramForTags.length !== 0">
|
||||
{{store.state.tags.get(tid).tag}}
|
||||
</el-tag>
|
||||
|
||||
<el-row class="pageChanger">
|
||||
<el-col>
|
||||
@ -86,7 +88,6 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog v-model="isEditingTag" title="编辑本子标签" width="100%">
|
||||
<el-form>
|
||||
@ -104,6 +105,43 @@
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="isViewing" width="100%" top="0" style="padding: 0">
|
||||
<div style="height: 20vh; font: bold 16px semi-expanded">
|
||||
<el-image :src="'https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/0?gid=' + currentGallery.gid"
|
||||
style="float: left; width: 40vw; height: 20vh" fit="contain"
|
||||
:preview-src-list="['https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/1?gid=' + currentGallery.gid,]"></el-image>
|
||||
{{adjustGalleryName(currentGallery.name, 150)}}
|
||||
</div>
|
||||
<div style="font: bold 20px semi-expanded">
|
||||
页数:{{currentGallery.pages}} <br>
|
||||
语言:{{currentGallery.language}} <br>
|
||||
下载时间:{{currentGallery.createTimeDisplay}} <br>
|
||||
大小:{{currentGallery.fileSize}} <br>
|
||||
分辨率:{{currentGallery.resolution}} <br>
|
||||
链接:<a :href="currentGallery.link">link</a> <br>
|
||||
标签:{{currentGallery.tag === '' ? '无': currentGallery.tag}} <br>
|
||||
<span v-show="isLion">
|
||||
downloader:{{currentGallery.downloader}}
|
||||
</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="downloadTask(currentGallery.download)" :disabled="currentGallery.download === undefined"
|
||||
size="large">下载</el-button>
|
||||
<el-button @click="deleteGallery(currentGallery.gid)" :disabled="currentGallery.download === undefined"
|
||||
size="large">删除</el-button>
|
||||
<el-button @click="shareGallery({gid:currentGallery.gid, shortName:currentGallery.shortName + '.zip'})" v-if="isLion"
|
||||
size="large">分享</el-button>
|
||||
<el-button @click="changeGalleryCollect(currentGallery.gid, currentGallery.isCollect)" :disabled="currentGallery.download === undefined"
|
||||
size="large">{{currentGallery.isCollect ? '取消收藏' : '收藏'}}</el-button>
|
||||
<el-button @click="onlineGalleryReader" :disabled="currentGallery.download === undefined"
|
||||
size="large">在线看</el-button>
|
||||
<el-button @click="editGalleryTag(currentGallery)" :disabled="currentGallery.download === undefined"
|
||||
size="large">编辑标签</el-button>
|
||||
<el-button @click="updateGallery(currentGallery.link)" :disabled="currentGallery.download === undefined"
|
||||
size="large">更新本子</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<OnlineReader :current-gallery="currentGallery" :isOnlineReading="isOnlineReading" @close="isOnlineReading = false"/>
|
||||
</template>
|
||||
|
||||
@ -124,6 +162,8 @@ let isEditingPage = ref(false)
|
||||
let isEditingTag = ref(false)
|
||||
//是否预览本子
|
||||
let isOnlineReading = ref(false)
|
||||
//是否查看详情
|
||||
let isViewing = ref(false)
|
||||
|
||||
//临时变量
|
||||
let galleryForTag = ref({})
|
||||
@ -133,6 +173,13 @@ let galleryNameType = ref("shortName") // shortName name
|
||||
let sortType = ref("shortName") // shortName name createTime
|
||||
let targetPage = ref(1) // 当前页数
|
||||
|
||||
|
||||
//查询相关
|
||||
let type = ref("keyword")
|
||||
let param = ref("")
|
||||
let paramForTags = ref([]) //tidS
|
||||
|
||||
|
||||
let onlineReadingScrollbar = ref(null)
|
||||
|
||||
let loadComplete = computed(() => {
|
||||
@ -143,9 +190,6 @@ let currentTasks = computed(() => {
|
||||
return store.getters.currentTasks ? store.getters.currentTasks: null
|
||||
})
|
||||
|
||||
let isOpenHistoryPanel = computed(() => {
|
||||
return store.state.isShowHistory
|
||||
})
|
||||
//标签
|
||||
let tags = computed(() => {
|
||||
return store.state.tags
|
||||
@ -242,12 +286,10 @@ function querySimilarTag(keyWord, cb){
|
||||
skip = false
|
||||
for(let id of galleryForTag.value.tags)
|
||||
if(id === key) {
|
||||
if(!hit && tag.tag === keyWord) //是否命中标签
|
||||
if (!hit && tag.tag === keyWord) //是否命中标签
|
||||
hit = true
|
||||
skip = true
|
||||
break
|
||||
}else{
|
||||
console.log("id:", id, key)
|
||||
}
|
||||
if(skip)
|
||||
continue
|
||||
@ -275,6 +317,58 @@ function handleTagSelect(data){
|
||||
tagInput.value.blur()
|
||||
}
|
||||
|
||||
function generateQueryTag(keyWord, cb){
|
||||
let result = []
|
||||
let hit = false //用于检测是否有重复标签
|
||||
let skip //用于过滤已经有了的标签
|
||||
for(const [key, tag] of store.state.tags){
|
||||
skip = false
|
||||
if(paramForTags.value.length !== 0) {
|
||||
for (let id of paramForTags.value)
|
||||
if (id === key) {
|
||||
if (!hit && tag.tag === keyWord) //是否命中标签
|
||||
hit = true
|
||||
skip = true
|
||||
break
|
||||
}
|
||||
if(skip)
|
||||
continue
|
||||
}
|
||||
if(tag.tag.includes(keyWord))
|
||||
result.push({value: tag.tag, tag:tag})
|
||||
}
|
||||
cb(result)
|
||||
}
|
||||
function removeQueryTag(tid){
|
||||
for (let i=0; i<paramForTags.value.length; i++){
|
||||
if(paramForTags.value[i] === tid){
|
||||
paramForTags.value.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
queryLocalTask()
|
||||
}
|
||||
function removeAllQueryTag(){
|
||||
paramForTags.value.splice(0)
|
||||
queryLocalTask()
|
||||
}
|
||||
function handleQueryTagSelect(data) {
|
||||
console.log(data)
|
||||
paramForTags.value.push(data.tag.id)
|
||||
param.value = ''
|
||||
queryLocalTask()
|
||||
}
|
||||
function queryLocalTask(){
|
||||
switch (type.value){
|
||||
case "keyword":
|
||||
store.commit("_searchLocalByKeyword", param.value)
|
||||
break
|
||||
case "tag":
|
||||
store.commit("_searchLocalByTag", paramForTags.value)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function mark(gid, tid){
|
||||
store.dispatch("mark", {gid, tid})
|
||||
}
|
||||
@ -293,10 +387,13 @@ function updateGallery(link){
|
||||
function deleteGallery(gid){
|
||||
store.dispatch("deleteGallery", gid)
|
||||
}
|
||||
function onlineGalleryReader(gallery){
|
||||
currentGallery.value = gallery
|
||||
function onlineGalleryReader(){
|
||||
isOnlineReading.value = true;
|
||||
}
|
||||
function viewInfo(gallery){
|
||||
currentGallery.value = gallery
|
||||
isViewing.value = true;
|
||||
}
|
||||
function shareGallery(data){
|
||||
const {gid, shortName} = data
|
||||
let link
|
||||
@ -315,29 +412,37 @@ function shareGallery(data){
|
||||
ElMessage(res.data.data)
|
||||
})
|
||||
}
|
||||
//显示缩略图
|
||||
function showThumbnail(gallery){
|
||||
if(gallery.status === "下载完成") {
|
||||
store.commit("_changeThumbnailGallery", gallery)
|
||||
setTimeout(() => {document.querySelector(".preview > img").click()}, 1)
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
//移动端
|
||||
function closeHistoryPanel(){
|
||||
store.commit("_closeHistoryPanel")
|
||||
function isDark(){
|
||||
return document.querySelector('html').classList.contains('dark')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side{
|
||||
text-align: center;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
}
|
||||
.pageChanger{
|
||||
margin-top: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
.el-select{
|
||||
width: 135px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user