处理里站搜索时没有搜索结果的情况。里站搜索时增加加载图标(同步更新)

src/App.vue

@@ -15,9 +15,3 @@ import DashBoard from "./components/DashBoard.vue";
     </el-container>
   </div>
 </template>
-
-<style>
-.app{
-  background-color:  #c6e2ff;
-}
-</style>

src/components/DashBoard.vue

@@ -22,8 +22,11 @@
     <hr>
     <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><hr>
+    <el-button @click="isQuerying = true">里站搜索</el-button>
     <div v-show="thumbnailGallery !== {}">
       <span>
         {{thumbnailGallery.shortName}}<br>
@@ -87,7 +90,7 @@
       <el-input v-model="keyword"></el-input> <el-button @click="queryGalleries(null)">查询</el-button> <div id="loading"/>
     </div>
     <el-scrollbar height="525px">
-      <div style="height: 251px; width: 100%; background-color: #f5f5f5; border-radius: 5px" v-for="gallery in galleries">
+      <div style="height: 251px; 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:250px;width:250px;float: left;"
@@ -102,7 +105,7 @@
           <a :href="gallery.link">链接</a><br>
           <el-button style="position: relative; margin-left: 80%" @click="param=gallery.link; queryRemoteTask()">下载</el-button>
         </div>
-      </div><br>
+      </div>
     </el-scrollbar>
     <div style="padding-top: 10px; text-align: center">
       <el-button @click="queryGalleries(queryPage.first)" :disabled="queryPage.first === undefined">首页</el-button>
@@ -112,6 +115,20 @@
     </div>
   </el-dialog>
 
+  <el-dialog title="配置夜间模式" v-model="isConfigDarkMode">
+    <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">
       <el-input v-model="AuthCode" placeholder="请输入授权码" style="padding-top: 200px"/> <br>
       <el-checkbox v-model="isRemember">是否记住授权码</el-checkbox>
@@ -129,6 +146,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("")
 
@@ -136,6 +155,7 @@ let isQuerying = ref(false)
 let keyword = ref("")
 let galleries = ref([])
 let queryPage = ref({})
+let darkConfig = ref({})
 
 //查询相关
 let type = ref("link")
@@ -292,20 +312,116 @@ function deleteAuthCode(){
   localStorage.removeItem('auth')
   ElMessage("删除授权码完成")
 }
+function toggleStyle(){
+  if(isDark.value)
+    dark()
+  else
+    light()
+}
+
 onMounted(() => {
   const auth = localStorage.getItem("auth")
+  adjustForStyle()
+
   if(auth !== null){
     store.dispatch("validate", auth)
     AuthCode.value = localStorage.getItem("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 scoped>
   .DashBoard{
     width: auto;
     height: 92vh;
-    background-color: ghostwhite;
     text-align: center;
   }
   .el-input{

src/components/Side.vue

@@ -5,6 +5,7 @@
       <el-table :data="currentTasks"
                 :empty-text="emptyText"
                 :row-key="gallery=>gallery.gid"
+                class="table"
       >
 
         <el-table-column type="expand">
@@ -300,7 +301,7 @@ function showThumbnail(gallery){
 }
 </script>
 
-<style scoped>
+<style>
   .side{
     text-align: center;
     height: 300px;

src/main.js

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