feat: 全部页面适配ACG MODE

Author: flben233

src/components/class.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="lesson" @click="floatWindow">
+  <div class="lesson" @click="floatWindow" ref="lessonRoot">
     <p class="txt">{{ course_name }}</p>
     <p class="txt2">{{ "@" + base_room_name }}</p>
     <van-popup
         v-model:show="show"
         position="bottom"
-        :style="{ height: '45%' }"
+        :style="{ height: '45%', backdropFilter: 'blur(2px)' }"
         closeable
         round
         teleport="#app"
@@ -44,15 +44,39 @@
 <script>
 export default {
   name: "lesson",
-  props: ["course_name", "base_room_name", "week", "teacher", "week_day", "start", "end", "course_code"],
+  props: ["course_name", "base_room_name", "week", "teacher", "week_day", "start", "end", "course_code", "acgMode", "blur"],
+  mounted() {
+    let style = this.$refs.lessonRoot.style;
+    style.cssText += `top: ${this.computeTop(this.start)}; left: ${this.computeLeft(this.week_day)}; background-color: ${this.randomColor(this.start + this.week_day)}`;
+  },
   data() {
     return {
       show: false,
+      colors: ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#795548", "#607d8b"]
     }
   },
   methods: {
     floatWindow: function () {
       this.show = !this.show;
+    },
+    // 计算课程方块的位置
+    computeTop: function (num) {
+      return ((num - 1) * 8.3).toString() + "%";
+    },
+    computeLeft: function (num) {
+      return ((num - 1) * 14.2857).toString() + "%";
+    },
+
+    // 随机课程方块的颜色
+    randomColor: function (num) {
+      let color = this.colors[num % this.colors.length];
+      if (this.acgMode) {
+        color = color + Math.floor(0.7 * 255).toString(16);
+        if (this.blur) {
+          this.$nextTick(() => this.$refs.lessonRoot.style.cssText += "backdrop-filter: blur(2px); transform: translateZ(0);");
+        }
+      }
+      return color;
     }
   }
 }
