perf: 优化部分变量 & feat: 新增一个设置项 #124

.env

@@ -24,7 +24,7 @@ VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关
 # 天气 Key
 ## 请前往高德开放平台注册 Web服务 Key（免费的）
 ## 请各位大佬行行好，别再让我超量了
-VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
+VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"
 
 # 建站日期
 ## 请按照 YYYY-MM-DD 格式填写

src/App.vue

@@ -65,7 +65,7 @@ onMounted(() => {
     // 去除加载标记
     document.getElementsByTagName("body")[0].className = "";
     // 给加载动画添加结束标记
-    let loadingBox = document.getElementById("loading-box");
+    const loadingBox = document.getElementById("loading-box");
     loadingBox.classList.add("loaded");
   });
 

src/components/Background/index.vue

@@ -20,7 +20,7 @@ import { SuccessPicture } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 const store = mainStore();
 
-let bgUrl = ref(null); // 壁纸链接
+const bgUrl = ref(null); // 壁纸链接
 
 const changeBg = (type) => {
   if (type == 0) {

src/components/Footer/index.vue

@@ -35,7 +35,7 @@ import { mainStore } from "@/store";
 import config from "@/../package.json";
 const store = mainStore();
 
-let fullYear = new Date().getFullYear();
+const fullYear = new Date().getFullYear();
 </script>
 
 <style lang="scss" scoped>

src/components/Hitokoto/index.vue

@@ -34,17 +34,14 @@ import { mainStore } from "@/store";
 const store = mainStore();
 
 // 开启音乐面板按钮显隐
-let openMusicShow = ref(false);
+const openMusicShow = ref(false);
 
 // 一言数据
-let hitokotoData = reactive({
+const hitokotoData = reactive({
   text: "这里应该显示一句话",
   from: "無名",
 });
 
-// 打开音乐面板
-const openMusic = () => {};
-
 // 获取一言数据
 const getHitokotoData = () => {
   getHitokoto()

src/components/Links/index.vue

@@ -11,7 +11,7 @@
         :span="8"
         v-for="(item, index) in linksData"
         :key="item"
-        @click="jumpLink(item.link)"
+        @click="jumpLink(item)"
       >
         <div
           class="item cards"
@@ -28,7 +28,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import { Icon } from "@vicons/utils";
 import {
   Link,
@@ -39,10 +38,12 @@ import {
   Book,
   Fire,
 } from "@vicons/fa";
+import { mainStore } from "@/store";
+const store = mainStore();
 
 // 网站链接数据
 // 建议不要超出6个，若需要超出请自行调整样式
-let linksData = [
+const linksData = [
   {
     icon: Blog,
     name: "博客",
@@ -76,8 +77,12 @@ let linksData = [
 ];
 
 // 链接跳转
-const jumpLink = (url) => {
+const jumpLink = (data) => {
-  window.open(url, "_blank");
+  if (data.name === "音乐" && store.musicClick) {
+    if ($openList) $openList();
+  } else {
+    window.open(data.link, "_blank");
+  }
 };
 </script>
 
@@ -112,6 +117,11 @@ const jumpLink = (url) => {
         background: rgb(0 0 0 / 40%);
         transition: 0.3s;
       }
+
+      &:active {
+        transform: scale(1);
+      }
+
       .name {
         font-size: 1.1rem;
         margin-left: 8px;
@@ -135,4 +145,4 @@ const jumpLink = (url) => {
     }
   }
 }
-</style>
+</style>

src/components/Message/index.vue

@@ -36,12 +36,12 @@ import { mainStore } from "@/store";
 const store = mainStore();
 
 // 主页站点logo
-let siteLogo = import.meta.env.VITE_SITE_LOGO;
+const siteLogo = import.meta.env.VITE_SITE_LOGO;
 // 站点链接
-let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
+const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 
 // 简介区域文字
-let descriptionText = reactive({
+const descriptionText = reactive({
   hello: import.meta.env.VITE_DESC_HELLO,
   text: import.meta.env.VITE_DESC_TEXT,
 });

src/components/Music/index.vue

@@ -7,7 +7,7 @@
     v-show="store.musicOpenState"
   >
     <div class="btns">
-      <span @click="musicListShow = true">音乐列表</span>
+      <span @click="openMusicList()">音乐列表</span>
       <span @click="store.musicOpenState = false">回到一言</span>
     </div>
     <div class="control">
@@ -103,7 +103,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, onMounted, nextTick } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import {
   GoStart,
   PlayOne,
@@ -119,19 +119,23 @@ import { mainStore } from "@/store";
 const store = mainStore();
 
 // 音量条数据
-let volumeShow = ref(false);
+const volumeShow = ref(false);
-let volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
+const volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
 
 // 播放列表数据
-let musicListShow = ref(false);
+const musicListShow = ref(false);
 const playerRef = ref(null);
-const musicDialog = ref(null);
 const playerData = reactive({
   server: import.meta.env.VITE_SONG_SERVER,
   type: import.meta.env.VITE_SONG_TYPE,
   id: import.meta.env.VITE_SONG_ID,
 });
 
+// 开启播放列表
+const openMusicList = () => {
+  musicListShow.value = true;
+};
+
 // 音乐播放暂停
 const changePlayState = () => {
   playerRef.value.playToggle();
@@ -149,6 +153,8 @@ onMounted(() => {
       changePlayState();
     }
   });
+  // 挂载方法至 window
+  window.$openList = openMusicList;
 });
 
 // 监听音量变化
@@ -293,8 +299,8 @@ watch(
     border-radius: 6px;
     z-index: 999;
     @media (max-width: 720px) {
-    left: calc(50% - 45%);
+      left: calc(50% - 45%);
-    width: 90%;
+      width: 90%;
     }
     .close {
       position: absolute;
@@ -336,4 +342,4 @@ watch(
     transform: scale(1) translateY(0);
   }
 }
-</style>
+</style>

src/components/Player/index.vue

@@ -33,12 +33,12 @@ const store = mainStore();
 const player = ref(null);
 
 // 歌曲播放列表
-let playList = ref([]);
+const playList = ref([]);
-let playerLrc = ref("");
+const playerLrc = ref("");
 
 // 歌曲播放项
-let playIndex = ref(0);
+const playIndex = ref(0);
-let playListCount = ref(0);
+const playListCount = ref(0);
 
 // 配置项
 const props = defineProps({
@@ -216,6 +216,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
   width: 80%;
   background: transparent;
   border-radius: 6px;
+  font-family: "HarmonyOS_Regular", sans-serif !important;
   :deep(.aplayer-body) {
     .aplayer-pic {
       display: none;

src/components/Set/index.vue

@@ -21,6 +21,15 @@
             :inactive-icon="CloseSmall"
           />
         </div>
+        <div class="item">
+          <span class="text">音乐点击是否打开面板</span>
+          <el-switch
+            v-model="musicClick"
+            inline-prompt
+            :active-icon="CheckSmall"
+            :inactive-icon="CloseSmall"
+          />
+        </div>
       </el-collapse-item>
       <el-collapse-item title="其他设置" name="3">
         <div>设置内容待增加</div>
@@ -39,11 +48,11 @@ import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
 import { storeToRefs } from "pinia";
 
 const store = mainStore();
-const { siteStartShow } = storeToRefs(store);
+const { siteStartShow, musicClick } = storeToRefs(store);
 
 // 默认选中项
-let activeName = ref("1");
+const activeName = ref("1");
-let bgSet = ref("0");
+const bgSet = ref("0");
 
 onMounted(() => {
   bgSet.value = store.coverType.toString();
@@ -130,4 +139,4 @@ watch(
     }
   }
 }
-</style>
+</style>

src/components/SocialLinks/index.vue

@@ -23,8 +23,8 @@ import { getSocialLinks } from "@/api";
 import { Error } from "@icon-park/vue-next";
 
 // 社交链接数据
-let socialLinksData = ref([]);
+const socialLinksData = ref([]);
-let socialTip = ref("通过这里联系我吧");
+const socialTip = ref("通过这里联系我吧");
 
 // 获取社交链接数据
 const getSocialLinksData = () => {

src/components/TimeCapsule/index.vue

@@ -61,13 +61,13 @@ import { mainStore } from "@/store";
 const store = mainStore();
 
 // 进度条数据
-let timeData = ref(getTimeCapsule());
+const timeData = ref(getTimeCapsule());
-let startDate = ref(import.meta.env.VITE_SITE_START);
+const startDate = ref(import.meta.env.VITE_SITE_START);
-let startDateText = ref(null);
+const startDateText = ref(null);
-let timeInterval = null;
+const timeInterval = ref(null);
 
 onMounted(() => {
-  timeInterval = setInterval(() => {
+  timeInterval.value = setInterval(() => {
     timeData.value = getTimeCapsule();
     if (startDate.value)
       startDateText.value = siteDateStatistics(new Date(startDate.value));
@@ -75,7 +75,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  clearInterval(timeInterval);
+  clearInterval(timeInterval.value);
 });
 </script>
 

src/components/Weather/index.vue

@@ -20,10 +20,10 @@ import { getAdcode, getWeather } from "@/api";
 import { Error } from "@icon-park/vue-next";
 
 // 高德开发者 Key
-let mainKey = import.meta.env.VITE_WEATHER_KEY;
+const mainKey = import.meta.env.VITE_WEATHER_KEY;
 
 // 天气数据
-let weatherData = reactive({
+const weatherData = reactive({
   adCode: {
     city: null, // 城市
     adcode: null, // 城市编码

src/store/index.js

@@ -1,75 +1,73 @@
-import {
+import { defineStore } from "pinia";
-    defineStore
-} from "pinia";
 
 export const mainStore = defineStore("main", {
-    state: () => {
+  state: () => {
-        return {
+    return {
-            innerWidth: null, // 当前窗口宽度
+      innerWidth: null, // 当前窗口宽度
-            coverType: "0", // 壁纸种类
+      coverType: "0", // 壁纸种类
-            siteStartShow: true, // 建站日期显示
+      siteStartShow: true, // 建站日期显示
-            musicIsOk: false, // 音乐是否加载完成
+      musicIsOk: false, // 音乐是否加载完成
-            musicVolume: 0, // 音乐音量;
+      musicVolume: 0, // 音乐音量;
-            musicOpenState: false, // 音乐面板开启状态
+      musicOpenState: false, // 音乐面板开启状态
-            backgroundShow: false, // 壁纸展示状态
+      backgroundShow: false, // 壁纸展示状态
-            boxOpenState: false, // 盒子开启状态
+      boxOpenState: false, // 盒子开启状态
-            mobileOpenState: false, // 移动端开启状态
+      mobileOpenState: false, // 移动端开启状态
-            mobileFuncState: false, // 移动端功能区开启状态
+      mobileFuncState: false, // 移动端功能区开启状态
-            setOpenState: false, // 设置页面开启状态
+      setOpenState: false, // 设置页面开启状态
-            playerState: false, // 当前播放状态
+      playerState: false, // 当前播放状态
-            playerTitle: null, // 当前播放歌曲名
+      playerTitle: null, // 当前播放歌曲名
-            playerArtist: null, // 当前播放歌手名
+      playerArtist: null, // 当前播放歌手名
-            playerLrc: "歌词加载中", // 当前播放歌词
+      playerLrc: "歌词加载中", // 当前播放歌词
-        }
+      musicClick: false, // 音乐链接是否跳转
+    };
+  },
+  getters: {
+    // 获取歌词
+    getPlayerLrc(state) {
+      return state.playerLrc;
     },
-    getters: {
+    // 获取歌曲信息
-        // 获取歌词
+    getPlayerData(state) {
-        getPlayerLrc(state) {
+      return {
-            return state.playerLrc;
+        name: state.playerTitle,
-        },
+        artist: state.playerArtist,
-        // 获取歌曲信息
+      };
-        getPlayerData(state) {
-            return {
-                name: state.playerTitle,
-                artist: state.playerArtist,
-            }
-        },
-        // 获取页面宽度
-        getInnerWidth(state) {
-            return state.innerWidth;
-        }
     },
-    actions: {
+    // 获取页面宽度
-        // 更改当前页面宽度
+    getInnerWidth(state) {
-        setInnerWidth(value) {
+      return state.innerWidth;
-            this.innerWidth = value;
-            if (value >= 720) {
-                this.mobileOpenState = false;
-                this.mobileFuncState = false;
-            }
-        },
-        // 更改播放状态
-        setPlayerState(value) {
-            if (value) {
-                this.playerState = false;
-            } else {
-                this.playerState = true;
-            }
-
-        },
-        // 更改歌词
-        setPlayerLrc(value) {
-            this.playerLrc = value;
-        },
-        // 更改歌曲数据
-        setPlayerData(title, artist) {
-            this.playerTitle = title;
-            this.playerArtist = artist;
-        }
     },
-    persist: {
+  },
-        key: 'data',
+  actions: {
-        storage: window.localStorage,
+    // 更改当前页面宽度
-        paths: ['coverType', 'musicVolume', 'siteStartShow'],
+    setInnerWidth(value) {
+      this.innerWidth = value;
+      if (value >= 720) {
+        this.mobileOpenState = false;
+        this.mobileFuncState = false;
+      }
     },
-})
+    // 更改播放状态
+    setPlayerState(value) {
+      if (value) {
+        this.playerState = false;
+      } else {
+        this.playerState = true;
+      }
+    },
+    // 更改歌词
+    setPlayerLrc(value) {
+      this.playerLrc = value;
+    },
+    // 更改歌曲数据
+    setPlayerData(title, artist) {
+      this.playerTitle = title;
+      this.playerArtist = artist;
+    },
+  },
+  persist: {
+    key: "data",
+    storage: window.localStorage,
+    paths: ["coverType", "musicVolume", "siteStartShow", "musicClick"],
+  },
+});

src/views/Box/index.vue

@@ -37,7 +37,7 @@ import TimeCapsule from "@/components/TimeCapsule/index.vue";
 import { mainStore } from "@/store";
 const store = mainStore();
 
-let closeShow = ref(false);
+const closeShow = ref(false);
 </script>
 
 <style lang="scss" scoped>

src/views/Func/index.vue

@@ -43,17 +43,17 @@ import Weather from "@/components/Weather/index.vue";
 const store = mainStore();
 
 // 当前时间
-let currentTime = ref({});
+const currentTime = ref({});
-let timeInterval = null;
+const timeInterval = ref(null);
 
 onMounted(() => {
-  timeInterval = setInterval(() => {
+  timeInterval.value = setInterval(() => {
     currentTime.value = getCurrentTime();
   }, 1000);
 });
 
 onBeforeUnmount(() => {
-  clearInterval(timeInterval);
+  clearInterval(timeInterval.value);
 });
 </script>
 
@@ -137,4 +137,4 @@ onBeforeUnmount(() => {
     }
   }
 }
-</style>
+</style>

src/views/Main/Right.vue

@@ -13,14 +13,13 @@
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from "vue";
 import { mainStore } from "@/store";
 import Func from "@/views/Func/index.vue";
 import Link from "@/components/Links/index.vue";
 const store = mainStore();
 
 // 站点链接
-let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
+const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 </script>
 
 

src/views/MoreSet/index.vue

@@ -79,13 +79,13 @@ import Set from "@/components/Set/index.vue";
 import config from "@/../package.json";
 const store = mainStore();
 
-let closeShow = ref(false);
+const closeShow = ref(false);
 
 // 站点链接
-let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
+const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 
 // 更新日志
-let upData = reactive({
+const upData = reactive({
   new: [
     "采用 Vue 进行重构",
     "音乐歌单支持快速自定义",