mirror of
https://github.com/timeshiftsauce/CeruMusic.git
synced 2025-11-26 03:45:03 +08:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
53d9197196 | ||
|
|
7a349272b2 | ||
|
|
29dfa45791 | ||
|
|
c2fcb25686 | ||
|
|
3bb23e4765 | ||
|
|
5af7df60e4 | ||
|
|
4280cab090 | ||
|
|
7e1111cd33 | ||
|
|
194b88519f | ||
|
|
7d20b23fb0 | ||
|
|
909547ad2e | ||
|
|
9779e38140 |
@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress'
|
||||
export default defineConfig({
|
||||
lang: 'zh-CN',
|
||||
title: "Ceru Music",
|
||||
base: '/CeruMusic/',
|
||||
base: process.env.BASE_URL ?? '/CeruMusic/',
|
||||
description: "Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具，一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。",
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
@@ -32,7 +32,12 @@ export default defineConfig({
|
||||
],
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/timeshiftsauce/CeruMusic' }
|
||||
{ icon: 'github', link: 'https://github.com/timeshiftsauce/CeruMusic' },
|
||||
{ icon: 'gitee', link: 'https://gitee.com/sqjcode/CeruMuisc' },
|
||||
{ icon: 'qq', link: 'https://qm.qq.com/q/IDpQnbGd06' },
|
||||
{ icon: 'beatsbydre', link: 'https://shiqianjiang.cn' },
|
||||
{ icon: 'bilibili', link: 'https://space.bilibili.com/696709986' }
|
||||
|
||||
],
|
||||
footer: {
|
||||
message: 'Released under the Apache License 2.0 License.',
|
||||
@@ -46,6 +51,6 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
lastUpdated: true,
|
||||
head: [['link', { rel: 'icon', href: '/CeruMusic/logo.svg' }]]
|
||||
head: [['link', { rel: 'icon', href: (process.env.BASE_URL ?? '/CeruMusic/') + 'logo.svg' }]]
|
||||
})
|
||||
// Smooth scrolling functions
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
|
||||
/* 暗色主题界面UI颜色重写 */
|
||||
.dropdown-menu{
|
||||
.dropdown-menu {
|
||||
background: #222222;
|
||||
}
|
||||
#recent-file-panel {
|
||||
@@ -19,31 +18,29 @@
|
||||
border: 1px solid #9292928f;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 字体引入：鸿蒙字体 */
|
||||
|
||||
@font-face {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("HarmonyOS_Sans_SC_Regular.woff");
|
||||
src: url('HarmonyOS_Sans_SC_Regular.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url("HarmonyOS_Sans_SC_Bold.woff");
|
||||
src: url('HarmonyOS_Sans_SC_Bold.woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "CascadiaCode";
|
||||
font-family: 'CascadiaCode';
|
||||
src: url('Cascadia-Code-Regular.ttf');
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
}
|
||||
|
||||
/* 打印页面设置 */
|
||||
@@ -61,7 +58,11 @@ html {
|
||||
p {
|
||||
line-height: 1.5rem; /*设置打印内容的行高*/
|
||||
}
|
||||
ol,ul,figure,pre { /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
|
||||
ol,
|
||||
ul,
|
||||
figure,
|
||||
pre {
|
||||
/*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
@@ -87,8 +88,9 @@ html.dark #app .vp-doc {
|
||||
html.dark #app .vp-doc p {
|
||||
color: var(--dark-text-color);
|
||||
margin: 10px 10px;
|
||||
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light,
|
||||
"PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
font-family:
|
||||
Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin,
|
||||
Georgia, Times, 'Times New Roman', serif;
|
||||
|
||||
font-size: 1rem;
|
||||
word-spacing: 2px;
|
||||
@@ -97,7 +99,7 @@ html.dark #app .vp-doc h3:after,
|
||||
h4:after,
|
||||
h5:after,
|
||||
h6:after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 0.2em;
|
||||
height: 2em;
|
||||
@@ -182,7 +184,7 @@ html.dark #app .vp-doc h4 {
|
||||
}
|
||||
|
||||
html.dark #app .vp-doc h4::before {
|
||||
content: "";
|
||||
content: '';
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
background-color: var(--head-title-color);
|
||||
@@ -200,7 +202,7 @@ html.dark #app .vp-doc h5 {
|
||||
}
|
||||
|
||||
html.dark #app .vp-doc h5::before {
|
||||
content: "";
|
||||
content: '';
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
@@ -218,7 +220,7 @@ html.dark #app .vp-doc h6 {
|
||||
}
|
||||
|
||||
html.dark #app .vp-doc h6::before {
|
||||
content: "-";
|
||||
content: '-';
|
||||
color: var(--head-title-color);
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
@@ -251,170 +253,160 @@ h5 {
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
counter-reset: h1
|
||||
counter-reset: h1;
|
||||
}
|
||||
.outline-content {
|
||||
counter-reset: h1
|
||||
counter-reset: h1;
|
||||
}
|
||||
.outline-h1 {
|
||||
counter-reset: h2
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.outline-h2 {
|
||||
counter-reset: h3
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.outline-h3 {
|
||||
counter-reset: h4
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.outline-h4 {
|
||||
counter-reset: h5
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.outline-h5 {
|
||||
counter-reset: h6
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.md-toc-content {
|
||||
counter-reset: h1toc
|
||||
counter-reset: h1toc;
|
||||
}
|
||||
|
||||
.md-toc-h1 {
|
||||
counter-reset: h2toc
|
||||
counter-reset: h2toc;
|
||||
}
|
||||
|
||||
.md-toc-h2 {
|
||||
counter-reset: h3toc
|
||||
counter-reset: h3toc;
|
||||
}
|
||||
|
||||
.md-toc-h3 {
|
||||
counter-reset: h4toc
|
||||
counter-reset: h4toc;
|
||||
}
|
||||
|
||||
.md-toc-h4 {
|
||||
counter-reset: h5toc
|
||||
counter-reset: h5toc;
|
||||
}
|
||||
|
||||
.md-toc-h5 {
|
||||
counter-reset: h6toc
|
||||
counter-reset: h6toc;
|
||||
}
|
||||
|
||||
|
||||
html.dark #app .vp-doc h1:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
#outline-content li.outline-h1>div>span.outline-label:before {
|
||||
#outline-content li.outline-h1 > div > span.outline-label:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
.outline-content .outline-h1>.outline-item>.outline-label:before{
|
||||
.outline-content .outline-h1 > .outline-item > .outline-label:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h1>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h1 > a:before {
|
||||
counter-increment: h1toc;
|
||||
content: var(--autonum-h1toc);
|
||||
}
|
||||
|
||||
|
||||
html.dark #app .vp-doc h2:before {
|
||||
counter-increment: h2;
|
||||
content: var(--autonum-h2);
|
||||
}
|
||||
#outline-content li.outline-h2>div>span.outline-label:before {
|
||||
#outline-content li.outline-h2 > div > span.outline-label:before {
|
||||
counter-increment: h2;
|
||||
content: var(--autonum-h2);
|
||||
}
|
||||
.outline-content .outline-h2>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h2 > .outline-item > .outline-label:before {
|
||||
counter-increment: h2;
|
||||
content: var(--autonum-h2);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h2>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h2 > a:before {
|
||||
counter-increment: h2toc;
|
||||
content: var(--autonum-h2toc);
|
||||
}
|
||||
|
||||
|
||||
html.dark #app .vp-doc h3 > span::before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
}
|
||||
#outline-content li.outline-h3>div>span.outline-label:before {
|
||||
#outline-content li.outline-h3 > div > span.outline-label:before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
}
|
||||
.outline-content .outline-h3>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h3 > .outline-item > .outline-label:before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h3>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h3 > a:before {
|
||||
counter-increment: h3toc;
|
||||
content: var(--autonum-h3toc);
|
||||
}
|
||||
|
||||
|
||||
|
||||
html.dark #app .vp-doc h4 > span::before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
}
|
||||
#outline-content li.outline-h4>div>span.outline-label:before {
|
||||
#outline-content li.outline-h4 > div > span.outline-label:before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
}
|
||||
.outline-content .outline-h4>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h4 > .outline-item > .outline-label:before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h4>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h4 > a:before {
|
||||
counter-increment: h4toc;
|
||||
content: var(--autonum-h4toc);
|
||||
}
|
||||
|
||||
|
||||
html.dark #app .vp-doc h5 > span::before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
}
|
||||
#outline-content li.outline-h5>div>span.outline-label:before {
|
||||
#outline-content li.outline-h5 > div > span.outline-label:before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
}
|
||||
.outline-content .outline-h5>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h5 > .outline-item > .outline-label:before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h5>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h5 > a:before {
|
||||
counter-increment: h5toc;
|
||||
content: var(--autonum-h5toc);
|
||||
}
|
||||
|
||||
|
||||
html.dark #app .vp-doc h6 > span::before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
}
|
||||
#outline-content li.outline-h6>div>span.outline-label:before {
|
||||
#outline-content li.outline-h6 > div > span.outline-label:before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
}
|
||||
.outline-content .outline-h6>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h6 > .outline-item > .outline-label:before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
}
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h6>a:before {
|
||||
html.dark #app .vp-doc span.md-toc-item.md-toc-h6 > a:before {
|
||||
counter-increment: h6toc;
|
||||
content: var(--autonum-h6toc);
|
||||
}
|
||||
|
||||
|
||||
/* 列表 */
|
||||
::marker {
|
||||
color: var(--dark-text-color);
|
||||
html.dark ::marker {
|
||||
color: var(--dark-text-color) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -466,7 +458,7 @@ html.dark #app .vp-doc li section {
|
||||
}
|
||||
|
||||
html.dark #app .vp-doc li:before {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 50px);
|
||||
top: 35px;
|
||||
position: absolute;
|
||||
@@ -474,10 +466,9 @@ html.dark #app .vp-doc li:before {
|
||||
left: -14.5px;
|
||||
}
|
||||
|
||||
|
||||
/* 任务列表样式 */
|
||||
|
||||
.task-list-item input{
|
||||
.task-list-item input {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: block;
|
||||
@@ -486,12 +477,12 @@ html.dark #app .vp-doc li:before {
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.task-list-item input:focus{
|
||||
.task-list-item input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.task-list-item input:before{
|
||||
.task-list-item input:before {
|
||||
border: 1px solid var(--element-color-deep);
|
||||
border-radius: 1.2rem;
|
||||
width: 1.2rem;
|
||||
@@ -503,10 +494,10 @@ html.dark #app .vp-doc li:before {
|
||||
}
|
||||
|
||||
.task-list-item input:checked:before,
|
||||
.task-list-item input[checked]:before{
|
||||
.task-list-item input[checked]:before {
|
||||
background: #c6c6c6;
|
||||
border-width: 2px;
|
||||
display:inline-block;
|
||||
display: inline-block;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
}
|
||||
|
||||
@@ -520,17 +511,17 @@ html.dark #app .vp-doc li:before {
|
||||
text-decoration-color:var(--element-color)
|
||||
} */
|
||||
|
||||
.task-list-item input[type="checkbox"] + p span {
|
||||
.task-list-item input[type='checkbox'] + p span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"] + p span::after {
|
||||
content: "";
|
||||
.task-list-item input[type='checkbox'] + p span::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 52%;
|
||||
width: calc(100%*var(--check-line));
|
||||
width: calc(100% * var(--check-line));
|
||||
height: 2px;
|
||||
background: var(--element-color);
|
||||
transform: scaleX(0);
|
||||
@@ -538,11 +529,11 @@ html.dark #app .vp-doc li:before {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"]:checked + p span::after {
|
||||
.task-list-item input[type='checkbox']:checked + p span::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"]:not(:checked) + p span::after {
|
||||
.task-list-item input[type='checkbox']:not(:checked) + p span::after {
|
||||
transform-origin: right center;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
@@ -683,7 +674,7 @@ html.dark #app .vp-doc p code {
|
||||
color: var(--element-color-linecode);
|
||||
background: var(--element-color-linecode-background);
|
||||
border-radius: 3px;
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@@ -692,9 +683,9 @@ html.dark #app .vp-doc li code {
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
.md-fences:not([lang="mermaid"])::before {
|
||||
html.dark #app div[class^='language'] pre:not(.language-bash)::before {
|
||||
content: attr(lang);
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
color: #7e7e7e;
|
||||
@@ -720,7 +711,7 @@ html.dark #app .vp-doc li code {
|
||||
.cm-s-inner.CodeMirror {
|
||||
padding: 1.2rem 0.8rem;
|
||||
color: #4f5467;
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
border-radius: 10px;
|
||||
background-color: #fa0303;
|
||||
line-height: 1.6rem;
|
||||
@@ -742,7 +733,7 @@ pre.CodeMirror-line {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.cm-s-inner.CodeMirror {
|
||||
html.dark #app div[class^='language'] pre:not([lang='mermaid']) code {
|
||||
background: #222222;
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 20px 10px 20px 10px;
|
||||
@@ -757,12 +748,12 @@ pre.CodeMirror-line {
|
||||
|
||||
/* 代码块颜色 */
|
||||
.cm-keyword {
|
||||
color: #48CFE9 !important;
|
||||
color: #48cfe9 !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.cm-variable {
|
||||
color: #C2EAFF !important;
|
||||
color: #c2eaff !important;
|
||||
}
|
||||
|
||||
.cm-tag {
|
||||
@@ -772,7 +763,7 @@ pre.CodeMirror-line {
|
||||
|
||||
.cm-variable-3,
|
||||
.cm-variable-2 {
|
||||
color: #DEBBFB !important;
|
||||
color: #debbfb !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
@@ -832,7 +823,7 @@ pre.CodeMirror-line {
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
background:var(--element-color-linecode-background);
|
||||
background: var(--element-color-linecode-background);
|
||||
color: var(--element-color-linecode);
|
||||
border: var(--element-color-shallow) solid 1px;
|
||||
border-radius: 3px;
|
||||
@@ -891,7 +882,7 @@ html.dark #app .vp-doc .footnote-item em {
|
||||
/* 目录 */
|
||||
|
||||
.md-toc * {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
}
|
||||
.md-tooltip-hide > span {
|
||||
display: none;
|
||||
@@ -901,7 +892,7 @@ html.dark #app .vp-doc .footnote-item em {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
content: "目录";
|
||||
content: '目录';
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--dark-text-color);
|
||||
@@ -929,7 +920,7 @@ html.dark #app .vp-doc .footnote-item em {
|
||||
font-size: 0.92rem;
|
||||
background-color: var(--dark-background-color);
|
||||
}
|
||||
.file-tree-node.active>.file-node-background{
|
||||
.file-tree-node.active > .file-node-background {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
@@ -1020,7 +1011,7 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
#outline-content .outline-h2 > .outline-item::before {
|
||||
content: "";
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--element-color);
|
||||
@@ -1038,7 +1029,7 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
#outline-content .outline-h2::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 24px);
|
||||
width: 1px;
|
||||
background: var(--element-color);
|
||||
@@ -1065,7 +1056,7 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
.outline-item-active:not(.outline-item-wrapper)::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
@@ -1077,7 +1068,7 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
/* 导出HTML的样式 */
|
||||
.typora-export-content{
|
||||
.typora-export-content {
|
||||
background: var(--dark-background-color);
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
@@ -1085,7 +1076,7 @@ body.typora-export {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.typora-export-content .outline-content::before {
|
||||
content: "目录";
|
||||
content: '目录';
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
@@ -1111,7 +1102,7 @@ body.typora-export {
|
||||
}
|
||||
|
||||
.typora-export-content .outline-item-active > .outline-item::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
@@ -1140,7 +1131,7 @@ body.typora-export {
|
||||
}
|
||||
|
||||
.outline-content .outline-h2 > .outline-item::before {
|
||||
content: "";
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--element-color-deep);
|
||||
@@ -1158,7 +1149,7 @@ body.typora-export {
|
||||
}
|
||||
|
||||
.outline-content .outline-h2::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 24px);
|
||||
width: 1px;
|
||||
background: var(--element-color);
|
||||
|
||||
@@ -8,27 +8,27 @@
|
||||
/* 字体引入：鸿蒙字体 */
|
||||
|
||||
@font-face {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
src: url("HarmonyOS_Sans_SC_Regular.woff");
|
||||
src: url('HarmonyOS_Sans_SC_Regular.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
src: url("HarmonyOS_Sans_SC_Bold.woff");
|
||||
src: url('HarmonyOS_Sans_SC_Bold.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CascadiaCode";
|
||||
src: url("Cascadia-Code-Regular.ttf");
|
||||
font-family: 'CascadiaCode';
|
||||
src: url('Cascadia-Code-Regular.ttf');
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
}
|
||||
|
||||
/* 打印页面设置 */
|
||||
@@ -75,12 +75,17 @@ html {
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
background-image: linear-gradient(90deg,
|
||||
background-image:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
|
||||
rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))),
|
||||
linear-gradient(360deg,
|
||||
rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
|
||||
),
|
||||
linear-gradient(
|
||||
360deg,
|
||||
rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
|
||||
rgba(0, 0, 0, 0) calc(3% * var(--bg-grid)));
|
||||
rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
|
||||
);
|
||||
background-size: 20px 20px;
|
||||
background-position: center center;
|
||||
}
|
||||
@@ -88,8 +93,9 @@ html {
|
||||
#app .vp-doc p {
|
||||
color: #333;
|
||||
margin: 10px 10px;
|
||||
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light,
|
||||
"PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
font-family:
|
||||
Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin,
|
||||
Georgia, Times, 'Times New Roman', serif;
|
||||
|
||||
font-size: 1rem;
|
||||
word-spacing: 2px;
|
||||
@@ -99,7 +105,7 @@ html {
|
||||
h4:after,
|
||||
h5:after,
|
||||
h6:after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 0.2em;
|
||||
height: 2em;
|
||||
@@ -191,7 +197,7 @@ h6:after {
|
||||
}
|
||||
|
||||
#app .vp-doc h4::before {
|
||||
content: "";
|
||||
content: '';
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
background-color: var(--head-title-color);
|
||||
@@ -209,7 +215,7 @@ h6:after {
|
||||
}
|
||||
|
||||
#app .vp-doc h5::before {
|
||||
content: "";
|
||||
content: '';
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
@@ -227,7 +233,7 @@ h6:after {
|
||||
}
|
||||
|
||||
#app .vp-doc h6::before {
|
||||
content: "-";
|
||||
content: '-';
|
||||
color: var(--head-title-color);
|
||||
margin-right: 7px;
|
||||
display: inline-block;
|
||||
@@ -260,71 +266,68 @@ h5 {
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
counter-reset: h1
|
||||
counter-reset: h1;
|
||||
}
|
||||
.outline-content {
|
||||
counter-reset: h1
|
||||
counter-reset: h1;
|
||||
}
|
||||
.outline-h1 {
|
||||
counter-reset: h2
|
||||
counter-reset: h2;
|
||||
}
|
||||
|
||||
.outline-h2 {
|
||||
counter-reset: h3
|
||||
counter-reset: h3;
|
||||
}
|
||||
|
||||
.outline-h3 {
|
||||
counter-reset: h4
|
||||
counter-reset: h4;
|
||||
}
|
||||
|
||||
.outline-h4 {
|
||||
counter-reset: h5
|
||||
counter-reset: h5;
|
||||
}
|
||||
|
||||
.outline-h5 {
|
||||
counter-reset: h6
|
||||
counter-reset: h6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.md-toc-content {
|
||||
counter-reset: h1toc
|
||||
counter-reset: h1toc;
|
||||
}
|
||||
|
||||
.md-toc-h1 {
|
||||
counter-reset: h2toc
|
||||
counter-reset: h2toc;
|
||||
}
|
||||
|
||||
.md-toc-h2 {
|
||||
counter-reset: h3toc
|
||||
counter-reset: h3toc;
|
||||
}
|
||||
|
||||
.md-toc-h3 {
|
||||
counter-reset: h4toc
|
||||
counter-reset: h4toc;
|
||||
}
|
||||
|
||||
.md-toc-h4 {
|
||||
counter-reset: h5toc
|
||||
counter-reset: h5toc;
|
||||
}
|
||||
|
||||
.md-toc-h5 {
|
||||
counter-reset: h6toc
|
||||
counter-reset: h6toc;
|
||||
}
|
||||
|
||||
|
||||
#app .vp-doc h1:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
#outline-content li.outline-h1>div>span.outline-label:before {
|
||||
#outline-content li.outline-h1 > div > span.outline-label:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
.outline-content .outline-h1>.outline-item>.outline-label:before{
|
||||
.outline-content .outline-h1 > .outline-item > .outline-label:before {
|
||||
counter-increment: h1;
|
||||
content: var(--autonum-h1);
|
||||
}
|
||||
#app .vp-doc span.md-toc-item.md-toc-h1>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h1 > a:before {
|
||||
counter-increment: h1toc;
|
||||
content: var(--autonum-h1toc);
|
||||
}
|
||||
@@ -334,100 +337,96 @@ h5 {
|
||||
content: var(--autonum-h2);
|
||||
color: var(--head-title-h2-color);
|
||||
}
|
||||
.outline-content .outline-h2>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h2 > .outline-item > .outline-label:before {
|
||||
counter-increment: h2;
|
||||
content: var(--autonum-h2);
|
||||
}
|
||||
li.outline-h2>div>a.outline-label:before {
|
||||
li.outline-h2 > div > a.outline-label:before {
|
||||
counter-increment: h2;
|
||||
content: var(--autonum-h2);
|
||||
}
|
||||
|
||||
#app .vp-doc span.md-toc-item.md-toc-h2>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h2 > a:before {
|
||||
counter-increment: h2toc;
|
||||
content: var(--autonum-h2toc);
|
||||
}
|
||||
|
||||
|
||||
#app .vp-doc h3>span:first-of-type::before {
|
||||
#app .vp-doc h3 > span:first-of-type::before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
color: var(--element-color);
|
||||
}
|
||||
#outline-content li.outline-h3>div>span.outline-label:before {
|
||||
#outline-content li.outline-h3 > div > span.outline-label:before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
}
|
||||
.outline-content .outline-h3>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h3 > .outline-item > .outline-label:before {
|
||||
counter-increment: h3;
|
||||
content: var(--autonum-h3);
|
||||
}
|
||||
#app .vp-doc span.md-toc-item.md-toc-h3>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h3 > a:before {
|
||||
counter-increment: h3toc;
|
||||
content: var(--autonum-h3toc);
|
||||
}
|
||||
|
||||
|
||||
#app .vp-doc h4>span:first-of-type::before {
|
||||
#app .vp-doc h4 > span:first-of-type::before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
color: var(--element-color);
|
||||
}
|
||||
#outline-content li.outline-h4>div>span.outline-label:before {
|
||||
#outline-content li.outline-h4 > div > span.outline-label:before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
}
|
||||
.outline-content .outline-h4>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h4 > .outline-item > .outline-label:before {
|
||||
counter-increment: h4;
|
||||
content: var(--autonum-h4);
|
||||
}
|
||||
#app .vp-doc span.md-toc-item.md-toc-h4>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h4 > a:before {
|
||||
counter-increment: h4toc;
|
||||
content: var(--autonum-h4toc);
|
||||
}
|
||||
|
||||
|
||||
#app .vp-doc h5>span:first-of-type::before {
|
||||
#app .vp-doc h5 > span:first-of-type::before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
color: var(--element-color);
|
||||
}
|
||||
#outline-content li.outline-h5>div>span.outline-label:before {
|
||||
#outline-content li.outline-h5 > div > span.outline-label:before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
}
|
||||
.outline-content .outline-h5>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h5 > .outline-item > .outline-label:before {
|
||||
counter-increment: h5;
|
||||
content: var(--autonum-h5);
|
||||
}
|
||||
#app .vp-doc span.md-toc-item.md-toc-h5>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h5 > a:before {
|
||||
counter-increment: h5toc;
|
||||
content: var(--autonum-h5toc);
|
||||
}
|
||||
|
||||
|
||||
#app .vp-doc h6>span:first-of-type::before {
|
||||
#app .vp-doc h6 > span:first-of-type::before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
color: var(--element-color);
|
||||
}
|
||||
#outline-content li.outline-h6>div>span.outline-label:before {
|
||||
#outline-content li.outline-h6 > div > span.outline-label:before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
}
|
||||
.outline-content .outline-h6>.outline-item>.outline-label:before {
|
||||
.outline-content .outline-h6 > .outline-item > .outline-label:before {
|
||||
counter-increment: h6;
|
||||
content: var(--autonum-h6);
|
||||
}
|
||||
#app .vp-doc span.md-toc-item.md-toc-h6>a:before {
|
||||
#app .vp-doc span.md-toc-item.md-toc-h6 > a:before {
|
||||
counter-increment: h6toc;
|
||||
content: var(--autonum-h6toc);
|
||||
}
|
||||
|
||||
|
||||
/* 列表 */
|
||||
::marker {
|
||||
color: var(--element-color-deep);
|
||||
color: var(--element-color-deep) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.md-list-item {
|
||||
@@ -480,7 +479,7 @@ li.md-list-item {
|
||||
}
|
||||
|
||||
#app .vp-doc li:before {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 50px);
|
||||
top: 35px;
|
||||
position: absolute;
|
||||
@@ -490,7 +489,7 @@ li.md-list-item {
|
||||
|
||||
/* 任务列表样式 */
|
||||
|
||||
.task-list-item input{
|
||||
.task-list-item input {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: block;
|
||||
@@ -499,12 +498,12 @@ li.md-list-item {
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.task-list-item input:focus{
|
||||
.task-list-item input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.task-list-item input:before{
|
||||
.task-list-item input:before {
|
||||
border: 1px solid var(--element-color-deep);
|
||||
border-radius: 1.2rem;
|
||||
width: 1.2rem;
|
||||
@@ -516,10 +515,10 @@ li.md-list-item {
|
||||
}
|
||||
|
||||
.task-list-item input:checked:before,
|
||||
.task-list-item input[checked]:before{
|
||||
.task-list-item input[checked]:before {
|
||||
background: var(--element-color-soo-shallow);
|
||||
border-width: 2px;
|
||||
display:inline-block;
|
||||
display: inline-block;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
}
|
||||
|
||||
@@ -533,17 +532,17 @@ li.md-list-item {
|
||||
text-decoration-color:var(--element-color)
|
||||
} */
|
||||
|
||||
.task-list-item input[type="checkbox"] + p span {
|
||||
.task-list-item input[type='checkbox'] + p span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"] + p span::after {
|
||||
content: "";
|
||||
.task-list-item input[type='checkbox'] + p span::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 52%;
|
||||
width: calc(100%*var(--check-line));
|
||||
width: calc(100% * var(--check-line));
|
||||
height: 2px;
|
||||
background: var(--element-color);
|
||||
transform: scaleX(0);
|
||||
@@ -551,11 +550,11 @@ li.md-list-item {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"]:checked + p span::after {
|
||||
.task-list-item input[type='checkbox']:checked + p span::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.task-list-item input[type="checkbox"]:not(:checked) + p span::after {
|
||||
.task-list-item input[type='checkbox']:not(:checked) + p span::after {
|
||||
transform-origin: right center;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
@@ -692,13 +691,17 @@ pre.md-meta-block {
|
||||
background-color: var(--element-color-soo-shallow);
|
||||
}
|
||||
|
||||
pre.shiki {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 行内代码 */
|
||||
#app .vp-doc p code {
|
||||
padding: 3px 3px 1px;
|
||||
color: var(--element-color-linecode);
|
||||
background: var(--element-color-linecode-background);
|
||||
border-radius: 3px;
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@@ -707,10 +710,13 @@ pre.md-meta-block {
|
||||
}
|
||||
|
||||
/* 代码块 */
|
||||
#app div[class^='language'] pre:not([lang='mermaid']) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-fences:not([lang="mermaid"])::before {
|
||||
#app div[class^='language'] pre:not([lang='mermaid'])::before {
|
||||
content: attr(lang);
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
color: #7e7e7e;
|
||||
@@ -729,14 +735,14 @@ pre.md-meta-block {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.md-fences .cm-s-inner.CodeMirror {
|
||||
#app div[class^='language'] pre:not([lang='mermaid']) code {
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.cm-s-inner.CodeMirror {
|
||||
padding: 1.2rem 0.8rem;
|
||||
color: #4f5467;
|
||||
font-family: "CascadiaCode" monospace;
|
||||
font-family: 'CascadiaCode' monospace;
|
||||
border-radius: 10px;
|
||||
background-color: #fa0303;
|
||||
/* border: 1px solid #eef2f5;*/
|
||||
@@ -759,10 +765,10 @@ pre.CodeMirror-line {
|
||||
color: #a3a3a3;
|
||||
}
|
||||
|
||||
.cm-s-inner.CodeMirror {
|
||||
#app div[class^='language'] pre:not([lang='mermaid']) code {
|
||||
background: #f8f8f8;
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 20px 10px 20px 10px;
|
||||
padding: 20px 10px 20px 30px;
|
||||
page-break-before: auto;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
@@ -911,10 +917,10 @@ kbd:hover {
|
||||
/* 目录 */
|
||||
|
||||
.md-toc * {
|
||||
font-family: "HarmonyOS_Sans_SC";
|
||||
font-family: 'HarmonyOS_Sans_SC';
|
||||
}
|
||||
|
||||
.md-tooltip-hide>span {
|
||||
.md-tooltip-hide > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -923,7 +929,7 @@ kbd:hover {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
content: "目录";
|
||||
content: '目录';
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
@@ -991,7 +997,7 @@ kbd:hover {
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
.file-tree-node.active>.file-node-content {
|
||||
.file-tree-node.active > .file-node-content {
|
||||
color: var(--appui-color);
|
||||
}
|
||||
|
||||
@@ -1004,7 +1010,7 @@ span.file-node-title {
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
.file-tree-node.active>.file-node-background {
|
||||
.file-tree-node.active > .file-node-background {
|
||||
font-weight: bolder;
|
||||
border-left: 4px solid var(--appui-color);
|
||||
border-color: var(--appui-color);
|
||||
@@ -1031,18 +1037,18 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
/* 侧边栏 大纲 */
|
||||
#outline-content .outline-h1>.outline-item {
|
||||
#outline-content .outline-h1 > .outline-item {
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
color: var(--element-color-deep);
|
||||
}
|
||||
|
||||
#outline-content .outline-h1:not(:first-of-type)>.outline-item {
|
||||
#outline-content .outline-h1:not(:first-of-type) > .outline-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#outline-content .outline-h2>.outline-item::before {
|
||||
content: "";
|
||||
#outline-content .outline-h2 > .outline-item::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--element-color);
|
||||
@@ -1060,7 +1066,7 @@ span.file-node-title {
|
||||
}
|
||||
|
||||
#outline-content .outline-h2::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 24px);
|
||||
width: 1px;
|
||||
background: var(--element-color);
|
||||
@@ -1069,26 +1075,26 @@ span.file-node-title {
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
#outline-content .outline-h2>.outline-item:last-child:after {
|
||||
#outline-content .outline-h2 > .outline-item:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#outline-content .outline-h2>.outline-item>.outline-label {
|
||||
#outline-content .outline-h2 > .outline-item > .outline-label {
|
||||
line-height: 1.65rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#outline-content .outline-h2>.outline-item {
|
||||
#outline-content .outline-h2 > .outline-item {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
#outline-content .outline-h3>.outline-item>.outline-label {
|
||||
#outline-content .outline-h3 > .outline-item > .outline-label {
|
||||
border-left: 2px solid var(--element-color);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.outline-item-active:not(.outline-item-wrapper)::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
@@ -1105,7 +1111,7 @@ body.typora-export {
|
||||
}
|
||||
|
||||
.typora-export-content .outline-content::before {
|
||||
content: "目录";
|
||||
content: '目录';
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
@@ -1130,8 +1136,8 @@ body.typora-export {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.typora-export-content .outline-item-active>.outline-item::after {
|
||||
content: "";
|
||||
.typora-export-content .outline-item-active > .outline-item::after {
|
||||
content: '';
|
||||
position: relative;
|
||||
width: 11px;
|
||||
height: 8px;
|
||||
@@ -1150,18 +1156,18 @@ body.typora-export {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.outline-content .outline-h1>.outline-item {
|
||||
.outline-content .outline-h1 > .outline-item {
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
color: var(--element-color-deep);
|
||||
}
|
||||
|
||||
.outline-content .outline-h1:not(:first-of-type)>.outline-item {
|
||||
.outline-content .outline-h1:not(:first-of-type) > .outline-item {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.outline-content .outline-h2>.outline-item::before {
|
||||
content: "";
|
||||
.outline-content .outline-h2 > .outline-item::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--element-color-deep);
|
||||
@@ -1179,7 +1185,7 @@ body.typora-export {
|
||||
}
|
||||
|
||||
.outline-content .outline-h2::after {
|
||||
content: "";
|
||||
content: '';
|
||||
height: calc(100% - 24px);
|
||||
width: 1px;
|
||||
background: var(--element-color);
|
||||
@@ -1188,20 +1194,20 @@ body.typora-export {
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.outline-content .outline-h2>.outline-item:last-child:after {
|
||||
.outline-content .outline-h2 > .outline-item:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.outline-content .outline-h2>.outline-item>.outline-label {
|
||||
.outline-content .outline-h2 > .outline-item > .outline-label {
|
||||
line-height: 1.65rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outline-content .outline-h2>.outline-item {
|
||||
.outline-content .outline-h2 > .outline-item {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.outline-content .outline-h3>.outline-item>.outline-label {
|
||||
.outline-content .outline-h3 > .outline-item > .outline-label {
|
||||
border-left: 2px solid var(--element-color);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@@ -45,10 +45,10 @@
|
||||
* in custom container, badges, etc.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
html.dark #app{
|
||||
html.dark #app {
|
||||
--vp-nav-bg-color: #000000a7 !important;
|
||||
}
|
||||
.VPNavBar:not(.VPNavBar.top){
|
||||
.VPNavBar:not(.VPNavBar.top) {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -105,17 +105,9 @@ html.dark #app{
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(
|
||||
120deg,
|
||||
#5DD6CC 30%,
|
||||
#B8F1CC
|
||||
);
|
||||
--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-background-image: linear-gradient(-45deg, #b8f1cf 50%, #47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(44px);
|
||||
}
|
||||
|
||||
@@ -151,12 +143,18 @@ html.dark #app{
|
||||
|
||||
: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;
|
||||
--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;
|
||||
@@ -180,15 +178,12 @@ html.dark #app{
|
||||
--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);
|
||||
--head-title-h2-background: linear-gradient(to right, #3db8d3, #80f7c4);
|
||||
/* 二级标题主色，因为二级标题是背景色的，所以单独设置 */
|
||||
|
||||
--element-color: #3db8bf;
|
||||
@@ -223,8 +218,10 @@ html.dark #app{
|
||||
* 黑暗模式切换动画
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
#VPContent .vp-doc > div {
|
||||
animation: rises 1s, looming 1s;
|
||||
#VPContent .vp-doc > div {
|
||||
animation:
|
||||
rises 1s,
|
||||
looming 1s;
|
||||
}
|
||||
|
||||
@keyframes rises {
|
||||
@@ -241,10 +238,29 @@ html.dark #app{
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50%{
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
.vp-doc li div[class*='language-'] {
|
||||
margin: 12px;
|
||||
}
|
||||
html.dark .vp-doc div[class*='language-'],
|
||||
html.dark .vp-doc div[class*='language-'] pre {
|
||||
background-color: #222222;
|
||||
}
|
||||
html .vp-doc div[class*='language-'],
|
||||
html .vp-doc div[class*='language-'] pre {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
#app div[class^='language'] {
|
||||
border-radius: 1em;
|
||||
overflow: hidden;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ hero:
|
||||
text: '澜音 播放器'
|
||||
tagline: 澜音是一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。
|
||||
image:
|
||||
src: './assets/logo.svg'
|
||||
src: '/logo.svg'
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 下载应用
|
||||
@@ -56,7 +56,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
|
||||
- **Pinia**：状态管理工具
|
||||
- **Vite**：快速的前端构建工具
|
||||
- **CeruPlugins**：音乐插件运行环境（仅提供框架，不包含默认插件）
|
||||
- **AMLL**：音乐生态辅助模块（仅提供功能接口，不关联具体音乐数据源）
|
||||
- **AMLL**：音乐生态辅助模块
|
||||
|
||||
## 主要功能
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "ceru-music",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.9",
|
||||
"description": "一款简洁优雅的音乐播放器",
|
||||
"main": "./out/main/index.js",
|
||||
"author": "sqj,wldss,star",
|
||||
"license": "Apache-2.0",
|
||||
"homepage": "https://electron-vite.org",
|
||||
"homepage": "https://ceru.docs.shiqianjiang.cn",
|
||||
"scripts": {
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint --cache . --fix",
|
||||
@@ -45,6 +45,7 @@
|
||||
"@pixi/sprite": "^7.4.3",
|
||||
"@types/needle": "^3.3.0",
|
||||
"NeteaseCloudMusicApi": "^4.27.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.11.0",
|
||||
"color-extraction": "^1.0.8",
|
||||
"crypto-js": "^4.2.0",
|
||||
|
||||
@@ -192,6 +192,11 @@ ipcMain.handle('service-music-request', async (_, api, args) => {
|
||||
return await musicService.request(api, args)
|
||||
})
|
||||
|
||||
// 获取应用版本号
|
||||
ipcMain.handle('get-app-version', () => {
|
||||
return app.getVersion()
|
||||
})
|
||||
|
||||
aiEvents(mainWindow)
|
||||
import './events/musicCache'
|
||||
import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/autoUpdate'
|
||||
@@ -199,18 +204,20 @@ import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/auto
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.whenReady().then(async () => {
|
||||
app.whenReady().then(() => {
|
||||
// Set app user model id for windows
|
||||
|
||||
electronApp.setAppUserModelId('com.cerulean.music')
|
||||
|
||||
// 初始化插件系统
|
||||
try {
|
||||
await pluginService.initializePlugins()
|
||||
console.log('插件系统初始化完成')
|
||||
} catch (error) {
|
||||
console.error('插件系统初始化失败:', error)
|
||||
}
|
||||
setTimeout(async () => {
|
||||
// 初始化插件系统
|
||||
try {
|
||||
await pluginService.initializePlugins()
|
||||
console.log('插件系统初始化完成')
|
||||
} catch (error) {
|
||||
console.error('插件系统初始化失败:', error)
|
||||
}
|
||||
},1000)
|
||||
|
||||
// Default open or close DevTools by F12 in development
|
||||
// and ignore CommandOrControl + R in production.
|
||||
|
||||
@@ -407,6 +407,7 @@ export default {
|
||||
return result.list[0].global_collection_id
|
||||
},
|
||||
|
||||
|
||||
async getUserListDetailByLink({ info }, link) {
|
||||
let listInfo = info['0']
|
||||
let total = listInfo.count
|
||||
|
||||
15
src/renderer/components.d.ts
vendored
15
src/renderer/components.d.ts
vendored
@@ -8,6 +8,7 @@ export {}
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.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']
|
||||
@@ -20,22 +21,8 @@ declare module 'vue' {
|
||||
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']
|
||||
TAside: typeof import('tdesign-vue-next')['Aside']
|
||||
TButton: typeof import('tdesign-vue-next')['Button']
|
||||
TContent: typeof import('tdesign-vue-next')['Content']
|
||||
TDialog: typeof import('tdesign-vue-next')['Dialog']
|
||||
ThemeDemo: typeof import('./src/components/ThemeDemo.vue')['default']
|
||||
ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
|
||||
TIcon: typeof import('tdesign-vue-next')['Icon']
|
||||
TInput: typeof import('tdesign-vue-next')['Input']
|
||||
TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
|
||||
TLayout: typeof import('tdesign-vue-next')['Layout']
|
||||
TLoading: typeof import('tdesign-vue-next')['Loading']
|
||||
TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
|
||||
TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
|
||||
TSlider: typeof import('tdesign-vue-next')['Slider']
|
||||
TTooltip: typeof import('tdesign-vue-next')['Tooltip']
|
||||
UpdateExample: typeof import('./src/components/UpdateExample.vue')['default']
|
||||
UpdateProgress: typeof import('./src/components/UpdateProgress.vue')['default']
|
||||
UpdateSettings: typeof import('./src/components/Settings/UpdateSettings.vue')['default']
|
||||
|
||||
@@ -57,8 +57,21 @@ const applyTheme = (themeName) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
<GlobalAudio />
|
||||
<FloatBall />
|
||||
<UpdateProgress />
|
||||
<div class="page">
|
||||
<router-view v-slot="{ Component }">
|
||||
<Transition :enter-active-class="`animate__animated animate__fadeIn pagesApp`"
|
||||
:leave-active-class="`animate__animated animate__fadeOut pagesApp`">
|
||||
<component :is="Component" />
|
||||
</Transition>
|
||||
</router-view>
|
||||
<GlobalAudio />
|
||||
<FloatBall />
|
||||
<UpdateProgress />
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.pagesApp {
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
@import './icon_font/iconfont.css';
|
||||
:root {
|
||||
--play-bottom-height: 86px;
|
||||
--play-bottom-height: max(min(10vh, 86px), 70px);
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -16,7 +16,7 @@ ul {
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: min(1.4vw, 18px);
|
||||
font-size: min(max(1.4vw, 15px), 18px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -5,9 +5,12 @@ import DOMPurify from 'dompurify'
|
||||
import { Loading as TLoading } from 'tdesign-vue-next'
|
||||
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useSettingsStore } from '@renderer/store/Settings'
|
||||
|
||||
const userStore = LocalUserDetailStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const { userInfo } = storeToRefs(userStore)
|
||||
const { settings } = storeToRefs(settingsStore)
|
||||
|
||||
const ball = ref<HTMLElement | null>(null)
|
||||
const ballClass = ref('hidden-right') // 默认半隐藏
|
||||
@@ -30,7 +33,7 @@ const windowSize = ref({ width: 0, height: 0 }) // 窗口尺寸
|
||||
|
||||
// 显示悬浮球
|
||||
// 悬浮球可见性控制
|
||||
const isFloatBallVisible = ref(true)
|
||||
const isFloatBallVisible = ref(settings.value.showFloatBall !== false) // 默认显示，除非明确设置为false
|
||||
const isHovering = ref(false)
|
||||
|
||||
const showBall = () => {
|
||||
@@ -42,6 +45,7 @@ const showBall = () => {
|
||||
const closeBall = (e: MouseEvent) => {
|
||||
e.stopPropagation() // 阻止事件冒泡
|
||||
isFloatBallVisible.value = false
|
||||
settingsStore.updateSettings({ showFloatBall: false })
|
||||
}
|
||||
|
||||
// 鼠标进入悬浮球
|
||||
@@ -60,7 +64,7 @@ const handleMouseLeave = () => {
|
||||
const startAutoHide = () => {
|
||||
clearTimer()
|
||||
timer = window.setTimeout(() => {
|
||||
ballClass.value = 'hidden-right'
|
||||
ballClass.value = isOnLeft.value ? 'hidden-left' : 'hidden-right'
|
||||
}, 3000) // 3 秒没操作缩回去
|
||||
}
|
||||
|
||||
@@ -102,11 +106,12 @@ const handleMouseMove = (e: MouseEvent) => {
|
||||
|
||||
// 限制在屏幕范围内，底部边界为 height - 196，考虑外层容器尺寸120px
|
||||
const maxX = windowSize.value.width - 120
|
||||
const maxY = windowSize.value.height - 196
|
||||
const maxY = windowSize.value.height - 176
|
||||
const minY = 90 // 顶部边界限制，不允许进入顶部90px区域
|
||||
|
||||
ballPosition.value = {
|
||||
x: Math.max(0, Math.min(x, maxX)),
|
||||
y: Math.max(0, Math.min(y, maxY))
|
||||
y: Math.max(minY, Math.min(y, maxY))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,8 +124,8 @@ const handleMouseUp = () => {
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
|
||||
if (hasDragged.value) {
|
||||
// 自动吸边逻辑，考虑外层容器尺寸120px
|
||||
const centerX = ballPosition.value.x + 60 // 外层容器中心点
|
||||
// 自动吸边逻辑
|
||||
const centerX = ballPosition.value.x + 60 // 悬浮球中心点
|
||||
const screenCenter = windowSize.value.width / 2
|
||||
|
||||
if (centerX < screenCenter) {
|
||||
@@ -130,12 +135,13 @@ const handleMouseUp = () => {
|
||||
ballClass.value = 'hidden-left'
|
||||
} else {
|
||||
// 吸附到右边
|
||||
ballPosition.value.x = windowSize.value.width - 126
|
||||
ballPosition.value.x = windowSize.value.width - 106
|
||||
isOnLeft.value = false
|
||||
ballClass.value = 'hidden-right'
|
||||
}
|
||||
|
||||
// 重新开启自动隐藏
|
||||
// 保存位置到本地存储
|
||||
saveBallPosition()
|
||||
clearTimer()
|
||||
startAutoHide()
|
||||
}
|
||||
}
|
||||
@@ -316,6 +322,15 @@ watch(
|
||||
{ immediate: false }
|
||||
)
|
||||
|
||||
// 监听设置变化，更新悬浮球可见性
|
||||
watch(
|
||||
() => settings.value.showFloatBall,
|
||||
(newValue) => {
|
||||
isFloatBallVisible.value = newValue
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 更新窗口尺寸
|
||||
const updateWindowSize = () => {
|
||||
windowSize.value = {
|
||||
@@ -324,25 +339,76 @@ const updateWindowSize = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化悬浮球位置
|
||||
const initBallPosition = () => {
|
||||
// 保存悬浮球位置到本地存储
|
||||
const saveBallPosition = () => {
|
||||
const positionData = {
|
||||
x: ballPosition.value.x,
|
||||
y: ballPosition.value.y,
|
||||
isOnLeft: isOnLeft.value
|
||||
}
|
||||
localStorage.setItem('floatBallPosition', JSON.stringify(positionData))
|
||||
}
|
||||
|
||||
// 从本地存储加载悬浮球位置
|
||||
const loadBallPosition = () => {
|
||||
try {
|
||||
const savedPosition = localStorage.getItem('floatBallPosition')
|
||||
if (savedPosition) {
|
||||
const positionData = JSON.parse(savedPosition)
|
||||
ballPosition.value = {
|
||||
x: positionData.x,
|
||||
y: positionData.y
|
||||
}
|
||||
isOnLeft.value = positionData.isOnLeft
|
||||
} else {
|
||||
// 如果没有保存过位置，使用默认位置
|
||||
setDefaultPosition()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载悬浮球位置失败:', error)
|
||||
setDefaultPosition()
|
||||
}
|
||||
}
|
||||
|
||||
// 设置默认位置
|
||||
const setDefaultPosition = () => {
|
||||
updateWindowSize()
|
||||
ballPosition.value = {
|
||||
x: windowSize.value.width - 126, // 考虑外层容器尺寸120px
|
||||
y: windowSize.value.height - 196
|
||||
y: windowSize.value.height - 176
|
||||
}
|
||||
isOnLeft.value = false
|
||||
}
|
||||
|
||||
// 初始化悬浮球位置
|
||||
const initBallPosition = () => {
|
||||
updateWindowSize()
|
||||
loadBallPosition()
|
||||
}
|
||||
|
||||
// 定义 handleResize 函数
|
||||
const handleResize = () => {
|
||||
updateWindowSize()
|
||||
initBallPosition()
|
||||
// 保证悬浮球不超出边界
|
||||
const maxX = windowSize.value.width - 120
|
||||
const maxY = windowSize.value.height - 176
|
||||
const minY = 90 // 顶部边界限制
|
||||
|
||||
// 如果悬浮球在右侧，随窗口宽度变化更新位置
|
||||
if (!isOnLeft.value) {
|
||||
// 重新计算右侧位置
|
||||
ballPosition.value.x = windowSize.value.width - 106
|
||||
}
|
||||
|
||||
// 确保位置在有效范围内
|
||||
ballPosition.value.x = Math.max(0, Math.min(ballPosition.value.x, maxX))
|
||||
ballPosition.value.y = Math.max(minY, Math.min(ballPosition.value.y, maxY))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initBallPosition()
|
||||
startAutoHide()
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
@@ -351,6 +417,7 @@ onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
window.removeEventListener('resize', handleResize)
|
||||
saveBallPosition() // 保存位置
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -398,7 +465,7 @@ onBeforeUnmount(() => {
|
||||
:style="{
|
||||
left: isOnLeft ? ballPosition.x + 120 + 'px' : 'auto',
|
||||
right: isOnLeft ? 'auto' : windowSize.width - ballPosition.x + 20 + 'px',
|
||||
bottom: Math.max(20, 196) + 'px'
|
||||
bottom: Math.max(20, 176) + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="ask-header">
|
||||
@@ -452,8 +519,8 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.float-ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: #409eff;
|
||||
display: flex;
|
||||
|
||||
@@ -412,7 +412,7 @@ const playNext = async () => {
|
||||
|
||||
// 定期保存当前播放位置
|
||||
let savePositionInterval: number | null = null
|
||||
let unEnded:()=>any = ()=>{}
|
||||
let unEnded: () => any = () => {}
|
||||
// 初始化播放器
|
||||
onMounted(async () => {
|
||||
console.log('加载')
|
||||
@@ -421,7 +421,7 @@ onMounted(async () => {
|
||||
|
||||
// 监听音频结束事件，根据播放模式播放下一首
|
||||
unEnded = controlAudio.subscribe('ended', () => {
|
||||
window.requestAnimationFrame(()=>{
|
||||
window.requestAnimationFrame(() => {
|
||||
playNext()
|
||||
})
|
||||
})
|
||||
@@ -530,6 +530,7 @@ watch(
|
||||
|
||||
// 全屏展示相关
|
||||
const toggleFullPlay = () => {
|
||||
if (!songInfo.value.songmid) return
|
||||
showFullPlay.value = !showFullPlay.value
|
||||
}
|
||||
|
||||
@@ -670,22 +671,24 @@ const handleProgressDragStart = (event: MouseEvent) => {
|
||||
const songInfo = ref<Omit<SongList, 'songmid'> & { songmid: null | number }>({
|
||||
songmid: null,
|
||||
hash: '',
|
||||
singer: 'CeruMusic',
|
||||
name: '未知歌曲名',
|
||||
name: '欢迎使用CeruMusic 🎉',
|
||||
singer: '可以配置音源插件来播放你的歌曲',
|
||||
albumName: '',
|
||||
albumId: 0,
|
||||
source: '',
|
||||
interval: '00:00',
|
||||
img: 'https://oss.shiqianjiang.cn//storage/default/20250723/mmexport1744732a2f8406e483442888d29521de63ca4f98bc085a2.jpeg',
|
||||
img: '',
|
||||
lrc: null,
|
||||
types: [],
|
||||
_types: {},
|
||||
typeUrl: {}
|
||||
})
|
||||
const maincolor = ref('rgba(0, 0, 0, 1)')
|
||||
const maincolor = ref('var(--td-brand-color-5)')
|
||||
const startmaincolor = ref('rgba(0, 0, 0, 1)')
|
||||
const contrastTextColor = ref('rgba(0, 0, 0, .8)')
|
||||
const hoverColor = ref('rgba(0,0,0,1)')
|
||||
const hoverColor = ref('var(--td-brand-color-5)')
|
||||
const playbg = ref('var(--td-brand-color-2)')
|
||||
const playbghover = ref('var(--td-brand-color-3)')
|
||||
async function setColor() {
|
||||
console.log('主题色刷新')
|
||||
const color = await extractDominantColor(songInfo.value.img)
|
||||
@@ -694,8 +697,18 @@ async function setColor() {
|
||||
startmaincolor.value = `rgba(${color.r},${color.g},${color.b},.2)`
|
||||
contrastTextColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 0.6)
|
||||
hoverColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 1)
|
||||
playbg.value = 'rgba(255,255,255,0.2)'
|
||||
playbghover.value = 'rgba(255,255,255,0.33)'
|
||||
}
|
||||
watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
watch(
|
||||
songInfo,
|
||||
async (newVal) => {
|
||||
if (newVal.img) {
|
||||
await setColor()
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
// onMounted(setColor)
|
||||
</script>
|
||||
|
||||
@@ -718,7 +731,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
<div class="player-content">
|
||||
<!-- 左侧：封面和歌曲信息 -->
|
||||
<div class="left-section">
|
||||
<div class="album-cover">
|
||||
<div class="album-cover" v-show="songInfo.img">
|
||||
<img :src="songInfo.img" alt="专辑封面" />
|
||||
</div>
|
||||
|
||||
@@ -793,14 +806,16 @@ watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
|
||||
<!-- 播放列表按钮 -->
|
||||
<t-tooltip content="播放列表">
|
||||
<t-button
|
||||
class="control-btn"
|
||||
shape="circle"
|
||||
variant="text"
|
||||
@click.stop="togglePlaylist"
|
||||
>
|
||||
<liebiao style="width: 1.5em; height: 1.5em" />
|
||||
</t-button>
|
||||
<t-badge :count="list.length" :maxCount="99" color="#aaa">
|
||||
<t-button
|
||||
class="control-btn"
|
||||
shape="circle"
|
||||
variant="text"
|
||||
@click.stop="togglePlaylist"
|
||||
>
|
||||
<liebiao style="width: 1.5em; height: 1.5em" />
|
||||
</t-button>
|
||||
</t-badge>
|
||||
</t-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@@ -999,7 +1014,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
|
||||
.song-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
color: v-bind(hoverColor);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -1044,7 +1059,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
}
|
||||
|
||||
&.play-btn {
|
||||
background-color: #ffffff27;
|
||||
background-color: v-bind(playbg);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
border-radius: 50%;
|
||||
@@ -1061,7 +1076,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #ffffff62;
|
||||
background-color: v-bind(playbghover);
|
||||
color: v-bind(contrastTextColor);
|
||||
}
|
||||
}
|
||||
|
||||
81
src/renderer/src/components/Settings/AIFloatBallSettings.vue
Normal file
81
src/renderer/src/components/Settings/AIFloatBallSettings.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="float-ball-settings">
|
||||
<t-card hover-shadow title="AI悬浮球设置">
|
||||
<div class="card-body">
|
||||
<div class="setting-item">
|
||||
<span class="setting-label">显示AI悬浮球</span>
|
||||
<t-switch v-model="showFloatBall" @change="handleFloatBallToggle" />
|
||||
</div>
|
||||
<div class="setting-description">
|
||||
<p>开启后，AI悬浮球将显示在应用界面上，您可以随时与AI助手交流</p>
|
||||
<p>关闭后，AI悬浮球将被隐藏，您可以随时在此处重新开启</p>
|
||||
</div>
|
||||
</div>
|
||||
</t-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useSettingsStore } from '@renderer/store/Settings'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const { settings } = storeToRefs(settingsStore)
|
||||
|
||||
// 悬浮球显示状态
|
||||
const showFloatBall = ref(settings.value.showFloatBall !== false)
|
||||
|
||||
// 处理悬浮球开关切换
|
||||
const handleFloatBallToggle = (val: boolean) => {
|
||||
settingsStore.updateSettings({ showFloatBall: val })
|
||||
}
|
||||
|
||||
// 监听设置变化
|
||||
watch(
|
||||
() => settings.value.showFloatBall,
|
||||
(newValue) => {
|
||||
showFloatBall.value = newValue !== false
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
// 确保初始值与存储中的值一致
|
||||
showFloatBall.value = settings.value.showFloatBall !== false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.float-ball-settings {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--td-border-level-1-color);
|
||||
}
|
||||
|
||||
.setting-description p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<div class="theme-demo">
|
||||
<div class="demo-header">
|
||||
<h1 class="demo-title">主题切换演示</h1>
|
||||
<ThemeSelector />
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="demo-card">
|
||||
<h3 class="card-title">主要功能</h3>
|
||||
<p class="card-text">这是一个现代化的主题切换组件，支持多种预设主题色。</p>
|
||||
<button class="btn btn-primary">主要按钮</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-card">
|
||||
<h3 class="card-title">设计特点</h3>
|
||||
<ul class="feature-list">
|
||||
<li>简约美观的界面设计</li>
|
||||
<li>平滑的过渡动画效果</li>
|
||||
<li>响应式布局适配</li>
|
||||
<li>深色模式支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-card">
|
||||
<h3 class="card-title">交互元素</h3>
|
||||
<div class="demo-controls">
|
||||
<input type="text" class="form-control" placeholder="输入框示例" />
|
||||
<button class="btn btn-secondary">次要按钮</button>
|
||||
<a href="#" class="demo-link">链接示例</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ThemeSelector from './ThemeSelector.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.theme-demo {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--td-component-border);
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--td-text-color-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
background: var(--td-bg-color-container);
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: var(--td-radius-large);
|
||||
padding: 24px;
|
||||
box-shadow: var(--td-shadow-1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--td-text-color-primary);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--td-text-color-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
color: var(--td-text-color-secondary);
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.feature-list li::before {
|
||||
content: '•';
|
||||
color: var(--td-brand-color);
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--td-radius-medium);
|
||||
border: 1px solid transparent;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--td-brand-color);
|
||||
border-color: var(--td-brand-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--td-brand-color-hover);
|
||||
border-color: var(--td-brand-color-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--td-bg-color-component);
|
||||
border-color: var(--td-component-border);
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--td-bg-color-component-hover);
|
||||
border-color: var(--td-component-border);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: var(--td-radius-medium);
|
||||
background-color: var(--td-bg-color-container);
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--td-brand-color);
|
||||
box-shadow: 0 0 0 3px var(--td-brand-color-light);
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
color: var(--td-brand-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-link:hover {
|
||||
color: var(--td-brand-color-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.demo-header {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -14,9 +14,7 @@
|
||||
:style="{ width: `${downloadState.progress.percent}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="progress-text">
|
||||
{{ Math.round(downloadState.progress.percent) }}%
|
||||
</div>
|
||||
<div class="progress-text">{{ Math.round(downloadState.progress.percent) }}%</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-details">
|
||||
@@ -61,31 +59,37 @@ const calculateSpeed = () => {
|
||||
}
|
||||
|
||||
// 监听下载进度变化
|
||||
watch(() => downloadState.progress.transferred, () => {
|
||||
calculateSpeed()
|
||||
})
|
||||
watch(
|
||||
() => downloadState.progress.transferred,
|
||||
() => {
|
||||
calculateSpeed()
|
||||
}
|
||||
)
|
||||
|
||||
// 开始监听时重置速度计算
|
||||
watch(() => downloadState.isDownloading, (isDownloading) => {
|
||||
if (isDownloading) {
|
||||
lastTransferred = 0
|
||||
lastTime = 0
|
||||
downloadSpeed.value = 0
|
||||
watch(
|
||||
() => downloadState.isDownloading,
|
||||
(isDownloading) => {
|
||||
if (isDownloading) {
|
||||
lastTransferred = 0
|
||||
lastTime = 0
|
||||
downloadSpeed.value = 0
|
||||
|
||||
// 每秒更新一次速度显示
|
||||
speedInterval = setInterval(() => {
|
||||
if (!downloadState.isDownloading) {
|
||||
downloadSpeed.value = 0
|
||||
// 每秒更新一次速度显示
|
||||
speedInterval = setInterval(() => {
|
||||
if (!downloadState.isDownloading) {
|
||||
downloadSpeed.value = 0
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
if (speedInterval) {
|
||||
clearInterval(speedInterval)
|
||||
speedInterval = null
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
if (speedInterval) {
|
||||
clearInterval(speedInterval)
|
||||
speedInterval = null
|
||||
downloadSpeed.value = 0
|
||||
}
|
||||
downloadSpeed.value = 0
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
if (speedInterval) {
|
||||
@@ -168,14 +172,14 @@ const formatBytes = (bytes: number): string => {
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #0052d9, #266fe8);
|
||||
background: linear-gradient(90deg, var(--td-brand-color-5), var(--td-brand-color-3));
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-weight: 600;
|
||||
color: #0052d9;
|
||||
color: var(--td-brand-color-6);
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -195,7 +199,7 @@ const formatBytes = (bytes: number): string => {
|
||||
|
||||
.download-speed {
|
||||
text-align: center;
|
||||
color: #0052d9;
|
||||
color: var(--td-brand-color-4);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import './assets/base.css'
|
||||
import 'animate.css';
|
||||
|
||||
// 引入组件库的少量全局样式变量
|
||||
// import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createWebHashHistory, createRouter, RouteRecordRaw, RouterOptions } from 'vue-router'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
let routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'welcome',
|
||||
@@ -11,10 +11,6 @@ const routes: RouteRecordRaw[] = [
|
||||
redirect: '/home/find',
|
||||
component: () => import('@renderer/views/home/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/home/find'
|
||||
},
|
||||
{
|
||||
path: 'find',
|
||||
name: 'find',
|
||||
@@ -45,6 +41,10 @@ const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
meta: {
|
||||
transitionIn: "animate__fadeIn",
|
||||
transitionOut: "animate__fadeOut",
|
||||
},
|
||||
component: () => import('@renderer/views/settings/index.vue')
|
||||
},
|
||||
{
|
||||
@@ -53,9 +53,30 @@ const routes: RouteRecordRaw[] = [
|
||||
component: () => import('@renderer/views/settings/plugins.vue')
|
||||
}
|
||||
]
|
||||
function setAnimate(routerObj: RouteRecordRaw[]) {
|
||||
for (let i = 0; i < routerObj.length; i++) {
|
||||
let item = routerObj[i];
|
||||
if (item.children && item.children.length > 0) {
|
||||
setAnimate(item.children);
|
||||
} else {
|
||||
if (item.meta) continue
|
||||
item.meta = item.meta || {};
|
||||
item.meta.transitionIn = 'animate__fadeInRight';
|
||||
item.meta.transitionOut = 'animate__fadeOutLeft';
|
||||
}
|
||||
}
|
||||
}
|
||||
setAnimate(routes)
|
||||
const option: RouterOptions = {
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
routes,
|
||||
scrollBehavior(_to_, _from_, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition;
|
||||
} else {
|
||||
return { top: 0 };
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
const router = createRouter(option)
|
||||
|
||||
@@ -198,8 +198,8 @@ export const ControlAudioStore = defineStore('controlAudio', () => {
|
||||
}
|
||||
const stop = () => {
|
||||
if (Audio.audio) {
|
||||
Audio.isPlay = false
|
||||
return transitionVolume(Audio.audio, Audio.volume / 100, false, true).then(() => {
|
||||
Audio.isPlay = false
|
||||
Audio.audio?.pause()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -20,7 +20,8 @@ export const LocalUserDetailStore = defineStore('Local', () => {
|
||||
topBarStyle: false,
|
||||
mainColor: '#00DAC0',
|
||||
volume: 80,
|
||||
currentTime: 0
|
||||
currentTime: 0,
|
||||
selectSources: 'wy'
|
||||
}
|
||||
localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
|
||||
}
|
||||
|
||||
50
src/renderer/src/store/Settings.ts
Normal file
50
src/renderer/src/store/Settings.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export interface SettingsState {
|
||||
showFloatBall: boolean
|
||||
}
|
||||
|
||||
export const useSettingsStore = defineStore('settings', () => {
|
||||
// 从本地存储加载设置，如果没有则使用默认值
|
||||
const loadSettings = (): SettingsState => {
|
||||
try {
|
||||
const savedSettings = localStorage.getItem('appSettings')
|
||||
if (savedSettings) {
|
||||
return JSON.parse(savedSettings)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载设置失败:', error)
|
||||
}
|
||||
|
||||
// 默认设置
|
||||
return {
|
||||
showFloatBall: true
|
||||
}
|
||||
}
|
||||
|
||||
const settings = ref<SettingsState>(loadSettings())
|
||||
|
||||
// 保存设置到本地存储
|
||||
const saveSettings = () => {
|
||||
localStorage.setItem('appSettings', JSON.stringify(settings.value))
|
||||
}
|
||||
|
||||
// 更新设置
|
||||
const updateSettings = (newSettings: Partial<SettingsState>) => {
|
||||
settings.value = { ...settings.value, ...newSettings }
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
// 切换悬浮球显示状态
|
||||
const toggleFloatBall = () => {
|
||||
settings.value.showFloatBall = !settings.value.showFloatBall
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
return {
|
||||
settings,
|
||||
updateSettings,
|
||||
toggleFloatBall
|
||||
}
|
||||
})
|
||||
@@ -12,8 +12,8 @@ type PlaylistEvents = {
|
||||
// 创建全局事件总线
|
||||
const emitter = mitt<PlaylistEvents>()
|
||||
|
||||
// 将事件总线挂载到全局
|
||||
;(window as any).musicEmitter = emitter
|
||||
// 将事件总线挂载到全局
|
||||
; (window as any).musicEmitter = emitter
|
||||
const qualityMap: Record<string, string> = {
|
||||
'128k': '标准音质',
|
||||
'192k': '高品音质',
|
||||
@@ -87,8 +87,12 @@ export async function addToPlaylistAndPlay(
|
||||
}
|
||||
|
||||
await MessagePlugin.success('已添加到播放列表并开始播放')
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('播放失败:', error)
|
||||
if (error.message) {
|
||||
await MessagePlugin.error('播放失败了: ' + error.message)
|
||||
return
|
||||
}
|
||||
await MessagePlugin.error('播放失败了，可能还没有版权')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export function transitionVolume(
|
||||
): Promise<undefined> {
|
||||
clearInterval(timer)
|
||||
const playVolume = lengthen ? 40 : 20
|
||||
const pauseVolume = lengthen ? 20 : 10
|
||||
const pauseVolume = lengthen ? 30 : 20
|
||||
return new Promise((resolve) => {
|
||||
if (target) {
|
||||
timer = setInterval(() => {
|
||||
@@ -22,7 +22,7 @@ export function transitionVolume(
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
audio.volume = Math.max(audio.volume - volume / pauseVolume, 0)
|
||||
if (audio.volume <= 20) {
|
||||
if (audio.volume <= 0) {
|
||||
clearInterval(timer)
|
||||
audio.volume = volume
|
||||
resolve(undefined)
|
||||
|
||||
@@ -89,89 +89,86 @@ const handleKeyDown = () => {
|
||||
</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 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>
|
||||
<p class="app-title">
|
||||
<span style="color: #000; font-weight: 800">Ceru Music</span>
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<TitleBarControls :color="'#000'"></TitleBarControls>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TitleBarControls :color="'#000'"></TitleBarControls>
|
||||
<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>
|
||||
|
||||
<div class="mainContent">
|
||||
<keep-alive>
|
||||
<router-view />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
</t-content>
|
||||
</t-content>
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
<PlayMusic />
|
||||
<PlayMusic />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.animate__animated {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
height: calc(100vh - var(--play-bottom-height));
|
||||
overflow-y: hidden;
|
||||
@@ -218,6 +215,7 @@ const handleKeyDown = () => {
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: #111827;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
color: #b8f0cc;
|
||||
@@ -264,10 +262,12 @@ const handleKeyDown = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-layout__content) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
background: #f6f6f6;
|
||||
@@ -288,6 +288,7 @@ const handleKeyDown = () => {
|
||||
&:last-of-type {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 1rem;
|
||||
color: #3d4043;
|
||||
@@ -303,6 +304,7 @@ const handleKeyDown = () => {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
|
||||
.search-input {
|
||||
-webkit-app-region: no-drag;
|
||||
display: flex;
|
||||
@@ -333,11 +335,14 @@ const handleKeyDown = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 0; /* 确保flex子元素能够正确计算高度 */
|
||||
position: relative;
|
||||
height: 0;
|
||||
/* 确保flex子元素能够正确计算高度 */
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.375rem;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, watch,WatchHandle, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
|
||||
// 路由实例
|
||||
@@ -11,11 +11,18 @@ const loading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
// 热门歌曲数据
|
||||
const hotSongs:any = ref([])
|
||||
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 = ''
|
||||
@@ -71,6 +78,11 @@ const playSong = (song: any): void => {
|
||||
onMounted(() => {
|
||||
fetchHotSonglist()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
if(watchSource){
|
||||
watchSource()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -229,6 +241,8 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -186,6 +186,7 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-container {
|
||||
box-sizing: border-box;
|
||||
background: #fafafa;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { MessagePlugin } from 'tdesign-vue-next'
|
||||
|
||||
// 本地音乐数据
|
||||
const localSongs = ref([
|
||||
@@ -85,25 +86,303 @@ const deleteSong = (song: any): void => {
|
||||
console.log('删除歌曲:', song.title)
|
||||
// 这里可以添加删除确认和实际删除逻辑
|
||||
}
|
||||
|
||||
// 歌单相关功能
|
||||
interface Playlist {
|
||||
id: number
|
||||
name: string
|
||||
songs: any[]
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
const playlists = ref<Playlist[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: '我喜欢的音乐',
|
||||
songs: [localSongs.value[0], localSongs.value[2]],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '周杰伦精选',
|
||||
songs: [localSongs.value[1], localSongs.value[3], localSongs.value[4]],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
}
|
||||
])
|
||||
|
||||
// 当前选中的歌单
|
||||
const currentPlaylist = ref<Playlist | null>(null)
|
||||
|
||||
// 显示歌单对话框
|
||||
const showPlaylistDialog = ref(false)
|
||||
const showCreatePlaylistDialog = ref(false)
|
||||
const newPlaylistName = ref('')
|
||||
|
||||
// 创建新歌单
|
||||
const createPlaylist = () => {
|
||||
if (!newPlaylistName.value.trim()) {
|
||||
MessagePlugin.warning('歌单名称不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
const newPlaylist: Playlist = {
|
||||
id: playlists.value.length + 1,
|
||||
name: newPlaylistName.value,
|
||||
songs: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
}
|
||||
|
||||
playlists.value.push(newPlaylist)
|
||||
newPlaylistName.value = ''
|
||||
showCreatePlaylistDialog.value = false
|
||||
MessagePlugin.success('歌单创建成功')
|
||||
}
|
||||
|
||||
// 将当前播放列表保存为歌单
|
||||
const saveCurrentPlaylistAs = () => {
|
||||
showCreatePlaylistDialog.value = true
|
||||
}
|
||||
|
||||
// 一键播放歌单
|
||||
const playPlaylist = (playlist: Playlist) => {
|
||||
if (playlist.songs.length === 0) {
|
||||
MessagePlugin.warning('歌单中没有歌曲')
|
||||
return
|
||||
}
|
||||
|
||||
// 这里应该调用播放器的方法替换播放列表
|
||||
console.log('播放歌单:', playlist.name, '共', playlist.songs.length, '首歌曲')
|
||||
MessagePlugin.success(`已将播放列表替换为歌单"${playlist.name}"`)
|
||||
}
|
||||
|
||||
// 查看歌单详情
|
||||
const viewPlaylist = (playlist: Playlist) => {
|
||||
currentPlaylist.value = playlist
|
||||
showPlaylistDialog.value = true
|
||||
}
|
||||
|
||||
// 添加歌曲到歌单
|
||||
const addToPlaylist = (song: any, playlist: Playlist) => {
|
||||
// 检查歌曲是否已在歌单中
|
||||
const exists = playlist.songs.some((s) => s.id === song.id)
|
||||
if (exists) {
|
||||
MessagePlugin.warning(`歌曲"${song.title}"已在歌单中`)
|
||||
return
|
||||
}
|
||||
|
||||
playlist.songs.push(song)
|
||||
playlist.updatedAt = new Date().toISOString()
|
||||
MessagePlugin.success(`已将"${song.title}"添加到歌单"${playlist.name}"`)
|
||||
}
|
||||
|
||||
// 从歌单中移除歌曲
|
||||
const removeFromPlaylist = (songId: number, playlist: Playlist) => {
|
||||
const index = playlist.songs.findIndex((s) => s.id === songId)
|
||||
if (index !== -1) {
|
||||
const songTitle = playlist.songs[index].title
|
||||
playlist.songs.splice(index, 1)
|
||||
playlist.updatedAt = new Date().toISOString()
|
||||
MessagePlugin.success(`已从歌单"${playlist.name}"中移除"${songTitle}"`)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除歌单
|
||||
const deletePlaylist = (playlistId: number) => {
|
||||
const index = playlists.value.findIndex((p) => p.id === playlistId)
|
||||
if (index !== -1) {
|
||||
const playlistName = playlists.value[index].name
|
||||
playlists.value.splice(index, 1)
|
||||
|
||||
// 如果正在查看的歌单被删除，关闭对话框
|
||||
if (currentPlaylist.value && currentPlaylist.value.id === playlistId) {
|
||||
currentPlaylist.value = null
|
||||
showPlaylistDialog.value = false
|
||||
}
|
||||
|
||||
MessagePlugin.success(`已删除歌单"${playlistName}"`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="local-container">
|
||||
<!-- 页面标题和操作 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<h2>本地音乐</h2>
|
||||
<div class="stats">
|
||||
<span>{{ stats.totalSongs }} 首歌曲</span>
|
||||
<span>总时长 {{ stats.totalDuration }}</span>
|
||||
<span>总大小 {{ stats.totalSize }}</span>
|
||||
<div>
|
||||
<div class="local-container">
|
||||
<!-- 页面标题和操作 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<h2>本地音乐</h2>
|
||||
<div class="stats">
|
||||
<span>{{ stats.totalSongs }} 首歌曲</span>
|
||||
<span>总时长 {{ stats.totalDuration }}</span>
|
||||
<span>总大小 {{ stats.totalSize }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<t-button theme="default" @click="openMusicFolder">
|
||||
<i class="iconfont icon-shouye"></i>
|
||||
打开文件夹
|
||||
</t-button>
|
||||
<t-button theme="primary" @click="importMusic">
|
||||
<i class="iconfont icon-zengjia"></i>
|
||||
导入音乐
|
||||
</t-button>
|
||||
<t-button theme="default" @click="saveCurrentPlaylistAs">
|
||||
<i class="iconfont icon-baocun"></i>
|
||||
保存为歌单
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<t-button theme="default" @click="openMusicFolder">
|
||||
<i class="iconfont icon-shouye"></i>
|
||||
打开文件夹
|
||||
</t-button>
|
||||
|
||||
<!-- 歌单区域 -->
|
||||
<div class="playlists-section">
|
||||
<div class="section-header">
|
||||
<h3>我的歌单</h3>
|
||||
<t-button theme="primary" variant="text" @click="showCreatePlaylistDialog = true">
|
||||
<i class="iconfont icon-zengjia"></i>
|
||||
新建歌单
|
||||
</t-button>
|
||||
</div>
|
||||
|
||||
<div class="playlists-grid">
|
||||
<div v-for="playlist in playlists" :key="playlist.id" class="playlist-card">
|
||||
<div class="playlist-cover" @click="viewPlaylist(playlist)">
|
||||
<div class="cover-overlay">
|
||||
<i class="iconfont icon-bofang"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-name" @click="viewPlaylist(playlist)">{{ playlist.name }}</div>
|
||||
<div class="playlist-meta">{{ playlist.songs.length }}首歌曲</div>
|
||||
</div>
|
||||
<div class="playlist-actions">
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="播放歌单"
|
||||
@click="playPlaylist(playlist)"
|
||||
>
|
||||
<i class="iconfont icon-a-tingzhiwukuang"></i>
|
||||
</t-button>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="default"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="查看详情"
|
||||
@click="viewPlaylist(playlist)"
|
||||
>
|
||||
<i class="iconfont icon-liebiao"></i>
|
||||
</t-button>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="danger"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="删除歌单"
|
||||
@click="deletePlaylist(playlist.id)"
|
||||
>
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音乐列表 -->
|
||||
<div class="music-list">
|
||||
<div class="list-header">
|
||||
<div class="header-item index">#</div>
|
||||
<div class="header-item title">标题</div>
|
||||
<div class="header-item artist">艺术家</div>
|
||||
<div class="header-item album">专辑</div>
|
||||
<div class="header-item duration">时长</div>
|
||||
<div class="header-item size">大小</div>
|
||||
<div class="header-item format">格式</div>
|
||||
<div class="header-item actions">操作</div>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<div
|
||||
v-for="(song, index) in localSongs"
|
||||
:key="song.id"
|
||||
class="song-row"
|
||||
@dblclick="playSong(song)"
|
||||
>
|
||||
<div class="row-item index">{{ index + 1 }}</div>
|
||||
<div class="row-item title">
|
||||
<div class="song-title">{{ song.title }}</div>
|
||||
</div>
|
||||
<div class="row-item artist">{{ song.artist }}</div>
|
||||
<div class="row-item album">{{ song.album }}</div>
|
||||
<div class="row-item duration">{{ song.duration }}</div>
|
||||
<div class="row-item size">{{ song.size }}</div>
|
||||
<div class="row-item format">
|
||||
<span class="format-badge">{{ song.format }}</span>
|
||||
<span class="bitrate">{{ song.bitrate }}</span>
|
||||
</div>
|
||||
<div class="row-item actions">
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="播放"
|
||||
@click="playSong(song)"
|
||||
>
|
||||
<i class="iconfont icon-a-tingzhiwukuang"></i>
|
||||
</t-button>
|
||||
<t-dropdown
|
||||
:options="[
|
||||
{
|
||||
content: '添加到歌单',
|
||||
value: 'addToPlaylist',
|
||||
children: playlists.map((p) => ({ content: p.name, value: `playlist-${p.id}` }))
|
||||
}
|
||||
]"
|
||||
@click="
|
||||
(data) => {
|
||||
if (data.startsWith('playlist-')) {
|
||||
const playlistId = parseInt(data.split('-')[1])
|
||||
const targetPlaylist = playlists.find((p) => p.id === playlistId)
|
||||
if (targetPlaylist) {
|
||||
addToPlaylist(song, targetPlaylist)
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<t-button shape="circle" theme="default" variant="text" size="small" title="更多">
|
||||
<i class="iconfont icon-gengduo"></i>
|
||||
</t-button>
|
||||
</t-dropdown>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="danger"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="删除"
|
||||
@click="deleteSong(song)"
|
||||
>
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="localSongs.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="iconfont icon-music"></i>
|
||||
</div>
|
||||
<h3>暂无本地音乐</h3>
|
||||
<p>点击"导入音乐"按钮添加您的音乐文件</p>
|
||||
<t-button theme="primary" @click="importMusic">
|
||||
<i class="iconfont icon-zengjia"></i>
|
||||
导入音乐
|
||||
@@ -111,87 +390,110 @@ const deleteSong = (song: any): void => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音乐列表 -->
|
||||
<div class="music-list">
|
||||
<div class="list-header">
|
||||
<div class="header-item index">#</div>
|
||||
<div class="header-item title">标题</div>
|
||||
<div class="header-item artist">艺术家</div>
|
||||
<div class="header-item album">专辑</div>
|
||||
<div class="header-item duration">时长</div>
|
||||
<div class="header-item size">大小</div>
|
||||
<div class="header-item format">格式</div>
|
||||
<div class="header-item actions">操作</div>
|
||||
</div>
|
||||
<!-- 创建歌单对话框 -->
|
||||
<t-dialog
|
||||
v-model:visible="showCreatePlaylistDialog"
|
||||
header="创建新歌单"
|
||||
:confirm-btn="{ content: '创建', theme: 'primary' }"
|
||||
:cancel-btn="{ content: '取消' }"
|
||||
@confirm="createPlaylist"
|
||||
>
|
||||
<t-input
|
||||
v-model="newPlaylistName"
|
||||
placeholder="请输入歌单名称"
|
||||
clearable
|
||||
@keyup.enter="createPlaylist"
|
||||
/>
|
||||
</t-dialog>
|
||||
|
||||
<div class="list-body">
|
||||
<div
|
||||
v-for="(song, index) in localSongs"
|
||||
:key="song.id"
|
||||
class="song-row"
|
||||
@dblclick="playSong(song)"
|
||||
>
|
||||
<div class="row-item index">{{ index + 1 }}</div>
|
||||
<div class="row-item title">
|
||||
<div class="song-title">{{ song.title }}</div>
|
||||
<!-- 歌单详情对话框 -->
|
||||
<t-dialog
|
||||
v-model:visible="showPlaylistDialog"
|
||||
:header="currentPlaylist?.name || '歌单详情'"
|
||||
width="800px"
|
||||
:footer="false"
|
||||
>
|
||||
<template v-if="currentPlaylist">
|
||||
<div class="playlist-header">
|
||||
<div class="playlist-info">
|
||||
<h3>{{ currentPlaylist.name }}</h3>
|
||||
<div class="playlist-meta">
|
||||
<span>{{ currentPlaylist.songs.length }} 首歌曲</span>
|
||||
<span>创建于 {{ new Date(currentPlaylist.createdAt).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-item artist">{{ song.artist }}</div>
|
||||
<div class="row-item album">{{ song.album }}</div>
|
||||
<div class="row-item duration">{{ song.duration }}</div>
|
||||
<div class="row-item size">{{ song.size }}</div>
|
||||
<div class="row-item format">
|
||||
<span class="format-badge">{{ song.format }}</span>
|
||||
<span class="bitrate">{{ song.bitrate }}</span>
|
||||
</div>
|
||||
<div class="row-item actions">
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="播放"
|
||||
@click="playSong(song)"
|
||||
>
|
||||
<div class="playlist-actions">
|
||||
<t-button theme="primary" @click="playPlaylist(currentPlaylist)">
|
||||
<i class="iconfont icon-a-tingzhiwukuang"></i>
|
||||
</t-button>
|
||||
<t-button shape="circle" theme="default" variant="text" size="small" title="更多">
|
||||
<i class="iconfont icon-gengduo"></i>
|
||||
</t-button>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="danger"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="删除"
|
||||
@click="deleteSong(song)"
|
||||
>
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
一键播放
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="localSongs.length === 0" class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="iconfont icon-music"></i>
|
||||
</div>
|
||||
<h3>暂无本地音乐</h3>
|
||||
<p>点击"导入音乐"按钮添加您的音乐文件</p>
|
||||
<t-button theme="primary" @click="importMusic">
|
||||
<i class="iconfont icon-zengjia"></i>
|
||||
导入音乐
|
||||
</t-button>
|
||||
</div>
|
||||
<div class="playlist-songs">
|
||||
<div class="list-header">
|
||||
<div class="header-item index">#</div>
|
||||
<div class="header-item title">标题</div>
|
||||
<div class="header-item artist">艺术家</div>
|
||||
<div class="header-item album">专辑</div>
|
||||
<div class="header-item duration">时长</div>
|
||||
<div class="header-item actions">操作</div>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<div
|
||||
v-for="(song, index) in currentPlaylist.songs"
|
||||
:key="song.id"
|
||||
class="song-row"
|
||||
@dblclick="playSong(song)"
|
||||
>
|
||||
<div class="row-item index">{{ index + 1 }}</div>
|
||||
<div class="row-item title">
|
||||
<div class="song-title">{{ song.title }}</div>
|
||||
</div>
|
||||
<div class="row-item artist">{{ song.artist }}</div>
|
||||
<div class="row-item album">{{ song.album }}</div>
|
||||
<div class="row-item duration">{{ song.duration }}</div>
|
||||
<div class="row-item actions">
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="primary"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="播放"
|
||||
@click="playSong(song)"
|
||||
>
|
||||
<i class="iconfont icon-a-tingzhiwukuang"></i>
|
||||
</t-button>
|
||||
<t-button
|
||||
shape="circle"
|
||||
theme="danger"
|
||||
variant="text"
|
||||
size="small"
|
||||
title="从歌单中移除"
|
||||
@click="removeFromPlaylist(song.id, currentPlaylist)"
|
||||
>
|
||||
<i class="iconfont icon-shanchu"></i>
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentPlaylist.songs.length === 0" class="empty-playlist">
|
||||
<p>歌单中暂无歌曲</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.local-container {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
@@ -231,6 +533,7 @@ const deleteSong = (song: any): void => {
|
||||
}
|
||||
|
||||
.music-list {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
@@ -239,7 +542,9 @@ const deleteSong = (song: any): void => {
|
||||
|
||||
.list-header {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
|
||||
width: 100%;
|
||||
grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: #f9fafb;
|
||||
@@ -257,7 +562,8 @@ const deleteSong = (song: any): void => {
|
||||
.list-body {
|
||||
.song-row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
|
||||
grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
@@ -365,4 +671,152 @@ const deleteSong = (song: any): void => {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 歌单区域样式 */
|
||||
.playlists-section {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlists-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.playlist-card {
|
||||
background: #fff;
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.playlist-cover .cover-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
height: 160px;
|
||||
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.cover-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
.iconfont {
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
padding: 1rem;
|
||||
|
||||
.playlist-name {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin-bottom: 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #4f46e5;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-meta {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 1rem 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 歌单详情对话框样式 */
|
||||
.playlist-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.playlist-info {
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.playlist-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
|
||||
span {
|
||||
&:not(:last-child)::after {
|
||||
content: '•';
|
||||
margin-left: 1rem;
|
||||
color: #d1d5db;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-songs {
|
||||
.list-header {
|
||||
grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.list-body .song-row {
|
||||
grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-playlist {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,6 +53,7 @@ const clearAPIKey = (): void => {
|
||||
import { useRouter } from 'vue-router'
|
||||
import { computed, watch } from 'vue'
|
||||
import MusicCache from '@renderer/components/Settings/MusicCache.vue'
|
||||
import AIFloatBallSettings from '@renderer/components/Settings/AIFloatBallSettings.vue'
|
||||
const router = useRouter()
|
||||
const goPlugin = () => {
|
||||
router.push('/plugins')
|
||||
@@ -181,7 +182,7 @@ const getCurrentSourceName = () => {
|
||||
<div class="settings-container">
|
||||
<div class="settings-content">
|
||||
<div class="settings-header">
|
||||
<h2>标题栏控制组件演示</h2>
|
||||
<h2>设置你的顶部控制栏</h2>
|
||||
<p>这里展示了两种不同风格的标题栏控制按钮</p>
|
||||
</div>
|
||||
|
||||
@@ -289,6 +290,8 @@ const getCurrentSourceName = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AIFloatBallSettings></AIFloatBallSettings>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 播放列表管理部分 -->
|
||||
@@ -430,7 +433,9 @@ const getCurrentSourceName = () => {
|
||||
<MusicCache></MusicCache>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<Versions></Versions>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>功能说明</h3>
|
||||
@@ -508,7 +513,7 @@ const getCurrentSourceName = () => {
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
max-width: 800px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
@@ -574,7 +579,7 @@ const getCurrentSourceName = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 14px 1rem;
|
||||
background: #f6f6f6;
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid #d1d5db;
|
||||
@@ -602,7 +607,7 @@ const getCurrentSourceName = () => {
|
||||
|
||||
.iconfont {
|
||||
font-size: 1.25rem;
|
||||
color: #f97316;
|
||||
color: var(--td-brand-color);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
@@ -1015,23 +1020,23 @@ const getCurrentSourceName = () => {
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.music-config-container {
|
||||
.source-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
// @media (max-width: 768px) {
|
||||
// .music-config-container {
|
||||
// .source-cards {
|
||||
// grid-template-columns: 1fr;
|
||||
// }
|
||||
|
||||
.config-status {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
// .config-status {
|
||||
// grid-template-columns: 1fr;
|
||||
// }
|
||||
// }
|
||||
|
||||
.plugin-prompt {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
// .plugin-prompt {
|
||||
// flex-direction: column;
|
||||
// text-align: center;
|
||||
// gap: 1.5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 动画效果
|
||||
@keyframes fadeInUp {
|
||||
|
||||
@@ -1,13 +1,312 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
router.push('home')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>欢迎来到Ceru Music</h1>
|
||||
<div class="welcome-container">
|
||||
<!-- 左侧Logo区域 -->
|
||||
<div class="logo-section">
|
||||
<div class="image-container">
|
||||
<div class="image-bg"></div>
|
||||
<img class="logo-image" src="/logo.svg" alt="Ceru Music Logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区域 -->
|
||||
<div class="content-section">
|
||||
<div class="brand-content">
|
||||
<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 class="tag" v-for="(feature, index) in features" :key="index">
|
||||
{{ feature }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 版本信息 -->
|
||||
<div class="version-info">v{{ version }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const version = ref('1.0.0') // 默认版本号
|
||||
|
||||
// 特性列表
|
||||
const features = ['高品质音乐', '简约风', '离线播放', '丰富的插件支持']
|
||||
|
||||
onMounted(async () => {
|
||||
// 通过IPC获取版本号
|
||||
try {
|
||||
const appVersion = await window.electron.ipcRenderer.invoke('get-app-version')
|
||||
if (appVersion) {
|
||||
version.value = appVersion
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to get app version via IPC:', error)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
router.push('/home')
|
||||
}, 2000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.welcome-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 左侧Logo区域 */
|
||||
.logo-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
width: min(30vw, 70vh);
|
||||
height: min(30vw, 70vh);
|
||||
background-image: linear-gradient(-45deg, #b8f1cf 50%, #47caff 50%);
|
||||
filter: blur(56px);
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
width: min(30vw, 70vh);
|
||||
height: min(30vw, 70vh);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
/* 右侧内容区域 */
|
||||
.content-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 2rem 4rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.brand-content {
|
||||
/* max-width: 400px; */
|
||||
animation: slideInRight 1s ease-out;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem 0;
|
||||
background: -webkit-linear-gradient(120deg, #5dd6cc 30%, #b8f1cc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #666666;
|
||||
margin: 1rem 0 5rem 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 加载区域 */
|
||||
.loading-area {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(-45deg, #b8f1cf 0%, #47caff 100%);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 0.9rem;
|
||||
color: #888888;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 特性标签 */
|
||||
.feature-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.4rem 0.8rem;
|
||||
background: #B8F1CE;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
color: #333333;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tag.active {
|
||||
background: linear-gradient(-45deg, #25ff7c 0%, #47caff 100%);
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(71, 202, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-info {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
font-size: 0.8rem;
|
||||
color: #9e9e9e;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* 动画定义 */
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计
|
||||
@media (max-width: 1024px) {
|
||||
.welcome-container {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.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;
|
||||
}
|
||||
} */
|
||||
|
||||
/* 暗色主题适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.welcome-container {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
12
yarn.lock
12
yarn.lock
@@ -2285,6 +2285,11 @@ alien-signals@^2.0.5:
|
||||
resolved "https://registry.npmmirror.com/alien-signals/-/alien-signals-2.0.6.tgz"
|
||||
integrity sha512-P3TxJSe31bUHBiblg59oU1PpaWPtmxF9GhJ/cB7OkgJ0qN/ifFSKUI25/v8ZhsT+lIG6ac8DpTOplXxORX6F3Q==
|
||||
|
||||
animate.css@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
|
||||
integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
|
||||
|
||||
ansi-regex@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz"
|
||||
@@ -5303,12 +5308,7 @@ lodash.merge@^4.6.2:
|
||||
resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
|
||||
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
|
||||
|
||||
lodash@^4.17.15:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
lodash@^4.17.21:
|
||||
lodash@^4.17.15, lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
Reference in New Issue
Block a user