Merge pull request #187 from imsyy/dev

feat: 同步开发分支
2023-08-17 13:42:13 +08:00 · 2023-08-17 13:42:13 +08:00 · 8ca5343c5a
commit 8ca5343c5a
parent 220ce2e319 231c5b6cea
51 changed files with 1043 additions and 4706 deletions
--- a/.env
+++ b/.env
@ -1,15 +1,12 @@
-# 站点名称
-VITE_SITE_NAME = "無名の主页"
-VITE_SITE_ANTHOR = "無名"
-VITE_SITE_KEYWORDS = "無名,个人主页"
-VITE_SITE_DES = "一个默默无闻的主页"
-VITE_SITE_URL = "imsyy.top"
-VITE_SITE_LOGO = "/images/icon/favicon.ico"
-VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png"
-
-# 百度统计
-## 若不需要，请设为空即可
-VITE_SITE_BAIDUTONGJI = "14e9f35ff8bc67fd4bcb5f07a6e6655a"
+# 站点信息
+VITE_SITE_NAME = "無名の主页" # 名称
+VITE_SITE_ANTHOR = "無名" # 作者
+VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
+VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
+VITE_SITE_URL = "imsyy.top" # 作者地址
+VITE_SITE_LOGO = "/images/icon/favicon.ico" # 站点主图标
+VITE_SITE_MAIN_LOGO = "/images/icon/logo.png" # 主页图标
+VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标

 # 简介文本
 VITE_DESC_HELLO = "Hello World !"
--- a/index.html
+++ b/index.html
@ -6,57 +6,28 @@
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="<%- logo %>">
-  <link rel="apple-touch-icon" href="<%- appleLogo %>" />
-  <link rel="bookmark" href="<%- appleLogo %>" />
-  <link rel="apple-touch-icon-precomposed" sizes="200x200" href="<%- appleLogo %>" />
-  <meta name="description" content="<%- description %>" />
-  <meta name="keywords" content="<%- keywords %>" />
-  <meta name="author" content="<%- author %>" />
+  <link rel="icon" href="%VITE_SITE_LOGO%">
+  <link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
+  <link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
+  <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
+  <meta name="description" content="%VITE_SITE_DES%" />
+  <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
+  <meta name="author" content="%VITE_SITE_ANTHOR%" />
  <meta name="theme-color" content="#424242" />
-  <title><%- title %></title>
+  <title>%VITE_SITE_NAME%</title>
  <!-- HarmonyOS Sans -->
  <!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
-  <!-- https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css -->
-  <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" />
-  <link rel="stylesheet" href="/loading/loading.min.css">
+  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
+  <!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
  <!-- IE Out -->
  <script>
    if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
      window.location.href =
      "https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
  </script>
-  <% if (tongji) { %>
-  <!-- 百度统计 -->
-  <script>
-    var _hmt = _hmt || [];
-    (function() {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?<%- tongji %>";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
-  </script>
-  <% } %>
 </head>

-<body class="loading">
-  <!--加载动画-->
-  <div id="loading-box">
-    <div class="loading-left-bg"></div>
-    <div class="loading-right-bg"></div>
-    <div class="spinner-box">
-      <div class="loader">
-        <div class="inner one"></div>
-        <div class="inner two"></div>
-        <div class="inner three"></div>
-      </div>
-      <div class="loading-word">
-        <p class="loading-title" id="loading-title"><%- title %></p>
-        <span id="loading-text">加载中</span>
-      </div>
-    </div>
-  </div>
+<body>
  <!-- 主体内容 -->
  <div id="app"></div>
  <!-- noscript -->
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
  "github": "https://github.com/imsyy/home",
  "home": "https://imsyy.top",
  "private": true,
-  "version": "4.0.5",
+  "version": "4.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
@ -12,7 +12,6 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@icon-park/vue-next": "^1.4.2",
    "aplayer": "^1.10.1",
    "axios": "^1.1.3",
    "element-plus": "^2.2.18",
@ -20,20 +19,20 @@
    "pinia": "^2.0.23",
    "pinia-plugin-persistedstate": "^3.0.0",
    "swiper": "^9.3.2",
-    "terser": "^5.16.1",
-    "vue": "^3.2.37",
+    "vue": "^3.3.4",
    "vue3-aplayer": "^1.7.3"
  },
  "devDependencies": {
+    "@icon-park/vue-next": "^1.4.2",
    "@vicons/fa": "^0.12.0",
-    "@vicons/material": "^0.12.0",
    "@vicons/utils": "^0.1.4",
-    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.55.0",
+    "terser": "^5.16.1",
    "unplugin-auto-import": "^0.11.2",
    "unplugin-vue-components": "^0.22.8",
-    "vite": "^3.1.0",
-    "vite-plugin-html": "^3.2.0",
+    "vite": "^4.4.5",
+    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-pwa": "^0.14.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/background1.jpg
+++ b/public/images/background1.jpg
--- a/public/images/background1.webp
+++ b/public/images/background1.webp
--- a/public/images/background10.jpg
+++ b/public/images/background10.jpg
--- a/public/images/background10.webp
+++ b/public/images/background10.webp
--- a/public/images/background2.jpg
+++ b/public/images/background2.jpg
--- a/public/images/background2.webp
+++ b/public/images/background2.webp
--- a/public/images/background3.jpg
+++ b/public/images/background3.jpg
--- a/public/images/background3.webp
+++ b/public/images/background3.webp
--- a/public/images/background4.jpg
+++ b/public/images/background4.jpg
--- a/public/images/background4.webp
+++ b/public/images/background4.webp
--- a/public/images/background5.jpg
+++ b/public/images/background5.jpg
--- a/public/images/background5.webp
+++ b/public/images/background5.webp
--- a/public/images/background6.jpg
+++ b/public/images/background6.jpg
--- a/public/images/background6.webp
+++ b/public/images/background6.webp
--- a/public/images/background7.jpg
+++ b/public/images/background7.jpg
--- a/public/images/background7.webp
+++ b/public/images/background7.webp
--- a/public/images/background8.jpg
+++ b/public/images/background8.jpg
--- a/public/images/background8.webp
+++ b/public/images/background8.webp
--- a/public/images/background9.jpg
+++ b/public/images/background9.jpg
--- a/public/images/background9.webp
+++ b/public/images/background9.webp
--- a/public/loading/loading.css
+++ b/public/loading/loading.css
@ -1,141 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-
-#loading-box .loading-left-bg,
-#loading-box .loading-right-bg {
-  position: fixed;
-  z-index: 999;
-  width: 50%;
-  height: 100%;
-  background-color: #515151e0;
-  transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-}
-
-#loading-box .loading-right-bg {
-  right: 0;
-}
-
-#loading-box > .spinner-box {
-  position: fixed;
-  z-index: 999999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-}
-
-#loading-box .spinner-box .loading-word {
-  position: absolute;
-  color: #ffffff;
-  font-size: 0.95rem;
-  transform: translateY(64px);
-  text-align: center;
-}
-
-.loading-title {
-  font-size: 1.25rem;
-  margin: 20px 10px 4px 10px;
-}
-
-#loading-box .spinner-box .configure-core {
-  width: 100%;
-  height: 100%;
-  background-color: #37474f;
-}
-
-/* 加载完成 */
-.loaded .loading-left-bg {
-  transform: translate(-100%, 0);
-}
-
-.loaded .loading-right-bg {
-  transform: translate(100%, 0);
-}
-
-.loaded .spinner-box {
-  display: none !important;
-}
-
-.loader {
-  position: absolute;
-  top: calc(50% - 32px);
-  left: calc(50% - 32px);
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  perspective: 800px;
-  transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
-}
-
-.inner {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-}
-
-.inner.one {
-  left: 0%;
-  top: 0%;
-  animation: rotate-one 1s linear infinite;
-  border-bottom: 3px solid #efeffa;
-}
-
-.inner.two {
-  right: 0%;
-  top: 0%;
-  animation: rotate-two 1s linear infinite;
-  border-right: 3px solid #efeffa;
-}
-
-.inner.three {
-  right: 0%;
-  bottom: 0%;
-  animation: rotate-three 1s linear infinite;
-  border-top: 3px solid #efeffa;
-}
-
-noscript {
-  z-index: 1000;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  margin-top: 26px;
-}
-
-@keyframes rotate-one {
-  0% {
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-  }
-
-  100% {
-    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-  }
-}
-
-@keyframes rotate-two {
-  0% {
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-  }
-
-  100% {
-    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-  }
-}
-
-@keyframes rotate-three {
-  0% {
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-  }
-
-  100% {
-    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-  }
-}
--- a/public/loading/loading.min.css
+++ b/public/loading/loading.min.css
@ -1 +0,0 @@
-*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}noscript{z-index:1000;position:absolute;display:flex;justify-content:center;width:100%;margin-top:26px}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,13 @@
 <template>
