mirror of
https://github.com/timeshiftsauce/CeruMusic.git
synced 2025-11-25 11:29:42 +08:00
docs
This commit is contained in:
sqj
2
.gitignore
vendored
2
.gitignore
vendored
@@ -16,3 +16,5 @@ temp/log.txt
|
||||
/.vscode/
|
||||
/.codebuddy/
|
||||
/.idea/
|
||||
docs/.vitepress/dist
|
||||
docs/.vitepress/cache
|
||||
|
||||
50
docs/.vitepress/config.mts
Normal file
50
docs/.vitepress/config.mts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
lang: 'zh-CN',
|
||||
title: "Ceru Music",
|
||||
description: "Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具，一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。",
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
logo: '../assets/logo.svg',
|
||||
nav: [
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '使用文档', link: '/guide/' }
|
||||
],
|
||||
|
||||
sidebar: [
|
||||
{
|
||||
text: 'CeruMusic',
|
||||
items: [
|
||||
{ text: '使用教程', link: '/guide/' },
|
||||
{ text: '软件设计文档', link: '/guide/design' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '澜音&插件',
|
||||
items: [
|
||||
{ text: '插件类使用', link: '/guide/CeruMusicPluginHost' },
|
||||
{ text: '澜音插件开发文档（重点）', link: '/guide/CeruMusicPluginDev' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
|
||||
],
|
||||
footer: {
|
||||
message: 'Released under the Apache License 2.0 License.',
|
||||
copyright: `Copyright © 2025-${new Date().getFullYear()} 时迁酱`
|
||||
},
|
||||
editLink: {
|
||||
pattern: 'https://github.com/timeshiftsauce/CeruMusic/edit/main/docs/:path'
|
||||
},
|
||||
search: {
|
||||
provider: 'local'
|
||||
}
|
||||
},
|
||||
lastUpdated: true,
|
||||
|
||||
})
|
||||
// Smooth scrolling functions
|
||||
80
docs/.vitepress/theme/MyLayout.vue
Normal file
80
docs/.vitepress/theme/MyLayout.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
import { useRouter, useData } from 'vitepress'
|
||||
import { toggleDark } from './dark'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { watch, ref } from 'vue'
|
||||
|
||||
const { route } = useRouter()
|
||||
const isTransitioning = ref(false)
|
||||
const { Layout } = DefaultTheme
|
||||
const { isDark } = useData()
|
||||
|
||||
toggleDark(isDark)
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
isTransitioning.value = true
|
||||
// 动画结束后重置状态
|
||||
setTimeout(() => {
|
||||
isTransitioning.value = false
|
||||
}, 500) // 500ms 要和 CSS 动画时间匹配
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout> </Layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* .shade {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgb(255, 255, 255);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.shade-active {
|
||||
opacity: 0;
|
||||
animation: shadeAnimation 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes shadeAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
} */
|
||||
#VPContent.vp-doc > div {
|
||||
animation:
|
||||
rises 1s,
|
||||
looming 0.6s;
|
||||
}
|
||||
@keyframes rises {
|
||||
0% {
|
||||
transform: translateY(50px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes looming {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
docs/.vitepress/theme/dark.css
Normal file
21
docs/.vitepress/theme/dark.css
Normal file
@@ -0,0 +1,21 @@
|
||||
::view-transition-old(*) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
::view-transition-new(*) {
|
||||
animation: globalDark .5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes globalDark {
|
||||
from {
|
||||
clip-path: circle(0% at var(--darkX) var(--darkY));
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: circle(100% at var(--darkX) var(--darkY));
|
||||
}
|
||||
}
|
||||
|
||||
.dark img {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
23
docs/.vitepress/theme/dark.ts
Normal file
23
docs/.vitepress/theme/dark.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { nextTick, provide } from 'vue'
|
||||
// 判断是否能使用 startViewTransition
|
||||
const enableTransitions = () => {
|
||||
return 'startViewTransition' in document && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
|
||||
}
|
||||
// 切换动画
|
||||
export const toggleDark = (isDark: any) => {
|
||||
provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
|
||||
//如果不支持动效直接切换
|
||||
if (!enableTransitions()) {
|
||||
isDark.value = !isDark.value
|
||||
return
|
||||
}
|
||||
document.documentElement.style.setProperty('--darkX', x + 'px')
|
||||
document.documentElement.style.setProperty('--darkY', y + 'px')
|
||||
// 原生的视图转换动画 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/startViewTransition
|
||||
// pnpm add -D @types/dom-view-transitions 解决 document.startViewTransition 类型错误的问题
|
||||
await document.startViewTransition(async () => {
|
||||
isDark.value = !isDark.value
|
||||
await nextTick()
|
||||
}).ready
|
||||
})
|
||||
}
|
||||
16
docs/.vitepress/theme/index.ts
Normal file
16
docs/.vitepress/theme/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import './style.css'
|
||||
import './dark.css'
|
||||
import MyLayout from './MyLayout.vue';
|
||||
history.scrollRestoration = 'manual'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
Layout: MyLayout,
|
||||
enhanceApp({ app, router, siteData }) {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
docs/.vitepress/theme/phycat/Cascadia-Code-Regular.ttf
Normal file
BIN
docs/.vitepress/theme/phycat/Cascadia-Code-Regular.ttf
Normal file
Binary file not shown.
BIN
docs/.vitepress/theme/phycat/HarmonyOS_Sans_SC_Bold.woff
Normal file
BIN
docs/.vitepress/theme/phycat/HarmonyOS_Sans_SC_Bold.woff
Normal file
Binary file not shown.
BIN
docs/.vitepress/theme/phycat/HarmonyOS_Sans_SC_Regular.woff
Normal file
BIN
docs/.vitepress/theme/phycat/HarmonyOS_Sans_SC_Regular.woff
Normal file
Binary file not shown.
1185
docs/.vitepress/theme/phycat/phycat.dark.css
Normal file
1185
docs/.vitepress/theme/phycat/phycat.dark.css
Normal file
File diff suppressed because it is too large
Load Diff
1207
docs/.vitepress/theme/phycat/phycat.light.css
Normal file
1207
docs/.vitepress/theme/phycat/phycat.light.css
Normal file
File diff suppressed because it is too large
Load Diff
250
docs/.vitepress/theme/style.css
Normal file
250
docs/.vitepress/theme/style.css
Normal file
@@ -0,0 +1,250 @@
|
||||
@import url(./phycat/phycat.light.css);
|
||||
@import url(./phycat/phycat.dark.css);
|
||||
/**
|
||||
* Customize default theme styling by overriding CSS variables:
|
||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
||||
*/
|
||||
|
||||
/**
|
||||
* Colors
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create an accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
*
|
||||
* - `default`: The color used purely for subtle indication without any
|
||||
* special meanings attached to it such as bg color for menu hover state.
|
||||
*
|
||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
||||
* brand theme, etc.
|
||||
*
|
||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
||||
* brand color for this by default.
|
||||
*
|
||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
||||
* container, badges, etc.
|
||||
*
|
||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
||||
* in custom container, badges, etc.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
html.dark #app{
|
||||
--vp-nav-bg-color: #000000a7 !important;
|
||||
}
|
||||
.VPNavBar:not(.VPNavBar.top){
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-c-indigo-1: #14a5c2;
|
||||
--vp-c-indigo-2: #21b1ce;
|
||||
--vp-c-indigo-3: #4fcbe4;
|
||||
--vp-nav-bg-color: #ffffffa7;
|
||||
--vp-c-default-1: var(--vp-c-gray-1);
|
||||
--vp-c-default-2: var(--vp-c-gray-2);
|
||||
--vp-c-default-3: var(--vp-c-gray-3);
|
||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
||||
|
||||
--vp-c-brand-1: var(--vp-c-indigo-1);
|
||||
--vp-c-brand-2: var(--vp-c-indigo-2);
|
||||
--vp-c-brand-3: var(--vp-c-indigo-3);
|
||||
--vp-c-brand-soft: var(--vp-c-indigo-soft);
|
||||
|
||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
||||
|
||||
--vp-c-danger-1: var(--vp-c-red-1);
|
||||
--vp-c-danger-2: var(--vp-c-red-2);
|
||||
--vp-c-danger-3: var(--vp-c-red-3);
|
||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Button
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: transparent;
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
||||
--vp-button-brand-hover-border: transparent;
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-active-border: transparent;
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Home
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#5DD6CC 30%,
|
||||
#B8F1CC
|
||||
);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(
|
||||
-45deg,
|
||||
#B8F1CF 50%,
|
||||
#47caff 50%
|
||||
);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(68px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
}
|
||||
/**
|
||||
* Component: Algolia
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* 标题后小图标，借鉴自思源笔记主题——Savor */
|
||||
--h1-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.8 29.714v0c-1.371 0-2.514-1.143-2.514-2.514v0c0-1.371 1.143-2.514 2.514-2.514v0c1.371 0 2.514 1.143 2.514 2.514v0c0.114 1.371-1.029 2.514-2.514 2.514z'/></svg>") no-repeat center;
|
||||
--h2-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
|
||||
--h3-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='28' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
|
||||
--h4-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>") no-repeat center;
|
||||
--h5-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286zM4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
|
||||
--h6-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 16c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>") no-repeat center;
|
||||
|
||||
/* 是否开启网格背景？1 是；0 否 */
|
||||
--bg-grid: 0;
|
||||
|
||||
/* 已完成的代办事项是否显示删除线？1 是；0 否 */
|
||||
--check-line: 1;
|
||||
|
||||
/* 自动编号格式设置 无需自动编号可全部注释掉或部分注释掉*/
|
||||
/* --autonum-h1: counter(h1) ". ";
|
||||
--autonum-h2: counter(h1) "." counter(h2) ". ";
|
||||
--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) ". "; */
|
||||
|
||||
/* 下面是文章内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) ". "; */
|
||||
|
||||
|
||||
/* 主题颜色 */
|
||||
|
||||
--head-title-color: #3db8bf;
|
||||
/* 标题主色 */
|
||||
--head-title-h2-color: #fff;
|
||||
--head-title-h2-background: linear-gradient(to right,
|
||||
#3DB8D3,
|
||||
#80F7C4);
|
||||
/* 二级标题主色，因为二级标题是背景色的，所以单独设置 */
|
||||
|
||||
--element-color: #3db8bf;
|
||||
/* 元素主色 */
|
||||
--element-color-deep: #089ba3;
|
||||
/* 元素深色 */
|
||||
--element-color-shallow: #7aeaf0;
|
||||
/* 元素浅色 */
|
||||
--element-color-so-shallow: #7aeaf077;
|
||||
/* 元素很浅色 */
|
||||
--element-color-soo-shallow: #7aeaf018;
|
||||
/* 元素非常浅色 */
|
||||
|
||||
--element-color-linecode: #089ba3;
|
||||
/* 行内代码文字色 */
|
||||
--element-color-linecode-background: #7aeaf018;
|
||||
/* 行内代码背景色 */
|
||||
|
||||
/* 程序本体UI */
|
||||
--appui-color: #3db8bf;
|
||||
/* 程序UI主题色 */
|
||||
--appui-color-icon: #3db8bf;
|
||||
/* 程序UI图标颜色 */
|
||||
--appui-color-text: #333;
|
||||
/* 程序UI文字色 */
|
||||
--primary-color: #3db8bf;
|
||||
}
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
/**
|
||||
* 黑暗模式切换动画
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
#VPContent .vp-doc > div {
|
||||
animation: rises 1s, looming 1s;
|
||||
}
|
||||
|
||||
@keyframes rises {
|
||||
0% {
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes looming {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50%{
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
BIN
docs/assets/head.jpg
Normal file
BIN
docs/assets/head.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
docs/assets/image-20250827175023917.png
Normal file
BIN
docs/assets/image-20250827175023917.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 719 KiB |
BIN
docs/assets/image-20250827175109430.png
Normal file
BIN
docs/assets/image-20250827175109430.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 981 KiB |
BIN
docs/assets/image-20250827175356006.png
Normal file
BIN
docs/assets/image-20250827175356006.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
docs/assets/image-20250827175547444.png
Normal file
BIN
docs/assets/image-20250827175547444.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
docs/assets/image-20250827181535681.png
Normal file
BIN
docs/assets/image-20250827181535681.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
docs/assets/image-20250827181604432.png
Normal file
BIN
docs/assets/image-20250827181604432.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
docs/assets/image-20250827181634134.png
Normal file
BIN
docs/assets/image-20250827181634134.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
10
docs/assets/logo.svg
Normal file
10
docs/assets/logo.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1200" height="1200" rx="379" fill="white"/>
|
||||
<path d="M957.362 204.197C728.535 260.695 763.039 192.264 634.41 175.368C451.817 151.501 504.125 315.925 504.125 315.925L630.545 673.497C591.211 654.805 544.287 643.928 494.188 643.928C353.275 643.928 239 729.467 239 834.964C239 940.567 353.137 1026 494.188 1026C635.1 1026 749.375 940.461 749.375 834.964C749.375 832.218 749.237 829.473 749.099 826.727C749.513 825.988 749.789 825.143 750.065 824.087C757.932 789.449 634.272 348.345 634.272 348.345C634.272 348.345 764.971 401.886 860.89 351.936C971.163 294.699 964.953 202.402 957.362 204.197Z" fill="url(#paint0_linear_4_16)" stroke="#29293A" stroke-opacity="0.23"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4_16" x1="678.412" y1="-1151.29" x2="796.511" y2="832.071" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.572115" stop-color="#B8F1ED"/>
|
||||
<stop offset="0.9999" stop-color="#B8F1CC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -1,225 +0,0 @@
|
||||
# 音频发布-订阅模式使用指南
|
||||
|
||||
## 概述
|
||||
|
||||
这个改进的发布-订阅模式解决了原有实现中无法单个删除订阅者的问题。新的实现提供了以下特性：
|
||||
|
||||
- ✅ 支持单个订阅者的精确取消
|
||||
- ✅ 自动生成唯一订阅ID
|
||||
- ✅ 类型安全的事件系统
|
||||
- ✅ 错误处理和日志记录
|
||||
- ✅ 内存泄漏防护
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 1. 精确的订阅管理
|
||||
|
||||
每个订阅都会返回一个取消订阅函数，调用该函数即可精确取消对应的订阅：
|
||||
|
||||
```typescript
|
||||
// 订阅事件
|
||||
const unsubscribe = audioStore.subscribe('ended', () => {
|
||||
console.log('音频播放结束')
|
||||
})
|
||||
|
||||
// 取消订阅
|
||||
unsubscribe()
|
||||
```
|
||||
|
||||
### 2. 支持的事件类型
|
||||
|
||||
- `ended`: 音频播放结束
|
||||
- `seeked`: 音频拖拽完成
|
||||
- `timeupdate`: 音频时间更新
|
||||
- `play`: 音频开始播放
|
||||
- `pause`: 音频暂停播放
|
||||
|
||||
### 3. 类型安全
|
||||
|
||||
所有的事件类型和回调函数都有完整的TypeScript类型定义，确保编译时类型检查。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基础订阅
|
||||
|
||||
```typescript
|
||||
import { ControlAudioStore } from '@renderer/store/ControlAudio'
|
||||
|
||||
const audioStore = ControlAudioStore()
|
||||
|
||||
// 订阅播放结束事件
|
||||
const unsubscribeEnded = audioStore.subscribe('ended', () => {
|
||||
console.log('音频播放结束了')
|
||||
})
|
||||
|
||||
// 订阅时间更新事件
|
||||
const unsubscribeTimeUpdate = audioStore.subscribe('timeupdate', () => {
|
||||
console.log('当前时间:', audioStore.Audio.currentTime)
|
||||
})
|
||||
```
|
||||
|
||||
### 在Vue组件中使用
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { inject, onMounted, onUnmounted } from 'vue'
|
||||
import type { AudioSubscribeMethod, UnsubscribeFunction } from '@renderer/types/audio'
|
||||
|
||||
// 注入订阅方法
|
||||
const audioSubscribe = inject<AudioSubscribeMethod>('audioSubscribe')
|
||||
|
||||
// 存储取消订阅函数
|
||||
const unsubscribeFunctions: UnsubscribeFunction[] = []
|
||||
|
||||
onMounted(() => {
|
||||
if (!audioSubscribe) return
|
||||
|
||||
// 订阅多个事件
|
||||
unsubscribeFunctions.push(
|
||||
audioSubscribe('play', () => console.log('开始播放')),
|
||||
audioSubscribe('pause', () => console.log('暂停播放')),
|
||||
audioSubscribe('ended', () => console.log('播放结束'))
|
||||
)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时取消所有订阅
|
||||
unsubscribeFunctions.forEach((unsubscribe) => unsubscribe())
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
### 条件订阅和取消
|
||||
|
||||
```typescript
|
||||
let endedUnsubscribe: UnsubscribeFunction | null = null
|
||||
|
||||
// 条件订阅
|
||||
const subscribeToEnded = () => {
|
||||
if (!endedUnsubscribe) {
|
||||
endedUnsubscribe = audioStore.subscribe('ended', handleAudioEnded)
|
||||
}
|
||||
}
|
||||
|
||||
// 条件取消订阅
|
||||
const unsubscribeFromEnded = () => {
|
||||
if (endedUnsubscribe) {
|
||||
endedUnsubscribe()
|
||||
endedUnsubscribe = null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高级功能
|
||||
|
||||
### 批量管理订阅
|
||||
|
||||
```typescript
|
||||
// 清空特定事件的所有订阅者
|
||||
audioStore.clearEventSubscribers('ended')
|
||||
|
||||
// 清空所有事件的所有订阅者
|
||||
audioStore.clearAllSubscribers()
|
||||
```
|
||||
|
||||
### 错误处理
|
||||
|
||||
系统内置了错误处理机制，如果某个回调函数执行出错，不会影响其他订阅者：
|
||||
|
||||
```typescript
|
||||
audioStore.subscribe('ended', () => {
|
||||
throw new Error('这个错误不会影响其他订阅者')
|
||||
})
|
||||
|
||||
audioStore.subscribe('ended', () => {
|
||||
console.log('这个回调仍然会正常执行')
|
||||
})
|
||||
```
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 1. 及时清理订阅
|
||||
|
||||
```typescript
|
||||
// ✅ 好的做法：组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
unsubscribeFunctions.forEach((unsubscribe) => unsubscribe())
|
||||
})
|
||||
|
||||
// ❌ 不好的做法：忘记清理，可能导致内存泄漏
|
||||
```
|
||||
|
||||
### 2. 使用数组管理多个订阅
|
||||
|
||||
```typescript
|
||||
// ✅ 好的做法：统一管理
|
||||
const unsubscribeFunctions: UnsubscribeFunction[] = []
|
||||
|
||||
unsubscribeFunctions.push(
|
||||
audioStore.subscribe('play', handlePlay),
|
||||
audioStore.subscribe('pause', handlePause)
|
||||
)
|
||||
|
||||
// 统一清理
|
||||
unsubscribeFunctions.forEach((fn) => fn())
|
||||
```
|
||||
|
||||
### 3. 避免在高频事件中执行重操作
|
||||
|
||||
```typescript
|
||||
// ❌ 不好的做法：在timeupdate中执行重操作
|
||||
audioStore.subscribe('timeupdate', () => {
|
||||
// 这会每秒执行多次，影响性能
|
||||
updateComplexUI()
|
||||
})
|
||||
|
||||
// ✅ 好的做法：使用节流或防抖
|
||||
let lastUpdate = 0
|
||||
audioStore.subscribe('timeupdate', () => {
|
||||
const now = Date.now()
|
||||
if (now - lastUpdate > 100) {
|
||||
// 限制更新频率
|
||||
updateUI()
|
||||
lastUpdate = now
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 迁移指南
|
||||
|
||||
### 从旧版本迁移
|
||||
|
||||
旧版本：
|
||||
|
||||
```typescript
|
||||
// 旧的实现方式
|
||||
provide('setAudioEnd', setEndCallback)
|
||||
|
||||
function setEndCallback(fn: Function): void {
|
||||
endCallback.push(fn)
|
||||
}
|
||||
```
|
||||
|
||||
新版本：
|
||||
|
||||
```typescript
|
||||
// 新的实现方式
|
||||
provide('audioSubscribe', audioStore.subscribe)
|
||||
|
||||
// 使用时
|
||||
const unsubscribe = audioSubscribe('ended', () => {
|
||||
// 处理播放结束
|
||||
})
|
||||
|
||||
// 可以精确取消
|
||||
unsubscribe()
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
1. **避免重复订阅**：在订阅前检查是否已经订阅
|
||||
2. **及时取消订阅**：组件卸载或不再需要时立即取消
|
||||
3. **合理使用事件**：避免在高频事件中执行重操作
|
||||
4. **批量操作**：需要清理多个订阅时使用批量清理方法
|
||||
|
||||
这个改进的发布-订阅模式为Ceru Music应用提供了更加灵活和可靠的音频事件管理机制。
|
||||
@@ -1,121 +0,0 @@
|
||||
# 自动更新功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
本项目集成了完整的自动更新功能，使用 Electron 的 `autoUpdater` 模块和 TDesign 的通知组件，为用户提供友好的更新体验。
|
||||
|
||||
## 架构设计
|
||||
|
||||
### 主进程 (Main Process)
|
||||
|
||||
1. **autoUpdate.ts** - 自动更新核心逻辑
|
||||
- 配置更新服务器地址
|
||||
- 监听 autoUpdater 事件
|
||||
- 通过 IPC 向渲染进程发送更新消息
|
||||
|
||||
2. **events/autoUpdate.ts** - IPC 事件处理
|
||||
- 注册检查更新和安装更新的 IPC 处理器
|
||||
|
||||
### 渲染进程 (Renderer Process)
|
||||
|
||||
1. **services/autoUpdateService.ts** - 更新服务
|
||||
- 处理来自主进程的更新消息
|
||||
- 使用 TDesign Notification 显示更新通知
|
||||
- 管理更新状态和用户交互
|
||||
|
||||
2. **composables/useAutoUpdate.ts** - Vue 组合式函数
|
||||
- 封装自动更新功能，便于在组件中使用
|
||||
- 管理监听器的生命周期
|
||||
|
||||
3. **components/Settings/UpdateSettings.vue** - 更新设置组件
|
||||
- 提供手动检查更新的界面
|
||||
- 显示当前版本信息
|
||||
|
||||
## 更新流程
|
||||
|
||||
1. **启动检查**: 应用启动后延迟3秒自动检查更新
|
||||
2. **检查更新**: 向更新服务器发送请求检查新版本
|
||||
3. **下载更新**: 如有新版本，自动下载更新包
|
||||
4. **安装提示**: 下载完成后提示用户重启安装
|
||||
5. **自动安装**: 用户确认后退出应用并安装更新
|
||||
|
||||
## 通知类型
|
||||
|
||||
- **检查更新**: 显示正在检查更新的信息通知
|
||||
- **发现新版本**: 显示发现新版本并开始下载的成功通知
|
||||
- **无需更新**: 显示当前已是最新版本的信息通知
|
||||
- **下载进度**: 实时显示下载进度和速度
|
||||
- **下载完成**: 显示下载完成并提供重启按钮
|
||||
- **更新错误**: 显示更新过程中的错误信息
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 更新服务器配置
|
||||
|
||||
在 `src/main/autoUpdate.ts` 中配置更新服务器地址：
|
||||
|
||||
```typescript
|
||||
const server = 'https://update.ceru.shiqianjiang.cn/';
|
||||
```
|
||||
|
||||
### 版本检查
|
||||
|
||||
更新服务器需要提供以下格式的 API：
|
||||
- URL: `${server}/update/${platform}/${currentVersion}`
|
||||
- 返回: 更新信息 JSON
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 在组件中使用
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useAutoUpdate } from '@/composables/useAutoUpdate'
|
||||
|
||||
const { checkForUpdates } = useAutoUpdate()
|
||||
|
||||
// 手动检查更新
|
||||
const handleCheckUpdate = async () => {
|
||||
await checkForUpdates()
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 监听更新消息
|
||||
|
||||
```typescript
|
||||
import { autoUpdateService } from '@/services/autoUpdateService'
|
||||
|
||||
// 开始监听
|
||||
autoUpdateService.startListening()
|
||||
|
||||
// 停止监听
|
||||
autoUpdateService.stopListening()
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **权限要求**: 自动更新需要应用具有写入权限
|
||||
2. **网络连接**: 需要稳定的网络连接来下载更新
|
||||
3. **用户体验**: 更新过程中避免强制重启，给用户选择权
|
||||
4. **错误处理**: 妥善处理网络错误和下载失败的情况
|
||||
|
||||
## 开发调试
|
||||
|
||||
在开发环境中，可以通过以下方式测试自动更新：
|
||||
|
||||
1. 修改 `package.json` 中的版本号
|
||||
2. 在更新设置页面手动触发检查更新
|
||||
3. 观察控制台日志和通知显示
|
||||
|
||||
## 构建配置
|
||||
|
||||
确保在 `electron-builder` 配置中启用自动更新：
|
||||
|
||||
```json
|
||||
{
|
||||
"publish": {
|
||||
"provider": "generic",
|
||||
"url": "https://update.ceru.shiqianjiang.cn/"
|
||||
}
|
||||
}
|
||||
1587
docs/design.html
1587
docs/design.html
File diff suppressed because one or more lines are too long
@@ -1,3 +1,7 @@
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
|
||||
# CeruMusic 插件开发文档
|
||||
|
||||
## 概述
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
layout: doc
|
||||
---
|
||||
|
||||
# CeruMusicPluginHost 使用文档
|
||||
|
||||
## 概述
|
||||
@@ -109,9 +113,7 @@ try {
|
||||
|
||||
### 构造函数
|
||||
|
||||
```javascript
|
||||
new CeruMusicPluginHost(pluginCode?)
|
||||
```
|
||||
`new CeruMusicPluginHost(pluginCode)`
|
||||
|
||||
**参数:**
|
||||
|
||||
@@ -125,9 +127,9 @@ new CeruMusicPluginHost(pluginCode?)
|
||||
|
||||
**参数:**
|
||||
|
||||
- `pluginPath` (string): 插件文件路径
|
||||
`pluginPath` (string): 插件文件路径
|
||||
|
||||
**返回:** Promise<Object> - 插件导出的对象
|
||||
**返回:** `Promise<Object>` - 插件导出的对象
|
||||
|
||||
#### getPluginInfo()
|
||||
|
||||
@@ -151,7 +153,7 @@ new CeruMusicPluginHost(pluginCode?)
|
||||
- `musicInfo` (Object): 歌曲信息对象
|
||||
- `quality` (string): 音质标识
|
||||
|
||||
**返回:** Promise<string> - 音乐播放链接
|
||||
**返回:** `Promise<string>` - 音乐播放链接
|
||||
|
||||
#### getPic(source, musicInfo)
|
||||
|
||||
@@ -162,7 +164,7 @@ new CeruMusicPluginHost(pluginCode?)
|
||||
- `source` (string): 音源标识
|
||||
- `musicInfo` (Object): 歌曲信息对象
|
||||
|
||||
**返回:** Promise<string> - 封面链接
|
||||
**返回:** `Promise<string>` - 封面链接
|
||||
|
||||
#### getLyric(source, musicInfo)
|
||||
|
||||
@@ -173,7 +175,7 @@ new CeruMusicPluginHost(pluginCode?)
|
||||
- `source` (string): 音源标识
|
||||
- `musicInfo` (Object): 歌曲信息对象
|
||||
|
||||
**返回:** Promise<string> - 歌词内容
|
||||
**返回:** `Promise<string>` - 歌词内容
|
||||
|
||||
## 插件环境
|
||||
|
||||
@@ -11,7 +11,7 @@ Ceru Music 是一个基于 Electron + Vue 3 的跨平台桌面音乐播放器，
|
||||
- **前端框架**: Vue 3 + TypeScript + Composition API
|
||||
- **桌面框架**: Electron (v37.2.3)
|
||||
- **UI组件库**: TDesign Vue Next (v1.15.2)
|
||||
- 
|
||||
- 
|
||||
- **状态管理**: Pinia (v3.0.3)
|
||||
- **路由管理**: Vue Router (v4.5.1)
|
||||
- **构建工具**: Vite + electron-vite
|
||||
@@ -397,7 +397,7 @@ export const useAppStore = defineStore('app', {
|
||||
|
||||
### 欢迎页面设计
|
||||
|
||||
|
||||
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@@ -456,7 +456,7 @@ function skipWelcome() {
|
||||
|
||||
##### 界面UI参考
|
||||
|
||||
下载安装使用
|
||||
|
||||
### Window 安装
|
||||
|
||||
由于没有证书原因 **`Window`** 平台可能会出现安装包体误报**危险**。请放心我们的软件都是**开源**在 `Github` 自动化打包的。**具体安装步骤如下**
|
||||
|
||||
<img src="../assets/image-20250826214921963.png" alt="image-20250826214921963" style="zoom: 50%;" />如果出现类似图例效果请先点击 **右侧 三个点**
|
||||
|
||||
<img src="../assets/image-20250826215101522.png" alt="image-20250826215101522" style="zoom:50%;" />**点击保留**
|
||||
|
||||
<img src="../assets/image-20250826215206862.png" alt="image-20250826215206862" style="zoom:50%;" />**点击下拉按钮**
|
||||
|
||||
<img src="../assets/image-20250826215251525.png" alt="image-20250826215251525" style="zoom:50%;" />**任然保留**就可以双击打开安装到此教程结束
|
||||
|
||||
### Mac OS 系统下载安装
|
||||
|
||||
由于同样没有**签名**的原因mac的护栏也会拦截提示安装包损坏
|
||||
|
||||
<img src="../assets/3f50d3b838287b4bf1523d0f955fdf37.png" alt="3f50d3b838287b4bf1523d0f955fdf37" style="zoom:50%;" />请不用担心这是典型的签名问题
|
||||
|
||||
适用于 macOS 14 Sonoma 及以上版本。
|
||||
|
||||
注意：由于我们不提供经过签名的程序包体，因此在安装后首次运行可能会出现 “**澜音** 已损坏” 之类的提示，此时只需打开终端，输入命令
|
||||
|
||||
```bash
|
||||
sudo xattr -r -d com.apple.quarantine /Applications/澜音.app
|
||||
```
|
||||
|
||||
并回车，输入密码再次回车，重新尝试启动程序即可
|
||||
|
||||
_要是还有问题可自行在搜索引擎查询由于 。`apple`官方证书需要99刀的价格实在无能为力见谅_ 如果你有能力成为`澜音`的赞助者可联系
|
||||
|
||||
- QQ：`2115295703`
|
||||
- 微信：`cl_wj0623`
|
||||
|
||||
### 插件安装
|
||||
|
||||
首次进入应用需要在软件右上角设置导入**音源**才能使用可查询`Ceru插件`**(目前生态欠缺)** 或现成的**落雪**插件导入使用
|
||||
|
||||
###### 导入完成点击使用
|
||||
203
docs/index.md
Normal file
203
docs/index.md
Normal file
@@ -0,0 +1,203 @@
|
||||
---
|
||||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: 'Ceru Music'
|
||||
text: '澜音 播放器'
|
||||
tagline: 澜音是一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。
|
||||
image:
|
||||
src: './assets/logo.svg'
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 下载应用
|
||||
link: https://ceru.shiqianjiang.cn/#download
|
||||
target: _blank
|
||||
- theme: alt
|
||||
text: 使用文档
|
||||
link: /guide/
|
||||
|
||||
features:
|
||||
- title: 多平台支持
|
||||
icon: 🚀
|
||||
details: 支持网易云音乐、QQ音乐等多个平台，搜索
|
||||
- title: 跨平台支持
|
||||
icon: 🪟
|
||||
details: 原生桌面应用，支持 Windows、macOS、Linux 三大操作系统
|
||||
- title: 歌词显示
|
||||
icon: 🎼
|
||||
details: 实时歌词显示，支持专辑信息获取，让音乐体验更丰富
|
||||
- title: 优雅界面
|
||||
icon: 💻
|
||||
details: 现代化设计语言，流畅动画效果，为你带来愉悦的视觉体验
|
||||
- title: 代码开源
|
||||
details: 代码完全开源，供给大家使用开发
|
||||
icon: 👐
|
||||
link: https://github.com/timeshiftsauce/CeruMusic
|
||||
---
|
||||
|
||||
<div style="margin-top:4rem"></div>
|
||||
|
||||
# Ceru Music（澜音）
|
||||
|
||||
一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。
|
||||
|
||||
## 项目简介
|
||||
|
||||
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%;" />
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **Electron**：用于构建跨平台桌面应用
|
||||
- **Vue 3**：前端框架，提供响应式 UI
|
||||
- **TypeScript**：增强代码可维护性和类型安全
|
||||
- **Pinia**：状态管理工具
|
||||
- **Vite**：快速的前端构建工具
|
||||
- **CeruPlugins**：音乐插件运行环境（仅提供框架，不包含默认插件）
|
||||
- **AMLL**：音乐生态辅助模块（仅提供功能接口，不关联具体音乐数据源）
|
||||
|
||||
## 主要功能
|
||||
|
||||
- 提供插件加载与管理功能，支持通过合规插件获取公开音乐信息
|
||||
- 支持通过插件获取歌词、专辑封面等公开元数据
|
||||
- 支持虚拟滚动列表，优化大量数据渲染性能
|
||||
- 本地播放列表管理（仅存储用户手动创建的列表结构，不包含音乐文件）
|
||||
- **提示**：本地数据仅保存在用户设备本地，未进行云端备份，用户需自行备份以防止数据丢失
|
||||
- 精美的用户界面与动画效果
|
||||
- **插件生态框架**（插件需用户自行获取并确保合规性）
|
||||
|
||||
## 安装与使用
|
||||
|
||||
### 推荐开发环境
|
||||
|
||||
- **IDE**: VS Code 或 WebStorm
|
||||
- **Node.js 版本**: 22 及以上
|
||||
- **包管理器**: **yarn**
|
||||
|
||||
### 项目设置
|
||||
|
||||
1. 安装依赖：
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
2. 启动开发服务器：
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
|
||||
3. 构建应用：
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
```
|
||||
|
||||
### 平台构建指令
|
||||
|
||||
- Windows
|
||||
|
||||
```bash
|
||||
yarn build:win
|
||||
```
|
||||
|
||||
- macOS
|
||||
|
||||
```bash
|
||||
yarn build:mac
|
||||
```
|
||||
|
||||
- Linux
|
||||
|
||||
```bash
|
||||
yarn build:linux
|
||||
```
|
||||
|
||||
> 提示：构建后的应用仅包含播放器框架，需用户自行配置合规插件方可获取音乐数据。
|
||||
|
||||
## 文档与资源
|
||||
|
||||
- [产品设计文档](https://www.doubao.com/thread/docs/design.md)：涵盖项目架构、核心功能设计和开发规范（不含任何音乐数据源信息）。
|
||||
- [插件开发文档](https://www.doubao.com/thread/docs/CeruMusic插件开发文档.md)：仅提供插件开发技术规范，**明确要求插件开发者需遵守数据来源平台的用户协议与版权法**，禁止开发、传播获取非公开数据的插件。
|
||||
|
||||
## 开源许可
|
||||
|
||||
本项目源代码遵循 **Apache License 2.0**，仅授权用户对项目框架进行学习、修改与二次开发，不包含任何音乐数据相关授权。详情请参阅 [LICENSE](./LICENSE) 文件，使用前请务必阅读许可条款。
|
||||
|
||||
## 贡献指南
|
||||
|
||||
欢迎开发者贡献代码与反馈建议，贡献内容需符合以下要求：
|
||||
|
||||
1. 仅涉及播放器框架功能优化、bug 修复、文档完善，不包含任何音乐数据源相关代码。
|
||||
2. 遵循 [Git 提交规范](https://www.doubao.com/thread/docs/design.md#git提交规范) 并确保代码符合项目风格指南。
|
||||
3. 贡献的代码需无第三方版权纠纷，且不违反开源许可协议。
|
||||
|
||||
## 联系方式
|
||||
|
||||
如有技术问题或合作意向（仅限技术交流），请通过 Gitee 私信联系项目维护者。
|
||||
|
||||
## 项目开发者
|
||||
|
||||
- **时迁酱**：产品总体设计与开发
|
||||
|
||||
<img src="./assets/head.jpg" alt="head.jpg (940×940)" style="zoom:15%;" />
|
||||
|
||||
- **无聊的霜霜**：首页设计&Ai助手
|
||||
|
||||
<img src="./assets/image-20250827181604432.png" alt="image-20250827181604432" style="zoom:25%;" />
|
||||
|
||||
- **Star**：**插件管理**相关功能&部分接口封装
|
||||
|
||||
<img src="./assets/image-20250827181535681.png" alt="image-20250827181535681" style="zoom:25%;" />
|
||||
|
||||
**Tips**: 排名不分先后
|
||||
|
||||
# 法律声明与免责条款
|
||||
|
||||
**重要提示：使用本项目前，请务必仔细阅读本条款，使用本项目即视为你已充分理解并同意本条款全部内容。**
|
||||
|
||||
### 一、定义约定
|
||||
|
||||
- “Apache License 2.0”：指 Ceru Music（澜音）桌面播放器框架及源代码，不包含任何第三方插件或音乐数据。
|
||||
- “**用户**”：指下载、安装、使用本项目的个人或组织。
|
||||
- “**合规插件**”：指符合数据来源平台用户协议、不侵犯第三方版权、不获取非公开数据的插件。
|
||||
- “**版权内容**”：指包括但不限于音乐文件、歌词、专辑封面、艺人信息等受著作权法保护的内容。
|
||||
|
||||
### 二、数据与内容责任
|
||||
|
||||
1. 本项目**不直接获取、存储、传输任何音乐数据或版权内容**，仅提供插件运行框架。用户通过插件获取的所有数据，其合法性、准确性由插件提供者及用户**自行负责**，本项目不承担任何责任。
|
||||
2. 若用户使用的插件存在获取非公开数据、侵犯第三方版权等违规行为，相关法律责任由用户及插件提供者承担，与本项目无关。
|
||||
3. 本项目使用的字体、图片等素材，均来自开源社区或已获得合法授权，若存在侵权请联系项目维护者立即移除，本项目将积极配合处理。
|
||||
|
||||
### 三、版权合规要求
|
||||
|
||||
1. 用户承诺：使用本项目时，仅通过合规插件获取音乐相关信息，且获取、使用版权内容的行为符合**《中华人民共和国著作权法》**及相关法律法规，不侵犯**任何第三方**合法权益。
|
||||
2. 用户需知晓：任何未经授权下载、传播、使用受版权保护的音乐文件的行为，均可能构成侵权，需自行承担法律后果。
|
||||
3. 本项目倡导 “尊重版权、支持正版”，提醒用户通过官方音乐平台获取授权音乐服务。
|
||||
|
||||
### 四、免责声明
|
||||
|
||||
1. 因用户使用非合规插件、违反法律法规或第三方协议导致的任何法律责任（包括但不限于侵权赔偿、行政处罚），均由用户自行承担，本项目不承担任何直接、间接、连带或衍生责任。
|
||||
2. 因本项目框架本身的 **bug** 导致的用户设备故障、数据丢失，本项目仅承担在合理范围内的技术修复责任，不承担由此产生的间接损失（如商誉损失、业务中断损失等）。
|
||||
3. 本项目为开源学习项目，不提供商业服务，对用户使用本项目的效果不做任何明示或暗示的保证。
|
||||
|
||||
### 五、使用限制
|
||||
|
||||
1. 本项目仅允许用于**非商业、纯技术学习目的**，禁止用于任何商业运营、盈利活动，禁止修改后用于侵犯第三方权益的场景。
|
||||
2. 禁止在违反当地法律法规、本声明或第三方协议的前提下使用本项目，若用户所在地区禁止此类工具的使用，应立即停止使用。
|
||||
3. 禁止将本项目源代码或构建后的应用，与违规插件捆绑传播，禁止利用本项目从事任何违法违规活动。
|
||||
|
||||
### 六、其他
|
||||
|
||||
1. 本声明的效力、解释及适用，均适用中华人民共和国法律（不含港澳台地区法律）。
|
||||
2. 若用户与本项目维护者就本声明产生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向本项目维护者所在地有管辖权的人民法院提起诉讼。
|
||||
|
||||
## 赞助
|
||||
|
||||
若您认可本项目的技术价值，欢迎通过以下方式支持开发者（仅用于项目技术维护与迭代）：
|
||||
<img src="./assets/image-20250827175356006.png" alt="赞助方式1" style="zoom:33%;" /><img src="./assets/image-20250827175547444.png" alt="赞助方式2" style="zoom: 33%;" />
|
||||
|
||||
---
|
||||
51
docs/使用文档.md
51
docs/使用文档.md
@@ -1,51 +0,0 @@
|
||||
# CeruMusic 使用教程
|
||||
|
||||
## 1. 软件下载
|
||||
|
||||
由于我们团段都是个人开发者原因 暂时无能力部署到 `OSS` 承担高下载量的能力，供大家下载只能通过[Github](https://github.com/timeshiftsauce/CeruMusic)下载安装使用
|
||||
|
||||
### Window 安装
|
||||
|
||||
由于没有证书原因 **`Window`** 平台可能会出现安装包体误报**危险**。请放心我们的软件都是**开源**在 `Github` 自动化打包的。**具体安装步骤如下**
|
||||
|
||||
<img src="assets/image-20250826214921963.png" alt="image-20250826214921963" style="zoom: 50%;" />如果出现类似图例效果请先点击 **右侧 三个点**
|
||||
|
||||
|
||||
|
||||
<img src="assets/image-20250826215101522.png" alt="image-20250826215101522" style="zoom:50%;" />**点击保留**
|
||||
|
||||
|
||||
|
||||
<img src="assets/image-20250826215206862.png" alt="image-20250826215206862" style="zoom:50%;" />**点击下拉按钮**
|
||||
|
||||
|
||||
|
||||
<img src="assets/image-20250826215251525.png" alt="image-20250826215251525" style="zoom:50%;" />**任然保留**就可以双击打开安装到此教程结束
|
||||
|
||||
### Mac OS 系统下载安装
|
||||
|
||||
由于同样没有**签名**的原因mac的护栏也会拦截提示安装包损坏
|
||||
|
||||
<img src="assets/3f50d3b838287b4bf1523d0f955fdf37.png" alt="3f50d3b838287b4bf1523d0f955fdf37" style="zoom:50%;" />请不用担心这是典型的签名问题
|
||||
|
||||
适用于 macOS 14 Sonoma 及以上版本。
|
||||
|
||||
注意：由于我们不提供经过签名的程序包体，因此在安装后首次运行可能会出现 “**澜音** 已损坏” 之类的提示，此时只需打开终端，输入命令
|
||||
|
||||
```bash
|
||||
sudo xattr -r -d com.apple.quarantine /Applications/澜音.app
|
||||
```
|
||||
|
||||
并回车，输入密码再次回车，重新尝试启动程序即可
|
||||
|
||||
*要是还有问题可自行在搜索引擎查询由于 。```apple```官方证书需要99刀的价格实在无能为力见谅* 如果你有能力成为`澜音`的赞助者可联系
|
||||
|
||||
- QQ：`2115295703`
|
||||
- 微信：`cl_wj0623`
|
||||
|
||||
### 插件安装
|
||||
|
||||
首次进入应用需要在软件右上角设置导入**音源**才能使用可查询`Ceru插件`**(目前生态欠缺)** 或现成的**落雪**插件导入使用
|
||||
|
||||
###### 导入完成点击使用
|
||||
|
||||
@@ -22,7 +22,10 @@
|
||||
"build:mac": "yarn run build && electron-builder --mac --config --publish never",
|
||||
"build:linux": "yarn run build && electron-builder --linux --config --publish never",
|
||||
"build:deps": "electron-builder install-app-deps && yarn run build && electron-builder --win --x64 --config",
|
||||
"buildico": "electron-icon-builder --input=./resources/logo.png --output=resources --flatten"
|
||||
"buildico": "electron-icon-builder --input=./resources/logo.png --output=resources --flatten",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@applemusic-like-lyrics/lyric": "^0.2.4",
|
||||
|
||||
Reference in New Issue
Block a user