@neteasecloudmusicapienhanced/api 4.29.21 → 4.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +9 -0
- package/interface.d.ts +2 -0
- package/module/musician_vip_tasks.js +11 -0
- package/package.json +8 -8
- package/public/api.html +115 -49
- package/public/audio_match_demo/afp.js +2 -3
- package/public/audio_match_demo/index.html +213 -44
- package/public/avatar_update.html +296 -43
- package/public/cloud.html +148 -40
- package/public/docs/home.md +8 -0
- package/public/docs/index.html +3 -3
- package/public/eapi_decrypt.html +174 -36
- package/public/index.html +18 -18
- package/public/listen_together_host.html +294 -65
- package/public/login.html +190 -18
- package/public/playlist_cover_update.html +278 -31
- package/public/playlist_import.html +381 -226
- package/public/qrlogin-nocookie.html +170 -43
- package/public/qrlogin.html +170 -42
- package/public/unblock_test.html +95 -35
- package/public/voice_upload.html +256 -57
- package/server.js +1 -1
- package/util/client-sign.js +1 -1
package/public/eapi_decrypt.html
CHANGED
|
@@ -1,50 +1,181 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
3
|
-
|
|
2
|
+
<html lang="zh">
|
|
4
3
|
<head>
|
|
5
4
|
<meta charset="UTF-8">
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
6
|
<title>eapi 参数和返回内容解析</title>
|
|
8
|
-
<
|
|
9
|
-
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
background: #f5f5f5;
|
|
18
|
+
padding: 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
max-width: 900px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
background: white;
|
|
25
|
+
border-radius: 12px;
|
|
26
|
+
padding: 32px;
|
|
27
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1 {
|
|
31
|
+
font-size: 24px;
|
|
32
|
+
font-weight: 600;
|
|
33
|
+
color: #333;
|
|
34
|
+
margin-bottom: 24px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.form-group {
|
|
38
|
+
margin-bottom: 24px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
label {
|
|
42
|
+
display: block;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
font-weight: 500;
|
|
45
|
+
color: #555;
|
|
46
|
+
margin-bottom: 8px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
textarea {
|
|
50
|
+
width: 100%;
|
|
51
|
+
padding: 12px;
|
|
52
|
+
border: 1px solid #ddd;
|
|
53
|
+
border-radius: 6px;
|
|
54
|
+
font-family: 'Courier New', monospace;
|
|
55
|
+
font-size: 13px;
|
|
56
|
+
resize: vertical;
|
|
57
|
+
min-height: 200px;
|
|
58
|
+
outline: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
textarea:focus {
|
|
62
|
+
border-color: #333;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.radio-group {
|
|
66
|
+
display: flex;
|
|
67
|
+
gap: 24px;
|
|
68
|
+
margin-bottom: 24px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.radio-item {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 8px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.radio-item input[type="radio"] {
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.radio-item label {
|
|
82
|
+
margin: 0;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
font-size: 14px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
button {
|
|
88
|
+
background: #333;
|
|
89
|
+
color: white;
|
|
90
|
+
padding: 12px 28px;
|
|
91
|
+
border: none;
|
|
92
|
+
border-radius: 6px;
|
|
93
|
+
font-size: 15px;
|
|
94
|
+
font-weight: 500;
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
transition: background 0.2s ease;
|
|
97
|
+
}
|
|
10
98
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
99
|
+
button:hover {
|
|
100
|
+
background: #555;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.result-section {
|
|
104
|
+
margin-top: 24px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.result-section label {
|
|
108
|
+
margin-bottom: 12px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.decode-result {
|
|
112
|
+
white-space: pre-wrap;
|
|
113
|
+
word-break: break-all;
|
|
114
|
+
background: #f9f9f9;
|
|
115
|
+
padding: 16px;
|
|
116
|
+
border-radius: 6px;
|
|
117
|
+
border: 1px solid #eee;
|
|
118
|
+
min-height: 200px;
|
|
119
|
+
max-height: 400px;
|
|
120
|
+
overflow: auto;
|
|
121
|
+
font-family: 'Courier New', monospace;
|
|
122
|
+
font-size: 13px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.example-section {
|
|
126
|
+
margin-top: 32px;
|
|
127
|
+
padding-top: 24px;
|
|
128
|
+
border-top: 1px solid #eee;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.example-section h2 {
|
|
132
|
+
font-size: 18px;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
color: #333;
|
|
135
|
+
margin-bottom: 16px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.example-section img {
|
|
139
|
+
max-width: 100%;
|
|
140
|
+
height: auto;
|
|
141
|
+
border-radius: 6px;
|
|
142
|
+
margin-bottom: 16px;
|
|
143
|
+
border: 1px solid #eee;
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
146
|
+
</head>
|
|
23
147
|
|
|
24
148
|
<body>
|
|
25
|
-
<div id="app" class="
|
|
26
|
-
<h1
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<div class="mt-3">
|
|
32
|
-
<input type="radio" id="format" name="format" v-model="isReq" value="true">
|
|
33
|
-
<label for="format" class="ml-2">请求数据request params(针对请求数据的 params)</label>
|
|
34
|
-
<input type="radio" id="noFormat" name="format" v-model="isReq" value="false" class="ml-5">
|
|
35
|
-
<label for="noFormat" class="ml-2">返回数据 response 二进制数据(针对返回内容解析)</label>
|
|
149
|
+
<div id="app" class="container">
|
|
150
|
+
<h1>eapi 参数和返回内容解析</h1>
|
|
151
|
+
|
|
152
|
+
<div class="form-group">
|
|
153
|
+
<label for="hexString">十六进制字符串</label>
|
|
154
|
+
<textarea id="hexString" v-model="hexString" rows="10"></textarea>
|
|
36
155
|
</div>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
156
|
+
|
|
157
|
+
<div class="radio-group">
|
|
158
|
+
<div class="radio-item">
|
|
159
|
+
<input type="radio" id="req" name="format" v-model="isReq" value="true">
|
|
160
|
+
<label for="req">请求数据 request params</label>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="radio-item">
|
|
163
|
+
<input type="radio" id="resp" name="format" v-model="isReq" value="false">
|
|
164
|
+
<label for="resp">返回数据 response 二进制数据</label>
|
|
165
|
+
</div>
|
|
41
166
|
</div>
|
|
42
167
|
|
|
168
|
+
<button @click="decrypt">解密</button>
|
|
169
|
+
|
|
170
|
+
<div class="result-section">
|
|
171
|
+
<label>解密结果：</label>
|
|
172
|
+
<pre class="decode-result">{{ formatResult(result) }}</pre>
|
|
173
|
+
</div>
|
|
43
174
|
|
|
44
|
-
<div>
|
|
45
|
-
<
|
|
46
|
-
<img src="/static/eapi_params.png" />
|
|
47
|
-
<img src="/static/eapi_response.png" />
|
|
175
|
+
<div class="example-section">
|
|
176
|
+
<h2>使用示例</h2>
|
|
177
|
+
<img src="/static/eapi_params.png" alt="请求示例" />
|
|
178
|
+
<img src="/static/eapi_response.png" alt="响应示例" />
|
|
48
179
|
</div>
|
|
49
180
|
</div>
|
|
50
181
|
|
|
@@ -64,6 +195,13 @@
|
|
|
64
195
|
this.decrypt()
|
|
65
196
|
},
|
|
66
197
|
methods: {
|
|
198
|
+
formatResult(result) {
|
|
199
|
+
try {
|
|
200
|
+
return JSON.stringify(JSON.parse(result), null, 2)
|
|
201
|
+
} catch (e) {
|
|
202
|
+
return result
|
|
203
|
+
}
|
|
204
|
+
},
|
|
67
205
|
async decrypt() {
|
|
68
206
|
try {
|
|
69
207
|
const res = await axios({
|
|
@@ -77,7 +215,7 @@
|
|
|
77
215
|
console.log(res.data);
|
|
78
216
|
} catch (error) {
|
|
79
217
|
console.error(error)
|
|
80
|
-
alert(error?.response?.data?.message || '
|
|
218
|
+
alert(error?.response?.data?.message || '解密失败，数据格式错误')
|
|
81
219
|
}
|
|
82
220
|
}
|
|
83
221
|
}
|
package/public/index.html
CHANGED
|
@@ -7,33 +7,33 @@
|
|
|
7
7
|
<title>网易云音乐 API Enhanced</title>
|
|
8
8
|
<style>
|
|
9
9
|
:root {
|
|
10
|
-
--fg: #
|
|
11
|
-
--muted: #
|
|
12
|
-
--border: #
|
|
13
|
-
--bg: #
|
|
14
|
-
--panel: #
|
|
15
|
-
--accent: #
|
|
10
|
+
--fg: #333;
|
|
11
|
+
--muted: #666;
|
|
12
|
+
--border: #ddd;
|
|
13
|
+
--bg: #f5f5f5;
|
|
14
|
+
--panel: #ffffff;
|
|
15
|
+
--accent: #333;
|
|
16
16
|
}
|
|
17
17
|
* { box-sizing: border-box; }
|
|
18
18
|
html, body { height: 100%; }
|
|
19
|
-
body { margin: 0; font-family:
|
|
19
|
+
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; }
|
|
20
20
|
.container { max-width: 960px; margin: 40px auto; padding: 0 20px; }
|
|
21
21
|
header.site-header { margin-bottom: 24px; }
|
|
22
|
-
header.site-header h1 { font-size: 28px; font-weight:
|
|
23
|
-
.badge { display: inline-block; margin-left: 8px; padding:
|
|
24
|
-
.sub { margin-top:
|
|
25
|
-
.block { background: var(--panel); border: 1px solid var(--border); border-radius:
|
|
26
|
-
.block h2 { margin: 0 0
|
|
22
|
+
header.site-header h1 { font-size: 28px; font-weight: 600; margin: 0; }
|
|
23
|
+
.badge { display: inline-block; margin-left: 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; color: var(--muted); }
|
|
24
|
+
.sub { margin-top: 8px; color: var(--muted); font-size: 14px; }
|
|
25
|
+
.block { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
|
|
26
|
+
.block h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
|
|
27
27
|
.kvs { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; align-items: center; }
|
|
28
28
|
.kvs div:first-child { color: var(--muted); }
|
|
29
29
|
ul.links { list-style: none; padding: 0; margin: 0; }
|
|
30
|
-
ul.links li { margin:
|
|
31
|
-
ul.links a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
|
|
30
|
+
ul.links li { margin: 8px 0; }
|
|
31
|
+
ul.links a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); transition: all 0.2s ease; }
|
|
32
32
|
ul.links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
|
|
33
|
-
pre { margin: 0; background: #
|
|
34
|
-
code { font-family:
|
|
35
|
-
footer.site-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); }
|
|
36
|
-
footer.site-footer a { color: var(--fg); text-decoration: none; }
|
|
33
|
+
pre { margin: 0; background: #f9f9f9; border: 1px solid var(--border); border-radius: 6px; padding: 12px; overflow: auto; }
|
|
34
|
+
code { font-family: 'Courier New', monospace; font-size: 13px; }
|
|
35
|
+
footer.site-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; }
|
|
36
|
+
footer.site-footer a { color: var(--fg); text-decoration: none; transition: color 0.2s ease; }
|
|
37
37
|
footer.site-footer a:hover { color: var(--accent); }
|
|
38
38
|
</style>
|
|
39
39
|
</head>
|
|
@@ -1,92 +1,321 @@
|
|
|
1
|
-
<!-- eslint-disable prettier/prettier -->
|
|
2
1
|
<!DOCTYPE html>
|
|
3
2
|
<html lang="zh">
|
|
4
3
|
<head>
|
|
5
4
|
<meta charset="UTF-8" />
|
|
6
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title
|
|
6
|
+
<title>一起听 - 主机模式</title>
|
|
8
7
|
<script src="https://unpkg.com/petite-vue"></script>
|
|
9
8
|
<script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
<style>
|
|
10
|
+
* {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
18
|
+
min-height: 100vh;
|
|
19
|
+
background: #f5f5f5;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.container {
|
|
24
|
+
max-width: 900px;
|
|
25
|
+
margin: 0 auto;
|
|
26
|
+
background: white;
|
|
27
|
+
border-radius: 12px;
|
|
28
|
+
padding: 32px;
|
|
29
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h1 {
|
|
33
|
+
font-size: 24px;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
color: #333;
|
|
36
|
+
margin-bottom: 16px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.login-link {
|
|
40
|
+
display: block;
|
|
41
|
+
margin-bottom: 24px;
|
|
42
|
+
color: #666;
|
|
43
|
+
font-size: 14px;
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.login-link:hover {
|
|
48
|
+
color: #333;
|
|
49
|
+
text-decoration: underline;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.message {
|
|
53
|
+
padding: 12px 16px;
|
|
54
|
+
background: #f9f9f9;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
margin-bottom: 20px;
|
|
57
|
+
font-size: 14px;
|
|
58
|
+
color: #555;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.audio-player {
|
|
62
|
+
width: 100%;
|
|
63
|
+
margin-bottom: 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.btn {
|
|
67
|
+
background: #333;
|
|
68
|
+
color: white;
|
|
69
|
+
padding: 10px 20px;
|
|
70
|
+
border: none;
|
|
71
|
+
border-radius: 6px;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
transition: background 0.2s ease;
|
|
76
|
+
margin-right: 8px;
|
|
77
|
+
margin-bottom: 8px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.btn:hover {
|
|
81
|
+
background: #555;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.section {
|
|
85
|
+
margin-bottom: 24px;
|
|
86
|
+
padding: 20px;
|
|
87
|
+
background: #f9f9f9;
|
|
88
|
+
border-radius: 6px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.section h3 {
|
|
92
|
+
font-size: 16px;
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
color: #333;
|
|
95
|
+
margin-bottom: 12px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
input[type="text"], input[type="number"] {
|
|
99
|
+
padding: 10px 14px;
|
|
100
|
+
border: 1px solid #ddd;
|
|
101
|
+
border-radius: 6px;
|
|
102
|
+
font-size: 14px;
|
|
103
|
+
outline: none;
|
|
104
|
+
width: 200px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
input:focus {
|
|
108
|
+
border-color: #333;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.input-group {
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
gap: 12px;
|
|
115
|
+
margin-bottom: 12px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.input-group label {
|
|
119
|
+
font-size: 14px;
|
|
120
|
+
color: #555;
|
|
121
|
+
min-width: 80px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.share-link {
|
|
125
|
+
padding: 12px;
|
|
126
|
+
background: #f0f0f0;
|
|
127
|
+
border-radius: 6px;
|
|
128
|
+
font-size: 13px;
|
|
129
|
+
color: #666;
|
|
130
|
+
word-break: break-all;
|
|
131
|
+
margin-bottom: 12px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.user-list {
|
|
135
|
+
list-style: none;
|
|
136
|
+
max-height: 200px;
|
|
137
|
+
overflow-y: auto;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.user-item {
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
gap: 12px;
|
|
144
|
+
padding: 10px;
|
|
145
|
+
border-bottom: 1px solid #eee;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.user-item:last-child {
|
|
149
|
+
border-bottom: none;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.user-avatar {
|
|
153
|
+
width: 40px;
|
|
154
|
+
height: 40px;
|
|
155
|
+
border-radius: 50%;
|
|
156
|
+
object-fit: cover;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.user-name {
|
|
160
|
+
font-size: 14px;
|
|
161
|
+
color: #333;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.track-list {
|
|
165
|
+
list-style: none;
|
|
166
|
+
max-height: 300px;
|
|
167
|
+
overflow-y: auto;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.track-item {
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: center;
|
|
173
|
+
gap: 12px;
|
|
174
|
+
padding: 10px;
|
|
175
|
+
border-bottom: 1px solid #eee;
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
transition: background 0.2s ease;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.track-item:hover {
|
|
181
|
+
background: #f5f5f5;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.track-item:last-child {
|
|
185
|
+
border-bottom: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.track-cover {
|
|
189
|
+
width: 40px;
|
|
190
|
+
height: 40px;
|
|
191
|
+
border-radius: 4px;
|
|
192
|
+
object-fit: cover;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.track-name {
|
|
196
|
+
font-size: 14px;
|
|
197
|
+
color: #333;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
details {
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
details summary {
|
|
205
|
+
font-size: 14px;
|
|
206
|
+
font-weight: 500;
|
|
207
|
+
color: #555;
|
|
208
|
+
padding: 8px 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
details summary:hover {
|
|
212
|
+
color: #333;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
details[open] summary {
|
|
216
|
+
margin-bottom: 12px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.control-buttons {
|
|
220
|
+
display: flex;
|
|
221
|
+
flex-wrap: wrap;
|
|
222
|
+
gap: 8px;
|
|
223
|
+
}
|
|
224
|
+
</style>
|
|
15
225
|
</head>
|
|
16
226
|
|
|
17
|
-
<body class="
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
</div>
|
|
227
|
+
<body class="container">
|
|
228
|
+
<a href="/qrlogin.html" class="login-link">还没登录？点击登录</a>
|
|
229
|
+
|
|
21
230
|
<h1>一起听 - 主机模式</h1>
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
<div
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
231
|
+
|
|
232
|
+
<div class="message">消息: {{message}}</div>
|
|
233
|
+
|
|
234
|
+
<audio id="player" class="audio-player" autoplay controls></audio>
|
|
235
|
+
|
|
236
|
+
<div v-if="!account.login">
|
|
237
|
+
<button class="btn" @click="login">获取登录状态</button>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="section">
|
|
241
|
+
<h3>账号信息</h3>
|
|
242
|
+
<div>当前登录账号: {{account.nickname}}</div>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<div v-if="account.login" class="section">
|
|
246
|
+
<h3>房间管理</h3>
|
|
247
|
+
<div class="control-buttons">
|
|
248
|
+
<button v-if="!roomInfo.roomId" class="btn" @click="createRoom">创建房间</button>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
31
251
|
<details>
|
|
32
252
|
<summary>加入房间</summary>
|
|
33
|
-
<div
|
|
34
|
-
|
|
35
|
-
<
|
|
253
|
+
<div class="input-group">
|
|
254
|
+
<label>房间ID:</label>
|
|
255
|
+
<input v-model="roomInfo.roomId" type="text" />
|
|
256
|
+
</div>
|
|
257
|
+
<div class="input-group">
|
|
258
|
+
<label>邀请者ID:</label>
|
|
259
|
+
<input v-model="roomInfo.inviterId" type="text" />
|
|
36
260
|
</div>
|
|
37
|
-
<button @click="joinRoom"
|
|
261
|
+
<button class="btn" @click="joinRoom">加入房间</button>
|
|
38
262
|
</details>
|
|
39
263
|
|
|
40
|
-
<div v-if="roomInfo.roomId">
|
|
41
|
-
<
|
|
42
|
-
|
|
264
|
+
<div v-if="roomInfo.roomId" style="margin-top: 16px;">
|
|
265
|
+
<h4>分享链接</h4>
|
|
266
|
+
<div class="share-link">
|
|
43
267
|
https://st.music.163.com/listen-together/share/?songId=1372188635&roomId={{roomInfo.roomId}}&inviterId={{roomInfo.inviterId}}
|
|
44
268
|
</div>
|
|
45
|
-
<
|
|
46
|
-
<button @click="
|
|
47
|
-
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
class="
|
|
52
|
-
|
|
53
|
-
<div class="mdui-list-item-avatar">
|
|
54
|
-
<img :src="user.avatarUrl" />
|
|
55
|
-
</div>
|
|
56
|
-
<div class="mdui-list-item-content">{{user.nickname}}</div>
|
|
269
|
+
<button class="btn" @click="refreshRoom">刷新房间状态</button>
|
|
270
|
+
<button class="btn" @click="closeRoom">关闭房间</button>
|
|
271
|
+
|
|
272
|
+
<h4 style="margin-top: 16px;">在线用户</h4>
|
|
273
|
+
<ul class="user-list">
|
|
274
|
+
<li v-for="user in roomInfo.roomUsers" :key="user.userId" class="user-item">
|
|
275
|
+
<img :src="user.avatarUrl" class="user-avatar" alt="avatar" />
|
|
276
|
+
<span class="user-name">{{user.nickname}}</span>
|
|
57
277
|
</li>
|
|
58
278
|
</ul>
|
|
59
|
-
<button v-if="roomInfo.roomId" @click="closeRoom">关闭房间</button>
|
|
60
279
|
</div>
|
|
61
280
|
</div>
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
|
|
281
|
+
|
|
282
|
+
<div class="section">
|
|
283
|
+
<h3>播放控制</h3>
|
|
284
|
+
<div class="control-buttons">
|
|
285
|
+
<button class="btn" @click="playTrack">播放</button>
|
|
286
|
+
<button class="btn" @click="pauseTrack">暂停</button>
|
|
287
|
+
<button class="btn" @click="seekTrack">同步进度</button>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
65
291
|
<details>
|
|
66
292
|
<summary>播放列表</summary>
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
293
|
+
<div class="section">
|
|
294
|
+
<div class="input-group">
|
|
295
|
+
<label>歌单ID:</label>
|
|
296
|
+
<input v-model="playlistInfo.playlistId" type="text" />
|
|
297
|
+
</div>
|
|
298
|
+
<button class="btn" @click="loadPlaylist">加载歌单</button>
|
|
299
|
+
<div style="margin-top: 12px; font-size: 14px; color: #555;">
|
|
300
|
+
歌单名称: {{playlistInfo.playlistName}}
|
|
301
|
+
</div>
|
|
302
|
+
|
|
303
|
+
<h4 style="margin-top: 16px;">歌单内容</h4>
|
|
304
|
+
<ul class="track-list">
|
|
305
|
+
<li
|
|
306
|
+
@click="gotoTrack(track.id)"
|
|
307
|
+
v-for="track in playlistInfo.playlistTracks"
|
|
308
|
+
:key="track.id"
|
|
309
|
+
class="track-item"
|
|
310
|
+
>
|
|
311
|
+
<img :src="track.al.picUrl" class="track-cover" alt="cover" />
|
|
312
|
+
<span class="track-name">{{track.name}}</span>
|
|
313
|
+
</li>
|
|
314
|
+
</ul>
|
|
70
315
|
</div>
|
|
71
|
-
<button @click="loadPlaylist">加载歌单到播放列表</button>
|
|
72
|
-
<span>{{playlistInfo.playlistName}}</span>
|
|
73
|
-
<br />
|
|
74
|
-
<br />
|
|
75
|
-
<div>歌单内容:</div>
|
|
76
|
-
<ul class="mdui-list">
|
|
77
|
-
<li
|
|
78
|
-
@click="gotoTrack(track.id)"
|
|
79
|
-
v-for="track in playlistInfo.playlistTracks"
|
|
80
|
-
class="mdui-list-item mdui-ripple"
|
|
81
|
-
>
|
|
82
|
-
<div class="mdui-list-item-avatar">
|
|
83
|
-
<img :src="track.al.picUrl" />
|
|
84
|
-
</div>
|
|
85
|
-
<div class="mdui-list-item-content">{{track.name}}</div>
|
|
86
|
-
</li>
|
|
87
|
-
</ul>
|
|
88
316
|
</details>
|
|
89
317
|
</body>
|
|
318
|
+
|
|
90
319
|
<script>
|
|
91
320
|
PetiteVue.createApp({
|
|
92
321
|
message: '请点击获取登录状态',
|
|
@@ -126,7 +355,7 @@
|
|
|
126
355
|
this.account.userId = res.data.data.profile.userId
|
|
127
356
|
this.account.nickname = res.data.data.profile.nickname
|
|
128
357
|
this.account.login = true
|
|
129
|
-
this.message = '
|
|
358
|
+
this.message = '成功登录，请创建房间'
|
|
130
359
|
}
|
|
131
360
|
},
|
|
132
361
|
joinRoom: async function () {
|
|
@@ -212,7 +441,7 @@
|
|
|
212
441
|
})
|
|
213
442
|
console.info(res)
|
|
214
443
|
if (res.data.code != 200 || !res.data.data.inRoom) {
|
|
215
|
-
this.message = '
|
|
444
|
+
this.message = '房间状态获取失败，可能退出了房间'
|
|
216
445
|
} else {
|
|
217
446
|
this.roomInfo.roomUsers = res.data.data.roomInfo.roomUsers
|
|
218
447
|
}
|