Compare commits

...

26 Commits

Author SHA1 Message Date
sqj
6f56f5e240 fix: flac格式使用ffmpeg 修复高音质下载失效 2025-09-27 08:07:49 +08:00
sqj
7af7779e5c fix: flac格式使用ffmpeg 2025-09-27 07:37:20 +08:00
sqj
669a348218 fix: flac格式使用ffmpeg 2025-09-27 07:35:42 +08:00
sqj
f02264c80c 1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
2025-09-27 00:14:45 +08:00
sqj
d0d5f918bd 1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
2025-09-26 23:48:21 +08:00
sqj
761d265d18 1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
2025-09-26 23:27:50 +08:00
sqj
204df64535 1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
2025-09-26 23:25:22 +08:00
sqj
cc814eddbd 1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
2025-09-26 23:08:18 +08:00
sqj
51df14a9e9 1. 歌单
- 新增右键移除歌曲
   - local 页歌单右键操作
   - 歌单页支持修改封面
2. debug:右键菜单二级菜单位置决策
2025-09-25 19:56:45 +08:00
sqj
2473b36928 feat:列表新增右键菜单;fix:播放列表滚动条,搜索页切换源重新加载 2025-09-25 02:43:02 +08:00
sqj
dbba7a3d26 1. 软件启动位置 宽高记忆 限制软件最大宽高
2. debug: 修复歌曲音质支持短缺问题
2025-09-22 19:36:07 +08:00
sqj
a817865bd8 Merge branch 'main' of https://github.com/timeshiftsauce/CeruMusic 2025-09-22 19:34:58 +08:00
sqj
c4a4d26bd8 1. 软件启动位置 宽高记忆 限制软件最大宽高
2. debug: 修复歌曲音质支持短缺问题
2025-09-22 19:34:06 +08:00
时迁酱
dfa36d872e Update README.md 2025-09-22 12:08:35 +08:00
sqj
995859e661 1 2025-09-22 03:54:49 +08:00
sqj
34fb0f7c2f fix:qqLyric 2025-09-22 03:41:08 +08:00
sqj
191ba1e199 feat:点击搜索框的 源图标实现快速切换 兼容多平台歌单导入 fix:列表删除按钮冒泡 2025-09-21 18:36:18 +08:00
sqj
324e81c0dc feat:点击搜索框的 源图标实现快速切换 兼容多平台歌单导入 fix:列表删除按钮冒泡 2025-09-21 18:23:54 +08:00
sqj
7ec269e0cb fix:build 2025-09-21 03:42:16 +08:00
sqj
6f10aae535 fix:修复了一些已知问题 2025-09-21 03:08:05 +08:00
sqj
0c54a852ba fix:优化项目结构 2025-09-19 22:46:52 +08:00
sqj
bc53203bfa Merge branch 'main' of https://github.com/timeshiftsauce/CeruMusic 2025-09-18 18:09:07 +08:00
sqj
c149e5c904 add:docs and fix SMTC 2025-09-18 18:08:42 +08:00
时迁酱
d983abd3d5 Update README.md 2025-09-18 18:03:42 +08:00
sqj
f48369e1a2 add:docs 2025-09-17 00:58:34 +08:00
sqj
2af9a4ea9f feat:缓存路径支持自定义
下载路径支持自定义;fix:播放页面唱针可以拖动问题
播放按钮加载中 因为自动下一曲 导致动画变形问题
SMTC 功能 系统显示未知应用问题
播放页歌词字体粗细偶现丢失问题
2025-09-17 00:55:26 +08:00
95 changed files with 80359 additions and 11178 deletions

1
.gitignore vendored
View File

@@ -18,3 +18,4 @@ temp/log.txt
/.idea/
docs/.vitepress/dist
docs/.vitepress/cache
yarn.lock

272
README.md
View File

