feat: 播放器新增唱片模式 & fix: 修复侧边栏样式异常 #95

imsyy · Dec 4, 2023 · b1cda68 · b1cda68
1 parent dd1081c
commit b1cda68
Show file tree

Hide file tree

Showing 13 changed files with 511 additions and 125 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -79,7 +79,9 @@ declare module 'vue' {
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     Pagination: typeof import('./src/components/Global/Pagination.vue')['default']
+    PlayCover: typeof import('./src/components/Player/PlayCover.vue')['default']
     PlayerControl: typeof import('./src/components/Player/PlayerControl.vue')['default']
+    PlayerCover: typeof import('./src/components/Player/PlayerCover.vue')['default']
     Playlist: typeof import('./src/components/Global/Playlist.vue')['default']
     PlaylistUpdate: typeof import('./src/components/Modal/PlaylistUpdate.vue')['default']
     PrivateFm: typeof import('./src/components/Player/PrivateFm.vue')['default']

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "splayer",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",

diff --git a/public/images/pic/pointer.png b/public/images/pic/pointer.png
diff --git a/src/components/Global/Menu.vue b/src/components/Global/Menu.vue
@@ -6,7 +6,7 @@
     class="main-menu"
     :root-indent="36"
     :indent="0"
-    :collapsed="status.asideMenuCollapsed"
+    :collapsed="asideMenuCollapsed.value"
     :defaultExpandedKeys="['user-playlists', 'favorite-playlists']"
     :collapsed-width="64"
     :collapsed-icon-size="22"
@@ -36,6 +36,7 @@ const router = useRouter();
 const data = siteData();
 const music = musicData();
 const status = siteStatus();
+const { asideMenuCollapsed } = storeToRefs(status);
 const { userData, userLikeData } = storeToRefs(data);
 const { playList, playListOld, playIndex, playSongData, playHeartbeatMode, playMode } =
   storeToRefs(music);
@@ -90,7 +91,7 @@ const menuOptions = computed(() => [
     label: "在线音乐",
     key: "online",
     children: [],
-    show: !status.asideMenuCollapsed,
+    show: !asideMenuCollapsed.value,
   },
   {
     label: () =>
@@ -143,7 +144,7 @@ const menuOptions = computed(() => [
     label: "我的音乐",
     key: "user",
     children: [],
-    show: !status.asideMenuCollapsed,
+    show: !asideMenuCollapsed.value,
   },
   {
     label: () =>
@@ -157,19 +158,33 @@ const menuOptions = computed(() => [
           menuid: "like-songs",
         },
         () => [
-          h(NText, null, () => ["喜欢的音乐"]),
-          h(NButton, {
-            size: "small",
-            type: "tertiary",
-            round: true,
-            strong: true,
-            secondary: true,
-            renderIcon: renderIcon("heartbit", "26"),
-            onclick: (event) => {
-              event.stopPropagation();
-              startHeartRate();
+          h(
+            "div",
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              },
             },
-          }),
+            [
+              h("span", null, ["喜欢的音乐"]),
+              h(NButton, {
+                size: "small",
+                type: "tertiary",
+                round: true,
+                strong: true,
+                secondary: true,
+                class: asideMenuCollapsed.value ? "heart-rate-btn collapsed" : "heart-rate-btn",
+                renderIcon: renderIcon("heartbit", "26"),
+                onclick: (event) => {
+                  event.stopPropagation();
+                  startHeartRate();
+                },
+              }),
+            ],
+          ),
         ],
       ),
     key: "like-songs",
@@ -222,8 +237,8 @@ const menuOptions = computed(() => [
     key: "divider-2",
     type: "divider",
   },
-  { ...userPlaylists.value, show: !status.asideMenuCollapsed },
-  { ...favoritePlaylists.value, show: !status.asideMenuCollapsed },
+  { ...userPlaylists.value, show: !asideMenuCollapsed.value },
+  { ...favoritePlaylists.value, show: !asideMenuCollapsed.value },
 ]);
 
 // 更改用户的歌单
@@ -446,3 +461,22 @@ onMounted(() => {
   }
 }
 </style>
+
+<!-- 特殊样式 -->
+<style lang="scss">
+.heart-rate-btn {
+  &:hover {
+    background-color: var(--main-second-color) !important;
+    color: var(--main-color) !important;
+  }
+  &.collapsed {
+    margin-left: 12px;
+    background-color: #efefef40;
+    color: #efefef;
+    &:hover {
+      background-color: #efefef60 !important;
+      color: #efefef !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/List/CommentList.vue b/src/components/List/CommentList.vue
@@ -293,7 +293,7 @@ const toLikeComment = throttle(
         width: 100%;
         padding: 4px 8px;
         border-radius: 8px;
-        background-color: var(--n-border-color);
+        background-color: var(--main-second-color);
         font-size: 13px;
         margin-top: 6px;
         box-sizing: border-box;