-  <div class="animate">
-    <Background />
-    <main>
+  <!-- 加载 -->
+  <Loading />
+  <!-- 壁纸 -->
+  <Background @loadComplete="loadComplete" />
+  <!-- 主界面 -->
+  <Transition name="fade" mode="out-in">
+    <main id="main" v-if="store.imgLoadStatus">
      <div class="container" v-show="!store.backgroundShow">
-        <section class="main" v-show="!store.setOpenState">
+        <section class="all" v-show="!store.setOpenState">
          <MainLeft />
          <MainRight v-show="!store.boxOpenState" />
          <Box v-show="store.boxOpenState" />
@ -24,26 +28,27 @@
      >
        <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
      </Icon>
+      <!-- 页脚 -->
+      <Transition name="fade" mode="out-in">
+        <Footer v-show="!store.backgroundShow && !store.setOpenState" />
+      </Transition>
    </main>
-    <Footer v-show="!store.backgroundShow && !store.setOpenState" />
-  </div>
+  </Transition>
 </template>
 <script setup>
-import { onMounted, onBeforeUnmount, watch } from "vue";
 import { helloInit, checkDays } from "@/utils/getTime.js";
+import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 import { Icon } from "@vicons/utils";
-import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
+import Loading from "@/components/Loading.vue";
 import MainLeft from "@/views/Main/Left.vue";
 import MainRight from "@/views/Main/Right.vue";
-import Background from "@/components/Background/index.vue";
-import Footer from "@/components/Footer/index.vue";
+import Background from "@/components/Background.vue";
+import Footer from "@/components/Footer.vue";
 import Box from "@/views/Box/index.vue";
 import MoreSet from "@/views/MoreSet/index.vue";
 import cursorInit from "@/utils/cursor.js";
 import config from "@/../package.json";
-// 新春灯笼
-// import "@/utils/lantern.js";

 const store = mainStore();

@ -52,22 +57,29 @@ const getWidth = () => {
  store.setInnerWidth(window.innerWidth);
 };