@@ -62,13 +86,11 @@ export default {
 .lesson {
   position: absolute;
   padding: 1% 0.3%;
-  height: 15.6%;
+  height: 16.1%;
   background-color: #588505;
-  width: 12.5717%;
-  border-radius: 10px;
-  margin-right: 0.857%;
-  margin-left: 0.857%;
-  margin-top: 1%;
+  width: 11.75vw;
+  border-radius: 8px;
+  margin-top: 0.5%;
 }
 
 .txt {

src/js/ThemeUtils.js

@@ -0,0 +1,13 @@
+export function setAcgTheme(el) {
+    let acgMode = localStorage.getItem('ACG_MODE') === 'true';
+    if (acgMode) {
+        let custBg = localStorage.getItem('customBg');
+        if (custBg !== "" && custBg != null) {
+            el.style.cssText += `background-image: url("${custBg}");`
+        } else {
+            let bgUrl = localStorage.getItem("ramdonBg");
+            el.style.cssText += `background-image: url("${bgUrl}");`;
+        }
+        el.style.cssText += "background-position: center;" + "background-repeat: no-repeat;" + "background-size: cover;"
+    }
+}

src/views/Exam.vue

@@ -30,6 +30,7 @@
 import TableVant from "../components/table.vue"
 import {closeDialog, showConfirmDialog, showFailToast, showNotify, showToast} from "vant";
 import {getExam} from "@/api/getExam";
+import {setAcgTheme} from "@/js/ThemeUtils";
 
 
 export default {
@@ -47,6 +48,7 @@ export default {
     } else {
       this.loadExam();
     }
+    setAcgTheme(document.querySelector("#exam"));
   },
   components: {TableVant},
   name: "exam",

src/views/about.vue

@@ -50,12 +50,19 @@
         <p>群里面反馈一下，部分账号确实存在这个问题</p>
       </van-collapse-item>
       <van-collapse-item title="SWUST 二次元最速传说と绝凶の猛虎！">
-        <van-switch v-model="status" @update:model-value="recordInfo"/>
+        <div style="align-items: center; display: flex; justify-content: space-between">
+          <div style="margin-right: 10px; color: #1c1c1e">ACG模式</div>
+          <van-switch v-model="status" @update:model-value="recordInfo"/>
+        </div>
+        <div style="align-items: center; display: flex; margin-top: 10px; margin-bottom: 10px; justify-content: space-between">
+          <div style="margin-right: 10px; color: #1c1c1e">课程表方块高斯模糊 (性能开销大)</div>
+          <van-switch v-model="lessonBlur" @update:model-value="blurInfo"/>
+        </div>
         <van-field
             placeholder="自定义背景URL (https://...)，留空不使用"
             v-model="customBg"
             clearable
-            style="padding: 0; background: transparent"
+            style="padding: 5px; border-radius: 8px;"
             v-if="status"
         >
           <template #button>
@@ -72,6 +79,7 @@
 import {UPDATE_LOG, OPEN_SOURCE, PRIVACY_POLICY} from "@/common/doc";
 import {showConfirmDialog, showLoadingToast, showSuccessToast} from "vant";
 import {deleteLocalCourse} from "@/api/getCourse";
+import {setAcgTheme} from "@/js/ThemeUtils";
 
 export default {
   name: "aboutUs",
@@ -82,11 +90,13 @@ export default {
       updateLog: UPDATE_LOG,
       privacy: PRIVACY_POLICY,
       status: localStorage.getItem('ACG_MODE') === 'true',
-      customBg: ""
+      customBg: "",
+      lessonBlur: localStorage.getItem('lessonBlur') === 'true'
     }
   },
   mounted() {
     this.customBg = localStorage.getItem('customBg') || '';
+    setAcgTheme(document.querySelector("#about"));
   },
   methods: {
     goBack: function () {
@@ -122,6 +132,17 @@ export default {
         localStorage.setItem('ACG_MODE', 'false')
       }
     },
+    blurInfo: async function (status) {
+      if (status) {
+        const data = await showConfirmDialog({
+          title: '警告',
+          message: '打开课程方块高斯模糊可能导致卡顿掉帧，是否继续？',
+        }).then(() => 'true').catch(() => 'false')
+        localStorage.setItem('lessonBlur', data)
+      } else {
+        localStorage.setItem('lessonBlur', 'false')
+      }
+    },
     setBg: function () {
       localStorage.setItem("customBg", this.customBg);
       showSuccessToast("设置成功 (过大的图片可能导致加载缓慢)");

src/views/course.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="grid1">
+  <div id="grid1" ref="grid1">
     <!--  加载效果  -->
     <LoadingView :show="show"/>
     <!--  导航栏  -->
@@ -23,13 +23,13 @@
     <!--  导航栏底下的星期条  -->
     <van-row class="week-bar">
       <van-col span="3"><p class="time">{{ curWeek }}周</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[1] }">周一</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[2] }">周二</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[3] }">周三</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[4] }">周四</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[5] }">周五</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[6] }">周六</p></van-col>
-      <van-col span="3"><p class="time" :class="{ active: activeDay[0] }">周日</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[1] }">一</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[2] }">二</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[3] }">三</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[4] }">四</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[5] }">五</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[6] }">六</p></van-col>
+      <van-col span="3"><p class="time" :class="{ active: activeDay[0] }">日</p></van-col>
     </van-row>
 
     <van-row>
@@ -55,11 +55,12 @@
                   <p class="num">12</p>
                 </div>
               </div>
-              <div style="max-height: 100%; width: 87.5vw;">
+              <div style="max-height: 100%; width: 85.75vw; margin-left: 1%">
                 <!--  渲染课表   -->
                 <lesson
                     v-for="l in lessons"
                     :course_name="l.jw_course_name"
+                    :acg-mode="acgMode"
                     :base_room_name="l.base_room_name"
                     :week="l.week"
                     :key="l.jw_task_book_no"
@@ -68,7 +69,8 @@
                     :start="l.section_start"
                     :end="l.section_end"
                     :course_code="l.jw_course_code"
-                    :style='{ "top": computeTop(l.section_start), "left": computeLeft(l.week_day), "background-color": randomColor(l.section_start + l.week_day)}'>
+                    :blur="lessonBlur"
+                >
                 </lesson>
               </div>
             </van-row>