@@ -8,6 +8,10 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
<img src="assets/image-20250827175023917.png" alt="image-20250827175023917" style="zoom: 33%;" /><img src="assets/image-20250827175109430.png" alt="image-20250827175109430" style="zoom:33%;" />
## Star History
[![Star History Chart](https://api.star-history.com/svg?repos=timeshiftsauce/CeruMusic&type=Date)](https://www.star-history.com/#timeshiftsauce/CeruMusic&Date)
## 技术栈
- **Electron**:用于构建跨平台桌面应用
@@ -18,6 +22,274 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
- **CeruPlugins**:音乐插件运行环境(仅提供框架,不包含默认插件)
- **AMLL**:音乐生态辅助模块(仅提供功能接口,不关联具体音乐数据源)
## 项目结构
```ast
CeruMuisc/
├── .github/
│ └── workflows/
│ ├── auto-sync-release.yml
│ ├── deploydocs.yml
│ ├── main.yml
│ ├── sync-releases-to-webdav.yml
│ └── uploadpan.yml
├── scripts/
│ ├── auth-test.js
│ ├── genAst.js
│ └── test-alist.js
├── src/
│ ├── common/
│ │ ├── types/
│ │ │ ├── playList.ts
│ │ │ └── songList.ts
│ │ ├── utils/
│ │ │ ├── lyricUtils/
│ │ │ │ ├── kg.js
│ │ │ │ └── util.ts
│ │ │ ├── common.ts
│ │ │ ├── nodejs.ts
│ │ │ └── renderer.ts
│ │ └── index.ts
│ ├── main/
│ │ ├── events/
│ │ │ ├── ai.ts
│ │ │ ├── autoUpdate.ts
│ │ │ ├── directorySettings.ts
│ │ │ ├── musicCache.ts
│ │ │ └── songList.ts
│ │ ├── services/
│ │ │ ├── music/
│ │ │ │ ├── index.ts
│ │ │ │ ├── net-ease-service.ts
│ │ │ │ └── service-base.ts
│ │ │ ├── musicCache/
│ │ │ │ └── index.ts
│ │ │ ├── musicSdk/
│ │ │ │ ├── index.ts
│ │ │ │ ├── service.ts
│ │ │ │ └── type.ts
│ │ │ ├── plugin/
│ │ │ │ ├── manager/
│ │ │ │ │ ├── CeruMusicPluginHost.ts
│ │ │ │ │ └── converter-event-driven.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── logger.ts
│ │ │ ├── songList/
│ │ │ │ ├── ManageSongList.ts
│ │ │ │ └── PlayListSongs.ts
│ │ │ └── ai-service.ts
│ │ ├── utils/
│ │ │ ├── musicSdk/
│ │ │ │ ├── kg/
│ │ │ │ │ ├── temp/
│ │ │ │ │ │ ├── musicSearch-new.js
│ │ │ │ │ │ └── songList-new.js
│ │ │ │ │ ├── vendors/
│ │ │ │ │ │ └── infSign.min.js
│ │ │ │ │ ├── album.js
│ │ │ │ │ ├── api-test.js
│ │ │ │ │ ├── comment.js
│ │ │ │ │ ├── hotSearch.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── leaderboard.js
│ │ │ │ │ ├── lyric.js
│ │ │ │ │ ├── musicInfo.js
│ │ │ │ │ ├── musicSearch.js
│ │ │ │ │ ├── pic.js
│ │ │ │ │ ├── singer.js
│ │ │ │ │ ├── songList.js
│ │ │ │ │ ├── tipSearch.js
│ │ │ │ │ └── util.js
│ │ │ │ ├── kw/
│ │ │ │ │ ├── album.js
│ │ │ │ │ ├── api-temp.js
│ │ │ │ │ ├── api-test.js
│ │ │ │ │ ├── comment.js
│ │ │ │ │ ├── hotSearch.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── kwdecode.ts
│ │ │ │ │ ├── leaderboard.js
│ │ │ │ │ ├── lyric.js
│ │ │ │ │ ├── musicSearch.js
│ │ │ │ │ ├── pic.js
│ │ │ │ │ ├── songList.js
│ │ │ │ │ ├── tipSearch.js
│ │ │ │ │ └── util.js
│ │ │ │ ├── mg/
│ │ │ │ │ ├── temp/
│ │ │ │ │ │ └── leaderboard-old.js
│ │ │ │ │ ├── utils/
│ │ │ │ │ │ ├── index.js
│ │ │ │ │ │ └── mrc.js
│ │ │ │ │ ├── album.js
│ │ │ │ │ ├── api-test.js
│ │ │ │ │ ├── comment.js
│ │ │ │ │ ├── hotSearch.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── leaderboard.js
│ │ │ │ │ ├── lyric.js
│ │ │ │ │ ├── musicInfo.js
│ │ │ │ │ ├── musicSearch.js
│ │ │ │ │ ├── pic.js
│ │ │ │ │ ├── songId.js
│ │ │ │ │ ├── songList.js
│ │ │ │ │ └── tipSearch.js
│ │ │ │ ├── tx/
│ │ │ │ │ ├── api-test.js
│ │ │ │ │ ├── comment.js
│ │ │ │ │ ├── hotSearch.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── leaderboard.js
│ │ │ │ │ ├── lyric.js
│ │ │ │ │ ├── musicInfo.js
│ │ │ │ │ ├── musicSearch.js
│ │ │ │ │ ├── singer.js
│ │ │ │ │ ├── songList.js
│ │ │ │ │ └── tipSearch.js
│ │ │ │ ├── wy/
│ │ │ │ │ ├── utils/
│ │ │ │ │ │ ├── crypto.js
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── api-test.js
│ │ │ │ │ ├── comment.js
│ │ │ │ │ ├── hotSearch.js
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── leaderboard.js
│ │ │ │ │ ├── lyric.js
│ │ │ │ │ ├── musicDetail.js
│ │ │ │ │ ├── musicInfo.js
│ │ │ │ │ ├── musicSearch.js
│ │ │ │ │ ├── singer.js
│ │ │ │ │ ├── songList.js
│ │ │ │ │ └── tipSearch.js
│ │ │ │ ├── api-source-info.ts
│ │ │ │ ├── index.js
│ │ │ │ ├── options.js
│ │ │ │ └── utils.js
│ │ │ ├── array.ts
│ │ │ ├── index.ts
│ │ │ ├── object.ts
│ │ │ ├── path.ts
│ │ │ ├── request.js
│ │ │ └── utils.ts
│ │ ├── autoUpdate.ts
│ │ └── index.ts
│ ├── preload/
│ │ ├── index.d.ts
│ │ └── index.ts
│ ├── renderer/
│ │ ├── public/
│ │ │ ├── default-cover.png
│ │ │ ├── head.jpg
│ │ │ ├── logo.svg
│ │ │ ├── star.png
│ │ │ └── wldss.png
│ │ ├── src/
│ │ │ ├── api/
│ │ │ │ └── songList.ts
│ │ │ ├── components/
│ │ │ │ ├── AI/
│ │ │ │ │ └── FloatBall.vue
│ │ │ │ ├── Music/
│ │ │ │ │ └── SongVirtualList.vue
│ │ │ │ ├── Play/
│ │ │ │ │ ├── AudioVisualizer.vue
│ │ │ │ │ ├── FullPlay.vue
│ │ │ │ │ ├── GlobalAudio.vue
│ │ │ │ │ ├── PlaylistActions.vue
│ │ │ │ │ ├── PlaylistDrawer.vue
│ │ │ │ │ ├── PlayMusic.vue
│ │ │ │ │ └── ShaderBackground.vue
│ │ │ │ ├── Search/
│ │ │ │ │ └── SearchComponent.vue
│ │ │ │ ├── Settings/
│ │ │ │ │ ├── AIFloatBallSettings.vue
│ │ │ │ │ ├── DirectorySettings.vue
│ │ │ │ │ ├── MusicCache.vue
│ │ │ │ │ ├── PlaylistSettings.vue
│ │ │ │ │ └── UpdateSettings.vue
│ │ │ │ ├── ThemeSelector.vue
│ │ │ │ ├── TitleBarControls.vue
│ │ │ │ ├── UpdateExample.vue
│ │ │ │ ├── UpdateProgress.vue
│ │ │ │ └── Versions.vue
│ │ │ ├── composables/
│ │ │ │ └── useAutoUpdate.ts
│ │ │ ├── layout/
│ │ │ │ └── index.vue
│ │ │ ├── router/
│ │ │ │ └── index.ts
│ │ │ ├── services/
│ │ │ │ ├── music/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── service-base.ts
│ │ │ │ └── autoUpdateService.ts
│ │ │ ├── store/
│ │ │ │ ├── ControlAudio.ts
│ │ │ │ ├── LocalUserDetail.ts
│ │ │ │ ├── search.ts
│ │ │ │ └── Settings.ts
│ │ │ ├── types/
│ │ │ │ ├── audio.ts
│ │ │ │ ├── Sources.ts
│ │ │ │ └── userInfo.ts
│ │ │ ├── utils/
│ │ │ │ ├── audio/
│ │ │ │ │ ├── audioManager.ts
│ │ │ │ │ ├── download.ts
│ │ │ │ │ ├── useSmtc.ts
│ │ │ │ │ └── volume.ts
│ │ │ │ ├── color/
│ │ │ │ │ ├── colorExtractor.ts
│ │ │ │ │ └── contrastColor.ts
│ │ │ │ └── playlist/
│ │ │ │ ├── playlistExportImport.ts
│ │ │ │ └── playlistManager.ts
│ │ │ ├── views/
│ │ │ │ ├── home/
│ │ │ │ │ └── index.vue
│ │ │ │ ├── music/
│ │ │ │ │ ├── find.vue
│ │ │ │ │ ├── list.vue
│ │ │ │ │ ├── local.vue
│ │ │ │ │ ├── recent.vue
│ │ │ │ │ └── search.vue
│ │ │ │ ├── settings/
│ │ │ │ │ ├── index.vue
│ │ │ │ │ └── plugins.vue
│ │ │ │ └── welcome/
│ │ │ │ └── index.vue
│ │ │ ├── App.vue
│ │ │ ├── env.d.ts
│ │ │ └── main.ts
│ │ ├── auto-imports.d.ts
│ │ ├── components.d.ts
│ │ └── index.html
│ └── types/
│ ├── musicCache.ts
│ └── songList.ts
├── website/
│ ├── CeruUse.html
│ ├── design.html
│ ├── index.html
│ ├── pluginDev.html
│ ├── script.js
│ └── styles.css
├── electron-builder.yml
├── electron.vite.config.ts
├── eslint.config.js
├── LICENSE
├── package-lock.json
├── package.json
├── qodana.sarif.json
├── qodana.yaml
├── README.md
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.web.json
└── yarn.lock
```
## 主要功能
- 提供插件加载与管理功能,支持通过合规插件获取公开音乐信息

View File

@@ -7,8 +7,8 @@ export default defineConfig({
base: '/',
description:
'Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具,一个跨平台的音乐播放器应用,支持基于合规插件获取公开音乐信息与播放功能。',
markdown:{
config(md){
markdown: {
config(md) {
md.use(note)
}
},
@@ -28,12 +28,11 @@ export default defineConfig({
{ text: '安装教程', link: '/guide/' },
{
text: '使用教程',
items: [
{ text: '音乐播放列表', link: '/guide/used/playList' },
]
items: [{ text: '音乐播放列表', link: '/guide/used/playList' }]
},
{ text: '软件设计文档', link: '/guide/design' },
{ text: '更新日志', link: '/guide/updateLog' }
{ text: '更新日志', link: '/guide/updateLog' },
{ text: '更新计划', link: '/guide/update' }
]
},
{
@@ -42,6 +41,9 @@ export default defineConfig({
{ text: '插件类使用', link: '/guide/CeruMusicPluginHost' },
{ text: '澜音插件开发文档(重点)', link: '/guide/CeruMusicPluginDev' }
]
},{
text: '鸣谢名单',
link: '/guide/sponsorship'
}
],
@@ -63,19 +65,20 @@ export default defineConfig({
provider: 'local'
},
outline: {
level: [2,4],
level: [2, 4],
label: '文章导航'
},
docFooter: {
next: '下一篇',
prev: '上一篇'
},
lastUpdatedText: '上次更新',
lastUpdatedText: '上次更新'
},
sitemap: {
hostname: 'https://ceru.docs.shiqianjiang.cn'
},
lastUpdated: true,
head: [['link', { rel: 'icon', href: '/logo.svg' }]],
head: [['link', { rel: 'icon', href: '/logo.svg' }]]
})
console.log(process.env.BASE_URL_DOCS)
// Smooth scrolling functions

View File

@@ -168,15 +168,15 @@ html.dark #app {
// --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
// --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
// --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
// --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
// --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
/* 下面是文章内Toc目录自动编号与上面一样即可 */
// --autonum-h1toc: counter(h1toc) ". ";
// --autonum-h2toc: counter(h1toc) "." counter(h2toc) ". ";
// --autonum-h3toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". ";
// --autonum-h4toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
// --autonum-h5toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
// --autonum-h6toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". ";
// --autonum-h1toc: counter(h1toc) ". ";
// --autonum-h2toc: counter(h1toc) "." counter(h2toc) ". ";
// --autonum-h3toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". ";
// --autonum-h4toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
// --autonum-h5toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
// --autonum-h6toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". ";
/* 主题颜色 */
@@ -218,33 +218,33 @@ html.dark #app {
* 黑暗模式切换动画
* -------------------------------------------------------------------------- */
// #VPContent .vp-doc > div {
// animation:
// rises 1s,
// looming 1s;
// }
#VPContent .vp-doc > div {
animation:
rises 1s,
looming 1s;
}
// @keyframes rises {
// 0% {
// transform: translateY(50px);
// }
@keyframes rises {
0% {
transform: translateY(50px);
}
// 100% {
// transform: translateY(0);
// }
// }
100% {
transform: translateY(0);
}
}
// @keyframes looming {
// 0% {
// opacity: 0;
// }
// 50% {
// opacity: 0.3;
// }
// 100% {
// opacity: 1;
// }
// }
@keyframes looming {
0% {
opacity: 0;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
.vp-doc li div[class*='language-'] {
margin: 12px;
@@ -285,6 +285,3 @@ html .vp-doc div[class*='language-'] pre {
.VPDoc.has-aside .content-container {
max-width: none !important;
}
.vp-doc{
// padding: min(3vw, 64px) !important;
}

View File

@@ -1,105 +1,123 @@
---
layout: doc
---
# CeruMusic 插件开发文档
# CeruMusic 插件开发指南
## 概述
本文档介绍如何为 CeruMusic 开发音乐源插件。CeruMusic 插件是运行在沙箱环境中的 JavaScript 模块,用于从各种音乐平台获取音乐资源。
CeruMusic 支持两种类型的插件:
## 插件结构
1. **CeruMusic 原生插件**:基于 CeruMusic API 的插件格式
2. **LX 兼容插件**:兼容 LX Music 的事件驱动插件格式
### 基本结构
本文档将详细介绍如何开发这两种类型的插件。
每个 CeruMusic 插件必须导出以下三个核心组件:
## 文件要求
```javascript
module.exports = {
pluginInfo, // 插件信息
sources, // 支持的音源
musicUrl // 获取音乐链接的函数
}
```
- **编码格式**UTF-8
- **编程语言**JavaScript (支持 ES6+ 语法)
- **文件扩展名**`.js`
# 完整示例
## 插件信息注释
所有插件文件的开头必须包含以下注释格式:
```javascript
/**
* 示例音乐插件
* @author 开发者名称
* @name 插件名称
* @description 插件描述
* @version 1.0.0
* @author 作者名称
* @homepage https://example.com
*/
```
### 注释字段说明
- `@name`:插件名称,建议不超过 24 个字符
- `@description`:插件描述,建议不超过 36 个字符(可选)
- `@version`:版本号(可选)
- `@author`:作者名称(可选)
- `@homepage`:主页地址(可选)
---
## CeruMusic 原生插件开发
首先 `澜音` 插件是面向 方法的 这意味着你直接导出方法即可为播放器提供音源
### 基本结构
```javascript
/**
* @name 示例音乐源
* @description CeruMusic 原生插件示例
* @version 1.0.0
* @author CeruMusic Team
*/
// 1. 插件信息
// 插件信息
const pluginInfo = {
name: '示例音源插件',
version: '1.0.0',
author: '开发者名称',
description: '这是一个示例音乐源插件'
}
name: "示例音乐源",
version: "1.0.0",
author: "CeruMusic Team",
description: "这是一个示例插件"
};
// 2. 支持的音源配置
// 支持的音源配置
const sources = {
demo: {
name: '示例音源',
type: 'music',
qualitys: ['128k', '320k', 'flac']
kw:{
name: "酷我音乐",
qualities: ['128k', '320k', 'flac', 'flac24bit']
},
demo2: {
name: '示例音源2',
type: 'music',
qualitys: ['128k', '320k']
tx:{
name: "QQ音乐",
qualities: ['128k', '320k', 'flac']
}
}
};
// 3. 获取音乐URL的核心函数
// 获取音乐链接的主要方法
async function musicUrl(source, musicInfo, quality) {
// 从 cerumusic 对象获取 API
const { request, env, version } = cerumusic
try {
// 使用 cerumusic API 发送 HTTP 请求
const result = await cerumusic.request('https://api.example.com/music', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
...你的其他参数 可以 是密钥或者其他...
},
body: JSON.stringify({
id: musicInfo.id,
quality: quality
})
});
// 构建请求参数
const songId = musicInfo.hash ?? musicInfo.songmid
const apiUrl = `https://api.example.com/music/${source}/${songId}/${quality}`
console.log(`[${pluginInfo.name}] 请求音乐链接: ${apiUrl}`)
// 发起网络请求
const { body, statusCode } = await request(apiUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'User-Agent': `cerumusic-${env}/${version}`
if (result.statusCode === 200 && result.body.url) {
return result.body.url;
} else {
throw new Error('获取音乐链接失败');
}
})
// 处理响应
if (statusCode !== 200 || body.code !== 200) {
const errorMessage = body.msg || `接口错误 (HTTP: ${statusCode})`
console.error(`[${pluginInfo.name}] Error: ${errorMessage}`)
throw new Error(errorMessage)
} catch (error) {
console.error('获取音乐链接时发生错误:', error);
throw error;
}
console.log(`[${pluginInfo.name}] 获取成功: ${body.url}`)
return body.url
}
// 4. 可选:获取封面图片
// 获取歌曲封面(可选)
async function getPic(source, musicInfo) {
const { request } = cerumusic
const songId = musicInfo.hash ?? musicInfo.songmid
const { body } = await request(`https://api.example.com/pic/${source}/${songId}`)
return body.picUrl
try {
const result = await cerumusic.request(`https://api.example.com/pic/${musicInfo.id}`);
return result.body.picUrl;
} catch (error) {
throw new Error('获取封面失败: ' + error.message);
}
}
// 5. 可选:获取歌词
// 获取歌词(可选)
async function getLyric(source, musicInfo) {
const { request } = cerumusic
const songId = musicInfo.hash ?? musicInfo.songmid
const { body } = await request(`https://api.example.com/lyric/${source}/${songId}`)
return body.lyric
try {
const result = await cerumusic.request(`https://api.example.com/lyric/${musicInfo.id}`);
return result.body.lyric;
} catch (error) {
throw new Error('获取歌词失败: ' + error.message);
}
}
// 导出插件
@@ -107,279 +125,557 @@ module.exports = {
pluginInfo,
sources,
musicUrl,
getPic, // 可选
getLyric // 可选
}
getPic, // 可选
getLyric // 可选
};
```
## 详细说明
> #### PS:
>
> - `sources key` 取值
> - wy 网易云音乐 |
> - tx QQ音乐 |
> - kg 酷狗音乐 |
> - mg 咪咕音乐 |
> - kw 酷我音乐
>
> - 导出
>
> ```javascript
> module.exports = {
> sources // 你的音源支持
> }
> ```
>
> - 支持的音质 ` sources.qualities: ['128k', '320k', 'flac']`
> - `128k`: 128kbps
> - `320k`: 320kbps
> - `flac`: FLAC 无损
> - `flac24bit`: 24bit FLAC
> - `hires`: Hi-Res 高解析度
> - `atmos`: 杜比全景声
> - `master`: 母带音质
### 1. pluginInfo 对象
### CeruMusic API 参考
插件的基本信息,必须包含以下字段:
#### cerumusic.request(url, options)
```javascript
const pluginInfo = {
name: '插件名称', // 必需:插件显示名称
version: '1.0.0', // 必需:版本号
author: '作者名', // 必需:作者信息
description: '插件描述' // 必需:功能描述
}
```
HTTP 请求方法,返回 Promise。
### 2. sources 对象
定义插件支持的音源,键为音源标识,值为音源配置:
```javascript
const sources = {
// 音源标识用于API调用
source_id: {
name: '音源显示名称', // 必需:用户看到的名称
type: 'music', // 必需:固定为 'music'
qualitys: [
// 必需:支持的音质列表
'128k', // 标准音质
'320k', // 高音质
'flac', // 无损音质
'flac24bit', // 24位无损
'hires' // 高解析度
]
}
}
```
### 3. musicUrl 函数
获取音乐播放链接的核心函数:
```javascript
async function musicUrl(source, musicInfo, quality) {
// source: 音源标识sources 对象的键)
// musicInfo: 歌曲信息对象
// quality: 请求的音质
// 返回: Promise<string> - 音乐播放链接
}
```
#### musicInfo 对象结构
```javascript
const musicInfo = {
songmid: '歌曲ID', // 歌曲标识符
hash: '歌曲哈希', // 备用标识符
title: '歌曲标题', // 歌曲名称
artist: '艺术家', // 演唱者
album: '专辑名' // 专辑信息
// ... 其他可能的字段
}
```
## 可用 API
### cerumusic 对象
插件运行时可以访问 `cerumusic` 全局对象:
```javascript
const { request, env, version, utils } = cerumusic
```
#### request 函数
用于发起 HTTP 请求:
```javascript
// Promise 模式
const response = await request(url, options)
// Callback 模式
request(url, options, (error, response) => {
if (error) {
console.error('请求失败:', error)
return
}
console.log('响应:', response)
})
```
**参数说明:**
**参数:**
- `url` (string): 请求地址
- `options` (Object): 请求选项
- `method`: HTTP 方法 ('GET', 'POST', 等)
- `options` (object): 请求选项
- `method`: 请求方法 (GET, POST, PUT, DELETE 等)
- `headers`: 请求头对象
- `body`: 请求体POST 请求时)
- `body`: 请求体
- `timeout`: 超时时间(毫秒)
**响应格式:**
**返回值:**
```javascript
{
body: {}, // 解析后的响应体
statusCode: 200, // HTTP 状态码
headers: {} // 响应
statusCode: 200,
headers: {...},
body: {...} // 自动解析的响应
}
```
#### utils 对象
#### cerumusic.utils
提供实用工具函数
工具方法集合
```javascript
const { utils } = cerumusic
// Buffer 操作
const buffer = utils.buffer.from('hello', 'utf8')
const string = utils.buffer.bufToString(buffer, 'utf8')
cerumusic.utils.buffer.from(data, encoding)
cerumusic.utils.buffer.bufToString(buffer, encoding)
// 加密工具
cerumusic.utils.crypto.md5(str)
cerumusic.utils.crypto.randomBytes(size)
cerumusic.utils.crypto.aesEncrypt(data, mode, key, iv)
cerumusic.utils.crypto.rsaEncrypt(data, key)
```
#### cerumusic.NoticeCenter(type, data)
发送通知到用户界面:
```javascript
cerumusic.NoticeCenter('info', {
title: '通知标题',
content: '通知内容',
url: 'https://example.com', // 可选 当通知为update 版本跟新可传
version: '版本号', // 当通知为update 版本跟新可传
pluginInfo: {
name: '插件名称',
type: 'cr' // 固定唯一标识
} // 当通知为update 版本跟新可传
})
```
**通知类型:**
- `'info'`: 信息通知
- `'success'`: 成功通知
- `'warn'`: 警告通知
- `'error'`: 错误通知
- `'update'`: 更新通知
---
## LX 兼容插件开发 引用于落雪官网改编
CeruMusic 完全兼容 LX Music 的插件格式,支持事件驱动的开发模式。
### 基本结构
```javascript
/**
* @name 测试音乐源
* @description 我只是一个测试音乐源哦
* @version 1.0.0
* @author xxx
* @homepage http://xxx
*/
const { EVENT_NAMES, request, on, send } = globalThis.lx
// 音质配置
const qualitys = {
kw: {
'128k': '128',
'320k': '320',
flac: 'flac',
flac24bit: 'flac24bit'
},
local: {}
}
// HTTP 请求封装
const httpRequest = (url, options) =>
new Promise((resolve, reject) => {
request(url, options, (err, resp) => {
if (err) return reject(err)
resolve(resp.body)
})
})
// API 实现
const apis = {
kw: {
musicUrl({ songmid }, quality) {
return httpRequest('http://xxx').then((data) => {
return data.url
})
}
},
local: {
musicUrl(info) {
return httpRequest('http://xxx').then((data) => {
return data.url
})
},
pic(info) {
return httpRequest('http://xxx').then((data) => {
return data.url
})
},
lyric(info) {
return httpRequest('http://xxx').then((data) => {
return {
lyric: '...', // 歌曲歌词
tlyric: '...', // 翻译歌词,没有可为 null
rlyric: '...', // 罗马音歌词,没有可为 null
lxlyric: '...' // lx 逐字歌词,没有可为 null
}
})
}
}
}
// 注册 API 请求事件
on(EVENT_NAMES.request, ({ source, action, info }) => {
switch (action) {
case 'musicUrl':
return apis[source].musicUrl(info.musicInfo, qualitys[source][info.type])
case 'lyric':
return apis[source].lyric(info.musicInfo)
case 'pic':
return apis[source].pic(info.musicInfo)
}
})
// 发送初始化完成事件
send(EVENT_NAMES.inited, {
openDevTools: false, // 是否打开开发者工具
sources: {
kw: {
name: '酷我音乐',
type: 'music',
actions: ['musicUrl'],
qualitys: ['128k', '320k', 'flac', 'flac24bit']
},
local: {
name: '本地音乐',
type: 'music',
actions: ['musicUrl', 'lyric', 'pic'],
qualitys: []
}
}
})
```
### LX API 参考
#### globalThis.lx.EVENT_NAMES
事件名称常量:
- `inited`: 初始化完成事件
- `request`: API 请求事件
- `updateAlert`: 更新提示事件
#### globalThis.lx.on(eventName, handler)
注册事件监听器:
```javascript
lx.on(lx.EVENT_NAMES.request, ({ source, action, info }) => {
// 必须返回 Promise
return Promise.resolve(result)
})
```
#### globalThis.lx.send(eventName, data)
发送事件:
```javascript
// 发送初始化事件
lx.send(lx.EVENT_NAMES.inited, {
openDevTools: false,
sources: {...}
});
// 发送更新提示
lx.send(lx.EVENT_NAMES.updateAlert, {
log: '更新日志\n修复了一些问题',
updateUrl: 'https://example.com/update'
});
```
#### globalThis.lx.request(url, options, callback)
HTTP 请求方法:
```javascript
lx.request(
'https://api.example.com',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
timeout: 10000
},
(err, resp) => {
if (err) {
console.error('请求失败:', err)
return
}
console.log('响应:', resp.body)
}
)
```
#### globalThis.lx.utils
工具方法:
```javascript
// Buffer 操作
lx.utils.buffer.from(data, encoding)
lx.utils.buffer.bufToString(buffer, encoding)
// 加密工具
lx.utils.crypto.md5(str)
lx.utils.crypto.aesEncrypt(buffer, mode, key, iv)
lx.utils.crypto.randomBytes(size)
lx.utils.crypto.rsaEncrypt(buffer, key)
```
---
## 音源配置
### 支持的音源 ID
- `kw`: 酷我音乐
- `kg`: 酷狗音乐
- `tx`: QQ音乐
- `wy`: 网易云音乐
- `mg`: 咪咕音乐
- `local`: 本地音乐
### 支持的音质
- `128k`: 128kbps
- `320k`: 320kbps
- `flac`: FLAC 无损
- `flac24bit`: 24bit FLAC
- `hires`: Hi-Res 高解析度
- `atmos`: 杜比全景声
- `master`: 母带音质
---
## 错误处理
### 最佳实践
1. **总是检查 API 响应状态**
```javascript
async function musicUrl(source, musicInfo, quality) {
try {
// 参数验证
if (!musicInfo || !musicInfo.id) {
throw new Error('音乐信息不完整')
}
```javascript
if (statusCode !== 200 || body.code !== 200) {
throw new Error(`请求失败: ${body.msg || '未知错误'}`)
}
```
// API 调用
const result = await cerumusic.request(url, options)
2. **提供有意义的错误信息**
// 结果验证
if (!result || result.statusCode !== 200) {
throw new Error(`API 请求失败: ${result?.statusCode || 'Unknown'}`)
}
```javascript
console.error(`[${pluginInfo.name}] Error: ${errorMessage}`)
throw new Error(errorMessage)
```
if (!result.body || !result.body.url) {
throw new Error('返回数据格式错误')
}
3. **处理网络异常**
```javascript
try {
const response = await request(url, options)
// 处理响应
} catch (error) {
console.error(`[${pluginInfo.name}] 网络请求失败:`, error.message)
throw new Error(`网络错误: ${error.message}`)
}
```
return result.body.url
} catch (error) {
// 记录错误日志
console.error(`[${source}] 获取音乐链接失败:`, error.message)
// 重新抛出错误供上层处理
throw new Error(`获取 ${source} 音乐链接失败: ${error.message}`)
}
}
```
### 常见错误类型
- **网络错误**: 无法连接到 API 服务器
- **认证错误**: API 密钥无效或过期
- **参数错误**: 请求参数格式不正确
- **资源不存在**: 请求的歌曲不存在
- **限流错误**: 请求过于频繁
1. **网络错误**: 请求超时、连接失败
2. **API 错误**: 接口返回错误状态码
3. **数据错误**: 返回数据格式不正确
4. **参数错误**: 传入参数不完整或格式错误
## 事件驱动插件
对于使用 `lx.on(EVENT_NAMES.request)` 模式的插件,可以使用转换器:
```javascript
// 使用转换器转换事件驱动插件
node converter-event-driven.js input-plugin.js output-plugin.js
```
转换后的插件将兼容 CeruMusicPluginHost。
---
## 调试技巧
### 1. 使用 console.log
```javascript
console.log(`[${pluginInfo.name}] 调试信息:`, data)
console.error(`[${pluginInfo.name}] 错误:`, error)
console.log('[插件名] 调试信息:', data)
console.warn('[插件名] 警告信息:', warning)
console.error('[插件名] 错误信息:', error)
```
### 2. 检查请求和响应
### 2. LX 插件开发者工具
```javascript
console.log('请求URL:', url)
console.log('请求选项:', options)
console.log('响应状态:', statusCode)
console.log('响应内容:', body)
send(EVENT_NAMES.inited, {
openDevTools: true, // 开启开发者工具
sources: {...}
});
```
### 3. 测试插件
创建测试文件:
### 3. 错误捕获
```javascript
const CeruMusicPluginHost = require('./CeruMusicPluginHost')
process.on('unhandledRejection', (reason, promise) => {
console.error('未处理的 Promise 拒绝:', reason)
})
```
async function testPlugin() {
const host = new CeruMusicPluginHost()
await host.loadPlugin('./my-plugin.js')
---
const musicInfo = {
songmid: 'test123',
title: '测试歌曲'
## 性能优化
### 1. 请求缓存
```javascript
const cache = new Map()
async function getCachedData(key, fetcher, ttl = 300000) {
const cached = cache.get(key)
if (cached && Date.now() - cached.timestamp < ttl) {
return cached.data
}
const data = await fetcher()
cache.set(key, { data, timestamp: Date.now() })
return data
}
```
### 2. 请求超时控制
```javascript
const result = await cerumusic.request(url, {
timeout: 10000 // 10秒超时
})
```
### 3. 并发控制
```javascript
// 限制并发请求数量
const semaphore = new Semaphore(3) // 最多3个并发请求
async function limitedRequest(url, options) {
await semaphore.acquire()
try {
return await cerumusic.request(url, options)
} finally {
semaphore.release()
}
}
```
---
## 安全注意事项
### 1. 输入验证
```javascript
function validateMusicInfo(musicInfo) {
if (!musicInfo || typeof musicInfo !== 'object') {
throw new Error('音乐信息格式错误')
}
if (!musicInfo.id || typeof musicInfo.id !== 'string') {
throw new Error('音乐 ID 无效')
}
return true
}
```
### 2. URL 验证
```javascript
function isValidUrl(url) {
try {
const urlObj = new URL(url)
return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
} catch {
return false
}
}
```
### 3. 敏感信息保护
```javascript
// 不要在日志中输出敏感信息
console.log('请求参数:', {
...params,
token: '***', // 隐藏敏感信息
password: '***'
})
```
---
## 插件发布
### 1. 代码检查清单
- [ ] 插件信息注释完整
- [ ] 错误处理完善
- [ ] 性能优化合理
- [ ] 安全验证到位
- [ ] 测试覆盖充分
### 2. 测试建议
```javascript
// 单元测试示例
async function testMusicUrl() {
const testMusicInfo = {
id: 'test123',
name: '测试歌曲',
artist: '测试歌手'
}
try {
const url = await host.getMusicUrl('demo', musicInfo, '320k')
console.log('成功获取URL:', url)
const url = await musicUrl('kw', testMusicInfo, '320k')
console.log('测试通过:', url)
} catch (error) {
console.error('测试失败:', error.message)
console.error('测试失败:', error)
}
}
testPlugin()
```
## 发布和分发
### 3. 版本管理
### 文件结构
使用语义化版本号:
```
my-plugin/
├── plugin.js # 主插件文件
├── package.json # 包信息(可选)
├── README.md # 说明文档
└── test.js # 测试文件(可选)
```
### 版本管理
遵循语义化版本规范:
- `1.0.0` - 主版本.次版本.修订版本
- `1.0.0`: 主版本.次版本.修订版本
- 主版本:不兼容的 API 修改
- 次版本:向下兼容的功能性新增
- 修订版本:向下兼容的问题修正
## 示例插件
查看项目中的示例:
- `example-plugin.js` - 基础插件示例
- `plugin.js` - 事件驱动插件示例
- `fm.js` - 复杂插件示例
---
## 常见问题
**Q: 如何处理需要登录的 API**
### Q: 插件加载失败怎么办?
A: 在请求头中添加认证信息,或使用 Cookie。
A: 检查以下几点:
**Q: 如何处理加密的 API 响应?**
1. 文件编码是否为 UTF-8
2. 插件信息注释格式是否正确
3. JavaScript 语法是否有错误
4. 是否正确导出了必需的方法
A: 在插件中实现解密逻辑,使用 `utils` 对象提供的工具函数。
### Q: 如何处理跨域请求?
**Q: 插件可以访问文件系统吗?**
A: CeruMusic 的请求方法不受浏览器跨域限制,可以直接请求任何域名的 API。
A: 不可以,插件运行在受限的沙箱环境中,无法直接访问文件系统。
### Q: 插件如何更新?
**Q: 如何优化插件性能?**
A: 使用 `cerumusic.NoticeCenter` 事件通知用户更新:
A: 减少不必要的网络请求,使用适当的缓存策略,避免阻塞操作。
```javascript
cerumusic.NoticeCenter('update', {
title: '新版本更新',
content: 'xxxx',
version: 'v1.0.3',
url: 'https://shiqianjiang.cn',
pluginInfo: {
type: 'cr'
}
})
```
## 贡献指南
### Q: 如何调试插件?
1. Fork 项目仓库
2. 创建功能分支
3. 编写插件代码和测试
4. 提交 Pull Request
5. 等待代码审查
A:
欢迎贡献新的音源插件!
1. 使用 `console.log` 输出调试信息 可在设置—>插件管理—>日志 查看调试
2. LX 插件可以设置 `openDevTools: true` 打开开发者工具
3. 查看 CeruMusic 的插件日志
---
## 技术支持
如有问题或建议,请通过以下方式联系:
- GitHub Issues: [CeruMusic Issues](https://github.com/timeshiftsauce/CeruMusic/issues)
- Blog (最好登录,否则需要审核): [CeruMusic Blog](https://shiqianjiang.cn/blog/4966904626407280640)

0
docs/guide/analyze.md Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,8 @@
# 赞助名单
## 鸣谢
| 昵称 | 赞助金额 |
| :------------------------: | :------: |
| **群友**:可惜情绪落泪零碎 | 6.66 |

15
docs/guide/update.md Normal file
View File

@@ -0,0 +1,15 @@
# 我的-更新计划-欢迎issue
- [ ] 搜索框可以弄对应的音乐源的排行榜 搜索联想
- [ ] 导航上面这几个按钮可以稍微优化一下
- [ ] 大熊好暖: 09-21 12:52:25 在搜索歌曲出来后 大熊好暖: 09-21 12:52:34 一般都是双击播放 大熊好暖: 09-21 12:54:16 这个是双击加入播放列表 可以优化 或者可以把这个双击做一个选项,让人选择
- [ ] 播放页 样式模板选择 歌词背景律动很有沉浸感,但是黑胶唱片的专辑样式不是很喜欢,希望增加一个选项如图二一样只有圆形专辑封面
- [x] 点击搜索框的 源图标实现快速切换
- [ ] ai功能完善
- [ ] 支持歌词隐藏
- [x] 兼容多平台歌单导入
- [x] 软件能不能记住上次打开的窗口大小,每次都要手动拉
- [x] 歌单右键菜单
- [x] 播放列表滚动条适配
- [ ] 暗色主题
- [x] 歌单页支持修改封面

View File

@@ -1,10 +1,57 @@
# 澜音版本更新日志
## 日志
- 2025-9-17 **V1.3.1**
- ###### 2025-9-26 (v1.3.8)
1. 写入歌曲tag信息
2. 歌曲下载 选择音质
3. 歌单 头部自动压缩
- ###### 2025-9-25 (v1.3.7)
1. 歌单
- 新增右键移除歌曲
- local 页歌单右键操作
- 歌单页支持修改封面
2. debug右键菜单二级菜单位置决策
- ###### 2025-9-22 (v1.3.6)
1. 歌单列表可以右键操作
- 播放
- 下载
- 添加到歌单
- 添加到播放列表
2. 播放列表滚动条
3. 搜索页切换源重新加载
- ###### 2025-9-22 (v1.3.5)
1. 软件启动位置 宽高记忆 限制软件最大宽高
2. debug: 修复歌曲音质支持短缺问题
- ###### 2025-9-21 (v1.3.4)
1. 紧急修复QQ音乐歌词失效问题
- ###### 2025-9-21(v1.3.3)
1. 兼容多平台歌单导入
2. 点击搜索框的 源图标实现快速切换
3. debug: fix:列表删除按钮冒泡
- ###### 2025-9-17 **(v1.3.2)**
1. 目录结构调整
2. **支持插件更新提示**
**洛雪** 插件请手动重装适配
3. **debug**
- SMTC 问题
- 歌曲缓存播放多次请求和多次缓存问题
- ###### 2025-9-17 **v1.3.1**
1. **设置功能页**
- 缓存路径支持自定义
- 下载路径支持自定义
@@ -12,4 +59,4 @@
- 播放页面唱针可以拖动问题
- 播放按钮加载中 因为自动下一曲 导致动画变形问题
- **SMTC** 功能 系统显示**未知应用**问题
- 播放页歌词**字体粗细**偶现丢失问题
- 播放页歌词**字体粗细**偶现丢失问题

View File

@@ -23,6 +23,4 @@
歌单将自动选取第一首 **有效封面**[^1] 为歌单
[^1]: url正确的歌曲封面
[^1]: url正确的歌曲封面

View File

@@ -0,0 +1,84 @@
// 测试插件通知功能的示例插件
// 这个文件可以用来测试 NoticeCenter 功能
const pluginInfo = {
name: '测试通知插件',
version: '1.0.0',
author: 'CeruMusic Team',
description: '用于测试插件通知功能的示例插件',
type: 'cr'
}
const sources = [
{
name: 'test',
qualities: ['128k', '320k']
}
]
// 模拟音乐URL获取函数
async function musicUrl(source, musicInfo, quality) {
console.log('测试插件获取音乐URL')
// 测试不同类型的通知
setTimeout(() => {
// 测试信息通知
this.cerumusic.NoticeCenter('info', {
title: '信息通知',
message: '这是一个信息通知测试',
content: '插件正在正常工作'
})
}, 1000)
setTimeout(() => {
// 测试警告通知
this.cerumusic.NoticeCenter('warning', {
title: '警告通知',
message: '这是一个警告通知测试',
content: '请注意某些设置'
})
}, 2000)
setTimeout(() => {
// 测试成功通知
this.cerumusic.NoticeCenter('success', {
title: '成功通知',
message: '操作已成功完成',
content: '音乐URL获取成功'
})
}, 3000)
setTimeout(() => {
// 测试更新通知
this.cerumusic.NoticeCenter('update', {
title: '插件更新',
message: '发现新版本 v2.0.0,是否立即更新?',
url: 'https://example.com/plugin-update.js',
version: '2.0.0',
pluginInfo: {
name: '测试通知插件',
type: 'cr',
forcedUpdate: false
}
})
}, 4000)
setTimeout(() => {
// 测试错误通知
this.cerumusic.NoticeCenter('error', {
title: '错误通知',
message: '这是一个错误通知测试',
error: '模拟的错误信息'
})
}, 5000)
// 返回一个测试URL
return 'https://example.com/test-music.mp3'
}
// 导出插件
module.exports = {
pluginInfo,
sources,
musicUrl
}

216
docs/plugin-notice-usage.md Normal file
View File

@@ -0,0 +1,216 @@
# 插件通知系统使用说明
## 概述
CeruMusic 插件通知系统允许插件向用户显示各种类型的通知对话框,包括信息、警告、错误、成功和更新通知。
## 功能特性
### 🎯 支持的通知类型
1. **信息通知 (info)** - 显示一般信息
2. **警告通知 (warning)** - 显示警告信息
3. **错误通知 (error)** - 显示错误信息
4. **成功通知 (success)** - 显示成功信息
5. **更新通知 (update)** - 显示插件更新信息,支持一键更新
### 🎨 界面特性
- 使用 TDesign 组件库,界面美观统一
- 支持深色主题适配
- 响应式设计,移动端友好
- 不同通知类型有对应的图标和颜色
### ⚡ 技术特性
- 基于 Electron IPC 通信
- TypeScript 类型安全
- 异步操作支持
- 错误处理完善
## 使用方法
### 在插件中调用通知
```javascript
// 基本用法
this.cerumusic.NoticeCenter(type, data)
// 信息通知
this.cerumusic.NoticeCenter('info', {
title: '插件信息',
message: '这是一条信息通知',
content: '详细的信息内容'
})
// 警告通知
this.cerumusic.NoticeCenter('warning', {
title: '注意',
message: '这是一条警告信息',
content: '请检查相关设置'
})
// 错误通知
this.cerumusic.NoticeCenter('error', {
title: '错误',
message: '操作失败',
error: '具体的错误信息'
})
// 成功通知
this.cerumusic.NoticeCenter('success', {
title: '成功',
message: '操作已成功完成'
})
// 更新通知(特殊)
this.cerumusic.NoticeCenter('update', {
title: '插件更新',
message: '发现新版本,是否立即更新?',
url: 'https://example.com/plugin-update.js',
version: '2.0.0',
pluginInfo: {
name: '插件名称',
type: 'cr', // 'cr' 或 'lx'
forcedUpdate: false
}
})
```
### 参数说明
#### 通用参数 (data 对象)
| 参数 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | ------------------------------ |
| title | string | 否 | 通知标题,不提供时使用默认标题 |
| message | string | 否 | 通知消息内容 |
| content | string | 否 | 详细内容(与 message 二选一) |
#### 更新通知特有参数
| 参数 | 类型 | 必填 | 说明 |
| ----------------------- | ------------ | ---- | ---------------- |
| url | string | 是 | 插件更新下载链接 |
| version | string | 否 | 新版本号 |
| pluginInfo.name | string | 否 | 插件名称 |
| pluginInfo.type | 'cr' \| 'lx' | 否 | 插件类型 |
| pluginInfo.forcedUpdate | boolean | 否 | 是否强制更新 |
#### 错误通知特有参数
| 参数 | 类型 | 必填 | 说明 |
| ----- | ------ | ---- | ------------ |
| error | string | 否 | 具体错误信息 |
## 实现原理
### 架构图
```
插件代码
↓ (调用 NoticeCenter)
CeruMusicPluginHost
↓ (sendPluginNotice)
pluginNotice.ts (主进程)
↓ (IPC 通信)
PluginNoticeDialog.vue (渲染进程)
↓ (显示对话框)
用户界面
```
### 文件结构
```
src/
├── main/
│ ├── events/
│ │ └── pluginNotice.ts # 主进程通知处理
│ └── services/plugin/manager/
│ └── CeruMusicPluginHost.ts # 插件主机
├── renderer/src/
│ ├── components/
│ │ └── PluginNoticeDialog.vue # 通知对话框组件
│ └── App.vue # 主应用(注册组件)
└── preload/
└── index.ts # IPC API 定义
```
## 测试
### 使用测试插件
1.`docs/plugin-notice-test.js` 作为插件加载
2. 调用插件的 `musicUrl` 方法
3. 观察不同类型的通知是否正确显示
### 测试场景
- [x] 信息通知显示
- [x] 警告通知显示
- [x] 错误通知显示
- [x] 成功通知显示
- [x] 更新通知显示(带更新按钮)
- [x] 更新按钮功能
- [x] 对话框关闭功能
- [x] 响应式布局
- [x] 深色主题适配
## 注意事项
1. **URL 验证**: 更新通知的 URL 必须是有效的 HTTP/HTTPS 链接
2. **错误处理**: 所有通知操作都有完善的错误处理机制
3. **性能考虑**: 避免频繁发送通知,可能影响用户体验
4. **类型安全**: 使用 TypeScript 确保参数类型正确
## 扩展功能
### 未来可能的增强
- [ ] 通知历史记录
- [ ] 通知优先级系统
- [ ] 批量通知管理
- [ ] 自定义通知样式
- [ ] 通知声音提醒
- [ ] 通知位置自定义
## 故障排除
### 常见问题
1. **通知不显示**
- 检查主窗口是否存在
- 确认 IPC 通信是否正常
- 查看控制台错误信息
2. **更新按钮无响应**
- 确认更新 URL 是否有效
- 检查网络连接
- 查看主进程日志
3. **样式显示异常**
- 确认 TDesign 组件库已正确加载
- 检查 CSS 样式是否冲突
- 验证主题配置
### 调试方法
```javascript
// 在插件中添加调试日志
console.log('[Plugin] 发送通知:', type, data)
// 在渲染进程中监听通知
window.api.on('plugin-notice', (_, notice) => {
console.log('[Renderer] 收到通知:', notice)
})
```
## 更新日志
### v1.0.0 (2025-09-20)
- ✨ 初始版本发布
- ✨ 支持 5 种通知类型
- ✨ 完整的 TypeScript 类型定义
- ✨ 响应式设计和深色主题支持
- ✨ 完善的错误处理机制

View File

@@ -12,6 +12,7 @@ files:
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
- resources/**
- node_modules/ffmpeg-static/**
win:
executableName: ceru-music
icon: 'resources/icons/icon.ico'

View File

@@ -36,14 +36,16 @@ export default defineConfig({
TDesignResolver({
library: 'vue-next'
})
]
],
dts: true
}),
Components({
resolvers: [
TDesignResolver({
library: 'vue-next'
})
]
],
dts: true
})
],
base: './',

View File

@@ -1,6 +1,6 @@
{
"name": "ceru-music",
"version": "1.3.1",
"version": "1.3.9",
"description": "一款简洁优雅的音乐播放器",
"main": "./out/main/index.js",
"author": "sqj,wldss,star",
@@ -8,7 +8,7 @@
"homepage": "https://ceru.docs.shiqianjiang.cn",
"scripts": {
"format": "prettier --write .",
"lint": "eslint --cache . --fix",
"lint": "eslint --cache . --fix && yarn typecheck",
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
"typecheck": "yarn run typecheck:node && yarn run typecheck:web",
@@ -44,6 +44,7 @@
"@pixi/filter-bulge-pinch": "^5.1.1",
"@pixi/filter-color-matrix": "^7.4.3",
"@pixi/sprite": "^7.4.3",
"@types/fluent-ffmpeg": "^2.1.27",
"@types/needle": "^3.3.0",
"NeteaseCloudMusicApi": "^4.27.0",
"animate.css": "^4.1.1",
@@ -53,6 +54,8 @@
"dompurify": "^3.2.6",
"electron-log": "^5.4.3",
"electron-updater": "^6.3.9",
"ffmpeg-static": "^5.2.0",
"fluent-ffmpeg": "^2.1.3",
"hpagent": "^1.2.0",
"iconv-lite": "^0.7.0",
"jss": "^10.10.0",
@@ -63,7 +66,9 @@
"mitt": "^3.0.1",
"needle": "^3.3.1",
"node-fetch": "2",
"node-id3": "^0.2.9",
"pinia": "^3.0.3",
"tdesign-icons-vue-next": "^0.4.1",
"tdesign-vue-next": "^1.15.2",
"vue-router": "^4.5.1",
"zlib": "^1.0.5"

72090
qodana.sarif.json Normal file

File diff suppressed because one or more lines are too long

3
qodana.yaml Normal file
View File

@@ -0,0 +1,3 @@
version: '1.0'
profile:
name: qodana.starter

79
scripts/genAst.js Normal file
View File

@@ -0,0 +1,79 @@
const fs = require('fs')
const path = require('path')
function generateTree(
dir,
prefix = '',
isLast = true,
excludeDirs = [
'node_modules',
'dist',
'out',
'.git',
'.kiro',
'.idea',
'.codebuddy',
'.vscode',
'.workflow',
'assets',
'resources',
'docs'
]
) {
const basename = path.basename(dir)
// 跳过排除的目录和隐藏文件
if (
basename.startsWith('.') &&
basename !== '.' &&
basename !== '..' &&
!['.github', '.workflow'].includes(basename)
) {
return
}
if (excludeDirs.includes(basename)) {
return
}
// 当前项目显示
if (prefix === '') {
console.log(`${basename}/`)
} else {
const connector = isLast ? '└── ' : '├── '
const displayName = fs.statSync(dir).isDirectory() ? `${basename}/` : basename
console.log(prefix + connector + displayName)
}
if (!fs.statSync(dir).isDirectory()) {
return
}
try {
const items = fs
.readdirSync(dir)
.filter((item) => !item.startsWith('.') || ['.github', '.workflow'].includes(item))
.filter((item) => !excludeDirs.includes(item))
.sort((a, b) => {
// 目录排在前面,文件排在后面
const aIsDir = fs.statSync(path.join(dir, a)).isDirectory()
const bIsDir = fs.statSync(path.join(dir, b)).isDirectory()
if (aIsDir && !bIsDir) return -1
if (!aIsDir && bIsDir) return 1
return a.localeCompare(b)
})
const newPrefix = prefix + (isLast ? ' ' : '│ ')
items.forEach((item, index) => {
const isLastItem = index === items.length - 1
generateTree(path.join(dir, item), newPrefix, isLastItem, excludeDirs)
})
} catch (error) {
console.error(`Error reading directory: ${dir}`, error.message)
}
}
// 使用示例
const targetDir = process.argv[2] || '.'
console.log('项目文件结构:')
generateTree(targetDir)

View File

@@ -1,150 +0,0 @@
// 业务工具方法
import { LX } from '../../types/global'
export const toNewMusicInfo = (oldMusicInfo: any): LX.Music.MusicInfo => {
const meta: Record<string, any> = {
songId: oldMusicInfo.songmid, // 歌曲IDlocal为文件路径
albumName: oldMusicInfo.albumName, // 歌曲专辑名称
picUrl: oldMusicInfo.img // 歌曲图片链接
}
const newInfo = {
id: `${oldMusicInfo.source}_${oldMusicInfo.songmid}`,
name: oldMusicInfo.name,
singer: oldMusicInfo.singer,
source: oldMusicInfo.source,
interval: oldMusicInfo.interval,
meta: meta as LX.Music.MusicInfoOnline['meta']
}
if (oldMusicInfo.source == 'local') {
meta.filePath = oldMusicInfo.filePath ?? oldMusicInfo.songmid ?? ''
meta.ext = oldMusicInfo.ext ?? /\.(\w+)$/.exec(meta.filePath)?.[1] ?? ''
} else {
meta.qualitys = oldMusicInfo.types
meta._qualitys = oldMusicInfo._types
meta.albumId = oldMusicInfo.albumId
if (meta._qualitys.flac32bit && !meta._qualitys.flac24bit) {
meta._qualitys.flac24bit = meta._qualitys.flac32bit
delete meta._qualitys.flac32bit
meta.qualitys = (meta.qualitys as any[]).map((quality) => {
if (quality.type == 'flac32bit') quality.type = 'flac24bit'
return quality
})
}
switch (oldMusicInfo.source) {
case 'kg':
meta.hash = oldMusicInfo.hash
newInfo.id = oldMusicInfo.songmid + '_' + oldMusicInfo.hash
break
case 'tx':
meta.strMediaMid = oldMusicInfo.strMediaMid
meta.id = oldMusicInfo.songId
meta.albumMid = oldMusicInfo.albumMid
break
case 'mg':
meta.copyrightId = oldMusicInfo.copyrightId
meta.lrcUrl = oldMusicInfo.lrcUrl
meta.mrcUrl = oldMusicInfo.mrcUrl
meta.trcUrl = oldMusicInfo.trcUrl
break
}
}
return newInfo
}
export const toOldMusicInfo = (minfo: LX.Music.MusicInfo) => {
const oInfo: Record<string, any> = {
name: minfo.name,
singer: minfo.singer,
source: minfo.source,
songmid: minfo.meta.songId,
interval: minfo.interval,
albumName: minfo.meta.albumName,
img: minfo.meta.picUrl ?? '',
typeUrl: {}
}
if (minfo.source == 'local') {
oInfo.filePath = minfo.meta.filePath
oInfo.ext = minfo.meta.ext
oInfo.albumId = ''
oInfo.types = []
oInfo._types = {}
} else {
oInfo.albumId = minfo.meta.albumId
oInfo.types = minfo.meta.qualitys
oInfo._types = minfo.meta._qualitys
switch (minfo.source) {
case 'kg':
oInfo.hash = minfo.meta.hash
break
case 'tx':
oInfo.strMediaMid = minfo.meta.strMediaMid
oInfo.albumMid = minfo.meta.albumMid
oInfo.songId = minfo.meta.id
break
case 'mg':
oInfo.copyrightId = minfo.meta.copyrightId
oInfo.lrcUrl = minfo.meta.lrcUrl
oInfo.mrcUrl = minfo.meta.mrcUrl
oInfo.trcUrl = minfo.meta.trcUrl
break
}
}
return oInfo
}
/**
* 修复2.0.0-dev.8之前的新列表数据音质
* @param musicInfo
*/
export const fixNewMusicInfoQuality = (musicInfo: LX.Music.MusicInfo) => {
if (musicInfo.source == 'local') return musicInfo
// @ts-expect-error
if (musicInfo.meta._qualitys.flac32bit && !musicInfo.meta._qualitys.flac24bit) {
// @ts-expect-error
musicInfo.meta._qualitys.flac24bit = musicInfo.meta._qualitys.flac32bit
// @ts-expect-error
delete musicInfo.meta._qualitys.flac32bit
musicInfo.meta.qualitys = musicInfo.meta.qualitys.map((quality) => {
// @ts-expect-error
if (quality.type == 'flac32bit') quality.type = 'flac24bit'
return quality
})
}
return musicInfo
}
export const filterMusicList = <T extends LX.Music.MusicInfo>(list: T[]): T[] => {
const ids = new Set<string>()
return list.filter((s) => {
if (!s.id || ids.has(s.id) || !s.name) return false
if (s.singer == null) s.singer = ''
ids.add(s.id)
return true
})
}
const MAX_NAME_LENGTH = 80
const MAX_FILE_NAME_LENGTH = 150
export const clipNameLength = (name: string) => {
if (name.length <= MAX_NAME_LENGTH || !name.includes('、')) return name
const names = name.split('、')
let newName = names.shift()!
for (const name of names) {
if (newName.length + name.length > MAX_NAME_LENGTH) break
newName = newName + '、' + name
}
return newName
}
export const clipFileNameLength = (name: string) => {
return name.length > MAX_FILE_NAME_LENGTH ? name.substring(0, MAX_FILE_NAME_LENGTH) : name
}

View File

@@ -22,7 +22,7 @@ const UPDATE_API_URL = `${UPDATE_SERVER}/update/${process.platform}/${app.getVer
// Alist API 配置
const ALIST_BASE_URL = 'https://alist.shiqianjiang.cn' // 请替换为实际的 alist 域名
const ALIST_USERNAME = 'ceruupdate'
const ALIST_PASSWORD = '123456'
const ALIST_PASSWORD = '123456' //登录公开的账号密码
// Alist 认证 token
let alistToken: string | null = null

View File

@@ -1,61 +1,19 @@
import { ipcMain, dialog, app } from 'electron'
import { join } from 'path'
import fs from 'fs'
import { promisify } from 'util'
const mkdir = promisify(fs.mkdir)
const access = promisify(fs.access)
export const CONFIG_NAME = 'sqj_config.json'
// 默认目录配置
const getDefaultDirectories = () => {
const userDataPath = app.getPath('userData')
return {
cacheDir: join(userDataPath, 'music-cache'),
downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
}
}
// 确保目录存在
const ensureDirectoryExists = async (dirPath: string) => {
try {
await access(dirPath)
} catch {
await mkdir(dirPath, { recursive: true })
}
}
import { ipcMain, dialog } from 'electron'
import { configManager } from '../services/ConfigManager'
// 获取当前目录配置
ipcMain.handle('directory-settings:get-directories', async () => {
try {
const defaults = getDefaultDirectories()
// 从配置文件读取用户设置的目录
const configPath = join(app.getPath('userData'), CONFIG_NAME)
let userConfig: any = {}
try {
const configData = fs.readFileSync(configPath, 'utf-8')
userConfig = JSON.parse(configData)
} catch {
// 配置文件不存在或读取失败,使用默认配置
}
const directories = {
cacheDir: userConfig.cacheDir || defaults.cacheDir,
downloadDir: userConfig.downloadDir || defaults.downloadDir
}
const directories = configManager.getDirectories()
// 确保目录存在
await ensureDirectoryExists(directories.cacheDir)
await ensureDirectoryExists(directories.downloadDir)
await configManager.ensureDirectoryExists(directories.cacheDir)
await configManager.ensureDirectoryExists(directories.downloadDir)
return directories
} catch (error) {
console.error('获取目录配置失败:', error)
const defaults = getDefaultDirectories()
return defaults
return configManager.getDirectories() // 返回默认配置
}
})
@@ -70,7 +28,7 @@ ipcMain.handle('directory-settings:select-cache-dir', async () => {
if (!result.canceled && result.filePaths.length > 0) {
const selectedPath = result.filePaths[0]
await ensureDirectoryExists(selectedPath)
await configManager.ensureDirectoryExists(selectedPath)
return { success: true, path: selectedPath }
}
@@ -92,7 +50,7 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {
if (!result.canceled && result.filePaths.length > 0) {
const selectedPath = result.filePaths[0]
await ensureDirectoryExists(selectedPath)
await configManager.ensureDirectoryExists(selectedPath)
return { success: true, path: selectedPath }
}
@@ -106,16 +64,8 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {
// 保存目录配置
ipcMain.handle('directory-settings:save-directories', async (_, directories) => {
try {
const configPath = join(app.getPath('userData'), CONFIG_NAME)
// 确保目录存在
await ensureDirectoryExists(directories.cacheDir)
await ensureDirectoryExists(directories.downloadDir)
// 保存配置
fs.writeFileSync(configPath, JSON.stringify(directories, null, 2))
return { success: true, message: '目录配置已保存' }
const success = await configManager.saveDirectories(directories)
return { success, message: success ? '目录配置已保存' : '保存配置失败' }
} catch (error) {
console.error('保存目录配置失败:', error)
return { success: false, message: '保存配置失败' }
@@ -125,21 +75,19 @@ ipcMain.handle('directory-settings:save-directories', async (_, directories) =>
// 重置为默认目录
ipcMain.handle('directory-settings:reset-directories', async () => {
try {
const defaults = getDefaultDirectories()
const configPath = join(app.getPath('userData'), CONFIG_NAME)
// 重置目录配置
configManager.delete('cacheDir')
configManager.delete('downloadDir')
configManager.saveConfig()
// 删除配置文件
try {
fs.unlinkSync(configPath)
} catch {
// 文件不存在,忽略错误
}
// 获取默认目录
const directories = configManager.getDirectories()
// 确保默认目录存在
await ensureDirectoryExists(defaults.cacheDir)
await ensureDirectoryExists(defaults.downloadDir)
await configManager.ensureDirectoryExists(directories.cacheDir)
await configManager.ensureDirectoryExists(directories.downloadDir)
return { success: true, directories: defaults }
return { success: true, directories }
} catch (error) {
console.error('重置目录配置失败:', error)
return { success: false, message: '重置配置失败' }
@@ -161,6 +109,9 @@ ipcMain.handle('directory-settings:open-directory', async (_, dirPath) => {
// 获取目录大小
ipcMain.handle('directory-settings:get-directory-size', async (_, dirPath) => {
try {
const fs = require('fs')
const { join } = require('path')
const getDirectorySize = (dirPath: string): number => {
let totalSize = 0

View File

@@ -0,0 +1,161 @@
/*
* Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
*
* This software is the confidential and proprietary information of 时迁酱.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* @author 时迁酱无聊的霜霜Star
* @since 2025-9-20
* @version 1.0
*/
import { BrowserWindow } from 'electron'
export interface PluginNoticeData {
type: 'error' | 'info' | 'success' | 'warn' | 'update'
data: {
title?: string
content?: string
message?: string
url?: string
version?: string
pluginInfo?: {
name?: string
type?: 'lx' | 'cr'
forcedUpdate?: boolean
}
}
currentVersion?: string
timestamp?: number
pluginName?: string
}
export interface DialogNotice {
type: string
data: any
timestamp: number
pluginName: string
dialogType: 'update' | 'info' | 'error' | 'warning' | 'success'
title: string
message: string
updateUrl?: string
pluginType?: 'lx' | 'cr'
currentVersion?: string
newVersion?: string
actions: Array<{
text: string
type: 'cancel' | 'update' | 'confirm'
primary?: boolean
}>
}
/**
* 验证 URL 是否有效
*/
function isValidUrl(url: string): boolean {
try {
const urlObj = new URL(url)
return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
} catch {
return false
}
}
/**
* 根据通知类型获取标题
*/
function getNoticeTitle(type: string): string {
const titleMap: Record<string, string> = {
update: '插件更新',
error: '插件错误',
warning: '插件警告',
info: '插件信息',
success: '操作成功'
}
return titleMap[type] || '插件通知'
}
/**
* 根据通知类型获取默认消息
*/
function getDefaultMessage(type: string, data: any, pluginName: string): string {
switch (type) {
case 'error':
return `插件 "${pluginName}" 发生错误: ${data?.error || data?.message || '未知错误'}`
case 'warning':
return `插件 "${pluginName}" 警告: ${data?.warning || data?.message || '需要注意'}`
case 'success':
return `插件 "${pluginName}" 操作成功: ${data?.message || ''}`
case 'info':
default:
return data?.message || `插件 "${pluginName}" 信息: ${JSON.stringify(data)}`
}
}
/**
* 发送插件通知到渲染进程
*/
export function sendPluginNotice(noticeData: PluginNoticeData, pluginName?: string): void {
try {
console.log(`[CeruMusic] 插件通知: ${noticeData.type}`, noticeData.data)
// 获取主窗口实例
const mainWindow = BrowserWindow.getAllWindows().find((win) => !win.isDestroyed())
if (!mainWindow) {
console.warn('[CeruMusic] 未找到主窗口,无法发送通知')
return
}
// 构建通知数据
const baseNoticeData = {
type: noticeData.type,
data: noticeData.data,
timestamp: noticeData.timestamp || Date.now(),
pluginName: pluginName || noticeData.pluginName || 'Unknown Plugin'
}
// 根据通知类型处理不同的逻辑
if (noticeData.type === 'update' && noticeData.data?.url && isValidUrl(noticeData.data.url)) {
// 更新通知 - 显示带更新按钮的对话框
const updateNotice: DialogNotice = {
...baseNoticeData,
dialogType: 'update',
title: noticeData.data.title || '插件更新',
message: noticeData.data.content || `插件 "${baseNoticeData.pluginName}" 有新版本可用`,
updateUrl: noticeData.data.url,
pluginType: noticeData.data.pluginInfo?.type,
currentVersion: noticeData.currentVersion || '未知', // 这个需要从插件实例获取
newVersion: noticeData.data.version,
actions: [
{ text: '稍后更新', type: 'cancel' },
{ text: '立即更新', type: 'update', primary: true }
]
}
mainWindow.webContents.send('plugin-notice', updateNotice)
} else {
// 普通通知 - 显示信息对话框
const infoNotice: DialogNotice = {
...baseNoticeData,
dialogType:
noticeData.type === 'error'
? 'error'
: noticeData.type === 'warn'
? 'warning'
: noticeData.type === 'success'
? 'success'
: 'info',
title: noticeData.data.title || getNoticeTitle(noticeData.type),
message:
noticeData.data.message ||
noticeData.data.content ||
getDefaultMessage(noticeData.type, noticeData.data, baseNoticeData.pluginName),
actions: [{ text: '我知道了', type: 'confirm', primary: true }]
}
mainWindow.webContents.send('plugin-notice', infoNotice)
}
} catch (error: any) {
console.error('[CeruMusic] 发送插件通知失败:', error.message)
}
}

View File

@@ -1,4 +1,5 @@
import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
import { app, shell, BrowserWindow, ipcMain, Tray, Menu, screen } from 'electron'
import { configManager } from './services/ConfigManager'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/logo.png?asset'
@@ -89,20 +90,27 @@ function createTray(): void {
function createWindow(): void {
// return
// Create the browser window.
mainWindow = new BrowserWindow({
// 获取保存的窗口位置和大小
const savedBounds = configManager.getWindowBounds()
// 获取屏幕尺寸
const primaryDisplay = screen.getPrimaryDisplay()
// 使用完整屏幕尺寸而不是工作区域,以支持真正的全屏模式
const { width: screenWidth, height: screenHeight } = primaryDisplay.size
// 默认窗口配置
const defaultOptions = {
width: 1100,
height: 750,
minWidth: 1100,
minHeight: 670,
maxWidth: screenWidth,
maxHeight: screenHeight,
show: false,
center: true,
center: !savedBounds, // 如果有保存的位置,则不居中
autoHideMenuBar: true,
// alwaysOnTop: true,
// 移除最大宽高限制,以便全屏模式能够铺满整个屏幕
titleBarStyle: 'hidden',
titleBarStyle: 'hidden' as const,
...(process.platform === 'linux' ? { icon } : {}),
// ...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {}),
icon: path.join(__dirname, '../../resources/logo.ico'),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
@@ -112,9 +120,57 @@ function createWindow(): void {
contextIsolation: false,
backgroundThrottling: false
}
})
}
// 如果有保存的窗口位置和大小,则使用保存的值
if (savedBounds) {
Object.assign(defaultOptions, savedBounds)
}
// Create the browser window.
mainWindow = new BrowserWindow(defaultOptions)
if (process.platform == 'darwin') mainWindow.setWindowButtonVisibility(false)
// 监听窗口移动和调整大小事件,保存窗口位置和大小
mainWindow.on('moved', () => {
if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
const bounds = mainWindow.getBounds()
configManager.saveWindowBounds(bounds)
}
})
mainWindow.on('resized', () => {
if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
const bounds = mainWindow.getBounds()
// 获取当前屏幕尺寸
const { screen } = require('electron')
const currentDisplay = screen.getDisplayMatching(bounds)
const { width: screenWidth, height: screenHeight } = currentDisplay.workAreaSize
// 确保窗口不超过屏幕尺寸
let needResize = false
const newBounds = { ...bounds }
if (bounds.width > screenWidth) {
newBounds.width = screenWidth
needResize = true
}
if (bounds.height > screenHeight) {
newBounds.height = screenHeight
needResize = true
}
// 如果需要调整大小,应用新的尺寸
if (needResize) {
mainWindow.setBounds(newBounds)
}
configManager.saveWindowBounds(newBounds)
}
})
mainWindow.on('ready-to-show', () => {
mainWindow?.show()
})
@@ -218,6 +274,7 @@ aiEvents(mainWindow)
import './events/musicCache'
import './events/songList'
import './events/directorySettings'
import './events/pluginNotice'
import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/autoUpdate'
// This method will be called when Electron has finished

View File

@@ -0,0 +1,162 @@
import { app } from 'electron'
import { join } from 'path'
import fs from 'fs'
import { promisify } from 'util'
const mkdir = promisify(fs.mkdir)
const access = promisify(fs.access)
export const CONFIG_NAME = 'sqj_config.json'
// 配置管理器类
export class ConfigManager {
private static instance: ConfigManager
private configPath: string
private config: Record<string, any> = {}
private constructor() {
this.configPath = join(app.getPath('userData'), CONFIG_NAME)
this.loadConfig()
}
// 单例模式获取实例
public static getInstance(): ConfigManager {
if (!ConfigManager.instance) {
ConfigManager.instance = new ConfigManager()
}
return ConfigManager.instance
}
// 加载配置
private loadConfig(): void {
try {
if (fs.existsSync(this.configPath)) {
const configData = fs.readFileSync(this.configPath, 'utf-8')
this.config = JSON.parse(configData)
}
} catch (error) {
console.error('加载配置失败:', error)
this.config = {}
}
}
// 保存配置
public saveConfig(): boolean {
try {
fs.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2))
return true
} catch (error) {
console.error('保存配置失败:', error)
return false
}
}
// 获取配置项
public get<T>(key: string, defaultValue?: T): T {
const value = this.config[key]
return value !== undefined ? value : (defaultValue as T)
}
// 设置配置项
public set<T>(key: string, value: T): void {
this.config[key] = value
}
// 删除配置项
public delete(key: string): void {
delete this.config[key]
}
// 重置所有配置
public reset(): void {
this.config = {}
this.saveConfig()
}
// 获取所有配置
public getAll(): Record<string, any> {
return { ...this.config }
}
// 确保目录存在
public async ensureDirectoryExists(dirPath: string): Promise<void> {
try {
await access(dirPath)
} catch {
await mkdir(dirPath, { recursive: true })
}
}
// 获取目录配置
public getDirectories() {
const userDataPath = app.getPath('userData')
const defaults = {
cacheDir: join(userDataPath, 'music-cache'),
downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
}
return {
cacheDir: this.get('cacheDir', defaults.cacheDir),
downloadDir: this.get('downloadDir', defaults.downloadDir)
}
}
// 保存目录配置
public async saveDirectories(directories: {
cacheDir: string
downloadDir: string
}): Promise<boolean> {
try {
await this.ensureDirectoryExists(directories.cacheDir)
await this.ensureDirectoryExists(directories.downloadDir)
this.set('cacheDir', directories.cacheDir)
this.set('downloadDir', directories.downloadDir)
return this.saveConfig()
} catch (error) {
console.error('保存目录配置失败:', error)
return false
}
}
// 保存窗口位置和大小
public saveWindowBounds(bounds: { x: number; y: number; width: number; height: number }): void {
this.set('windowBounds', bounds)
this.saveConfig()
}
// 获取窗口位置和大小,确保窗口完全在屏幕内
public getWindowBounds(): { x: number; y: number; width: number; height: number } | null {
const bounds = this.get<{ x: number; y: number; width: number; height: number } | null>(
'windowBounds',
null
)
if (bounds) {
const { screen } = require('electron')
// 获取主显示器
const primaryDisplay = screen.getPrimaryDisplay()
const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize
// 确保窗口在屏幕内
if (bounds.x < 0) bounds.x = 0
if (bounds.y < 0) bounds.y = 0
// 确保窗口右侧不超出屏幕
if (bounds.x + bounds.width > screenWidth) {
bounds.x = Math.max(0, screenWidth - bounds.width)
}
// 确保窗口底部不超出屏幕
if (bounds.y + bounds.height > screenHeight) {
bounds.y = Math.max(0, screenHeight - bounds.height)
}
}
return bounds
}
}
// 导出单例实例
export const configManager = ConfigManager.getInstance()

View File

@@ -1,9 +1,8 @@
import { app } from 'electron'
import * as path from 'path'
import * as fs from 'fs/promises'
import * as crypto from 'crypto'
import axios from 'axios'
import { CONFIG_NAME } from '../../events/directorySettings'
import { configManager } from '../ConfigManager'
export class MusicCacheService {
private cacheIndex: Map<string, string> = new Map()
@@ -13,21 +12,9 @@ export class MusicCacheService {
}
private getCacheDirectory(): string {
try {
// 尝试从配置文件读取自定义缓存目录
const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
const configData = require('fs').readFileSync(configPath, 'utf-8')
const config = JSON.parse(configData)
if (config.cacheDir && typeof config.cacheDir === 'string') {
return config.cacheDir
}
} catch {
// 配置文件不存在或读取失败,使用默认目录
}
// 默认缓存目录
return path.join(app.getPath('userData'), 'music-cache')
// 使用配置管理服务获取缓存目录
const directories = configManager.getDirectories()
return directories.cacheDir
}
// 动态获取缓存目录
@@ -82,9 +69,9 @@ export class MusicCacheService {
return path.join(this.cacheDir, `${cacheKey}${ext}`)
}
async getCachedMusicUrl(songId: string, originalUrlPromise: Promise<string>): Promise<string> {
async getCachedMusicUrl(songId: string): Promise<string | null> {
const cacheKey = this.generateCacheKey(songId)
console.log('hash', cacheKey)
console.log('检查缓存 hash:', cacheKey)
// 检查是否已缓存
if (this.cacheIndex.has(cacheKey)) {
@@ -97,14 +84,29 @@ export class MusicCacheService {
return `file://${cachedFilePath}`
} catch (error) {
// 文件不存在,从缓存索引中移除
console.warn(`缓存文件不存在,移除索引: ${cachedFilePath}`)
this.cacheIndex.delete(cacheKey)
await this.saveCacheIndex()
}
}
// 下载并缓存文件 先返回源链接不等待结果优化体验
this.downloadAndCache(songId, await originalUrlPromise, cacheKey)
return await originalUrlPromise
return null
}
async cacheMusic(songId: string, url: string): Promise<void> {
const cacheKey = this.generateCacheKey(songId)
// 如果已经缓存,跳过
if (this.cacheIndex.has(cacheKey)) {
return
}
try {
await this.downloadAndCache(songId, url, cacheKey)
} catch (error) {
console.error(`缓存歌曲失败: ${songId}`, error)
throw error
}
}
private async downloadAndCache(songId: string, url: string, cacheKey: string): Promise<string> {

View File

@@ -18,11 +18,417 @@ import fsPromise from 'fs/promises'
import axios from 'axios'
import { pipeline } from 'node:stream/promises'
import { fileURLToPath } from 'url'
import { app } from 'electron'
import { CONFIG_NAME } from '../../events/directorySettings'
import { configManager } from '../ConfigManager'
import NodeID3 from 'node-id3'
import ffmpegStatic from 'ffmpeg-static'
import ffmpeg from 'fluent-ffmpeg'
const fileLock: Record<string, boolean> = {}
/**
* 转换LRC格式
* 将带有字符位置信息的LRC格式转换为标准的逐字时间戳格式
* @param lrcContent 原始LRC内容
* @returns 转换后的LRC内容
*/
function convertLrcFormat(lrcContent: string): string {
if (!lrcContent) return ''
const lines = lrcContent.split('\n')
const convertedLines: string[] = []
for (const line of lines) {
// 跳过空行
if (!line.trim()) {
convertedLines.push(line)
continue
}
// 检查是否是新格式:[开始时间,持续时间](开始时间,字符持续时间,0)字符
const newFormatMatch = line.match(/^\[(\d+),(\d+)\](.*)$/)
if (newFormatMatch) {
const [, startTimeMs, , content] = newFormatMatch
const convertedLine = convertNewFormat(parseInt(startTimeMs), content)
convertedLines.push(convertedLine)
continue
}
// 检查是否是旧格式:[mm:ss.xxx]字符(偏移,持续时间)
const oldFormatMatch = line.match(/^\[(\d{2}:\d{2}\.\d{3})\](.*)$/)
if (oldFormatMatch) {
const [, timestamp, content] = oldFormatMatch
// 如果内容中没有位置信息,直接返回原行
if (!content.includes('(') || !content.includes(')')) {
convertedLines.push(line)
continue
}
const convertedLine = convertOldFormat(timestamp, content)
convertedLines.push(convertedLine)
continue
}
// 其他行直接保留
convertedLines.push(line)
}
return convertedLines.join('\n')
}
/**
* 将毫秒时间戳格式化为 mm:ss.xxx 格式
* @param timeMs 毫秒时间戳
* @returns 格式化的时间字符串
*/
function formatTimestamp(timeMs: number): string {
const minutes = Math.floor(timeMs / 60000)
const seconds = Math.floor((timeMs % 60000) / 1000)
const milliseconds = timeMs % 1000
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`
}
/**
* 转换新格式:[开始时间,持续时间](开始时间,字符持续时间,0)字符
*/
function convertNewFormat(baseTimeMs: number, content: string): string {
const baseTimestamp = formatTimestamp(baseTimeMs)
let convertedContent = `<${baseTimestamp}>`
// 匹配模式:(开始时间,字符持续时间,0)字符
const charPattern = /\((\d+),(\d+),(\d+)\)([^(]*?)(?=\(|$)/g
let match
let isFirstChar = true
while ((match = charPattern.exec(content)) !== null) {
const [, charStartMs, , , char] = match
const charTimeMs = parseInt(charStartMs)
const charTimestamp = formatTimestamp(charTimeMs)
if (isFirstChar) {
// 第一个字符直接添加
convertedContent += char.trim()
isFirstChar = false
} else {
convertedContent += `<${charTimestamp}>${char.trim()}`
}
}
return `[${baseTimestamp}]${convertedContent}`
}
/**
* 转换旧格式:[mm:ss.xxx]字符(偏移,持续时间)
*/
function convertOldFormat(timestamp: string, content: string): string {
// 解析基础时间戳(毫秒)
const [minutes, seconds] = timestamp.split(':')
const [sec, ms] = seconds.split('.')
const baseTimeMs = parseInt(minutes) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(ms)
let convertedContent = `<${timestamp}>`
// 匹配所有字符(偏移,持续时间)的模式
const charPattern = /([^()]+)\((\d+),(\d+)\)/g
let match
let lastIndex = 0
let isFirstChar = true
while ((match = charPattern.exec(content)) !== null) {
const [fullMatch, char, offsetMs, _durationMs] = match
const charTimeMs = baseTimeMs + parseInt(offsetMs)
const charTimestamp = formatTimestamp(charTimeMs)
// 添加匹配前的普通文本
if (match.index > lastIndex) {
const beforeText = content.substring(lastIndex, match.index)
if (beforeText.trim()) {
convertedContent += beforeText
}
}
// 添加带时间戳的字符
if (isFirstChar) {
// 第一个字符直接添加,不需要额外的时间戳
convertedContent += char
isFirstChar = false
} else {
convertedContent += `<${charTimestamp}>${char}`
}
lastIndex = match.index + fullMatch.length
}
// 添加剩余的普通文本
if (lastIndex < content.length) {
const remainingText = content.substring(lastIndex)
if (remainingText.trim()) {
convertedContent += remainingText
}
}
return `[${timestamp}]${convertedContent}`
}
// 写入音频标签的辅助函数
async function writeAudioTags(filePath: string, songInfo: any, tagWriteOptions: any) {
try {
console.log('开始写入音频标签:', filePath, tagWriteOptions, songInfo)
// 获取文件扩展名来判断格式
const fileExtension = path.extname(filePath).toLowerCase().substring(1)
console.log('文件格式:', fileExtension)
// 根据文件格式选择不同的标签写入方法
if (fileExtension === 'mp3') {
await writeMP3Tags(filePath, songInfo, tagWriteOptions)
} else if (['flac', 'ogg', 'opus'].includes(fileExtension)) {
await writeVorbisCommentTags(filePath, songInfo, tagWriteOptions)
} else if (['m4a', 'mp4', 'aac'].includes(fileExtension)) {
await writeMP4Tags(filePath, songInfo, tagWriteOptions)
} else {
console.warn('不支持的音频格式:', fileExtension)
// 尝试使用 NodeID3 作为后备方案
await writeMP3Tags(filePath, songInfo, tagWriteOptions)
}
} catch (error) {
console.error('写入音频标签时发生错误:', error)
throw error
}
}
// MP3 格式标签写入
async function writeMP3Tags(filePath: string, songInfo: any, tagWriteOptions: any) {
const tags: any = {}
// 写入基础信息
if (tagWriteOptions.basicInfo) {
tags.title = songInfo.name || ''
tags.artist = songInfo.singer || ''
tags.album = songInfo.albumName || ''
tags.year = songInfo.year || ''
tags.genre = songInfo.genre || ''
}
// 写入歌词
if (tagWriteOptions.lyrics && songInfo.lrc) {
const convertedLrc = convertLrcFormat(songInfo.lrc)
tags.unsynchronisedLyrics = {
language: 'chi',
shortText: 'Lyrics',
text: convertedLrc
}
}
// 写入封面
if (tagWriteOptions.cover && songInfo.img) {
try {
const coverResponse = await axios({
method: 'GET',
url: songInfo.img,
responseType: 'arraybuffer',
timeout: 10000
})
if (coverResponse.data) {
tags.image = {
mime: 'image/jpeg',
type: {
id: 3,
name: 'front cover'
},
description: 'Cover',
imageBuffer: Buffer.from(coverResponse.data)
}
}
} catch (coverError) {
console.warn('获取封面失败:', coverError)
}
}
// 写入标签到文件
if (Object.keys(tags).length > 0) {
const success = NodeID3.write(tags, filePath)
if (success) {
console.log('MP3音频标签写入成功:', filePath)
} else {
console.warn('MP3音频标签写入失败:', filePath)
}
}
}
// FLAC/OGG 格式标签写入 (使用 Vorbis Comment)
async function writeVorbisCommentTags(filePath: string, songInfo: any, tagWriteOptions: any) {
try {
console.log('开始写入 FLAC 标签:', filePath)
// 准备新的标签数据
const newTags: any = {}
// 写入基础信息
if (tagWriteOptions.basicInfo) {
if (songInfo.name) newTags.TITLE = songInfo.name
if (songInfo.singer) newTags.ARTIST = songInfo.singer
if (songInfo.albumName) newTags.ALBUM = songInfo.albumName
if (songInfo.year) newTags.DATE = songInfo.year.toString()
if (songInfo.genre) newTags.GENRE = songInfo.genre
}
// 写入歌词
if (tagWriteOptions.lyrics && songInfo.lrc) {
const convertedLrc = convertLrcFormat(songInfo.lrc)
newTags.LYRICS = convertedLrc
}
console.log('准备写入的标签:', newTags)
// 使用 ffmpeg-static 写入 FLAC 标签
if (path.extname(filePath).toLowerCase() === '.flac') {
await writeFLACTagsWithFFmpeg(filePath, newTags, songInfo, tagWriteOptions)
} else {
console.warn('暂不支持该格式的标签写入:', path.extname(filePath))
}
} catch (error) {
console.error('写入 Vorbis Comment 标签失败:', error)
throw error
}
}
// 使用 fluent-ffmpeg 写入 FLAC 标签
async function writeFLACTagsWithFFmpeg(
filePath: string,
tags: any,
songInfo: any,
tagWriteOptions: any
) {
let tempOutputPath: string | null = null
let tempCoverPath: string | null = null
try {
if (!ffmpegStatic) {
throw new Error('ffmpeg-static 不可用')
}
ffmpeg.setFfmpegPath(ffmpegStatic.replace('app.asar', 'app.asar.unpacked'))
// 创建临时输出文件
tempOutputPath = filePath + '.temp.flac'
// 创建 fluent-ffmpeg 实例
let command = ffmpeg(filePath)
.audioCodec('copy') // 复制音频编解码器,不重新编码
.output(tempOutputPath)
// 添加元数据标签
for (const [key, value] of Object.entries(tags)) {
if (value) {
// fluent-ffmpeg 会自动处理特殊字符转义
command = command.outputOptions(['-metadata', `${key}=${value}`])
}
}
// 处理封面
if (tagWriteOptions.cover && songInfo.img) {
try {
console.log('开始下载封面:', songInfo.img)
const coverResponse = await axios({
method: 'GET',
url: songInfo.img,
responseType: 'arraybuffer',
timeout: 10000
})
if (coverResponse.data) {
// 保存临时封面文件
tempCoverPath = path.join(path.dirname(filePath), 'temp_cover.jpg')
await fsPromise.writeFile(tempCoverPath, Buffer.from(coverResponse.data))
// 添加封面作为输入
command = command.input(tempCoverPath).outputOptions([
'-map',
'0:a', // 映射原始文件的音频流
'-map',
'1:v', // 映射封面的视频流
'-c:v',
'copy', // 复制视频编解码器
'-disposition:v:0',
'attached_pic' // 设置为附加图片
])
console.log('封面已添加到命令中')
}
} catch (coverError) {
console.warn(
'下载封面失败,跳过封面写入:',
coverError instanceof Error ? coverError.message : coverError
)
}
}
// 执行 ffmpeg 命令
await new Promise<void>((resolve, reject) => {
command
.on('start', () => {
console.log('执行 ffmpeg 命令')
})
.on('progress', (progress) => {
if (progress.percent) {
console.log('处理进度:', Math.round(progress.percent) + '%')
}
})
.on('end', () => {
console.log('ffmpeg 处理完成')
resolve()
})
.on('error', (err, _, stderr) => {
console.error('ffmpeg 错误:', err.message)
if (stderr) {
console.error('ffmpeg stderr:', stderr)
}
reject(new Error(`ffmpeg 处理失败: ${err.message}`))
})
.run()
})
// 检查临时文件是否创建成功
if (!fs.existsSync(tempOutputPath)) {
throw new Error('ffmpeg 未能创建输出文件')
}
// 替换原文件
await fsPromise.rename(tempOutputPath, filePath)
tempOutputPath = null // 标记已处理,避免重复清理
console.log('使用 fluent-ffmpeg 写入 FLAC 标签成功:', filePath)
} catch (error) {
console.error('使用 fluent-ffmpeg 写入 FLAC 标签失败:', error)
throw error
} finally {
// 清理所有临时文件
const filesToClean = [tempOutputPath, tempCoverPath].filter(Boolean) as string[]
for (const tempFile of filesToClean) {
try {
if (fs.existsSync(tempFile)) {
await fsPromise.unlink(tempFile)
console.log('已清理临时文件:', tempFile)
}
} catch (cleanupError) {
console.warn(
'清理临时文件失败:',
tempFile,
cleanupError instanceof Error ? cleanupError.message : cleanupError
)
}
}
}
}
// MP4/M4A 格式标签写入
async function writeMP4Tags(filePath: string, _songInfo: any, _tagWriteOptions: any) {
console.log('MP4/M4A 格式标签写入暂未实现:', filePath)
// 可以使用 ffmpeg 或其他工具实现
}
function main(source: string) {
const Api = musicSdk[source]
return {
@@ -35,21 +441,23 @@ function main(source: string) {
const usePlugin = pluginService.getPluginById(pluginId)
if (!pluginId || !usePlugin) return { error: '请配置音源来播放歌曲' }
// 获取原始URL
const originalUrlPromise = usePlugin.getMusicUrl(source, songInfo, quality)
// 生成歌曲唯一标识
const songId = `${songInfo.name}-${songInfo.singer}-${source}-${quality}`
// 尝试获取缓存的URL
try {
const cachedUrl = await musicCacheService.getCachedMusicUrl(songId, originalUrlPromise)
// 先检查缓存
const cachedUrl = await musicCacheService.getCachedMusicUrl(songId)
if (cachedUrl) {
return cachedUrl
} catch (cacheError) {
console.warn('缓存获取失败使用原始URL:', cacheError)
const originalUrl = await originalUrlPromise
return originalUrl
}
// 没有缓存时才发起网络请求
const originalUrl = await usePlugin.getMusicUrl(source, songInfo, quality)
// 异步缓存,不阻塞返回
musicCacheService.cacheMusic(songId, originalUrl).catch((error) => {
console.warn('缓存歌曲失败:', error)
})
return originalUrl
} catch (e: any) {
return {
error: '获取歌曲失败 ' + e.error || e
@@ -83,29 +491,27 @@ function main(source: string) {
},
async getPlaylistDetail({ id, page }: GetSongListDetailsArg) {
// 酷狗音乐特殊处理直接调用getUserListDetail
if (source === 'kg' && /https?:\/\//.test(id)) {
return (await Api.songList.getUserListDetail(id, page)) as PlaylistDetailResult
}
return (await Api.songList.getListDetail(id, page)) as PlaylistDetailResult
},
async downloadSingleSong({ pluginId, songInfo, quality }: DownloadSingleSongArgs) {
async downloadSingleSong({
pluginId,
songInfo,
quality,
tagWriteOptions
}: DownloadSingleSongArgs) {
const url = await this.getMusicUrl({ pluginId, songInfo, quality })
if (typeof url === 'object') throw new Error('无法获取歌曲链接')
// 获取自定义下载目录
const getDownloadDirectory = (): string => {
try {
const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
const configData = fs.readFileSync(configPath, 'utf-8')
const config = JSON.parse(configData)
if (config.downloadDir && typeof config.downloadDir === 'string') {
return config.downloadDir
}
} catch {
// 配置文件不存在或读取失败,使用默认目录
}
// 默认下载目录
return path.join(app.getPath('music'), 'CeruMusic/songs')
// 使用配置管理服务获取下载目录
const directories = configManager.getDirectories()
return directories.downloadDir
}
// 从URL中提取文件扩展名如果没有则默认为mp3
@@ -173,6 +579,16 @@ function main(source: string) {
delete fileLock[songPath]
}
// 写入标签信息
if (tagWriteOptions && fs.existsSync(songPath)) {
try {
await writeAudioTags(songPath, songInfo, tagWriteOptions)
} catch (error) {
console.warn('写入音频标签失败:', error)
throw ffmpegStatic
}
}
return {
message: '下载成功',
path: songPath

View File

@@ -90,6 +90,13 @@ export interface PlaylistDetailResult {
info: PlaylistInfo
}
export interface TagWriteOptions {
basicInfo?: boolean
cover?: boolean
lyrics?: boolean
}
export interface DownloadSingleSongArgs extends GetMusicUrlArg {
path?: string
tagWriteOptions?: TagWriteOptions
}

View File

@@ -1,9 +1,30 @@
/*
* Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
*
* This software is the confidential and proprietary information of 时迁酱.
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* @author 时迁酱无聊的霜霜Star
* @since 2025-9-19
* @version 1.0
*/
import * as vm from 'vm'
import fetch from 'node-fetch'
import * as fs from 'fs'
import { MusicItem } from '../../musicSdk/type'
import { sendPluginNotice } from '../../../events/pluginNotice'
// 定义插件结构接口
// ==================== 常量定义 ====================
const CONSTANTS = {
DEFAULT_TIMEOUT: 10000, // 10秒超时
API_VERSION: '1.0.3',
ENVIRONMENT: 'nodejs',
NOTICE_DELAY: 100, // 通知延迟时间
LOG_PREFIX: '[CeruMusic]'
} as const
// ==================== 类型定义 ====================
export interface PluginInfo {
name: string
version: string
@@ -33,7 +54,7 @@ interface MusicInfo extends MusicItem {
interface RequestResult {
body: any
statusCode: number
headers: Record<string, string[]>
headers: Record<string, string>
}
interface CeruMusicApiUtils {
@@ -52,12 +73,26 @@ interface CeruMusicApi {
options?: RequestOptions | RequestCallback,
callback?: RequestCallback
) => Promise<RequestResult> | void
NoticeCenter: (
type: 'error' | 'info' | 'success' | 'warn' | 'update',
data: {
title: string
content?: string
url?: string
version?: string
pluginInfo: {
name?: string // 插件名
type: 'lx' | 'cr' //插件类型
}
}
) => void
}
type RequestOptions = {
method?: string
headers?: Record<string, string>
body?: any
timeout?: number
[key: string]: any
}
@@ -66,8 +101,21 @@ type RequestCallback = (error: Error | null, result: RequestResult | null) => vo
type Logger = {
log: (...args: any[]) => void
error: (...args: any[]) => void
warn?: (...args: any[]) => void
info?: (...args: any[]) => void
warn: (...args: any[]) => void
info: (...args: any[]) => void
}
type PluginMethodName = 'musicUrl' | 'getPic' | 'getLyric'
// ==================== 错误类定义 ====================
class PluginError extends Error {
constructor(
message: string,
public readonly method?: string
) {
super(message)
this.name = 'PluginError'
}
}
/**
@@ -85,160 +133,27 @@ class CeruMusicPluginHost {
*/
constructor(pluginCode: string | null = null, logger: Logger = console) {
this.pluginCode = pluginCode
this.plugin = null // 存储插件导出的对象
this.plugin = null
if (pluginCode) {
this._initialize(logger)
}
}
// ==================== 公共方法 ====================
/**
* 从文件加载插件
* @param pluginPath 插件文件路径
* @param logger 日志记录器
*/
async loadPlugin(pluginPath: string, logger: Logger = console): Promise<CeruMusicPlugin> {
this.pluginCode = fs.readFileSync(pluginPath, 'utf-8')
this._initialize(logger)
return this.plugin as CeruMusicPlugin
}
/**
* 初始化沙箱环境,加载并验证插件
* @private
*/
_initialize(console: Logger): void {
// 提供给插件的API
const cerumusicApi: CeruMusicApi = {
env: 'nodejs',
version: '1.0.0',
utils: {
buffer: {
from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
if (typeof data === 'string') {
return Buffer.from(data, encoding)
} else if (data instanceof Buffer) {
return data
} else if (data instanceof ArrayBuffer) {
return Buffer.from(new Uint8Array(data))
} else {
return Buffer.from(data as any)
}
},
bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
}
},
request: (url, options, callback) => {
// 支持 Promise 和 callback 两种调用方式
if (typeof options === 'function') {
callback = options as RequestCallback
options = { method: 'GET' }
}
const makeRequest = async (): Promise<RequestResult> => {
try {
console.log(`[CeruMusic] 发起请求: ${url}`)
// 添加超时设置
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 10000) // 10秒超时
const requestOptions = {
method: 'GET',
...(options as RequestOptions),
signal: controller.signal
}
const response = await fetch(url, requestOptions)
clearTimeout(timeoutId)
console.log(`[CeruMusic] 请求响应状态: ${response.status}`)
// 尝试解析JSON如果失败则返回文本
let body: any
try {
body = await response.json()
} catch (parseError: any) {
console.error(`[CeruMusic] 解析响应失败: ${parseError.message}`)
// 解析失败时创建错误body
body = {
code: response.status,
msg: `Failed to parse response: ${parseError.message}`
}
}
console.log(`[CeruMusic] 请求响应内容:`, body)
const result: RequestResult = {
body,
statusCode: response.status,
headers: response.headers.raw()
}
if (callback) {
callback(null, result)
}
return result
} catch (error: any) {
console.error(`[CeruMusic] Request failed: ${error.message}`)
if (callback) {
// 网络错误时,调用 callback(error, null)
callback(error, null)
// 需要返回一个值以满足 Promise<RequestResult> 类型
return {
body: { error: error.message },
statusCode: 500,
headers: {}
}
} else {
throw error
}
}
}
if (callback) {
makeRequest().catch((error) => {
console.error(`[CeruMusic] Unhandled request error in callback mode: ${error.message}`)
}) // 确保错误被正确处理
return undefined
} else {
return makeRequest()
}
}
}
const sandbox = {
module: { exports: {} },
cerumusic: cerumusicApi,
console: console,
setTimeout: setTimeout,
clearTimeout: clearTimeout,
setInterval: setInterval,
clearInterval: clearInterval,
Buffer: Buffer,
JSON: JSON,
require: () => ({}),
global: {},
process: { env: {} }
}
try {
// 在沙箱中执行插件代码
if (this.pluginCode) {
vm.runInNewContext(this.pluginCode, sandbox)
this.plugin = sandbox.module.exports as CeruMusicPlugin
console.log(`[CeruMusic] Plugin "${this.plugin.pluginInfo.name}" loaded successfully.`)
} else {
throw new Error('No plugin code provided.')
}
} catch (e: any) {
console.error('[CeruMusic] Error executing plugin code:', e)
throw new Error('Failed to initialize plugin.')
}
// 验证插件结构
if (!this.plugin?.pluginInfo || !this.plugin.sources || !this.plugin.musicUrl) {
throw new Error('Invalid plugin structure. Required fields: pluginInfo, sources, musicUrl.')
this.pluginCode = fs.readFileSync(pluginPath, 'utf-8')
this._initialize(logger)
return this.plugin as CeruMusicPlugin
} catch (error: any) {
throw new PluginError(`无法加载插件 ${pluginPath}: ${error.message}`)
}
}
@@ -246,10 +161,8 @@ class CeruMusicPluginHost {
* 获取插件信息
*/
getPluginInfo(): PluginInfo {
if (!this.plugin) {
throw new Error('Plugin not initialized')
}
return this.plugin.pluginInfo
this._ensurePluginInitialized()
return this.plugin!.pluginInfo
}
/**
@@ -263,10 +176,8 @@ class CeruMusicPluginHost {
* 获取支持的音源和音质信息
*/
getSupportedSources(): PluginSource[] {
if (!this.plugin) {
throw new Error('Plugin not initialized')
}
return this.plugin.sources
this._ensurePluginInitialized()
return this.plugin!.sources
}
/**
@@ -276,148 +187,7 @@ class CeruMusicPluginHost {
* @param quality 音质
*/
async getMusicUrl(source: string, musicInfo: MusicInfo, quality: string): Promise<string> {
try {
if (!this.plugin || typeof this.plugin.musicUrl !== 'function') {
throw new Error(`Action "musicUrl" is not implemented in plugin.`)
}
console.log(`[CeruMusic] 开始调用插件的 musicUrl 方法...`)
// 将 cerumusic API 绑定到函数调用的 this 上下文
const result = await this.plugin.musicUrl.call(
{ cerumusic: this._getCerumusicApi() },
source,
musicInfo,
quality
)
console.log(`[CeruMusic] 插件 musicUrl 方法调用成功`)
return result
} catch (error: any) {
console.error(`[CeruMusic] getMusicUrl 方法执行失败:`, error.message)
console.error(`[CeruMusic] 错误堆栈:`, error.stack)
// 重新抛出错误,确保外部可以捕获
throw new Error(`Plugin getMusicUrl failed: ${error.message}`)
}
}
/**
* 获取 cerumusic API 对象
* @private
*/
_getCerumusicApi(): CeruMusicApi {
return {
env: 'nodejs',
version: '1.0.0',
utils: {
buffer: {
from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
if (typeof data === 'string') {
return Buffer.from(data, encoding)
} else if (data instanceof Buffer) {
return data
} else if (data instanceof ArrayBuffer) {
return Buffer.from(new Uint8Array(data))
} else {
return Buffer.from(data as any)
}
},
bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
}
},
request: (url, options, callback) => {
// 支持 Promise 和 callback 两种调用方式
if (typeof options === 'function') {
callback = options as RequestCallback
options = { method: 'GET' }
}
const makeRequest = async (): Promise<RequestResult> => {
try {
console.log(`[CeruMusic] 发起请求: ${url}`)
// 添加超时设置
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 10000) // 10秒超时
const requestOptions = {
method: 'GET',
...(options as RequestOptions),
signal: controller.signal
}
const response = await fetch(url, requestOptions)
clearTimeout(timeoutId)
console.log(`[CeruMusic] 请求响应状态: ${response.status}`)
// 尝试解析JSON如果失败则返回文本
let body: any
const contentType = response.headers.get('content-type')
try {
if (contentType && contentType.includes('application/json')) {
body = await response.json()
} else {
const text = await response.text()
console.log(`[CeruMusic] 响应不是JSON格式内容: ${text.substring(0, 200)}...`)
// 对于非JSON响应创建一个错误状态的body
body = {
code: response.status,
msg: `Expected JSON response but got: ${contentType || 'unknown content type'}`,
data: text
}
}
} catch (parseError: any) {
console.error(`[CeruMusic] 解析响应失败: ${parseError.message}`)
// 解析失败时创建错误body
body = {
code: response.status,
msg: `Failed to parse response: ${parseError.message}`
}
}
console.log(`[CeruMusic] 请求响应内容:`, body)
const result: RequestResult = {
body,
statusCode: response.status,
headers: response.headers.raw()
}
if (callback) {
callback(null, result)
}
return result
} catch (error: any) {
console.error(`[CeruMusic] Request failed: ${error.message}`)
if (callback) {
// 网络错误时,调用 callback(error, null)
callback(error, null)
// 需要返回一个值以满足 Promise<RequestResult> 类型
return {
body: { error: error.message },
statusCode: 500,
headers: {}
}
} else {
throw error
}
}
}
if (callback) {
makeRequest().catch((error) => {
console.error(`[CeruMusic] Unhandled request error in callback mode: ${error.message}`)
}) // 确保错误被正确处理
return undefined
} else {
return makeRequest()
}
}
}
return this._callPluginMethod('musicUrl', source, musicInfo, quality)
}
/**
@@ -426,25 +196,7 @@ class CeruMusicPluginHost {
* @param musicInfo 音乐信息
*/
async getPic(source: string, musicInfo: MusicInfo): Promise<string> {
try {
if (!this.plugin || typeof this.plugin.getPic !== 'function') {
throw new Error(`Action "getPic" is not implemented in plugin.`)
}
console.log(`[CeruMusic] 开始调用插件的 getPic 方法...`)
const result = await this.plugin.getPic.call(
{ cerumusic: this._getCerumusicApi() },
source,
musicInfo
)
console.log(`[CeruMusic] 插件 getPic 方法调用成功`)
return result
} catch (error: any) {
console.error(`[CeruMusic] getPic 方法执行失败:`, error.message)
throw new Error(`Plugin getPic failed: ${error.message}`)
}
return this._callPluginMethod('getPic', source, musicInfo)
}
/**
@@ -453,24 +205,364 @@ class CeruMusicPluginHost {
* @param musicInfo 音乐信息
*/
async getLyric(source: string, musicInfo: MusicInfo): Promise<string> {
return this._callPluginMethod('getLyric', source, musicInfo)
}
// ==================== 私有方法 ====================
/**
* 初始化沙箱环境,加载并验证插件
* @private
*/
private _initialize(logger: Logger): void {
if (!this.pluginCode) {
throw new PluginError('No plugin code provided.')
}
const sandbox = this._createSandbox(logger)
try {
if (!this.plugin || typeof this.plugin.getLyric !== 'function') {
throw new Error(`Action "getLyric" is not implemented in plugin.`)
}
vm.runInNewContext(this.pluginCode, sandbox)
this.plugin = sandbox.module.exports as CeruMusicPlugin
console.log(`[CeruMusic] 开始调用插件的 getLyric 方法...`)
this._validatePlugin()
const result = await this.plugin.getLyric.call(
{ cerumusic: this._getCerumusicApi() },
source,
musicInfo
logger.log(
`${CONSTANTS.LOG_PREFIX} Plugin "${this.plugin.pluginInfo.name}" loaded successfully.`
)
} catch (error: any) {
logger.error(`${CONSTANTS.LOG_PREFIX} Error executing plugin code:`, error)
throw new PluginError('Failed to initialize plugin.')
}
}
console.log(`[CeruMusic] 插件 getLyric 方法调用成功`)
/**
* 创建沙箱环境
* @private
*/
private _createSandbox(logger: Logger): any {
return {
module: { exports: {} },
cerumusic: this._getCerumusicApi(),
console: logger,
setTimeout,
clearTimeout,
setInterval,
clearInterval,
Buffer,
JSON,
require: () => ({}),
global: {},
process: { env: {} }
}
}
/**
* 验证插件结构
* @private
*/
private _validatePlugin(): void {
if (!this.plugin?.pluginInfo || !this.plugin.sources || !this.plugin.musicUrl) {
throw new PluginError(
'Invalid plugin structure. Required fields: pluginInfo, sources, musicUrl.'
)
}
}
/**
* 确保插件已初始化
* @private
*/
private _ensurePluginInitialized(): void {
if (!this.plugin) {
throw new PluginError('Plugin not initialized')
}
}
/**
* 统一的插件方法调用逻辑
* @private
*/
private async _callPluginMethod(
methodName: PluginMethodName,
...args: readonly any[]
): Promise<string> {
this._ensurePluginInitialized()
const method = this.plugin![methodName] as any
if (typeof method !== 'function') {
throw new PluginError(`Action "${methodName}" is not implemented in plugin.`, methodName)
}
try {
console.log(`${CONSTANTS.LOG_PREFIX} 开始调用插件的 ${methodName} 方法...`)
const result = await method.call(...[{ cerumusic: this._getCerumusicApi() }], ...args)
console.log(`${CONSTANTS.LOG_PREFIX} 插件 ${methodName} 方法调用成功`)
return result
} catch (error: any) {
console.error(`[CeruMusic] getLyric 方法执行失败:`, error.message)
throw new Error(`Plugin getLyric failed: ${error.message}`)
console.error(`${CONSTANTS.LOG_PREFIX} ${methodName} 方法执行失败:`, error.message)
if (methodName === 'musicUrl') {
console.error(`${CONSTANTS.LOG_PREFIX} 错误堆栈:`, error.stack)
}
throw new PluginError(`Plugin ${methodName} failed: ${error.message}`, methodName)
}
}
// ==================== 工具方法 ====================
// /**
// * 验证 URL 是否有效
// * @private
// */
// private _isValidUrl(url: string): boolean {
// try {
// const urlObj = new URL(url)
// return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
// } catch {
// return false
// }
// }
// /**
// * 根据通知类型获取标题
// * @private
// */
// private _getNoticeTitle(type: string): string {
// const titleMap: Record<string, string> = {
// update: '插件更新',
// error: '插件错误',
// warning: '插件警告',
// info: '插件信息',
// success: '操作成功'
// }
// return titleMap[type] || '插件通知'
// }
// /**
// * 根据通知类型获取默认消息
// * @private
// */
// private _getDefaultMessage(type: string, data: any): string {
// const pluginName = this.plugin?.pluginInfo?.name || '未知插件'
// switch (type) {
// case 'error':
// return `插件 "${pluginName}" 发生错误: ${data?.error || '未知错误'}`
// case 'warning':
// return `插件 "${pluginName}" 警告: ${data?.warning || '需要注意'}`
// case 'success':
// return `插件 "${pluginName}" 操作成功`
// case 'info':
// default:
// return `插件 "${pluginName}" 信息: ${JSON.stringify(data)}`
// }
// }
/**
* 解析响应体
* @private
*/
private async _parseResponseBody(response: any): Promise<any> {
const contentType = response.headers.get('content-type') || ''
try {
if (contentType.includes('application/json')) {
return await response.json()
} else if (contentType.includes('text/')) {
return await response.text()
} else {
// 对于其他类型,尝试解析为 JSON失败则返回文本
const text = await response.text()
try {
return JSON.parse(text)
} catch {
return text
}
}
} catch (parseError: any) {
console.error(`${CONSTANTS.LOG_PREFIX} 解析响应失败: ${parseError.message}`)
return {
error: 'Parse failed',
message: parseError.message,
statusCode: response.status
}
}
}
/**
* 创建错误结果
* @private
*/
private _createErrorResult(error: any, url: string): RequestResult {
const isTimeout = error.name === 'AbortError'
return {
body: {
error: error.name || 'RequestError',
message: error.message,
url
},
statusCode: isTimeout ? 408 : 500,
headers: {}
}
}
// ==================== API 构建方法 ====================
/**
* 获取 cerumusic API 对象
* @private
*/
private _getCerumusicApi(): CeruMusicApi {
return {
env: CONSTANTS.ENVIRONMENT,
version: CONSTANTS.API_VERSION,
utils: this._createApiUtils(),
request: this._createRequestFunction(),
NoticeCenter: this._createNoticeCenter()
}
}
/**
* 创建 API 工具对象
* @private
*/
private _createApiUtils(): CeruMusicApiUtils {
return {
buffer: {
from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
if (typeof data === 'string') {
return Buffer.from(data, encoding)
} else if (data instanceof Buffer) {
return data
} else if (data instanceof ArrayBuffer) {
return Buffer.from(new Uint8Array(data))
} else {
return Buffer.from(data as any)
}
},
bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
}
}
}
/**
* 创建请求函数
* @private
*/
private _createRequestFunction() {
return (
url: string,
options?: RequestOptions | RequestCallback,
callback?: RequestCallback
) => {
// 支持 Promise 和 callback 两种调用方式
if (typeof options === 'function') {
callback = options as RequestCallback
options = { method: 'GET' }
}
const requestOptions = options as RequestOptions
const makeRequest = () => this._makeHttpRequest(url, requestOptions)
// 执行请求
if (callback) {
makeRequest()
.then((result) => callback(null, result))
.catch((error) => {
const errorResult = this._createErrorResult(error, url)
callback(error, errorResult)
})
return undefined
} else {
return makeRequest()
}
}
}
/**
* 执行 HTTP 请求
* @private
*/
private async _makeHttpRequest(url: string, options: RequestOptions): Promise<RequestResult> {
const controller = new AbortController()
const timeout = options.timeout || CONSTANTS.DEFAULT_TIMEOUT
const timeoutId = setTimeout(() => {
controller.abort()
console.warn(`${CONSTANTS.LOG_PREFIX} 请求超时: ${url}`)
}, timeout)
try {
console.log(`${CONSTANTS.LOG_PREFIX} 发起请求: ${options.method || 'GET'} ${url}`)
const fetchOptions = {
method: 'GET',
...options,
signal: controller.signal
}
const response = await fetch(url, fetchOptions)
clearTimeout(timeoutId)
console.log(`${CONSTANTS.LOG_PREFIX} 请求响应: ${response.status} ${response.statusText}`)
const body = await this._parseResponseBody(response)
const headers = this._extractHeaders(response)
const result: RequestResult = {
body,
statusCode: response.status,
headers
}
console.log(`${CONSTANTS.LOG_PREFIX} 请求完成:`, {
url,
status: response.status,
bodyType: typeof body
})
return result
} catch (error: any) {
clearTimeout(timeoutId)
const errorMessage =
error.name === 'AbortError' ? `请求超时: ${url}` : `请求失败: ${error.message}`
console.error(`${CONSTANTS.LOG_PREFIX} ${errorMessage}`)
throw error
}
}
/**
* 提取响应头
* @private
*/
private _extractHeaders(response: any): Record<string, string> {
const headers: Record<string, string> = {}
response.headers.forEach((value: string, key: string) => {
headers[key] = value
})
return headers
}
/**
* 创建通知中心
* @private
*/
private _createNoticeCenter() {
return (type: string, data: any) => {
const sendNotice = () => {
if (this.plugin?.pluginInfo) {
sendPluginNotice(
{ type: type as any, data, currentVersion: this.plugin.pluginInfo.version },
this.plugin.pluginInfo.name
)
} else {
// 如果插件还未初始化,延迟执行
setTimeout(sendNotice, CONSTANTS.NOTICE_DELAY)
}
}
sendNotice()
}
}
}

View File

@@ -68,7 +68,6 @@ function extractDefaultSources() {
};
});
console.log('提取的音源配置:', extractedSources);
return extractedSources;
} catch (e) {
console.log('解析 MUSIC_QUALITY 失败:', e.message);
@@ -94,6 +93,70 @@ sources = extractDefaultSources();
let isInitialized = false;
let pluginSources = {};
let requestHandler = null;
let updateAlertSent = false; // 防止重复发送更新提示
// 处理更新提示事件
function handleUpdateAlert(data, cerumusicApi) {
// 每次运行脚本只能调用一次
if (updateAlertSent) {
console.warn(\`[${pluginName}] updateAlert 事件每次运行脚本只能调用一次,忽略重复调用\`);
return;
}
if (!data || !data.log) {
console.error(\`[${pluginName}] updateAlert 事件缺少必需的 log 参数\`);
return;
}
// 验证和处理参数
let log = String(data.log);
let updateUrl = data.updateUrl ? String(data.updateUrl) : undefined;
// 限制 log 长度为 1024 字符
if (log.length > 1024) {
log = log.substring(0, 1024);
console.warn(\`[${pluginName}] 更新日志超过 1024 字符,已截断\`);
}
// 验证 updateUrl 格式
if (updateUrl) {
if (updateUrl.length > 1024) {
updateUrl = updateUrl.substring(0, 1024);
console.warn(\`[${pluginName}] 更新地址超过 1024 字符,已截断\`);
}
if (!updateUrl.startsWith('http://') && !updateUrl.startsWith('https://')) {
console.error(\`[${pluginName}] updateUrl 必须是 HTTP 协议的 URL 地址\`);
updateUrl = undefined;
}
}
// 标记已发送
updateAlertSent = true;
// 通过 CeruMusic 的通知系统发送更新提示
try {
// 使用传入的 cerumusic API 对象发送通知
if (cerumusicApi && cerumusicApi.NoticeCenter) {
cerumusicApi.NoticeCenter('update', {
title: \`${pluginName} 有新版本可用\`,
content: log,
url: updateUrl,
pluginInfo: {
name: '${pluginName}',
type: 'lx',
forcedUpdate: false
}
});
console.log(\`[${pluginName}] 更新提示已发送\`, { log: log.substring(0, 100) + '...', updateUrl });
} else {
console.error(\`[${pluginName}] CeruMusic API 不可用,无法发送更新提示\`);
}
} catch (error) {
console.error(\`[${pluginName}] 发送更新提示失败:\`, error.message);
}
}
initializePlugin()
function initializePlugin() {
if (isInitialized) return;
@@ -133,9 +196,9 @@ function initializePlugin() {
qualitys: sourceInfo.qualitys || originalQualitys || ['128k', '320k']
};
});
console.log('[${pluginName + ' by Ceru插件' || 'ceru插件'}] 音源注册完成:', Object.keys(pluginSources));
console.log('[${pluginName + ' by Ceru插件' || 'ceru插件'}] 动态音源信息已更新:', sources);
} else if (event === 'updateAlert' && data) {
// 处理更新提示事件,传入 cerumusic API
handleUpdateAlert(data, cerumusic);
}
},
request: request,

View File

@@ -1,10 +1,9 @@
// 导入通用工具函数
import { dateFormat } from '../../common/utils/common'
import { dateFormat } from '@common/utils/common'
// 导出通用工具函数
export * from '../../common/utils/nodejs'
export * from '../../common/utils/common'
export * from '../../common/utils/tools'
/**
* 格式化播放数量

View File

@@ -24,5 +24,4 @@ const kg = {
return `https://www.kugou.com/song/#hash=${songInfo.hash}&album_id=${songInfo.albumId}`
}
}
export default kg

View File

@@ -21,5 +21,4 @@ const tx = {
return `https://y.qq.com/n/yqq/song/${songInfo.songmid}.html`
}
}
export default tx

View File

@@ -1,10 +1,31 @@
import qrcDecrypt from './qrc-decrypt'
import { httpFetch } from '../../request'
import getMusicInfo from './musicInfo'
const songIdMap = new Map()
const promises = new Map()
const decode = qrcDecrypt()
export default {
rxps: {
info: /^{"/,
lineTime: /^\[(\d+),\d+\]/,
lineTime2: /^\[([\d:.]+)\]/,
wordTime: /\(\d+,\d+,\d+\)/,
wordTimeAll: /(\(\d+,\d+,\d+\))/g,
timeLabelFixRxp: /(?:\.0+|0+)$/
},
msFormat(timeMs) {
if (Number.isNaN(timeMs)) return ''
let ms = timeMs % 1000
timeMs /= 1000
let m = parseInt(timeMs / 60)
.toString()
.padStart(2, '0')
timeMs %= 60
let s = parseInt(timeMs).toString().padStart(2, '0')
return `[${m}:${s}.${String(ms).padStart(3, '0')}]`
},
successCode: 0,
async getSongId({ songId, songmid }) {
if (songId) return songId
@@ -17,6 +38,179 @@ export default {
promises.delete(songmid)
return info.songId
},
removeTag(str) {
return str.replace(/^[\S\s]*?LyricContent="/, '').replace(/"\/>[\S\s]*?$/, '')
},
parseCeru(lrc) {
lrc = lrc.trim()
lrc = lrc.replace(/\r/g, '')
if (!lrc) return { lyric: '', lxlyric: '' }
const lines = lrc.split('\n')
const lxlrcLines = []
const lrcLines = []
for (let line of lines) {
line = line.trim()
let result = this.rxps.lineTime.exec(line)
if (!result) {
if (line.startsWith('[offset')) {
lxlrcLines.push(line)
lrcLines.push(line)
continue
}
if (this.rxps.lineTime2.test(line)) {
// lxlrcLines.push(line)
lrcLines.push(line)
}
continue
}
const startMsTime = parseInt(result[1])
const startTimeStr = this.msFormat(startMsTime)
if (!startTimeStr) continue
let words = line.replace(this.rxps.lineTime, '')
lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
let times = words.match(this.rxps.wordTimeAll)
if (!times) continue
let currentStart = startMsTime
const processedTimes = []
times.forEach((time) => {
const result = /\((\d+),(\d+),(\d+)\)/.exec(time)
const duration = parseInt(result[2])
processedTimes.push(`(${currentStart},${duration},0)`)
currentStart += duration
})
const wordArr = words.split(this.rxps.wordTime)
const newWords = processedTimes.map((time, index) => `${time}${wordArr[index]}`).join('')
lxlrcLines.push(`${startTimeStr}${newWords}`)
}
return {
lyric: lrcLines.join('\n'),
lxlyric: lxlrcLines.join('\n')
}
},
getIntv(interval) {
if (!interval) return 0
if (!interval.includes('.')) interval += '.0'
let arr = interval.split(/:|\./)
while (arr.length < 3) arr.unshift('0')
const [m, s, ms] = arr
return parseInt(m) * 3600000 + parseInt(s) * 1000 + parseInt(ms)
},
fixRlrcTimeTag(rlrc, lrc) {
// console.log(lrc)
// console.log(rlrc)
const rlrcLines = rlrc.split('\n')
let lrcLines = lrc.split('\n')
// let temp = []
let newLrc = []
rlrcLines.forEach((line) => {
const result = this.rxps.lineTime2.exec(line)
if (!result) return
const words = line.replace(this.rxps.lineTime2, '')
if (!words.trim()) return
const t1 = this.getIntv(result[1])
while (lrcLines.length) {
const lrcLine = lrcLines.shift()
const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
if (!lrcLineResult) continue
const t2 = this.getIntv(lrcLineResult[1])
if (Math.abs(t1 - t2) < 100) {
newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
break
}
// temp.push(line)
}
// lrcLines = [...temp, ...lrcLines]
// temp = []
})
return newLrc.join('\n')
},
fixTlrcTimeTag(tlrc, lrc) {
// console.log(lrc)
// console.log(tlrc)
const tlrcLines = tlrc.split('\n')
let lrcLines = lrc.split('\n')
// let temp = []
let newLrc = []
tlrcLines.forEach((line) => {
const result = this.rxps.lineTime2.exec(line)
if (!result) return
const words = line.replace(this.rxps.lineTime2, '')
if (!words.trim()) return
let time = result[1]
if (time.includes('.')) {
time += ''.padStart(3 - time.split('.')[1].length, '0')
}
const t1 = this.getIntv(time)
while (lrcLines.length) {
const lrcLine = lrcLines.shift()
const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
if (!lrcLineResult) continue
const t2 = this.getIntv(lrcLineResult[1])
if (Math.abs(t1 - t2) < 100) {
newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
break
}
// temp.push(line)
}
// lrcLines = [...temp, ...lrcLines]
// temp = []
})
return newLrc.join('\n')
},
parse(lrc, tlrc, rlrc) {
const info = {
lyric: '',
tlyric: '',
rlyric: '',
crlyric: ''
}
if (lrc) {
let { lyric } = this.parseCeru(this.removeTag(lrc))
info.lyric = lyric
info.crlyric = lrc
}
if (rlrc) info.rlyric = this.fixRlrcTimeTag(this.parseRlyric(this.removeTag(rlrc)), info.lyric)
if (tlrc) info.tlyric = this.fixTlrcTimeTag(tlrc, info.lyric)
return info
},
parseRlyric(lrc) {
lrc = lrc.trim()
lrc = lrc.replace(/\r/g, '')
if (!lrc) return { lyric: '', lxlyric: '' }
const lines = lrc.split('\n')
const lrcLines = []
for (let line of lines) {
line = line.trim()
let result = this.rxps.lineTime.exec(line)
if (!result) continue
const startMsTime = parseInt(result[1])
const startTimeStr = this.msFormat(startMsTime)
if (!startTimeStr) continue
let words = line.replace(this.rxps.lineTime, '')
lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
}
return lrcLines.join('\n')
},
parseLyric(lrc, tlrc, rlrc) {
return this.parse(decode(lrc), decode(tlrc), decode(rlrc))
},
getLyric(mInfo, retryNum = 0) {
if (retryNum > 3) return Promise.reject(new Error('Get lyric failed'))

View File

@@ -0,0 +1,521 @@
import zlib from 'zlib'
export default () => {
const ENCRYPT = 1
const DECRYPT = 0
const sbox = [
// sbox1
[
14, 4, 13, 1, 2, 15, 11, 8, 3, 10, 6, 12, 5, 9, 0, 7, 0, 15, 7, 4, 14, 2, 13, 1, 10, 6, 12,
11, 9, 5, 3, 8, 4, 1, 14, 8, 13, 6, 2, 11, 15, 12, 9, 7, 3, 10, 5, 0, 15, 12, 8, 2, 4, 9, 1,
7, 5, 11, 3, 14, 10, 0, 6, 13
],
// sbox2
[
15, 1, 8, 14, 6, 11, 3, 4, 9, 7, 2, 13, 12, 0, 5, 10, 3, 13, 4, 7, 15, 2, 8, 15, 12, 0, 1, 10,
6, 9, 11, 5, 0, 14, 7, 11, 10, 4, 13, 1, 5, 8, 12, 6, 9, 3, 2, 15, 13, 8, 10, 1, 3, 15, 4, 2,
11, 6, 7, 12, 0, 5, 14, 9
],
// sbox3
[
10, 0, 9, 14, 6, 3, 15, 5, 1, 13, 12, 7, 11, 4, 2, 8, 13, 7, 0, 9, 3, 4, 6, 10, 2, 8, 5, 14,
12, 11, 15, 1, 13, 6, 4, 9, 8, 15, 3, 0, 11, 1, 2, 12, 5, 10, 14, 7, 1, 10, 13, 0, 6, 9, 8, 7,
4, 15, 14, 3, 11, 5, 2, 12
],
// sbox4
[
7, 13, 14, 3, 0, 6, 9, 10, 1, 2, 8, 5, 11, 12, 4, 15, 13, 8, 11, 5, 6, 15, 0, 3, 4, 7, 2, 12,
1, 10, 14, 9, 10, 6, 9, 0, 12, 11, 7, 13, 15, 1, 3, 14, 5, 2, 8, 4, 3, 15, 0, 6, 10, 10, 13,
8, 9, 4, 5, 11, 12, 7, 2, 14
],
// sbox5
[
2, 12, 4, 1, 7, 10, 11, 6, 8, 5, 3, 15, 13, 0, 14, 9, 14, 11, 2, 12, 4, 7, 13, 1, 5, 0, 15,
10, 3, 9, 8, 6, 4, 2, 1, 11, 10, 13, 7, 8, 15, 9, 12, 5, 6, 3, 0, 14, 11, 8, 12, 7, 1, 14, 2,
13, 6, 15, 0, 9, 10, 4, 5, 3
],
// sbox6
[
12, 1, 10, 15, 9, 2, 6, 8, 0, 13, 3, 4, 14, 7, 5, 11, 10, 15, 4, 2, 7, 12, 9, 5, 6, 1, 13, 14,
0, 11, 3, 8, 9, 14, 15, 5, 2, 8, 12, 3, 7, 0, 4, 10, 1, 13, 11, 6, 4, 3, 2, 12, 9, 5, 15, 10,
11, 14, 1, 7, 6, 0, 8, 13
],
// sbox7
[
4, 11, 2, 14, 15, 0, 8, 13, 3, 12, 9, 7, 5, 10, 6, 1, 13, 0, 11, 7, 4, 9, 1, 10, 14, 3, 5, 12,
2, 15, 8, 6, 1, 4, 11, 13, 12, 3, 7, 14, 10, 15, 6, 8, 0, 5, 9, 2, 6, 11, 13, 8, 1, 4, 10, 7,
9, 5, 0, 15, 14, 2, 3, 12
],
// sbox8
[
13, 2, 8, 4, 6, 15, 11, 1, 10, 9, 3, 14, 5, 0, 12, 7, 1, 15, 13, 8, 10, 3, 7, 4, 12, 5, 6, 11,
0, 14, 9, 2, 7, 11, 4, 1, 9, 12, 14, 2, 0, 6, 10, 13, 15, 3, 5, 8, 2, 1, 14, 7, 4, 10, 8, 13,
15, 12, 9, 0, 3, 5, 6, 11
]
]
/**
* 从 Buffer 中提取指定位置的位,并左移指定偏移量
* @param {Buffer} a - Buffer
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum(a, b, c) {
const byteIndex = Math.floor(b / 32) * 4 + 3 - Math.floor((b % 32) / 8)
const bitInByte = 7 - (b % 8)
const bit = (a[byteIndex] >> bitInByte) & 1
return bit << c
}
/**
* 从整数中提取指定位置的位,并左移指定偏移量
* @param {number} a - 整数
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum_intr(a, b, c) {
return (((a >>> (31 - b)) & 1) << c) | 0
}
/**
* 从整数中提取指定位置的位,并右移指定偏移量
* @param {number} a - 整数
* @param {number} b - 要提取的位索引
* @param {number} c - 位提取后的偏移量
* @returns {number} 提取后的位
*/
function bitnum_intl(a, b, c) {
return (((a << b) & 0x80000000) >>> c) | 0
}
/**
* 对输入整数进行位运算,重新组合位
* @param {number} a - 整数
* @returns {number} 重新组合后的位
*/
function sbox_bit(a) {
return (a & 32) | ((a & 31) >> 1) | ((a & 1) << 4) | 0
}
/**
* 初始置换
* @param {Buffer} input_data - 输入 Buffer
* @returns {[number, number]} 初始置换后的两个32位整数
*/
function initial_permutation(input_data) {
const s0 =
bitnum(input_data, 57, 31) |
bitnum(input_data, 49, 30) |
bitnum(input_data, 41, 29) |
bitnum(input_data, 33, 28) |
bitnum(input_data, 25, 27) |
bitnum(input_data, 17, 26) |
bitnum(input_data, 9, 25) |
bitnum(input_data, 1, 24) |
bitnum(input_data, 59, 23) |
bitnum(input_data, 51, 22) |
bitnum(input_data, 43, 21) |
bitnum(input_data, 35, 20) |
bitnum(input_data, 27, 19) |
bitnum(input_data, 19, 18) |
bitnum(input_data, 11, 17) |
bitnum(input_data, 3, 16) |
bitnum(input_data, 61, 15) |
bitnum(input_data, 53, 14) |
bitnum(input_data, 45, 13) |
bitnum(input_data, 37, 12) |
bitnum(input_data, 29, 11) |
bitnum(input_data, 21, 10) |
bitnum(input_data, 13, 9) |
bitnum(input_data, 5, 8) |
bitnum(input_data, 63, 7) |
bitnum(input_data, 55, 6) |
bitnum(input_data, 47, 5) |
bitnum(input_data, 39, 4) |
bitnum(input_data, 31, 3) |
bitnum(input_data, 23, 2) |
bitnum(input_data, 15, 1) |
bitnum(input_data, 7, 0) |
0
const s1 =
bitnum(input_data, 56, 31) |
bitnum(input_data, 48, 30) |
bitnum(input_data, 40, 29) |
bitnum(input_data, 32, 28) |
bitnum(input_data, 24, 27) |
bitnum(input_data, 16, 26) |
bitnum(input_data, 8, 25) |
bitnum(input_data, 0, 24) |
bitnum(input_data, 58, 23) |
bitnum(input_data, 50, 22) |
bitnum(input_data, 42, 21) |
bitnum(input_data, 34, 20) |
bitnum(input_data, 26, 19) |
bitnum(input_data, 18, 18) |
bitnum(input_data, 10, 17) |
bitnum(input_data, 2, 16) |
bitnum(input_data, 60, 15) |
bitnum(input_data, 52, 14) |
bitnum(input_data, 44, 13) |
bitnum(input_data, 36, 12) |
bitnum(input_data, 28, 11) |
bitnum(input_data, 20, 10) |
bitnum(input_data, 12, 9) |
bitnum(input_data, 4, 8) |
bitnum(input_data, 62, 7) |
bitnum(input_data, 54, 6) |
bitnum(input_data, 46, 5) |
bitnum(input_data, 38, 4) |
bitnum(input_data, 30, 3) |
bitnum(input_data, 22, 2) |
bitnum(input_data, 14, 1) |
bitnum(input_data, 6, 0) |
0
return [s0, s1]
}
/**
* 逆初始置换
* @param {number} s0 - 32位整数
* @param {number} s1 - 32位整数
* @returns {Buffer} 逆初始置换后的 Buffer
*/
function inverse_permutation(s0, s1) {
const data = Buffer.alloc(8)
data[3] =
bitnum_intr(s1, 7, 7) |
bitnum_intr(s0, 7, 6) |
bitnum_intr(s1, 15, 5) |
bitnum_intr(s0, 15, 4) |
bitnum_intr(s1, 23, 3) |
bitnum_intr(s0, 23, 2) |
bitnum_intr(s1, 31, 1) |
bitnum_intr(s0, 31, 0) |
0
data[2] =
bitnum_intr(s1, 6, 7) |
bitnum_intr(s0, 6, 6) |
bitnum_intr(s1, 14, 5) |
bitnum_intr(s0, 14, 4) |
bitnum_intr(s1, 22, 3) |
bitnum_intr(s0, 22, 2) |
bitnum_intr(s1, 30, 1) |
bitnum_intr(s0, 30, 0) |
0
data[1] =
bitnum_intr(s1, 5, 7) |
bitnum_intr(s0, 5, 6) |
bitnum_intr(s1, 13, 5) |
bitnum_intr(s0, 13, 4) |
bitnum_intr(s1, 21, 3) |
bitnum_intr(s0, 21, 2) |
bitnum_intr(s1, 29, 1) |
bitnum_intr(s0, 29, 0) |
0
data[0] =
bitnum_intr(s1, 4, 7) |
bitnum_intr(s0, 4, 6) |
bitnum_intr(s1, 12, 5) |
bitnum_intr(s0, 12, 4) |
bitnum_intr(s1, 20, 3) |
bitnum_intr(s0, 20, 2) |
bitnum_intr(s1, 28, 1) |
bitnum_intr(s0, 28, 0) |
0
data[7] =
bitnum_intr(s1, 3, 7) |
bitnum_intr(s0, 3, 6) |
bitnum_intr(s1, 11, 5) |
bitnum_intr(s0, 11, 4) |
bitnum_intr(s1, 19, 3) |
bitnum_intr(s0, 19, 2) |
bitnum_intr(s1, 27, 1) |
bitnum_intr(s0, 27, 0) |
0
data[6] =
bitnum_intr(s1, 2, 7) |
bitnum_intr(s0, 2, 6) |
bitnum_intr(s1, 10, 5) |
bitnum_intr(s0, 10, 4) |
bitnum_intr(s1, 18, 3) |
bitnum_intr(s0, 18, 2) |
bitnum_intr(s1, 26, 1) |
bitnum_intr(s0, 26, 0) |
0
data[5] =
bitnum_intr(s1, 1, 7) |
bitnum_intr(s0, 1, 6) |
bitnum_intr(s1, 9, 5) |
bitnum_intr(s0, 9, 4) |
bitnum_intr(s1, 17, 3) |
bitnum_intr(s0, 17, 2) |
bitnum_intr(s1, 25, 1) |
bitnum_intr(s0, 25, 0) |
0
data[4] =
bitnum_intr(s1, 0, 7) |
bitnum_intr(s0, 0, 6) |
bitnum_intr(s1, 8, 5) |
bitnum_intr(s0, 8, 4) |
bitnum_intr(s1, 16, 3) |
bitnum_intr(s0, 16, 2) |
bitnum_intr(s1, 24, 1) |
bitnum_intr(s0, 24, 0) |
0
return data
}
/**
* Triple-DES F函数
* @param {number} state - 输入
* @param {number[]} key - 密钥
* @returns {number} 输出
*/
function f(state, key) {
state = state | 0
const t1 =
bitnum_intl(state, 31, 0) |
(((state & 0xf0000000) >>> 1) | 0) |
bitnum_intl(state, 4, 5) |
bitnum_intl(state, 3, 6) |
(((state & 0x0f000000) >>> 3) | 0) |
bitnum_intl(state, 8, 11) |
bitnum_intl(state, 7, 12) |
(((state & 0x00f00000) >>> 5) | 0) |
bitnum_intl(state, 12, 17) |
bitnum_intl(state, 11, 18) |
(((state & 0x000f0000) >>> 7) | 0) |
bitnum_intl(state, 16, 23) |
0
const t2 =
bitnum_intl(state, 15, 0) |
(((state & 0x0000f000) << 15) | 0) |
bitnum_intl(state, 20, 5) |
bitnum_intl(state, 19, 6) |
(((state & 0x00000f00) << 13) | 0) |
bitnum_intl(state, 24, 11) |
bitnum_intl(state, 23, 12) |
(((state & 0x000000f0) << 11) | 0) |
bitnum_intl(state, 28, 17) |
bitnum_intl(state, 27, 18) |
(((state & 0x0000000f) << 9) | 0) |
bitnum_intl(state, 0, 23) |
0
const _lrgstate = [
(t1 >>> 24) & 0xff,
(t1 >>> 16) & 0xff,
(t1 >>> 8) & 0xff,
(t2 >>> 24) & 0xff,
(t2 >>> 16) & 0xff,
(t2 >>> 8) & 0xff
]
const lrgstate = _lrgstate.map((val, i) => val ^ key[i])
const newState =
(sbox[0][sbox_bit(lrgstate[0] >>> 2)] << 28) |
(sbox[1][sbox_bit(((lrgstate[0] & 0x03) << 4) | (lrgstate[1] >>> 4))] << 24) |
(sbox[2][sbox_bit(((lrgstate[1] & 0x0f) << 2) | (lrgstate[2] >>> 6))] << 20) |
(sbox[3][sbox_bit(lrgstate[2] & 0x3f)] << 16) |
(sbox[4][sbox_bit(lrgstate[3] >>> 2)] << 12) |
(sbox[5][sbox_bit(((lrgstate[3] & 0x03) << 4) | (lrgstate[4] >>> 4))] << 8) |
(sbox[6][sbox_bit(((lrgstate[4] & 0x0f) << 2) | (lrgstate[5] >>> 6))] << 4) |
sbox[7][sbox_bit(lrgstate[5] & 0x3f)] |
0
return (
bitnum_intl(newState, 15, 0) |
bitnum_intl(newState, 6, 1) |
bitnum_intl(newState, 19, 2) |
bitnum_intl(newState, 20, 3) |
bitnum_intl(newState, 28, 4) |
bitnum_intl(newState, 11, 5) |
bitnum_intl(newState, 27, 6) |
bitnum_intl(newState, 16, 7) |
bitnum_intl(newState, 0, 8) |
bitnum_intl(newState, 14, 9) |
bitnum_intl(newState, 22, 10) |
bitnum_intl(newState, 25, 11) |
bitnum_intl(newState, 4, 12) |
bitnum_intl(newState, 17, 13) |
bitnum_intl(newState, 30, 14) |
bitnum_intl(newState, 9, 15) |
bitnum_intl(newState, 1, 16) |
bitnum_intl(newState, 7, 17) |
bitnum_intl(newState, 23, 18) |
bitnum_intl(newState, 13, 19) |
bitnum_intl(newState, 31, 20) |
bitnum_intl(newState, 26, 21) |
bitnum_intl(newState, 2, 22) |
bitnum_intl(newState, 8, 23) |
bitnum_intl(newState, 18, 24) |
bitnum_intl(newState, 12, 25) |
bitnum_intl(newState, 29, 26) |
bitnum_intl(newState, 5, 27) |
bitnum_intl(newState, 21, 28) |
bitnum_intl(newState, 10, 29) |
bitnum_intl(newState, 3, 30) |
bitnum_intl(newState, 24, 31) |
0
)
}
/**
* TripleDES 加密/解密算法 (单块)
* @param {Buffer} input_data - 输入 Buffer
* @param {number[][]} key - 密钥
* @returns {Buffer} 加/解密后的 Buffer
*/
function crypt(input_data, key) {
let [s0, s1] = initial_permutation(input_data)
for (let idx = 0; idx < 15; idx++) {
const previous_s1 = s1
s1 = (f(s1, key[idx]) ^ s0) | 0
s0 = previous_s1
}
s0 = (f(s1, key[15]) ^ s0) | 0
return inverse_permutation(s0, s1)
}
/**
* TripleDES 密钥扩展算法
* @param {Buffer} key - 密钥
* @param {number} mode - 模式 (ENCRYPT/DECRYPT)
* @returns {number[][]} 密钥扩展
*/
function key_schedule(key, mode) {
const schedule = Array.from({ length: 16 }, () => Array(6).fill(0))
const key_rnd_shift = [1, 1, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 1]
const key_perm_c = [
56, 48, 40, 32, 24, 16, 8, 0, 57, 49, 41, 33, 25, 17, 9, 1, 58, 50, 42, 34, 26, 18, 10, 2, 59,
51, 43, 35
]
const key_perm_d = [
62, 54, 46, 38, 30, 22, 14, 6, 61, 53, 45, 37, 29, 21, 13, 5, 60, 52, 44, 36, 28, 20, 12, 4,
27, 19, 11, 3
]
const key_compression = [
13, 16, 10, 23, 0, 4, 2, 27, 14, 5, 20, 9, 22, 18, 11, 3, 25, 7, 15, 6, 26, 19, 12, 1, 40, 51,
30, 36, 46, 54, 29, 39, 50, 44, 32, 47, 43, 48, 38, 55, 33, 52, 45, 41, 49, 35, 28, 31
]
let c = 0,
d = 0
for (let i = 0; i < 28; i++) {
c |= bitnum(key, key_perm_c[i], 31 - i)
d |= bitnum(key, key_perm_d[i], 31 - i)
}
c = c | 0
d = d | 0
for (let i = 0; i < 16; i++) {
const shift = key_rnd_shift[i]
c = (((c << shift) | (c >>> (28 - shift))) & 0xfffffff0) | 0
d = (((d << shift) | (d >>> (28 - shift))) & 0xfffffff0) | 0
const togen = mode === DECRYPT ? 15 - i : i
schedule[togen] = Array(6).fill(0)
for (let j = 0; j < 24; j++) {
schedule[togen][Math.floor(j / 8)] |= bitnum_intr(c, key_compression[j], 7 - (j % 8))
}
for (let j = 24; j < 48; j++) {
schedule[togen][Math.floor(j / 8)] |= bitnum_intr(d, key_compression[j] - 27, 7 - (j % 8))
}
}
return schedule
}
/**
* TripleDES 密钥设置
* @param {Buffer} key - 密钥
* @param {number} mode - 模式
* @returns {number[][][]} 密钥设置
*/
function tripledes_key_setup(key, mode) {
if (mode === ENCRYPT) {
return [
key_schedule(key.slice(0, 8), ENCRYPT),
key_schedule(key.slice(8, 16), DECRYPT),
key_schedule(key.slice(16, 24), ENCRYPT)
]
}
return [
key_schedule(key.slice(16, 24), DECRYPT),
key_schedule(key.slice(8, 16), ENCRYPT),
key_schedule(key.slice(0, 8), DECRYPT)
]
}
/**
* TripleDES 加密/解密算法 (完整)
* @param {Buffer} data - 输入 Buffer
* @param {number[][][]} key - 密钥
* @returns {Buffer} 加/解密后的 Buffer
*/
function tripledes_crypt(data, key) {
let result = data
for (let i = 0; i < 3; i++) {
result = crypt(result, key[i])
}
return result
}
/**
* QRC解密主函数
* @param {string | Buffer} encrypted_qrc - 加密的QRC内容 (十六进制字符串或Buffer)
* @returns {string} 解密后的UTF-8字符串
*/
function qrc_decrypt(encrypted_qrc) {
if (!encrypted_qrc) {
return ''
}
let input_buffer
if (typeof encrypted_qrc === 'string') {
input_buffer = Buffer.from(encrypted_qrc, 'hex')
} else if (Buffer.isBuffer(encrypted_qrc)) {
input_buffer = encrypted_qrc
} else {
throw new Error('无效的加密数据类型')
}
try {
const decrypted_chunks = []
const key = Buffer.from('!@#)(*$%123ZXC!@!@#)(NHL')
const schedule = tripledes_key_setup(key, DECRYPT)
for (let i = 0; i < input_buffer.length; i += 8) {
const chunk = input_buffer.slice(i, i + 8)
if (chunk.length < 8) {
// 如果最后一块不足8字节DES无法处理但QRC格式应该是8的倍数
// 这里可以根据实际情况决定如何处理,例如抛出错误或填充
// 根据原始代码行为这里假设输入总是8字节的倍数
console.warn('警告: 数据末尾存在不足8字节的块可能导致解密不完整。')
continue
}
decrypted_chunks.push(tripledes_crypt(chunk, schedule))
}
const data = Buffer.concat(decrypted_chunks)
const decompressed = zlib.unzipSync(data)
return decompressed.toString('utf-8')
} catch (e) {
throw new Error(`解密失败: ${e.message}`)
}
}
// 导出主函数
return qrc_decrypt
}

View File

@@ -20,8 +20,7 @@ function getAppDirPath(
| 'logs'
| 'crashDumps'
) {
const dirPath: string = electron.app.getPath(name ?? 'userData')
return dirPath
return electron.app.getPath(name ?? 'userData')
}
export { getAppDirPath }

View File

@@ -4,7 +4,6 @@ import { dateFormat } from '../../common/utils/common'
// 导出通用工具函数
export * from '../../common/utils/nodejs'
export * from '../../common/utils/common'
export * from '../../common/utils/tools'
/**
* 格式化播放数量

View File

@@ -79,7 +79,7 @@ interface CustomAPI {
start: () => undefined
stop: () => undefined
}
// 目录设置API
directorySettings: {
getDirectories: () => Promise<{
@@ -96,10 +96,7 @@ interface CustomAPI {
path?: string
message?: string
}>
saveDirectories: (directories: {
cacheDir: string
downloadDir: string
}) => Promise<{
saveDirectories: (directories: { cacheDir: string; downloadDir: string }) => Promise<{
success: boolean
message: string
}>
@@ -120,9 +117,13 @@ interface CustomAPI {
formatted: string
}>
}
// 用户配置API
getUserConfig: () => Promise<any>
pluginNotice: {
onPluginNotice: (listener: (...args: any[]) => void) => () => void
}
}
declare global {

View File

@@ -22,16 +22,18 @@ const api = {
},
toggleFullscreen: () => ipcRenderer.send('window-toggle-fullscreen'),
onMusicCtrl: (callback: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
// 音乐控制
const handler = (event: Electron.IpcRendererEvent) => callback(event)
ipcRenderer.on('music-control', handler)
return () => ipcRenderer.removeListener('music-control', handler)
},
// 音乐相关方法
music: {
request: (api: string, args: any) => ipcRenderer.invoke('service-music-request', api, args),
requestSdk: (api: string, args: any) =>
ipcRenderer.invoke('service-music-sdk-request', api, args)
},
//音源插件
plugins: {
selectAndAddPlugin: (type: 'lx' | 'cr') =>
ipcRenderer.invoke('service-plugin-selectAndAddPlugin', type),
@@ -43,7 +45,7 @@ const api = {
ipcRenderer.invoke('service-plugin-uninstallPlugin', pluginId),
getPluginLog: (pluginId: string) => ipcRenderer.invoke('service-plugin-getPluginLog', pluginId)
},
// ai助手
ai: {
ask: (prompt: string) => ipcRenderer.invoke('ai-ask', prompt),
askStream: (prompt: string, streamId: string) =>
@@ -63,7 +65,7 @@ const api = {
ipcRenderer.removeAllListeners('ai-stream-error')
}
},
// 音频缓存管理
musicCache: {
getInfo: () => ipcRenderer.invoke('music-cache:get-info'),
clear: () => ipcRenderer.invoke('music-cache:clear'),
@@ -176,6 +178,17 @@ const api = {
ipcRenderer.invoke('directory-settings:open-directory', dirPath),
getDirectorySize: (dirPath: string) =>
ipcRenderer.invoke('directory-settings:get-directory-size', dirPath)
},
// 插件通知相关
pluginNotice: {
onPluginNotice(callback: (data: string) => any) {
function listener(_: any, data: any) {
callback(data)
}
ipcRenderer.on('plugin-notice', listener)
return () => ipcRenderer.removeListener('plugin-notice', listener)
}
}
}

View File

@@ -10,18 +10,21 @@ declare module 'vue' {
export interface GlobalComponents {
AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.vue')['default']
AudioVisualizer: typeof import('./src/components/Play/AudioVisualizer.vue')['default']
ContextMenu: typeof import('./src/components/ContextMenu/ContextMenu.vue')['default']
Demo: typeof import('./src/components/ContextMenu/demo.vue')['default']
DirectorySettings: typeof import('./src/components/Settings/DirectorySettings.vue')['default']
FloatBall: typeof import('./src/components/AI/FloatBall.vue')['default']
FullPlay: typeof import('./src/components/Play/FullPlay.vue')['default']
GlobalAudio: typeof import('./src/components/Play/GlobalAudio.vue')['default']
HomeLayout: typeof import('./src/components/layout/HomeLayout.vue')['default']
MusicCache: typeof import('./src/components/Settings/MusicCache.vue')['default']
PlaylistActions: typeof import('./src/components/Play/PlaylistActions.vue')['default']
PlaylistDrawer: typeof import('./src/components/Play/PlaylistDrawer.vue')['default']
PlaylistSettings: typeof import('./src/components/Settings/PlaylistSettings.vue')['default']
PlayMusic: typeof import('./src/components/Play/PlayMusic.vue')['default']
PluginNoticeDialog: typeof import('./src/components/PluginNoticeDialog.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SearchComponent: typeof import('./src/components/Search/SearchComponent.vue')['default']
ShaderBackground: typeof import('./src/components/Play/ShaderBackground.vue')['default']
SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
TAlert: typeof import('tdesign-vue-next')['Alert']
@@ -29,6 +32,7 @@ declare module 'vue' {
TBadge: typeof import('tdesign-vue-next')['Badge']
TButton: typeof import('tdesign-vue-next')['Button']
TCard: typeof import('tdesign-vue-next')['Card']
TCheckbox: typeof import('tdesign-vue-next')['Checkbox']
TContent: typeof import('tdesign-vue-next')['Content']
TDialog: typeof import('tdesign-vue-next')['Dialog']
TDivider: typeof import('tdesign-vue-next')['Divider']

View File

@@ -3,11 +3,6 @@
<head lang="zh-CN">
<meta charset="UTF-8" />
<title>澜音 Music</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<!-- <meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' *.gtimg.com; style-src 'self' 'unsafe-inline'; img-src *; connect-src 'self' https://music.163.com https://*.music.163.com *.bikonoo.com/ ; media-src 'self' data: https://* http://*;"
/> -->
</head>
<body>

View File

@@ -1,7 +1,16 @@
<!--
- Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
-
- This software is the confidential and proprietary information of 时迁酱.
- Unauthorized copying of this file, via any medium is strictly prohibited.
-
- @author 时迁酱无聊的霜霜Star
- @since 2025-9-19
- @version 1.0
-->
<script setup lang="ts">
import { onMounted } from 'vue'
import GlobalAudio from './components/Play/GlobalAudio.vue'
import FloatBall from './components/AI/FloatBall.vue'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { useAutoUpdate } from './composables/useAutoUpdate'
@@ -68,6 +77,7 @@ const applyTheme = (themeName) => {
</router-view>
<GlobalAudio />
<FloatBall />
<PluginNoticeDialog />
<UpdateProgress />
</div>
</template>

View File

@@ -77,3 +77,6 @@ body {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.t-dialog__mask {
backdrop-filter: blur(5px);
}

View File

@@ -133,7 +133,7 @@
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-active: rgba(255, 255, 255, 0.6);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
}
@@ -244,7 +244,7 @@
--td-bg-color-specialcomponent: transparent;
--td-border-level-1-color: var(--td-gray-color-11);
--td-border-level-2-color: var(--td-gray-color-9);
--td-mask-active: rgba(0, 0, 0, 0.4);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(0, 0, 0, 0.6);
}

View File

@@ -132,7 +132,7 @@
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
}
@@ -243,7 +243,7 @@
--td-bg-color-specialcomponent: transparent;
--td-border-level-1-color: var(--td-gray-color-11);
--td-border-level-2-color: var(--td-gray-color-9);
--td-mask-active: rgba(0, 0, 0, 0.4);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(0, 0, 0, 0.6);
}

View File

@@ -132,7 +132,7 @@
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
}

View File

@@ -132,7 +132,7 @@
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
}

View File

@@ -132,7 +132,7 @@
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-active: rgba(0, 0, 0, 0.1);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
}

View File

@@ -0,0 +1,811 @@
<template>
<Teleport v-if="visible" to="body">
<!-- 遮罩层 -->
<div
class="context-menu-backdrop"
@click="handleBackdropClick"
@contextmenu="handleBackdropContextMenu"
></div>
<!-- 右键菜单容器 -->
<div
ref="menuRef"
class="context-menu"
:class="[className, { 'context-menu--scrolling': isScrolling }]"
:style="menuStyle"
@mouseleave="handleMouseLeave"
@wheel="handleWheel"
>
<!-- 菜单项列表容器 -->
<div
ref="scrollContainer"
class="context-menu__scroll-container"
:style="scrollContainerStyle"
>
<!-- 菜单项列表 -->
<ul class="context-menu__list">
<li
v-for="item in visibleItems"
:key="item.id"
class="context-menu__item"
:class="[
{
'context-menu__item--disabled': item.disabled,
'context-menu__item--separator': item.separator,
'context-menu__item--has-children': item.children && item.children.length > 0
},
item.className
]"
@mouseenter="handleItemMouseEnter(item, $event)"
@mouseleave="handleItemMouseLeave(item)"
@click="handleItemClick(item, $event)"
>
<!-- 分隔线 -->
<div v-if="item.separator" class="context-menu__separator"></div>
<!-- 普通菜单项 -->
<template v-else>
<!-- 图标 -->
<div v-if="item.icon" class="context-menu__icon">
<component :is="item.icon" size="16" />
</div>
<!-- 标签 -->
<span class="context-menu__label">{{ item.label }}</span>
<!-- 子菜单箭头 -->
<div v-if="item.children && item.children.length > 0" class="context-menu__arrow">
<chevron-right-icon
:fill-color="'transparent'"
:stroke-color="'#000000'"
:stroke-width="1.5"
/>
</div>
</template>
</li>
</ul>
</div>
<!-- 滚动指示器 -->
<div v-if="showScrollIndicator" class="context-menu__scroll-indicator">
<div
class="context-menu__scroll-indicator-top"
:class="{ 'context-menu__scroll-indicator--visible': canScrollUp }"
></div>
<div
class="context-menu__scroll-indicator-bottom"
:class="{ 'context-menu__scroll-indicator--visible': canScrollDown }"
></div>
</div>
<!-- 子菜单 -->
<div
v-if="activeSubmenu"
class="context-menu__submenu-wrapper"
:style="submenuWrapperStyle"
@mouseenter="handleSubmenuMouseEnter"
@mouseleave="handleSubmenuMouseLeave"
>
<ContextMenu
ref="submenuRef"
:visible="true"
:position="submenuPosition"
:items="activeSubmenu.children || []"
:width="width"
:max-height="Math.min(maxHeight, 300)"
:z-index="zIndex + 1"
@item-click="handleSubmenuItemClick"
@close="closeSubmenu"
/>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue'
import type {
ContextMenuProps,
ContextMenuItem,
ContextMenuPosition,
EdgeDetectionConfig,
AnimationConfig,
ScrollConfig
} from './types'
import { ChevronRightIcon } from 'tdesign-icons-vue-next'
// 默认配置
const DEFAULT_EDGE_CONFIG: EdgeDetectionConfig = {
threshold: 10,
enabled: true
}
const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
duration: 200,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
enabled: true
}
const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
scrollbarWidth: 6,
scrollSpeed: 40,
showScrollbar: true
}
// 组件属性
const props = withDefaults(defineProps<ContextMenuProps>(), {
visible: false,
position: () => ({ x: 0, y: 0 }),
items: () => [],
className: '',
width: 200,
maxHeight: 400,
zIndex: 1000
})
const emit = defineEmits<{
'update:visible': [value: boolean]
close: []
'item-click': [item: ContextMenuItem, event: MouseEvent]
}>()
// 响应式引用
const menuRef = ref<HTMLElement>()
const scrollContainer = ref<HTMLElement>()
const submenuRef = ref<any>()
// 状态管理
const isScrolling = ref(false)
const scrollTop = ref(0)
const scrollHeight = ref(0)
const clientHeight = ref(0)
const activeSubmenu = ref<ContextMenuItem | null>(null)
const submenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
const submenuTimer = ref<NodeJS.Timeout>()
const submenuMaxHeight = ref(300)
// 计算属性
const menuStyle = computed((): CSSProperties => {
const style: CSSProperties = {
'--menu-width': `${props.width}px`,
'--menu-max-height': `${props.maxHeight}px`,
'--menu-z-index': props.zIndex,
'--animation-duration': `${DEFAULT_ANIMATION_CONFIG.duration}ms`,
'--animation-easing': DEFAULT_ANIMATION_CONFIG.easing
}
if (!menuRef.value) {
return {
...style,
left: `${props.position.x}px`,
top: `${props.position.y}px`
}
}
const adjustedPosition = adjustMenuPosition(props.position)
return {
...style,
left: `${adjustedPosition.x}px`,
top: `${adjustedPosition.y}px`
}
})
const scrollContainerStyle = computed((): CSSProperties => {
return {
maxHeight: `${props.maxHeight}px`,
transform: `translateY(-${scrollTop.value}px)`
}
})
const visibleItems = computed(() => {
return props.items.filter((item) => {
// 显示所有非分隔线项目
if (!item.separator) return true
// 显示所有分隔线项目无论是否有label
return true
})
})
const showScrollIndicator = computed(() => {
return DEFAULT_SCROLL_CONFIG.showScrollbar && scrollHeight.value > clientHeight.value
})
const canScrollUp = computed(() => scrollTop.value > 0)
const canScrollDown = computed(() => scrollTop.value < scrollHeight.value - clientHeight.value)
const submenuWrapperStyle = computed((): CSSProperties => {
return {
position: 'fixed',
zIndex: props.zIndex + 1,
maxHeight: `${submenuMaxHeight.value}px`
}
})
// 监听器
watch(
() => props.visible,
(newVisible) => {
if (newVisible) {
nextTick(() => {
initializeScroll()
updateSubmenuPosition()
})
} else {
closeSubmenu()
resetScroll()
}
}
)
watch(
() => props.items,
() => {
if (props.visible) {
nextTick(initializeScroll)
}
}
)
// 生命周期
onMounted(() => {
document.addEventListener('keydown', handleKeyDown)
window.addEventListener('resize', handleWindowResize)
})
onUnmounted(() => {
document.removeEventListener('keydown', handleKeyDown)
window.removeEventListener('resize', handleWindowResize)
clearTimeout(submenuTimer.value)
})
// 方法定义
const adjustMenuPosition = (position: ContextMenuPosition): ContextMenuPosition => {
if (!DEFAULT_EDGE_CONFIG.enabled || !menuRef.value) {
return position
}
const menuRect = menuRef.value.getBoundingClientRect()
const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight
const threshold = DEFAULT_EDGE_CONFIG.threshold
let adjustedX = position.x
let adjustedY = position.y
// 水平边缘检测
if (position.x + menuRect.width > viewportWidth - threshold) {
adjustedX = viewportWidth - menuRect.width - threshold
} else if (position.x < threshold) {
adjustedX = threshold
}
// 垂直边缘检测
if (position.y + menuRect.height > viewportHeight - threshold) {
adjustedY = viewportHeight - menuRect.height - threshold
} else if (position.y < threshold) {
adjustedY = threshold
}
return { x: adjustedX, y: adjustedY }
}
const initializeScroll = () => {
if (!scrollContainer.value) return
const container = scrollContainer.value
scrollHeight.value = container.scrollHeight
clientHeight.value = container.clientHeight
scrollTop.value = 0
}
const resetScroll = () => {
scrollTop.value = 0
scrollHeight.value = 0
clientHeight.value = 0
}
const scrollTo = (targetScrollTop: number) => {
const maxScrollTop = scrollHeight.value - clientHeight.value
scrollTop.value = Math.max(0, Math.min(targetScrollTop, maxScrollTop))
}
const scrollBy = (delta: number) => {
scrollTo(scrollTop.value + delta)
}
const handleWheel = (event: WheelEvent) => {
if (!showScrollIndicator.value) return
event.preventDefault()
event.stopPropagation()
const delta =
event.deltaY > 0 ? DEFAULT_SCROLL_CONFIG.scrollSpeed : -DEFAULT_SCROLL_CONFIG.scrollSpeed
scrollBy(delta)
isScrolling.value = true
clearTimeout(submenuTimer.value)
submenuTimer.value = setTimeout(() => {
isScrolling.value = false
}, 150)
}
const handleItemMouseEnter = (item: ContextMenuItem, event: MouseEvent) => {
if (item.disabled || item.separator) return
// 清除之前的子菜单定时器
clearTimeout(submenuTimer.value)
if (item.children && item.children.length > 0) {
submenuTimer.value = setTimeout(() => {
openSubmenu(item, event)
}, 200)
} else {
closeSubmenu()
}
}
const handleItemMouseLeave = (item: ContextMenuItem) => {
if (item.children && item.children.length > 0) {
clearTimeout(submenuTimer.value)
}
}
const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
if (item.disabled || item.separator) return
// 调用菜单项的点击回调
if (item.onClick) {
item.onClick(item, event)
}
// 发射组件事件
emit('item-click', item, event)
// 如果没有子菜单,关闭菜单
if (!item.children || item.children.length === 0) {
closeMenu()
}
}
const handleSubmenuItemClick = (item: ContextMenuItem, event: MouseEvent) => {
emit('item-click', item, event)
closeMenu()
}
const openSubmenu = (item: ContextMenuItem, _event: MouseEvent) => {
if (!menuRef.value) return
// 如果是相同的子菜单,不需要重新计算位置
if (activeSubmenu.value && activeSubmenu.value.id === item.id) {
return
}
// 移除未使用的变量声明
activeSubmenu.value = item
nextTick(() => {
updateSubmenuPosition()
})
}
const closeSubmenu = () => {
activeSubmenu.value = null
clearTimeout(submenuTimer.value)
}
const updateSubmenuPosition = () => {
if (!menuRef.value || !activeSubmenu.value) return
const menuRect = menuRef.value.getBoundingClientRect()
// 初始位置:显示在右侧
const x = menuRect.right
const y = menuRect.top
// 先设置初始位置,让子菜单渲染
submenuPosition.value = { x, y }
// 等待子菜单渲染完成后调整位置
setTimeout(() => {
// 子菜单通过 Teleport 渲染到 body 中,需要在 body 中查找
// 查找所有的 context-menu 元素,找到 z-index 最高的(即子菜单)
const allMenus = document.querySelectorAll('.context-menu')
console.log('All menus found:', allMenus.length)
let submenuEl: Element | null = null
let maxZIndex = props.zIndex
allMenus.forEach((menu) => {
const style = window.getComputedStyle(menu)
const zIndex = parseInt(style.zIndex) || 0
console.log('Menu z-index:', zIndex, 'Current max:', maxZIndex)
if (zIndex > maxZIndex) {
maxZIndex = zIndex
submenuEl = menu as Element
}
})
console.log('Found submenu:', submenuEl)
if (submenuEl) {
const submenuRect = (submenuEl as HTMLElement).getBoundingClientRect()
console.log('submenuRect:', submenuRect)
if (submenuRect.width > 0) {
// 计算包含滚动条的实际宽度
const scrollContainer = (submenuEl as HTMLElement).querySelector(
'.context-menu__scroll-container'
) as HTMLElement | null
let actualWidth = submenuRect.width
if (scrollContainer) {
// 检查是否有滚动条
const hasScrollbar = scrollContainer.scrollHeight > scrollContainer.clientHeight
if (hasScrollbar) {
// 添加滚动条宽度通常是6-17px这里使用默认的6px
const scrollbarWidth = scrollContainer.offsetWidth - scrollContainer.clientWidth
actualWidth += scrollbarWidth
console.log('Added scrollbar width:', scrollbarWidth, 'Total width:', actualWidth)
}
}
adjustSubmenuPosition(actualWidth)
} else {
// 如果宽度为0再等一下
setTimeout(() => {
const retryRect = (submenuEl as HTMLElement).getBoundingClientRect()
console.log('retryRect:', retryRect)
if (retryRect.width > 0) {
// 重试时也要考虑滚动条
const scrollContainer = (submenuEl as HTMLElement).querySelector(
'.context-menu__scroll-container'
) as HTMLElement | null
let actualWidth = retryRect.width
if (scrollContainer) {
const hasScrollbar = scrollContainer.scrollHeight > scrollContainer.clientHeight
if (hasScrollbar) {
const scrollbarWidth = scrollContainer.offsetWidth - scrollContainer.clientWidth
actualWidth += scrollbarWidth
}
}
adjustSubmenuPosition(actualWidth)
}
}, 50)
}
}
}, 0)
}
// 提取位置调整逻辑为独立函数
const adjustSubmenuPosition = (submenuWidth: number) => {
if (!menuRef.value || !activeSubmenu.value) return
const menuRect = menuRef.value.getBoundingClientRect()
const viewportWidth = window.innerWidth
const threshold = 10
// 重新计算位置
let adjustedX = menuRect.right
const y = menuRect.top
// 检查右侧是否有足够空间显示子菜单
if (adjustedX + submenuWidth > viewportWidth - threshold) {
// 如果右侧空间不足显示在左侧父元素的left - 子菜单宽度
adjustedX = menuRect.left - submenuWidth
}
// 确保子菜单不会超出左边界
if (adjustedX < threshold) {
adjustedX = threshold
}
console.log('Final position:', { x: adjustedX, y })
// 更新最终位置
submenuPosition.value = { x: adjustedX, y }
}
const handleBackdropClick = () => {
closeMenu()
}
const handleBackdropContextMenu = (event: MouseEvent) => {
event.preventDefault()
closeMenu()
}
const handleMouseLeave = () => {
clearTimeout(submenuTimer.value)
}
const handleSubmenuMouseEnter = () => {
// 鼠标进入子菜单区域,清除关闭定时器
clearTimeout(submenuTimer.value)
}
const handleSubmenuMouseLeave = () => {
// 鼠标离开子菜单区域,延迟关闭子菜单
submenuTimer.value = setTimeout(() => {
closeSubmenu()
}, 100)
}
const handleKeyDown = (event: KeyboardEvent) => {
if (!props.visible) return
switch (event.key) {
case 'Escape':
event.preventDefault()
closeMenu()
break
case 'ArrowUp':
event.preventDefault()
scrollBy(-DEFAULT_SCROLL_CONFIG.scrollSpeed)
break
case 'ArrowDown':
event.preventDefault()
scrollBy(DEFAULT_SCROLL_CONFIG.scrollSpeed)
break
}
}
const handleWindowResize = () => {
if (props.visible) {
closeMenu()
}
}
const closeMenu = () => {
emit('update:visible', false)
emit('close')
}
// 暴露给父组件的方法
defineExpose({
updatePosition: (_position: ContextMenuPosition) => {
// 位置更新逻辑
},
updateItems: (_items: ContextMenuItem[]) => {
// 菜单项更新逻辑
},
hide: closeMenu
})
</script>
<style scoped>
.context-menu-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: calc(var(--menu-z-index) - 1);
background: transparent;
}
.context-menu {
position: fixed;
min-width: var(--menu-width);
max-width: 300px;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
z-index: var(--menu-z-index);
overflow: auto;
animation: contextMenuEnter var(--animation-duration) var(--animation-easing);
}
.context-menu--scrolling {
pointer-events: auto;
}
.context-menu__scroll-container {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
/* scrollbar-color: rgba(255, 255, 255, 0.3) transparent; */
transition: transform 0.15s ease;
}
.context-menu__scroll-container::-webkit-scrollbar {
width: 6px;
}
/*
.context-menu__scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.context-menu__scroll-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.context-menu__scroll-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
} */
.context-menu__list {
list-style: none;
margin: 0;
padding: 4px 0;
min-width: 100%;
}
.context-menu__item {
position: relative;
display: flex;
align-items: center;
padding: 8px 12px;
margin: 0 4px;
border-radius: 4px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
min-height: 32px;
box-sizing: border-box;
}
.context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
background: #f5f5f5;
}
.context-menu__item--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.context-menu__item--separator {
padding: 0;
margin: 4px 0;
cursor: default;
height: auto;
min-height: auto;
}
.context-menu__item--has-children {
padding-right: 24px;
}
.context-menu__icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 8px;
color: #666;
flex-shrink: 0;
}
.context-menu__label {
flex: 1;
font-size: 13px;
color: #333;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.context-menu__arrow {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
justify-content: center;
align-items: center;
display: flex;
color: #999;
}
.context-menu__arrow-icon {
font-size: 10px;
font-style: normal;
}
.context-menu__separator {
height: 1px;
width: 100%;
background: #e0e0e0;
margin: 0 8px;
opacity: 0.8;
}
.context-menu__scroll-indicator {
position: absolute;
right: 2px;
top: 4px;
bottom: 4px;
width: var(--scrollbar-width, 6px);
pointer-events: none;
}
.context-menu__scroll-indicator-top,
.context-menu__scroll-indicator-bottom {
position: absolute;
left: 0;
width: 100%;
height: 20px;
opacity: 0;
transition: opacity 0.2s ease;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
}
.context-menu__scroll-indicator-top {
top: 0;
transform: rotate(180deg);
}
.context-menu__scroll-indicator-bottom {
bottom: 0;
}
.context-menu__scroll-indicator--visible {
opacity: 1;
}
/* 动画 */
@keyframes contextMenuEnter {
from {
opacity: 0;
transform: scale(0.95) translateY(-8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.context-menu {
min-width: 180px;
max-width: 280px;
border-radius: 6px;
}
.context-menu__item {
padding: 10px 12px;
min-height: 36px;
}
.context-menu__label {
font-size: 14px;
}
}
/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
.context-menu {
background: #2d2d2d;
border-color: #404040;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
background: #404040;
}
.context-menu__icon {
color: #ccc;
}
.context-menu__label {
color: #e0e0e0;
}
.context-menu__separator {
background: #555555;
opacity: 0.9;
}
.context-menu__scroll-indicator-top,
.context-menu__scroll-indicator-bottom {
background: linear-gradient(to bottom, rgba(45, 45, 45, 0.9), transparent);
}
}
</style>

View File

@@ -0,0 +1,244 @@
# 自定义右键菜单组件
一个功能完整、可扩展的自定义右键菜单组件,专为歌曲列表等场景设计。
## 特性
-**精确的边缘点击判定** - 智能计算位置,确保菜单始终在可视区域内
-**滚动支持** - 支持菜单项过多时的滚动选择
-**可扩展性** - 易于添加新的菜单项和功能
-**平滑动画** - 流畅的显示/隐藏动画效果
-**自适应显示** - 在不同屏幕尺寸下自动适配
-**完整TypeScript支持** - 提供完整的类型定义
## 安装和使用
### 基本使用
```vue
<template>
<div @contextmenu.prevent="handleContextMenu">
<!-- 你的内容 -->
</div>
<ContextMenu
v-model:visible="menuVisible"
:items="menuItems"
:position="menuPosition"
@item-click="handleMenuItemClick"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ContextMenu from './ContextMenu/ContextMenu.vue'
import { createMenuItem, createSeparator } from './ContextMenu/utils'
import type { ContextMenuItem } from './ContextMenu/types'
const menuVisible = ref(false)
const menuPosition = ref({ x: 0, y: 0 })
const menuItems = ref<ContextMenuItem[]>([
createMenuItem('play', '播放', {
onClick: (item, event) => console.log('播放点击')
}),
createSeparator(),
createMenuItem('download', '下载')
])
</script>
```
### 在歌曲列表中使用
```vue
<template>
<div class="song-list">
<div
v-for="song in songs"
:key="song.id"
class="song-item"
@contextmenu.prevent="handleSongContextMenu(song, $event)"
>
{{ song.name }}
</div>
</div>
<ContextMenu
v-model:visible="contextMenuVisible"
:items="contextMenuItems"
:position="contextMenuPosition"
/>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import ContextMenu from './ContextMenu/ContextMenu.vue'
import { createMenuItem, createSeparator } from './ContextMenu/utils'
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const currentSong = ref(null)
const contextMenuItems = computed(() => [
createMenuItem('play', '播放', {
onClick: () => playSong(currentSong.value)
}),
createMenuItem('addToPlaylist', '添加到播放列表'),
createSeparator(),
createMenuItem('download', '下载')
])
const handleSongContextMenu = (song, event) => {
currentSong.value = song
contextMenuPosition.value = { x: event.clientX, y: event.clientY }
contextMenuVisible.value = true
}
</script>
```
## API 文档
### ContextMenu 组件属性
| 属性 | 类型 | 默认值 | 说明 |
| --------- | ------------------- | --------- | ----------------- |
| visible | boolean | false | 控制菜单显示/隐藏 |
| items | ContextMenuItem[] | [] | 菜单项配置数组 |
| position | ContextMenuPosition | {x:0,y:0} | 菜单位置坐标 |
| maxHeight | number | 400 | 菜单最大高度 |
| zIndex | number | 1000 | 菜单层级 |
### ContextMenuItem 类型
```typescript
interface ContextMenuItem {
id: string
label: string
icon?: any
disabled?: boolean
separator?: boolean
children?: ContextMenuItem[]
onClick?: (item: ContextMenuItem, event: MouseEvent) => void
className?: string
}
```
### 工具函数
#### createMenuItem
创建标准菜单项
```typescript
createMenuItem(id: string, label: string, options?: {
icon?: any
disabled?: boolean
separator?: boolean
children?: ContextMenuItem[]
onClick?: (item: ContextMenuItem, event: MouseEvent) => void
className?: string
}): ContextMenuItem
```
#### createSeparator
创建分隔线
```typescript
createSeparator(): ContextMenuItem
```
#### calculateMenuPosition
智能计算菜单位置
```typescript
calculateMenuPosition(
event: MouseEvent,
menuWidth?: number,
menuHeight?: number
): ContextMenuPosition
```
## 高级用法
### 子菜单支持
```typescript
const menuItems = [
createMenuItem('playlist', '添加到歌单', {
children: [
createMenuItem('playlist1', '我的最爱'),
createMenuItem('playlist2', '开车音乐'),
createSeparator(),
createMenuItem('newPlaylist', '新建歌单')
]
})
]
```
### 动态菜单项
```typescript
const dynamicMenuItems = computed(() => {
const items = [createMenuItem('play', '播放')]
if (user.value.isPremium) {
items.push(createMenuItem('download', '下载高音质'))
}
return items
})
```
### 自定义样式
```typescript
const menuItems = [
createMenuItem('danger', '删除歌曲', {
className: 'danger-item'
})
]
```
```css
.danger-item {
color: #ff4d4f;
}
.danger-item:hover {
background-color: #fff2f0;
}
```
## 最佳实践
1. **使用防抖处理频繁的右键事件**
2. **合理设置菜单最大高度,避免过长滚动**
3. **为重要操作添加确认对话框**
4. **根据用户权限动态显示菜单项**
5. **在移动端考虑触摸替代方案**
## 浏览器兼容性
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
## 故障排除
### 菜单位置不正确
确保使用 `calculateMenuPosition` 函数计算位置。
### 菜单项点击无效
检查 `onClick` 回调函数是否正确绑定。
### 样式冲突
使用 `className` 属性添加自定义样式类。
## 贡献指南
欢迎提交 Issue 和 Pull Request 来改进这个组件。

View File

@@ -0,0 +1,397 @@
import { ref, computed, type Ref } from 'vue'
import type { ContextMenuItem, ContextMenuPosition } from './types'
import { createMenuItem, createSeparator } from './utils'
/**
* 右键菜单组合式函数
*/
export function useContextMenu() {
const visible = ref(false)
const position = ref<ContextMenuPosition>({ x: 0, y: 0 })
const items = ref<ContextMenuItem[]>([])
const currentData = ref<any>(null)
/**
* 显示菜单
*/
const show = (event: MouseEvent, menuItems: ContextMenuItem[], data?: any) => {
event.preventDefault()
event.stopPropagation()
position.value = {
x: event.clientX,
y: event.clientY
}
items.value = menuItems
currentData.value = data
visible.value = true
}
/**
* 隐藏菜单
*/
const hide = () => {
visible.value = false
currentData.value = null
}
/**
* 更新菜单位置
*/
const updatePosition = (newPosition: ContextMenuPosition) => {
position.value = newPosition
}
/**
* 更新菜单项
*/
const updateItems = (newItems: ContextMenuItem[]) => {
items.value = newItems
}
/**
* 处理菜单项点击
*/
const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
if (item.onClick) {
item.onClick(item, event)
}
hide()
}
return {
// 状态
visible: computed(() => visible.value),
position: computed(() => position.value),
items: computed(() => items.value),
currentData: computed(() => currentData.value),
// 方法
show,
hide,
updatePosition,
updateItems,
handleItemClick
}
}
/**
* 歌曲相关的右键菜单配置
*/
export function useSongContextMenu() {
const { show, hide, ...rest } = useContextMenu()
/**
* 显示歌曲右键菜单
*/
const showSongMenu = (
event: MouseEvent,
song: any,
options?: {
showPlay?: boolean
showAddToPlaylist?: boolean
showDownload?: boolean
showAddToSongList?: boolean
playlists?: any[]
onPlay?: (song: any) => void
onAddToPlaylist?: (song: any) => void
onDownload?: (song: any) => void
onAddToSongList?: (song: any, playlist: any) => void
}
) => {
const {
showPlay = true,
showAddToPlaylist = true,
showDownload = true,
showAddToSongList = true,
playlists = [],
onPlay,
onAddToPlaylist,
onDownload,
onAddToSongList
} = options || {}
const menuItems: ContextMenuItem[] = []
// 播放
if (showPlay) {
menuItems.push(
createMenuItem('play', '播放', {
onClick: () => onPlay?.(song)
})
)
}
// 添加到播放列表
if (showAddToPlaylist) {
menuItems.push(
createMenuItem('addToPlaylist', '添加到播放列表', {
onClick: () => onAddToPlaylist?.(song)
})
)
}
// 添加到歌单(如果有歌单)
if (showAddToSongList && playlists.length > 0) {
menuItems.push(
createMenuItem('addToSongList', '加入歌单', {
children: playlists.map((playlist) =>
createMenuItem(`playlist_${playlist.id}`, playlist.name, {
onClick: () => onAddToSongList?.(song, playlist)
})
)
})
)
}
// 分隔线
if (menuItems.length > 0) {
menuItems.push(createSeparator())
}
// 下载
if (showDownload) {
menuItems.push(
createMenuItem('download', '下载', {
onClick: () => onDownload?.(song)
})
)
}
show(event, menuItems, song)
}
return {
...rest,
showSongMenu,
hide
}
}
/**
* 列表项右键菜单配置
*/
export function useListItemContextMenu() {
const { show, hide, ...rest } = useContextMenu()
/**
* 显示列表项右键菜单
*/
const showListItemMenu = (
event: MouseEvent,
item: any,
options?: {
showEdit?: boolean
showDelete?: boolean
showCopy?: boolean
showProperties?: boolean
onEdit?: (item: any) => void
onDelete?: (item: any) => void
onCopy?: (item: any) => void
onProperties?: (item: any) => void
}
) => {
const {
showEdit = true,
showDelete = true,
showCopy = false,
showProperties = false,
onEdit,
onDelete,
onCopy,
onProperties
} = options || {}
const menuItems: ContextMenuItem[] = []
// 编辑
if (showEdit) {
menuItems.push(
createMenuItem('edit', '编辑', {
onClick: () => onEdit?.(item)
})
)
}
// 复制
if (showCopy) {
menuItems.push(
createMenuItem('copy', '复制', {
onClick: () => onCopy?.(item)
})
)
}
// 分隔线
if (menuItems.length > 0 && (showDelete || showProperties)) {
menuItems.push(createSeparator())
}
// 删除
if (showDelete) {
menuItems.push(
createMenuItem('delete', '删除', {
onClick: () => onDelete?.(item)
})
)
}
// 属性
if (showProperties) {
menuItems.push(
createMenuItem('properties', '属性', {
onClick: () => onProperties?.(item)
})
)
}
show(event, menuItems, item)
}
return {
...rest,
showListItemMenu,
hide
}
}
/**
* 文本选择右键菜单配置
*/
export function useTextSelectionContextMenu() {
const { show, hide, ...rest } = useContextMenu()
/**
* 显示文本选择右键菜单
*/
const showTextSelectionMenu = (
event: MouseEvent,
selectedText: string,
options?: {
showCopy?: boolean
showSearch?: boolean
showTranslate?: boolean
onCopy?: (text: string) => void
onSearch?: (text: string) => void
onTranslate?: (text: string) => void
}
) => {
const {
showCopy = true,
showSearch = true,
showTranslate = false,
onCopy,
onSearch,
onTranslate
} = options || {}
const menuItems: ContextMenuItem[] = []
// 复制
if (showCopy) {
menuItems.push(
createMenuItem('copy', '复制', {
onClick: () => onCopy?.(selectedText)
})
)
}
// 搜索
if (showSearch) {
menuItems.push(
createMenuItem('search', '搜索', {
onClick: () => onSearch?.(selectedText)
})
)
}
// 翻译
if (showTranslate) {
menuItems.push(
createMenuItem('translate', '翻译', {
onClick: () => onTranslate?.(selectedText)
})
)
}
show(event, menuItems, selectedText)
}
return {
...rest,
showTextSelectionMenu,
hide
}
}
/**
* 创建可复用的菜单配置
*/
export function createMenuConfig<T = any>(config: {
items: ContextMenuItem[]
onItemClick?: (item: ContextMenuItem, data: T, event: MouseEvent) => void
onShow?: (data: T) => void
onHide?: () => void
}) {
const { items, onItemClick, onShow, onHide } = config
return {
items: ref([...items]),
show: (_event: MouseEvent, data: T) => {
onShow?.(data)
},
handleItemClick: (item: ContextMenuItem, event: MouseEvent, data: T) => {
onItemClick?.(item, data, event)
},
hide: () => {
onHide?.()
}
}
}
/**
* 菜单项可见性控制
*/
export function useMenuVisibility<T extends ContextMenuItem>(
items: Ref<T[]>,
predicate: (item: T) => boolean
) {
const visibleItems = computed(() => items.value.filter(predicate))
const hasVisibleItems = computed(() => visibleItems.value.length > 0)
return {
visibleItems,
hasVisibleItems
}
}
/**
* 菜单项动态启用/禁用控制
*/
export function useMenuItemsState<T extends ContextMenuItem>(
items: Ref<T[]>,
getState: (item: T) => { disabled?: boolean; visible?: boolean }
) {
const processedItems = computed(() =>
items.value
.map((item) => {
const state = getState(item)
return {
...item,
disabled: state.disabled ?? item.disabled,
// 如果visible为false完全移除该项
...(state.visible === false ? { _hidden: true } : {})
}
})
.filter((item) => !(item as any)._hidden)
)
return {
processedItems
}
}

View File

@@ -0,0 +1,199 @@
<template>
<div class="demo-container">
<h1>右键菜单组件演示</h1>
<!-- 测试区域 -->
<div class="test-area">
<div
class="test-box"
style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px"
@contextmenu.prevent="handleContextMenu($event)"
>
<p>在此区域右键点击测试菜单</p>
<p>菜单项数量{{ menuItems.length }}</p>
</div>
</div>
<!-- 右键菜单 -->
<ContextMenu
v-model:visible="menuVisible"
:position="menuPosition"
:items="menuItems"
:max-height="200"
@item-click="handleMenuItemClick"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ContextMenu from './ContextMenu.vue'
import type { ContextMenuItem } from './types'
const menuVisible = ref(false)
const menuPosition = ref({ x: 0, y: 0 })
// 创建大量菜单项用于测试滚动
const menuItems = ref<ContextMenuItem[]>([
{
id: 'play',
label: '播放',
icon: '▶'
},
{
id: 'pause',
label: '暂停',
icon: '⏸'
},
{
id: 'separator-1',
separator: true
},
{
id: 'add-to-playlist',
label: '添加到播放列表',
icon: ''
},
{
id: 'remove-from-playlist',
label: '从播放列表移除',
icon: ''
},
{
id: 'separator-2',
separator: true
},
{
id: 'download',
label: '下载歌曲',
icon: '⬇️'
},
{
id: 'share',
label: '分享',
icon: '↗️'
},
{
id: 'separator-3',
separator: true
},
{
id: 'info',
label: '歌曲信息',
icon: ''
},
{
id: 'edit-tags',
label: '编辑标签',
icon: '✏️'
},
{
id: 'separator-4',
separator: true
},
{
id: 'rate-1',
label: '评分:★☆☆☆☆',
icon: '⭐'
},
{
id: 'rate-2',
label: '评分:★★☆☆☆',
icon: '⭐'
},
{
id: 'rate-3',
label: '评分:★★★☆☆',
icon: '⭐'
},
{
id: 'rate-4',
label: '评分:★★★★☆',
icon: '⭐'
},
{
id: 'rate-5',
label: '评分:★★★★★',
icon: '⭐'
},
{
id: 'separator-5',
separator: true
},
{
id: 'create-station',
label: '创建电台',
icon: '📻'
},
{
id: 'similar-songs',
label: '相似歌曲',
icon: '🎵'
},
{
id: 'separator-6',
separator: true
},
{
id: 'copy-link',
label: '复制链接',
icon: '🔗'
},
{
id: 'properties',
label: '属性',
icon: '📋'
},
{
id: 'separator-7',
separator: true
},
{
id: 'delete',
label: '删除',
icon: '🗑️',
className: 'danger'
}
])
const handleContextMenu = (event: MouseEvent) => {
menuPosition.value = {
x: event.clientX,
y: event.clientY
}
menuVisible.value = true
}
const handleMenuItemClick = (item: ContextMenuItem) => {
console.log('菜单项点击:', item.label)
// 这里可以添加具体的菜单项处理逻辑
}
</script>
<style scoped>
.demo-container {
padding: 20px;
font-family: Arial, sans-serif;
}
.test-area {
margin: 20px 0;
}
.test-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.2s;
}
.test-box:hover {
background-color: #f5f5f5;
}
.danger {
color: #ff4444 !important;
}
</style>

View File

@@ -0,0 +1,4 @@
export { default as ContextMenu } from './ContextMenu.vue'
export * from './types'
export * from './utils'
export * from './composables'

View File

@@ -0,0 +1,101 @@
/**
* 右键菜单位置类型定义
*/
export interface ContextMenuPosition {
x: number
y: number
}
/**
* 右键菜单项类型定义
*/
export interface ContextMenuItem {
/** 菜单项唯一标识 */
id: string
/** 显示文本 */
label?: string
/** 图标组件 */
icon?: any
/** 是否禁用 */
disabled?: boolean
/** 是否显示分隔线 */
separator?: boolean
/** 子菜单项 */
children?: ContextMenuItem[]
/** 点击回调函数 */
onClick?: (item: ContextMenuItem, event: MouseEvent) => void
/** 自定义CSS类名 */
className?: string
}
/**
* 右键菜单配置属性
*/
export interface ContextMenuProps {
/** 是否显示菜单 */
visible: boolean
/** 菜单位置 */
position: ContextMenuPosition
/** 菜单项列表 */
items: ContextMenuItem[]
/** 自定义CSS类名 */
className?: string
/** 菜单宽度 */
width?: number
/** 最大高度(超出时显示滚动条) */
maxHeight?: number
/** 菜单层级 */
zIndex?: number
/** 关闭菜单回调 */
onClose?: () => void
/** 菜单项点击回调 */
onItemClick?: (item: ContextMenuItem, event: MouseEvent) => void
}
/**
* 边缘检测配置
*/
export interface EdgeDetectionConfig {
/** 距离边缘的阈值(像素) */
threshold: number
/** 是否启用边缘检测 */
enabled: boolean
}
/**
* 动画配置
*/
export interface AnimationConfig {
/** 动画持续时间(毫秒) */
duration: number
/** 动画缓动函数 */
easing: string
/** 是否启用动画 */
enabled: boolean
}
/**
* 滚动配置
*/
export interface ScrollConfig {
/** 滚动条宽度 */
scrollbarWidth: number
/** 滚动速度 */
scrollSpeed: number
/** 是否显示滚动条 */
showScrollbar: boolean
}
/**
* 右键菜单实例方法
*/
export interface ContextMenuInstance {
/** 显示菜单 */
show: (position: ContextMenuPosition, items?: ContextMenuItem[]) => void
/** 隐藏菜单 */
hide: () => void
/** 更新菜单位置 */
updatePosition: (position: ContextMenuPosition) => void
/** 更新菜单项 */
updateItems: (items: ContextMenuItem[]) => void
}

View File

@@ -0,0 +1,266 @@
import type { ContextMenuItem, ContextMenuPosition } from './types'
/**
* 创建标准菜单项
*/
export function createMenuItem(
id: string,
label: string,
options?: {
icon?: any
disabled?: boolean
separator?: boolean
children?: ContextMenuItem[]
onClick?: (item: ContextMenuItem, event: MouseEvent) => void
className?: string
}
): ContextMenuItem {
return {
id,
label,
icon: options?.icon,
disabled: options?.disabled || false,
separator: options?.separator || false,
children: options?.children,
onClick: options?.onClick,
className: options?.className
}
}
/**
* 创建分隔线菜单项
*/
export function createSeparator(): ContextMenuItem {
return {
id: `separator-${Date.now()}`,
label: '',
separator: true
}
}
/**
* 计算菜单位置,确保在可视区域内
*/
export function calculateMenuPosition(
event: MouseEvent,
menuWidth: number = 200,
menuHeight: number = 400
): ContextMenuPosition {
const viewportWidth = window.innerWidth
const viewportHeight = window.innerHeight
const threshold = 10
let x = event.clientX
let y = event.clientY
// 水平边缘检测
if (x + menuWidth > viewportWidth - threshold) {
x = viewportWidth - menuWidth - threshold
} else if (x < threshold) {
x = threshold
}
// 垂直边缘检测
if (y + menuHeight > viewportHeight - threshold) {
y = viewportHeight - menuHeight - threshold
} else if (y < threshold) {
y = threshold
}
return { x, y }
}
/**
* 防抖函数
*/
export function debounce<T extends (...args: any[]) => any>(
func: T,
delay: number
): (...args: Parameters<T>) => void {
let timeoutId: NodeJS.Timeout
return (...args: Parameters<T>) => {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => func(...args), delay)
}
}
/**
* 节流函数
*/
export function throttle<T extends (...args: any[]) => any>(
func: T,
limit: number
): (...args: Parameters<T>) => void {
let inThrottle: boolean
return (...args: Parameters<T>) => {
if (!inThrottle) {
func(...args)
inThrottle = true
setTimeout(() => (inThrottle = false), limit)
}
}
}
/**
* 深度克隆菜单项(避免引用问题)
*/
export function cloneMenuItem(item: ContextMenuItem): ContextMenuItem {
return {
...item,
children: item.children ? item.children.map(cloneMenuItem) : undefined
}
}
/**
* 扁平化菜单项(用于搜索等功能)
*/
export function flattenMenuItems(items: ContextMenuItem[]): ContextMenuItem[] {
const result: ContextMenuItem[] = []
items.forEach((item) => {
result.push(item)
if (item.children && item.children.length > 0) {
result.push(...flattenMenuItems(item.children))
}
})
return result
}
/**
* 根据ID查找菜单项
*/
export function findMenuItemById(items: ContextMenuItem[], id: string): ContextMenuItem | null {
for (const item of items) {
if (item.id === id) {
return item
}
if (item.children && item.children.length > 0) {
const found = findMenuItemById(item.children, id)
if (found) {
return found
}
}
}
return null
}
/**
* 验证菜单项配置
*/
export function validateMenuItem(item: ContextMenuItem): boolean {
if (!item.id || typeof item.id !== 'string') {
console.warn('菜单项必须包含有效的id字段')
return false
}
if (!item.separator && (!item.label || typeof item.label !== 'string')) {
console.warn('非分隔线菜单项必须包含有效的label字段')
return false
}
if (item.children && !Array.isArray(item.children)) {
console.warn('children字段必须是数组')
return false
}
return true
}
/**
* 验证菜单项列表
*/
export function validateMenuItems(items: ContextMenuItem[]): boolean {
if (!Array.isArray(items)) {
console.warn('菜单项列表必须是数组')
return false
}
return items.every(validateMenuItem)
}
/**
* 过滤可见菜单项(移除禁用项和空分隔线)
*/
export function filterVisibleItems(items: ContextMenuItem[]): ContextMenuItem[] {
return items.filter((item) => {
if (item.disabled) return false
if (item.separator && !item.label) return true // 保留纯分隔线
return true
})
}
/**
* 菜单项排序工具
*/
export function sortMenuItems(
items: ContextMenuItem[],
compareFn?: (a: ContextMenuItem, b: ContextMenuItem) => number
): ContextMenuItem[] {
const sorted = [...items]
sorted.sort(
compareFn ||
((a, b) => {
if (!a.label || !b.label) return 0
return a.label.localeCompare(b.label)
})
)
// 递归排序子菜单
return sorted.map((item) => ({
...item,
children: item.children ? sortMenuItems(item.children, compareFn) : undefined
}))
}
/**
* 菜单项分组工具
*/
export function groupMenuItems(items: ContextMenuItem[], groupSize: number = 5): ContextMenuItem[] {
const result: ContextMenuItem[] = []
let currentGroup: ContextMenuItem[] = []
items.forEach((item, index) => {
currentGroup.push(item)
if (currentGroup.length >= groupSize || index === items.length - 1) {
if (currentGroup.length > 0) {
result.push(...currentGroup)
if (index < items.length - 1) {
result.push(createSeparator())
}
currentGroup = []
}
}
})
return result
}
/**
* 菜单项搜索工具
*/
export function searchMenuItems(items: ContextMenuItem[], searchText: string): ContextMenuItem[] {
if (!searchText.trim()) return items
const lowerSearchText = searchText.toLowerCase()
return items.filter((item) => {
if (item.separator) return true
if (!item.label) return false
const matches = item.label.toLowerCase().includes(lowerSearchText)
if (matches) return true
if (item.children && item.children.length > 0) {
const matchingChildren = searchMenuItems(item.children, searchText)
if (matchingChildren.length > 0) {
item.children = matchingChildren
return true
}
}
return false
})
}

View File

@@ -2,7 +2,7 @@
<div class="song-virtual-list">
<!-- 表头 -->
<div class="list-header">
<div v-if="showIndex" class="col-index"></div>
<div v-if="showIndex" class="col-index">#</div>
<div class="col-title">标题</div>
<div v-if="showAlbum" class="col-album">专辑</div>
<div class="col-like">喜欢</div>
@@ -19,6 +19,7 @@
class="song-item"
@mouseenter="hoveredSong = song.id || song.songmid"
@mouseleave="hoveredSong = null"
@contextmenu="handleContextMenu($event, song)"
>
<!-- 序号或播放状态图标 -->
<div v-if="showIndex" class="col-index">
@@ -90,12 +91,33 @@
</div>
</div>
</div>
<!-- 右键菜单 -->
<ContextMenu
v-model:visible="contextMenuVisible"
:position="contextMenuPosition"
:items="contextMenuItems"
@item-click="handleContextMenuItemClick"
@close="closeContextMenu"
/>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue'
import { DownloadIcon } from 'tdesign-icons-vue-next'
import { ref, computed, onMounted, nextTick, toRaw } from 'vue'
import {
DownloadIcon,
PlayCircleIcon,
AddIcon,
FolderIcon,
DeleteIcon
} from 'tdesign-icons-vue-next'
import ContextMenu from '../ContextMenu/ContextMenu.vue'
import { createMenuItem, createSeparator, calculateMenuPosition } from '../ContextMenu/utils'
import type { ContextMenuItem, ContextMenuPosition } from '../ContextMenu/types'
import songListAPI from '@renderer/api/songList'
import type { SongList } from '@common/types/songList'
import { MessagePlugin } from 'tdesign-vue-next'
interface Song {
id?: number
@@ -120,6 +142,8 @@ interface Props {
showIndex?: boolean
showAlbum?: boolean
showDuration?: boolean
isLocalPlaylist?: boolean
playlistId?: string
}
const props = withDefaults(defineProps<Props>(), {
@@ -127,10 +151,19 @@ const props = withDefaults(defineProps<Props>(), {
isPlaying: false,
showIndex: true,
showAlbum: true,
showDuration: true
showDuration: true,
isLocalPlaylist: false,
playlistId: ''
})
const emit = defineEmits(['play', 'pause', 'addToPlaylist', 'download', 'scroll'])
const emit = defineEmits([
'play',
'pause',
'addToPlaylist',
'download',
'scroll',
'removeFromLocalPlaylist'
])
// 虚拟滚动相关状态
const scrollContainer = ref<HTMLElement>()
@@ -142,6 +175,14 @@ const scrollTop = ref(0)
const visibleStartIndex = ref(0)
const visibleEndIndex = ref(0)
// 右键菜单相关状态
const contextMenuVisible = ref(false)
const contextMenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
const contextMenuSong = ref<Song | null>(null)
// 歌单列表
const playlists = ref<SongList[]>([])
// 计算总高度
const totalHeight = computed(() => props.songs.length * itemHeight)
@@ -236,6 +277,131 @@ const onScroll = (event: Event) => {
emit('scroll', event)
}
// 右键菜单项配置
const contextMenuItems = computed((): ContextMenuItem[] => {
const baseItems: ContextMenuItem[] = [
createMenuItem('play', '播放', {
icon: PlayCircleIcon,
onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
if (contextMenuSong.value) {
handlePlay(contextMenuSong.value)
}
}
}),
createMenuItem('addToPlaylist', '添加到播放列表', {
icon: AddIcon,
onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
if (contextMenuSong.value) {
handleAddToPlaylist(contextMenuSong.value)
}
}
})
]
// 如果有歌单,添加"加入歌单"子菜单
if (playlists.value.length > 0) {
baseItems.push(
createMenuItem('addToSongList', '加入歌单', {
icon: FolderIcon,
children: playlists.value.map((playlist) =>
createMenuItem(`playlist_${playlist.id}`, playlist.name, {
onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
if (contextMenuSong.value) {
handleAddToSongList(contextMenuSong.value, playlist)
}
}
})
)
})
)
}
baseItems.push(
createMenuItem('download', '下载', {
icon: DownloadIcon,
onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
if (contextMenuSong.value) {
emit('download', contextMenuSong.value)
}
}
})
)
// 添加分隔线
baseItems.push(createSeparator())
// 如果是本地歌单,添加"移出本地歌单"选项
if (props.isLocalPlaylist) {
baseItems.push(
createMenuItem('removeFromLocalPlaylist', '移出当前歌单', {
icon: DeleteIcon,
onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
if (contextMenuSong.value) {
emit('removeFromLocalPlaylist', contextMenuSong.value)
}
}
})
)
}
return baseItems
})
// 处理右键菜单
const handleContextMenu = (event: MouseEvent, song: Song) => {
event.preventDefault()
event.stopPropagation()
// 设置菜单数据
contextMenuSong.value = song
// 使用智能位置计算,确保菜单在可视区域内
contextMenuPosition.value = calculateMenuPosition(event, 240, 300)
// 直接显示菜单
contextMenuVisible.value = true
}
// 处理右键菜单项点击
const handleContextMenuItemClick = (_item: ContextMenuItem, _event: MouseEvent) => {
// 菜单项的 onClick 回调已经在 ContextMenuItem 组件中调用
// 这里不需要额外关闭菜单ContextMenu 组件会处理关闭逻辑
// 避免重复关闭导致菜单显示问题
}
// 关闭右键菜单
const closeContextMenu = () => {
contextMenuVisible.value = false
contextMenuSong.value = null
}
// 加载歌单列表
const loadPlaylists = async () => {
try {
const result = await songListAPI.getAll()
if (result.success) {
playlists.value = result.data || []
} else {
console.error('加载歌单失败:', result.error)
}
} catch (error) {
console.error('加载歌单失败:', error)
}
}
// 添加歌曲到歌单
const handleAddToSongList = async (song: Song, playlist: SongList) => {
try {
const result = await songListAPI.addSongs(playlist.id, [toRaw(song) as any])
if (result.success) {
MessagePlugin.success(`已将"${song.name}"添加到歌单"${playlist.name}"`)
} else {
MessagePlugin.error(result.error || '添加到歌单失败')
}
} catch (error) {
console.error('添加到歌单失败:', error)
MessagePlugin.error('添加到歌单失败')
}
}
onMounted(() => {
// 组件挂载后触发一次重新计算
nextTick(() => {
@@ -245,6 +411,9 @@ onMounted(() => {
onScroll(event)
}
})
// 加载歌单列表
loadPlaylists()
})
</script>
@@ -286,7 +455,7 @@ onMounted(() => {
}
.col-title {
padding-left: 10px;
padding-left: 20px;
display: flex;
align-items: center;
}

View File

@@ -2,7 +2,7 @@
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { ControlAudioStore } from '@renderer/store/ControlAudio'
import { storeToRefs } from 'pinia'
import audioManager from '@renderer/utils/audioManager'
import audioManager from '@renderer/utils/audio/audioManager'
interface Props {
show?: boolean

View File

@@ -12,11 +12,16 @@ import {
import type { SongList } from '@renderer/types/audio'
import type { LyricLine } from '@applemusic-like-lyrics/core'
import { ref, computed, onMounted, watch, reactive, onBeforeUnmount, toRaw } from 'vue'
import { shouldUseBlackText } from '@renderer/utils/contrastColor'
import { shouldUseBlackText } from '@renderer/utils/color/contrastColor'
import { ControlAudioStore } from '@renderer/store/ControlAudio'
import { Fullscreen1Icon, FullscreenExit1Icon, ChevronDownIcon } from 'tdesign-icons-vue-next'
// 直接从包路径导入,避免 WebAssembly 导入问题
import { parseYrc, parseLrc, parseTTML } from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
import {
parseYrc,
parseLrc,
parseTTML,
parseQrc
} from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
import _ from 'lodash'
import { storeToRefs } from 'pinia'
@@ -151,7 +156,11 @@ watch(
if (lyricData.crlyric) {
// 使用逐字歌词
lyricText = lyricData.crlyric
parsedLyrics = parseYrc(lyricText)
if (source === 'tx') {
parsedLyrics = parseQrc(lyricText)
} else {
parsedLyrics = parseYrc(lyricText)
}
console.log(`使用${source}逐字歌词`, parsedLyrics)
} else if (lyricData.lyric) {
lyricText = lyricData.lyric
@@ -347,13 +356,14 @@ const lightMainColor = computed(() => {
:lyric-lines="props.show ? state.lyricLines : []"
:current-time="state.currentTime"
class="lyric-player"
:enable-spring="true"
:enable-scale="true"
@line-click="
(e) => {
if (Audio.audio) Audio.audio.currentTime = e.line.getLine().startTime / 1000
}
"
>
<template #bottom-line> Test Bottom Line </template>
</LyricPlayer>
</div>
</div>
@@ -681,8 +691,8 @@ const lightMainColor = computed(() => {
// bottom: max(2vw, 29px);
height: 200%;
transform: translateY(-25%);
height: 100%;
// transform: translateY(-25%);
* [class^='lyricMainLine'] {
font-weight: 600 !important;

View File

@@ -18,16 +18,16 @@ const { liebiao, shengyin } = icons
import { storeToRefs } from 'pinia'
import FullPlay from './FullPlay.vue'
import PlaylistDrawer from './PlaylistDrawer.vue'
import { extractDominantColor } from '@renderer/utils/colorExtractor'
import { getBestContrastTextColorWithOpacity } from '@renderer/utils/contrastColor'
import { extractDominantColor } from '@renderer/utils/color/colorExtractor'
import { getBestContrastTextColorWithOpacity } from '@renderer/utils/color/contrastColor'
import { PlayMode, type SongList } from '@renderer/types/audio'
import { MessagePlugin } from 'tdesign-vue-next'
import {
initPlaylistEventListeners,
destroyPlaylistEventListeners,
getSongRealUrl
} from '@renderer/utils/playlistManager'
import mediaSessionController from '@renderer/utils/useSmtc'
} from '@renderer/utils/playlist/playlistManager'
import mediaSessionController from '@renderer/utils/audio/useSmtc'
import defaultCoverImg from '/default-cover.png'
const controlAudio = ControlAudioStore()
@@ -180,20 +180,12 @@ const playSong = async (song: SongList) => {
let urlToPlay = ''
// 如果没有URL需要获取URL
if (!urlToPlay) {
// eslint-disable-next-line no-useless-catch
try {
urlToPlay = await getSongRealUrl(toRaw(song))
// 同时更新播放列表中对应歌曲的URL
const playlistIndex = list.value.findIndex((item) => item.songmid === song.songmid)
if (playlistIndex !== -1) {
;(list.value[playlistIndex] as any).url = urlToPlay
}
} catch (error) {
throw error
}
// 获取URL
// eslint-disable-next-line no-useless-catch
try {
urlToPlay = await getSongRealUrl(toRaw(song))
} catch (error) {
throw error
}
// 先停止当前播放

View File

@@ -8,7 +8,7 @@ import {
importPlaylistFromFile,
importPlaylistFromClipboard,
validateImportedPlaylist
} from '@renderer/utils/playlistExportImport'
} from '@renderer/utils/playlist/playlistExportImport'
import { CloudDownloadIcon } from 'tdesign-icons-vue-next'
import type { SongList } from '@renderer/types/audio'
import { storeToRefs } from 'pinia'

View File

@@ -124,10 +124,20 @@ const currentOperatingSong = ref<any>(null)
// 统一的鼠标/触摸事件处理
const handleMouseDown = (event: MouseEvent, index: number, song: any) => {
// 检查是否点击了删除按钮或其子元素
const target = event.target as HTMLElement
if (target.closest('.song-remove')) {
return // 如果点击的是删除按钮,直接返回,不处理拖拽逻辑
}
handlePointerStart(event, index, song, false)
}
const handleTouchStart = (event: TouchEvent, index: number, song: any) => {
// 检查是否点击了删除按钮或其子元素
const target = event.target as HTMLElement
if (target.closest('.song-remove')) {
return // 如果点击的是删除按钮,直接返回,不处理拖拽逻辑
}
handlePointerStart(event, index, song, true)
}
@@ -527,6 +537,33 @@ defineExpose({
color: #ccc;
}
/* 全屏模式下的滚动条样式 - 只显示滑块 */
.playlist-container .playlist-content {
scrollbar-width: thin;
scrollbar-color: rgba(91, 91, 91, 0.3) transparent;
}
.playlist-container.full-screen-mode .playlist-content {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar {
width: 8px;
}
.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-track {
background: transparent;
}
.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
.playlist-container.full-screen-mode .playlist-song:hover {
background-color: rgba(255, 255, 255, 0.1);
}
@@ -579,7 +616,7 @@ defineExpose({
.playlist-content {
flex: 1;
overflow-y: auto;
scrollbar-width: none;
// scrollbar-width: none;
margin: 10px 0;
padding: 0 8px;
}

View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
import { extractColors, Color } from '@renderer/utils/colorExtractor'
import { extractColors, Color } from '@renderer/utils/color/colorExtractor'
import DefaultCover from '@renderer/assets/images/Default.jpg'
import CoverImage from '@renderer/assets/images/cover.png'
@@ -40,7 +40,7 @@ const actualCoverImage = computed(() => {
const vertexShaderSource = `
attribute vec2 a_position;
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
v_texCoord = a_position * 0.5 + 0.5;
@@ -53,81 +53,81 @@ const fragmentShaderSource = `
varying vec2 v_texCoord;
uniform float u_time;
uniform vec3 u_color;
// 改进的随机函数 - 更平滑
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
// 改进的噪声函数 - 使用三次Hermite插值更平滑
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
// 四个角的随机值
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
// 使用三次Hermite插值更加平滑
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) +
(c - a) * u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}
// 改进的分数布朗运动 - 降低频率,减少网格感
float fbm(vec2 st) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 0.6; // 降低初始频率
// 减少迭代次数,使用更平滑的混合
for (int i = 0; i < 4; i++) { // 减少迭代次数
value += amplitude * noise(st * frequency);
frequency *= 1.8; // 降低频率增长率
amplitude *= 0.6; // 提高振幅衰减率
}
// 额外的平滑处理
return smoothstep(0.2, 0.8, value);
}
// HSV转RGB颜色
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main() {
// 使用时间和位置创建动态效果
vec2 st = v_texCoord;
float time = u_time * 0.20; // 降低时间速率,使动画更平滑
// 创建更平滑的移动噪声场
vec2 q = vec2(
fbm(st + vec2(0.0, time * 0.3)),
fbm(st + vec2(time * 0.2, 0.0))
);
// 使用q创建第二层噪声降低强度
vec2 r = vec2(
fbm(st + 2.0 * q + vec2(1.7, 9.2) + time * 0.1),
fbm(st + 2.0 * q + vec2(8.3, 2.8) + time * 0.08)
);
// 最终的噪声值 - 额外平滑处理
float f = fbm(st + r * 0.7);
// 从主色调提取HSV
vec3 baseColor = u_color;
float maxComp = max(max(baseColor.r, baseColor.g), baseColor.b);
float minComp = min(min(baseColor.r, baseColor.g), baseColor.b);
float delta = maxComp - minComp;
// 估算色相
float hue = 0.0;
if (delta > 0.0) {
@@ -140,78 +140,78 @@ const fragmentShaderSource = `
}
hue /= 6.0;
}
// 估算饱和度和明度
float saturation = maxComp == 0.0 ? 0.0 : delta / maxComp;
float value = maxComp;
// 提高基础亮度和饱和度,使颜色更加明亮清新
saturation = min(saturation * 1.0, 1.0); // 增加饱和度
value = min(value * 1.3, 1.0); // 增加亮度
// 创建多个颜色变体 - 更明亮的变体
vec3 color1 = hsv2rgb(vec3(hue, saturation * 0.9, min(value * 1.1, 1.0)));
vec3 color2 = hsv2rgb(vec3(mod(hue + 0.05, 1.0), min(saturation * 1.3, 1.0), min(value * 1.2, 1.0)));
vec3 color3 = hsv2rgb(vec3(mod(hue + 0.1, 1.0), min(saturation * 1.1, 1.0), min(value * 1.15, 1.0)));
vec3 color4 = hsv2rgb(vec3(mod(hue - 0.05, 1.0), min(saturation * 1.2, 1.0), min(value * 1.25, 1.0)));
// 使用噪声值混合多个颜色 - 更平滑的混合,使用更多主色调
float t1 = smoothstep(0.0, 1.0, f);
float t2 = sin(f * 3.14) * 0.5 + 0.5;
float t3 = cos(f * 2.0 + time * 0.5) * 0.5 + 0.5;
float t4 = sin(f * 4.0 + time * 0.3) * 0.5 + 0.5; // 额外的混合因子
// 创建两个额外的颜色变体,增加色彩丰富度
vec3 color5 = hsv2rgb(vec3(mod(hue + 0.15, 1.0), min(saturation * 1.4, 1.0), min(value * 1.3, 1.0)));
vec3 color6 = hsv2rgb(vec3(mod(hue - 0.15, 1.0), min(saturation * 1.3, 1.0), min(value * 1.2, 1.0)));
// 混合所有颜色
vec3 colorMix1 = mix(color1, color2, t1);
vec3 colorMix2 = mix(color3, color4, t2);
vec3 colorMix3 = mix(color5, color6, t4);
vec3 color = mix(
mix(colorMix1, colorMix2, t3),
colorMix3,
sin(f * 2.5 + time * 0.4) * 0.5 + 0.5
);
// 添加更多的动态亮点和波纹
color += 0.15 * sin(f * 8.0 + time) * vec3(1.0);
// 增加波纹效果
float ripple1 = sin(st.x * 12.0 + time * 0.8) * sin(st.y * 12.0 + time * 0.7) * 0.06;
float ripple2 = sin(st.x * 8.0 - time * 0.6) * sin(st.y * 8.0 - time * 0.5) * 0.05;
float ripple3 = sin(st.x * 15.0 + time * 0.4) * sin(st.y * 15.0 + time * 0.3) * 0.04;
// 混合多层波纹
color += vec3(ripple1 + ripple2 + ripple3);
// 添加更大范围、更柔和的光晕效果
float glow = smoothstep(0.3, 0.7, f);
color = mix(color, vec3(1.0), glow * 0.12);
// 添加柔和的渐变效果,进一步减少网格感
float vignette = smoothstep(0.0, 0.7, 0.5 - length(st - 0.5));
color = mix(color, color * 1.2, vignette * 0.3);
// 应用高斯模糊效果,减少锐利的网格边缘
vec2 pixel = vec2(1.0) / vec2(800.0, 600.0); // 假设的分辨率
float blur = 0.0;
// 简化的高斯模糊 - 只采样几个点以保持性能
blur += f * 0.5;
blur += fbm(st + pixel * vec2(1.0, 0.0)) * 0.125;
blur += fbm(st + pixel * vec2(-1.0, 0.0)) * 0.125;
blur += fbm(st + pixel * vec2(0.0, 1.0)) * 0.125;
blur += fbm(st + pixel * vec2(0.0, -1.0)) * 0.125;
// 使用模糊值平滑颜色过渡
color = mix(color, mix(color1, color4, 0.5), (blur - f) * 0.2);
// 确保颜色在有效范围内
color = clamp(color, 0.0, 1.0);
gl_FragColor = vec4(color, 1.0);
}
`

View File

@@ -0,0 +1,324 @@
<template>
<t-dialog
v-model:visible="visible"
:header="dialogTitle"
:width="dialogWidth"
:close-btn="true"
:close-on-overlay-click="false"
:destroy-on-close="true"
placement="center"
@close="handleClose"
>
<template #body>
<div class="plugin-notice-content">
<!-- 通知消息 -->
<div class="notice-message">
<p class="message-text">{{ notice?.message }}</p>
<!-- 更新通知的额外信息 -->
<div v-if="notice?.dialogType === 'update'" class="update-info">
<div class="version-info">
<span class="version-label">当前版本:</span>
<span class="version-value">{{ notice?.currentVersion || 'Unknown' }}</span>
</div>
<div class="version-info">
<span class="version-label">新版本:</span>
<span class="version-value new-version">{{ notice?.newVersion || 'Unknown' }}</span>
</div>
<div v-if="notice?.pluginType" class="plugin-type">
<span class="type-label">插件类型:</span>
<t-tag :theme="notice.pluginType === 'cr' ? 'primary' : 'success'" size="small">
{{ notice.pluginType === 'cr' ? 'CeruMusic' : 'LX Music' }}
</t-tag>
</div>
</div>
</div>
</div>
</template>
<template #footer>
<div class="dialog-actions">
<t-button
v-for="action in notice?.actions || []"
:key="action.type"
:theme="action.primary ? 'primary' : 'default'"
:loading="actionLoading === action.type"
@click="handleAction(action.type)"
>
{{ action.text }}
</t-button>
</div>
</template>
</t-dialog>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
interface DialogNotice {
type: string
data: any
timestamp: number
pluginName: string
dialogType: 'update' | 'info' | 'error' | 'warning' | 'success'
title: string
message: string
updateUrl?: string
pluginType?: 'lx' | 'cr'
currentVersion?: string
newVersion?: string
actions: Array<{
text: string
type: 'cancel' | 'update' | 'confirm'
primary?: boolean
}>
}
// 响应式数据
const visible = ref(false)
const notice = ref<DialogNotice | null>(null)
const actionLoading = ref<string | null>(null)
const noticeQueue = ref<DialogNotice[]>([]) // 通知队列
// 计算属性
const dialogWidth = computed(() => {
return notice.value?.dialogType === 'update' ? '500px' : '400px'
})
// 对话框标题(包含队列信息)
const dialogTitle = computed(() => {
const baseTitle = notice.value?.title || '插件通知'
const queueLength = noticeQueue.value.length
if (queueLength > 0) {
return `${baseTitle} (还有 ${queueLength} 个通知)`
}
return baseTitle
})
// 显示通知对话框
const showNotice = (noticeData: DialogNotice) => {
// 添加到队列
noticeQueue.value.push(noticeData)
console.log('[PluginNotice] 添加通知到队列:', noticeData, '队列长度:', noticeQueue.value.length)
// 如果当前没有显示对话框,立即显示
if (!visible.value) {
showNextNotice()
}
}
// 显示队列中的下一个通知
const showNextNotice = () => {
if (noticeQueue.value.length === 0) {
return
}
const nextNotice = noticeQueue.value.shift()
if (nextNotice) {
notice.value = nextNotice
visible.value = true
console.log(
'[PluginNotice] 显示下一个通知:',
nextNotice,
'剩余队列长度:',
noticeQueue.value.length
)
}
}
// 处理操作按钮点击
const handleAction = async (actionType: string) => {
if (!notice.value) return
actionLoading.value = actionType
try {
console.log('[PluginNotice] 处理操作:', actionType, notice.value)
if (actionType === 'update' && notice.value.updateUrl) {
window.open(notice.value.updateUrl)
handleClose()
} else if (actionType === 'cancel') {
// 取消操作直接关闭
handleClose()
} else {
// 其他操作直接关闭对话框
handleClose()
}
} catch (error: any) {
console.error('[PluginNotice] 处理操作失败:', error)
MessagePlugin.error(`操作失败: ${error.message}`)
} finally {
actionLoading.value = null
}
}
// 处理对话框关闭
const handleClose = () => {
visible.value = false
notice.value = null
actionLoading.value = null
// 延迟一点时间后显示下一个通知,避免对话框切换过快
setTimeout(() => {
showNextNotice()
}, 300)
}
// 监听插件通知事件
const handlePluginNotice = (noticeData: DialogNotice) => {
showNotice(noticeData)
}
let event: () => void
// 生命周期
onMounted(() => {
// 监听来自主进程的插件通知
event = window.api.pluginNotice.onPluginNotice(handlePluginNotice)
})
onUnmounted(() => {
event()
// 清空队列
noticeQueue.value = []
})
// 暴露方法给父组件
defineExpose({
showNotice,
getQueueLength: () => noticeQueue.value.length,
clearQueue: () => {
noticeQueue.value = []
console.log('[PluginNotice] 清空通知队列')
}
})
</script>
<style scoped lang="scss">
.plugin-notice-content {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
.notice-icon {
flex-shrink: 0;
.icon-update {
color: #0052d9;
}
.icon-error {
color: #e34d59;
}
.icon-warning {
color: #ed7b2f;
}
.icon-success {
color: #00a870;
}
.icon-info {
color: #0052d9;
}
}
.notice-message {
flex: 1;
.message-text {
margin: 0 0 16px 0;
font-size: 14px;
line-height: 1.5;
color: var(--td-text-color-primary);
}
.update-info {
background: var(--td-bg-color-container);
border-radius: 6px;
padding: 20px;
margin: 0 10px;
border: 1px solid var(--td-border-level-1-color);
.version-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.version-label {
font-size: 12px;
color: var(--td-text-color-secondary);
}
.version-value {
font-size: 12px;
font-weight: 500;
color: var(--td-text-color-primary);
&.new-version {
color: var(--td-brand-color);
}
}
}
.plugin-type {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--td-border-level-2-color);
.type-label {
font-size: 12px;
color: var(--td-text-color-secondary);
}
}
}
}
}
.dialog-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
// 响应式设计
@media (max-width: 768px) {
.plugin-notice-content {
flex-direction: column;
text-align: center;
.notice-icon {
align-self: center;
}
}
.dialog-actions {
flex-direction: column-reverse;
:deep(.t-button) {
width: 100%;
}
}
}
// 深色主题适配
:deep(.t-dialog) {
.t-dialog__header {
border-bottom: 1px solid var(--td-border-level-1-color);
}
.t-dialog__footer {
border-top: 1px solid var(--td-border-level-1-color);
}
}
</style>

View File

@@ -1,162 +0,0 @@
# 主题切换组件使用说明
## 概述
ThemeSelector 是一个现代化的主题切换组件,支持在多个预设主题色之间切换。组件与现有的 TDesign 主题系统完全兼容。
## 功能特性
- ✅ 支持多种预设主题色(默认、粉色、蓝色、青色、橙色)
- ✅ 使用 `theme-mode` 属性实现主题切换
- ✅ 自动保存用户选择到本地存储
- ✅ 现代化的下拉选择界面
- ✅ 平滑的过渡动画效果
- ✅ 响应式设计,支持移动端
- ✅ 与 TDesign 主题系统完全兼容
## 使用方法
### 1. 基本使用
```vue
<template>
<div>
<!-- 在任何需要的地方使用主题切换器 -->
<ThemeSelector />
</div>
</template>
<script setup>
import ThemeSelector from '@/components/ThemeSelector.vue'
</script>
```
### 2. 在导航栏中使用
```vue
<template>
<header class="app-header">
<h1>应用标题</h1>
<div class="header-actions">
<ThemeSelector />
</div>
</header>
</template>
```
### 3. 在设置页面中使用
```vue
<template>
<div class="settings-page">
<div class="setting-item">
<label>主题色</label>
<ThemeSelector />
</div>
</div>
</template>
```
## 主题切换原理
组件通过以下方式实现主题切换:
1. **默认主题**: 移除 `theme-mode` 属性
```javascript
document.documentElement.removeAttribute('theme-mode')
```
2. **其他主题**: 设置对应的 `theme-mode` 属性
```javascript
document.documentElement.setAttribute('theme-mode', 'pink')
```
## 支持的主题
| 主题名称 | 属性值 | 主色调 |
| -------- | --------- | ------- |
| 默认 | `default` | #57b4ff |
| 粉色 | `pink` | #fc5e7e |
| 蓝色 | `blue` | #57b4ff |
| 青色 | `cyan` | #3ac2b8 |
| 橙色 | `orange` | #fb9458 |
## 自定义配置
如果需要添加新的主题,请按以下步骤操作:
### 1. 创建主题CSS文件
在 `src/renderer/src/assets/theme/` 目录下创建新的主题文件,例如 `green.css`
```css
:root[theme-mode='green'] {
--td-brand-color: #10b981;
--td-brand-color-hover: #059669;
/* 其他主题变量... */
}
```
### 2. 更新组件配置
在 `ThemeSelector.vue` 中添加新主题:
```javascript
const themes = [
// 现有主题...
{ name: 'green', label: '绿色', color: '#10b981' }
]
```
## 样式自定义
组件使用 TDesign 的 CSS 变量,可以通过覆盖这些变量来自定义样式:
```css
.theme-selector {
/* 自定义触发器样式 */
--td-radius-medium: 8px;
}
.theme-dropdown {
/* 自定义下拉菜单样式 */
--td-shadow-2: 0 8px 25px rgba(0, 0, 0, 0.15);
}
```
## 事件和回调
组件会自动处理主题切换和本地存储,无需额外配置。如果需要监听主题变化,可以监听 `localStorage` 的变化:
```javascript
// 监听主题变化
window.addEventListener('storage', (e) => {
if (e.key === 'selected-theme') {
console.log('主题已切换到:', e.newValue)
}
})
```
## 注意事项
1. 确保项目中已引入对应的主题CSS文件
2. 组件会自动加载用户上次选择的主题
3. 主题切换是全局的,会影响整个应用
4. 建议在应用的主入口处使用,避免重复渲染
## 演示组件
项目还包含一个 `ThemeDemo.vue` 组件,展示了主题切换的效果:
```vue
<template>
<ThemeDemo />
</template>
<script setup>
import ThemeDemo from '@/components/ThemeDemo.vue'
</script>
```
这个演示组件展示了不同UI元素在各种主题下的表现。

View File

@@ -1,86 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const keyword = ref('')
const isSearching = ref(false)
// 搜索类型1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
// 处理搜索事件
const handleSearch = async () => {
if (!keyword.value.trim()) return
isSearching.value = true
try {
// 调用搜索API
// 跳转到搜索结果页面,并传递搜索结果和关键词
router.push({
path: '/home/search',
query: { keyword: keyword.value }
})
} catch (error) {
console.error('搜索失败:', error)
} finally {
isSearching.value = false
}
}
// 处理按键事件,按下回车键时触发搜索
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch()
}
}
</script>
<template>
<div class="search-component">
<t-input
v-model="keyword"
placeholder="搜索音乐、歌手"
:loading="isSearching"
@keydown="handleKeyDown"
>
<template #suffix>
<t-button
theme="primary"
variant="text"
shape="square"
:disabled="isSearching"
@click="handleSearch"
>
<i class="iconfont icon-sousuo"></i>
</t-button>
</template>
</t-input>
</div>
</template>
<style lang="scss" scoped>
.search-component {
width: 100%;
:deep(.t-input) {
border-radius: 0rem !important;
border: none;
box-shadow: none;
}
:deep(.t-input__suffix) {
padding-right: 0.5rem;
}
.iconfont {
font-size: 1rem;
color: #6b7280;
transition: color 0.2s ease;
&:hover {
color: #f97316;
}
}
}
</style>

View File

@@ -25,7 +25,7 @@ const { settings } = storeToRefs(settingsStore)
const showFloatBall = ref(settings.value.showFloatBall !== false)
// 处理悬浮球开关切换
const handleFloatBallToggle = (val: boolean) => {
const handleFloatBallToggle = (val: any) => {
settingsStore.updateSettings({ showFloatBall: val })
}

View File

@@ -9,7 +9,7 @@ import {
importPlaylistFromFile,
importPlaylistFromClipboard,
validateImportedPlaylist
} from '@renderer/utils/playlistExportImport'
} from '@renderer/utils/playlist/playlistExportImport'
import type { SongList } from '@renderer/types/audio'
import { CloudDownloadIcon, DeleteIcon, CloudUploadIcon } from 'tdesign-icons-vue-next'

View File

@@ -0,0 +1,613 @@
<script setup lang="ts">
import TitleBarControls from '@renderer/components/TitleBarControls.vue'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { onMounted, ref, watchEffect, computed } from 'vue'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { useRouter } from 'vue-router'
import { searchValue } from '@renderer/store/search'
onMounted(() => {
const LocalUserDetail = LocalUserDetailStore()
watchEffect(() => {
source.value = sourceicon[LocalUserDetail.userSource.source || 'wy']
})
})
const sourceicon = {
kg: 'kugouyinle',
wy: 'wangyiyun',
mg: 'mg',
tx: 'tx',
kw: 'kw'
}
const source = ref('kugouyinle')
interface MenuItem {
name: string
icon: string
path: string
}
const menuList: MenuItem[] = [
{
name: '发现',
icon: 'icon-faxian',
path: '/home/find'
},
{
name: '本地',
icon: 'icon-music',
path: '/home/local'
},
{
name: '最近',
icon: 'icon-shijian',
path: '/home/recent'
}
]
const menuActive = ref(0)
const router = useRouter()
const source_list_show = ref(false)
// 检查是否有插件数据
const hasPluginData = computed(() => {
const LocalUserDetail = LocalUserDetailStore()
return !!(
LocalUserDetail.userInfo.pluginId &&
LocalUserDetail.userInfo.supportedSources &&
Object.keys(LocalUserDetail.userInfo.supportedSources).length > 0
)
})
// 音源名称映射
const sourceNames = {
wy: '网易云音乐',
kg: '酷狗音乐',
mg: '咪咕音乐',
tx: 'QQ音乐',
kw: '酷我音乐'
}
// 动态音源列表数据基于supportedSources
const sourceList = computed(() => {
const LocalUserDetail = LocalUserDetailStore()
const supportedSources = LocalUserDetail.userInfo.supportedSources
if (!supportedSources) return []
return Object.keys(supportedSources).map((key) => ({
key,
name: sourceNames[key] || key,
icon: sourceicon[key] || key
}))
})
// 切换音源选择器显示状态
const toggleSourceList = () => {
source_list_show.value = !source_list_show.value
}
// 选择音源
const selectSource = (sourceKey: string) => {
if (!hasPluginData.value) return
const LocalUserDetail = LocalUserDetailStore()
LocalUserDetail.userInfo.selectSources = sourceKey
// 自动选择该音源的最高音质
const sourceDetail = LocalUserDetail.userInfo.supportedSources?.[sourceKey]
if (sourceDetail && sourceDetail.qualitys && sourceDetail.qualitys.length > 0) {
const currentQuality = LocalUserDetail.userInfo.selectQuality
if (!currentQuality || !sourceDetail.qualitys.includes(currentQuality)) {
LocalUserDetail.userInfo.selectQuality =
sourceDetail.qualitys[sourceDetail.qualitys.length - 1]
}
}
// 更新音源图标
source.value = sourceicon[sourceKey]
source_list_show.value = false
}
// 点击遮罩关闭音源选择器
const handleMaskClick = () => {
source_list_show.value = false
}
const handleClick = (index: number): void => {
menuActive.value = index
router.push(menuList[index].path)
}
// 导航历史前进后退功能
const goBack = (): void => {
router.go(-1)
}
const goForward = (): void => {
router.go(1)
}
// 搜索相关
const keyword = ref('')
// 搜索类型1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
// const searchType = ref(1)
// 处理搜索事件
const handleSearch = async () => {
if (!keyword.value.trim()) return
const useSearch = searchValue()
// 重新设置搜索关键字
try {
// 跳转到搜索结果页面,并传递搜索结果和关键词
useSearch.setValue(keyword.value.trim()) // 设置搜索关键字
router.push({
path: '/home/search'
})
} catch (error) {
console.error('搜索失败:', error)
}
}
// 处理按键事件,按下回车键时触发搜索
const handleKeyDown = () => {
handleSearch()
}
</script>
<template>
<t-layout class="home-container">
<!-- sidebar -->
<t-aside class="sidebar">
<div class="sidebar-content">
<div class="logo-section">
<div class="logo-icon">
<i class="iconfont icon-music"></i>
</div>
<p class="app-title">
<span style="color: #000; font-weight: 800">Ceru Music</span>
</p>
</div>
<nav class="nav-section">
<t-button
v-for="(item, index) in menuList"
:key="index"
:variant="menuActive == index ? 'base' : 'text'"
:class="menuActive == index ? 'nav-button active' : 'nav-button'"
block
@click="handleClick(index)"
>
<i :class="`iconfont ${item.icon} nav-icon`"></i>
{{ item.name }}
</t-button>
</nav>
</div>
</t-aside>
<t-layout style="flex: 1">
<t-content>
<div class="content">
<!-- Header -->
<div class="header">
<t-button shape="circle" theme="default" class="nav-btn" @click="goBack">
<i class="iconfont icon-xiangzuo"></i>
</t-button>
<t-button shape="circle" theme="default" class="nav-btn" @click="goForward">
<i class="iconfont icon-xiangyou"></i>
</t-button>
<div class="search-container">
<div class="search-input">
<div class="source-selector" @click="toggleSourceList">
<svg class="icon" aria-hidden="true">
<use :xlink:href="`#icon-${source}`"></use>
</svg>
</div>
<!-- 透明遮罩 -->
<transition name="mask">
<div v-if="source_list_show" class="source-mask" @click="handleMaskClick"></div>
</transition>
<!-- 音源选择列表 -->
<transition name="source">
<div v-if="source_list_show" class="source-list">
<div class="items">
<div
v-for="item in sourceList"
:key="item.key"
class="source-item"
:class="{ active: source === item.icon }"
@click="selectSource(item.key)"
>
<svg class="source-icon" aria-hidden="true">
<use :xlink:href="`#icon-${item.icon}`"></use>
</svg>
<span class="source-name">{{ item.name }}</span>
</div>
</div>
</div>
</transition>
<t-input
v-model="keyword"
placeholder="搜索音乐、歌手"
style="width: 100%"
@enter="handleKeyDown"
>
<template #suffix>
<t-button
theme="primary"
variant="text"
shape="circle"
style="display: flex; align-items: center; justify-content: center"
@click="handleSearch"
>
<SearchIcon style="font-size: 16px; color: #000" />
</t-button>
</template>
</t-input>
</div>
<TitleBarControls :color="'#000'"></TitleBarControls>
</div>
</div>
<div class="mainContent">
<slot name="body"></slot>
</div>
</div>
</t-content>
</t-layout>
</t-layout>
</template>
<style scoped lang="scss">
:deep(.animate__animated) {
position: absolute;
width: 100%;
}
// 音源选择器过渡动画
.source-enter-active,
.source-leave-active {
transition: all 0.2s ease;
}
.source-enter-from {
opacity: 0;
transform: translateY(-0.5rem);
}
.source-leave-to {
opacity: 0;
transform: translateY(-0.5rem);
}
// 遮罩过渡动画
.mask-enter-active,
.mask-leave-active {
transition: opacity 0.2s ease;
}
.mask-enter-from,
.mask-leave-to {
opacity: 0;
}
.home-container {
height: calc(100vh - var(--play-bottom-height));
overflow-y: hidden;
position: relative;
}
.icon {
width: 1.5rem;
height: 1.5rem;
}
.sidebar {
width: 15rem;
background-image: linear-gradient(to bottom, var(--td-brand-color-4) -140vh, #ffffff 30vh);
border-right: 0.0625rem solid #e5e7eb;
flex-shrink: 0;
.sidebar-content {
padding: 1rem;
.logo-section {
-webkit-app-region: drag;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
.logo-icon {
width: 2rem;
height: 2rem;
background-color: var(--td-brand-color-4);
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 1.25rem;
color: white;
}
}
.app-title {
font-weight: 500;
font-size: 1.125rem;
color: #111827;
span {
font-weight: 500;
color: #b8f0cc;
}
}
}
.nav-section {
display: flex;
flex-direction: column;
gap: 0.25rem;
.nav-button {
justify-content: flex-start;
height: 2.4rem;
text-align: left;
padding: 0.7rem 1rem;
border-radius: 0.5rem;
border: none;
.nav-icon {
margin-right: 0.75rem;
font-size: 1rem;
}
&.active {
background-color: var(--td-brand-color-4);
color: rgb(255, 255, 255);
&:hover {
background-color: var(--td-brand-color-5);
}
}
&:not(.active) {
color: #6b7280;
&:hover {
color: #111827;
background-color: #f3f4f6;
}
}
}
}
}
}
:deep(.t-layout__content) {
height: 100%;
display: flex;
}
.content {
padding: 0;
background-image: linear-gradient(to bottom, var(--td-brand-color-4) -110vh, #ffffff 15vh);
display: flex;
flex: 1;
flex-direction: column;
.header {
-webkit-app-region: drag;
display: flex;
align-items: center;
padding: 1.5rem;
.nav-btn {
-webkit-app-region: no-drag;
margin-right: 0.5rem;
&:last-of-type {
margin-right: 0.5rem;
}
.iconfont {
font-size: 1rem;
color: #3d4043;
}
&:hover .iconfont {
color: #111827;
}
}
.search-container {
display: flex;
flex: 1;
position: relative;
justify-content: space-between;
.search-input {
-webkit-app-region: no-drag;
display: flex;
align-items: center;
transition: width 0.3s;
padding: 0 0.5rem;
width: min(18.75rem, 400px);
margin-right: 0.5rem;
border-radius: 1.25rem !important;
background-color: #fff;
overflow: visible;
position: relative;
&:has(input:focus) {
width: max(18.75rem, 400px);
}
.source-selector {
display: flex;
align-items: center;
cursor: pointer;
box-sizing: border-box;
padding: 0.25rem;
aspect-ratio: 1 / 1;
border-radius: 999px;
overflow: hidden;
transition: background-color 0.2s;
&:hover {
background-color: #f3f4f6;
}
.source-arrow {
margin-left: 0.25rem;
font-size: 0.75rem;
color: #6b7280;
transition: transform 0.2s;
&.rotated {
transform: rotate(180deg);
}
}
}
.source-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999999;
background: transparent;
cursor: pointer;
}
.source-list {
position: absolute;
top: 100%;
left: 0;
z-index: 10000000;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
min-width: 10rem;
overflow-y: hidden;
margin-top: 0.25rem;
padding: 0.5em;
.items {
max-height: 12rem;
overflow-y: auto;
// 隐藏滚动条
&::-webkit-scrollbar {
width: 0;
height: 0;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
}
// Firefox 隐藏滚动条
scrollbar-width: none;
}
.source-item {
border-radius: 5px;
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
margin-bottom: 5px;
cursor: pointer;
transition: background-color 0.2s;
&:last-child {
margin: 0;
}
&:hover {
background-color: #f3f4f6;
}
&.active {
background-color: var(--td-brand-color-1);
color: var(--td-brand-color);
}
.source-icon {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
.source-name {
font-size: 0.875rem;
white-space: nowrap;
}
}
}
}
:deep(.t-input) {
border-radius: 0rem !important;
border: none;
box-shadow: none;
&.t-input--suffix {
padding-right: 0 !important;
}
}
.settings-btn {
.iconfont {
font-size: 1rem;
color: #6b7280;
}
&:hover .iconfont {
color: #111827;
}
}
}
}
.mainContent {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: 0;
/* 确保flex子元素能够正确计算高度 */
&::-webkit-scrollbar {
width: 0.375rem;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 0.1875rem;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 0.1875rem;
transition: background-color 0.2s ease;
&:hover {
background: #94a3b8;
}
}
/* Firefox 滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
}
</style>

View File

@@ -1 +1,8 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
const component: DefineComponent<{}, {}, any>
export default component
}

View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { reactive } from 'vue'
import { transitionVolume } from '@renderer/utils/volume'
import { transitionVolume } from '@renderer/utils/audio/volume'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import type {

View File

@@ -1,12 +1,19 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
export interface TagWriteOptions {
basicInfo: boolean // 基础信息(标题、艺术家、专辑)
cover: boolean // 封面
lyrics: boolean // 普通歌词
}
export interface SettingsState {
showFloatBall: boolean
directories?: {
cacheDir: string
downloadDir: string
}
tagWriteOptions?: TagWriteOptions
}
export const useSettingsStore = defineStore('settings', () => {
@@ -23,7 +30,12 @@ export const useSettingsStore = defineStore('settings', () => {
// 默认设置
return {
showFloatBall: true
showFloatBall: true,
tagWriteOptions: {
basicInfo: true,
cover: true,
lyrics: true
}
}
}

View File

@@ -1,36 +0,0 @@
// 测试网易云音乐服务的IPC通信
export async function testNeteaseService() {
try {
console.log('开始测试网易云音乐服务...')
// 测试搜索功能
const searchResult = await window.api.music.request('search', {
type: 1,
keyword: '周杰伦',
limit: 10,
offset: 0
})
console.log('搜索结果:', searchResult)
// 如果搜索成功且有结果,测试获取歌曲详情
if (searchResult && searchResult.songs && searchResult.songs.length > 0) {
const songId = searchResult.songs[0].id
const songDetail = await window.api.music.request('getSongDetail', {
ids: [songId.toString()]
})
console.log('歌曲详情:', songDetail)
// 测试获取歌词
const lyric = await window.api.music.request('getLyric', {
id: songId.toString()
})
console.log('歌词:', lyric)
}
console.log('网易云音乐服务测试完成!')
return true
} catch (error) {
console.error('网易云音乐服务测试失败:', error)
return false
}
}

View File

@@ -0,0 +1,280 @@
import { NotifyPlugin, MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { useSettingsStore } from '@renderer/store/Settings'
import { toRaw, h } from 'vue'
interface MusicItem {
singer: string
name: string
albumName: string
albumId: number
source: string
interval: string
songmid: number
img: string
lrc: null | string
types: Array<{ type: string; size: string }>
_types: Record<string, any>
typeUrl: Record<string, any>
}
const qualityMap: Record<string, string> = {
'128k': '标准音质',
'192k': '高品音质',
'320k': '超高品质',
flac: '无损音质',
flac24bit: '超高解析',
hires: '高清臻音',
atmos: '全景环绕',
master: '超清母带'
}
const qualityKey = Object.keys(qualityMap)
// 创建音质选择弹窗
function createQualityDialog(songInfo: MusicItem, userQuality: string): Promise<string | null> {
return new Promise((resolve) => {
const LocalUserDetail = LocalUserDetailStore()
// 获取歌曲支持的音质列表
const availableQualities = songInfo.types || []
// 检查用户设置的音质是否为特殊音质
const isSpecialQuality = ['hires', 'atmos', 'master'].includes(userQuality)
// 如果是特殊音质且用户支持,添加到选项中(不管歌曲是否有这个音质)
const qualityOptions = [...availableQualities]
if (isSpecialQuality && LocalUserDetail.userSource.quality === userQuality) {
const hasSpecialQuality = availableQualities.some((q) => q.type === userQuality)
if (!hasSpecialQuality) {
qualityOptions.push({ type: userQuality, size: '源站无法得知此音质的文件大小' })
}
}
// 按音质优先级排序
qualityOptions.sort((a, b) => {
const aIndex = qualityKey.indexOf(a.type)
const bIndex = qualityKey.indexOf(b.type)
return bIndex - aIndex // 降序排列,高音质在前
})
const dialog = DialogPlugin.confirm({
header: '选择下载音质(可滚动)',
width: 400,
placement: 'center',
body: () =>
h(
'div',
{
class: 'quality-selector'
},
[
h(
'div',
{
class: 'quality-list',
style: {
maxHeight:
'max(calc(calc(70vh - 2 * var(--td-comp-paddingTB-xxl)) - 24px - 32px - 32px),100px)',
overflow: 'auto',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}
},
qualityOptions.map((quality) =>
h(
'div',
{
key: quality.type,
class: 'quality-item',
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '12px 16px',
margin: '8px 0',
border: '1px solid #e7e7e7',
borderRadius: '6px',
cursor: 'pointer',
transition: 'all 0.2s ease',
backgroundColor: quality.type === userQuality ? '#e6f7ff' : '#fff'
},
onClick: () => {
dialog.destroy()
resolve(quality.type)
},
onMouseenter: (e: MouseEvent) => {
const target = e.target as HTMLElement
target.style.backgroundColor = '#f0f9ff'
target.style.borderColor = '#1890ff'
},
onMouseleave: (e: MouseEvent) => {
const target = e.target as HTMLElement
target.style.backgroundColor =
quality.type === userQuality ? '#e6f7ff' : '#fff'
target.style.borderColor = '#e7e7e7'
}
},
[
h('div', { class: 'quality-info' }, [
h(
'div',
{
style: {
fontWeight: '500',
fontSize: '14px',
color: quality.type === userQuality ? '#1890ff' : '#333'
}
},
qualityMap[quality.type] || quality.type
),
h(
'div',
{
style: {
fontSize: '12px',
color: '#999',
marginTop: '2px'
}
},
quality.type.toUpperCase()
)
]),
h(
'div',
{
class: 'quality-size',
style: {
fontSize: '12px',
color: '#666',
fontWeight: '500'
}
},
quality.size
)
]
)
)
)
]
),
confirmBtn: null,
cancelBtn: null,
footer: false
})
})
}
async function downloadSingleSong(songInfo: MusicItem): Promise<void> {
try {
const LocalUserDetail = LocalUserDetailStore()
const userQuality = LocalUserDetail.userSource.quality as string
const settingsStore = useSettingsStore()
// 获取歌词
const { crlyric, lyric } = await window.api.music.requestSdk('getLyric', {
source: toRaw(songInfo.source),
songInfo: toRaw(songInfo) as any
})
console.log(songInfo)
songInfo.lrc = crlyric && songInfo.source !== 'tx' ? crlyric : lyric
// 显示音质选择弹窗
const selectedQuality = await createQualityDialog(songInfo, userQuality)
// 如果用户取消选择,直接返回
if (!selectedQuality) {
return
}
let quality = selectedQuality
const isSpecialQuality = ['hires', 'atmos', 'master'].includes(quality)
// 如果选择的是特殊音质,先尝试下载
if (isSpecialQuality) {
try {
console.log(`尝试下载特殊音质: ${quality} - ${qualityMap[quality]}`)
const tip = MessagePlugin.success('开始下载歌曲:' + songInfo.name)
const specialResult = await window.api.music.requestSdk('downloadSingleSong', {
pluginId: LocalUserDetail.userSource.pluginId?.toString() || '',
source: songInfo.source,
quality,
songInfo: toRaw(songInfo) as any,
tagWriteOptions: toRaw(settingsStore.settings.tagWriteOptions)
})
;(await tip).close()
// 如果成功获取特殊音质链接,处理结果并返回
if (specialResult) {
if (!Object.hasOwn(specialResult, 'path')) {
MessagePlugin.info(specialResult.message)
} else {
await NotifyPlugin.success({
title: '下载成功',
content: `${specialResult.message} 保存位置: ${specialResult.path}`
})
}
return
}
console.log(`下载${qualityMap[quality]}音质失败,重新选择音质`)
MessagePlugin.error('该音质下载失败,请重新选择音质')
// 特殊音质下载失败,重新弹出选择框
const retryQuality = await createQualityDialog(songInfo, userQuality)
if (!retryQuality) {
return
}
quality = retryQuality
} catch (specialError) {
console.log(`下载${qualityMap[quality]}音质出错:`, specialError)
MessagePlugin.error('该音质下载失败,请重新选择音质')
// 特殊音质下载出错,重新弹出选择框
const retryQuality = await createQualityDialog(songInfo, userQuality)
if (!retryQuality) {
return
}
quality = retryQuality
}
}
// 检查选择的音质是否超出歌曲支持的最高音质
const songMaxQuality = songInfo.types[songInfo.types.length - 1]?.type
if (songMaxQuality && qualityKey.indexOf(quality) > qualityKey.indexOf(songMaxQuality)) {
quality = songMaxQuality
MessagePlugin.warning(`所选音质不可用,已自动调整为: ${qualityMap[quality]}`)
}
console.log(`使用音质下载: ${quality} - ${qualityMap[quality]}`)
const tip = MessagePlugin.success('开始下载歌曲:' + songInfo.name)
const result = await window.api.music.requestSdk('downloadSingleSong', {
pluginId: LocalUserDetail.userSource.pluginId?.toString() || '',
source: songInfo.source,
quality,
songInfo: toRaw(songInfo) as any,
tagWriteOptions: toRaw(settingsStore.settings.tagWriteOptions)
})
;(await tip).close()
if (!Object.hasOwn(result, 'path')) {
MessagePlugin.info(result.message)
} else {
await NotifyPlugin.success({
title: '下载成功',
content: `${result.message} 保存位置: ${result.path}`
})
}
} catch (error: any) {
console.error('下载失败:', error)
await NotifyPlugin.error({
title: '下载失败',
content: `${error.message.includes('歌曲正在') ? '歌曲正在下载中' : '未知错误'}`
})
}
}
export { downloadSingleSong }

View File

@@ -1,3 +1,14 @@
/*
* Copyright (c) 2025. Inc. All rights reserved.
*
* This software is the confidential and proprietary information of .
* Unauthorized copying of this file, via any medium is strictly prohibited.
*
* @author Star
* @since 2025-9-19
* @version 1.0
*/
interface MediaSessionCallbacks {
play: () => void
pause: () => void
@@ -51,8 +62,7 @@ class MediaSessionController {
// 强制更新播放状态确保SMTC正确识别
if (this.audioElement) {
const currentState = this.audioElement.paused ? 'paused' : 'playing'
navigator.mediaSession.playbackState = currentState
navigator.mediaSession.playbackState = this.audioElement.paused ? 'paused' : 'playing'
}
} catch (error) {
console.warn('Failed to update media session metadata:', error)
@@ -86,19 +96,9 @@ class MediaSessionController {
this.audioElement = audioElement
this.callbacks = callbacks
// 设置媒体会话动作处理器
// 设置媒体会话动作处理器,不自动监听音频事件
// 让应用层手动控制播放状态更新,避免循环调用
this.setupMediaSessionActionHandlers()
// 初始化时设置默认的播放状态
navigator.mediaSession.playbackState = 'none'
// 设置默认元数据确保SMTC能够识别应用
navigator.mediaSession.metadata = new MediaMetadata({
title: '澜音',
artist: 'CeruMusic',
album: '音乐播放器',
artwork: []
})
}
/**

View File

@@ -1,69 +0,0 @@
import { NotifyPlugin, MessagePlugin } from 'tdesign-vue-next'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { toRaw } from 'vue'
interface MusicItem {
singer: string
name: string
albumName: string
albumId: number
source: string
interval: string
songmid: number
img: string
lrc: null | string
types: string[]
_types: Record<string, any>
typeUrl: Record<string, any>
}
const qualityMap: Record<string, string> = {
'128k': '标准音质',
'192k': '高品音质',
'320k': '超高品质',
flac: '无损音质',
flac24bit: '超高解析',
hires: '高清臻音',
atmos: '全景环绕',
master: '超清母带'
}
const qualityKey = Object.keys(qualityMap)
async function downloadSingleSong(songInfo: MusicItem): Promise<void> {
try {
const LocalUserDetail = LocalUserDetailStore()
let quality = LocalUserDetail.userSource.quality as string
if (
qualityKey.indexOf(quality) >
qualityKey.indexOf(
(songInfo.types[songInfo.types.length - 1] as unknown as { type: any }).type
)
) {
quality = (songInfo.types[songInfo.types.length - 1] as unknown as { type: any }).type
}
const tip = MessagePlugin.success('开始下载歌曲:' + songInfo.name)
const result = await window.api.music.requestSdk('downloadSingleSong', {
pluginId: LocalUserDetail.userSource.pluginId?.toString() || '',
source: songInfo.source,
quality,
songInfo: toRaw(songInfo)
})
;(await tip).close()
if (!Object.hasOwn(result, 'path')) {
MessagePlugin.info(result.message)
} else {
await NotifyPlugin.success({
title: '下载成功',
content: `${result.message} 保存位置: ${result.path}`
})
}
} catch (error: any) {
console.error('下载失败:', error)
await NotifyPlugin.error({
title: '下载失败',
content: `${error.message.includes('歌曲正在') ? '歌曲正在下载中' : '未知错误'}`
})
}
}
export { downloadSingleSong }

View File

@@ -37,19 +37,54 @@ export async function getSongRealUrl(song: SongList): Promise<string> {
const LocalUserDetail = LocalUserDetailStore()
// 通过统一的request方法获取真实的播放URL
let quality = LocalUserDetail.userSource.quality as string
// 检查是否为特殊音质(高清臻音、全景环绕或超清母带)
const isSpecialQuality = ['hires', 'atmos', 'master'].includes(quality)
// 如果是特殊音质,先尝试获取对应链接
if (isSpecialQuality) {
try {
console.log(`尝试获取特殊音质: ${quality} - ${qualityMap[quality]}`)
const specialUrlData = await window.api.music.requestSdk('getMusicUrl', {
pluginId: LocalUserDetail.userSource.pluginId as unknown as string,
source: song.source,
songInfo: song as any,
quality
})
// 如果成功获取特殊音质链接,直接返回
if (
typeof specialUrlData === 'string' ||
(typeof specialUrlData === 'object' && !specialUrlData.error)
) {
console.log(`成功获取${qualityMap[quality]}链接`)
return specialUrlData as string
}
console.log(`获取${qualityMap[quality]}链接失败,回退到标准逻辑`)
// 如果获取特殊音质失败,继续执行原有逻辑
} catch (specialError) {
console.log(`获取${qualityMap[quality]}链接出错,回退到标准逻辑:`, specialError)
// 特殊音质获取失败,继续执行原有逻辑
}
}
// 原有逻辑:检查歌曲支持的最高音质
if (
qualityKey.indexOf(quality) >
qualityKey.indexOf((song.types[song.types.length - 1] as unknown as { type: any }).type)
) {
quality = (song.types[song.types.length - 1] as unknown as { type: any }).type
}
console.log(quality)
console.log(`使用音质: ${quality} - ${qualityMap[quality]}`)
const urlData = await window.api.music.requestSdk('getMusicUrl', {
pluginId: LocalUserDetail.userSource.pluginId as unknown as string,
source: song.source,
songInfo: song as any,
quality
})
console.log(urlData)
if (typeof urlData === 'object' && urlData.error) {
throw new Error(urlData.error)
@@ -74,15 +109,11 @@ export async function addToPlaylistAndPlay(
playSongCallback: (song: SongList) => Promise<void>
) {
try {
// 获取真实播放URL
await getSongRealUrl(song)
const playResult = playSongCallback(song)
// 使用store的方法添加歌曲到第一位
localUserStore.addSongToFirst(song)
// 播放歌曲 - 确保正确处理Promise
const playResult = playSongCallback(song)
if (playResult && typeof playResult.then === 'function') {
await playResult
}
@@ -152,9 +183,7 @@ export async function replacePlaylist(
// 播放第一首歌曲
if (songs[0]) {
await getSongRealUrl(songs[0])
const playResult = playSongCallback(songs[0])
if (playResult && typeof playResult.then === 'function') {
await playResult
}

View File

@@ -1,50 +0,0 @@
<template>
<div class="settings-page">
<div class="settings-container">
<h2>应用设置</h2>
<!-- 其他设置项 -->
<div class="settings-section">
<h3>常规设置</h3>
<!-- 这里可以添加其他设置项 -->
</div>
<!-- 自动更新设置 -->
<UpdateSettings />
</div>
</div>
</template>
<script setup lang="ts">
import UpdateSettings from '../components/Settings/UpdateSettings.vue'
</script>
<style scoped>
.settings-page {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.settings-container h2 {
margin-bottom: 24px;
font-size: 24px;
font-weight: 600;
color: var(--td-text-color-primary);
}
.settings-section {
margin-bottom: 32px;
padding: 20px;
background: var(--td-bg-color-container);
border-radius: 8px;
border: 1px solid var(--td-border-level-1-color);
}
.settings-section h3 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
color: var(--td-text-color-primary);
}
</style>

View File

@@ -1,182 +1,25 @@
<script setup lang="ts">
import PlayMusic from '@renderer/components/Play/PlayMusic.vue'
import TitleBarControls from '@renderer/components/TitleBarControls.vue'
import { onMounted, ref, watchEffect } from 'vue'
import { SearchIcon } from 'tdesign-icons-vue-next'
import { useRouter } from 'vue-router'
import { searchValue } from '@renderer/store/search'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
onMounted(() => {
const LocalUserDetail = LocalUserDetailStore()
watchEffect(() => {
source.value = sourceicon[LocalUserDetail.userSource.source || 'wy']
})
})
const sourceicon = {
kg: 'kugouyinle',
wy: 'wangyiyun',
mg: 'mg',
tx: 'tx',
kw: 'kw'
}
const source = ref('kugouyinle')
interface MenuItem {
name: string
icon: string
path: string
}
const menuList: MenuItem[] = [
{
name: '发现',
icon: 'icon-faxian',
path: '/home/find'
},
{
name: '本地',
icon: 'icon-music',
path: '/home/local'
},
{
name: '最近',
icon: 'icon-shijian',
path: '/home/recent'
}
]
const menuActive = ref(0)
const router = useRouter()
const handleClick = (index: number): void => {
menuActive.value = index
router.push(menuList[index].path)
}
// 导航历史前进后退功能
const goBack = (): void => {
router.go(-1)
}
const goForward = (): void => {
router.go(1)
}
// 搜索相关
const keyword = ref('')
// 搜索类型1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
// const searchType = ref(1)
// 处理搜索事件
const handleSearch = async () => {
if (!keyword.value.trim()) return
const useSearch = searchValue()
// 重新设置搜索关键字
try {
// 跳转到搜索结果页面,并传递搜索结果和关键词
useSearch.setValue(keyword.value.trim()) // 设置搜索关键字
router.push({
path: '/home/search'
})
} catch (error) {
console.error('搜索失败:', error)
}
}
// 处理按键事件,按下回车键时触发搜索
const handleKeyDown = () => {
handleSearch()
}
// import HomeLayout from '@renderer/layout/index.vue'
// Trigger auto-import regeneration
</script>
<template>
<div class="home">
<t-layout class="home-container">
<!-- sidebar -->
<t-aside class="sidebar">
<div class="sidebar-content">
<div class="logo-section">
<div class="logo-icon">
<i class="iconfont icon-music"></i>
</div>
<p class="app-title">
<span style="color: #000; font-weight: 800">Ceru Music</span>
</p>
</div>
<nav class="nav-section">
<t-button
v-for="(item, index) in menuList"
:key="index"
:variant="menuActive == index ? 'base' : 'text'"
:class="menuActive == index ? 'nav-button active' : 'nav-button'"
block
@click="handleClick(index)"
>
<i :class="`iconfont ${item.icon} nav-icon`"></i>
{{ item.name }}
</t-button>
</nav>
</div>
</t-aside>
<t-layout style="flex: 1">
<t-content>
<div class="content">
<!-- Header -->
<div class="header">
<t-button shape="circle" theme="default" class="nav-btn" @click="goBack">
<i class="iconfont icon-xiangzuo"></i>
</t-button>
<t-button shape="circle" theme="default" class="nav-btn" @click="goForward">
<i class="iconfont icon-xiangyou"></i>
</t-button>
<div class="search-container">
<div class="search-input">
<svg class="icon" aria-hidden="true">
<use :xlink:href="`#icon-${source}`"></use>
</svg>
<t-input
v-model="keyword"
placeholder="搜索音乐、歌手"
style="width: 100%"
@enter="handleKeyDown"
>
<template #suffix>
<t-button
theme="primary"
variant="text"
shape="circle"
style="display: flex; align-items: center; justify-content: center"
@click="handleSearch"
>
<SearchIcon style="font-size: 16px; color: #000" />
</t-button>
</template>
</t-input>
</div>
<TitleBarControls :color="'#000'"></TitleBarControls>
</div>
</div>
<div class="mainContent">
<router-view v-slot="{ Component, route }">
<Transition
name="page"
:enter-active-class="`animate__animated ${route.meta.transitionIn} animate__fast`"
:leave-active-class="`animate__animated ${route.meta.transitionOut} animate__fast`"
>
<KeepAlive exclude="list">
<component :is="Component" />
</KeepAlive>
</Transition>
</router-view>
</div>
</div>
</t-content>
</t-layout>
</t-layout>
<HomeLayout>
<template #body>
<router-view v-slot="{ Component, route }">
<Transition
name="page"
:enter-active-class="`animate__animated ${route.meta.transitionIn} animate__fast`"
:leave-active-class="`animate__animated ${route.meta.transitionOut} animate__fast`"
>
<KeepAlive exclude="list">
<component :is="Component" />
</KeepAlive>
</Transition>
</router-view>
</template>
</HomeLayout>
<PlayMusic />
</div>
</template>
@@ -186,209 +29,4 @@ const handleKeyDown = () => {
position: absolute;
width: 100%;
}
.home-container {
height: calc(100vh - var(--play-bottom-height));
overflow-y: hidden;
position: relative;
}
.icon {
width: 1.5rem;
height: 1.5rem;
}
.sidebar {
width: 15rem;
background-image: linear-gradient(to bottom, var(--td-brand-color-4) -140vh, #ffffff 30vh);
border-right: 0.0625rem solid #e5e7eb;
flex-shrink: 0;
.sidebar-content {
padding: 1rem;
.logo-section {
-webkit-app-region: drag;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
.logo-icon {
width: 2rem;
height: 2rem;
background-color: var(--td-brand-color-4);
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 1.25rem;
color: white;
}
}
.app-title {
font-weight: 500;
font-size: 1.125rem;
color: #111827;
span {
font-weight: 500;
color: #b8f0cc;
}
}
}
.nav-section {
display: flex;
flex-direction: column;
gap: 0.25rem;
.nav-button {
justify-content: flex-start;
height: 2.4rem;
text-align: left;
padding: 0.7rem 1rem;
border-radius: 0.5rem;
border: none;
.nav-icon {
margin-right: 0.75rem;
font-size: 1rem;
}
&.active {
background-color: var(--td-brand-color-4);
color: rgb(255, 255, 255);
&:hover {
background-color: var(--td-brand-color-5);
}
}
&:not(.active) {
color: #6b7280;
&:hover {
color: #111827;
background-color: #f3f4f6;
}
}
}
}
}
}
:deep(.t-layout__content) {
height: 100%;
display: flex;
}
.content {
padding: 0;
background-image: linear-gradient(to bottom, var(--td-brand-color-4) -110vh, #ffffff 15vh);
display: flex;
flex: 1;
flex-direction: column;
.header {
-webkit-app-region: drag;
display: flex;
align-items: center;
padding: 1.5rem;
.nav-btn {
-webkit-app-region: no-drag;
margin-right: 0.5rem;
&:last-of-type {
margin-right: 0.5rem;
}
.iconfont {
font-size: 1rem;
color: #3d4043;
}
&:hover .iconfont {
color: #111827;
}
}
.search-container {
display: flex;
flex: 1;
position: relative;
justify-content: space-between;
.search-input {
-webkit-app-region: no-drag;
display: flex;
align-items: center;
transition: width 0.3s;
padding: 0 0.5rem;
width: min(18.75rem, 400px);
margin-right: 0.5rem;
border-radius: 1.25rem !important;
background-color: #fff;
overflow: hidden;
&:has(input:focus) {
width: max(18.75rem, 400px);
}
}
:deep(.t-input) {
border-radius: 0rem !important;
border: none;
box-shadow: none;
}
.settings-btn {
.iconfont {
font-size: 1rem;
color: #6b7280;
}
&:hover .iconfont {
color: #111827;
}
}
}
}
.mainContent {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
height: 0;
/* 确保flex子元素能够正确计算高度 */
&::-webkit-scrollbar {
width: 0.375rem;
}
&::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 0.1875rem;
}
&::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 0.1875rem;
transition: background-color 0.2s ease;
&:hover {
background: #94a3b8;
}
}
/* Firefox 滚动条样式 */
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
}
</style>

View File

@@ -2,7 +2,8 @@
import { ref, onMounted, watch, WatchHandle, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { extractDominantColor } from '../../utils/colorExtractor'
import { storeToRefs } from 'pinia'
import { extractDominantColor } from '../../utils/color/colorExtractor'
// 路由实例
const router = useRouter()
@@ -18,25 +19,16 @@ const textColors = ref<string[]>([])
const hotSongs: any = ref([])
let watchSource: WatchHandle | null = null
// 获取热门歌单数据
const fetchHotSonglist = async () => {
const LocalUserDetail = LocalUserDetailStore()
watchSource = watch(
LocalUserDetail.userSource,
() => {
if (LocalUserDetail.userSource.source) {
fetchHotSonglist()
}
},
{ deep: true }
)
try {
loading.value = true
error.value = ''
// 调用真实 API 获取热门歌单
const result = await window.api.music.requestSdk('getHotSonglist', {
source: LocalUserDetail.userSource.source
source: userSource.value.source
})
if (result && result.list) {
recommendPlaylists.value = result.list.map((item: any) => ({
@@ -112,13 +104,27 @@ const playSong = (song: any): void => {
console.log('播放歌曲:', song.title)
}
// 获取 store 实例和响应式引用
const LocalUserDetail = LocalUserDetailStore()
const { userSource } = storeToRefs(LocalUserDetail)
// 组件挂载时获取数据
onMounted(() => {
fetchHotSonglist()
// 设置音源变化监听器
watchSource = watch(
userSource,
(newSource) => {
if (newSource.source) {
fetchHotSonglist()
}
},
{ deep: true, immediate: true }
)
})
onUnmounted(() => {
if (watchSource) {
watchSource()
watchSource = null
}
})
</script>

View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import { ref, onMounted, toRaw } from 'vue'
import { ref, onMounted, onUnmounted, toRaw, computed } from 'vue'
import { useRoute } from 'vue-router'
import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { downloadSingleSong } from '@renderer/utils/download'
import SongVirtualList from '@renderer/components/Music/SongVirtualList.vue'
import { downloadSingleSong } from '@renderer/utils/audio/download'
interface MusicItem {
singer: string
@@ -191,7 +190,7 @@ const handlePause = () => {
}
}
const handleDownload = (song: MusicItem) => {
const handleDownload = (song: any) => {
downloadSingleSong(song)
}
@@ -202,6 +201,109 @@ const handleAddToPlaylist = (song: MusicItem) => {
}
}
// 从本地歌单移出歌曲
const handleRemoveFromLocalPlaylist = async (song: MusicItem) => {
try {
const result = await window.api.songList.removeSongs(playlistInfo.value.id, [song.songmid])
if (result.success) {
// 从当前歌曲列表中移除
const index = songs.value.findIndex((s) => s.songmid === song.songmid)
if (index !== -1) {
songs.value.splice(index, 1)
// 更新歌单信息中的歌曲总数
playlistInfo.value.total = songs.value.length
}
MessagePlugin.success(`已将"${song.name}"从歌单中移出`)
} else {
MessagePlugin.error(result.error || '移出歌曲失败')
}
} catch (error) {
console.error('移出歌曲失败:', error)
MessagePlugin.error('移出歌曲失败')
}
}
// 检查是否是本地歌单
const isLocalPlaylist = computed(() => {
return route.query.type === 'local' || route.query.source === 'local'
})
// 文件选择器引用
const fileInputRef = ref<HTMLInputElement | null>(null)
// 滚动相关状态
const scrollY = ref(0)
const isHeaderCompact = ref(false)
const scrollContainer = ref<HTMLElement | null>(null)
const songListRef = ref<any>(null)
// 点击封面修改图片(仅本地歌单)
const handleCoverClick = () => {
if (!isLocalPlaylist.value) return
// 触发文件选择器
if (fileInputRef.value) {
fileInputRef.value.click()
}
}
// 处理文件选择
const handleFileSelect = async (event: Event) => {
const target = event.target as HTMLInputElement
const file = target.files?.[0]
if (!file) return
// 检查文件类型
if (!file.type.startsWith('image/')) {
MessagePlugin.error('请选择图片文件')
return
}
// 检查文件大小限制为5MB
if (file.size > 5 * 1024 * 1024) {
MessagePlugin.error('图片文件大小不能超过5MB')
return
}
try {
// 读取文件为base64
const reader = new FileReader()
reader.onload = async (e) => {
const base64Data = e.target?.result as string
try {
// 调用API更新歌单封面
const result = await window.api.songList.updateCover(playlistInfo.value.id, base64Data)
if (result.success) {
// 更新本地显示的封面
playlistInfo.value.cover = base64Data
MessagePlugin.success('封面更新成功')
} else {
MessagePlugin.error(result.error || '封面更新失败')
}
} catch (error) {
console.error('更新封面失败:', error)
MessagePlugin.error('封面更新失败')
}
}
reader.onerror = () => {
MessagePlugin.error('读取图片文件失败')
}
reader.readAsDataURL(file)
} catch (error) {
console.error('处理图片文件失败:', error)
MessagePlugin.error('处理图片文件失败')
}
// 清空文件选择器的值,以便可以重复选择同一个文件
target.value = ''
}
// 替换播放列表的通用函数
const replacePlaylist = (songsToReplace: MusicItem[], shouldShuffle = false) => {
if (!(window as any).musicEmitter) {
@@ -287,28 +389,89 @@ const handleShufflePlaylist = () => {
}
})
}
// 滚动事件处理
const handleScroll = (event?: Event) => {
let scrollTop = 0
if (event && event.target) {
scrollTop = (event.target as HTMLElement).scrollTop
} else if (scrollContainer.value) {
scrollTop = scrollContainer.value.scrollTop
}
scrollY.value = scrollTop
// 当滚动超过100px时启用紧凑模式
isHeaderCompact.value = scrollY.value > 100
}
// 组件挂载时获取数据
onMounted(() => {
fetchPlaylistSongs()
// 延迟添加滚动事件监听,等待 SongVirtualList 组件渲染完成
setTimeout(() => {
// 查找 SongVirtualList 内部的虚拟滚动容器
const virtualListContainer = document.querySelector('.virtual-scroll-container')
if (virtualListContainer) {
scrollContainer.value = virtualListContainer as HTMLElement
virtualListContainer.addEventListener('scroll', handleScroll, { passive: true })
console.log('滚动监听器已添加到:', virtualListContainer)
} else {
console.warn('未找到虚拟滚动容器')
}
}, 200)
})
// 组件卸载时清理事件监听
onUnmounted(() => {
if (scrollContainer.value) {
scrollContainer.value.removeEventListener('scroll', handleScroll)
}
})
</script>
<template>
<div class="list-container">
<!-- 固定头部区域 -->
<div class="fixed-header">
<div class="fixed-header" :class="{ compact: isHeaderCompact }">
<!-- 歌单信息 -->
<div class="playlist-header">
<div class="playlist-cover">
<div class="playlist-header" :class="{ compact: isHeaderCompact }">
<div
class="playlist-cover"
:class="{ clickable: isLocalPlaylist }"
@click="handleCoverClick"
>
<img :src="playlistInfo.cover" :alt="playlistInfo.title" />
<!-- 本地歌单显示编辑提示 -->
<div v-if="isLocalPlaylist" class="cover-overlay">
<svg class="edit-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
<span>点击修改封面</span>
</div>
</div>
<!-- 隐藏的文件选择器 -->
<input
ref="fileInputRef"
type="file"
accept="image/*"
style="display: none"
@change="handleFileSelect"
/>
<div class="playlist-details">
<h1 class="playlist-title">{{ playlistInfo.title }}</h1>
<p class="playlist-author">by {{ playlistInfo.author }}</p>
<p class="playlist-stats">{{ playlistInfo.total }} 首歌曲</p>
<p class="playlist-author" :class="{ hidden: isHeaderCompact }">
by {{ playlistInfo.author }}
</p>
<p class="playlist-stats" :class="{ hidden: isHeaderCompact }">
{{ playlistInfo.total || songs.length }} 首歌曲
</p>
<!-- 播放控制按钮 -->
<div class="playlist-actions">
<div class="playlist-actions" :class="{ compact: isHeaderCompact }">
<t-button
theme="primary"
size="medium"
@@ -356,16 +519,21 @@ onMounted(() => {
<div v-else class="song-list-wrapper">
<SongVirtualList
ref="songListRef"
:songs="songs"
:current-song="currentSong"
:is-playing="isPlaying"
:show-index="true"
:show-album="true"
:show-duration="true"
:is-local-playlist="isLocalPlaylist"
:playlist-id="playlistInfo.id"
@play="handlePlay"
@pause="handlePause"
@download="handleDownload"
@add-to-playlist="handleAddToPlaylist"
@remove-from-local-playlist="handleRemoveFromLocalPlaylist"
@scroll="handleScroll"
/>
</div>
</div>
@@ -375,7 +543,7 @@ onMounted(() => {
<style lang="scss" scoped>
.list-container {
box-sizing: border-box;
background: #fafafa;
// background: #fafafa;
box-sizing: border-box;
width: 100%;
padding: 20px;
@@ -444,56 +612,160 @@ onMounted(() => {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.compact {
padding: 1rem;
gap: 1rem;
}
&.compact .playlist-cover {
width: 80px !important;
height: 80px !important;
}
.playlist-cover {
width: 120px;
height: 120px;
border-radius: 0.5rem;
overflow: hidden;
flex-shrink: 0;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease;
}
// 本地歌单封面可点击样式
&.clickable {
cursor: pointer;
&:hover {
.cover-overlay {
opacity: 1;
}
img {
transform: scale(1.05);
}
}
}
.cover-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
color: white;
font-size: 12px;
text-align: center;
padding: 8px;
.edit-icon {
width: 24px;
height: 24px;
margin-bottom: 4px;
}
span {
font-weight: 500;
line-height: 1.2;
}
}
}
.playlist-details {
flex: 1;
.playlist-title {
font-size: 1.5rem;
font-weight: 600;
color: #111827;
margin: 0 0 0.5rem 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
.playlist-header.compact & {
font-size: 1.25rem;
margin: 0 0 0.25rem 0;
}
}
.playlist-author {
font-size: 1rem;
color: #6b7280;
margin: 0 0 0.5rem 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: translateY(0);
&.hidden {
opacity: 0;
transform: translateY(-10px);
margin: 0;
height: 0;
overflow: hidden;
}
}
.playlist-stats {
font-size: 0.875rem;
color: #9ca3af;
margin: 0 0 1rem 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: translateY(0);
&.hidden {
opacity: 0;
transform: translateY(-10px);
margin: 0;
height: 0;
overflow: hidden;
}
}
.playlist-actions {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&.compact {
margin-top: 0.5rem;
gap: 0.5rem;
}
.play-btn,
.shuffle-btn {
min-width: 120px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
.playlist-actions.compact & {
min-width: 100px;
padding: 6px 12px;
font-size: 0.875rem;
}
.play-icon,
.shuffle-icon {
width: 16px;
height: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
.playlist-actions.compact & {
width: 14px;
height: 14px;
}
}
}
}

View File

@@ -2,11 +2,18 @@
import { ref, onMounted, computed, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
import { Edit2Icon, ListIcon } from 'tdesign-icons-vue-next'
import { Edit2Icon, PlayCircleIcon, DeleteIcon, ViewListIcon } from 'tdesign-icons-vue-next'
import songListAPI from '@renderer/api/songList'
import type { SongList, Songs } from '@common/types/songList'
import defaultCover from '/default-cover.png'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import ContextMenu from '@renderer/components/ContextMenu/ContextMenu.vue'
import {
createMenuItem,
createSeparator,
calculateMenuPosition
} from '@renderer/components/ContextMenu/utils'
import type { ContextMenuItem, ContextMenuPosition } from '@renderer/components/ContextMenu/types'
// 扩展 Songs 类型以包含本地音乐的额外属性
interface LocalSong extends Songs {
@@ -134,6 +141,11 @@ const editPlaylistForm = ref({
// 当前编辑的歌单
const currentEditingPlaylist = ref<SongList | null>(null)
// 右键菜单状态
const contextMenuVisible = ref(false)
const contextMenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
const contextMenuPlaylist = ref<SongList | null>(null)
// 将时长字符串转换为秒数
const parseInterval = (interval: string): number => {
if (!interval) return 0
@@ -434,12 +446,14 @@ const importFromPlaylist = async () => {
// 网络歌单导入对话框状态
const showNetworkImportDialog = ref(false)
const networkPlaylistUrl = ref('')
const importPlatformType = ref('wy') // 默认选择网易云音乐
// 从网络歌单导入
const importFromNetwork = () => {
showImportDialog.value = false
showNetworkImportDialog.value = true
networkPlaylistUrl.value = ''
importPlatformType.value = 'wy' // 重置为默认平台
}
// 确认网络歌单导入
@@ -457,6 +471,43 @@ const confirmNetworkImport = async () => {
const cancelNetworkImport = () => {
showNetworkImportDialog.value = false
networkPlaylistUrl.value = ''
importPlatformType.value = 'wy'
}
// 为歌单歌曲获取封面图片
const setPicForPlaylist = async (songs: any[], source: string) => {
// 筛选出需要获取封面的歌曲
const songsNeedPic = songs.filter((song) => !song.img)
if (songsNeedPic.length === 0) return
// 批量请求封面
const picPromises = songsNeedPic.map(async (song, index) => {
try {
const url = await window.api.music.requestSdk('getPic', {
source,
songInfo: toRaw(song)
})
return {
song,
url: typeof url !== 'object' ? url : ''
}
} catch (e) {
console.log('获取封面失败 index' + index, e)
return {
song,
url: ''
}
}
})
// 等待所有请求完成
const results = await Promise.all(picPromises)
// 更新歌曲封面
results.forEach((result) => {
result.song.img = result.url
})
}
// 处理网络歌单导入
@@ -464,31 +515,171 @@ const handleNetworkPlaylistImport = async (input: string) => {
try {
const load1 = MessagePlugin.loading('正在解析歌单链接...')
// 使用正则表达式匹配网易云音乐歌单ID
const playlistIdRegex = /(?:music\.163\.com\/.*[?&]id=|playlist\?id=|playlist\/|id=)(\d+)/i
const match = input.match(playlistIdRegex)
let playlistId: string = ''
let platformName: string = ''
let playlistId: string
if (importPlatformType.value === 'wy') {
// 网易云音乐歌单ID解析
const playlistIdRegex = /(?:music\.163\.com\/.*[?&]id=|playlist\?id=|playlist\/|id=)(\d+)/i
const match = input.match(playlistIdRegex)
if (match && match[1]) {
// 从链接中提取到歌单ID
playlistId = match[1]
} else {
// 检查是否直接输入的是纯数字ID
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
if (match && match[1]) {
playlistId = match[1]
} else {
MessagePlugin.error('无法识别的歌单链接或ID格式请输入网易云音乐歌单链接或歌单ID')
return
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
} else {
MessagePlugin.error('无法识别的网易云音乐歌单链接或ID格式')
load1.then((res) => res.close())
return
}
}
platformName = '网易云音乐'
} else if (importPlatformType.value === 'tx') {
// QQ音乐歌单ID解析 - 支持多种链接格式
const qqPlaylistRegexes = [
// 标准歌单链接
/(?:y\.qq\.com\/n\/ryqq\/playlist\/|music\.qq\.com\/.*[?&]id=|playlist[?&]id=)(\d+)/i,
// 分享链接格式
/(?:i\.y\.qq\.com\/n2\/m\/share\/details\/taoge\.html.*[?&]id=)(\d+)/i,
// 其他可能的分享格式
/(?:c\.y\.qq\.com\/base\/fcgi-bin\/u\?.*__=)(\d+)/i,
// 手机版链接
/(?:i\.y\.qq\.com\/v8\/playsquare\/playlist\.html.*[?&]id=)(\d+)/i,
// 通用ID提取 - 匹配 id= 或 &id= 参数
/[?&]id=(\d+)/i
]
let match: RegExpMatchArray | null = null
for (const regex of qqPlaylistRegexes) {
match = input.match(regex)
if (match && match[1]) {
playlistId = match[1]
break
}
}
if (!match || !match[1]) {
// 检查是否直接输入的是纯数字ID
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
} else {
MessagePlugin.error('无法识别的QQ音乐歌单链接或ID格式请检查链接是否正确')
load1.then((res) => res.close())
return
}
}
platformName = 'QQ音乐'
} else if (importPlatformType.value === 'kw') {
// 酷我音乐歌单ID解析
const kwPlaylistRegexes = [
// 标准歌单链接
/(?:kuwo\.cn\/playlist_detail\/|kuwo\.cn\/.*[?&]pid=)(\d+)/i,
// 手机版链接
/(?:m\.kuwo\.cn\/h5app\/playlist\/|kuwo\.cn\/.*[?&]id=)(\d+)/i,
// 通用ID提取
/[?&](?:pid|id)=(\d+)/i
]
let match: RegExpMatchArray | null = null
for (const regex of kwPlaylistRegexes) {
match = input.match(regex)
if (match && match[1]) {
playlistId = match[1]
break
}
}
if (!match || !match[1]) {
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
} else {
MessagePlugin.error('无法识别的酷我音乐歌单链接或ID格式请检查链接是否正确')
load1.then((res) => res.close())
return
}
}
platformName = '酷我音乐'
} else if (importPlatformType.value === 'kg') {
// 酷狗音乐链接处理 - 传递完整链接给getUserListDetail
const kgPlaylistRegexes = [
// 标准歌单链接
/kugou\.com\/yy\/special\/single\/\d+/i,
// 手机版歌单链接 (新格式)
/m\.kugou\.com\/songlist\/gcid_[a-zA-Z0-9]+/i,
// 手机版链接 (旧格式)
/m\.kugou\.com\/.*[?&]id=\d+/i,
// 参数链接
/kugou\.com\/.*[?&](?:specialid|id)=\d+/i,
// 通用酷狗链接
/kugou\.com\/.*playlist/i
]
let isValidLink = false
for (const regex of kgPlaylistRegexes) {
if (regex.test(input)) {
isValidLink = true
playlistId = input // 传递完整链接
break
}
}
if (!isValidLink) {
// 检查是否为纯数字ID
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
} else {
MessagePlugin.error('无法识别的酷狗音乐歌单链接或ID格式请检查链接是否正确')
load1.then((res) => res.close())
return
}
}
platformName = '酷狗音乐'
} else if (importPlatformType.value === 'mg') {
// 咪咕音乐歌单ID解析
const mgPlaylistRegexes = [
// 标准歌单链接
/(?:music\.migu\.cn\/.*[?&]id=)(\d+)/i,
// 手机版链接
/(?:m\.music\.migu\.cn\/.*[?&]id=)(\d+)/i,
// 通用ID提取
/[?&]id=(\d+)/i
]
let match: RegExpMatchArray | null = null
for (const regex of mgPlaylistRegexes) {
match = input.match(regex)
if (match && match[1]) {
playlistId = match[1]
break
}
}
if (!match || !match[1]) {
const numericMatch = input.match(/^\d+$/)
if (numericMatch) {
playlistId = input
} else {
MessagePlugin.error('无法识别的咪咕音乐歌单链接或ID格式请检查链接是否正确')
load1.then((res) => res.close())
return
}
}
platformName = '咪咕音乐'
} else {
MessagePlugin.error('不支持的平台类型')
load1.then((res) => res.close())
return
}
// 验证歌单ID是否有效
if (!playlistId || playlistId.length < 6) {
MessagePlugin.error('歌单ID格式不正确')
load1.then((res) => res.close())
return
}
@@ -500,58 +691,104 @@ const handleNetworkPlaylistImport = async (input: string) => {
let detailResult: any
try {
detailResult = (await window.api.music.requestSdk('getPlaylistDetail', {
source: 'wy',
source: importPlatformType.value,
id: playlistId,
page: 1
})) as any
} catch {
MessagePlugin.error('获取歌单详情失败:歌曲信息可能有误')
MessagePlugin.error(`获取${platformName}歌单详情失败:歌曲信息可能有误`)
load2.then((res) => res.close())
return
}
if (detailResult.error) {
MessagePlugin.error('获取歌单详情失败:' + detailResult.error)
MessagePlugin.error(`获取${platformName}歌单详情失败:` + detailResult.error)
load2.then((res) => res.close())
return
}
const playlistInfo = detailResult.info
const songs = detailResult.list || []
if (songs.length === 0) {
MessagePlugin.warning('该歌单没有歌曲')
load2.then((res) => res.close())
return
}
const createResult = await songListAPI.create(
`${playlistInfo.name} (导入)`,
`从网易云音乐导入 - 原歌单:${playlistInfo.name}`,
'wy'
)
const newPlaylistId = createResult.data!.id
await songListAPI.updateCover(newPlaylistId, detailResult.info.img)
if (!createResult.success) {
MessagePlugin.error('创建本地歌单失败:' + createResult.error)
return
}
const addResult = await songListAPI.addSongs(newPlaylistId, songs)
// 处理导入结果
let successCount = 0
let failCount = 0
if (addResult.success) {
successCount = songs.length
failCount = 0
// 为酷狗音乐获取封面图片
if (importPlatformType.value === 'kg') {
load2.then((res) => res.close())
const load3 = MessagePlugin.loading('正在获取歌曲封面...')
if (songs.length > 100) MessagePlugin.info('歌曲较多,封面获取可能较慢')
try {
await setPicForPlaylist(songs, importPlatformType.value)
} catch (error) {
console.warn('获取封面失败,但继续导入:', error)
}
load3.then((res) => res.close())
const load4 = MessagePlugin.loading('正在创建本地歌单...')
const createResult = await songListAPI.create(
`${playlistInfo.name} (导入)`,
`${platformName}导入 - 原歌单:${playlistInfo.name}`,
importPlatformType.value
)
const newPlaylistId = createResult.data!.id
await songListAPI.updateCover(newPlaylistId, detailResult.info.img)
if (!createResult.success) {
MessagePlugin.error('创建本地歌单失败:' + createResult.error)
load4.then((res) => res.close())
return
}
const addResult = await songListAPI.addSongs(newPlaylistId, songs)
load4.then((res) => res.close())
if (addResult.success) {
successCount = songs.length
failCount = 0
} else {
successCount = 0
failCount = songs.length
console.error('批量添加歌曲失败:', addResult.error)
}
} else {
successCount = 0
failCount = songs.length
console.error('批量添加歌曲失败:', addResult.error)
const createResult = await songListAPI.create(
`${playlistInfo.name} (导入)`,
`${platformName}导入 - 原歌单:${playlistInfo.name}`,
importPlatformType.value
)
const newPlaylistId = createResult.data!.id
await songListAPI.updateCover(newPlaylistId, detailResult.info.img)
if (!createResult.success) {
MessagePlugin.error('创建本地歌单失败:' + createResult.error)
load2.then((res) => res.close())
return
}
const addResult = await songListAPI.addSongs(newPlaylistId, songs)
load2.then((res) => res.close())
if (addResult.success) {
successCount = songs.length
failCount = 0
} else {
successCount = 0
failCount = songs.length
console.error('批量添加歌曲失败:', addResult.error)
}
}
load2.then((res) => res.close())
// 刷新歌单列表
await loadPlaylists()
@@ -559,7 +796,7 @@ const handleNetworkPlaylistImport = async (input: string) => {
// 显示导入结果
if (successCount > 0) {
MessagePlugin.success(
`导入完成!成功导入 ${successCount} 首歌曲` +
`${platformName}导入完成!成功导入 ${successCount} 首歌曲` +
(failCount > 0 ? `${failCount} 首歌曲导入失败` : '')
)
} else {
@@ -605,6 +842,80 @@ const deleteSong = (song: Songs): void => {
})
}
// 右键菜单项配置
const contextMenuItems = computed((): ContextMenuItem[] => {
if (!contextMenuPlaylist.value) return []
return [
createMenuItem('play', '播放歌单', {
icon: PlayCircleIcon,
onClick: () => {
if (contextMenuPlaylist.value) {
playPlaylist(contextMenuPlaylist.value)
}
}
}),
createMenuItem('view', '查看详情', {
icon: ViewListIcon,
onClick: () => {
if (contextMenuPlaylist.value) {
viewPlaylist(contextMenuPlaylist.value)
}
}
}),
createSeparator(),
createMenuItem('edit', '编辑歌单', {
icon: Edit2Icon,
onClick: () => {
if (contextMenuPlaylist.value) {
editPlaylist(contextMenuPlaylist.value)
}
}
}),
createMenuItem('delete', '删除歌单', {
icon: DeleteIcon,
onClick: async () => {
if (contextMenuPlaylist.value) {
try {
const result = await songListAPI.delete(contextMenuPlaylist.value.id)
if (result.success) {
MessagePlugin.success('歌单删除成功')
await loadPlaylists()
} else {
MessagePlugin.error(result.error || '删除歌单失败')
}
} catch (error) {
console.error('删除歌单失败:', error)
MessagePlugin.error('删除歌单失败')
}
}
}
})
]
})
// 处理歌单右键菜单
const handlePlaylistContextMenu = (event: MouseEvent, playlist: SongList) => {
event.preventDefault()
event.stopPropagation()
contextMenuPlaylist.value = playlist
contextMenuPosition.value = calculateMenuPosition(event)
contextMenuVisible.value = true
}
// 处理右键菜单项点击
const handleContextMenuItemClick = (_item: ContextMenuItem, _event: MouseEvent) => {
// 菜单项的 onClick 回调已经在 ContextMenuItem 组件中调用
// 这里不需要额外处理
}
// 关闭右键菜单
const closeContextMenu = () => {
contextMenuVisible.value = false
contextMenuPlaylist.value = null
}
// 组件挂载时加载数据
onMounted(() => {
loadPlaylists()
@@ -669,7 +980,12 @@ onMounted(() => {
<!-- 歌单网格 -->
<div v-else-if="playlists.length > 0" class="playlists-grid">
<div v-for="playlist in playlists" :key="playlist.id" class="playlist-card">
<div
v-for="playlist in playlists"
:key="playlist.id"
class="playlist-card"
@contextmenu="handlePlaylistContextMenu($event, playlist)"
>
<div class="playlist-cover" @click="viewPlaylist(playlist)">
<img
v-if="playlist.coverImgUrl"
@@ -719,7 +1035,11 @@ onMounted(() => {
size="small"
@click="viewPlaylist(playlist)"
>
<ListIcon />
<view-list-icon
:fill-color="'transparent'"
:stroke-color="'#000000'"
:stroke-width="1.5"
/>
</t-button>
</t-tooltip>
<t-tooltip content="编辑歌单">
@@ -815,7 +1135,7 @@ onMounted(() => {
v-if="playlists.length > 0"
:options="playlists.map((p) => ({ content: p.name, value: p.id }))"
@click="
(playlistId) => addToPlaylist(song, playlists.find((p) => p.id === playlistId)!)
(option) => addToPlaylist(song, playlists.find((p) => p.id === option.value)!)
"
>
<t-button
@@ -917,7 +1237,7 @@ onMounted(() => {
</div>
<div class="option-content">
<h4>从网络歌单</h4>
<p>导入网易云QQ音乐等平台歌单</p>
<p>导入网易云音乐QQ音乐等平台歌单</p>
<span class="coming-soon">实验性功能</span>
</div>
<div class="option-arrow">
@@ -930,37 +1250,122 @@ onMounted(() => {
<t-dialog
v-model:visible="showNetworkImportDialog"
placement="center"
header="导入网易云音乐歌单"
header="导入网歌单"
:confirm-btn="{ content: '开始导入', theme: 'primary' }"
:cancel-btn="{ content: '取消', variant: 'outline' }"
width="500px"
width="600px"
:style="{ maxHeight: '80vh' }"
@confirm="confirmNetworkImport"
@cancel="cancelNetworkImport"
>
<div class="network-import-content">
<p class="import-description">
请输入网易云音乐歌单链接或歌单ID系统将自动识别格式并导入歌单中的所有歌曲到本地歌单
</p>
<!-- 平台选择 -->
<div class="platform-selector">
<label class="form-label">选择导入平台</label>
<t-radio-group v-model="importPlatformType" variant="primary-filled">
<t-radio-button value="wy"> 网易云音乐 </t-radio-button>
<t-radio-button value="tx"> QQ音乐 </t-radio-button>
<t-radio-button value="kw"> 酷我音乐 </t-radio-button>
<t-radio-button value="kg"> 酷狗音乐 </t-radio-button>
<t-radio-button value="mg"> 咪咕音乐 </t-radio-button>
</t-radio-group>
</div>
<t-input
v-model="networkPlaylistUrl"
placeholder="支持链接或IDhttps://music.163.com/playlist?id=123456789 或 123456789"
clearable
autofocus
class="url-input"
@enter="confirmNetworkImport"
/>
<!-- 内容区域 - 添加过渡动画 -->
<div class="import-content-wrapper">
<transition name="fade-slide" mode="out-in">
<div :key="importPlatformType" class="import-content">
<div style="margin-bottom: 1em">
请输入{{
importPlatformType === 'wy'
? '网易云音乐'
: importPlatformType === 'tx'
? 'QQ音乐'
: importPlatformType === 'kw'
? '酷我音乐'
: importPlatformType === 'kg'
? '酷狗音乐'
: importPlatformType === 'mg'
? '咪咕音乐'
: '音乐平台'
}}歌单链接或歌单ID系统将自动识别格式并导入歌单中的所有歌曲到本地歌单
</div>
<t-input
v-model="networkPlaylistUrl"
:placeholder="
importPlatformType === 'wy'
? '支持链接或IDhttps://music.163.com/playlist?id=123456789 或 123456789'
: importPlatformType === 'tx'
? '支持链接或IDhttps://y.qq.com/n/ryqq/playlist/123456789 或 123456789'
: importPlatformType === 'kw'
? '支持链接或IDhttp://www.kuwo.cn/playlist_detail/123456789 或 123456789'
: importPlatformType === 'kg'
? '支持链接或IDhttps://www.kugou.com/yy/special/single/123456789 或 123456789'
: importPlatformType === 'mg'
? '支持链接或IDhttps://music.migu.cn/v3/music/playlist/123456789 或 123456789'
: '请输入歌单链接或ID'
"
clearable
autofocus
class="url-input"
@enter="confirmNetworkImport"
/>
<div class="import-tips">
<p class="tip-title">支持的输入格式</p>
<ul class="tip-list">
<li>完整链接https://music.163.com/playlist?id=123456789</li>
<li>手机链接https://music.163.com/m/playlist?id=123456789</li>
<li>分享链接https://y.music.163.com/m/playlist/123456789</li>
<li>纯数字ID123456789</li>
<li>其他包含ID的网易云链接格式</li>
</ul>
<p class="tip-note">智能识别系统会自动从输入中提取歌单ID</p>
<div class="import-tips">
<p class="tip-title">
{{
importPlatformType === 'wy'
? '网易云音乐'
: importPlatformType === 'tx'
? 'QQ音乐'
: importPlatformType === 'kw'
? '酷我音乐'
: importPlatformType === 'kg'
? '酷狗音乐'
: importPlatformType === 'mg'
? '咪咕音乐'
: '音乐平台'
}}支持的输入格式
</p>
<ul v-if="importPlatformType === 'wy'" class="tip-list">
<li>完整链接https://music.163.com/playlist?id=123456789</li>
<li>手机链接https://music.163.com/m/playlist?id=123456789</li>
<li>分享链接https://y.music.163.com/m/playlist/123456789</li>
<li>纯数字ID123456789</li>
<li>其他包含ID的网易云链接格式</li>
</ul>
<ul v-else-if="importPlatformType === 'tx'" class="tip-list">
<li>完整链接https://y.qq.com/n/ryqq/playlist/123456789</li>
<li>手机链接https://i.y.qq.com/v8/playsquare/playlist.html?id=123456789</li>
<li>分享链接https://i.y.qq.com/n2/m/share/details/taoge.html?id=123456789</li>
<li>其他分享https://c.y.qq.com/base/fcgi-bin/u?__=123456789</li>
<li>纯数字ID123456789</li>
</ul>
<ul v-else-if="importPlatformType === 'kw'" class="tip-list">
<li>完整链接http://www.kuwo.cn/playlist_detail/123456789</li>
<li>手机链接http://m.kuwo.cn/h5app/playlist/123456789</li>
<li>参数链接http://www.kuwo.cn/playlist?pid=123456789</li>
<li>纯数字ID123456789</li>
<li>其他包含ID的酷我音乐链接格式</li>
</ul>
<ul v-else-if="importPlatformType === 'kg'" class="tip-list">
<li>完整链接https://www.kugou.com/yy/special/single/123456789</li>
<li>手机版链接https://m.kugou.com/songlist/gcid_3z9vj0yqz4bz00b</li>
<li>旧版手机链接https://m.kugou.com/playlist?id=123456789</li>
<li>参数链接https://www.kugou.com/playlist?specialid=123456789</li>
<li>纯数字ID123456789</li>
</ul>
<ul v-else-if="importPlatformType === 'mg'" class="tip-list">
<li>完整链接https://music.migu.cn/v3/music/playlist/123456789</li>
<li>手机链接https://m.music.migu.cn/playlist?id=123456789</li>
<li>参数链接https://music.migu.cn/playlist?id=123456789</li>
<li>纯数字ID123456789</li>
<li>其他包含ID的咪咕音乐链接格式</li>
</ul>
<p class="tip-note">智能识别系统会自动从输入中提取歌单ID</p>
</div>
</div>
</transition>
</div>
</div>
</t-dialog>
@@ -1001,6 +1406,15 @@ onMounted(() => {
</div>
</div>
</t-dialog>
<!-- 歌单右键菜单 -->
<ContextMenu
v-model:visible="contextMenuVisible"
:position="contextMenuPosition"
:items="contextMenuItems"
@item-click="handleContextMenuItemClick"
@close="closeContextMenu"
/>
</div>
</template>
@@ -1055,48 +1469,190 @@ onMounted(() => {
// 网络歌单导入对话框样式
.network-import-content {
.import-description {
margin-bottom: 1rem;
color: #666;
font-size: 14px;
line-height: 1.5;
max-height: 60vh;
overflow-y: auto;
scrollbar-width: none;
padding: 0 10px;
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
.url-input {
margin-bottom: 1.5rem;
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.import-tips {
background: #f8f9fa;
border-radius: 6px;
padding: 1rem;
border-left: 3px solid #507daf;
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
.tip-title {
margin: 0 0 0.5rem 0;
font-weight: 500;
color: #333;
font-size: 14px;
&:hover {
background: #a8a8a8;
}
}
.platform-selector {
margin-bottom: 2rem;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
padding: 0.5rem 0;
margin: -0.5rem 0 1.5rem 0;
border-bottom: 1px solid #f0f0f0;
.form-label {
display: block;
margin-bottom: 1rem;
font-weight: 600;
color: #374151;
font-size: 15px;
}
.tip-list {
margin: 0 0 0.5rem 0;
padding-left: 1.2rem;
:deep(.t-radio-group) {
width: 100%;
li {
color: #666;
font-size: 13px;
margin-bottom: 0.25rem;
font-family: 'Consolas', 'Monaco', monospace;
.t-radio-button {
flex: 1;
display: flex;
justify-content: center;
.t-radio-button__label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 500;
text-align: center;
.iconfont {
font-size: 16px;
transition: all 0.2s ease;
}
}
&.t-is-checked .t-radio-button__label .iconfont {
transform: scale(1.1);
}
}
}
}
.tip-note {
margin: 0;
color: #999;
font-size: 12px;
font-style: italic;
.import-content-wrapper {
position: relative;
min-height: 200px;
flex: 1;
}
.import-content {
.import-description {
margin-bottom: 1.25rem;
color: #64748b;
font-size: 14px;
line-height: 1.6;
padding: 1rem;
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 8px;
border-left: 4px solid var(--td-brand-color-4);
}
.url-input {
margin-bottom: 1.5rem;
}
.import-tips {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
padding: 1.25rem;
border: 1px solid #e2e8f0;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--td-brand-color-4), var(--td-brand-color-6));
}
.tip-title {
margin: 0 0 0.75rem 0;
font-weight: 600;
color: #334155;
font-size: 15px;
display: flex;
align-items: center;
gap: 0.5rem;
&::before {
content: '💡';
font-size: 16px;
}
}
.tip-list {
margin: 0 0 0.75rem 0;
padding-left: 1.5rem;
li {
color: #64748b;
font-size: 13px;
margin-bottom: 0.5rem;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 4px;
transition: all 0.2s ease;
&:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateX(4px);
}
}
}
.tip-note {
margin: 0;
color: #94a3b8;
font-size: 12px;
font-style: italic;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 6px;
&::before {
content: '✨';
font-size: 14px;
}
}
}
}
// 过渡动画
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-slide-enter-from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
.fade-slide-leave-to {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
.fade-slide-enter-to,
.fade-slide-leave-from {
opacity: 1;
transform: translateY(0) scale(1);
}
}

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, computed, watch, toRaw } from 'vue'
import { searchValue } from '@renderer/store/search'
import { downloadSingleSong } from '@renderer/utils/download'
import { downloadSingleSong } from '@renderer/utils/audio/download'
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
import { MessagePlugin } from 'tdesign-vue-next'
import SongVirtualList from '@renderer/components/Music/SongVirtualList.vue'
@@ -34,6 +34,8 @@ const isPlaying = ref(false)
const search = searchValue()
onMounted(async () => {
const localUserStore = LocalUserDetailStore()
watch(
search,
async () => {
@@ -42,6 +44,17 @@ onMounted(async () => {
},
{ immediate: true }
)
// 监听 userSource 变化,重新加载页面
watch(
() => localUserStore.userSource,
async () => {
if (keyword.value.trim()) {
await performSearch(true)
}
},
{ deep: true }
)
})
// 执行搜索
@@ -133,7 +146,7 @@ const handlePause = () => {
}
}
const handleDownload = (song: MusicItem) => {
const handleDownload = (song: any) => {
downloadSingleSong(song)
}

View File

@@ -21,9 +21,14 @@ import AIFloatBallSettings from '@renderer/components/Settings/AIFloatBallSettin
import ThemeSelector from '@renderer/components/ThemeSelector.vue'
import Versions from '@renderer/components/Versions.vue'
import { useAutoUpdate } from '@renderer/composables/useAutoUpdate'
import { useSettingsStore } from '@renderer/store/Settings'
const Store = LocalUserDetailStore()
const { userInfo } = storeToRefs(Store)
// 设置存储
const settingsStore = useSettingsStore()
const { settings } = storeToRefs(settingsStore)
// 当前选择的设置分类
const activeCategory = ref<string>('appearance')
// 应用版本号
@@ -206,19 +211,25 @@ const qualitySliderValue = ref(0)
const qualityMarks = computed(() => {
const marks: Record<number, string> = {}
currentSourceQualities.value.forEach((quality, index) => {
marks[index] = getQualityDisplayName(quality)
marks[index] = String(getQualityDisplayName(quality))
})
return marks
})
// 监听当前选择的音质,更新滑块位置
watch(
() => userInfo.value.selectQuality,
(newQuality) => {
if (newQuality && currentSourceQualities.value.length > 0) {
const index = currentSourceQualities.value.indexOf(newQuality)
[() => userInfo.value.selectQuality, () => currentSourceQualities.value],
([newQuality, qualities]) => {
if (qualities.length > 0 && newQuality) {
// 检查当前选择的音质是否在新平台的支持列表中
const index = qualities.indexOf(newQuality)
if (index !== -1) {
qualitySliderValue.value = index
} else {
// 如果当前音质不在支持列表中,选择默认音质
console.log('当前音质不在支持列表中,选择默认音质')
// 选择最高音质
userInfo.value.selectQuality = qualities[qualities.length - 1]
}
}
},
@@ -234,12 +245,16 @@ const selectSource = (sourceKey: string) => {
// 自动选择该音源的最高音质
const source = userInfo.value.supportedSources?.[sourceKey]
if (source && source.qualitys && source.qualitys.length > 0) {
userInfo.value.selectQuality = source.qualitys[source.qualitys.length - 1]
// 检查当前选择的音质是否在新平台的支持列表中
const currentQuality = userInfo.value.selectQuality
if (!currentQuality || !source.qualitys.includes(currentQuality)) {
userInfo.value.selectQuality = source.qualitys[source.qualitys.length - 1]
}
}
}
// 音质滑块变化处理
const onQualityChange = (value: number) => {
const onQualityChange = (value: any) => {
if (
currentSourceQualities.value.length > 0 &&
value >= 0 &&
@@ -298,6 +313,30 @@ const getCurrentSourceName = () => {
const openLink = (url: string) => {
window.open(url, '_blank')
}
// 标签写入选项
const tagWriteOptions = ref({
basicInfo: settings.value.tagWriteOptions?.basicInfo ?? true,
cover: settings.value.tagWriteOptions?.cover ?? true,
lyrics: settings.value.tagWriteOptions?.lyrics ?? true
})
// 更新标签写入选项
const updateTagWriteOptions = () => {
settingsStore.updateSettings({
tagWriteOptions: { ...tagWriteOptions.value }
})
}
// 获取标签选项状态描述
const getTagOptionsStatus = () => {
const enabled: string[] = []
if (tagWriteOptions.value.basicInfo) enabled.push('基础信息')
if (tagWriteOptions.value.cover) enabled.push('封面')
if (tagWriteOptions.value.lyrics) enabled.push('歌词')
return enabled.length > 0 ? enabled.join('、') : '未选择任何选项'
}
</script>
<template>
@@ -565,12 +604,51 @@ const openLink = (url: string) => {
<div v-else-if="activeCategory === 'storage'" key="storage" class="settings-section">
<DirectorySettings
ref="directorySettingsRef"
class="setting-group"
@directory-changed="handleDirectoryChanged"
@cache-cleared="handleCacheCleared"
/>
<div style="margin-top: 20px">
<div style="margin-top: 20px" class="setting-group">
<MusicCache ref="musicCacheRef" @cache-cleared="handleCacheCleared" />
</div>
<!-- 标签写入设置 -->
<div class="setting-group">
<h3>下载标签写入设置</h3>
<p>选择下载歌曲时要写入的标签信息</p>
<div class="tag-options">
<div class="tag-option">
<t-checkbox v-model="tagWriteOptions.basicInfo" @change="updateTagWriteOptions">
基础信息
</t-checkbox>
<p class="option-desc">包括歌曲标题艺术家专辑名称等基本信息</p>
</div>
<div class="tag-option">
<t-checkbox v-model="tagWriteOptions.cover" @change="updateTagWriteOptions">
封面
</t-checkbox>
<p class="option-desc">将专辑封面嵌入到音频文件中</p>
</div>
<div class="tag-option">
<t-checkbox v-model="tagWriteOptions.lyrics" @change="updateTagWriteOptions">
普通歌词
</t-checkbox>
<p class="option-desc">将歌词信息写入到音频文件的标签中</p>
</div>
</div>
<div class="tag-options-status">
<div class="status-summary">
<span class="status-label">当前配置</span>
<span class="status-value">
{{ getTagOptionsStatus() }}
</span>
</div>
</div>
</div>
</div>
<!-- 关于页面 -->
@@ -734,6 +812,44 @@ const openLink = (url: string) => {
禁止修改后用于侵犯第三方权益的场景
</p>
</div>
<div class="notice-item">
<h4>🚫 使用限制</h4>
<p>
本项目仅允许用于非商业纯技术学习目的禁止用于任何商业运营盈利活动
禁止修改后用于侵犯第三方权益的场景
</p>
</div>
</div>
<h3 style="margin-top: 2rem">关于我们</h3>
<div class="legal-notice">
<div class="notice-item">
<h4>😊 时迁酱</h4>
<p>
你好呀好呀我是 (时迁酱)
<br />
一枚普普通通的高中生因为好奇+喜欢悄悄自学了一点编程
<br />
<br />
没想到今天你能用上我做的软件澜音它其实是我学 Electron
时孵出来的小demo
<br />
看到它真的能运行还有人愿意用我真的超级开心骄傲的💖
<br />
<br />
当然啦平时还是要乖乖写作业上课哒但我还是会继续挤出时间让澜音慢慢长大越走越远哒💪
<br />
<br />
如果你也喜欢它或者想给我加点零食鼓励🧋欢迎打赏赞助哟谢谢可爱的你
<img
src="https://oss.shiqianjiang.cn/storage/default/20250907/image-2025082711173bb1bba3608ef15d0e1fb485f80f29c728186.png"
alt="赞赏"
style="width: 100%; padding: 20px 30%"
/>
什么你也想学习编程我教你吖QQ:2115295703
</p>
<br />
<h4>...待补充</h4>
</div>
</div>
</div>
@@ -743,8 +859,8 @@ const openLink = (url: string) => {
<div class="contact-info">
<p>如有技术问题或合作意向仅限技术交流请通过以下方式联系</p>
<div class="contact-actions">
<t-button theme="primary" @click="openLink('https://qm.qq.com/q/IDpQnbGd06')">
官方QQ群
<t-button theme="primary" @click="openLink('https://qm.qq.com/q/8c25dPfylG')">
官方QQ群(1057783951)
</t-button>
<t-button
theme="primary"
@@ -859,10 +975,12 @@ const openLink = (url: string) => {
display: flex;
justify-content: center;
align-items: center;
svg {
width: 100%;
height: 100%;
}
transition: color 0.2s ease;
}
@@ -1465,12 +1583,15 @@ const openLink = (url: string) => {
&:nth-child(1) {
animation-delay: 0.1s;
}
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.3s;
}
&:nth-child(4) {
animation-delay: 0.4s;
}
@@ -1481,6 +1602,7 @@ const openLink = (url: string) => {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
@@ -1591,6 +1713,7 @@ const openLink = (url: string) => {
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
transition: 0.3s;
.tech-name {
font-weight: 600;
color: #1e293b;
@@ -1600,10 +1723,12 @@ const openLink = (url: string) => {
font-size: 0.875rem;
color: #64748b;
}
&.link:hover {
background-color: var(--td-brand-color-1);
border: 1px solid var(--td-brand-color-5);
}
&.link:active {
transform: scale(0.9);
}
@@ -1706,6 +1831,7 @@ const openLink = (url: string) => {
flex-direction: column;
gap: 1rem;
position: relative;
.update-actions {
text-align: center;
}
@@ -1724,6 +1850,53 @@ const openLink = (url: string) => {
}
}
// 标签写入设置样式
.tag-options {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
.tag-option {
padding: 1rem;
background: #f8fafc;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
.option-desc {
margin: 0.5rem 0 0 1.5rem;
font-size: 0.875rem;
color: #64748b;
line-height: 1.4;
}
}
}
.tag-options-status {
background: #f8fafc;
padding: 1rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
.status-summary {
display: flex;
align-items: center;
gap: 0.5rem;
.status-label {
font-weight: 500;
color: #64748b;
font-size: 0.875rem;
}
.status-value {
font-weight: 600;
color: #1e293b;
font-size: 0.875rem;
}
}
}
// 响应式适配
@media (max-width: 768px) {
.app-header {
@@ -1745,6 +1918,7 @@ const openLink = (url: string) => {
flex-direction: column;
}
}
.sidebar,
.panel-content {
// Webkit 浏览器

View File

@@ -829,7 +829,6 @@ onMounted(async () => {
align-items: center;
gap: 12px;
font-size: 12px;
.console-prompt {
color: var(--td-brand-color-5);
font-weight: bold;
@@ -952,6 +951,7 @@ onMounted(async () => {
flex: 1;
word-break: break-all;
white-space: pre-wrap;
user-select: text !important;
}
/* 不同日志级别的颜色 */

View File

@@ -14,14 +14,6 @@
<h1 class="brand-title">Cerulean Music</h1>
<p class="brand-subtitle">澜音-纯净音乐极致音乐体验</p>
<!-- 加载状态 -->
<!-- <div class="loading-area">
<div class="progress-bar">
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
</div>
<p class="loading-text">{{ loadingText }}</p>
</div> -->
<!-- 特性标签 -->
<div class="feature-tags">
<span v-for="(feature, index) in features" :key="index" class="tag">
@@ -58,7 +50,7 @@ onMounted(async () => {
}
setTimeout(() => {
router.push('/home')
router.replace('/home')
}, 2000)
})
</script>
@@ -228,28 +220,28 @@ onMounted(async () => {
flex-direction: column;
text-align: center;
}
.logo-section {
flex: none;
padding: 2rem 2rem 1rem 2rem;
}
.content-section {
flex: none;
justify-content: center;
padding: 1rem 2rem 2rem 2rem;
}
.brand-title {
font-size: 2.8rem;
}
.image-bg {
width: 150px;
height: 150px;
filter: blur(40px);
}
.logo-image {
width: 100px;
height: 100px;
@@ -260,21 +252,21 @@ onMounted(async () => {
.brand-title {
font-size: 2.2rem;
}
.brand-subtitle {
font-size: 1rem;
}
.content-section {
padding: 1rem;
}
.image-bg {
width: 120px;
height: 120px;
filter: blur(30px);
}
.logo-image {
width: 80px;
height: 80px;

96
src/types/global.d.ts vendored
View File

@@ -1,96 +0,0 @@
import { CacheInfo, CacheOperationResult } from './musicCache'
// 全局类型定义
declare global {
interface Window {
electronAPI: {
// 音乐缓存相关
musicCache: {
getInfo: () => Promise<CacheInfo>
clear: () => Promise<CacheOperationResult>
getSize: () => Promise<number>
}
}
api: {
// 自动更新相关
autoUpdater: {
checkForUpdates: () => Promise<void>
quitAndInstall: () => Promise<void>
onMessage: (callback: (data: { type: string; data?: any }) => void) => void
removeMessageListener: () => void
}
}
electron: {
ipcRenderer: {
invoke: (channel: string, ...args: any[]) => Promise<any>
}
}
}
}
declare namespace LX {
namespace Music {
// 音质类型
type QualityType = 'flac24bit' | 'flac' | '320k' | '192k' | '128k' | 'ape' | 'wav'
// 音质信息
interface Quality {
type: QualityType
size?: string
}
// 基础音乐信息
interface MusicInfoBase {
id: string
name: string
singer: string
source: string
interval: string | number
}
// 本地音乐元数据
interface MusicInfoLocalMeta {
songId: string
albumName?: string
picUrl?: string
filePath: string
ext: string
}
// 在线音乐元数据
interface MusicInfoOnlineMeta {
songId: string
albumName?: string
picUrl?: string
albumId?: string
qualitys: Quality[]
_qualitys: Record<QualityType, boolean>
// 酷狗特有
hash?: string
// 腾讯音乐特有
strMediaMid?: string
id?: string
albumMid?: string
// 咪咕特有
copyrightId?: string
lrcUrl?: string
mrcUrl?: string
trcUrl?: string
}
// 本地音乐信息
interface MusicInfoLocal extends MusicInfoBase {
source: 'local'
meta: MusicInfoLocalMeta
}
// 在线音乐信息
interface MusicInfoOnline extends MusicInfoBase {
source: 'kg' | 'tx' | 'mg' | 'kw' | 'wy'
meta: MusicInfoOnlineMeta
}
// 统一音乐信息类型
type MusicInfo = MusicInfoLocal | MusicInfoOnline
}
}

View File

@@ -4,6 +4,8 @@
"src/renderer/src/env.d.ts",
"src/renderer/src/**/*",
"src/renderer/src/**/*.vue",
"src/renderer/auto-imports.d.ts",
"src/renderer/components.d.ts",
"src/preload/*.d.ts",
"src/types/**/*",
"src/common/**/*"

9082
yarn.lock

File diff suppressed because it is too large Load Diff