Merge pull request #212 from imsyy/dev

feat: 同步

Author: imsyy

.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/Pacifico-Regular-all.ttf

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

public/font/README.md

@@ -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/App.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/Background.vue

@@ -18,10 +18,12 @@
       </div>
     </Transition>
     <!-- 一言内容 -->
-    <div class="content" @click="updateHitokoto">
-      <span class="text">{{ hitokotoData.text }}</span>
-      <span class="from">-「&nbsp;{{ hitokotoData.from }}&nbsp;」</span>
-    </div>
+    <Transition name="el-fade-in-linear" mode="out-in">
+      <div :key="hitokotoData.text" class="content" @click="updateHitokoto">
+        <span class="text">{{ hitokotoData.text }}</span>
+        <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/Hitokoto.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%;
-      height: 142px;
-      margin-left: 12px;
+      width: calc(460px - 120px);
+      padding-left: 22px;
       transform: translateY(-8px);
       font-family: "Pacifico-Regular";
 

src/components/Message.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;
 }