@@ -93,6 +95,21 @@ export default {
     lesson
   },
   mounted() {
+    let grid1 = this.$refs.grid1;
+    const opacity = 0.7;
+    this.acgMode = localStorage.getItem('ACG_MODE') === 'true';
+    if (this.acgMode && grid1.offsetWidth > 0) {
+      let custBg = localStorage.getItem('customBg');
+      if (custBg !== "" && custBg != null) {
+        grid1.style.cssText = `background-image: url("${custBg}");`
+      } else {
+        let bgUrl = localStorage.getItem("ramdonBg");
+        grid1.style.cssText = `background-image: url("${bgUrl}");`;
+      }
+      document.querySelector(".week-bar").style.cssText += `background-color: rgba(255, 255, 255, ${opacity});`
+      document.documentElement.style.setProperty("--van-pagination-background", "none");
+      document.documentElement.style.setProperty("--van-pagination-item-disabled-background", "none");
+    }
     // 删掉边框
     let items = document.getElementsByTagName("ul");
     for (const item of items) {
@@ -122,7 +139,9 @@ export default {
       show: false,
       local: false,
       activeDay: [false, false, false, false, false, false, false],
-      initial: 0
+      initial: 0,
+      acgMode: false,
+      lessonBlur: localStorage.getItem('lessonBlur') === 'true'
     }
   },
   computed: {
@@ -234,20 +253,6 @@ export default {
       this.activeDay[weekday] = true;
     },
 
-    // 计算课程方块的位置
-    computeTop: function (num) {
-      return ((num - 1) * 8.3).toString() + "%";
-    },
-    computeLeft: function (num) {
-      return ((num - 1) * 14.2857).toString() + "%";
-    },
-
-    // 随机课程方块的颜色
-    randomColor: function (num) {
-      const colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4caf50", "#8bc34a", "#795548", "#607d8b"];
-      return colors[num % colors.length];
-    },
-
     validateLocalCache: function () {
       let normStamp = localStorage.getItem("normStamp");
       let expStamp = localStorage.getItem("expStamp");
@@ -274,11 +279,14 @@ export default {
   width: 100%;
   height: 100%;
   max-height: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .week-bar {
   height: 4.5vh;
-  padding: 1%;
+  padding: 1vw;
   top: 0;
   background-color: white;
   //box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.05);

src/views/index.vue

@@ -127,9 +127,11 @@ export default {
       const el = document.querySelector('#mask')
       const custBg = localStorage.getItem('customBg');
       if (custBg !== "" && custBg != null) {
-        el.style.cssText = `background-image: url("${custBg}");`
+        el.style.cssText += `background-image: url("${custBg}");`
       } else {
-        el.style.cssText = `background-image: url("/sercet/${Math.floor(Math.random() * 5) + 1}.jpg");`
+        let bgUrl = `/sercet/${Math.floor(Math.random() * 5) + 1}.jpg`;
+        localStorage.setItem("ramdonBg", bgUrl);
+        el.style.cssText += `background-image: url("${bgUrl}");`;
       }
       const opacity = "0.7";
       document.documentElement.style.setProperty("--van-background-2", "rgba(255, 255, 255, " + opacity + ")");

src/views/library.vue

@@ -76,6 +76,7 @@ import {ref} from 'vue';
 import {queryBooks} from "@/api/queryBooks";
 import {queryBookLocation} from "@/api/queryBookLocation"
 import {library} from "@/api/getLibrary";
+import {setAcgTheme} from "@/js/ThemeUtils";
 
 export default {
   components: {TableVant},
@@ -125,6 +126,7 @@ export default {
   name: "library",
   mounted() {
     this.getLibrary();
+    setAcgTheme(document.querySelector("#library"));
   },
   data() {
     return {
@@ -212,6 +214,9 @@ export default {
   overflow-x: auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 #loading2 {

src/views/login.vue

@@ -35,6 +35,7 @@
 <script>
 import PwdLoginPanel from "@/components/PwdLoginPanel.vue";
 import PhoneLoginPanel from "@/components/PhoneLoginPanel.vue";
+import {setAcgTheme} from "@/js/ThemeUtils";
 
 export default {
   name: "loginPanel",
@@ -46,7 +47,7 @@ export default {
     }
   },
   mounted() {
-    // this.getPwd();
+    setAcgTheme(document.querySelector("#login"));
   },
   methods: {
     login: function () {

src/views/score.vue

@@ -88,6 +88,7 @@ import axios from "axios"
 import {showFailToast} from "vant";
 import {BASE_URL} from "@/common/final"
 import {ref} from "vue";
+import {setAcgTheme} from "@/js/ThemeUtils";
 
 
 export default {
@@ -119,6 +120,7 @@ export default {
   },
   mounted() {
     this.getGPA();
+    setAcgTheme(document.querySelector("#score"));
   },
   name: "score",
   methods: {
@@ -214,6 +216,9 @@ export default {
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 #loading {