Merge pull request #212 from imsyy/dev

feat: 同步

.env

@@ -3,7 +3,7 @@ VITE_SITE_NAME = "無名の主页" # 名称
 VITE_SITE_ANTHOR = "無名" # 作者
 VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
 VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
-VITE_SITE_URL = "imsyy.top" # 站点地址
+VITE_SITE_URL = "jmsyy.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 端图标
@@ -47,5 +47,5 @@ VITE_SONG_API = "https://api-meting.imsyy.top/api"
 VITE_SONG_SERVER = "netease"
 # 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
 VITE_SONG_TYPE = "playlist"
-# 播放 ID
+# 播放 ID ( 若无需播放器，请设为空即可 )
 VITE_SONG_ID = "7452421335"

README.md

@@ -207,7 +207,7 @@ if (type == 0) {
 * [高德开放平台](https://lbs.amap.com/)
 * [Hitokoto 一言](https://hitokoto.cn/)
 * [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
-* 
+
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=imsyy/home&type=Date)](https://star-history.com/#imsyy/home&Date)

package.json

@@ -4,7 +4,7 @@
   "github": "https://github.com/imsyy/home",
   "home": "https://imsyy.top",
   "private": true,
-  "version": "4.1.2",
+  "version": "4.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

public/font/README.md

@@ -0,0 +1,3 @@
+## Logo 字体替换
+
+可将该文件夹下的 `Pacifico-Regular-all.ttf` 替换原来的 `Pacifico-Regular.ttf`

src/App.vue

@@ -17,7 +17,12 @@
         </section>
       </div>
       <!-- 移动端菜单按钮 -->
-      <Icon class="menu" size="24" @click="store.mobileOpenState = !store.mobileOpenState">
+      <Icon
+        class="menu"
+        size="24"
+        v-show="!store.backgroundShow"
+        @click="store.mobileOpenState = !store.mobileOpenState"
+      >
         <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
       </Icon>
       <!-- 页脚 -->
@@ -178,7 +183,7 @@ onBeforeUnmount(() => {
     .i-icon {
       transform: translateY(2px);
     }
-    @media (min-width: 720px) {
+    @media (min-width: 721px) {
       display: none;
     }
   }

src/components/Background.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cover">
+  <div :class="store.backgroundShow ? 'cover show' : 'cover'">
     <img
       v-show="store.imgLoadStatus"
       class="bg"
@@ -99,6 +99,10 @@ onBeforeUnmount(() => {
   transition: 0.25s;
   z-index: -1;
 
+  &.show {
+    z-index: 1;
+  }
+
   .bg {
     position: absolute;
     left: 0;

src/components/Hitokoto.vue

@@ -18,10 +18,12 @@
       </div>
     </Transition>
     <!-- 一言内容 -->
-    <div class="content" @click="updateHitokoto">
+    <Transition name="el-fade-in-linear" mode="out-in">
-      <span class="text">{{ hitokotoData.text }}</span>
+      <div :key="hitokotoData.text" class="content" @click="updateHitokoto">
-      <span class="from">-「&nbsp;{{ hitokotoData.from }}&nbsp;」</span>
+        <span class="text">{{ hitokotoData.text }}</span>
-    </div>
+        <span class="from">-「&nbsp;{{ hitokotoData.from }}&nbsp;」</span>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -57,13 +59,13 @@ const getHitokotoData = () => {
           fill: "#efefef",
         }),
       });
+      hitokotoData.text = "这里应该显示一句话";
+      hitokotoData.from = "無名";
     });
 };
 
 // 更新一言数据
 const updateHitokoto = () => {
-  hitokotoData.text = "新的一言正在赶来的路上";
-  hitokotoData.from = "来源加载中";
   // 防抖
   debounce(() => {
     getHitokotoData();

src/components/Message.vue

@@ -4,7 +4,7 @@
     <!-- Logo -->
     <div class="logo">
       <img class="logo-img" :src="siteLogo" alt="logo" />
-      <div class="name text-hidden">
+      <div :class="{ name: true, 'text-hidden': true, long: siteUrl[0].length >= 6 }">
         <span class="bg">{{ siteUrl[0] }}</span>
         <span class="sm">.{{ siteUrl[1] }}</span>
       </div>
@@ -97,9 +97,8 @@ watch(
       width: 120px;
     }
     .name {
-      width: 100%;
+      width: calc(460px - 120px);
-      height: 142px;
+      padding-left: 22px;
-      margin-left: 12px;
       transform: translateY(-8px);
       font-family: "Pacifico-Regular";
 

src/components/Music.vue

@@ -42,7 +42,7 @@
     </div>
   </div>
   <!-- 音乐列表弹窗 -->
-  <Transition name="fade">
+  <Transition name="fade" mode="out-in">
     <div class="music-list" v-show="musicListShow" @click="musicListShow = false">
       <Transition name="zoom">
         <div class="list" v-show="musicListShow" @click.stop>
@@ -281,12 +281,6 @@ watch(
 }
 
 // 弹窗动画
-.fade-enter-active {
-  animation: fade 0.3s ease-in-out;
-}
-.fade-leave-active {
-  animation: fade 0.3s ease-in-out reverse;
-}
 .zoom-enter-active {
   animation: zoom 0.4s ease-in-out;
 }

src/components/Player.vue

@@ -16,6 +16,7 @@
     @pause="onPause"
     @timeupdate="onTimeUp"
     @onSelectSong="onSelectSong"
+    @error="loadMusicError"
   />
 </template>
 
@@ -37,6 +38,8 @@ const playList = ref([]);
 const playIndex = ref(0);
 const playListCount = ref(0);
 
+const skipTimeout = ref(null);
+
 // 配置项
 const props = defineProps({
   // 音频自动播放
@@ -202,8 +205,39 @@ const changeSong = (type) => {
   });
 };
 
+// 加载音频错误
+const loadMusicError = () => {
+  let notice = "";
+  if (playList.value.length > 1) {
+    notice = "播放歌曲出现错误，播放器将在 2s 后进行下一首";
+    // 播放下一首
+    skipTimeout.value = setTimeout(() => {
+      changeSong(1);
+      if (!player.value.audio.paused) {
+        onPlay();
+      }
+    }, 2000);
+  } else {
+    notice = "播放歌曲出现错误";
+  }
+  ElMessage({
+    message: notice,
+    grouping: true,
+    icon: h(PlayWrong, {
+      theme: "filled",
+      fill: "#EFEFEF",
+      duration: 2000,
+    }),
+  });
+  console.error("播放歌曲: " + player.value.currentMusic.title + " 出现错误");
+};
+
 // 暴露子组件方法
 defineExpose({ playToggle, changeVolume, changeSong });
+
+onBeforeUnmount(() => {
+  clearTimeout(skipTimeout.value);
+});
 </script>
 
 <style lang="scss" scoped>

src/views/Func/index.vue

@@ -5,7 +5,7 @@
       <el-col :span="12">
         <div class="left">
           <Hitokoto />
-          <Music />
+          <Music v-if="playerHasId" />
         </div>
       </el-col>
       <el-col :span="12">
@@ -41,6 +41,9 @@ const store = mainStore();
 const currentTime = ref({});
 const timeInterval = ref(null);
 
+// 播放器 id
+const playerHasId = import.meta.env.VITE_SONG_ID;
+
 // 更新时间
 const updateTimeData = () => {
   currentTime.value = getCurrentTime();

src/views/MoreSet/index.vue

@@ -133,7 +133,7 @@ const jumpTo = (url) => {
       .logo {
         transform: translateY(-8%);
         font-family: "Pacifico-Regular";
-        // line-height: 5rem;
+        padding-left: 22px;
         width: 100%;
         height: 260px;