feat: change theme and index style

web/src/components/FooterBar.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="foot-container">
     <div class="footer">
-      <div><span :style="{color:textColor}">{{copyRight}}</span></div>
+      <div>
+        <span>{{ copyRight }}</span>
+      </div>
       <div v-if="!license.de_copy">
-        <a :href="gitURL" target="_blank" :style="{color:textColor}">
+        <a :href="gitURL" target="_blank">
           {{ title }} -
           {{ version }}
         </a>
@@ -12,37 +14,45 @@
   </div>
 </template>
 <script setup>
+import { ref } from "vue";
+import { httpGet } from "@/utils/http";
+import { showMessageError } from "@/utils/dialog";
+import { getLicenseInfo, getSystemInfo } from "@/store/cache";
 
-import {ref} from "vue";
-import {httpGet} from "@/utils/http";
-import {showMessageError} from "@/utils/dialog";
-import {getLicenseInfo, getSystemInfo} from "@/store/cache";
-
-const title = ref("")
-const version = ref(process.env.VUE_APP_VERSION)
-const gitURL = ref(process.env.VUE_APP_GIT_URL)
-const copyRight = ref('')
-const license = ref({})
+const title = ref("");
+const version = ref(process.env.VUE_APP_VERSION);
+const gitURL = ref(process.env.VUE_APP_GIT_URL);
+const copyRight = ref("");
+const license = ref({});
 const props = defineProps({
   textColor: {
     type: String,
-    default: '#ffffff'
-  },
+    default: "#ffffff"
+  }
 });
 
 // 获取系统配置
-getSystemInfo().then(res => {
-  title.value = res.data.title??process.env.VUE_APP_TITLE
-  copyRight.value = res.data.copyright.length>1?res.data.copyright:'极客学长 © 2023 - '+new Date().getFullYear()+' All rights reserved.'
-}).catch(e => {
-  showMessageError("获取系统配置失败：" + e.message)
-})
+getSystemInfo()
+  .then((res) => {
+    title.value = res.data.title ?? process.env.VUE_APP_TITLE;
+    copyRight.value =
+      res.data.copyright.length > 1
+        ? res.data.copyright
+        : "极客学长 © 2023 - " +
+          new Date().getFullYear() +
+          " All rights reserved.";
+  })
+  .catch((e) => {
+    showMessageError("获取系统配置失败：" + e.message);
+  });
 
-getLicenseInfo().then(res => {
-  license.value = res.data
-}).catch(e => {
-  showMessageError("获取 License 失败：" + e.message)
-})
+getLicenseInfo()
+  .then((res) => {
+    license.value = res.data;
+  })
+  .catch((e) => {
+    showMessageError("获取 License 失败：" + e.message);
+  });
 </script>
 
 <style scoped lang="stylus">
@@ -62,11 +72,15 @@ getLicenseInfo().then(res => {
     width 100%
 
     a {
+      color:var(--text-color)
+
       &:hover {
         text-decoration underline
       }
     }
+    span{
+      color:var(--text-color)
+    }
   }
 }
-
-</style>
+</style>

web/src/components/ThemeChange.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="theme-box" @click="toggleTheme">
+    <span class="iconfont icon-yueliang">{{
+      themePage === "light" ? "&#xe679;" : "&#xe60b;"
+    }}</span>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+// 定义主题状态，初始值从 localStorage 获取
+const themePage = ref(localStorage.getItem("theme") || "light");
+
+// 切换主题函数
+const toggleTheme = () => {
+  themePage.value = themePage.value === "light" ? "dark" : "light";
+  document.documentElement.setAttribute("data-theme", themePage.value); // 设置 HTML 的 data-theme 属性
+  localStorage.setItem("theme", themePage.value); // 保存主题到 localStorage
+};
+
+onMounted(() => {
+  document.documentElement.setAttribute("data-theme", themePage.value);
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '@/assets/iconfont/iconfont.css'
+.theme-box{
+  position: fixed;
+  right: 40px;
+  bottom: 262px;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  width 35px;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  background-color: rgb(146, 147, 148);
+
+  transition: all 0.3s ease;
+  &:hover{
+    transform: scale(1.1);
+  }
+  &:active{
+    transform: scale(0.9);
+  }
+  .iconfont{
+    font-size: 20px;
+    color: yellow;
+    transition: transform 0.3s ease;
+  }
+}
+</style>