mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-05 23:50:52 +08:00
Compare commits
29 Commits
v4.4.0
...
dev_electr
| Author | SHA1 | Date | |
|---|---|---|---|
|
f9c920008c | ||
|
|
ef778a172b | ||
|
|
eff9328a23 | ||
|
|
5f63ab6b4a | ||
|
c2e08db2e4 | ||
|
|
903389e4bf | ||
|
|
327384ace5 | ||
|
|
6ffe4daed0 | ||
|
|
2b8c9bf22a | ||
|
|
c7d586407e | ||
|
|
c5af89e51f | ||
|
|
2d8770b074 | ||
|
|
4abb6a5a9f | ||
|
|
b1d515465a | ||
|
|
ea7dca7975 | ||
|
|
c98fa20a74 | ||
|
|
16d6ff39c8 | ||
|
|
159dd03a2c | ||
|
|
167c8ad493 | ||
|
|
c82ffd0c7d | ||
|
|
0128662ed2 | ||
|
|
30695149d6 | ||
|
|
bbc1bb7436 | ||
|
|
57424f9e15 | ||
|
|
32b93680b9 | ||
|
|
0a22c7b5d7 | ||
|
|
64f5fcaee4 | ||
|
|
304c24a673 | ||
|
|
a56bca98b2 |
26
CHANGELOG.md
26
CHANGELOG.md
@@ -1,23 +1,27 @@
|
||||
# 更新日志
|
||||
|
||||
## v4.4.0
|
||||
## 更新时间 2025 年 4 月 23 日 00:16
|
||||
## v4.6.0
|
||||
> 如果更新遇到问题，请前往 <a href="http://donate.alger.fun/download" target="_blank">下载 AlgerMusicPlayer</a>
|
||||
|
||||
> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
|
||||
> 请我喝咖啡(支持作者) ☕️ <a href="http://donate.alger.fun/donate" target="_blank" style="color: red; font-weight: bold;">赏你</a>
|
||||
|
||||
> 请我喝咖啡 ☕️ <a href="http://donate.alger.fun/donate" target="_blank">赏你</a>
|
||||
> 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>
|
||||
|
||||
> QQ群 976962720
|
||||
|
||||
### ✨ 新功能
|
||||
- 优化音源解析功能，添加音源配置，添加GD音乐台解析支持 ([ed9cf9c](https://github.com/algerkong/AlgerMusicPlayer/commit/ed9cf9c))
|
||||
- 增加音源重新解析功能 ([82a69d0](https://github.com/algerkong/AlgerMusicPlayer/commit/82a69d0))
|
||||
- 搜索列表添加下一首播放功能，修改播放逻辑搜索的歌曲点击播放不重新覆盖播放列表，添加全部播放功能 ([31640bb](https://github.com/algerkong/AlgerMusicPlayer/commit/31640bb)) (#216)
|
||||
- 增加windows和linux对arm64架构的支持([9f125f8](https://github.com/algerkong/AlgerMusicPlayer/commit/9f125f8))
|
||||
- 添加"收藏"功能至托盘菜单 ([3c1a144](https://github.com/algerkong/AlgerMusicPlayer/commit/3c1a144))
|
||||
- 修改将歌单列表改为页面 ([e2527c3](https://github.com/algerkong/AlgerMusicPlayer/commit/e2527c3))
|
||||
|
||||
### 🐛 Bug 修复
|
||||
- 修复下载管理切换 tab 程序卡死问题 ([27d5bd8](https://github.com/algerkong/AlgerMusicPlayer/commit/27d5bd8)) (#153)
|
||||
- 修复歌曲播放地址缓存导致播放失败问题，添加过期时间 ([76e55d4](https://github.com/algerkong/AlgerMusicPlayer/commit/76e55d4))
|
||||
- 修复 Electron 版本更新导致的桌面歌词窗口出现边框的问题 ([a676136](https://github.com/algerkong/AlgerMusicPlayer/commit/a676136))
|
||||
- 优化底部菜单位置和间距 修复移动端菜单不显示问题 ([25b90fa](https://github.com/algerkong/AlgerMusicPlayer/commit/25b90fa))
|
||||
- 修复歌曲加入歌单失败问题 ([8045034](https://github.com/algerkong/AlgerMusicPlayer/commit/8045034))
|
||||
|
||||
### 🔧 其他变更
|
||||
- 更新项目依赖 ([35b9cbf](https://github.com/algerkong/AlgerMusicPlayer/commit/35b9cbf))([7624a1a](https://github.com/algerkong/AlgerMusicPlayer/commit/7624a1a))
|
||||
### 🎨 优化
|
||||
- 优化播放器逻辑，改进播放失败处理，支持保持当前索引并增加重试机制，优化操作锁逻辑，添加超时检查机制，确保操作锁在超时后自动释放，增加超时处理([8ed13d4](https://github.com/algerkong/AlgerMusicPlayer/commit/8ed13d4))、([cb58abb](https://github.com/algerkong/AlgerMusicPlayer/commit/cb58abb)) ([9cc064c](https://github.com/algerkong/AlgerMusicPlayer/commit/9cc064c))
|
||||
- 更新 Electron 版本至 36.2.0，优化歌词视图的悬停效果 ([44f9709](https://github.com/algerkong/AlgerMusicPlayer/commit/44f9709))
|
||||
- 更新音乐源设置([618c345](https://github.com/algerkong/AlgerMusicPlayer/commit/618c345))
|
||||
- 修改 MiniPlayBar 组件，调整音量滑块的样式和交互方式，优化悬停效果 ([31ea3b7](https://github.com/algerkong/AlgerMusicPlayer/commit/31ea3b7))
|
||||
- 优化 MvPlayer 组件的关闭逻辑，简化音频暂停处理 ([b3de2ae](https://github.com/algerkong/AlgerMusicPlayer/commit/b3de2ae))、([15f4ea4](https://github.com/algerkong/AlgerMusicPlayer/commit/15f4ea4))
|
||||
@@ -14,20 +14,22 @@
|
||||
- 支持歌单、MV、专辑等完整音乐服务
|
||||
- 灰色音乐资源解析（基于 @unblockneteasemusic/server）
|
||||
- 高品质音乐试听（需网易云VIP）
|
||||
- 音乐文件下载（支持右键下载和批量下载）
|
||||
- 音乐文件下载（支持右键下载和批量下载, 附带歌词封面等信息）
|
||||
- 🚀 技术特性
|
||||
- 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
|
||||
- 自动更新检测
|
||||
- 全平台适配（Desktop & Web & Mobile Web）
|
||||
- 全平台适配（Desktop & Web & Mobile Web & Android<后续> & ios<后续>）
|
||||
|
||||
## 项目简介
|
||||
一个基于 electron typescript vue3 的桌面音乐播放器 适配 web端 桌面端 web移动端
|
||||
一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、最高音质
|
||||
|
||||
## 预览地址
|
||||
[http://mc.alger.fun/](http://mc.alger.fun/)
|
||||
|
||||
QQ群:789288579
|
||||
|
||||
tg群:[AlgerMusic tg](https://t.me/+9efsKRuvKBk2NWVl)
|
||||
|
||||
## 软件截图
|
||||
|
||||
|
||||
|
||||
13
package.json
13
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "AlgerMusicPlayer",
|
||||
"version": "4.4.0",
|
||||
"version": "4.6.0",
|
||||
"description": "Alger Music Player",
|
||||
"author": "Alger <algerkc@qq.com>",
|
||||
"main": "./out/main/index.js",
|
||||
@@ -24,7 +24,9 @@
|
||||
"@electron-toolkit/preload": "^3.0.1",
|
||||
"@electron-toolkit/utils": "^4.0.0",
|
||||
"@unblockneteasemusic/server": "^0.27.8-patch.1",
|
||||
"cors": "^2.8.5",
|
||||
"electron-store": "^8.1.0",
|
||||
"express": "^4.18.2",
|
||||
"electron-updater": "^6.6.2",
|
||||
"font-list": "^1.5.1",
|
||||
"netease-cloud-music-api-alger": "^4.26.1",
|
||||
@@ -54,7 +56,7 @@
|
||||
"autoprefixer": "^10.4.20",
|
||||
"axios": "^1.7.7",
|
||||
"cross-env": "^7.0.3",
|
||||
"electron": "^35.2.0",
|
||||
"electron": "^36.1.0",
|
||||
"electron-builder": "^25.1.8",
|
||||
"electron-vite": "^3.1.0",
|
||||
"eslint": "^9.0.0",
|
||||
@@ -97,6 +99,13 @@
|
||||
"repo": "AlgerMusicPlayer"
|
||||
}
|
||||
],
|
||||
"extraResources": [
|
||||
{
|
||||
"from": "resources/html",
|
||||
"to": "html",
|
||||
"filter": ["**/*"]
|
||||
}
|
||||
],
|
||||
"mac": {
|
||||
"icon": "resources/icon.icns",
|
||||
"target": [
|
||||
|
||||
486
resources/html/remote-control.html
Normal file
486
resources/html/remote-control.html
Normal file
@@ -0,0 +1,486 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>AlgerMusicPlayer 远程控制</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #007AFF;
|
||||
--secondary-color: #5AC8FA;
|
||||
--success-color: #4CD964;
|
||||
--danger-color: #FF3B30;
|
||||
--warning-color: #FF9500;
|
||||
--light-gray: #F2F2F7;
|
||||
--medium-gray: #E5E5EA;
|
||||
--dark-gray: #8E8E93;
|
||||
--text-color: #000000;
|
||||
--text-secondary: #6C6C6C;
|
||||
--background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #0A84FF;
|
||||
--secondary-color: #64D2FF;
|
||||
--success-color: #30D158;
|
||||
--danger-color: #FF453A;
|
||||
--warning-color: #FF9F0A;
|
||||
--light-gray: #1C1C1E;
|
||||
--medium-gray: #2C2C2E;
|
||||
--dark-gray: #8E8E93;
|
||||
--text-color: #FFFFFF;
|
||||
--text-secondary: #AEAEB2;
|
||||
--background-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--light-gray);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--background-color);
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--medium-gray);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--background-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.song-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.song-cover {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
background-color: var(--medium-gray);
|
||||
}
|
||||
|
||||
.song-details {
|
||||
margin-left: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.song-details h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.song-details p {
|
||||
margin: 4px 0 0;
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.play-state {
|
||||
font-size: 14px;
|
||||
color: var(--primary-color);
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.play-state::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.playing .play-state::before {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.paused .play-state::before {
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.extra-controls {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--background-color);
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--medium-gray);
|
||||
padding: 16px 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--primary-color);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn:active::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
margin-bottom: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-play svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
background-color: var(--background-color);
|
||||
border-top: 1px solid var(--medium-gray);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
display: inline-block;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.status-message.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
color: var(--primary-color);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.controls, .extra-controls {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>AlgerMusicPlayer 远程控制</h1>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card" id="songInfoCard">
|
||||
<div class="song-info">
|
||||
<img id="songCover" class="song-cover" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E" alt="封面">
|
||||
<div class="song-details">
|
||||
<h2 id="songTitle">未在播放</h2>
|
||||
<p id="songArtist">--</p>
|
||||
<div class="play-state" id="playState">未播放</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="controls">
|
||||
<button id="prevBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
|
||||
</svg>
|
||||
上一首
|
||||
</button>
|
||||
<button id="playBtn" class="btn btn-play">
|
||||
<svg id="playIcon" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
播放/暂停
|
||||
</button>
|
||||
<button id="nextBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
|
||||
</svg>
|
||||
下一首
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="extra-controls">
|
||||
<button id="volumeDownBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
|
||||
</svg>
|
||||
音量-
|
||||
</button>
|
||||
<button id="volumeUpBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
||||
</svg>
|
||||
音量+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="extra-controls">
|
||||
<button id="favoriteBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
收藏
|
||||
</button>
|
||||
<button id="refreshBtn" class="btn">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
|
||||
</svg>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-bar">
|
||||
<span id="status" class="status-message">准备就绪</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 获取DOM元素
|
||||
const songInfoCard = document.getElementById('songInfoCard');
|
||||
const songTitle = document.getElementById('songTitle');
|
||||
const songArtist = document.getElementById('songArtist');
|
||||
const songCover = document.getElementById('songCover');
|
||||
const playState = document.getElementById('playState');
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
const playIcon = document.getElementById('playIcon');
|
||||
const prevBtn = document.getElementById('prevBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const favoriteBtn = document.getElementById('favoriteBtn');
|
||||
const volumeUpBtn = document.getElementById('volumeUpBtn');
|
||||
const volumeDownBtn = document.getElementById('volumeDownBtn');
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
const status = document.getElementById('status');
|
||||
|
||||
let isPlaying = false;
|
||||
|
||||
// 显示状态消息并淡出
|
||||
function showStatus(message, autoClear = true) {
|
||||
status.textContent = message;
|
||||
status.classList.remove('fade');
|
||||
|
||||
if (autoClear) {
|
||||
setTimeout(() => {
|
||||
status.classList.add('fade');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新播放/暂停图标
|
||||
function updatePlayIcon() {
|
||||
if (isPlaying) {
|
||||
playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
|
||||
} else {
|
||||
playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
|
||||
}
|
||||
}
|
||||
|
||||
// 更新状态的函数
|
||||
async function updateStatus() {
|
||||
try {
|
||||
showStatus('获取播放状态...', false);
|
||||
|
||||
const response = await fetch('/api/status');
|
||||
const data = await response.json();
|
||||
|
||||
// 更新播放状态
|
||||
isPlaying = data.isPlaying;
|
||||
updatePlayIcon();
|
||||
|
||||
// 更新UI
|
||||
if (data.currentSong) {
|
||||
songTitle.textContent = data.currentSong.name || '未知歌曲';
|
||||
|
||||
if (data.currentSong.ar && data.currentSong.ar.length) {
|
||||
songArtist.textContent = data.currentSong.ar.map(a => a.name).join(', ');
|
||||
} else if (data.currentSong.artists && data.currentSong.artists.length) {
|
||||
songArtist.textContent = data.currentSong.artists.map(a => a.name).join(', ');
|
||||
} else {
|
||||
songArtist.textContent = '未知艺术家';
|
||||
}
|
||||
|
||||
if (data.currentSong.picUrl) {
|
||||
songCover.src = data.currentSong.picUrl;
|
||||
}
|
||||
} else {
|
||||
songTitle.textContent = '未在播放';
|
||||
songArtist.textContent = '--';
|
||||
songCover.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E";
|
||||
}
|
||||
|
||||
// 更新播放状态
|
||||
playState.textContent = isPlaying ? '正在播放' : '已暂停';
|
||||
songInfoCard.className = isPlaying ? 'card playing' : 'card paused';
|
||||
|
||||
showStatus('已更新', true);
|
||||
} catch (error) {
|
||||
console.error('获取状态失败:', error);
|
||||
showStatus('获取状态失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 发送命令的函数
|
||||
async function sendCommand(endpoint) {
|
||||
try {
|
||||
showStatus('发送命令中...', false);
|
||||
const response = await fetch('/api/' + endpoint, { method: 'POST' });
|
||||
const data = await response.json();
|
||||
|
||||
showStatus(data.message || '命令已发送');
|
||||
|
||||
// 稍等后更新状态
|
||||
setTimeout(updateStatus, 500);
|
||||
} catch (error) {
|
||||
console.error('发送命令失败:', error);
|
||||
showStatus('发送命令失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定按钮事件
|
||||
playBtn.addEventListener('click', () => sendCommand('toggle-play'));
|
||||
prevBtn.addEventListener('click', () => sendCommand('prev'));
|
||||
nextBtn.addEventListener('click', () => sendCommand('next'));
|
||||
favoriteBtn.addEventListener('click', () => sendCommand('toggle-favorite'));
|
||||
volumeUpBtn.addEventListener('click', () => sendCommand('volume-up'));
|
||||
volumeDownBtn.addEventListener('click', () => sendCommand('volume-down'));
|
||||
refreshBtn.addEventListener('click', updateStatus);
|
||||
|
||||
// 初始加载状态
|
||||
updateStatus();
|
||||
|
||||
// 每1秒更新一次状态
|
||||
setInterval(updateStatus, 1000);
|
||||
|
||||
// 添加触摸反馈
|
||||
const buttons = document.querySelectorAll('.btn');
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('touchstart', function() {
|
||||
this.style.transform = 'scale(0.97)';
|
||||
this.style.opacity = '0.7';
|
||||
});
|
||||
|
||||
btn.addEventListener('touchend', function() {
|
||||
this.style.transform = 'scale(1)';
|
||||
this.style.opacity = '1';
|
||||
});
|
||||
});
|
||||
|
||||
// 检测深色模式变化
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
updateStatus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 980 KiB |
@@ -26,6 +26,7 @@ export default {
|
||||
delete: 'Delete',
|
||||
refresh: 'Refresh',
|
||||
retry: 'Retry',
|
||||
reset: 'Reset',
|
||||
validation: {
|
||||
required: 'This field is required',
|
||||
invalidInput: 'Invalid input',
|
||||
|
||||
@@ -73,5 +73,27 @@ export default {
|
||||
acoustic: 'Acoustic',
|
||||
custom: 'Custom'
|
||||
}
|
||||
},
|
||||
// Sleep timer related
|
||||
sleepTimer: {
|
||||
title: 'Sleep Timer',
|
||||
cancel: 'Cancel Timer',
|
||||
timeMode: 'By Time',
|
||||
songsMode: 'By Songs',
|
||||
playlistEnd: 'After Playlist',
|
||||
afterPlaylist: 'After Playlist Ends',
|
||||
activeUntilEnd: 'Active until end of playlist',
|
||||
minutes: 'min',
|
||||
hours: 'hr',
|
||||
songs: 'songs',
|
||||
set: 'Set',
|
||||
timerSetSuccess: 'Timer set for {minutes} minutes',
|
||||
songsSetSuccess: 'Timer set for {songs} songs',
|
||||
playlistEndSetSuccess: 'Timer set to end after playlist',
|
||||
timerCancelled: 'Sleep timer cancelled',
|
||||
timerEnded: 'Sleep timer ended',
|
||||
playbackStopped: 'Music playback stopped',
|
||||
minutesRemaining: '{minutes} min remaining',
|
||||
songsRemaining: '{count} songs remaining'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -83,7 +83,9 @@ export default {
|
||||
unlimitedDownload: 'Unlimited Download',
|
||||
unlimitedDownloadDesc: 'Enable unlimited download mode for music , default limit 300 songs',
|
||||
downloadPath: 'Download Directory',
|
||||
downloadPathDesc: 'Choose download location for music files'
|
||||
downloadPathDesc: 'Choose download location for music files',
|
||||
remoteControl: 'Remote Control',
|
||||
remoteControlDesc: 'Set remote control function'
|
||||
},
|
||||
network: {
|
||||
apiPort: 'Music API Port',
|
||||
@@ -230,5 +232,15 @@ export default {
|
||||
disableAll: 'All shortcuts disabled, please save to apply',
|
||||
enableAll: 'All shortcuts enabled, please save to apply'
|
||||
}
|
||||
},
|
||||
remoteControl: {
|
||||
title: 'Remote Control',
|
||||
enable: 'Enable Remote Control',
|
||||
port: 'Port',
|
||||
allowedIps: 'Allowed IPs',
|
||||
addIp: 'Add IP',
|
||||
emptyListHint: 'Empty list means allow all IPs',
|
||||
saveSuccess: 'Remote control settings saved',
|
||||
accessInfo: 'Remote control access address:',
|
||||
}
|
||||
};
|
||||
|
||||
@@ -26,6 +26,7 @@ export default {
|
||||
delete: '删除',
|
||||
refresh: '刷新',
|
||||
retry: '重试',
|
||||
reset: '重置',
|
||||
validation: {
|
||||
required: '此项是必填的',
|
||||
invalidInput: '输入无效',
|
||||
|
||||
@@ -74,5 +74,27 @@ export default {
|
||||
acoustic: '原声',
|
||||
custom: '自定义'
|
||||
}
|
||||
},
|
||||
// 定时关闭功能相关
|
||||
sleepTimer: {
|
||||
title: '定时关闭',
|
||||
cancel: '取消定时',
|
||||
timeMode: '按时间关闭',
|
||||
songsMode: '按歌曲数关闭',
|
||||
playlistEnd: '播放完列表后关闭',
|
||||
afterPlaylist: '播放完列表后关闭',
|
||||
activeUntilEnd: '播放至列表结束',
|
||||
minutes: '分钟',
|
||||
hours: '小时',
|
||||
songs: '首歌',
|
||||
set: '设置',
|
||||
timerSetSuccess: '已设置{minutes}分钟后关闭',
|
||||
songsSetSuccess: '已设置播放{songs}首歌后关闭',
|
||||
playlistEndSetSuccess: '已设置播放完列表后关闭',
|
||||
timerCancelled: '已取消定时关闭',
|
||||
timerEnded: '定时关闭已触发',
|
||||
playbackStopped: '音乐播放已停止',
|
||||
minutesRemaining: '剩余{minutes}分钟',
|
||||
songsRemaining: '剩余{count}首歌'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
"playback": {
|
||||
"musicSources": "音源设置",
|
||||
"musicSourcesDesc": "选择音乐解析使用的音源平台",
|
||||
"musicSourcesWarning": "至少需要选择一个音源平台"
|
||||
}
|
||||
@@ -83,7 +83,9 @@ export default {
|
||||
unlimitedDownload: '无限制下载',
|
||||
unlimitedDownloadDesc: '开启后将无限制下载音乐（可能出现下载失败的情况）, 默认限制 300 首',
|
||||
downloadPath: '下载目录',
|
||||
downloadPathDesc: '选择音乐文件的下载位置'
|
||||
downloadPathDesc: '选择音乐文件的下载位置',
|
||||
remoteControl: '远程控制',
|
||||
remoteControlDesc: '设置远程控制功能'
|
||||
},
|
||||
network: {
|
||||
apiPort: '音乐API端口',
|
||||
@@ -230,5 +232,15 @@ export default {
|
||||
disableAll: '已禁用所有快捷键，请记得保存',
|
||||
enableAll: '已启用所有快捷键，请记得保存'
|
||||
}
|
||||
},
|
||||
remoteControl: {
|
||||
title: '远程控制',
|
||||
enable: '启用远程控制',
|
||||
port: '服务端口',
|
||||
allowedIps: '允许的IP地址',
|
||||
addIp: '添加IP',
|
||||
emptyListHint: '空列表表示允许所有IP访问',
|
||||
saveSuccess: '远程控制设置已保存',
|
||||
accessInfo: '远程控制访问地址:',
|
||||
}
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import { loadLyricWindow } from './lyric';
|
||||
import { initializeConfig } from './modules/config';
|
||||
import { initializeFileManager } from './modules/fileManager';
|
||||
import { initializeFonts } from './modules/fonts';
|
||||
import { initializeRemoteControl } from './modules/remoteControl';
|
||||
import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
|
||||
import { initializeStats, setupStatsHandlers } from './modules/statsService';
|
||||
import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
|
||||
@@ -20,9 +21,7 @@ const iconPath = join(__dirname, '../../resources');
|
||||
const icon = nativeImage.createFromPath(
|
||||
process.platform === 'darwin'
|
||||
? join(iconPath, 'icon.icns')
|
||||
: process.platform === 'win32'
|
||||
? join(iconPath, 'favicon.ico')
|
||||
: join(iconPath, 'icon.png')
|
||||
: join(iconPath, 'icon.png')
|
||||
);
|
||||
|
||||
let mainWindow: Electron.BrowserWindow;
|
||||
@@ -66,6 +65,9 @@ function initialize() {
|
||||
// 初始化快捷键
|
||||
initializeShortcuts(mainWindow);
|
||||
|
||||
// 初始化远程控制服务
|
||||
initializeRemoteControl(mainWindow);
|
||||
|
||||
// 初始化更新处理程序
|
||||
setupUpdateHandlers(mainWindow);
|
||||
}
|
||||
|
||||
231
src/main/modules/remoteControl.ts
Normal file
231
src/main/modules/remoteControl.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import { ipcMain } from 'electron';
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
import os from 'os';
|
||||
import { getStore } from './config';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
|
||||
// 定义远程控制相关接口
|
||||
export interface RemoteControlConfig {
|
||||
enabled: boolean;
|
||||
port: number;
|
||||
allowedIps: string[];
|
||||
}
|
||||
|
||||
// 默认配置
|
||||
export const defaultRemoteControlConfig: RemoteControlConfig = {
|
||||
enabled: false,
|
||||
port: 31888,
|
||||
allowedIps: []
|
||||
};
|
||||
|
||||
let app: express.Application | null = null;
|
||||
let server: any = null;
|
||||
let mainWindowRef: Electron.BrowserWindow | null = null;
|
||||
let currentSong: any = null;
|
||||
let isPlaying: boolean = false;
|
||||
|
||||
// 获取本地IP地址
|
||||
function getLocalIpAddresses(): string[] {
|
||||
const interfaces = os.networkInterfaces();
|
||||
const addresses: string[] = [];
|
||||
|
||||
for (const key in interfaces) {
|
||||
const iface = interfaces[key];
|
||||
if (iface) {
|
||||
for (const alias of iface) {
|
||||
if (alias.family === 'IPv4' && !alias.internal) {
|
||||
addresses.push(alias.address);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return addresses;
|
||||
}
|
||||
|
||||
// 初始化远程控制服务
|
||||
export function initializeRemoteControl(mainWindow: Electron.BrowserWindow) {
|
||||
mainWindowRef = mainWindow;
|
||||
const store = getStore() as any;
|
||||
let config = store.get('remoteControl') as RemoteControlConfig;
|
||||
|
||||
// 如果配置不存在，使用默认配置
|
||||
if (!config) {
|
||||
config = defaultRemoteControlConfig;
|
||||
store.set('remoteControl', config);
|
||||
}
|
||||
|
||||
// 监听当前歌曲变化
|
||||
ipcMain.on('update-current-song', (_, song: any) => {
|
||||
currentSong = song;
|
||||
});
|
||||
|
||||
// 监听播放状态变化
|
||||
ipcMain.on('update-play-state', (_, playing: boolean) => {
|
||||
isPlaying = playing;
|
||||
});
|
||||
|
||||
// 监听远程控制配置变化
|
||||
ipcMain.on('update-remote-control-config', (_, newConfig: RemoteControlConfig) => {
|
||||
if (server) {
|
||||
stopServer();
|
||||
}
|
||||
|
||||
store.set('remoteControl', newConfig);
|
||||
|
||||
if (newConfig.enabled) {
|
||||
startServer(newConfig);
|
||||
}
|
||||
});
|
||||
|
||||
// 获取远程控制配置
|
||||
ipcMain.handle('get-remote-control-config', () => {
|
||||
const config = store.get('remoteControl') as RemoteControlConfig;
|
||||
return config || defaultRemoteControlConfig;
|
||||
});
|
||||
|
||||
// 获取本地IP地址
|
||||
ipcMain.handle('get-local-ip-addresses', () => {
|
||||
return getLocalIpAddresses();
|
||||
});
|
||||
|
||||
// 如果启用了远程控制，启动服务器
|
||||
if (config.enabled) {
|
||||
startServer(config);
|
||||
}
|
||||
}
|
||||
|
||||
// 启动远程控制服务器
|
||||
function startServer(config: RemoteControlConfig) {
|
||||
if (!mainWindowRef) {
|
||||
console.error('主窗口未初始化，无法启动远程控制服务');
|
||||
return;
|
||||
}
|
||||
|
||||
app = express();
|
||||
|
||||
// 跨域配置
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
// IP 过滤中间件
|
||||
app.use((req, res, next) => {
|
||||
const clientIp = req.ip || req.socket.remoteAddress || '';
|
||||
const cleanIp = clientIp.replace(/^::ffff:/, ''); // 移除IPv6前缀
|
||||
console.log('config',config)
|
||||
if (config.allowedIps.length === 0 || config.allowedIps.includes(cleanIp)) {
|
||||
next();
|
||||
} else {
|
||||
res.status(403).json({ error: '未授权的IP地址' });
|
||||
}
|
||||
});
|
||||
|
||||
// 路由配置
|
||||
setupRoutes(app);
|
||||
|
||||
// 启动服务器
|
||||
try {
|
||||
server = app.listen(config.port, () => {
|
||||
console.log(`远程控制服务已启动，监听端口: ${config.port}`);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('启动远程控制服务失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 停止远程控制服务器
|
||||
function stopServer() {
|
||||
if (server) {
|
||||
server.close();
|
||||
server = null;
|
||||
app = null;
|
||||
console.log('远程控制服务已停止');
|
||||
}
|
||||
}
|
||||
|
||||
// 设置路由
|
||||
function setupRoutes(app: express.Application) {
|
||||
// 获取当前播放状态
|
||||
app.get('/api/status', (_, res) => {
|
||||
res.json({
|
||||
isPlaying,
|
||||
currentSong
|
||||
});
|
||||
});
|
||||
|
||||
// 播放/暂停
|
||||
app.post('/api/toggle-play', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'togglePlay');
|
||||
res.json({ success: true, message: '已发送播放/暂停指令' });
|
||||
});
|
||||
|
||||
// 上一首
|
||||
app.post('/api/prev', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'prevPlay');
|
||||
res.json({ success: true, message: '已发送上一首指令' });
|
||||
});
|
||||
|
||||
// 下一首
|
||||
app.post('/api/next', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'nextPlay');
|
||||
res.json({ success: true, message: '已发送下一首指令' });
|
||||
});
|
||||
|
||||
// 音量加
|
||||
app.post('/api/volume-up', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'volumeUp');
|
||||
res.json({ success: true, message: '已发送音量加指令' });
|
||||
});
|
||||
|
||||
// 音量减
|
||||
app.post('/api/volume-down', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'volumeDown');
|
||||
res.json({ success: true, message: '已发送音量减指令' });
|
||||
});
|
||||
|
||||
// 收藏/取消收藏
|
||||
app.post('/api/toggle-favorite', (_, res) => {
|
||||
if (!mainWindowRef) {
|
||||
return res.status(500).json({ error: '主窗口未初始化' });
|
||||
}
|
||||
mainWindowRef.webContents.send('global-shortcut', 'toggleFavorite');
|
||||
res.json({ success: true, message: '已发送收藏/取消收藏指令' });
|
||||
});
|
||||
|
||||
// 提供远程控制界面HTML
|
||||
app.get('/', (_, res) => {
|
||||
try {
|
||||
const resourcesPath = process.resourcesPath || '';
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const htmlPath = path.join(process.cwd(), 'resources', 'html', 'remote-control.html');
|
||||
const finalPath = isDev ? htmlPath : path.join(resourcesPath, 'html', 'remote-control.html');
|
||||
|
||||
if (fs.existsSync(finalPath)) {
|
||||
res.sendFile(finalPath);
|
||||
} else {
|
||||
res.status(404).send('远程控制界面文件未找到');
|
||||
console.error('远程控制界面文件不存在:', finalPath);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载远程控制界面失败:', error);
|
||||
res.status(500).send('加载远程控制界面失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -15,7 +15,7 @@ export function createQr(key: any) {
|
||||
// 获取二维码状态
|
||||
// /login/qr/check
|
||||
export function checkQr(key: any) {
|
||||
return request.get('/login/qr/check', { params: { key } });
|
||||
return request.get('/login/qr/check', { params: { key, noCookie: true } });
|
||||
}
|
||||
|
||||
// 获取登录状态
|
||||
|
||||
3
src/renderer/components.d.ts
vendored
3
src/renderer/components.d.ts
vendored
@@ -19,8 +19,10 @@ declare module 'vue' {
|
||||
NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
|
||||
NCollapse: typeof import('naive-ui')['NCollapse']
|
||||
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
|
||||
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
|
||||
NDivider: typeof import('naive-ui')['NDivider']
|
||||
NDrawer: typeof import('naive-ui')['NDrawer']
|
||||
NDrawerContent: typeof import('naive-ui')['NDrawerContent']
|
||||
NDropdown: typeof import('naive-ui')['NDropdown']
|
||||
@@ -50,6 +52,7 @@ declare module 'vue' {
|
||||
NTabPane: typeof import('naive-ui')['NTabPane']
|
||||
NTabs: typeof import('naive-ui')['NTabs']
|
||||
NTag: typeof import('naive-ui')['NTag']
|
||||
NText: typeof import('naive-ui')['NText']
|
||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
||||
NVirtualList: typeof import('naive-ui')['NVirtualList']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
@click="handleArtistClick(item.id)"
|
||||
>
|
||||
<div
|
||||
:style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
|
||||
:style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
|
||||
class="recommend-singer-item-bg"
|
||||
></div>
|
||||
<div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
|
||||
@@ -159,7 +159,7 @@ import { IDayRecommend } from '@/type/day_recommend';
|
||||
import { Playlist } from '@/type/list';
|
||||
import type { IListDetail } from '@/type/listDetail';
|
||||
import { SongResult } from '@/type/music';
|
||||
import type { IHotSinger } from '@/type/singer';
|
||||
import type { Artist, IHotSinger } from '@/type/singer';
|
||||
import {
|
||||
getImgUrl,
|
||||
isMobile,
|
||||
@@ -167,6 +167,7 @@ import {
|
||||
setAnimationDelay,
|
||||
setBackgroundImg
|
||||
} from '@/utils';
|
||||
import { getArtistDetail } from '@/api/artist';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const playerStore = usePlayerStore();
|
||||
@@ -246,21 +247,49 @@ const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
loadNonUserData();
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
const JayChouId = 6452;
|
||||
const loadArtistData = async () => {
|
||||
try {
|
||||
// 获取每日推荐
|
||||
try {
|
||||
const { data: artistData }: { data: { data: { artist: Artist } } } = await getArtistDetail(JayChouId);
|
||||
console.log('artistData', artistData);
|
||||
if (hotSingerData.value) {
|
||||
// 将周杰伦数据放在第一位
|
||||
hotSingerData.value.artists = [artistData.data.artist, ...hotSingerData.value.artists];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取周杰伦数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载不需要登录的数据
|
||||
const loadNonUserData = async () => {
|
||||
try {
|
||||
|
||||
// 获取每日推荐
|
||||
try {
|
||||
const {
|
||||
data: { data: dayRecommend }
|
||||
} = await getDayRecommend();
|
||||
dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
console.error('获取每日推荐失败:', error);
|
||||
}
|
||||
// 获取热门歌手
|
||||
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
hotSingerData.value = singerData;
|
||||
|
||||
await loadArtistData();
|
||||
} catch (error) {
|
||||
console.error('加载热门歌手数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载需要登录的数据
|
||||
const loadUserData = async () => {
|
||||
try {
|
||||
if (userStore.user) {
|
||||
const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
|
||||
// 确保最多只显示4个歌单，并按播放次数排序
|
||||
@@ -268,12 +297,8 @@ const loadData = async () => {
|
||||
.sort((a, b) => b.playCount - a.playCount)
|
||||
.slice(0, 4);
|
||||
}
|
||||
|
||||
// 获取热门歌手
|
||||
const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
|
||||
hotSingerData.value = singerData;
|
||||
} catch (error) {
|
||||
console.error('error', error);
|
||||
console.error('加载用户数据失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -394,7 +419,7 @@ const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongRe
|
||||
// 监听登录状态
|
||||
watchEffect(() => {
|
||||
if (userStore.user) {
|
||||
loadData();
|
||||
loadUserData();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -123,7 +123,7 @@ import SongItem from '@/components/common/SongItem.vue';
|
||||
import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore, useSettingsStore } from '@/store';
|
||||
import { isBilibiliIdMatch, usePlayerStore, useSettingsStore } from '@/store';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
|
||||
@@ -185,20 +185,31 @@ const mute = () => {
|
||||
|
||||
// 收藏相关
|
||||
const isFavorite = computed(() => {
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
return playerStore.favoriteList.includes(numericId);
|
||||
// 对于B站视频，使用ID匹配函数
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
}
|
||||
|
||||
// 非B站视频直接比较ID
|
||||
return playerStore.favoriteList.includes(playMusic.value.id);
|
||||
});
|
||||
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
e.stopPropagation();
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
|
||||
// 处理B站视频的收藏ID
|
||||
let favoriteId = playMusic.value.id;
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
// 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
|
||||
if (!String(favoriteId).includes('--')) {
|
||||
favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
playerStore.removeFromFavorite(favoriteId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
playerStore.addToFavorite(favoriteId);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -87,6 +87,9 @@
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
|
||||
<!-- 定时关闭按钮 -->
|
||||
<SleepTimerPopover mode="mobile" />
|
||||
</template>
|
||||
|
||||
<!-- Mini模式 - 在musicFullVisible为false时显示 -->
|
||||
@@ -152,6 +155,7 @@ import { useThrottleFn } from '@vueuse/core';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
|
||||
import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
|
||||
import MusicFull from '@/layout/components/MusicFull.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
|
||||
@@ -144,6 +144,8 @@
|
||||
</template>
|
||||
<eq-control />
|
||||
</n-popover>
|
||||
<!-- 定时关闭功能 -->
|
||||
<sleep-timer-popover mode="desktop" />
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
@@ -194,6 +196,7 @@ import { useI18n } from 'vue-i18n';
|
||||
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import EqControl from '@/components/EQControl.vue';
|
||||
import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
|
||||
import {
|
||||
allTime,
|
||||
artistList,
|
||||
@@ -206,7 +209,10 @@ import {
|
||||
import { useArtist } from '@/hooks/useArtist';
|
||||
import MusicFull from '@/layout/components/MusicFull.vue';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
import {
|
||||
isBilibiliIdMatch,
|
||||
usePlayerStore
|
||||
} from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import type { SongResult } from '@/type/music';
|
||||
import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
|
||||
@@ -417,22 +423,32 @@ const scrollToPlayList = (val: boolean) => {
|
||||
};
|
||||
|
||||
const isFavorite = computed(() => {
|
||||
// 将id转换为number，兼容B站视频ID
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
return playerStore.favoriteList.includes(numericId);
|
||||
// 对于B站视频，使用ID匹配函数
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
|
||||
}
|
||||
|
||||
// 非B站视频直接比较ID
|
||||
return playerStore.favoriteList.includes(playMusic.value.id);
|
||||
});
|
||||
|
||||
const toggleFavorite = async (e: Event) => {
|
||||
console.log('playMusic.value', playMusic.value);
|
||||
e.stopPropagation();
|
||||
// 将id转换为number，兼容B站视频ID
|
||||
const numericId =
|
||||
typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
|
||||
|
||||
|
||||
// 处理B站视频的收藏ID
|
||||
let favoriteId = playMusic.value.id;
|
||||
if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
|
||||
// 如果当前播放的是B站视频，且已有ID不包含--格式，则需要构造完整ID
|
||||
if (!String(favoriteId).includes('--')) {
|
||||
favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (isFavorite.value) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
playerStore.removeFromFavorite(favoriteId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
playerStore.addToFavorite(favoriteId);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
478
src/renderer/components/player/SleepTimerPopover.vue
Normal file
478
src/renderer/components/player/SleepTimerPopover.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:z-index="99999999"
|
||||
content-class="sleep-timer"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
placement="top"
|
||||
display-directive="show"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-tooltip trigger="hover" :z-index="9999999">
|
||||
<template #trigger>
|
||||
<div class="control-btn timer" :class="{ 'mobile-timer': mode === 'mobile' }">
|
||||
<i
|
||||
class="iconfont ri-time-line"
|
||||
:class="{ 'text-green-500': hasTimerActive }"
|
||||
></i>
|
||||
</div>
|
||||
</template>
|
||||
{{ t('player.sleepTimer.title') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<div class="sleep-timer-container" :class="{ 'mobile-sleep-timer-container': mode === 'mobile' }">
|
||||
<div class="sleep-timer-back"></div>
|
||||
|
||||
<div class="sleep-timer-content">
|
||||
<div class="sleep-timer-title">{{ t('player.sleepTimer.title') }}</div>
|
||||
|
||||
<div v-if="hasTimerActive" class="sleep-timer-active">
|
||||
<div class="timer-status">
|
||||
<template v-if="timerType === 'time'">
|
||||
<div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.minutesRemaining', { minutes: Math.ceil(remainingMinutes/60) }) }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'songs'">
|
||||
<div class="timer-value">{{ remainingSongs }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
|
||||
</template>
|
||||
<template v-else-if="timerType === 'end'">
|
||||
<div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
|
||||
<div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
|
||||
{{ t('player.sleepTimer.cancel') }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="sleep-timer-options">
|
||||
<!-- 按时间定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
|
||||
<div class="time-options">
|
||||
<n-button
|
||||
v-for="minutes in [15, 30, 60, 90]"
|
||||
:key="minutes"
|
||||
size="small"
|
||||
class="time-option-btn"
|
||||
@click="handleSetTimeTimer(minutes)"
|
||||
round
|
||||
>
|
||||
{{ minutes }}{{ t('player.sleepTimer.minutes') }}
|
||||
</n-button>
|
||||
<div class="custom-time">
|
||||
<n-input-number
|
||||
v-model:value="customMinutes"
|
||||
:min="1"
|
||||
:max="300"
|
||||
size="small"
|
||||
class="custom-time-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-time-btn"
|
||||
:disabled="!customMinutes"
|
||||
@click="handleSetTimeTimer(customMinutes)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按歌曲数定时 -->
|
||||
<div class="option-section">
|
||||
<h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
|
||||
<div class="songs-options">
|
||||
<n-button
|
||||
v-for="songs in [1, 3, 5, 10]"
|
||||
:key="songs"
|
||||
size="small"
|
||||
class="songs-option-btn"
|
||||
@click="handleSetSongsTimer(songs)"
|
||||
round
|
||||
>
|
||||
{{ songs }}{{ t('player.sleepTimer.songs') }}
|
||||
</n-button>
|
||||
<div class="custom-songs">
|
||||
<n-input-number
|
||||
v-model:value="customSongs"
|
||||
:min="1"
|
||||
:max="50"
|
||||
size="small"
|
||||
class="custom-songs-input"
|
||||
round
|
||||
/>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="custom-songs-btn"
|
||||
:disabled="!customSongs"
|
||||
@click="handleSetSongsTimer(customSongs)"
|
||||
round
|
||||
>
|
||||
{{ t('player.sleepTimer.set') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 播放完列表后关闭 -->
|
||||
<div class="option-section playlist-end-section">
|
||||
<n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
|
||||
{{ t('player.sleepTimer.playlistEnd') }}
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-popover>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
// 组件接收一个mode参数，用于标识是移动端还是桌面端
|
||||
defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'desktop' // 'desktop' 或 'mobile'
|
||||
}
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const playerStore = usePlayerStore();
|
||||
|
||||
// 从store获取所有相关状态
|
||||
const { sleepTimer} = storeToRefs(playerStore);
|
||||
|
||||
// 本地状态，用于UI展示
|
||||
const customMinutes = ref(30);
|
||||
const customSongs = ref(5);
|
||||
// 添加一个刷新触发变量，用于强制更新倒计时
|
||||
const refreshTrigger = ref(0);
|
||||
|
||||
// 计算属性，判断定时器状态
|
||||
const hasTimerActive = computed(() => {
|
||||
return playerStore.hasSleepTimerActive;
|
||||
});
|
||||
|
||||
const timerType = computed(() => {
|
||||
return sleepTimer.value.type;
|
||||
});
|
||||
|
||||
// 剩余时间（分钟）
|
||||
const remainingMinutes = computed(() => {
|
||||
return playerStore.sleepTimerRemainingTime;
|
||||
});
|
||||
|
||||
// 剩余歌曲数
|
||||
const remainingSongs = computed(() => {
|
||||
return playerStore.sleepTimerRemainingSongs;
|
||||
});
|
||||
|
||||
// 处理设置时间定时器
|
||||
function handleSetTimeTimer(minutes: number) {
|
||||
playerStore.setSleepTimerByTime(minutes);
|
||||
}
|
||||
|
||||
// 处理设置歌曲数定时器
|
||||
function handleSetSongsTimer(songs: number) {
|
||||
playerStore.setSleepTimerBySongs(songs);
|
||||
}
|
||||
|
||||
// 处理设置播放列表结束定时器
|
||||
function handleSetPlaylistEndTimer() {
|
||||
playerStore.setSleepTimerAtPlaylistEnd();
|
||||
}
|
||||
|
||||
// 处理取消定时器
|
||||
function handleCancelTimer() {
|
||||
playerStore.clearSleepTimer();
|
||||
}
|
||||
|
||||
// 格式化剩余时间为 HH:MM:SS
|
||||
const formattedRemainingTime = computed(() => {
|
||||
// 依赖刷新触发器强制更新
|
||||
void refreshTrigger.value;
|
||||
|
||||
if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
const totalSeconds = Math.floor(remaining / 1000);
|
||||
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = Math.floor(totalSeconds % 60);
|
||||
|
||||
const formattedHours = hours.toString().padStart(2, '0');
|
||||
const formattedMinutes = minutes.toString().padStart(2, '0');
|
||||
const formattedSeconds = seconds.toString().padStart(2, '0');
|
||||
|
||||
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
||||
});
|
||||
|
||||
// 监听剩余时间变化
|
||||
let timerInterval: number | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 如果当前有定时器，开始更新UI
|
||||
if (hasTimerActive.value && timerType.value === 'time') {
|
||||
startTimerUpdate();
|
||||
}
|
||||
|
||||
// 监听定时器状态变化
|
||||
watch(
|
||||
() => [hasTimerActive.value, timerType.value],
|
||||
([newHasTimer, newType]) => {
|
||||
if (newHasTimer && newType === 'time') {
|
||||
startTimerUpdate();
|
||||
} else {
|
||||
stopTimerUpdate();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 启动定时器更新UI
|
||||
function startTimerUpdate() {
|
||||
stopTimerUpdate(); // 先停止之前的计时器
|
||||
|
||||
// 每秒更新UI
|
||||
timerInterval = window.setInterval(() => {
|
||||
// 更新刷新触发器，强制重新计算
|
||||
refreshTrigger.value = Date.now();
|
||||
}, 500) as unknown as number;
|
||||
}
|
||||
|
||||
// 停止定时器更新UI
|
||||
function stopTimerUpdate() {
|
||||
if (timerInterval) {
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopTimerUpdate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.control-btn.timer {
|
||||
@apply cursor-pointer;
|
||||
|
||||
.iconfont {
|
||||
@apply text-2xl m-4 transition-all duration-300 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-green-500 transform scale-110;
|
||||
}
|
||||
}
|
||||
|
||||
&.mobile-timer {
|
||||
@apply flex items-center justify-center;
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主容器样式
|
||||
.sleep-timer-container {
|
||||
width: 380px;
|
||||
height: auto;
|
||||
@apply relative overflow-hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
transform-origin: top center;
|
||||
animation: popoverEnter 0.2s cubic-bezier(0.3, 0, 0.2, 1);
|
||||
|
||||
// 入场动画
|
||||
@keyframes popoverEnter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 移动端样式
|
||||
&.mobile-sleep-timer-container {
|
||||
width: 92vw;
|
||||
max-width: 400px;
|
||||
@apply rounded-t-2xl;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
// 背景毛玻璃效果
|
||||
.sleep-timer-back {
|
||||
@apply absolute top-0 left-0 w-full h-full dark:bg-gray-900 dark:bg-opacity-75 dark:border-gray-700;
|
||||
backdrop-filter: blur(25px);
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.sleep-timer-content {
|
||||
@apply p-6 relative z-10;
|
||||
|
||||
// 标题
|
||||
.sleep-timer-title {
|
||||
@apply text-xl font-bold text-center mb-6 text-gray-800 dark:text-gray-100;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
// 激活状态显示
|
||||
.sleep-timer-active {
|
||||
@apply flex flex-col items-center;
|
||||
|
||||
// 定时状态卡片
|
||||
.timer-status {
|
||||
@apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 定时值显示
|
||||
.timer-value {
|
||||
@apply text-4xl font-semibold mb-2 text-green-500;
|
||||
|
||||
&.countdown-timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签文本
|
||||
.timer-label {
|
||||
@apply text-base text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
.cancel-timer-btn {
|
||||
@apply w-full py-3 text-base rounded-full transition-all duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定时器选项区域
|
||||
.sleep-timer-options {
|
||||
@apply flex flex-col;
|
||||
|
||||
// 选项部分
|
||||
.option-section {
|
||||
@apply mb-7;
|
||||
|
||||
// 选项标题
|
||||
.option-title {
|
||||
@apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
// 时间/歌曲选项容器
|
||||
.time-options, .songs-options {
|
||||
@apply flex flex-wrap gap-2;
|
||||
|
||||
// 选项按钮共享样式
|
||||
.time-option-btn, .songs-option-btn {
|
||||
@apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义输入区域
|
||||
.custom-time, .custom-songs {
|
||||
@apply flex items-center space-x-2 mt-4 w-full;
|
||||
|
||||
// 输入框
|
||||
.custom-time-input, .custom-songs-input {
|
||||
@apply flex-1;
|
||||
|
||||
:deep(.n-input) {
|
||||
@apply rounded-full dark:bg-gray-800 dark:bg-opacity-40 dark:border-gray-700;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设置按钮
|
||||
.custom-time-btn, .custom-songs-btn {
|
||||
@apply py-2 px-4 rounded-full transition-all duration-200;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 播放列表结束选项
|
||||
.playlist-end-section {
|
||||
@apply mt-2;
|
||||
|
||||
.playlist-end-btn {
|
||||
@apply py-3 text-base rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
@apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
@apply dark:shadow-gray-900/20;
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-105 shadow-md;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@apply transform scale-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
src/renderer/components/settings/ClearCacheSettings.vue
Normal file
116
src/renderer/components/settings/ClearCacheSettings.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.system.cache')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="handleConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.system.cacheClearTitle') }}</p>
|
||||
<n-checkbox-group v-model:value="selectedTypes">
|
||||
<n-space vertical>
|
||||
<n-checkbox
|
||||
v-for="option in clearCacheOptions"
|
||||
:key="option.key"
|
||||
:value="option.key"
|
||||
:label="option.label"
|
||||
>
|
||||
<template #default>
|
||||
<div>
|
||||
<div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
|
||||
<div class="text-gray-400 text-sm">
|
||||
{{ t(`settings.system.cacheTypes.${option.key}.description`) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'confirm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const visible = ref(props.show);
|
||||
const selectedTypes = ref<string[]>([]);
|
||||
|
||||
const clearCacheOptions = ref([
|
||||
{
|
||||
label: t('settings.system.cacheTypes.history.label'),
|
||||
key: 'history',
|
||||
description: t('settings.system.cacheTypes.history.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.favorite.label'),
|
||||
key: 'favorite',
|
||||
description: t('settings.system.cacheTypes.favorite.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.user.label'),
|
||||
key: 'user',
|
||||
description: t('settings.system.cacheTypes.user.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.settings.label'),
|
||||
key: 'settings',
|
||||
description: t('settings.system.cacheTypes.settings.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.downloads.label'),
|
||||
key: 'downloads',
|
||||
description: t('settings.system.cacheTypes.downloads.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.resources.label'),
|
||||
key: 'resources',
|
||||
description: t('settings.system.cacheTypes.resources.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.lyrics.label'),
|
||||
key: 'lyrics',
|
||||
description: t('settings.system.cacheTypes.lyrics.description')
|
||||
}
|
||||
]);
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm', selectedTypes.value);
|
||||
selectedTypes.value = [];
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
selectedTypes.value = [];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
120
src/renderer/components/settings/MusicSourceSettings.vue
Normal file
120
src/renderer/components/settings/MusicSourceSettings.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.playback.musicSources')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="handleConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
|
||||
<n-checkbox-group v-model:value="selectedSources">
|
||||
<n-grid :cols="2" :x-gap="12" :y-gap="8">
|
||||
<n-grid-item v-for="source in musicSourceOptions" :key="source.value">
|
||||
<n-checkbox :value="source.value">
|
||||
{{ source.label }}
|
||||
<template v-if="source.value === 'gdmusic'">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
|
||||
<i class="ri-information-line"></i>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ t('settings.playback.gdmusicInfo') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-checkbox-group>
|
||||
<div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
|
||||
{{ t('settings.playback.musicSourcesWarning') }}
|
||||
</div>
|
||||
|
||||
<!-- GD音乐台设置 -->
|
||||
<div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
|
||||
</p>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { type Platform } from '@/types/music';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sources: {
|
||||
type: Array as () => Platform[],
|
||||
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'update:sources']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const visible = ref(props.show);
|
||||
const selectedSources = ref<Platform[]>(props.sources);
|
||||
|
||||
const musicSourceOptions = ref([
|
||||
{ label: 'MiGu音乐', value: 'migu' },
|
||||
{ label: '酷狗音乐', value: 'kugou' },
|
||||
{ label: 'pyncmd', value: 'pyncmd' },
|
||||
{ label: '酷我音乐', value: 'kuwo' },
|
||||
{ label: 'Bilibili音乐', value: 'bilibili' },
|
||||
{ label: 'YouTube', value: 'youtube' },
|
||||
{ label: 'GD音乐台', value: 'gdmusic' }
|
||||
]);
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
// 同步外部sources属性变化
|
||||
watch(
|
||||
() => props.sources,
|
||||
(newVal) => {
|
||||
selectedSources.value = [...newVal];
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const handleConfirm = () => {
|
||||
// 确保至少选择一个音源
|
||||
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
|
||||
const valuesToEmit = selectedSources.value.length > 0
|
||||
? [...new Set(selectedSources.value)]
|
||||
: defaultPlatforms;
|
||||
|
||||
emit('update:sources', valuesToEmit);
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
// 取消时还原为props传入的初始值
|
||||
selectedSources.value = [...props.sources];
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
152
src/renderer/components/settings/ProxySettings.vue
Normal file
152
src/renderer/components/settings/ProxySettings.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="dialog"
|
||||
:title="t('settings.network.proxy')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
:show-icon="false"
|
||||
@positive-click="handleProxyConfirm"
|
||||
@negative-click="handleCancel"
|
||||
>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="proxyForm"
|
||||
:rules="proxyRules"
|
||||
label-placement="left"
|
||||
label-width="80"
|
||||
require-mark-placement="right-hanging"
|
||||
>
|
||||
<n-form-item :label="t('settings.network.proxy')" path="protocol">
|
||||
<n-select
|
||||
v-model:value="proxyForm.protocol"
|
||||
:options="[
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'SOCKS5', value: 'socks5' }
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyHost')" path="host">
|
||||
<n-input
|
||||
v-model:value="proxyForm.host"
|
||||
:placeholder="t('settings.network.proxyHostPlaceholder')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyPort')" path="port">
|
||||
<n-input-number
|
||||
v-model:value="proxyForm.port"
|
||||
:placeholder="t('settings.network.proxyPortPlaceholder')"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import type { FormRules } from 'naive-ui';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
protocol: 'http',
|
||||
host: '127.0.0.1',
|
||||
port: 7890
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:show', 'confirm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
const formRef = ref();
|
||||
|
||||
const visible = ref(props.show);
|
||||
const proxyForm = ref({
|
||||
protocol: props.config.protocol || 'http',
|
||||
host: props.config.host || '127.0.0.1',
|
||||
port: props.config.port || 7890
|
||||
});
|
||||
|
||||
const proxyRules: FormRules = {
|
||||
protocol: {
|
||||
required: true,
|
||||
message: t('settings.validation.selectProxyProtocol'),
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
host: {
|
||||
required: true,
|
||||
message: t('settings.validation.proxyHost'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
if (!value) return false;
|
||||
// 简单的IP或域名验证
|
||||
const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
|
||||
return ipRegex.test(value);
|
||||
}
|
||||
},
|
||||
port: {
|
||||
required: true,
|
||||
message: t('settings.validation.portNumber'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
return value >= 1 && value <= 65535;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 同步外部show属性变化
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
visible.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// 同步内部visible变化
|
||||
watch(
|
||||
() => visible.value,
|
||||
(newVal) => {
|
||||
emit('update:show', newVal);
|
||||
}
|
||||
);
|
||||
|
||||
// 同步外部config变化
|
||||
watch(
|
||||
() => props.config,
|
||||
(newVal) => {
|
||||
proxyForm.value = {
|
||||
protocol: newVal.protocol || 'http',
|
||||
host: newVal.host || '127.0.0.1',
|
||||
port: newVal.port || 7890
|
||||
};
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const handleProxyConfirm = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
emit('confirm', { ...proxyForm.value });
|
||||
visible.value = false;
|
||||
message.success(t('settings.network.messages.proxySuccess'));
|
||||
} catch (err) {
|
||||
message.error(t('settings.network.messages.proxyError'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
226
src/renderer/components/settings/ServerSetting.vue
Normal file
226
src/renderer/components/settings/ServerSetting.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<n-modal
|
||||
v-model:show="visible"
|
||||
preset="card"
|
||||
:title="t('settings.remoteControl.title')"
|
||||
class="remote-control-modal"
|
||||
style="max-width: 650px; width: 100%"
|
||||
>
|
||||
<n-scrollbar>
|
||||
<div class="remote-control-setting">
|
||||
<n-form label-placement="left" label-width="auto" :style="{ maxWidth: '640px' }">
|
||||
<n-form-item :label="t('settings.remoteControl.enable')">
|
||||
<n-switch v-model:value="remoteControlConfig.enabled" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item :label="t('settings.remoteControl.port')">
|
||||
<n-input-number
|
||||
v-model:value="remoteControlConfig.port"
|
||||
:min="1024"
|
||||
:max="65535"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item :label="t('settings.remoteControl.allowedIps')">
|
||||
<div class="allowed-ips-container">
|
||||
<div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
|
||||
<n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
|
||||
<n-button
|
||||
quaternary
|
||||
circle
|
||||
type="error"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="removeIp(index)"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-delete-bin-line"></i></n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
</div>
|
||||
<n-button
|
||||
secondary
|
||||
size="small"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="addIp"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-add-line"></i></n-icon>
|
||||
</template>
|
||||
{{ t('settings.remoteControl.addIp') }}
|
||||
</n-button>
|
||||
<n-text depth="3" size="small" class="allow-all-hint">
|
||||
{{ t('settings.remoteControl.emptyListHint') }}
|
||||
</n-text>
|
||||
</div>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-space>
|
||||
<n-button
|
||||
type="primary"
|
||||
:disabled="!remoteControlConfig.enabled"
|
||||
@click="saveConfig"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</n-button>
|
||||
<n-button @click="resetConfig">
|
||||
{{ t('common.reset') }}
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
|
||||
<n-collapse-transition :show="remoteControlConfig.enabled">
|
||||
<div class="remote-info">
|
||||
<n-alert type="info">
|
||||
<template #icon>
|
||||
<n-icon><i class="ri-information-line"></i></n-icon>
|
||||
</template>
|
||||
<p>{{ t('settings.remoteControl.accessInfo') }}</p>
|
||||
<div class="access-url">
|
||||
<n-tag type="success">
|
||||
http://localhost:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
</div>
|
||||
<div v-if="localIpAddresses.length" class="local-ips">
|
||||
<div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
|
||||
<n-tag type="info">
|
||||
http://{{ ip }}:{{ remoteControlConfig.port }}/
|
||||
</n-tag>
|
||||
</div>
|
||||
</div>
|
||||
</n-alert>
|
||||
</div>
|
||||
</n-collapse-transition>
|
||||
</n-form>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
const { t } = useI18n();
|
||||
const message = useMessage();
|
||||
|
||||
// 控制弹窗显示的属性
|
||||
const visible = defineModel('visible', { default: false });
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig:{
|
||||
enabled: boolean,
|
||||
port: number,
|
||||
allowedIps: string[]
|
||||
} = {
|
||||
enabled: false,
|
||||
port: 31888,
|
||||
allowedIps: []
|
||||
};
|
||||
|
||||
// 远程控制配置
|
||||
const remoteControlConfig = ref({...defaultConfig});
|
||||
|
||||
// 本地IP地址列表
|
||||
const localIpAddresses = ref<string[]>([]);
|
||||
|
||||
// 获取本地IP地址
|
||||
const getLocalIpAddresses = () => {
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.invoke('get-local-ip-addresses').then((ips: string[]) => {
|
||||
localIpAddresses.value = ips;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 添加IP地址
|
||||
const addIp = () => {
|
||||
remoteControlConfig.value.allowedIps.push('');
|
||||
};
|
||||
|
||||
// 删除IP地址
|
||||
const removeIp = (index: number) => {
|
||||
remoteControlConfig.value.allowedIps.splice(index, 1);
|
||||
};
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = () => {
|
||||
// 过滤空IP
|
||||
remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
|
||||
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
|
||||
message.success(t('settings.remoteControl.saveSuccess'));
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = () => {
|
||||
if (window.electron) {
|
||||
window.electron.ipcRenderer.invoke('get-remote-control-config').then((config) => {
|
||||
if (config) {
|
||||
remoteControlConfig.value = config;
|
||||
} else {
|
||||
remoteControlConfig.value = { ...defaultConfig };
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时，获取当前配置
|
||||
onMounted(async () => {
|
||||
if (window.electron) {
|
||||
try {
|
||||
const config = await window.electron.ipcRenderer.invoke('get-remote-control-config');
|
||||
if (config) {
|
||||
remoteControlConfig.value = config;
|
||||
}
|
||||
// 获取本地IP地址
|
||||
getLocalIpAddresses();
|
||||
} catch (error) {
|
||||
console.error('获取远程控制配置失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.remote-control-setting {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.allowed-ips-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
.ip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.allow-all-hint {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.remote-info {
|
||||
margin-top: 16px;
|
||||
|
||||
.access-url {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.local-ips {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,6 @@ import { cloneDeep } from 'lodash';
|
||||
import { createDiscreteApi } from 'naive-ui';
|
||||
import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
import i18n from '@/../i18n/renderer';
|
||||
import { getBilibiliAudioUrl } from '@/api/bilibili';
|
||||
import useIndexedDB from '@/hooks/IndexDBHook';
|
||||
import { audioService } from '@/services/audioService';
|
||||
@@ -235,70 +234,8 @@ const initProgressAnimation = () => {
|
||||
// 初始化进度动画
|
||||
initProgressAnimation();
|
||||
|
||||
// 简化后的 watch 函数，只保留核心逻辑
|
||||
watch(
|
||||
() => playerStore.playMusicUrl,
|
||||
async (newVal) => {
|
||||
if (newVal && playMusic.value) {
|
||||
try {
|
||||
// 保存当前播放状态
|
||||
const shouldPlay = playerStore.play;
|
||||
|
||||
// 检查是否有保存的进度
|
||||
let initialPosition = 0;
|
||||
const savedProgress = JSON.parse(localStorage.getItem('playProgress') || '{}');
|
||||
if (savedProgress.songId === playMusic.value.id) {
|
||||
initialPosition = savedProgress.progress;
|
||||
}
|
||||
|
||||
// 对于B站视频，检查URL是否有效
|
||||
if (playMusic.value.source === 'bilibili' && (!newVal || newVal === 'undefined')) {
|
||||
console.log('B站视频URL无效，尝试重新获取');
|
||||
|
||||
// 需要重新获取B站视频URL
|
||||
if (playMusic.value.bilibiliData) {
|
||||
try {
|
||||
const proxyUrl = await getBilibiliAudioUrl(
|
||||
playMusic.value.bilibiliData.bvid,
|
||||
playMusic.value.bilibiliData.cid
|
||||
);
|
||||
|
||||
// 设置URL到播放器状态
|
||||
(playMusic.value as any).playMusicUrl = proxyUrl;
|
||||
playerStore.playMusicUrl = proxyUrl;
|
||||
newVal = proxyUrl;
|
||||
} catch (error) {
|
||||
console.error('获取B站音频URL失败:', error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 播放新音频，传递是否应该播放的状态
|
||||
const newSound = await audioService.play(newVal, playMusic.value, shouldPlay);
|
||||
sound.value = newSound as Howl;
|
||||
|
||||
// 如果有保存的进度，设置播放位置
|
||||
if (initialPosition > 0) {
|
||||
newSound.seek(initialPosition);
|
||||
// 同时更新进度条显示
|
||||
nowTime.value = initialPosition;
|
||||
}
|
||||
|
||||
setupAudioListeners();
|
||||
|
||||
// 确保状态与 localStorage 同步
|
||||
localStorage.setItem('currentPlayMusic', JSON.stringify(playerStore.playMusic));
|
||||
localStorage.setItem('currentPlayMusicUrl', newVal);
|
||||
} catch (error) {
|
||||
console.error('播放音频失败:', error);
|
||||
// store.commit('setPlayMusic', false);
|
||||
playerStore.setPlayMusic(false);
|
||||
message.error(i18n.global.t('player.playFailed'));
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
// 移除对 playerStore.playMusicUrl 的监听，因为播放逻辑已经在 player.ts 中处理
|
||||
// 保留 watch 对 playerStore.playMusic 的监听以更新歌词数据
|
||||
|
||||
watch(
|
||||
() => playerStore.playMusic,
|
||||
@@ -1009,3 +946,27 @@ audioService.on('url_expired', async (expiredTrack) => {
|
||||
message.error('恢复播放失败，请手动点击播放');
|
||||
}
|
||||
});
|
||||
|
||||
// 添加音频就绪事件监听器
|
||||
window.addEventListener('audio-ready', ((event: CustomEvent) => {
|
||||
try {
|
||||
const { sound: newSound } = event.detail;
|
||||
if (newSound) {
|
||||
// 更新本地 sound 引用
|
||||
sound.value = newSound as Howl;
|
||||
|
||||
// 设置音频监听器
|
||||
setupAudioListeners();
|
||||
|
||||
// 获取当前播放位置并更新显示
|
||||
const currentPosition = newSound.seek() as number;
|
||||
if (typeof currentPosition === 'number' && !Number.isNaN(currentPosition)) {
|
||||
nowTime.value = currentPosition;
|
||||
}
|
||||
|
||||
console.log('音频就绪，已设置监听器并更新进度显示');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理音频就绪事件出错:', error);
|
||||
}
|
||||
}) as EventListener);
|
||||
|
||||
@@ -41,6 +41,11 @@ class AudioService {
|
||||
|
||||
private seekDebounceTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 添加操作锁防止并发操作
|
||||
private operationLock = false;
|
||||
private operationLockTimer: NodeJS.Timeout | null = null;
|
||||
private operationLockTimeout = 5000; // 5秒超时
|
||||
|
||||
constructor() {
|
||||
if ('mediaSession' in navigator) {
|
||||
this.initMediaSession();
|
||||
@@ -356,8 +361,47 @@ class AudioService {
|
||||
}
|
||||
}
|
||||
|
||||
// 设置操作锁，带超时自动释放
|
||||
private setOperationLock(): boolean {
|
||||
if (this.operationLock) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.operationLock = true;
|
||||
|
||||
// 清除之前的定时器
|
||||
if (this.operationLockTimer) {
|
||||
clearTimeout(this.operationLockTimer);
|
||||
}
|
||||
|
||||
// 设置超时自动释放锁
|
||||
this.operationLockTimer = setTimeout(() => {
|
||||
console.warn('操作锁超时自动释放');
|
||||
this.operationLock = false;
|
||||
this.operationLockTimer = null;
|
||||
}, this.operationLockTimeout);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// 释放操作锁
|
||||
private releaseOperationLock(): void {
|
||||
this.operationLock = false;
|
||||
|
||||
if (this.operationLockTimer) {
|
||||
clearTimeout(this.operationLockTimer);
|
||||
this.operationLockTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 播放控制相关
|
||||
play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
|
||||
// 如果操作锁已激活，说明有操作正在进行中，直接返回
|
||||
if (!this.setOperationLock()) {
|
||||
console.log('audioService: 操作锁激活，忽略当前播放请求');
|
||||
return Promise.reject(new Error('操作锁激活，请等待当前操作完成'));
|
||||
}
|
||||
|
||||
// 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
|
||||
if (this.currentSound && !url && !track) {
|
||||
// 如果有进行中的seek操作，等待其完成
|
||||
@@ -366,15 +410,17 @@ class AudioService {
|
||||
this.seekLock = false;
|
||||
}
|
||||
this.currentSound.play();
|
||||
this.releaseOperationLock();
|
||||
return Promise.resolve(this.currentSound);
|
||||
}
|
||||
|
||||
// 如果没有提供必要的参数，返回错误
|
||||
if (!url || !track) {
|
||||
this.releaseOperationLock();
|
||||
return Promise.reject(new Error('Missing required parameters: url and track'));
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise<Howl>((resolve, reject) => {
|
||||
let retryCount = 0;
|
||||
const maxRetries = 1;
|
||||
|
||||
@@ -507,11 +553,15 @@ class AudioService {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating audio instance:', error);
|
||||
this.releaseOperationLock();
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
tryPlay();
|
||||
}).finally(() => {
|
||||
// 无论成功或失败都解除操作锁
|
||||
this.releaseOperationLock();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -524,6 +574,11 @@ class AudioService {
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (!this.setOperationLock()) {
|
||||
console.log('audioService: 操作锁激活，忽略当前停止请求');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentSound) {
|
||||
try {
|
||||
// 确保任何进行中的seek操作被取消
|
||||
@@ -538,11 +593,14 @@ class AudioService {
|
||||
}
|
||||
this.currentSound = null;
|
||||
}
|
||||
|
||||
this.currentTrack = null;
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.playbackState = 'none';
|
||||
}
|
||||
this.disposeEQ();
|
||||
|
||||
this.releaseOperationLock();
|
||||
}
|
||||
|
||||
setVolume(volume: number) {
|
||||
@@ -553,6 +611,11 @@ class AudioService {
|
||||
}
|
||||
|
||||
seek(time: number) {
|
||||
if (!this.setOperationLock()) {
|
||||
console.log('audioService: 操作锁激活，忽略当前seek请求');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentSound) {
|
||||
try {
|
||||
// 直接执行seek操作，避免任何过滤或判断
|
||||
@@ -564,9 +627,16 @@ class AudioService {
|
||||
console.error('Seek操作失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
this.releaseOperationLock();
|
||||
}
|
||||
|
||||
pause() {
|
||||
if (!this.setOperationLock()) {
|
||||
console.log('audioService: 操作锁激活，忽略当前暂停请求');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentSound) {
|
||||
try {
|
||||
// 如果有进行中的seek操作，等待其完成
|
||||
@@ -579,6 +649,8 @@ class AudioService {
|
||||
console.error('Error pausing audio:', error);
|
||||
}
|
||||
}
|
||||
|
||||
this.releaseOperationLock();
|
||||
}
|
||||
|
||||
clearAllListeners() {
|
||||
|
||||
@@ -2,17 +2,21 @@ import { cloneDeep } from 'lodash';
|
||||
import { defineStore } from 'pinia';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import i18n from '@/../i18n/renderer';
|
||||
import { getBilibiliAudioUrl } from '@/api/bilibili';
|
||||
import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl } from '@/api/music';
|
||||
import { useMusicHistory } from '@/hooks/MusicHistoryHook';
|
||||
import { audioService } from '@/services/audioService';
|
||||
import type { ILyric, ILyricText, SongResult } from '@/type/music';
|
||||
import { getImgUrl } from '@/utils';
|
||||
import { getImageLinearBackground } from '@/utils/linearColor';
|
||||
import { createDiscreteApi } from 'naive-ui';
|
||||
|
||||
import { useSettingsStore } from './settings';
|
||||
import { useUserStore } from './user';
|
||||
|
||||
const musicHistory = useMusicHistory();
|
||||
const { message } = createDiscreteApi(['message']);
|
||||
|
||||
const preloadingSounds = ref<Howl[]>([]);
|
||||
|
||||
@@ -25,6 +29,50 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
|
||||
}
|
||||
}
|
||||
|
||||
// 比较B站视频ID的辅助函数
|
||||
export const isBilibiliIdMatch = (id1: string | number, id2: string | number): boolean => {
|
||||
const str1 = String(id1);
|
||||
const str2 = String(id2);
|
||||
|
||||
// 如果两个ID都不包含--分隔符，直接比较
|
||||
if (!str1.includes('--') && !str2.includes('--')) {
|
||||
return str1 === str2;
|
||||
}
|
||||
|
||||
// 处理B站视频ID
|
||||
if (str1.includes('--') || str2.includes('--')) {
|
||||
// 尝试从ID中提取bvid和cid
|
||||
const extractBvIdAndCid = (str: string) => {
|
||||
if (!str.includes('--')) return { bvid: '', cid: '' };
|
||||
const parts = str.split('--');
|
||||
if (parts.length >= 3) {
|
||||
// bvid--pid--cid格式
|
||||
return { bvid: parts[0], cid: parts[2] };
|
||||
} else if (parts.length === 2) {
|
||||
// 旧格式或其他格式
|
||||
return { bvid: '', cid: parts[1] };
|
||||
}
|
||||
return { bvid: '', cid: '' };
|
||||
};
|
||||
|
||||
const { bvid: bvid1, cid: cid1 } = extractBvIdAndCid(str1);
|
||||
const { bvid: bvid2, cid: cid2 } = extractBvIdAndCid(str2);
|
||||
|
||||
// 如果两个ID都有bvid，比较bvid和cid
|
||||
if (bvid1 && bvid2) {
|
||||
return bvid1 === bvid2 && cid1 === cid2;
|
||||
}
|
||||
|
||||
// 其他情况，只比较cid部分
|
||||
if (cid1 && cid2) {
|
||||
return cid1 === cid2;
|
||||
}
|
||||
}
|
||||
|
||||
// 默认情况，直接比较完整ID
|
||||
return str1 === str2;
|
||||
};
|
||||
|
||||
// 提取公共函数：获取B站视频URL
|
||||
|
||||
export const getSongUrl = async (
|
||||
@@ -275,6 +323,23 @@ const loadLrcAsync = async (playMusic: SongResult) => {
|
||||
playMusic.lyric = lyrics;
|
||||
};
|
||||
|
||||
// 定时关闭类型
|
||||
export enum SleepTimerType {
|
||||
NONE = 'none', // 没有定时
|
||||
TIME = 'time', // 按时间定时
|
||||
SONGS = 'songs', // 按歌曲数定时
|
||||
PLAYLIST_END = 'end' // 播放列表播放完毕定时
|
||||
}
|
||||
|
||||
// 定时关闭信息
|
||||
export interface SleepTimerInfo {
|
||||
type: SleepTimerType;
|
||||
value: number; // 对于TIME类型，值以分钟为单位；对于SONGS类型，值为歌曲数量
|
||||
endTime?: number; // 何时结束（仅TIME类型）
|
||||
startSongIndex?: number; // 开始时的歌曲索引（对于SONGS类型）
|
||||
remainingSongs?: number; // 剩余歌曲数（对于SONGS类型）
|
||||
}
|
||||
|
||||
export const usePlayerStore = defineStore('player', () => {
|
||||
const play = ref(false);
|
||||
const isPlay = ref(false);
|
||||
@@ -284,9 +349,40 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
const playListIndex = ref(getLocalStorageItem('playListIndex', 0));
|
||||
const playMode = ref(getLocalStorageItem('playMode', 0));
|
||||
const musicFull = ref(false);
|
||||
const favoriteList = ref<number[]>(getLocalStorageItem('favoriteList', []));
|
||||
const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
|
||||
const savedPlayProgress = ref<number | undefined>();
|
||||
|
||||
|
||||
// 定时关闭相关状态
|
||||
const sleepTimer = ref<SleepTimerInfo>(getLocalStorageItem('sleepTimer', {
|
||||
type: SleepTimerType.NONE,
|
||||
value: 0
|
||||
}));
|
||||
|
||||
const timerInterval = ref<number | null>(null);
|
||||
|
||||
// 当前定时关闭状态
|
||||
const currentSleepTimer = computed(() => sleepTimer.value);
|
||||
|
||||
// 判断是否有活跃的定时关闭
|
||||
const hasSleepTimerActive = computed(() => sleepTimer.value.type !== SleepTimerType.NONE);
|
||||
|
||||
// 获取剩余时间（用于UI显示）
|
||||
const sleepTimerRemainingTime = computed(() => {
|
||||
if (sleepTimer.value.type === SleepTimerType.TIME && sleepTimer.value.endTime) {
|
||||
const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
|
||||
return Math.ceil(remaining / 60000); // 转换为分钟并向上取整
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// 获取剩余歌曲数（用于UI显示）
|
||||
const sleepTimerRemainingSongs = computed(() => {
|
||||
if (sleepTimer.value.type === SleepTimerType.SONGS) {
|
||||
return sleepTimer.value.remainingSongs || 0;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const currentSong = computed(() => playMusic.value);
|
||||
const isPlaying = computed(() => isPlay.value);
|
||||
const currentPlayList = computed(() => playList.value);
|
||||
@@ -310,50 +406,97 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取B站音频URL失败:', error);
|
||||
throw error; // 向上抛出错误，让调用者处理
|
||||
message.error(i18n.global.t('player.playFailed'));
|
||||
return false; // 返回失败状态
|
||||
}
|
||||
}
|
||||
|
||||
const updatedPlayMusic = await getSongDetail(music);
|
||||
playMusic.value = updatedPlayMusic;
|
||||
playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
|
||||
try {
|
||||
const updatedPlayMusic = await getSongDetail(music);
|
||||
playMusic.value = updatedPlayMusic;
|
||||
playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
|
||||
|
||||
play.value = isPlay;
|
||||
play.value = isPlay;
|
||||
|
||||
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
|
||||
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
|
||||
localStorage.setItem('isPlaying', play.value.toString());
|
||||
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
|
||||
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
|
||||
localStorage.setItem('isPlaying', play.value.toString());
|
||||
|
||||
let title = updatedPlayMusic.name;
|
||||
let title = updatedPlayMusic.name;
|
||||
|
||||
if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
|
||||
title += ` - ${updatedPlayMusic.song.artists.reduce(
|
||||
(prev: string, curr: any) => `${prev}${curr.name}/`,
|
||||
''
|
||||
)}`;
|
||||
} else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
|
||||
title += ` - ${updatedPlayMusic.song.ar[0].name}`;
|
||||
if (updatedPlayMusic.source === 'netease' && updatedPlayMusic?.song?.artists) {
|
||||
title += ` - ${updatedPlayMusic.song.artists.reduce(
|
||||
(prev: string, curr: any) => `${prev}${curr.name}/`,
|
||||
''
|
||||
)}`;
|
||||
} else if (updatedPlayMusic.source === 'bilibili' && updatedPlayMusic?.song?.ar?.[0]) {
|
||||
title += ` - ${updatedPlayMusic.song.ar[0].name}`;
|
||||
}
|
||||
|
||||
document.title = title;
|
||||
|
||||
loadLrcAsync(playMusic.value);
|
||||
|
||||
musicHistory.addMusic(playMusic.value);
|
||||
|
||||
// 找到歌曲在播放列表中的索引，如果是通过 nextPlay/prevPlay 调用的，不会更新 playListIndex
|
||||
const songIndex = playList.value.findIndex(
|
||||
(item: SongResult) => item.id === music.id && item.source === music.source
|
||||
);
|
||||
|
||||
// 只有在 songIndex 有效，并且与当前 playListIndex 不同时才更新
|
||||
// 这样可以避免与 nextPlay/prevPlay 中的索引更新冲突
|
||||
if (songIndex !== -1 && songIndex !== playListIndex.value) {
|
||||
console.log('歌曲索引不匹配，更新为:', songIndex);
|
||||
playListIndex.value = songIndex;
|
||||
}
|
||||
|
||||
// 无论如何都预加载更多歌曲
|
||||
if (songIndex !== -1) {
|
||||
fetchSongs(playList.value, songIndex + 1, songIndex + 3);
|
||||
} else {
|
||||
console.warn('当前歌曲未在播放列表中找到');
|
||||
}
|
||||
|
||||
// 使用标记防止循环调用
|
||||
let playInProgress = false;
|
||||
|
||||
// 直接调用 playAudio 方法播放音频，不需要依赖外部监听
|
||||
try {
|
||||
if (playInProgress) {
|
||||
console.warn('播放操作正在进行中，避免重复调用');
|
||||
return true;
|
||||
}
|
||||
|
||||
playInProgress = true;
|
||||
|
||||
// 因为调用 playAudio 前我们已经设置了 play.value，所以不需要额外传递 shouldPlay 参数
|
||||
const result = await playAudio();
|
||||
|
||||
playInProgress = false;
|
||||
return !!result;
|
||||
} catch (error) {
|
||||
console.error('自动播放音频失败:', error);
|
||||
playInProgress = false;
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理播放音乐失败:', error);
|
||||
message.error(i18n.global.t('player.playFailed'));
|
||||
return false;
|
||||
}
|
||||
|
||||
document.title = title;
|
||||
|
||||
loadLrcAsync(playMusic.value);
|
||||
|
||||
musicHistory.addMusic(playMusic.value);
|
||||
|
||||
playListIndex.value = playList.value.findIndex(
|
||||
(item: SongResult) => item.id === music.id && item.source === music.source
|
||||
);
|
||||
|
||||
fetchSongs(playList.value, playListIndex.value + 1, playListIndex.value + 3);
|
||||
};
|
||||
|
||||
const setPlay = async (song: SongResult) => {
|
||||
try {
|
||||
await handlePlayMusic(song);
|
||||
// 直接调用 handlePlayMusic，它会处理索引更新和播放逻辑
|
||||
const success = await handlePlayMusic(song);
|
||||
|
||||
// 记录到本地存储，保持一致性
|
||||
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
|
||||
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
|
||||
return true;
|
||||
|
||||
return success;
|
||||
} catch (error) {
|
||||
console.error('设置播放失败:', error);
|
||||
return false;
|
||||
@@ -404,57 +547,315 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
setPlayList(list);
|
||||
};
|
||||
|
||||
const nextPlay = async () => {
|
||||
if (playList.value.length === 0) {
|
||||
play.value = true;
|
||||
// 睡眠定时器功能
|
||||
const setSleepTimerByTime = (minutes: number) => {
|
||||
// 清除现有定时器
|
||||
clearSleepTimer();
|
||||
|
||||
if (minutes <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let nowPlayListIndex: number;
|
||||
|
||||
if (playMode.value === 2) {
|
||||
do {
|
||||
nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
|
||||
} while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
|
||||
} else {
|
||||
nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
|
||||
|
||||
const endTime = Date.now() + minutes * 60 * 1000;
|
||||
|
||||
sleepTimer.value = {
|
||||
type: SleepTimerType.TIME,
|
||||
value: minutes,
|
||||
endTime
|
||||
};
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
|
||||
// 设置定时器检查
|
||||
timerInterval.value = window.setInterval(() => {
|
||||
checkSleepTimer();
|
||||
}, 1000) as unknown as number; // 每秒检查一次
|
||||
|
||||
console.log(`设置定时关闭: ${minutes}分钟后`);
|
||||
return true;
|
||||
};
|
||||
|
||||
// 睡眠定时器功能
|
||||
const setSleepTimerBySongs = (songs: number) => {
|
||||
// 清除现有定时器
|
||||
clearSleepTimer();
|
||||
|
||||
if (songs <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
playListIndex.value = nowPlayListIndex;
|
||||
|
||||
// 获取下一首歌曲
|
||||
const nextSong = playList.value[playListIndex.value];
|
||||
|
||||
// 如果是B站视频，确保重新获取URL
|
||||
if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
|
||||
// 清除之前的URL，确保重新获取
|
||||
nextSong.playMusicUrl = undefined;
|
||||
console.log('下一首是B站视频，已清除URL强制重新获取');
|
||||
|
||||
sleepTimer.value = {
|
||||
type: SleepTimerType.SONGS,
|
||||
value: songs,
|
||||
startSongIndex: playListIndex.value,
|
||||
remainingSongs: songs
|
||||
};
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
|
||||
console.log(`设置定时关闭: 再播放${songs}首歌后`);
|
||||
return true;
|
||||
};
|
||||
|
||||
// 睡眠定时器功能
|
||||
const setSleepTimerAtPlaylistEnd = () => {
|
||||
// 清除现有定时器
|
||||
clearSleepTimer();
|
||||
|
||||
sleepTimer.value = {
|
||||
type: SleepTimerType.PLAYLIST_END,
|
||||
value: 0
|
||||
};
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
|
||||
console.log('设置定时关闭: 播放列表结束时');
|
||||
return true;
|
||||
};
|
||||
|
||||
// 取消定时关闭
|
||||
const clearSleepTimer = () => {
|
||||
if (timerInterval.value) {
|
||||
window.clearInterval(timerInterval.value);
|
||||
timerInterval.value = null;
|
||||
}
|
||||
|
||||
sleepTimer.value = {
|
||||
type: SleepTimerType.NONE,
|
||||
value: 0
|
||||
};
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
|
||||
console.log('取消定时关闭');
|
||||
return true;
|
||||
};
|
||||
|
||||
// 检查定时关闭是否应该触发
|
||||
const checkSleepTimer = () => {
|
||||
if (sleepTimer.value.type === SleepTimerType.NONE) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (sleepTimer.value.type === SleepTimerType.TIME && sleepTimer.value.endTime) {
|
||||
if (Date.now() >= sleepTimer.value.endTime) {
|
||||
// 时间到，停止播放
|
||||
stopPlayback();
|
||||
}
|
||||
} else if (sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
|
||||
// 播放列表结束定时由nextPlay方法处理
|
||||
}
|
||||
};
|
||||
|
||||
// 停止播放并清除定时器
|
||||
const stopPlayback = () => {
|
||||
console.log('定时器触发：停止播放');
|
||||
|
||||
if (isPlaying.value) {
|
||||
setIsPlay(false);
|
||||
audioService.pause();
|
||||
}
|
||||
|
||||
// 如果使用Electron，发送通知
|
||||
if (window.electron?.ipcRenderer) {
|
||||
window.electron.ipcRenderer.send('show-notification', {
|
||||
title: i18n.global.t('player.sleepTimer.timerEnded'),
|
||||
body: i18n.global.t('player.sleepTimer.playbackStopped')
|
||||
});
|
||||
}
|
||||
|
||||
// 清除定时器
|
||||
clearSleepTimer();
|
||||
};
|
||||
|
||||
// 监听歌曲变化，处理按歌曲数定时和播放列表结束定时
|
||||
const handleSongChange = () => {
|
||||
console.log('歌曲已切换，检查定时器状态:', sleepTimer.value);
|
||||
|
||||
// 处理按歌曲数定时
|
||||
if (sleepTimer.value.type === SleepTimerType.SONGS && sleepTimer.value.remainingSongs !== undefined) {
|
||||
sleepTimer.value.remainingSongs--;
|
||||
console.log(`剩余歌曲数: ${sleepTimer.value.remainingSongs}`);
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
|
||||
if (sleepTimer.value.remainingSongs <= 0) {
|
||||
// 歌曲数到达，停止播放
|
||||
console.log('已播放完设定的歌曲数，停止播放');
|
||||
stopPlayback()
|
||||
setTimeout(() => {
|
||||
stopPlayback();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理播放列表结束定时
|
||||
if (sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
|
||||
// 检查是否到达播放列表末尾
|
||||
const isLastSong = (playListIndex.value === playList.value.length - 1);
|
||||
|
||||
// 如果是列表最后一首歌且不是循环模式，则设置为在这首歌结束后停止
|
||||
if (isLastSong && playMode.value !== 1) { // 1 是循环模式
|
||||
console.log('已到达播放列表末尾，将在当前歌曲结束后停止播放');
|
||||
// 转换为按歌曲数定时，剩余1首
|
||||
sleepTimer.value = {
|
||||
type: SleepTimerType.SONGS,
|
||||
value: 1,
|
||||
remainingSongs: 1
|
||||
};
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await handlePlayMusic(nextSong);
|
||||
// 修改nextPlay方法，加入定时关闭检查逻辑
|
||||
const nextPlay = async () => {
|
||||
// 静态标志，防止多次调用造成递归
|
||||
if ((nextPlay as any).isRunning) {
|
||||
console.log('下一首播放正在执行中，忽略重复调用');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
(nextPlay as any).isRunning = true;
|
||||
|
||||
if (playList.value.length === 0) {
|
||||
play.value = true;
|
||||
(nextPlay as any).isRunning = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否是播放列表的最后一首且设置了播放列表结束定时
|
||||
if (playMode.value === 0 && playListIndex.value === playList.value.length - 1 &&
|
||||
sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
|
||||
// 已是最后一首且为顺序播放模式，触发停止
|
||||
stopPlayback();
|
||||
(nextPlay as any).isRunning = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 在切换前保存当前播放状态
|
||||
const shouldPlayNext = play.value;
|
||||
console.log('切换到下一首，当前播放状态:', shouldPlayNext ? '播放' : '暂停');
|
||||
|
||||
let nowPlayListIndex: number;
|
||||
|
||||
if (playMode.value === 2) {
|
||||
do {
|
||||
nowPlayListIndex = Math.floor(Math.random() * playList.value.length);
|
||||
} while (nowPlayListIndex === playListIndex.value && playList.value.length > 1);
|
||||
} else {
|
||||
nowPlayListIndex = (playListIndex.value + 1) % playList.value.length;
|
||||
}
|
||||
|
||||
// 重要：首先更新当前播放索引
|
||||
playListIndex.value = nowPlayListIndex;
|
||||
|
||||
// 获取下一首歌曲
|
||||
const nextSong = playList.value[nowPlayListIndex];
|
||||
|
||||
// 如果是B站视频，确保重新获取URL
|
||||
if (nextSong.source === 'bilibili' && nextSong.bilibiliData) {
|
||||
// 清除之前的URL，确保重新获取
|
||||
nextSong.playMusicUrl = undefined;
|
||||
console.log('下一首是B站视频，已清除URL强制重新获取');
|
||||
}
|
||||
|
||||
// 尝试播放，并明确传递应该播放的状态
|
||||
const success = await handlePlayMusic(nextSong, shouldPlayNext);
|
||||
|
||||
if (!success) {
|
||||
console.error('播放下一首失败，将从播放列表中移除此歌曲');
|
||||
// 从播放列表中移除失败的歌曲
|
||||
const newPlayList = [...playList.value];
|
||||
newPlayList.splice(nowPlayListIndex, 1);
|
||||
|
||||
if (newPlayList.length > 0) {
|
||||
// 更新播放列表后，重新尝试播放下一首
|
||||
setPlayList(newPlayList);
|
||||
// 延迟一点时间再尝试下一首，避免立即触发可能导致的无限循环
|
||||
setTimeout(() => {
|
||||
(nextPlay as any).isRunning = false;
|
||||
nextPlay();
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 歌曲切换成功，触发歌曲变更处理（用于定时关闭功能）
|
||||
handleSongChange();
|
||||
} catch (error) {
|
||||
console.error('切换下一首出错:', error);
|
||||
} finally {
|
||||
(nextPlay as any).isRunning = false;
|
||||
}
|
||||
};
|
||||
|
||||
const prevPlay = async () => {
|
||||
if (playList.value.length === 0) {
|
||||
play.value = true;
|
||||
// 静态标志，防止多次调用造成递归
|
||||
if ((prevPlay as any).isRunning) {
|
||||
console.log('上一首播放正在执行中，忽略重复调用');
|
||||
return;
|
||||
}
|
||||
const nowPlayListIndex =
|
||||
(playListIndex.value - 1 + playList.value.length) % playList.value.length;
|
||||
|
||||
try {
|
||||
(prevPlay as any).isRunning = true;
|
||||
|
||||
if (playList.value.length === 0) {
|
||||
play.value = true;
|
||||
(prevPlay as any).isRunning = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const nowPlayListIndex =
|
||||
(playListIndex.value - 1 + playList.value.length) % playList.value.length;
|
||||
|
||||
// 获取上一首歌曲
|
||||
const prevSong = playList.value[nowPlayListIndex];
|
||||
// 重要：首先更新当前播放索引
|
||||
playListIndex.value = nowPlayListIndex;
|
||||
|
||||
// 获取上一首歌曲
|
||||
const prevSong = playList.value[nowPlayListIndex];
|
||||
|
||||
// 如果是B站视频，确保重新获取URL
|
||||
if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
|
||||
// 清除之前的URL，确保重新获取
|
||||
prevSong.playMusicUrl = undefined;
|
||||
console.log('上一首是B站视频，已清除URL强制重新获取');
|
||||
// 如果是B站视频，确保重新获取URL
|
||||
if (prevSong.source === 'bilibili' && prevSong.bilibiliData) {
|
||||
// 清除之前的URL，确保重新获取
|
||||
prevSong.playMusicUrl = undefined;
|
||||
console.log('上一首是B站视频，已清除URL强制重新获取');
|
||||
}
|
||||
|
||||
// 尝试播放，如果失败会返回false
|
||||
const success = await handlePlayMusic(prevSong);
|
||||
|
||||
if (success) {
|
||||
await fetchSongs(playList.value, playListIndex.value - 3, nowPlayListIndex);
|
||||
} else {
|
||||
console.error('播放上一首失败，将从播放列表中移除此歌曲');
|
||||
// 从播放列表中移除失败的歌曲
|
||||
const newPlayList = [...playList.value];
|
||||
newPlayList.splice(nowPlayListIndex, 1);
|
||||
|
||||
if (newPlayList.length > 0) {
|
||||
// 更新播放列表后，重新尝试播放上一首
|
||||
setPlayList(newPlayList);
|
||||
// 延迟一点时间再尝试上一首，避免立即触发可能导致的无限循环
|
||||
setTimeout(() => {
|
||||
(prevPlay as any).isRunning = false;
|
||||
prevPlay();
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('切换上一首出错:', error);
|
||||
} finally {
|
||||
(prevPlay as any).isRunning = false;
|
||||
}
|
||||
|
||||
await handlePlayMusic(prevSong);
|
||||
await fetchSongs(playList.value, playListIndex.value - 3, nowPlayListIndex);
|
||||
};
|
||||
|
||||
const togglePlayMode = () => {
|
||||
@@ -462,19 +863,31 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
localStorage.setItem('playMode', JSON.stringify(playMode.value));
|
||||
};
|
||||
|
||||
const addToFavorite = async (id: number) => {
|
||||
if (!favoriteList.value.includes(id)) {
|
||||
const addToFavorite = async (id: number | string) => {
|
||||
// 检查是否已存在相同的ID或内容相同的B站视频
|
||||
const isAlreadyInList = favoriteList.value.some(existingId =>
|
||||
typeof id === 'string' && id.includes('--')
|
||||
? isBilibiliIdMatch(existingId, id)
|
||||
: existingId === id
|
||||
);
|
||||
|
||||
if (!isAlreadyInList) {
|
||||
favoriteList.value.push(id);
|
||||
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
|
||||
}
|
||||
};
|
||||
|
||||
const removeFromFavorite = async (id: number) => {
|
||||
favoriteList.value = favoriteList.value.filter((item) => item !== id);
|
||||
const removeFromFavorite = async (id: number | string) => {
|
||||
// 对于B站视频，需要根据bvid和cid来匹配
|
||||
if (typeof id === 'string' && id.includes('--')) {
|
||||
favoriteList.value = favoriteList.value.filter(existingId => !isBilibiliIdMatch(existingId, id));
|
||||
} else {
|
||||
favoriteList.value = favoriteList.value.filter(existingId => existingId !== id);
|
||||
}
|
||||
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
|
||||
};
|
||||
|
||||
const removeFromPlayList = (id: number) => {
|
||||
const removeFromPlayList = (id: number | string) => {
|
||||
const index = playList.value.findIndex((item) => item.id === id);
|
||||
if (index === -1) return;
|
||||
|
||||
@@ -568,6 +981,90 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
|
||||
};
|
||||
|
||||
// 修改：处理音频播放的方法，使用事件触发机制
|
||||
const playAudio = async () => {
|
||||
if (!playMusicUrl.value || !playMusic.value) return null;
|
||||
|
||||
try {
|
||||
// 保存当前播放状态
|
||||
const shouldPlay = play.value;
|
||||
console.log('播放音频，当前播放状态:', shouldPlay ? '播放' : '暂停');
|
||||
|
||||
// 检查是否有保存的进度
|
||||
let initialPosition = 0;
|
||||
const savedProgress = JSON.parse(localStorage.getItem('playProgress') || '{}');
|
||||
if (savedProgress.songId === playMusic.value.id) {
|
||||
initialPosition = savedProgress.progress;
|
||||
}
|
||||
|
||||
// 对于B站视频，检查URL是否有效
|
||||
if (playMusic.value.source === 'bilibili' && (!playMusicUrl.value || playMusicUrl.value === 'undefined')) {
|
||||
console.log('B站视频URL无效，尝试重新获取');
|
||||
|
||||
// 需要重新获取B站视频URL
|
||||
if (playMusic.value.bilibiliData) {
|
||||
try {
|
||||
const proxyUrl = await getBilibiliAudioUrl(
|
||||
playMusic.value.bilibiliData.bvid,
|
||||
playMusic.value.bilibiliData.cid
|
||||
);
|
||||
|
||||
// 设置URL到播放器状态
|
||||
(playMusic.value as any).playMusicUrl = proxyUrl;
|
||||
playMusicUrl.value = proxyUrl;
|
||||
} catch (error) {
|
||||
console.error('获取B站音频URL失败:', error);
|
||||
message.error(i18n.global.t('player.playFailed'));
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 播放新音频，传递是否应该播放的状态
|
||||
console.log('调用audioService.play，播放状态:', shouldPlay);
|
||||
const newSound = await audioService.play(playMusicUrl.value, playMusic.value, shouldPlay);
|
||||
|
||||
// 如果有保存的进度，设置播放位置
|
||||
if (initialPosition > 0) {
|
||||
newSound.seek(initialPosition);
|
||||
}
|
||||
|
||||
// 发布音频就绪事件，让 MusicHook.ts 来处理设置监听器
|
||||
window.dispatchEvent(new CustomEvent('audio-ready', { detail: { sound: newSound, shouldPlay } }));
|
||||
|
||||
// 确保状态与 localStorage 同步
|
||||
localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
|
||||
localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
|
||||
|
||||
return newSound;
|
||||
} catch (error) {
|
||||
console.error('播放音频失败:', error);
|
||||
setPlayMusic(false);
|
||||
|
||||
// 避免直接调用 nextPlay，改用延时避免无限循环
|
||||
// 检查错误是否是由于操作锁引起的
|
||||
const errorMsg = error instanceof Error ? error.message : String(error);
|
||||
if (errorMsg.includes('操作锁激活')) {
|
||||
console.log('由于操作锁正在使用，将在500ms后重试');
|
||||
// 操作锁错误，延迟后再尝试
|
||||
setTimeout(() => {
|
||||
// 检查当前播放列表是否有下一首
|
||||
if (playList.value.length > 1) {
|
||||
nextPlay();
|
||||
}
|
||||
}, 500);
|
||||
} else {
|
||||
// 其他错误，延迟更短时间后切换
|
||||
setTimeout(() => {
|
||||
nextPlay();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
message.error(i18n.global.t('player.playFailed'));
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
play,
|
||||
isPlay,
|
||||
@@ -579,6 +1076,17 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
musicFull,
|
||||
savedPlayProgress,
|
||||
favoriteList,
|
||||
|
||||
// 定时关闭相关
|
||||
sleepTimer,
|
||||
currentSleepTimer,
|
||||
hasSleepTimerActive,
|
||||
sleepTimerRemainingTime,
|
||||
sleepTimerRemainingSongs,
|
||||
setSleepTimerByTime,
|
||||
setSleepTimerBySongs,
|
||||
setSleepTimerAtPlaylistEnd,
|
||||
clearSleepTimer,
|
||||
|
||||
currentSong,
|
||||
isPlaying,
|
||||
@@ -598,6 +1106,7 @@ export const usePlayerStore = defineStore('player', () => {
|
||||
initializeFavoriteList,
|
||||
addToFavorite,
|
||||
removeFromFavorite,
|
||||
removeFromPlayList
|
||||
removeFromPlayList,
|
||||
playAudio
|
||||
};
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@ export interface IHotSinger {
|
||||
artists: Artist[];
|
||||
}
|
||||
|
||||
interface Artist {
|
||||
export interface Artist {
|
||||
name: string;
|
||||
id: number;
|
||||
picId: number;
|
||||
@@ -29,4 +29,6 @@ interface Artist {
|
||||
identifyTag?: any;
|
||||
alg?: any;
|
||||
fansCount?: any;
|
||||
cover?: string;
|
||||
avatar?: string;
|
||||
}
|
||||
|
||||
5
src/renderer/types/music.ts
Normal file
5
src/renderer/types/music.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
// 音乐平台类型
|
||||
export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
|
||||
|
||||
// 默认平台列表
|
||||
export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
|
||||
@@ -7,6 +7,10 @@ import { usePlayerStore, useSettingsStore } from '@/store';
|
||||
import { isElectron } from '.';
|
||||
import { showShortcutToast } from './shortcutToast';
|
||||
|
||||
// 添加一个简单的防抖机制
|
||||
let actionTimeout: NodeJS.Timeout | null = null;
|
||||
const ACTION_DELAY = 300; // 毫秒
|
||||
|
||||
interface ShortcutConfig {
|
||||
key: string;
|
||||
enabled: boolean;
|
||||
@@ -27,6 +31,17 @@ let appShortcuts: ShortcutsConfig = {};
|
||||
* @param action 快捷键动作
|
||||
*/
|
||||
export async function handleShortcutAction(action: string) {
|
||||
// 如果存在未完成的动作，则忽略当前请求
|
||||
if (actionTimeout) {
|
||||
console.log('忽略快速连续的动作请求:', action);
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置防抖锁
|
||||
actionTimeout = setTimeout(() => {
|
||||
actionTimeout = null;
|
||||
}, ACTION_DELAY);
|
||||
|
||||
const playerStore = usePlayerStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
@@ -38,61 +53,71 @@ export async function handleShortcutAction(action: string) {
|
||||
showShortcutToast(message, iconName);
|
||||
};
|
||||
|
||||
switch (action) {
|
||||
case 'togglePlay':
|
||||
if (playerStore.play) {
|
||||
await audioService.pause();
|
||||
showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
|
||||
} else {
|
||||
await audioService.play();
|
||||
showToast(t('player.playBar.play'), 'ri-play-circle-line');
|
||||
}
|
||||
break;
|
||||
case 'prevPlay':
|
||||
playerStore.prevPlay();
|
||||
showToast(t('player.playBar.prev'), 'ri-skip-back-line');
|
||||
break;
|
||||
case 'nextPlay':
|
||||
playerStore.nextPlay();
|
||||
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
|
||||
break;
|
||||
case 'volumeUp':
|
||||
if (currentSound && currentSound?.volume() < 1) {
|
||||
currentSound?.volume((currentSound?.volume() || 0) + 0.1);
|
||||
try {
|
||||
switch (action) {
|
||||
case 'togglePlay':
|
||||
if (playerStore.play) {
|
||||
await audioService.pause();
|
||||
showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
|
||||
} else {
|
||||
await audioService.play();
|
||||
showToast(t('player.playBar.play'), 'ri-play-circle-line');
|
||||
}
|
||||
break;
|
||||
case 'prevPlay':
|
||||
await playerStore.prevPlay();
|
||||
showToast(t('player.playBar.prev'), 'ri-skip-back-line');
|
||||
break;
|
||||
case 'nextPlay':
|
||||
await playerStore.nextPlay();
|
||||
showToast(t('player.playBar.next'), 'ri-skip-forward-line');
|
||||
break;
|
||||
case 'volumeUp':
|
||||
if (currentSound && currentSound?.volume() < 1) {
|
||||
currentSound?.volume((currentSound?.volume() || 0) + 0.1);
|
||||
showToast(
|
||||
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
|
||||
'ri-volume-up-line'
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'volumeDown':
|
||||
if (currentSound && currentSound?.volume() > 0) {
|
||||
currentSound?.volume((currentSound?.volume() || 0) - 0.1);
|
||||
showToast(
|
||||
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
|
||||
'ri-volume-down-line'
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'toggleFavorite': {
|
||||
const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
|
||||
const numericId = Number(playerStore.playMusic.id);
|
||||
if (isFavorite) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
}
|
||||
showToast(
|
||||
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
|
||||
'ri-volume-up-line'
|
||||
isFavorite
|
||||
? t('player.playBar.favorite', { name: playerStore.playMusic.name })
|
||||
: t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
|
||||
isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
|
||||
);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case 'volumeDown':
|
||||
if (currentSound && currentSound?.volume() > 0) {
|
||||
currentSound?.volume((currentSound?.volume() || 0) - 0.1);
|
||||
showToast(
|
||||
`${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
|
||||
'ri-volume-down-line'
|
||||
);
|
||||
}
|
||||
break;
|
||||
case 'toggleFavorite': {
|
||||
const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
|
||||
const numericId = Number(playerStore.playMusic.id);
|
||||
if (isFavorite) {
|
||||
playerStore.removeFromFavorite(numericId);
|
||||
} else {
|
||||
playerStore.addToFavorite(numericId);
|
||||
}
|
||||
showToast(
|
||||
isFavorite
|
||||
? t('player.playBar.favorite', { name: playerStore.playMusic.name })
|
||||
: t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
|
||||
isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
|
||||
);
|
||||
break;
|
||||
default:
|
||||
console.log('未知的快捷键动作:', action);
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`执行快捷键动作 ${action} 时出错:`, error);
|
||||
} finally {
|
||||
// 确保在出错时也能清除超时
|
||||
if (actionTimeout) {
|
||||
clearTimeout(actionTimeout);
|
||||
actionTimeout = null;
|
||||
}
|
||||
default:
|
||||
console.log('未知的快捷键动作:', action);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
@play="handlePlay"
|
||||
/>
|
||||
<div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
@@ -54,6 +55,7 @@
|
||||
}"
|
||||
/>
|
||||
<div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
|
||||
<div v-else-if="albumPage.hasMore" ref="albumsLoadMoreRef" class="load-more-trigger"></div>
|
||||
</div>
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
@@ -70,7 +72,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDateFormat, useThrottleFn } from '@vueuse/core';
|
||||
import { useDateFormat } from '@vueuse/core';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
@@ -114,6 +116,12 @@ const albumPage = ref({
|
||||
hasMore: true
|
||||
});
|
||||
|
||||
// 无限滚动引用
|
||||
const songsLoadMoreRef = ref<HTMLElement | null>(null);
|
||||
const albumsLoadMoreRef = ref<HTMLElement | null>(null);
|
||||
let songsObserver: IntersectionObserver | null = null;
|
||||
let albumsObserver: IntersectionObserver | null = null;
|
||||
|
||||
// 加载歌手信息
|
||||
const loadArtistInfo = async () => {
|
||||
if (!artistId.value) return;
|
||||
@@ -138,12 +146,12 @@ const loadArtistInfo = async () => {
|
||||
const resetPagination = () => {
|
||||
songPage.value = {
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
pageSize: 50,
|
||||
hasMore: true
|
||||
};
|
||||
albumPage.value = {
|
||||
page: 1,
|
||||
pageSize: 30,
|
||||
pageSize: 50,
|
||||
hasMore: true
|
||||
};
|
||||
songs.value = [];
|
||||
@@ -181,6 +189,8 @@ const loadSongs = async () => {
|
||||
songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
|
||||
songPage.value.hasMore = newSongs.length === pageSize;
|
||||
songPage.value.page++;
|
||||
} else {
|
||||
songPage.value.hasMore = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载歌曲失败:', error);
|
||||
@@ -207,6 +217,8 @@ const loadAlbums = async () => {
|
||||
albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
|
||||
albumPage.value.hasMore = newAlbums.length === pageSize;
|
||||
albumPage.value.page++;
|
||||
} else {
|
||||
albumPage.value.hasMore = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载专辑失败:', error);
|
||||
@@ -229,29 +241,64 @@ const handlePlay = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// 添加滚动处理函数
|
||||
const handleScroll = useThrottleFn(() => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const windowHeight = window.innerHeight;
|
||||
const documentHeight = document.documentElement.scrollHeight;
|
||||
// 设置无限滚动观察器
|
||||
const setupIntersectionObservers = () => {
|
||||
// 清除现有的观察器
|
||||
if (songsObserver) songsObserver.disconnect();
|
||||
if (albumsObserver) albumsObserver.disconnect();
|
||||
|
||||
if (documentHeight - (scrollTop + windowHeight) < 100) {
|
||||
if (activeTab.value === 'songs') {
|
||||
// 创建歌曲观察器
|
||||
songsObserver = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !songLoading.value && songPage.value.hasMore) {
|
||||
loadSongs();
|
||||
} else if (activeTab.value === 'albums') {
|
||||
}
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
// 创建专辑观察器
|
||||
albumsObserver = new IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !albumLoading.value && albumPage.value.hasMore) {
|
||||
loadAlbums();
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
// 监听标签页更改，重新设置观察器
|
||||
watch(activeTab, (newTab) => {
|
||||
nextTick(() => {
|
||||
if (newTab === 'songs' && songsLoadMoreRef.value && songPage.value.hasMore) {
|
||||
songsObserver?.observe(songsLoadMoreRef.value);
|
||||
} else if (newTab === 'albums' && albumsLoadMoreRef.value && albumPage.value.hasMore) {
|
||||
albumsObserver?.observe(albumsLoadMoreRef.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 监听引用元素的变化
|
||||
watch(songsLoadMoreRef, (el) => {
|
||||
if (el && activeTab.value === 'songs' && songPage.value.hasMore) {
|
||||
songsObserver?.observe(el);
|
||||
}
|
||||
});
|
||||
|
||||
watch(albumsLoadMoreRef, (el) => {
|
||||
if (el && activeTab.value === 'albums' && albumPage.value.hasMore) {
|
||||
albumsObserver?.observe(el);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听页面滚动
|
||||
onMounted(() => {
|
||||
loadArtistInfo();
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// 添加nextTick以确保DOM已更新
|
||||
nextTick(() => {
|
||||
setupIntersectionObservers();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
// 清理观察器
|
||||
if (songsObserver) songsObserver.disconnect();
|
||||
if (albumsObserver) albumsObserver.disconnect();
|
||||
});
|
||||
|
||||
// 监听路由参数变化
|
||||
@@ -260,6 +307,10 @@ watch(
|
||||
(newId) => {
|
||||
if (newId) {
|
||||
loadArtistInfo();
|
||||
// 添加nextTick以确保DOM已更新
|
||||
nextTick(() => {
|
||||
setupIntersectionObservers();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -325,6 +376,10 @@ watch(
|
||||
@apply text-center py-4 text-gray-500 dark:text-gray-400;
|
||||
}
|
||||
|
||||
.load-more-trigger {
|
||||
@apply h-4 w-full;
|
||||
}
|
||||
|
||||
.artist-description {
|
||||
.description-content {
|
||||
@apply text-sm leading-relaxed whitespace-pre-wrap;
|
||||
|
||||
@@ -233,7 +233,7 @@ const loadVideoSource = async () => {
|
||||
|
||||
// 其他分P创建占位对象，稍后按需加载
|
||||
return {
|
||||
id: `${videoDetail.value!.aid}--${page.cid}`, // 使用aid+cid作为唯一ID
|
||||
id: `${bvid.value}--${page.page}--${page.cid}`, // 使用bvid--pid--cid作为唯一ID
|
||||
name: `${page.part || ''} - ${videoDetail.value!.title}`,
|
||||
picUrl: getBilibiliProxyUrl(videoDetail.value!.pic),
|
||||
type: 0,
|
||||
@@ -242,7 +242,7 @@ const loadVideoSource = async () => {
|
||||
source: 'bilibili', // 设置来源为B站
|
||||
song: {
|
||||
name: `${page.part || ''} - ${videoDetail.value!.title}`,
|
||||
id: `${videoDetail.value!.aid}--${page.cid}`,
|
||||
id: `${bvid.value}--${page.page}--${page.cid}`,
|
||||
ar: [
|
||||
{
|
||||
name: videoDetail.value!.owner.name,
|
||||
@@ -286,7 +286,7 @@ const createSongFromBilibiliVideo = (): SongResult => {
|
||||
const title = `${pageName} - ${videoDetail.value.title}`;
|
||||
|
||||
return {
|
||||
id: `${videoDetail.value.aid}--${currentPage.value.cid}`, // 使用aid+cid作为唯一ID
|
||||
id: `${bvid.value}--${currentPage.value.page}--${currentPage.value.cid}`, // 使用bvid--pid--cid作为唯一ID
|
||||
name: title,
|
||||
picUrl: getBilibiliProxyUrl(videoDetail.value.pic),
|
||||
type: 0,
|
||||
@@ -297,7 +297,7 @@ const createSongFromBilibiliVideo = (): SongResult => {
|
||||
// playMusicUrl属性稍后通过loadSongUrl函数添加
|
||||
song: {
|
||||
name: title,
|
||||
id: `${videoDetail.value.aid}--${currentPage.value.cid}`,
|
||||
id: `${bvid.value}--${currentPage.value.page}--${currentPage.value.cid}`,
|
||||
ar: [
|
||||
{
|
||||
name: videoDetail.value.owner.name,
|
||||
|
||||
@@ -54,12 +54,12 @@
|
||||
<div v-if="favoriteList.length === 0" class="empty-tip">
|
||||
<n-empty :description="t('favorite.emptyTip')" />
|
||||
</div>
|
||||
<div v-else class="favorite-list">
|
||||
<div v-else class="favorite-list" :class="{ 'max-w-[400px]': isComponent }">
|
||||
<song-item
|
||||
v-for="(song, index) in favoriteSongs"
|
||||
:key="song.id"
|
||||
:item="song"
|
||||
:favorite="!isComponent"
|
||||
:favorite="false"
|
||||
:class="setAnimationClass('animate__bounceInLeft')"
|
||||
:style="getItemAnimationDelay(index)"
|
||||
:selectable="isSelecting"
|
||||
@@ -90,6 +90,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { getMusicDetail } from '@/api/music';
|
||||
import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
|
||||
import SongItem from '@/components/common/SongItem.vue';
|
||||
import { getSongUrl } from '@/hooks/MusicListHook';
|
||||
import { usePlayerStore } from '@/store';
|
||||
@@ -231,6 +232,7 @@ const props = defineProps({
|
||||
const getCurrentPageIds = () => {
|
||||
const startIndex = (currentPage.value - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
// 返回原始ID，不进行类型转换
|
||||
return favoriteList.value.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
@@ -248,23 +250,117 @@ const getFavoriteSongs = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const currentIds = getCurrentPageIds();
|
||||
const res = await getMusicDetail(currentIds);
|
||||
if (res.data.songs) {
|
||||
const newSongs = res.data.songs.map((song: SongResult) => ({
|
||||
...song,
|
||||
picUrl: song.al?.picUrl || ''
|
||||
}));
|
||||
|
||||
// 追加新数据而不是替换
|
||||
if (currentPage.value === 1) {
|
||||
favoriteSongs.value = newSongs;
|
||||
} else {
|
||||
favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
|
||||
console.log('currentIds', currentIds);
|
||||
|
||||
// 分离网易云音乐ID和B站视频ID
|
||||
const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
|
||||
// B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
|
||||
const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
|
||||
|
||||
console.log('处理数据:', {
|
||||
musicIds,
|
||||
bilibiliIds
|
||||
});
|
||||
|
||||
// 处理网易云音乐数据
|
||||
let neteaseSongs: SongResult[] = [];
|
||||
if (musicIds.length > 0) {
|
||||
const res = await getMusicDetail(musicIds);
|
||||
if (res.data.songs) {
|
||||
neteaseSongs = res.data.songs.map((song: SongResult) => ({
|
||||
...song,
|
||||
picUrl: song.al?.picUrl || '',
|
||||
source: 'netease'
|
||||
}));
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
|
||||
}
|
||||
|
||||
// 处理B站视频数据
|
||||
const bilibiliSongs: SongResult[] = [];
|
||||
for (const biliId of bilibiliIds) {
|
||||
const strBiliId = String(biliId);
|
||||
console.log(`处理B站ID: ${strBiliId}`);
|
||||
|
||||
if (strBiliId.includes('--')) {
|
||||
// 从ID中提取B站视频信息 (bvid--pid--cid格式)
|
||||
try {
|
||||
const [bvid, pid, cid] = strBiliId.split('--');
|
||||
if (!bvid || !pid || !cid) {
|
||||
console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const res = await getBilibiliVideoDetail(bvid);
|
||||
const videoDetail = res.data;
|
||||
|
||||
// 找到对应的分P
|
||||
const page = videoDetail.pages.find(p => p.cid === Number(cid));
|
||||
if (!page) {
|
||||
console.warn(`未找到对应的分P: cid=${cid}`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const songData = {
|
||||
id: strBiliId,
|
||||
name: `${page.part || ''} - ${videoDetail.title}`,
|
||||
picUrl: getBilibiliProxyUrl(videoDetail.pic),
|
||||
ar: [
|
||||
{
|
||||
name: videoDetail.owner.name,
|
||||
id: videoDetail.owner.mid
|
||||
}
|
||||
],
|
||||
al: {
|
||||
name: videoDetail.title,
|
||||
picUrl: getBilibiliProxyUrl(videoDetail.pic)
|
||||
},
|
||||
source: 'bilibili',
|
||||
bilibiliData: {
|
||||
bvid,
|
||||
cid: Number(cid)
|
||||
}
|
||||
} as SongResult;
|
||||
|
||||
bilibiliSongs.push(songData);
|
||||
} catch (error) {
|
||||
console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('获取数据统计:', {
|
||||
neteaseSongs: neteaseSongs.length,
|
||||
bilibiliSongs: bilibiliSongs.length
|
||||
});
|
||||
|
||||
// 合并数据，保持原有顺序
|
||||
const newSongs = currentIds
|
||||
.map(id => {
|
||||
const strId = String(id);
|
||||
|
||||
// 查找B站视频
|
||||
if (typeof id === 'string') {
|
||||
const found = bilibiliSongs.find(song => String(song.id) === strId);
|
||||
if (found) return found;
|
||||
}
|
||||
|
||||
// 查找网易云音乐
|
||||
const found = neteaseSongs.find(song => String(song.id) === strId);
|
||||
return found;
|
||||
})
|
||||
.filter((song): song is SongResult => !!song);
|
||||
|
||||
console.log(`最终歌曲列表: ${newSongs.length}首`);
|
||||
|
||||
// 追加新数据而不是替换
|
||||
if (currentPage.value === 1) {
|
||||
favoriteSongs.value = newSongs;
|
||||
} else {
|
||||
favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
|
||||
} catch (error) {
|
||||
console.error('获取收藏歌曲失败:', error);
|
||||
} finally {
|
||||
|
||||
@@ -109,7 +109,7 @@ const getHistorySongs = async () => {
|
||||
if (!page) continue;
|
||||
|
||||
bilibiliSongs.push({
|
||||
id: `${videoDetail.aid}--${page.cid}`,
|
||||
id: `${bvid}--${page.page}--${page.cid}`,
|
||||
name: `${page.part || ''} - ${videoDetail.title}`,
|
||||
picUrl: getBilibiliProxyUrl(videoDetail.pic),
|
||||
ar: [
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="set-item">
|
||||
<div class="set-item" v-if="isElectron">
|
||||
<div>
|
||||
<div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
|
||||
<div class="set-item-content">
|
||||
@@ -165,7 +165,7 @@
|
||||
<div class="text-sm">
|
||||
<span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
|
||||
<span v-if="musicSources.length > 0" class="text-gray-400">
|
||||
{{ musicSources.map((source) => getSourceLabel(source)).join(', ') }}
|
||||
{{ musicSources.join(', ') }}
|
||||
</span>
|
||||
<span v-else class="text-red-500 text-xs">
|
||||
{{ t('settings.playback.noMusicSources') }}
|
||||
@@ -271,6 +271,16 @@
|
||||
}}</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-item">
|
||||
<div>
|
||||
<div class="set-item-title">{{ t('settings.application.remoteControl') }}</div>
|
||||
<div class="set-item-content">{{ t('settings.application.remoteControlDesc') }}</div>
|
||||
</div>
|
||||
<n-button size="small" @click="showRemoteControlModal = true">{{
|
||||
t('common.configure')
|
||||
}}</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -418,142 +428,40 @@
|
||||
<play-bottom />
|
||||
</n-scrollbar>
|
||||
|
||||
<!-- 快捷键设置弹窗 -->
|
||||
<shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
|
||||
<template v-if="isElectron">
|
||||
<!-- 快捷键设置弹窗 -->
|
||||
<shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
|
||||
|
||||
<!-- 代理设置弹窗 -->
|
||||
<proxy-settings
|
||||
v-model:show="showProxyModal"
|
||||
:config="proxyForm"
|
||||
@confirm="handleProxyConfirm"
|
||||
/>
|
||||
|
||||
<!-- 音源设置弹窗 -->
|
||||
<music-source-settings
|
||||
v-model:show="showMusicSourcesModal"
|
||||
v-model:sources="musicSources"
|
||||
/>
|
||||
|
||||
<!-- 远程控制设置弹窗 -->
|
||||
<remote-control-setting v-model:visible="showRemoteControlModal" />
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 代理设置弹窗 -->
|
||||
<n-modal
|
||||
v-model:show="showProxyModal"
|
||||
preset="dialog"
|
||||
:title="t('settings.network.proxy')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
:show-icon="false"
|
||||
@positive-click="handleProxyConfirm"
|
||||
@negative-click="showProxyModal = false"
|
||||
>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="proxyForm"
|
||||
:rules="proxyRules"
|
||||
label-placement="left"
|
||||
label-width="80"
|
||||
require-mark-placement="right-hanging"
|
||||
>
|
||||
<n-form-item :label="t('settings.network.proxy')" path="protocol">
|
||||
<n-select
|
||||
v-model:value="proxyForm.protocol"
|
||||
:options="[
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'SOCKS5', value: 'socks5' }
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyHost')" path="host">
|
||||
<n-input
|
||||
v-model:value="proxyForm.host"
|
||||
:placeholder="t('settings.network.proxyHostPlaceholder')"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item :label="t('settings.network.proxyPort')" path="port">
|
||||
<n-input-number
|
||||
v-model:value="proxyForm.port"
|
||||
:placeholder="t('settings.network.proxyPortPlaceholder')"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-modal>
|
||||
<!-- 清除缓存弹窗 -->
|
||||
<n-modal
|
||||
<clear-cache-settings
|
||||
v-model:show="showClearCacheModal"
|
||||
preset="dialog"
|
||||
:title="t('settings.system.cache')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="clearCache"
|
||||
@negative-click="
|
||||
() => {
|
||||
selectedCacheTypes = [];
|
||||
}
|
||||
"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.system.cacheClearTitle') }}</p>
|
||||
<n-checkbox-group v-model:value="selectedCacheTypes">
|
||||
<n-space vertical>
|
||||
<n-checkbox
|
||||
v-for="option in clearCacheOptions"
|
||||
:key="option.key"
|
||||
:value="option.key"
|
||||
:label="option.label"
|
||||
>
|
||||
<template #default>
|
||||
<div>
|
||||
<div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
|
||||
<div class="text-gray-400 text-sm">
|
||||
{{ t(`settings.system.cacheTypes.${option.key}.description`) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
@confirm="clearCache"
|
||||
/>
|
||||
|
||||
<!-- 音源设置弹窗 -->
|
||||
<n-modal
|
||||
v-model:show="showMusicSourcesModal"
|
||||
preset="dialog"
|
||||
:title="t('settings.playback.musicSources')"
|
||||
:positive-text="t('common.confirm')"
|
||||
:negative-text="t('common.cancel')"
|
||||
@positive-click="showMusicSourcesModal = false"
|
||||
@negative-click="showMusicSourcesModal = false"
|
||||
>
|
||||
<n-space vertical>
|
||||
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
|
||||
<n-checkbox-group v-model:value="musicSources">
|
||||
<n-grid :cols="2" :x-gap="12" :y-gap="8">
|
||||
<n-grid-item v-for="source in musicSourceOptions" :key="source.value">
|
||||
<n-checkbox :value="source.value">
|
||||
{{ source.label }}
|
||||
<template v-if="source.value === 'gdmusic'">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
|
||||
<i class="ri-information-line"></i>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ t('settings.playback.gdmusicInfo') }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
</n-checkbox>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-checkbox-group>
|
||||
<div v-if="musicSources.length === 0" class="text-red-500 text-sm">
|
||||
{{ t('settings.playback.musicSourcesWarning') }}
|
||||
</div>
|
||||
|
||||
<!-- GD音乐台设置 -->
|
||||
<div v-if="musicSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
|
||||
</p>
|
||||
</div>
|
||||
</n-space>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import type { FormRules } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -564,17 +472,20 @@ import DonationList from '@/components/common/DonationList.vue';
|
||||
import PlayBottom from '@/components/common/PlayBottom.vue';
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
|
||||
import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
|
||||
import ProxySettings from '@/components/settings/ProxySettings.vue';
|
||||
import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
|
||||
import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
|
||||
import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { isElectron, isMobile } from '@/utils';
|
||||
import { openDirectory, selectDirectory } from '@/utils/fileOperation';
|
||||
import { checkUpdate, UpdateResult } from '@/utils/update';
|
||||
import { type Platform } from '@/types/music';
|
||||
|
||||
import config from '../../../../package.json';
|
||||
|
||||
// 手动定义Platform类型，避免从主进程导入的问题
|
||||
type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
|
||||
// 所有平台
|
||||
// 所有平台默认值
|
||||
const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
@@ -691,41 +602,12 @@ const openDownloadPath = () => {
|
||||
};
|
||||
|
||||
const showProxyModal = ref(false);
|
||||
const formRef = ref();
|
||||
const proxyForm = ref({
|
||||
protocol: 'http',
|
||||
host: '127.0.0.1',
|
||||
port: 7890
|
||||
});
|
||||
|
||||
const proxyRules: FormRules = {
|
||||
protocol: {
|
||||
required: true,
|
||||
message: t('settings.validation.selectProxyProtocol'),
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
host: {
|
||||
required: true,
|
||||
message: t('settings.validation.proxyHost'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
if (!value) return false;
|
||||
// 简单的IP或域名验证
|
||||
const ipRegex =
|
||||
/^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
|
||||
return ipRegex.test(value);
|
||||
}
|
||||
},
|
||||
port: {
|
||||
required: true,
|
||||
message: t('settings.validation.portNumber'),
|
||||
trigger: ['blur', 'change'],
|
||||
validator: (_rule, value) => {
|
||||
return value >= 1 && value <= 65535;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 使用 store 中的字体列表
|
||||
const systemFonts = computed(() => settingsStore.systemFonts);
|
||||
|
||||
@@ -803,24 +685,16 @@ watch(
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const handleProxyConfirm = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
// 保存代理配置时保留enable状态
|
||||
setData.value = {
|
||||
...setData.value,
|
||||
proxyConfig: {
|
||||
enable: setData.value.proxyConfig?.enable || false,
|
||||
protocol: proxyForm.value.protocol,
|
||||
host: proxyForm.value.host,
|
||||
port: proxyForm.value.port
|
||||
}
|
||||
};
|
||||
showProxyModal.value = false;
|
||||
message.success(t('settings.network.messages.proxySuccess'));
|
||||
} catch (err) {
|
||||
message.error(t('settings.network.messages.proxyError'));
|
||||
}
|
||||
const handleProxyConfirm = async (proxyConfig) => {
|
||||
// 保存代理配置时保留enable状态
|
||||
setData.value = {
|
||||
...setData.value,
|
||||
proxyConfig: {
|
||||
enable: setData.value.proxyConfig?.enable || false,
|
||||
...proxyConfig
|
||||
}
|
||||
};
|
||||
message.success(t('settings.network.messages.proxySuccess'));
|
||||
};
|
||||
|
||||
const validateAndSaveRealIP = () => {
|
||||
@@ -866,48 +740,9 @@ const toggleDonationList = () => {
|
||||
|
||||
// 清除缓存相关
|
||||
const showClearCacheModal = ref(false);
|
||||
const clearCacheOptions = ref([
|
||||
{
|
||||
label: t('settings.system.cacheTypes.history.label'),
|
||||
key: 'history',
|
||||
description: t('settings.system.cacheTypes.history.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.favorite.label'),
|
||||
key: 'favorite',
|
||||
description: t('settings.system.cacheTypes.favorite.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.user.label'),
|
||||
key: 'user',
|
||||
description: t('settings.system.cacheTypes.user.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.settings.label'),
|
||||
key: 'settings',
|
||||
description: t('settings.system.cacheTypes.settings.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.downloads.label'),
|
||||
key: 'downloads',
|
||||
description: t('settings.system.cacheTypes.downloads.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.resources.label'),
|
||||
key: 'resources',
|
||||
description: t('settings.system.cacheTypes.resources.description')
|
||||
},
|
||||
{
|
||||
label: t('settings.system.cacheTypes.lyrics.label'),
|
||||
key: 'lyrics',
|
||||
description: t('settings.system.cacheTypes.lyrics.description')
|
||||
}
|
||||
]);
|
||||
|
||||
const selectedCacheTypes = ref<string[]>([]);
|
||||
|
||||
const clearCache = async () => {
|
||||
const clearTasks = selectedCacheTypes.value.map(async (type) => {
|
||||
const clearCache = async (selectedCacheTypes) => {
|
||||
const clearTasks = selectedCacheTypes.map(async (type) => {
|
||||
switch (type) {
|
||||
case 'history':
|
||||
localStorage.removeItem('musicHistory');
|
||||
@@ -966,8 +801,6 @@ const clearCache = async () => {
|
||||
|
||||
await Promise.all(clearTasks);
|
||||
message.success(t('settings.system.messages.clearSuccess'));
|
||||
showClearCacheModal.value = false;
|
||||
selectedCacheTypes.value = [];
|
||||
};
|
||||
|
||||
const showShortcutModal = ref(false);
|
||||
@@ -1062,17 +895,6 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
// 音源设置相关
|
||||
const musicSourceOptions = ref([
|
||||
{ label: 'MiGu音乐', value: 'migu' },
|
||||
{ label: '酷狗音乐', value: 'kugou' },
|
||||
{ label: 'pyncmd', value: 'pyncmd' },
|
||||
{ label: '酷我音乐', value: 'kuwo' },
|
||||
{ label: 'Bilibili音乐', value: 'bilibili' },
|
||||
{ label: 'YouTube', value: 'youtube' },
|
||||
{ label: 'GD音乐台', value: 'gdmusic' }
|
||||
]);
|
||||
|
||||
// 已选择的音源列表
|
||||
const musicSources = computed({
|
||||
get: () => {
|
||||
if (!setData.value.enabledMusicSources) {
|
||||
@@ -1092,10 +914,8 @@ const musicSources = computed({
|
||||
|
||||
const showMusicSourcesModal = ref(false);
|
||||
|
||||
const getSourceLabel = (source: Platform) => {
|
||||
const sourceLabel = musicSourceOptions.value.find(s => s.value === source)?.label;
|
||||
return sourceLabel || source;
|
||||
};
|
||||
// 远程控制设置弹窗
|
||||
const showRemoteControlModal = ref(false);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user