Skip to content

Commit eed7696

Browse files
committed
✨ feat: 新增电台模式
- 修复搜索框无法输入空格 #102 - 优化部分动画展示
1 parent b095e4e commit eed7696

36 files changed

+1443
-235
lines changed

README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,7 @@ docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:2.0.0-beta.5
257257
<details>
258258
<summary>查看目录结构详情</summary>
259259

260+
260261
> ChatGPT 写的,如有错误,请见谅
261262
262263
```dir
@@ -394,22 +395,24 @@ docker run -d --name SPlayer -p 7899:7899 imsyy/splayer:2.0.0-beta.5
394395
│ ├── List # 列表相关组件
395396
│ │ ├── album.vue # 专辑组件
396397
│ │ └── playlist.vue # 歌单组件
398+
│ │ └── dj.vue # 电台组件
397399
│ ├── Local # 本地音乐相关组件
398400
│ │ ├── albums.vue # 本地音乐专辑组件
399401
│ │ ├── artists.vue # 本地音乐艺术家组件
400402
│ │ ├── index.vue # 本地音乐主组件
401403
│ │ └── songs.vue # 本地音乐歌曲组件
402404
│ ├── Player.vue # 视频播放器组件
403-
│ ├── Record # 电台相关组件
404-
│ │ ├── hot.vue # 电台热门组件
405+
│ ├── Dj # 电台相关组件
405406
│ │ └── index.vue # 电台主组件
407+
│ │ └── type.vue # 电台分类组件
406408
│ ├── Search # 搜索相关组件
407409
│ │ ├── albums.vue # 搜索专辑组件
408410
│ │ ├── artists.vue # 搜索艺术家组件
409411
│   │   ├── index.vue # 搜索主组件
410412
│   │   ├── playlists.vue # 搜索歌单组件
411413
│   │   ├── songs.vue # 搜索歌曲组件
412414
│   │   └── videos.vue # 搜索视频组件
415+
│   │   └── djs.vue # 搜索电台组件
413416
│   ├── Setting # 设置相关组件
414417
│   │   └── index.vue # 设置主组件
415418
│   ├── Song.vue

components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ declare module 'vue' {
2727
NAlert: typeof import('naive-ui')['NAlert']
2828
NAvatar: typeof import('naive-ui')['NAvatar']
2929
NBackTop: typeof import('naive-ui')['NBackTop']
30+
NBadge: typeof import('naive-ui')['NBadge']
3031
NButton: typeof import('naive-ui')['NButton']
3132
NCard: typeof import('naive-ui')['NCard']
3233
NCheckbox: typeof import('naive-ui')['NCheckbox']
@@ -43,6 +44,7 @@ declare module 'vue' {
4344
NGi: typeof import('naive-ui')['NGi']
4445
NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
4546
NGrid: typeof import('naive-ui')['NGrid']
47+
NGridItem: typeof import('naive-ui')['NGridItem']
4648
NH1: typeof import('naive-ui')['NH1']
4749
NH3: typeof import('naive-ui')['NH3']
4850
NH4: typeof import('naive-ui')['NH4']

src/App.vue

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Provider>
33
<!-- 主框架 -->
4-
<n-layout class="all-layout">
4+
<n-layout :class="['all-layout', { 'full-player': showFullPlayer }]">
55
<!-- 导航栏 -->
66
<n-layout-header bordered>
77
<MainNav />
@@ -204,7 +204,9 @@ onUnmounted(() => {
204204
<style lang="scss" scoped>
205205
.all-layout {
206206
height: 100%;
207-
transition: transform 0.3s;
207+
transition:
208+
transform 0.3s,
209+
opacity 0.3s;
208210
.n-layout-header {
209211
height: 60px;
210212
display: flex;
@@ -230,5 +232,9 @@ onUnmounted(() => {
230232
bottom: 80px;
231233
}
232234
}
235+
&.full-player {
236+
opacity: 0;
237+
transform: scale(0.9);
238+
}
233239
}
234240
</style>

src/api/dj.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ export const getDjRecommend = () => {
2424
});
2525
};
2626

27+
/**
28+
* 电台个性推荐
29+
*/
30+
export const getDjPersonalRec = () => {
31+
return axios({
32+
method: "GET",
33+
url: "/dj/personalize/recommend",
34+
});
35+
};
36+
2737
/**
2838
* 获取电台 - 推荐类型
2939
*/
@@ -33,3 +43,94 @@ export const getDjCategoryRec = () => {
3343
url: "/dj/category/recommend",
3444
});
3545
};
46+
47+
/**
48+
* 私人 DJ
49+
*/
50+
export const getPrivateDj = () => {
51+
return axios({
52+
method: "GET",
53+
url: "/aidj/content/rcmd",
54+
});
55+
};
56+
57+
/**
58+
* 电台 - 类别热门电台
59+
* @param {string} cateId - 类别 id
60+
* @param {number} [limit=50] - 返回数量,默认 50
61+
* @param {number} [offset=0] - 偏移数量,默认 0
62+
*/
63+
export const getRadioHot = (cateId, limit = 50, offset = 0) => {
64+
return axios({
65+
method: "GET",
66+
url: "/dj/radio/hot",
67+
params: {
68+
cateId,
69+
limit,
70+
offset,
71+
},
72+
});
73+
};
74+
75+
/**
76+
* 电台 - 分类推荐
77+
* @param {string} type - 类别 id
78+
*/
79+
export const getRecType = (type) => {
80+
return axios({
81+
method: "GET",
82+
url: "/dj/recommend/type",
83+
params: {
84+
type,
85+
},
86+
});
87+
};
88+
89+
/**
90+
* 电台 - 详情
91+
* @param {string} rid - 电台 的 id
92+
*/
93+
export const getDjDetail = (rid) => {
94+
return axios({
95+
method: "GET",
96+
url: "/dj/detail",
97+
params: {
98+
rid,
99+
},
100+
});
101+
};
102+
103+
/**
104+
* 电台 - 节目
105+
* @param {string} rid - 电台 的 id
106+
* @param {number} [limit=50] - 返回数量,默认 50
107+
* @param {number} [offset=0] - 偏移数量,默认 0
108+
*/
109+
export const getDjProgram = (rid, limit = 50, offset = 0) => {
110+
return axios({
111+
method: "GET",
112+
url: "/dj/program",
113+
params: {
114+
rid,
115+
limit,
116+
offset,
117+
},
118+
});
119+
};
120+
121+
/**
122+
* 电台 - 订阅
123+
* @param {number} rid - 电台 的 id
124+
* @param {number} t - 操作类型,1为收藏,0为取消收藏
125+
*/
126+
export const likeDj = (rid, t) => {
127+
return axios({
128+
method: "GET",
129+
url: "/dj/sub",
130+
params: {
131+
rid,
132+
t,
133+
timestamp: new Date().getTime(),
134+
},
135+
});
136+
};

src/api/user.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,19 @@ export const getUserMv = () => {
119119
});
120120
};
121121

122+
/**
123+
* 获取用户电台的订阅列表
124+
*/
125+
export const getUserDj = () => {
126+
return axios({
127+
method: "GET",
128+
url: "/dj/sublist",
129+
params: {
130+
timestamp: new Date().getTime(),
131+
},
132+
});
133+
};
134+
122135
/**
123136
* 获取用户喜欢的音乐列表
124137
* @param {string} uid 用户的id

src/assets/icon.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"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",
33
"chevron-up": "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z",
4+
"chevron-down": "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z",
45
"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",
56
"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",
67
"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",

src/components/Cover/MainCover.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,15 @@
6464
<div class="cover-content">
6565
<n-text class="name">{{ item.name }}</n-text>
6666
<!-- 创建者 -->
67-
<n-text v-if="item.creator" class="creator" depth="3">
67+
<n-text v-if="item?.creator" class="creator" depth="3">
6868
{{ item.creator?.nickname || item.creator || "未知" }}
6969
</n-text>
70+
<!-- 电台简介 -->
71+
<n-text v-if="item?.rcmdText" class="creator" depth="3">
72+
{{ item.rcmdText || "未知简介" }}
73+
</n-text>
7074
<!-- 歌手 -->
71-
<div v-if="item.artists" class="artists">
75+
<div v-if="item.artists && type !== 'dj'" class="artists">
7276
<n-text
7377
v-for="ar in item.artists"
7478
:key="ar.id"
@@ -198,6 +202,14 @@ const jumpLink = (data, type) => {
198202
},
199203
});
200204
break;
205+
case "dj":
206+
router.push({
207+
path: "/dj",
208+
query: {
209+
id: data?.id,
210+
},
211+
});
212+
break;
201213
default:
202214
break;
203215
}
@@ -260,7 +272,9 @@ const jumpLink = (data, type) => {
260272
top: -80px;
261273
left: 0;
262274
z-index: 1;
275+
width: 100%;
263276
padding: 6px 10px;
277+
box-sizing: border-box;
264278
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
265279
opacity: 0;
266280
transition:

src/components/Global/Menu.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,12 +140,12 @@ const menuOptions = computed(() => [
140140
RouterLink,
141141
{
142142
to: {
143-
name: "record",
143+
name: "dj-hot",
144144
},
145145
},
146146
() => ["播客电台"],
147147
),
148-
key: "record",
148+
key: "dj-hot",
149149
icon: renderIcon("record"),
150150
},
151151
{

src/components/Global/Playlist.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@
4040
'songs-item',
4141
{ play: playSongData?.id === item?.id, player: showFullPlayer },
4242
]"
43-
@click="playSong(item, index)"
43+
@click.stop="playSong(item, index)"
44+
@dblclick.stop="playSong(item, index)"
4445
>
4546
<!-- 序号 -->
4647
<n-text v-if="playSongData?.id !== item?.id" class="num" depth="3">
@@ -59,6 +60,9 @@
5960
{{ ar.name }}
6061
</n-text>
6162
</div>
63+
<div v-else-if="playMode === 'dj'" class="artist">
64+
<n-text class="ar"> 电台节目 </n-text>
65+
</div>
6266
<div v-else class="artist">
6367
<n-text class="ar"> {{ item?.artists || "未知艺术家" }} </n-text>
6468
</div>

0 commit comments

Comments
 (0)