lion/lionwebsite-frontend-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对调主页跟侧边栏，优化界面

Browse Source
This commit is contained in:
chuzhongzai 2023-08-27 15:40:36 +08:00
parent 128fe31fe8
commit 853ed0c2f2
5 changed files with 213 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -8,10 +8,10 @@ import DashBoard from "./components/DashBoard.vue";
<template> <template>
<div class="app"> <div class="app">
<el-container> <el-container>
<DashBoard/>
<main>
<Side/> <Side/>
<el-main> </main>
<DashBoard/>
</el-main>
</el-container> </el-container>
</div> </div>
</template> </template>

35
src/components/DashBoard.vue
View File

@ -1,35 +1,19 @@
<template> <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> <span>E站额度本周已用:{{weekUsed.weekUsedAmount}} <br>上次重置时间:{{weekUsed.lastResetAmountTime}}</span><br>
<el-button @click="queryWeekUsedAmount">查询用量</el-button> <el-button @click="queryWeekUsedAmount">查询用量</el-button>
<hr> <hr>
<el-row> <el-row>
<el-col> <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'"> <el-input style="width: 200px;" v-model="param" v-if="type !== 'tag'">
<template #prepend> <template #prepend>
参数: 链接:
</template> </template>
</el-input> </el-input>
<div v-if="type === 'tag'"> <el-button @click="queryRemoteTask" v-show="type === 'link'">解析链接</el-button>
<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-col> </el-col>
</el-row> </el-row>
<hr> <hr>
<el-button @click="openPanel">打开面板</el-button>
<el-button @click="isQuerying = true">里站搜索</el-button> <el-button @click="isQuerying = true">里站搜索</el-button>
<el-button @click="isAlterAuthCode = true">修改授权码</el-button> <el-button @click="isAlterAuthCode = true">修改授权码</el-button>
<el-button @click="deleteAuthCode">删除本地授权码</el-button> <el-button @click="deleteAuthCode">删除本地授权码</el-button>
@ -50,7 +34,7 @@
style="height: 30vh" fit="contain"/> style="height: 30vh" fit="contain"/>
</picture> </picture>
</div> </div>
</div> </el-drawer>
<el-dialog title="查询本子" v-model="chosenGallery" width="100%"> <el-dialog title="查询本子" v-model="chosenGallery" width="100%">
<table> <table>
@ -530,6 +514,11 @@ function dark(){
html.classList.add('dark') html.classList.add('dark')
document.querySelector(".DashBoard").style.setProperty("background-color", null) document.querySelector(".DashBoard").style.setProperty("background-color", null)
document.querySelector(".app").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(){ function light(){
let html = document.querySelector("html") let html = document.querySelector("html")
@ -538,6 +527,11 @@ function light(){
document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite") document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
document.querySelector(".app").style.setProperty("background-color", "#c6e2ff") 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(){ function saveConfig(){
if(darkConfig.value.customTime) { if(darkConfig.value.customTime) {
@ -570,7 +564,6 @@ function saveConfig(){
.validate{ .validate{
width: 50vw; width: 50vw;
background-color: ghostwhite;
display: block; display: block;
padding-top: 200px; padding-top: 200px;
padding-left: 20vw; padding-left: 20vw;

38
src/components/HentaiSearch.vue
View File

@ -14,6 +14,7 @@ let queryPage = ref({})
let galleries = ref([]) let galleries = ref([])
let param = ref() let param = ref()
let isShowUp = ref() let isShowUp = ref()
let isLoading = ref()
watch(props, () => { watch(props, () => {
isShowUp.value = props.isQuerying isShowUp.value = props.isQuerying
}) })
@ -27,11 +28,11 @@ function queryGalleries(link){
tempParam = keyword.value tempParam = keyword.value
} }
tempParam = tempParam.replace(" ", "+") tempParam = tempParam.replace(" ", "+")
document.getElementById("loading").style.display = "inline-block"; isLoading = true
axios.get("https://downloader.lionwebsite.xyz/query?keyword=" + tempParam) axios.get("https://downloader.lionwebsite.xyz/query?keyword=" + tempParam)
.then((res) => { .then((res) => {
document.getElementById("loading").style.display = "none"; isLoading = false
if (res.data.result === "success") { if (res.data.result === "success") {
let tempGalleries = JSON.parse(res.data.data) let tempGalleries = JSON.parse(res.data.data)
queryPage.value.first = 'first' in res.data ? res.data.first : undefined queryPage.value.first = 'first' in res.data ? res.data.first : undefined
@ -74,23 +75,42 @@ function coverLink(rawLink){
function close(){ function close(){
emit("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> </script>
<template> <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"> <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> </div>
<el-scrollbar height="65vh" ref="scrollBar"> <el-scrollbar height="75vh" ref="scrollBar">
<div style="height: 20vh; width: 100%; border-radius: 5px" v-for="gallery in galleries"> <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', ''),]" <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', '') " :src="'https://downloader.lionwebsite.xyz/GalleryManage/ehThumbnail?path=' + gallery.thumbnailUrl.replace('/t', '') "
style="height:20vh;width:35vw;float: left;" style="height:20vh;width:35vw;float: left;"
fit="contain" fit="contain"
loading="lazy" loading="lazy"
/> />
<div style="font: bold 10px semi-condensed; margin-top: 1vh; padding-left: 40vw; padding-top: 2vw"> <div style="font: bold 16px semi-condensed; height: 25vh; padding-left: 40vw;">
<span>{{gallery.name}}</span><br> <span>{{adjustGalleryName(gallery.name, 80)}}</span><br>
<span>上传时间：{{gallery.uploadTime}}</span><br> <span>上传时间：{{gallery.uploadTime}}</span><br>
<span>页数：{{gallery.page}}</span><br> <span>页数：{{gallery.page}}</span><br>
<span class="ct6">类型：{{gallery.type}}</span><br> <span class="ct6">类型：{{gallery.type}}</span><br>
@ -120,7 +140,7 @@ function close(){
border-top-color: #3498db; border-top-color: #3498db;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
display: none; display: inline-block;
} }
@keyframes spin { @keyframes spin {

2
src/components/OnlineReader.vue
View File

@ -82,7 +82,7 @@ function set_current_page(page){
</script> </script>
<template> <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"> <template #header style="padding-bottom: 0">
在线预览: {{currentGallery.name}} 页数：{{currentGallery.pages}}<br> 在线预览: {{currentGallery.name}} 页数：{{currentGallery.pages}}<br>
<div style="font-size: 3vh; display: inline" v-if="max > 0"> <div style="font-size: 3vh; display: inline" v-if="max > 0">

227
src/components/Side.vue
View File

@ -1,48 +1,50 @@
<template> <template>
<el-drawer v-model="isOpenHistoryPanel" direction="ltr" size="100%" @close="closeHistoryPanel" >
<div class="side"> <div class="side">
<div v-show="loadComplete" class="load_complete"> <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"> <el-scrollbar max-height="80vh">
<template #default="props"> <div v-for="gallery in currentTasks" :style="{'height': '20vh', 'background': isDark() ? '': 'FloralWhite', 'border-radius': '1%',
名字:{{ props.row.name}} <br> 'margin-bottom': '10px'}"
链接:<el-link :href="props.row.link">Link</el-link> <br> @click="viewInfo(gallery)" id="gallery">
语言:{{props.row.language}} <br> <el-image :src="'https://downloader.lionwebsite.xyz/GalleryManage/onlineImage/0?gid=' + gallery.gid"
页数:{{props.row.pages}} <br> style="height: 20vh; width: 35vw; float:left"
文件大小:{{props.row.fileSize}}<br> fit="contain"
分辨率:{{props.row.resolution}}<br> loading="lazy"
任务创建时间:{{props.row.createTimeDisplay}}<br> ></el-image>
标签:{{props.row.tag === '' ? '无': props.row.tag}} <br> <div style="font: bold 16px semi-condensed;">
<span v-show="isLion"> {{adjustGalleryName(gallery.name, 95)}}<br>
downloader:{{props.row.downloader}} 页数:{{gallery.pages}}<br>
语言:{{gallery.language}}
<span v-if="gallery.download !== undefined">
下载进度: {{gallery.progress}}
</span> </span>
</div>
<el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button> </div>
<el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button> </el-scrollbar>
<el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-if="isLion">分享</el-button> <el-col>
<el-button @click="changeGalleryCollect(props.row.gid, props.row.isCollect)" :disabled="props.row.download === undefined">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button> <el-row>
<el-button @click="onlineGalleryReader(props.row)" :disabled="props.row.download === undefined">在线看</el-button> <el-button @click="store.state.isShowHistory = true">三</el-button>
<el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button><br> <el-select style="width: 22vw" v-model="type">
<el-button @click="editGalleryTag(props.row)" :disabled="props.row.download === undefined">编辑标签</el-button> <el-option value="keyword" label="关键字"/>
<el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新本子</el-button> <el-option value="tag" label="标签"/>
</template> </el-select>
</el-table-column> <el-input style="width: 63vw" v-model="param" v-show="type === 'keyword'" placeholder="关键字搜索">
<template #append>
<el-table-column label="名字" width="240px"> <el-button @click="queryLocalTask">搜索</el-button>
<template #default="scoped"> </template>
<span @click="showThumbnail(scoped.row)"> </el-input>
{{galleryNameType === 'shortName' ? scoped.row.shortName: scoped.row.name}} <el-autocomplete v-model="param" :fetch-suggestions="generateQueryTag"
</span> @select="handleQueryTagSelect" placeholder="检索标签"
</template> style="width: 63vw" v-if="type === 'tag'">
</el-table-column> <template #append>
<el-button :disabled="paramForTags.length === 0" @click="removeAllQueryTag">清空tag</el-button>
<el-table-column label="进度" width="55px"> </template>
<template #default="scoped"> </el-autocomplete>
{{ scoped.row.progress }} </el-row>
</template> </el-col>
</el-table-column> <el-tag v-for="tid in paramForTags" closable @close="removeQueryTag(tid)" size="large" style="display: inline-block" v-if="paramForTags.length !== 0">
</el-table> {{store.state.tags.get(tid).tag}}
</el-tag>
<el-row class="pageChanger"> <el-row class="pageChanger">
<el-col> <el-col>
@ -86,7 +88,6 @@
</el-row> </el-row>
</div> </div>
</div> </div>
</el-drawer>
<el-dialog v-model="isEditingTag" title="编辑本子标签" width="100%"> <el-dialog v-model="isEditingTag" title="编辑本子标签" width="100%">
<el-form> <el-form>
@ -104,6 +105,43 @@
</el-form> </el-form>
</el-dialog> </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"/> <OnlineReader :current-gallery="currentGallery" :isOnlineReading="isOnlineReading" @close="isOnlineReading = false"/>
</template> </template>
@ -124,6 +162,8 @@ let isEditingPage = ref(false)
let isEditingTag = ref(false) let isEditingTag = ref(false)
//是否预览本子 //是否预览本子
let isOnlineReading = ref(false) let isOnlineReading = ref(false)
//是否查看详情
let isViewing = ref(false)
//临时变量 //临时变量
let galleryForTag = ref({}) let galleryForTag = ref({})
@ -133,6 +173,13 @@ let galleryNameType = ref("shortName") // shortName name
let sortType = ref("shortName") // shortName name createTime let sortType = ref("shortName") // shortName name createTime
let targetPage = ref(1) // 当前页数 let targetPage = ref(1) // 当前页数
//查询相关
let type = ref("keyword")
let param = ref("")
let paramForTags = ref([]) //tidS
let onlineReadingScrollbar = ref(null) let onlineReadingScrollbar = ref(null)
let loadComplete = computed(() => { let loadComplete = computed(() => {
@ -143,9 +190,6 @@ let currentTasks = computed(() => {
return store.getters.currentTasks ? store.getters.currentTasks: null return store.getters.currentTasks ? store.getters.currentTasks: null
}) })
let isOpenHistoryPanel = computed(() => {
return store.state.isShowHistory
})
//标签 //标签
let tags = computed(() => { let tags = computed(() => {
return store.state.tags return store.state.tags
@ -242,12 +286,10 @@ function querySimilarTag(keyWord, cb){
skip = false skip = false
for(let id of galleryForTag.value.tags) for(let id of galleryForTag.value.tags)
if(id === key) { if(id === key) {
if(!hit && tag.tag === keyWord) //是否命中标签 if (!hit && tag.tag === keyWord) //是否命中标签
hit = true hit = true
skip = true skip = true
break break
}else{
console.log("id:", id, key)
} }
if(skip) if(skip)
continue continue
@ -275,6 +317,58 @@ function handleTagSelect(data){
tagInput.value.blur() 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){ function mark(gid, tid){
store.dispatch("mark", {gid, tid}) store.dispatch("mark", {gid, tid})
} }
@ -293,10 +387,13 @@ function updateGallery(link){
function deleteGallery(gid){ function deleteGallery(gid){
store.dispatch("deleteGallery", gid) store.dispatch("deleteGallery", gid)
} }
function onlineGalleryReader(gallery){ function onlineGalleryReader(){
currentGallery.value = gallery
isOnlineReading.value = true; isOnlineReading.value = true;
} }
function viewInfo(gallery){
currentGallery.value = gallery
isViewing.value = true;
}
function shareGallery(data){ function shareGallery(data){
const {gid, shortName} = data const {gid, shortName} = data
let link let link
@ -315,29 +412,37 @@ function shareGallery(data){
ElMessage(res.data.data) ElMessage(res.data.data)
}) })
} }
//显示缩略图
function showThumbnail(gallery){ function adjustGalleryName(name, length) {
if(gallery.status === "下载完成") { let truncated = '';
store.commit("_changeThumbnailGallery", gallery) let bytesCount = 0;
setTimeout(() => {document.querySelector(".preview > img").click()}, 1)
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 isDark(){
function closeHistoryPanel(){ return document.querySelector('html').classList.contains('dark')
store.commit("_closeHistoryPanel")
} }
</script> </script>
<style scoped> <style scoped>
.side{
text-align: center;
}
span{ span{
display: block; display: block;
} }
.pageChanger{ .pageChanger{
margin-top: 5vh; text-align: center;
} }
.el-select{ .el-select{
width: 135px; width: 135px;