diff --git a/src/App.vue b/src/App.vue index fd6366c..3eb7d8f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,6 +18,6 @@ import DashBoard from "./components/DashBoard.vue"; diff --git a/src/components/DashBoard.vue b/src/components/DashBoard.vue index 6a908fd..b879f3e 100644 --- a/src/components/DashBoard.vue +++ b/src/components/DashBoard.vue @@ -23,6 +23,11 @@ 里站搜索

修改授权码 删除本地授权码 + 夜间模式配置 + 夜间模式 + 夜间模式 +
+ 里站搜索
@@ -63,7 +68,7 @@ 查询
-
+
+ + 夜间模式跟随系统 +
+ 自定义起始时间(精确到分) +
+ + ~ + + + +
@@ -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() +}