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-04-22 21:21:48 +08:00
parent b9608487a1
commit 59ba787609
3 changed files with 120 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -18,6 +18,6 @@ import DashBoard from "./components/DashBoard.vue";
<style>
.app{
background-color: #c6e2ff;
}
</style>

120
src/components/DashBoard.vue
View File

@ -23,6 +23,11 @@
<el-button @click="isQuerying = true">里站搜索</el-button><br><br>
<el-button @click="isAlterAuthCode = true">修改授权码</el-button>
<el-button @click="deleteAuthCode">删除本地授权码</el-button>
<el-button @click="isConfigDarkMode = true">夜间模式配置</el-button>
<span style="display: inline">夜间模式</span>
<el-switch @click="toggleStyle" v-model="isDark">夜间模式</el-switch>
<hr>
<el-button @click="isQuerying = true">里站搜索</el-button>
<br>
<div v-show="thumbnailGallery !== {}">
<span>
@ -63,7 +68,7 @@
<el-input v-model="keyword" style="width: 50vw"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
</div>
<el-scrollbar height="65vh">
<div style="height: 20vh; width: 100%; background-color: #f5f5f5; border-radius: 5px" v-for="gallery in galleries">
<div style="height: 20vh; width: 100%; border-radius: 5px" v-for="gallery in galleries">
<el-image alt="picture" :preview-src-list="['http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl,]"
:src="'http://downloader.lionwebsite.xyz/query/image?path=' + gallery.thumbnailUrl"
style="height:20vh;width:35vw;float: left;"
@ -112,6 +117,19 @@
</el-footer>
</el-dialog>
<el-dialog title="配置夜间模式" v-model="isConfigDarkMode" width="100%">
<span style="display: inline-block">夜间模式跟随系统</span>
<el-switch v-model="darkConfig.followSystem"></el-switch><br>
<span style="display: inline-block">自定义起始时间(精确到分)</span>
<el-switch v-model="darkConfig.customTime"></el-switch><br>
<el-form :disabled="!darkConfig.customTime">
<el-time-picker v-model="darkConfig.startTime" /> ~
<el-time-picker v-model="darkConfig.endTime"/>
</el-form>
<template #footer>
<el-button type="primary" @click="saveDarkConfig">保存</el-button>
</template>
</el-dialog>
<div class="DashBoard" v-show="!loadComplete">
<div class="validate">
@ -132,6 +150,8 @@ import axios from "axios";
let AuthCode = ref("")
let isRemember = ref(false)
let isAlterAuthCode = ref(false)
let isConfigDarkMode = ref(false)
let isDark = ref(false)
let newAuthCode = ref("")
let tempAuthCode = ref("")
@ -139,6 +159,7 @@ let isQuerying = ref(false)
let keyword = ref("furry yaoi")
let galleries = ref([])
let queryPage = ref({})
let darkConfig = ref({})
//查询相关
let type = ref("link")
@ -298,6 +319,13 @@ function deleteAuthCode(){
ElMessage("删除授权码完成")
}
function toggleStyle(){
if(isDark.value)
dark()
else
light()
}
//显示缩略图
function showThumbnail(gallery){
store.commit("_changeThumbnailGallery", gallery)
@ -306,17 +334,105 @@ function showThumbnail(gallery){
onMounted(() => {
const auth = localStorage.getItem("auth")
adjustForStyle()
if(auth !== null){
store.dispatch("validate", auth)
}
})
function adjustForStyle(){
let darkConfigStr = localStorage.getItem("darkConfig")
if(darkConfigStr !== null) {
darkConfig.value = JSON.parse(darkConfigStr)
if (darkConfig.value.followSystem)
if (isSystemDark()) {
dark()
isDark.value = true
}
else {
light()
isDark.value = false
}
if (darkConfig.value.customTime)
if (isDarkTime(darkConfig.value)) {
dark()
isDark.value = true
}
else {
light()
isDark.value = false
}
if(isDark.value)
dark()
else
light()
}else {
light()
darkConfig.value = {'followSystem': false, 'customTime': false}
}
}
function isSystemDark(){
return window.matchMedia('(prefers-color-scheme: dark)').matches
}
function isDarkTime(darkConfig){
let date = new Date()
let startTime = darkConfig.startTime
let endTime = darkConfig.endTime
if(startTime.hour > endTime.hour){ //隔夜 22:00 ~ 8:00
if(date.getHours() > endTime.getHours() && date.getHours() < startTime.getHours()){ // 大于结束时间且小于起始时间 16:00
return false
}else if(date.getHours() === endTime.getHours()){ //22:00 ~ 8:30 8:26
return date.getMinutes() <= endTime.getMinutes();
}else if(date.getHours() === startTime.getHours()){ //22:30 ~ 8:00 22:46
return date.getMinutes() > startTime.getMinutes();
}else
return true
}else{ //不隔夜 00:00 ~ 6:00 22:00 ~ 23:00
if(date.getHours() > endTime.getHours() || date.getHours() < startTime.getHours()){
return false
}else if(date.getHours() === startTime.getHours()){ // 01:30 ~ 06:00 01:32
return date.getMinutes() >= startTime.getMinutes();
}else if(date.getHours() === endTime.getHours()){ // 01:30 ~ 06:30 06:35
return date.getMinutes() <= endTime.getMinutes();
}else
return true
}
}
function dark(){
let html = document.querySelector("html")
if(!html.classList.contains("dark"))
html.classList.add('dark')
document.querySelector(".DashBoard").style.setProperty("background-color", null)
document.querySelector(".app").style.setProperty("background-color", null)
}
function light(){
let html = document.querySelector("html")
if(html.classList.contains("dark"))
html.classList.remove('dark')
document.querySelector(".DashBoard").style.setProperty("background-color", "ghostwhite")
document.querySelector(".app").style.setProperty("background-color", "#c6e2ff")
}
function saveDarkConfig(){
if(darkConfig.value.customTime) {
if(darkConfig.value.startTime === undefined || darkConfig.value.endTime === undefined){
ElMessage("请正确选择起始时间")
return
}
}
localStorage.setItem("darkConfig", JSON.stringify(darkConfig.value))
isConfigDarkMode.value = false
adjustForStyle()
}
</script>
<style>
.DashBoard{
width: auto;
height: 90vh;
background-color: ghostwhite;
text-align: center;
}

1
src/main.js
View File

@ -3,5 +3,6 @@ import App from './App.vue'
import 'element-plus/dist/index.css'
import element from "element-plus"
import "./reset.css"
import 'element-plus/theme-chalk/dark/css-vars.css'
createApp(App).use(element).mount('#app')