-onMounted(() => {
-  // 自定义鼠标
-  cursorInit();
-  // 加载完成事件
-  window.addEventListener("load", () => {
-    console.log("加载完成");
-    // 去除加载标记
-    document.getElementsByTagName("body")[0].className = "";
-    // 给加载动画添加结束标记
-    const loadingBox = document.getElementById("loading-box");
-    loadingBox.classList.add("loaded");
+// 加载完成事件
+const loadComplete = () => {
+  nextTick(() => {
    // 欢迎提示
    helloInit();
    // 默哀模式
    checkDays();
  });
+};
+
+// 监听宽度变化
+watch(
+  () => store.innerWidth,
+  (value) => {
+    if (value < 990) {
+      store.boxOpenState = false;
+    }
+  }
+);
+
+onMounted(() => {
+  // 自定义鼠标
+  cursorInit();

  // 屏蔽右键
  document.oncontextmenu = () => {
@ -116,31 +128,28 @@ onMounted(() => {
  );
 });

-// 监听宽度变化
-watch(
-  () => store.innerWidth,
-  (value) => {
-    if (value < 990) {
-      store.boxOpenState = false;
-    }
-  }
-);
-
 onBeforeUnmount(() => {
  window.removeEventListener("resize", getWidth);
 });
 </script>

 <style lang="scss" scoped>
-main {
+#main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scale(1.2);
+  transition: transform 0.3s;
+  animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+    forwards;
+  animation-delay: 0.5s;
  .container {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
-    @media (max-width: 1200px) {
-      padding: 0 2vw;
-    }
-    .main {
+    .all {
      width: 100%;
      height: 100%;
      padding: 0 0.75rem;
@ -158,8 +167,10 @@ main {
      background-color: #00000080;
      backdrop-filter: blur(20px);
      z-index: 2;
-      animation: fade;
-      -webkit-animation: fade 0.5s;
+      animation: fade 0.5s;
+    }
+    @media (max-width: 1200px) {
+      padding: 0 2vw;
    }
  }
  .menu {
@ -174,9 +185,8 @@ main {
    background: rgb(0 0 0 / 20%);
    backdrop-filter: blur(10px);
    border-radius: 6px;
-    transition: all 0.3s;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    transition: transform 0.3s;
+    animation: fade 0.5s;
    &:active {
      transform: scale(0.95);
    }
@ -188,23 +198,4 @@ main {
    }
  }
 }
-
-// 加载动画层
-.animate {
-  transform: scale(1);
-  transition: all ease 1.25s;
-  opacity: 1;
-  filter: blur(0);
-  width: 100%;
-  height: 100%;
-}
-
-.loading {
-  .animate {
-    transform: scale(1.2);
-    transition: all ease 1.25s;
-    opacity: 0;
-    filter: blur(10px);
-  }
-}
 </style>
--- a/src/components/Background/index.vue
+++ b/src/components/Background/index.vue
@ -1,33 +1,45 @@
 <template>
  <div class="cover">
-    <img class="bg" :src="bgUrl" alt="cover" />
-    <div :class="store.backgroundShow ? 'gray sm' : 'gray'" />
-    <transition name="el-fade-in-linear">
+    <img
+      v-show="store.imgLoadStatus"
+      class="bg"
+      alt="cover"
+      :src="bgUrl"
+      @load="imgLoadComplete"
+      @error.once="imgLoadError"
+      @animationend="imgAnimationEnd"
+    />
+    <div :class="store.backgroundShow ? 'gray hidden' : 'gray'" />
+    <Transition name="fade" mode="out-in">
      <a
+        v-if="store.backgroundShow && store.coverType != '3'"
        class="down"
        :href="bgUrl"
        target="_blank"
-        v-show="store.backgroundShow && store.coverType != '3'"
-        >下载壁纸</a
      >
-    </transition>
+        下载壁纸
+      </a>
+    </Transition>
  </div>
 </template>

 <script setup>
-import { onMounted, ref, watch, h } from "vue";
-import { SuccessPicture } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
+import { Error } from "@icon-park/vue-next";

 const store = mainStore();
-const bgUrl = ref(null); // 壁纸链接
+const bgUrl = ref(null);
+const imgTimeout = ref(null);
+const emit = defineEmits(["loadComplete"]);
+
+// 壁纸随机数
+// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
+const bgRandom = Math.floor(Math.random() * 10 + 1);

 // 更换壁纸链接
 const changeBg = (type) => {
  if (type == 0) {
-    bgUrl.value = `/images/background${Math.floor(
-      Math.random() * 10 + 1
-    )}.webp`;
+    bgUrl.value = `/images/background${bgRandom}.jpg`;
  } else if (type == 1) {
    bgUrl.value = "https://api.dujin.org/bing/1920.php";
  } else if (type == 2) {
@ -37,25 +49,41 @@ const changeBg = (type) => {
  }
 };

+// 图片加载完成
+const imgLoadComplete = () => {
+  imgTimeout.value = setTimeout(() => {
+    store.setImgLoadStatus(true);
+  }, Math.floor(Math.random() * (600 - 300 + 1)) + 300);
+};
+
+// 图片动画完成
+const imgAnimationEnd = () => {
+  console.log("壁纸加载且动画完成");
+  // 加载完成事件
+  emit("loadComplete");
+};
+
+// 图片显示失败
+const imgLoadError = () => {
+  console.error("壁纸加载失败：", bgUrl.value);
+  ElMessage({
+    message: "壁纸加载失败，已临时切换回默认",
+    icon: h(Error, {
+      theme: "filled",
+      fill: "#efefef",
+    }),
+  });
+  bgUrl.value = `/images/background${bgRandom}.jpg`;
+};
+
 onMounted(() => {
  // 加载壁纸
  changeBg(store.coverType);
 });

-// 监听壁纸种类变化
-watch(
-  () => store.coverType,
-  (value) => {
-    changeBg(value);
-    ElMessage({
-      message: "壁纸设置成功",
-      icon: h(SuccessPicture, {
-        theme: "filled",
-        fill: "#efefef",
-      }),
-    });
-  }
-);
+onBeforeUnmount(() => {
+  clearTimeout(imgTimeout.value);
+});
 </script>

 <style lang="scss" scoped>
@ -69,16 +97,17 @@ watch(
  z-index: -1;

  .bg {
-    transform: scale(1);
-    filter: blur(0);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
-    transition: all 1.5s ease 0s;
    backface-visibility: hidden;
+    filter: blur(20px) brightness(0.3);
+    transition: filter 0.3s, transform 0.3s;
+    animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    animation-delay: 0.45s;
  }
  .gray {
    opacity: 1;
@ -94,7 +123,7 @@ watch(
      radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);

    transition: 1.5s;
-    &.sm {
+    &.hidden {
      opacity: 0;
      transition: 1.5s;
    }
@ -125,20 +154,4 @@ watch(
    }
  }
 }
-
-// 加载时动画
-.loading {
-  .cover {
-    .bg {
-      transition: 1.5s;
-      transform: scale(1.1);
-      filter: blur(10px);
-    }
-
-    .gray {
-      transition: 1.5s;
-      opacity: 0;
-    }
-  }
-}
 </style>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -0,0 +1,112 @@
+<template>
+  <footer id="footer" :class="store.footerBlur ? 'blur' : null">
+    <Transition name="fade" mode="out-in">
+      <div v-if="!store.playerState || !store.playerLrcShow" class="power">
+        <span>
+          Copyright&nbsp;&copy;
+          <span v-if="siteStartDate?.length >= 4" class="site-start">
+            {{ siteStartDate.substring(0, 4) }}
+            -
+          </span>
+          {{ fullYear }}
+          <a :href="SiteUrl">{{ SiteAnthor }}</a>
+        </span>
+        <!-- 以下信息请不要修改哦 -->
+        <span class="hidden">
+          &amp;&nbsp;Made&nbsp;by
+          <a :href="config.github" target="_blank">
+            {{ config.author }}
+          </a>
+        </span>
+        <!-- 站点备案 -->
+        <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+          &amp;
+          {{ siteIcp }}
+        </a>
+      </div>
+      <div v-else class="lrc">
+        <Transition name="fade" mode="out-in">
+          <div class="lrc-all" :key="store.getPlayerLrc">
+            <music-one theme="filled" size="18" fill="#efefef" />
+            <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" />
+            <music-one theme="filled" size="18" fill="#efefef" />
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </footer>
+</template>
+
+<script setup>
+import { MusicOne } from "@icon-park/vue-next";
+import { mainStore } from "@/store";
+import config from "@/../package.json";
+
+const store = mainStore();
+const fullYear = new Date().getFullYear();
+
+// 加载配置数据
+const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
+const SiteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
+const SiteUrl = ref(import.meta.env.VITE_SITE_URL);
+</script>
+
+<style lang="scss" scoped>
+#footer {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 46px;
+  line-height: 46px;
+  text-align: center;
+  z-index: 0;
+  font-size: 14px;
+  .power {
+    animation: fade 0.3s;
+  }
+  .lrc {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .lrc-all {
+      width: 98%;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      .lrc-text {
+        margin: 0 8px;
+      }
+      .i-icon {
+        width: 18px;
+        height: 18px;
+        display: inherit;
+      }
+    }
+  }
+  &.blur {
+    backdrop-filter: blur(10px);
+    background: rgb(0 0 0 / 25%);
+    font-size: 16px;
+  }
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.15s ease-in-out;
+  }
+  @media (max-width: 720px) {
+    font-size: 0.85rem;
+    &.blur {
+      font-size: 0.85rem;
+    }
+  }
+  @media (max-width: 480px) {
+    .hidden {
+      display: none;
+    }
+  }
+}
+</style>
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@ -1,101 +0,0 @@
-<template>
-  <footer>
-    <div class="power" v-show="!store.playerState">
-      <span>
-        Copyright&nbsp;&copy;
-        <span v-if="siteStartDate?.length >= 4" class="site-start">
-          {{ siteStartDate.substring(0, 4) }}
-          -
-        </span>
-        {{ fullYear }}
-        <a :href="SiteUrl">{{ SiteAnthor }}</a>
-      </span>
-      <!-- 以下信息请不要修改哦 -->
-      <span class="hidden">
-        &amp;&nbsp;Made&nbsp;by
-        <a :href="config.github" target="_blank">
-          {{ config.author }}
-        </a>
-      </span>
-      <!-- 站点备案 -->
-      <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
-        &amp;
-        {{ siteIcp }}
-      </a>
-    </div>
-    <div class="lrc" v-show="store.playerState">
-      <music-one theme="filled" size="18" fill="#efefef" />
-      <span class="lrc-text">
-        {{ store.getPlayerLrc ? store.getPlayerLrc : "这句没有歌词" }}
-      </span>
-      <music-one theme="filled" size="18" fill="#efefef" />
-    </div>
-  </footer>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { MusicOne } from "@icon-park/vue-next";
-import { mainStore } from "@/store";
-import config from "@/../package.json";
-
-const store = mainStore();
-const fullYear = new Date().getFullYear();
-
-// 加载配置数据
-const siteStartDate = ref(import.meta.env.VITE_SITE_START);
-const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
-const SiteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
-const SiteUrl = ref(import.meta.env.VITE_SITE_URL);
-</script>
-
-<style lang="scss" scoped>
-footer {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 46px;
-  line-height: 46px;
-  text-align: center;
-  backdrop-filter: blur(10px);
-  background: rgb(0 0 0 / 25%);
-  z-index: 0;
-  animation: fade;
-  -webkit-animation: fade 0.5s;
-  @media (max-width: 720px) {
-    font-size: 0.85rem;
-  }
-  @media (max-width: 480px) {
-    .hidden {
-      display: none;
-    }
-  }
-  .power {
-    animation: fade;
-    -webkit-animation: fade 0.3s;
-  }
-  .lrc {
-    padding: 0 20px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    animation: fade;
-    -webkit-animation: fade 0.3s;
-    .lrc-text {
-      margin: 0 8px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      word-break: break-all;
-    }
-    .i-icon {
-      width: 18px;
-      height: 18px;
-      display: inherit;
-    }
-  }
-}
-</style>
--- a/src/components/Hitokoto/index.vue
+++ b/src/components/Hitokoto/index.vue
@ -26,11 +26,11 @@
 </template>

 <script setup>
-import { reactive, ref, onMounted, h } from "vue";
 import { MusicMenu, Error } from "@icon-park/vue-next";
 import { getHitokoto } from "@/api";
-import debounce from "@/utils/debounce.js";
 import { mainStore } from "@/store";
+import debounce from "@/utils/debounce.js";
+
 const store = mainStore();

 // 开启音乐面板按钮显隐
@ -80,8 +80,7 @@ onMounted(() => {
  width: 100%;
  height: 100%;
  padding: 20px;
-  animation: fade;
-  -webkit-animation: fade 0.5s;
+  animation: fade 0.5s;
  .open-music {
    width: 100%;
    position: absolute;
--- a/src/components/Links/index.vue
+++ b/src/components/Links/index.vue
@ -21,20 +21,16 @@
    >
      <SwiperSlide v-for="site in siteLinksList" :key="site">
        <el-row class="link-all" :gutter="20">
-          <el-col
-            v-for="(item, index) in site"
-            :span="8"
-            :key="item"
-            @click="jumpLink(item)"
-          >
+          <el-col v-for="(item, index) in site" :span="8" :key="item">
            <div
              class="item cards"
              :style="index < 3 ? 'margin-bottom: 20px' : null"
+              @click="jumpLink(item)"
            >
              <Icon size="26">
                <component :is="siteIcon[item.icon]" />
              </Icon>
-              <span class="name">{{ item.name }}</span>
+              <span class="name text-hidden">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
@ -45,7 +41,6 @@
 </template>

 <script setup>
-import { onMounted, computed } from "vue";
 import { Icon } from "@vicons/utils";
 // 可前往 https://www.xicons.org 自行挑选并在此处引入
 import {
@ -57,7 +52,7 @@ import {
  Book,
  Fire,
  LaptopCode,
-} from "@vicons/fa";
+} from "@vicons/fa"; // 注意使用正确的类别
 import { mainStore } from "@/store";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Pagination, Mousewheel } from "swiper";
@ -109,8 +104,7 @@ onMounted(() => {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    animation: fade 0.5s;
    .title {
      margin-left: 8px;
      font-size: 1.15rem;
@ -149,8 +143,8 @@ onMounted(() => {
      align-items: center;
      flex-direction: row;
      justify-content: center;
-      animation: fade;
-      -webkit-animation: fade 0.5s;
+      padding: 0 10px;
+      animation: fade 0.5s;

      &:hover {
        transform: scale(1.02);
@ -183,6 +177,9 @@ onMounted(() => {
        }
      }
    }
+    @media (max-width: 720px) {
+      height: 180px;
+    }
  }
 }
 </style>
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@ -0,0 +1,150 @@
+<template>
+  <div id="loader-wrapper" :class="store.imgLoadStatus ? 'loaded' : null">
+    <div class="loader">
+      <div class="loader-circle" />
+      <div class="loader-text">
+        <span class="name">
+          {{ siteName }}
+        </span>
+        <span class="tip"> 加载中 </span>
+      </div>
+    </div>
+    <div class="loader-section section-left" />
+    <div class="loader-section section-right" />
+  </div>
+</template>
+
+<script setup>
+import { mainStore } from "@/store";
+
+const store = mainStore();
+
+// 配置
+const siteName = import.meta.env.VITE_SITE_NAME;
+</script>
+
+<style lang="scss" scoped>
+#loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  overflow: hidden;
+  .loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .loader-circle {
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #fff;
+      animation: spin 1.8s linear infinite;
+      z-index: 2;
+
+      &:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #a4a4a4;
+        animation: spin-reverse 0.6s linear infinite;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #d3d3d3;
+        animation: spin 1s linear infinite;
+      }
+    }
+    .loader-text {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      z-index: 2;
+      margin-top: 40px;
+      font-size: 24px;
+      .tip {
+        margin-top: 6px;
+        font-size: 18px;
+        opacity: 0.6;
+      }
+    }
+  }
+  .loader-section {
+    position: fixed;
+    top: 0;
+    width: 51%;
+    height: 100%;
+    background: #333;
+    z-index: 1;
+    &.section-left {
+      left: 0;
+    }
+    &.section-right {
+      right: 0;
+    }
+  }
+  &.loaded {
+    visibility: hidden;
+    transform: translateY(-100%);
+    transition: transform 0.3s 1s ease-out, visibility 0.3s 1s ease-out;
+    .loader {
+      .loader-circle,
+      .loader-text {
+        opacity: 0;
+        transition: opacity 0.3s ease-out;
+      }
+    }
+    .loader-section {
+      &.section-left {
+        transform: translateX(-100%);
+        transition: transform 0.5s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+      &.section-right {
+        transform: translateX(100%);
+        transition: transform 0.5s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-reverse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+</style>
--- a/src/components/Message/index.vue
+++ b/src/components/Message/index.vue
@ -28,7 +28,6 @@
 </template>

 <script setup>
-import { reactive, watch, h } from "vue";
 import { Icon } from "@vicons/utils";
 import { QuoteLeft, QuoteRight } from "@vicons/fa";
 import { Error } from "@icon-park/vue-next";
@ -36,7 +35,7 @@ import { mainStore } from "@/store";
 const store = mainStore();

 // 主页站点logo
-const siteLogo = import.meta.env.VITE_SITE_LOGO;
+const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO;
 // 站点链接
 const siteUrl = import.meta.env.VITE_SITE_URL.split(".");

@ -83,8 +82,7 @@ watch(
    display: flex;
    flex-direction: row;
    align-items: center;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    animation: fade 0.5s;
    .logo-img {
      border-radius: 50%;
      width: 120px;
@ -125,8 +123,7 @@ watch(
    padding: 1rem;
    margin-top: 3.5rem;
    max-width: 460px;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    animation: fade 0.5s;

    .content {
      display: flex;
--- a/src/components/Music/index.vue
+++ b/src/components/Music/index.vue
@ -93,7 +93,7 @@
            :songType="playerData.type"
            :songId="playerData.id"
            :volume="volumeNum"
-            :shuffle="true"
+            :shuffle="false"
            ref="playerRef"
          />
        </div>
@ -103,7 +103,6 @@
 </template>

 <script setup>
-import { ref, reactive, watch, onMounted } from "vue";
 import {
  GoStart,
  PlayOne,
@ -114,7 +113,7 @@ import {
  VolumeSmall,
  VolumeNotice,
 } from "@icon-park/vue-next";
-import Player from "@/components/Player/index.vue";
+import Player from "@/components/Player.vue";
 import { mainStore } from "@/store";
 const store = mainStore();

@ -179,8 +178,7 @@ watch(
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
-  animation: fade;
-  -webkit-animation: fade 0.5s;
+  animation: fade 0.5s;
  .btns {
    display: flex;
    align-items: center;
@ -242,8 +240,7 @@ watch(
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
-      animation: fade;
-      -webkit-animation: fade 0.3s;
+      animation: fade 0.3s;
    }
    .volume {
      width: 100%;
@ -251,8 +248,7 @@ watch(
      display: flex;
      align-items: center;
      flex-direction: row;
-      animation: fade;
-      -webkit-animation: fade 0.3s;
+      animation: fade 0.3s;
      .icon {
        margin-right: 12px;
        span {
--- a/src/components/Player/index.vue
+++ b/src/components/Player/index.vue
@ -20,12 +20,10 @@
 </template>

 <script setup>
-import aplayer from "vue3-aplayer";
-import fetchJsonp from "fetch-jsonp";
-import { h, ref, nextTick, onMounted } from "vue";
 import { MusicOne, PlayWrong } from "@icon-park/vue-next";
 import { getPlayerList } from "@/api";
 import { mainStore } from "@/store";
+import aplayer from "vue3-aplayer";

 const store = mainStore();

@ -34,7 +32,6 @@ const player = ref(null);

 // 歌曲播放列表
 const playList = ref([]);
-const playerLrc = ref("");

 // 歌曲播放项
 const playIndex = ref(0);
@ -70,10 +67,10 @@ const props = defineProps({
      return value >= 0 && value <= 1;
    },
  },
-  // 歌曲服务器 ( netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐 )
+  // 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
  songServer: {
    type: String,
-    default: "netease", //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
+    default: "netease", //'netease' | 'tencent'
  },
  // 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
  songType: {
@ -143,7 +140,7 @@ onMounted(() => {
  });
 });

-// 播放暂停事件
+// 播放
 const onPlay = () => {
  console.log("播放");
  // 播放状态
@ -162,6 +159,8 @@ const onPlay = () => {
    }),
  });
 };
+
+// 暂停
 const onPause = () => {
  store.setPlayerState(player.value.audio.paused);
 };
@ -170,10 +169,13 @@ const onPause = () => {
 const onTimeUp = () => {
  let playerRef = player.value.$.vnode.el;
  if (playerRef) {
-    playerLrc.value = playerRef.getElementsByClassName(
-      "aplayer-lrc-current"
-    )[0].innerHTML;
-    store.setPlayerLrc(playerLrc.value);
+    const currentLrcElement = playerRef.querySelector(".aplayer-lrc-current");
+    const previousLrcElement = currentLrcElement?.previousElementSibling;
+    const lrcContent =
+      currentLrcElement?.innerHTML ||
+      previousLrcElement?.innerHTML ||
+      "这句没有歌词";
+    store.setPlayerLrc(lrcContent);
  }
 };

--- a/src/components/Set/index.vue
+++ b/src/components/Set/index.vue
@ -1,9 +1,13 @@
 <template>
  <div class="setting">
    <el-collapse class="collapse" v-model="activeName" accordion>
-      <el-collapse-item title="壁纸设置" name="1">
+      <el-collapse-item title="个性壁纸" name="1">
        <div class="bg-set">
-          <el-radio-group v-model="bgSet" text-color="#ffffff">
+          <el-radio-group
+            v-model="coverType"
+            text-color="#ffffff"
+            @change="radioChange"
+          >
            <el-radio label="0" size="large" border>默认壁纸</el-radio>
            <el-radio label="1" size="large" border>每日一图</el-radio>
            <el-radio label="2" size="large" border>随机风景</el-radio>
@ -11,7 +15,7 @@
          </el-radio-group>
        </div>
      </el-collapse-item>
-      <el-collapse-item title="其他设置" name="2">
+      <el-collapse-item title="个性化调整" name="2">
        <div class="item">
          <span class="text">建站日期显示</span>
          <el-switch
@ -30,8 +34,26 @@
            :inactive-icon="CloseSmall"
          />
        </div>
+        <div class="item">
+          <span class="text">底栏歌词显示</span>
+          <el-switch
+            v-model="playerLrcShow"
+            inline-prompt
+            :active-icon="CheckSmall"
+            :inactive-icon="CloseSmall"
+          />
+        </div>
+        <div class="item">
+          <span class="text">底栏背景模糊</span>
+          <el-switch
+            v-model="footerBlur"
+            inline-prompt
+            :active-icon="CheckSmall"
+            :inactive-icon="CloseSmall"
+          />
+        </div>
      </el-collapse-item>
-      <el-collapse-item title="其他设置" name="3">
+      <el-collapse-item title="播放器配置" name="3">
        <div>设置内容待增加</div>
      </el-collapse-item>
      <el-collapse-item title="其他设置" name="4">
@ -42,29 +64,27 @@
 </template>

 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { CheckSmall, CloseSmall, SuccessPicture } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
-import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
 import { storeToRefs } from "pinia";

 const store = mainStore();
-const { siteStartShow, musicClick } = storeToRefs(store);
+const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } =
+  storeToRefs(store);

 // 默认选中项
 const activeName = ref("1");
-const bgSet = ref("0");

-onMounted(() => {
-  bgSet.value = store.coverType.toString();
-});
-
-// 壁纸选中项
-watch(
-  () => bgSet.value,
-  (value) => {
-    store.coverType = value;
-  }
-);
+// 壁纸切换
+const radioChange = () => {
+  ElMessage({
+    message: "壁纸设置成功，刷新后生效",
+    icon: h(SuccessPicture, {
+      theme: "filled",
+      fill: "#efefef",
+    }),
+  });
+};
 </script>

 <style lang="scss" scoped>
--- a/src/components/SocialLinks/index.vue
+++ b/src/components/SocialLinks/index.vue
@ -18,7 +18,6 @@
 </template>

 <script setup>
-import { ref } from "vue";
 import socialLinks from "@/assets/socialLinks.json";

 // 社交链接提示
@ -37,9 +36,8 @@ const socialTip = ref("通过这里联系我吧");
  background-color: transparent;
  border-radius: 6px;
  backdrop-filter: blur(0);
-  animation: fade;
-  -webkit-animation: fade 0.5s;
-  transition: all 0.5s;
+  animation: fade 0.5s;
+  transition: background-color 0.3s, backdrop-filter 0.3s;
  @media (max-width: 840px) {
    max-width: 100%;
    justify-content: center;
@ -60,9 +58,12 @@ const socialTip = ref("通过这里联系我吧");
      display: inherit;
      .icon {
        margin: 0 12px;
-        transition: all 0.3s;
+        transition: transform 0.3s;
+        &:hover {
+          transform: scale(1.1);
+        }
        &:active {
-          transform: scale(0.9);
+          transform: scale(1);
        }
      }
    }
@ -70,8 +71,7 @@ const socialTip = ref("通过这里联系我吧");
  .tip {
    display: none;
    margin-right: 12px;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    animation: fade 0.5s;
  }
  @media (min-width: 768px) {
    &:hover {
--- a/src/components/TimeCapsule/index.vue
+++ b/src/components/TimeCapsule/index.vue
@ -54,7 +54,6 @@
 </template>

 <script setup>
-import { onMounted, onBeforeUnmount, ref } from "vue";
 import { HourglassFull } from "@icon-park/vue-next";
 import { getTimeCapsule, siteDateStatistics } from "@/utils/getTime.js";
 import { mainStore } from "@/store";
--- a/src/components/Weather/index.vue
+++ b/src/components/Weather/index.vue
@ -18,7 +18,6 @@
 </template>

 <script setup>
-import { onMounted, reactive, h } from "vue";
 import { getAdcode, getWeather, getOtherWeather } from "@/api";
 import { Error } from "@icon-park/vue-next";

--- a/src/store/index.js
+++ b/src/store/index.js
@ -3,9 +3,11 @@ import { defineStore } from "pinia";
 export const mainStore = defineStore("main", {
  state: () => {
    return {
+      imgLoadStatus: false, // 壁纸加载状态
      innerWidth: null, // 当前窗口宽度
      coverType: "0", // 壁纸种类
-      siteStartShow: true, // 建站日期显示
+      siteStartShow: false, // 建站日期显示
+      musicClick: false, // 音乐链接是否跳转
      musicIsOk: false, // 音乐是否加载完成
      musicVolume: 0, // 音乐音量;
      musicOpenState: false, // 音乐面板开启状态
@ -18,7 +20,8 @@ export const mainStore = defineStore("main", {
      playerTitle: null, // 当前播放歌曲名
      playerArtist: null, // 当前播放歌手名
      playerLrc: "歌词加载中", // 当前播放歌词
-      musicClick: false, // 音乐链接是否跳转
+      playerLrcShow: true, // 是否显示底栏歌词
+      footerBlur: true, // 底栏模糊
    };
  },
  getters: {
@ -64,10 +67,21 @@ export const mainStore = defineStore("main", {
      this.playerTitle = title;
      this.playerArtist = artist;
    },
+    // 更改壁纸加载状态
+    setImgLoadStatus(value) {
+      this.imgLoadStatus = value;
+    },
  },
  persist: {
    key: "data",
    storage: window.localStorage,
-    paths: ["coverType", "musicVolume", "siteStartShow", "musicClick"],
+    paths: [
+      "coverType",
+      "musicVolume",
+      "siteStartShow",
+      "musicClick",
+      "playerLrcShow",
+      "footerBlur",
+    ],
  },
 });
--- a/src/style/global.scss
+++ b/src/style/global.scss
@ -17,9 +17,9 @@
    }
 }

-/* 小于1200px时 */
-@media (max-width: 1200px) {
-    @include changeWidth($maxWidth:1000px);
+/* 小于1280px时 */
+@media (max-width: 1280px) {
+    @include changeWidth($maxWidth:1100px);
 }

 /* 小于992px时 */
--- a/src/style/style.scss
+++ b/src/style/style.scss
@ -13,6 +13,8 @@ html,
 body {
  width: 100%;
  height: 100%;
+  margin: 0;
+  padding: 0;
  background-color: #333;
  overflow: hidden;
  font-family: "HarmonyOS_Regular", sans-serif;
@ -23,8 +25,6 @@ a,
 p {
  margin: 0;
  padding: 0;
-  -webkit-user-select: none;
-  -webkit-user-drag: none;
  user-select: none;
  text-decoration: none;
  color: #fff;
@ -59,19 +59,16 @@ p {
 // 卡片样式
 .cards {
  border-radius: 6px;
-  background: #00000040;
-  -webkit-backdrop-filter: blur(10px);
+  background-color: #00000040;
  backdrop-filter: blur(10px);
  transform: scale(1);
-  transition: all 0.3s;
-}
-
-.cards:hover {
-  transform: scale(1.01);
-}
-
-.cards:active {
-  transform: scale(0.98);
+  transition: backdrop-filter 0.3s, transform 0.3s;
+  &:hover {
+    transform: scale(1.01);
+  }
+  &:active {
+    transform: scale(0.98);
+  }
 }

 // 文字超出
@ -103,13 +100,11 @@ p {
  .el-progress-bar__outer {
    border-radius: 6px;
    background-color: #00000020;
-
    .el-progress-bar__inner {
      background-color: #efefef;
      border-radius: 6px;
      text-align: center;
      font-family: "UnidreamLED";
-
      span {
        color: #564d59;
        font-size: 0.9rem;
@ -129,31 +124,59 @@ p {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
-
  .el-card__header {
    font-weight: bold;
    padding: 16px 20px !important;
    background-color: #ffffff30 !important;
    border-bottom: 1px solid transparent !important;
  }
-
  .el-card__body {
    padding: 0 !important;
    background-color: #ffffff10 !important;
  }
 }

-// 渐入动画
+// Transition 动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// keyframes 动画
@keyframes fade {
-  0% {
+  from {
    opacity: 0;
  }
-
-  100% {
+  to {
    opacity: 1;
  }
 }

+@keyframes fade-blur-in {
+  from {
+    filter: blur(20px) brightness(0.3);
+    transform: scale(1.6);
+  }
+  to {
+    filter: blur(0) brightness(1);
+    transform: scale(1.2);
+  }
+}
+
+@keyframes fade-blur-main-in {
+  from {
+    transform: scale(1.2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
 // 隐藏元素
@media (min-width: 910px) and (max-width: 1200px) {
  .sm-hidden {
--- a/src/utils/lantern.js
+++ b/src/utils/lantern.js
@ -1,6 +0,0 @@
-/*!
- * china-lantern v1.6.0
- * (c) 2020-2021 fz6m
- * Released under the MIT License.
- */
-!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}('@charset "UTF-8";.lantern__warpper{position:fixed;top:12px;left:40px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:999}.lantern__warpper.lantern__secondary{left:calc(100% - 130px)}.lantern__warpper.lantern__secondary .lantern__box{-webkit-animation-duration:3s;animation-duration:3s;animation-delay:1s;}.lantern__box{position:relative;display:inline-block;width:90px;height:70px;background:rgba(216,0,15,.8);border-radius:50% 50%;animation:lantern-swing 3s ease-in-out infinite alternate-reverse;-webkit-transform-origin:50% -70px;-ms-transform-origin:50% -70px;transform-origin:50% -70px;-webkit-box-shadow:-5px 5px 50px 4px #fa6c00;box-shadow:-5px 5px 50px 4px #fa6c00}.lantern__box:after,.lantern__box:before{content:"";position:absolute;height:8px;width:45px;left:50%;border:1px solid #dc8f03;background:-webkit-gradient(linear,left top,right top,from(#dc8f03),color-stop(orange),color-stop(#dc8f03),color-stop(orange),to(#dc8f03));background:-o-linear-gradient(left,#dc8f03,orange,#dc8f03,orange,#dc8f03);background:linear-gradient(90deg,#dc8f03,orange,#dc8f03,orange,#dc8f03)}.lantern__box:before{top:0;border-radius:5px 5px 0 0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.lantern__box:after{bottom:0;border-radius:0 0 5px 5px;-webkit-transform:translate(-50%,50%);-ms-transform:translate(-50%,50%);transform:translate(-50%,50%)}.lantern__line{position:absolute;width:2px;height:12px;top:0;left:50%;-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%);background:#dc8f03}.lantern__circle{width:80%;-webkit-box-sizing:border-box;box-sizing:border-box}.lantern__circle,.lantern__circle .lantern__ellipse{height:100%;margin:0 auto;border-radius:50%;border:2px solid #dc8f03}.lantern__circle .lantern__ellipse{width:50%}.lantern__circle .lantern__text{font-family:华文行楷,Microsoft YaHei,sans-serif;font-size:24.3px;color:#dc8f03;font-weight:700;line-height:66px;text-align:center}.lantern__tail{position:relative;width:4px;height:12px;margin:0 auto;animation:lantern-swing 4s ease-in-out infinite alternate-reverse;background:orange;border-radius:0 0 5px 5px}.lantern__tail .lantern__junction{position:absolute;top:0;left:50%;width:8px;height:8px;-webkit-transform:translate(-50%,8.4px);-ms-transform:translate(-50%,8.4px);transform:translate(-50%,8.4px);background:#e69603;border-radius:50%}.lantern__tail .lantern__rect{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%,10.8px);-ms-transform:translate(-50%,10.8px);transform:translate(-50%,10.8px);width:8px;height:24px;background:orange;border-radius:5px 5px 0 5px}@-webkit-keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@keyframes lantern-swing{0%{-webkit-transform:rotate(-8deg);transform:rotate(-8deg)}to{-webkit-transform:rotate(8deg);transform:rotate(8deg)}}@media (max-width:520px){.j-china-lantern{display: none;}');var t;(t=document.createElement("div")).className="j-china-lantern",t.innerHTML='<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>',document.body.appendChild(t)}));
--- a/src/views/Box/index.vue
+++ b/src/views/Box/index.vue
@ -31,10 +31,9 @@
 </template>

 <script setup>
-import { ref } from "vue";
 import { CloseOne, SettingTwo } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
-import TimeCapsule from "@/components/TimeCapsule/index.vue";
+import TimeCapsule from "@/components/TimeCapsule.vue";

 const store = mainStore();
 const closeShow = ref(false);
@ -46,8 +45,7 @@ const closeShow = ref(false);
  margin-left: 0.75rem;
  height: 80%;
  position: relative;
-  animation: fade;
-  -webkit-animation: fade 0.5s;
+  animation: fade 0.5s;

  &:hover {
    transform: scale(1);
--- a/src/views/Func/index.vue
+++ b/src/views/Func/index.vue
@ -33,12 +33,11 @@
 </template>

 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
 import { getCurrentTime } from "@/utils/getTime";
 import { mainStore } from "@/store";
-import Music from "@/components/Music/index.vue";
-import Hitokoto from "@/components/Hitokoto/index.vue";
-import Weather from "@/components/Weather/index.vue";
+import Music from "@/components/Music.vue";
+import Hitokoto from "@/components/Hitokoto.vue";
+import Weather from "@/components/Weather.vue";

 const store = mainStore();

@ -114,8 +113,7 @@ onBeforeUnmount(() => {
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
-      animation: fade;
-      -webkit-animation: fade 0.5s;
+      animation: fade 0.5s;
      .time {
        font-size: 1.1rem;
        text-align: center;
--- a/src/views/Main/Left.vue
+++ b/src/views/Main/Left.vue
@ -7,8 +7,8 @@

 <script setup>
 import { mainStore } from "@/store";
-import Message from "@/components/Message/index.vue";
-import SocialLinks from "@/components/SocialLinks/index.vue";
+import Message from "@/components/Message.vue";
+import SocialLinks from "@/components/SocialLinks.vue";
 const store = mainStore();
 </script>

--- a/src/views/Main/Right.vue
+++ b/src/views/Main/Right.vue
@ -15,7 +15,7 @@
 <script setup>
 import { mainStore } from "@/store";
 import Func from "@/views/Func/index.vue";
-import Link from "@/components/Links/index.vue";
+import Link from "@/components/Links.vue";
 const store = mainStore();

 // 站点链接
@ -36,9 +36,8 @@ const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
    top: 6%;
    left: 0;
    text-align: center;
-    transition: all 0.3s;
-    animation: fade;
-    -webkit-animation: fade 0.5s;
+    transition: transform 0.3s;
+    animation: fade 0.5s;
    &:active {
      transform: scale(0.95);
    }
--- a/src/views/MoreSet/index.vue
+++ b/src/views/MoreSet/index.vue
@ -66,7 +66,6 @@
 </template>

 <script setup>
-import { reactive, ref } from "vue";
 import {
  CloseOne,
  SettingTwo,
@ -75,10 +74,10 @@ import {
  Bug,
 } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
-import Set from "@/components/Set/index.vue";
+import Set from "@/components/Set.vue";
 import config from "@/../package.json";
-const store = mainStore();

+const store = mainStore();
 const closeShow = ref(false);

 // 站点链接
@ -242,4 +241,4 @@ const jumpTo = (url) => {
    }
  }
 }
-</style>
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -1,135 +1,121 @@
-import {
-  defineConfig,
-  loadEnv
-} from 'vite';
-import vue from '@vitejs/plugin-vue';
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-import {
-  ElementPlusResolver
-} from 'unplugin-vue-components/resolvers'
-import {
-  createHtmlPlugin
-} from 'vite-plugin-html';
-import {
-  resolve
-} from 'path';
-import {
-  VitePWA
-} from 'vite-plugin-pwa';
+import { defineConfig, loadEnv } from "vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import { resolve } from "path";
+import { VitePWA } from "vite-plugin-pwa";
+import vue from "@vitejs/plugin-vue";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import viteCompression from "vite-plugin-compression";

 // https://vitejs.dev/config/
-export default ({
-  mode
-}) => defineConfig({
-  plugins: [
-    vue(),
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-    }),
-    createHtmlPlugin({
-      minify: true,
-      inject: {
-        data: {
-          logo: loadEnv(mode, process.cwd()).VITE_SITE_LOGO,
-          appleLogo: loadEnv(mode, process.cwd()).VITE_SITE_APPLE_LOGO,
-          title: loadEnv(mode, process.cwd()).VITE_SITE_NAME,
-          author: loadEnv(mode, process.cwd()).VITE_SITE_ANTHOR,
-          keywords: loadEnv(mode, process.cwd()).VITE_SITE_KEYWORDS,
+export default ({ mode }) =>
+  defineConfig({
+    plugins: [
+      vue(),
+      AutoImport({
+        imports: ["vue"],
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+      VitePWA({
+        registerType: "autoUpdate",
+        workbox: {
+          skipWaiting: true,
+          clientsClaim: true,
+          runtimeCaching: [
+            {
+              urlPattern: /(.*?)\.(js|css|woff2|woff|ttf)/, // js / css 静态资源缓存
+              handler: "CacheFirst",
+              options: {
+                cacheName: "js-css-cache",
+              },
+            },
+            {
+              urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
+              handler: "CacheFirst",
+              options: {
+                cacheName: "image-cache",
+              },
+            },
+          ],
+        },
+        manifest: {
+          name: loadEnv(mode, process.cwd()).VITE_SITE_NAME,
+          short_name: loadEnv(mode, process.cwd()).VITE_SITE_NAME,
          description: loadEnv(mode, process.cwd()).VITE_SITE_DES,
-          tongji: loadEnv(mode, process.cwd()).VITE_SITE_BAIDUTONGJI,
+          display: "standalone",
+          start_url: "/",
+          theme_color: "#424242",
+          background_color: "#424242",
+          icons: [
+            {
+              src: "/images/icon/48.png",
+              sizes: "48x48",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/72.png",
+              sizes: "72x72",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/96.png",
+              sizes: "96x96",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/128.png",
+              sizes: "128x128",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/144.png",
+              sizes: "144x144",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/192.png",
+              sizes: "192x192",
+              type: "image/png",
+            },
+            {
+              src: "/images/icon/512.png",
+              sizes: "512x512",
+              type: "image/png",
+            },
+          ],
+        },
+      }),
+      viteCompression(),
+    ],
+    server: {
+      port: "3000",
+      open: true,
+    },
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: resolve(__dirname, "src"),
+        },
+      ],
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          charset: false,
+          additionalData: `@import "./src/style/global.scss";`,
        },
      },
-    }),
-    VitePWA({
-      registerType: 'autoUpdate',
-      workbox: {
-        skipWaiting: true,
-        clientsClaim: true,
-        runtimeCaching: [{
-            urlPattern: /(.*?)\.(js|css|woff2|woff|ttf)/, // js / css 静态资源缓存
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'js-css-cache',
-            },
-          },
-          {
-            urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
-            handler: 'CacheFirst',
-            options: {
-              cacheName: 'image-cache',
-            },
-          },
-        ],
-      },
-      manifest: {
-        "name": loadEnv(mode, process.cwd()).VITE_SITE_NAME,
-        "short_name": loadEnv(mode, process.cwd()).VITE_SITE_NAME,
-        "description": loadEnv(mode, process.cwd()).VITE_SITE_DES,
-        "display": "standalone",
-        "start_url": "/",
-        "theme_color": "#424242",
-        "background_color": "#424242",
-        "icons": [{
-          "src": "/images/icon/48.png",
-          "sizes": "48x48",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/72.png",
-          "sizes": "72x72",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/96.png",
-          "sizes": "96x96",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/128.png",
-          "sizes": "128x128",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/144.png",
-          "sizes": "144x144",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/192.png",
-          "sizes": "192x192",
-          "type": "image/png"
-        }, {
-          "src": "/images/icon/512.png",
-          "sizes": "512x512",
-          "type": "image/png"
-        }]
-      }
-    }),
-  ],
-  server: {
-    port: "3000",
-    hmr: true,
-  },
-  resolve: {
-    alias: [{
-      find: '@',
-      replacement: resolve(__dirname, "src"),
-    }, ]
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        charset: false,
-        additionalData: `@import "./src/style/global.scss";`
-      }
-    }
-  },
-  build: {
-    minify: 'terser',
-    terserOptions: {
-      compress: {
-        // 生产环境时移除 console
-        pure_funcs: ['console.log'],
+    },
+    build: {
+      minify: "terser",
+      terserOptions: {
+        compress: {
+          pure_funcs: ["console.log"],
+        },
      },
    },
-  },
-})
+  });
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@`
				*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}noscript{z-index:1000;position:absolute;display:flex;justify-content:center;width:100%;margin-top:26px}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}