update

2023-12-28 16:18:19 +08:00
parent 76907fb95c
commit 7d9186d31c
15 changed files with 487 additions and 144 deletions
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,15 +3,15 @@
  <!--    <HomePage></HomePage>-->
  <!--  </div>-->
  <body  translate="no">
-  <div class="video-bg">
+  <div   class="video-bg">
    <video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
      <source src="../assets/video/background.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
-  <div class="dark-light">
+  <div v-if="value==='1'" class="dark-light">
    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
-         stroke-linejoin="round">
+         stroke-linejoin="round" @click="changeStyle">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </div>
@@ -31,7 +31,8 @@
 // @ is an alias to /src
 import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
 import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
-
+import axios from "axios";
+import {mapMutations} from "vuex";

 export default {
  name: 'SettingsView',
@@ -40,23 +41,106 @@ export default {
    SettingHeader,
  },
  data() {
-    return {}
+    return {
+      value:null,
+
+    }
  },
  mounted() {
-    this.toggleDarkLight();
  },
  created() {
-
+    this.getConfig('open_dark_light');
  },
  computed: {},
  methods:{
-    toggleDarkLight() {
-      const toggleButton = document.querySelector('.dark-light');
+    ...mapMutations(['setTheme']),
+    getConfig(name) {
+      let _this = this;
+      if (name) {
+        axios({
+          method: 'get',
+          url: '/api/getConfig',
+          params: {
+            name: name
+          }
+        }).then(function (res) {
+          if (res) {
+            if (res.data.open_dark_light) {
+              _this.value = res.data.open_dark_light.value;
+            }
+            //   if(res.data.dark_bg){
+            //     _this.dark_bg=res.data.dark_bg.value;
+            //   }
+            //   if(res.data.light_bg){
+            //     _this.light_bg=res.data.light_bg.value;
+            //   }
+            //   _this.loading=false;
+          }

-      toggleButton.addEventListener('click', () => {
-        document.body.classList.toggle('light-mode');
-      });
-    }
+        }).catch((error) => {
+        })
+      } else {
+        return false
+      }
+    },
+    getImageByConfig(name){
+      let _this=this;
+      if(name){
+        axios({
+          method: 'get',
+          url: '/api/getAttachment',
+          responseType: 'arraybuffer',
+          params: {
+            name:name
+          },
+        }).then(function (res) {
+
+          if(res.data){
+            _this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
+          }else{
+            return false;
+          }
+        }).catch((error) => {
+
+        })
+      }else{
+        return false;
+        // Vue.prototype.$notify.error({
+        //   title: '错误',
+        //   message: "不存在！",
+        //   offset: 0
+        // });
+      }
+
+    },
+    goDark() {
+      this.getImageByConfig('dark_bg_file');
+      //黑夜的
+      document.body.classList.remove('light-mode');
+      this.setTheme({theme:'dark'});
+    },
+    goLight() {
+      this.getImageByConfig('light_bg_file');
+      //白天的
+      document.body.classList.add('light-mode')
+      this.setTheme({theme:'light'});
+    },
+    changeStyle() {
+      this.isLight = !this.isLight
+      if (this.isLight !== true) {
+        this.goDark();
+      } else {
+        this.goLight();
+      }
+
+    },
+    // toggleDarkLight() {
+    //   const toggleButton = document.querySelector('.dark-light');
+    //
+    //   toggleButton.addEventListener('click', () => {
+    //     document.body.classList.toggle('light-mode');
+    //   });
+    // }
  }
 }
 </script>