✨ feat: 新增电台模式

- 修复搜索框无法输入空格 #102 - 优化部分动画展示
imsyy · Dec 25, 2023 · eed7696 · eed7696
1 parent b095e4e
commit eed7696
Show file tree

Hide file tree

Showing 36 changed files with 1,443 additions and 235 deletions.
diff --git a/README.md b/README.md
@@ -257,6 +257,7 @@ docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:2.0.0-beta.5
 <details>
 <summary>查看目录结构详情</summary>
 
+
 > ChatGPT 写的，如有错误，请见谅
 
 ```dir
@@ -394,22 +395,24 @@ docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:2.0.0-beta.5
 │       ├── List                          # 列表相关组件
 │       │   ├── album.vue                 # 专辑组件
 │       │   └── playlist.vue              # 歌单组件
+│       │   └── dj.vue                    # 电台组件
 │       ├── Local                         # 本地音乐相关组件
 │       │   ├── albums.vue                # 本地音乐专辑组件
 │       │   ├── artists.vue               # 本地音乐艺术家组件
 │       │   ├── index.vue                 # 本地音乐主组件
 │       │   └── songs.vue                 # 本地音乐歌曲组件
 │       ├── Player.vue                    # 视频播放器组件
-│       ├── Record                        # 电台相关组件
-│       │   ├── hot.vue                   # 电台热门组件
+│       ├── Dj                            # 电台相关组件
 │       │   └── index.vue                 # 电台主组件
+│       │   └── type.vue                  # 电台分类组件
 │       ├── Search                        # 搜索相关组件
 │       │   ├── albums.vue                # 搜索专辑组件
 │       │   ├── artists.vue               # 搜索艺术家组件
 │       │   ├── index.vue                 # 搜索主组件
 │       │   ├── playlists.vue             # 搜索歌单组件
 │       │   ├── songs.vue                 # 搜索歌曲组件
 │       │   └── videos.vue                # 搜索视频组件
+│       │   └── djs.vue                   # 搜索电台组件
 │       ├── Setting                       # 设置相关组件
 │       │   └── index.vue                 # 设置主组件
 │       ├── Song.vue

diff --git a/components.d.ts b/components.d.ts
@@ -27,6 +27,7 @@ declare module 'vue' {
     NAlert: typeof import('naive-ui')['NAlert']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NBackTop: typeof import('naive-ui')['NBackTop']
+    NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
@@ -43,6 +44,7 @@ declare module 'vue' {
     NGi: typeof import('naive-ui')['NGi']
     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NH4: typeof import('naive-ui')['NH4']

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <Provider>
     <!-- 主框架 -->
-    <n-layout class="all-layout">
+    <n-layout :class="['all-layout', { 'full-player': showFullPlayer }]">
       <!-- 导航栏 -->
       <n-layout-header bordered>
         <MainNav />
@@ -204,7 +204,9 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .all-layout {
   height: 100%;
-  transition: transform 0.3s;
+  transition:
+    transform 0.3s,
+    opacity 0.3s;
   .n-layout-header {
     height: 60px;
     display: flex;
@@ -230,5 +232,9 @@ onUnmounted(() => {
       bottom: 80px;
     }
   }
+  &.full-player {
+    opacity: 0;
+    transform: scale(0.9);
+  }
 }
 </style>
diff --git a/src/api/dj.js b/src/api/dj.js
@@ -24,6 +24,16 @@ export const getDjRecommend = () => {
   });
 };
 
+/**
+ * 电台个性推荐
+ */
+export const getDjPersonalRec = () => {
+  return axios({
+    method: "GET",
+    url: "/dj/personalize/recommend",
+  });
+};
+
 /**
  * 获取电台 - 推荐类型
  */
@@ -33,3 +43,94 @@ export const getDjCategoryRec = () => {
     url: "/dj/category/recommend",
   });
 };
+
+/**
+ * 私人 DJ
+ */
+export const getPrivateDj = () => {
+  return axios({
+    method: "GET",
+    url: "/aidj/content/rcmd",
+  });
+};
+
+/**
+ * 电台 - 类别热门电台
+ * @param {string} cateId - 类别 id
+ * @param {number} [limit=50] - 返回数量，默认 50
+ * @param {number} [offset=0] - 偏移数量，默认 0
+ */
+export const getRadioHot = (cateId, limit = 50, offset = 0) => {
+  return axios({
+    method: "GET",
+    url: "/dj/radio/hot",
+    params: {
+      cateId,
+      limit,
+      offset,
+    },
+  });
+};
+
+/**
+ * 电台 - 分类推荐
+ * @param {string} type - 类别 id
+ */
+export const getRecType = (type) => {
+  return axios({
+    method: "GET",
+    url: "/dj/recommend/type",
+    params: {
+      type,
+    },
+  });
+};
+
+/**
+ * 电台 - 详情
+ * @param {string} rid - 电台 的 id
+ */
+export const getDjDetail = (rid) => {
+  return axios({
+    method: "GET",
+    url: "/dj/detail",
+    params: {
+      rid,
+    },
+  });
+};
+
+/**
+ * 电台 - 节目
+ * @param {string} rid - 电台 的 id
+ * @param {number} [limit=50] - 返回数量，默认 50
+ * @param {number} [offset=0] - 偏移数量，默认 0
+ */
+export const getDjProgram = (rid, limit = 50, offset = 0) => {
+  return axios({
+    method: "GET",
+    url: "/dj/program",
+    params: {
+      rid,
+      limit,
+      offset,
+    },
+  });
+};
+
+/**
+ * 电台 - 订阅
+ * @param {number} rid - 电台 的 id
+ * @param {number} t - 操作类型，1为收藏，0为取消收藏
+ */
+export const likeDj = (rid, t) => {
+  return axios({
+    method: "GET",
+    url: "/dj/sub",
+    params: {
+      rid,
+      t,
+      timestamp: new Date().getTime(),
+    },
+  });
+};
diff --git a/src/api/user.js b/src/api/user.js
@@ -119,6 +119,19 @@ export const getUserMv = () => {
   });
 };
 
+/**
+ * 获取用户电台的订阅列表
+ */
+export const getUserDj = () => {
+  return axios({
+    method: "GET",
+    url: "/dj/sublist",
+    params: {
+      timestamp: new Date().getTime(),
+    },
+  });
+};
+
 /**
  * 获取用户喜欢的音乐列表
  * @param {string} uid 用户的id

diff --git a/src/assets/icon.json b/src/assets/icon.json
@@ -1,6 +1,7 @@
 {
   "album": "M12 11a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1m0 5.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5s4.5 2 4.5 4.5s-2 4.5-4.5 4.5M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z",
   "chevron-up": "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z",
+  "chevron-down": "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z",
   "play": "M9.525 18.025q-.5.325-1.012.038T8 17.175V6.825q0-.6.513-.888t1.012.038l8.15 5.175q.45.3.45.85t-.45.85l-8.15 5.175Z",
   "play-circle": "M10 16.5v-9l6 4.5M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Z",
   "play-next": "m10 16.5l6-4.5l-6-4.5M22 12c0-5.54-4.46-10-10-10c-1.17 0-2.3.19-3.38.56l.7 1.94c.85-.34 1.74-.53 2.68-.53c4.41 0 8.03 3.62 8.03 8.03c0 4.41-3.62 8.03-8.03 8.03c-4.41 0-8.03-3.62-8.03-8.03c0-.94.19-1.88.53-2.72l-1.94-.66C2.19 9.7 2 10.83 2 12c0 5.54 4.46 10 10 10s10-4.46 10-10M5.47 3.97c.85 0 1.53.71 1.53 1.5C7 6.32 6.32 7 5.47 7c-.79 0-1.5-.68-1.5-1.53c0-.79.71-1.5 1.5-1.5Z",

diff --git a/src/components/Cover/MainCover.vue b/src/components/Cover/MainCover.vue
@@ -64,11 +64,15 @@
           <div class="cover-content">
             <n-text class="name">{{ item.name }}</n-text>
             <!-- 创建者 -->
-            <n-text v-if="item.creator" class="creator" depth="3">
+            <n-text v-if="item?.creator" class="creator" depth="3">
               {{ item.creator?.nickname || item.creator || "未知" }}
             </n-text>
+            <!-- 电台简介 -->
+            <n-text v-if="item?.rcmdText" class="creator" depth="3">
+              {{ item.rcmdText || "未知简介" }}
+            </n-text>
             <!-- 歌手 -->
-            <div v-if="item.artists" class="artists">
+            <div v-if="item.artists && type !== 'dj'" class="artists">
               <n-text
                 v-for="ar in item.artists"
                 :key="ar.id"
@@ -198,6 +202,14 @@ const jumpLink = (data, type) => {
           },
         });
         break;
+      case "dj":
+        router.push({
+          path: "/dj",
+          query: {
+            id: data?.id,
+          },
+        });
+        break;
       default:
         break;
     }
@@ -260,7 +272,9 @@ const jumpLink = (data, type) => {
         top: -80px;
         left: 0;
         z-index: 1;
+        width: 100%;
         padding: 6px 10px;
+        box-sizing: border-box;
         background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
         opacity: 0;
         transition:

diff --git a/src/components/Global/Menu.vue b/src/components/Global/Menu.vue
@@ -140,12 +140,12 @@ const menuOptions = computed(() => [
         RouterLink,
         {
           to: {
-            name: "record",
+            name: "dj-hot",
           },
         },
         () => ["播客电台"],
       ),
-    key: "record",
+    key: "dj-hot",
     icon: renderIcon("record"),
   },
   {

diff --git a/src/components/Global/Playlist.vue b/src/components/Global/Playlist.vue
@@ -40,7 +40,8 @@
                   'songs-item',
                   { play: playSongData?.id === item?.id, player: showFullPlayer },
                 ]"
-                @click="playSong(item, index)"
+                @click.stop="playSong(item, index)"
+                @dblclick.stop="playSong(item, index)"
               >
                 <!-- 序号 -->
                 <n-text v-if="playSongData?.id !== item?.id" class="num" depth="3">
@@ -59,6 +60,9 @@
                       {{ ar.name }}
                     </n-text>
                   </div>
+                  <div v-else-if="playMode === 'dj'" class="artist">
+                    <n-text class="ar"> 电台节目 </n-text>
+                  </div>
                   <div v-else class="artist">
                     <n-text class="ar"> {{ item?.artists || "未知艺术家" }} </n-text>
                   </div>