github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

添加主题字体颜色设置

pull/1094/head
lyswhut 2022-12-30 12:12:09 +08:00
parent a7c2857808
commit 6ff1d683a5
33 changed files with 628 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/common/theme/createThemes.js
View File

@ -11,6 +11,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(77, 175, 124)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -33,6 +34,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(52, 152, 219)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -55,6 +57,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(77, 131, 175)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-600)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -77,6 +80,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(245, 171, 53)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -99,6 +103,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(214, 69, 65)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -121,6 +126,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(241, 130, 141)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -143,6 +149,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(155, 89, 182)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -165,6 +172,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(108, 122, 137)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -187,6 +195,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(51, 110, 123)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -209,6 +218,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(79, 98, 208)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@ -231,6 +241,7 @@ const defaultThemes = [
isDark: true,
config: {
primary: 'rgb(150, 150, 150)',
font: 'rgb(229, 229, 229)',
'--color-app-background': 'rgba(0, 0, 0, 0)',
'--color-main-background': 'rgba(19, 19, 19, 0.9)',
'--color-nav-font': 'var(--color-primary)',
@ -253,6 +264,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(74, 55, 82)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0)',
'--color-main-background': 'rgba(255, 255, 255, 0.9)',
'--color-nav-font': 'var(--color-primary-light-600)',
@ -276,6 +288,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(87, 144, 167)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@ -298,6 +311,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgba(47, 47, 47, 1)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@ -321,6 +335,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(192, 57, 43)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@ -339,12 +354,12 @@ const defaultThemes = [
},
]
const themes = defaultThemes.map(({ config: { primary, ...extInfo }, ...themeInfo }) => {
const themes = defaultThemes.map(({ config: { primary, font, ...extInfo }, ...themeInfo }) => {
return {
...themeInfo,
isCustom: false,
config: {
themeColors: createThemeColors(primary, themeInfo.isDark),
themeColors: createThemeColors(primary, font, themeInfo.isDark),
extInfo,
},
}

345
src/common/theme/index.json
View File

@ -216,7 +216,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(77, 175, 124)"
"--color-theme": "rgb(77, 175, 124)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -451,7 +472,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(52, 152, 219)"
"--color-theme": "rgb(52, 152, 219)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -686,7 +728,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(77, 131, 175)"
"--color-theme": "rgb(77, 131, 175)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-600)",
@ -921,7 +984,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(245, 171, 53)"
"--color-theme": "rgb(245, 171, 53)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -1156,7 +1240,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(214, 69, 65)"
"--color-theme": "rgb(214, 69, 65)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -1391,7 +1496,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(241, 130, 141)"
"--color-theme": "rgb(241, 130, 141)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -1626,7 +1752,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(155, 89, 182)"
"--color-theme": "rgb(155, 89, 182)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -1861,7 +2008,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(108, 122, 137)"
"--color-theme": "rgb(108, 122, 137)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -2096,7 +2264,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(51, 110, 123)"
"--color-theme": "rgb(51, 110, 123)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -2331,7 +2520,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(79, 98, 208)"
"--color-theme": "rgb(79, 98, 208)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@ -2566,7 +2776,28 @@
"--color-primary-light-1000-alpha-700": "rgba(47, 47, 47, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(47, 47, 47, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(47, 47, 47, 0.10)",
"--color-theme": "rgb(59,59,59)"
"--color-theme": "rgb(59,59,59)",
"--color-1000": "rgb(229, 229, 229)",
"--color-950": "rgb(218,218,218)",
"--color-900": "rgb(207,207,207)",
"--color-850": "rgb(197,197,197)",
"--color-800": "rgb(187,187,187)",
"--color-750": "rgb(178,178,178)",
"--color-700": "rgb(169,169,169)",
"--color-650": "rgb(161,161,161)",
"--color-600": "rgb(153,153,153)",
"--color-550": "rgb(145,145,145)",
"--color-500": "rgb(138,138,138)",
"--color-450": "rgb(131,131,131)",
"--color-400": "rgb(124,124,124)",
"--color-350": "rgb(118,118,118)",
"--color-300": "rgb(112,112,112)",
"--color-250": "rgb(106,106,106)",
"--color-200": "rgb(101,101,101)",
"--color-150": "rgb(96,96,96)",
"--color-100": "rgb(91,91,91)",
"--color-050": "rgb(86,86,86)",
"--color-000": "rgb(82,82,82)"
},
"extInfo": {
"--color-app-background": "rgba(0, 0, 0, 0)",
@ -2801,7 +3032,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(74, 55, 82)"
"--color-theme": "rgb(74, 55, 82)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0)",
@ -3036,7 +3288,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(87, 144, 167)"
"--color-theme": "rgb(87, 144, 167)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0.15)",
@ -3271,7 +3544,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgba(47, 47, 47, 1)"
"--color-theme": "rgba(47, 47, 47, 1)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0)",
@ -3506,7 +3800,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(192, 57, 43)"
"--color-theme": "rgb(192, 57, 43)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0.15)",

43
src/common/theme/utils.js
View File

@ -1,6 +1,6 @@
const { RGB_Linear_Shade, RGB_Alpha_Shade } = require('./colorUtils')
exports.createThemeColors = (rgbaColor, isDark) => {
exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark) => {
const colors = {
'--color-primary': rgbaColor,
}
@ -30,13 +30,46 @@ exports.createThemeColors = (rgbaColor, isDark) => {
colors['--color-theme'] = isDark ? colors['--color-primary-light-900'] : rgbaColor
return { ...colors, ...createFontColors(fontRgbaColor, isDark) }
}
const createFontColors = (rgbaColor, isDark) => {
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
if (rgbaColor == null) rgbaColor = isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'
if (isDark) return createFontDarkColors(rgbaColor)
let colors = {
'--color-1000': rgbaColor,
}
let step = isDark ? -0.05 : 0.05
for (let i = 1; i < 21; i += 1) {
colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = RGB_Linear_Shade(step * i, rgbaColor)
}
// console.log(colors)
return colors
}
const createFontDarkColors = (rgbaColor) => {
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
// let colors = [prec]
// for (let j = 1; j < 11; j += 1) {
// colors.push(prec = RGB_Linear_Shade(-0.15, prec))
// }
let colors = {
'--color-1000': rgbaColor,
}
const step = -0.05
let preColor = rgbaColor
for (let i = 1; i < 21; i += 1) {
preColor = RGB_Linear_Shade(step, preColor)
colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = preColor
}
// console.log(colors)
return colors
}
// console.log(createFontColors('rgb(33, 33, 33)', false))
// console.log(createFontColors('rgb(255, 255, 255)', true))
// console.log(createFontDarkColors('rgb(255, 255, 255)'))

34
src/common/types/theme.d.ts vendored
View File

@ -1,17 +1,29 @@
declare namespace LX {
interface ThemeColors {
// '--color-000': string
// '--color-050': string
// '--color-100': string
// '--color-200': string
// '--color-300': string
// '--color-400': string
// '--color-500': string
// '--color-600': string
// '--color-700': string
// '--color-800': string
// '--color-900': string
'--color-000': string
'--color-050': string
'--color-100': string
'--color-150': string
'--color-200': string
'--color-250': string
'--color-300': string
'--color-350': string
'--color-400': string
'--color-450': string
'--color-500': string
'--color-550': string
'--color-600': string
'--color-650': string
'--color-700': string
'--color-750': string
'--color-800': string
'--color-850': string
'--color-900': string
'--color-950': string
'--color-1000': string
'--color-theme': string
'--color-primary': string

1
src/lang/en-us.json
View File

@ -532,6 +532,7 @@
"theme_edit_modal__control_btn": "Left control button color",
"theme_edit_modal__copy": "Copy theme",
"theme_edit_modal__dark": "Dark theme",
"theme_edit_modal__font": "Font color",
"theme_edit_modal__hide_btn": "Hide play details page",
"theme_edit_modal__main_bg": "Content area background color",
"theme_edit_modal__min_btn": "Minimize",

1
src/lang/zh-cn.json
View File

@ -534,6 +534,7 @@
"theme_edit_modal__control_btn": "左侧控制按钮颜色",
"theme_edit_modal__copy": "复制主题",
"theme_edit_modal__dark": "暗色主题",
"theme_edit_modal__font": "字体颜色",
"theme_edit_modal__hide_btn": "隐藏播放详情页",
"theme_edit_modal__main_bg": "内容区域背景颜色",
"theme_edit_modal__min_btn": "最小化",

1
src/lang/zh-tw.json
View File

@ -532,6 +532,7 @@
"theme_edit_modal__control_btn": "左側控制按鈕顏色",
"theme_edit_modal__copy": "複製主題",
"theme_edit_modal__dark": "暗色主題",
"theme_edit_modal__font": "字體顏色",
"theme_edit_modal__hide_btn": "隱藏播放詳情頁",
"theme_edit_modal__main_bg": "內容區域背景顏色",
"theme_edit_modal__min_btn": "最小化",

23
src/main/modules/sync/event/event.js
View File

@ -1,23 +0,0 @@
const { EventEmitter } = require('events')
const SYNC_EVENT_NAME = require('./name')
class Sync extends EventEmitter {
status(status) {
this.emit(SYNC_EVENT_NAME.status, status)
}
sync_list(data) {
this.emit(SYNC_EVENT_NAME.sync_list, data)
}
sync_handle_list(data) {
this.emit(SYNC_EVENT_NAME.sync_handle_list, data)
}
action_list(data) {
this.emit(SYNC_EVENT_NAME.sync_action_list, data)
}
}
module.exports = Sync

6
src/main/modules/sync/event/name.js
View File

@ -1,6 +0,0 @@
module.exports = {
sync_action_list: 'sync_action_list',
sync_list: 'sync_list',
sync_handle_list: 'sync_handle_list',
status: 'status',
}

5
src/main/modules/sync/modules/list.ts
View File

@ -9,7 +9,7 @@ let removeListener: (() => void) | null
type listAction = 'list:action'
const handleListAction = ({ action, data }: LX.Sync.ActionList) => {
// console.log(action, data)
// console.log('handleListAction', action)
switch (action) {
case 'list_data_overwrite':
@ -144,11 +144,14 @@ const broadcast = async(action: listAction, data: any, excludeIds: string[] = []
}
export const sendListAction = async(action: LX.Sync.ActionList) => {
console.log('sendListAction', action.action)
// io.sockets
return await broadcast('list:action', JSON.stringify(action))
}
export const registerListHandler = (_io: Server, socket: LX.Sync.Socket) => {
unregisterListHandler()
io = _io
socket.on('list:action', msg => {
// console.log(msg)

46
src/main/modules/sync/server/auth.ts
View File

@ -1,4 +1,5 @@
import http from 'http'
import { SYNC_CODE } from './config'
import {
aesEncrypt,
aesDecrypt,
@ -6,19 +7,17 @@ import {
getClientKeyInfo,
setClientKeyInfo,
} from './utils'
const authMsg = 'lx-music auth::'
const helloMsg = 'Hello~::^-^::~v2~'
import querystring from 'node:querystring'
const requestIps = new Map<string, number>()
export const authCode = async(req: http.IncomingMessage, res: http.ServerResponse, authCode: string) => {
let code = 401
let msg = 'Forbidden'
let msg: string = SYNC_CODE.msgAuthFailed
let ip = req.socket.remoteAddress
// console.log(req.headers)
if (typeof req.headers.m == 'string' && ip && (requestIps.get(ip) ?? 0) > 10) {
if (typeof req.headers.m == 'string' && ip && (requestIps.get(ip) ?? 0) < 10) {
if (req.headers.m) {
label:
if (req.headers.i) {
@ -27,36 +26,36 @@ export const authCode = async(req: http.IncomingMessage, res: http.ServerRespons
if (!keyInfo) break label
let text
try {
text = aesDecrypt(req.headers.m, keyInfo.key, keyInfo.iv)
text = aesDecrypt(req.headers.m, keyInfo.key)
} catch (err) {
break label
}
console.log(text)
if (text.startsWith(authMsg)) {
// console.log(text)
if (text.startsWith(SYNC_CODE.authMsg)) {
code = 200
const deviceName = text.replace(authMsg, '') || 'Unknown'
const deviceName = text.replace(SYNC_CODE.authMsg, '') || 'Unknown'
if (deviceName != keyInfo.deviceName) {
keyInfo.deviceName = deviceName
setClientKeyInfo(keyInfo)
}
msg = aesEncrypt(helloMsg, keyInfo.key, keyInfo.iv)
msg = aesEncrypt(SYNC_CODE.helloMsg, keyInfo.key)
}
} else {
let key = ''.padStart(16, Buffer.from(authCode).toString('hex'))
const iv = Buffer.from(key.split('').reverse().join('')).toString('base64')
// const iv = Buffer.from(key.split('').reverse().join('')).toString('base64')
key = Buffer.from(key).toString('base64')
// console.log(authCode, key, iv)
// console.log(req.headers.m, authCode, key)
let text
try {
text = aesDecrypt(req.headers.m, key, iv)
text = aesDecrypt(req.headers.m, key)
} catch (err) {
break label
}
console.log(text)
if (text.startsWith(authMsg)) {
// console.log(text)
if (text.startsWith(SYNC_CODE.authMsg)) {
code = 200
const deviceName = text.replace(authMsg, '') || 'Unknown'
msg = aesEncrypt(JSON.stringify(createClientKeyInfo(deviceName)), key, iv)
const deviceName = text.replace(SYNC_CODE.authMsg, '') || 'Unknown'
msg = aesEncrypt(JSON.stringify(createClientKeyInfo(deviceName)), key)
}
}
}
@ -72,20 +71,21 @@ export const authCode = async(req: http.IncomingMessage, res: http.ServerRespons
}
export const authConnect = async(req: http.IncomingMessage) => {
const url = new URL(req.url as string)
const i = url.searchParams.get('i')
const t = url.searchParams.get('t')
const query = querystring.parse((req.url as string).split('?')[1])
const i = query.i
const t = query.t
label:
if (i && t) {
if (typeof i == 'string' && typeof t == 'string') {
const keyInfo = getClientKeyInfo(i)
if (!keyInfo) break label
let text
try {
text = aesDecrypt(t, keyInfo.key, keyInfo.iv)
text = aesDecrypt(t, keyInfo.key)
} catch (err) {
break label
}
if (text == 'lx-music connect') return
// console.log(text)
if (text == SYNC_CODE.msgConnect) return
}
throw new Error('failed')
}

7
src/main/modules/sync/server/config.ts Normal file
View File

@ -0,0 +1,7 @@
export const SYNC_CODE = {
helloMsg: 'Hello~::^-^::~v2~',
idPrefix: 'OjppZDo6',
authMsg: 'lx-music auth::',
msgAuthFailed: 'Auth failed',
msgConnect: 'lx-music connect',
} as const

14
src/main/modules/sync/server/server.ts
View File

@ -7,6 +7,7 @@ import { getAddress, getServerId, generateCode as handleGenerateCode, getClientK
import { syncList, removeSnapshot } from './syncList'
import { log } from '@common/utils'
import { sendStatus } from '@main/modules/winMain'
import { SYNC_CODE } from './config'
let status: LX.Sync.Status = {
@ -44,6 +45,14 @@ const handleConnection = (io: Server, socket: LX.Sync.Socket) => {
}
}
const handleUnconnection = () => {
console.log('unconnection')
// console.log(socket.handshake.query)
for (const module of Object.values(modules)) {
module.unregisterListHandler()
}
}
const authConnection = (req: http.IncomingMessage, callback: (err: string | null | undefined, success: boolean) => void) => {
// console.log(req.headers)
// // console.log(req.auth)
@ -66,11 +75,11 @@ const handleStartServer = async(port = 9527) => await new Promise((resolve, reje
switch (req.url) {
case '/hello':
code = 200
msg = 'Hello~::^-^::~v2'
msg = SYNC_CODE.helloMsg
break
case '/id':
code = 200
msg = 'OjppZDo6' + getServerId()
msg = SYNC_CODE.idPrefix + getServerId()
break
case '/ah':
void authCode(req, res, status.code)
@ -103,6 +112,7 @@ const handleStartServer = async(port = 9527) => await new Promise((resolve, reje
console.log('disconnect', reason)
status.devices.splice(status.devices.findIndex(k => k.clientId == keyInfo?.clientId), 1)
sendStatus(status)
if (!status.devices.length) handleUnconnection()
})
if (typeof socket.handshake.query.i != 'string') return socket.disconnect(true)
const keyInfo = getClientKeyInfo(socket.handshake.query.i)

2
src/main/modules/sync/server/syncList.ts
View File

@ -267,7 +267,7 @@ const handleSyncList = async(socket: LX.Sync.Socket): Promise<LX.Sync.ListData |
if (remoteListData.defaultList.length || remoteListData.loveList.length || remoteListData.userList.length) {
const mergedList = await handleMergeListData(socket)
console.log('handleMergeListData', 'mergedList')
console.log(mergedList)
// console.log(mergedList)
if (!mergedList) return null
listData.defaultList = mergedList.defaultList
listData.loveList = mergedList.loveList

12
src/main/modules/sync/server/utils.ts
View File

@ -5,9 +5,7 @@ import getStore from '@main/utils/store'
const STORE_NAME = 'sync'
interface KeyInfos {
[key: string]: LX.Sync.KeyInfo
}
type KeyInfos = Record<string, LX.Sync.KeyInfo>
export const getAddress = (): string[] => {
const nets = networkInterfaces()
@ -71,13 +69,13 @@ export const generateCode = (): string => {
return Math.random().toString().substring(2, 8)
}
export const aesEncrypt = (buffer: string | Buffer, key: string, iv: string): string => {
const cipher = createCipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
export const aesEncrypt = (buffer: string | Buffer, key: string): string => {
const cipher = createCipheriv('aes-128-ecb', Buffer.from(key, 'base64'), '')
return Buffer.concat([cipher.update(buffer), cipher.final()]).toString('base64')
}
export const aesDecrypt = (text: string, key: string, iv: string): string => {
const decipher = createDecipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
export const aesDecrypt = (text: string, key: string): string => {
const decipher = createDecipheriv('aes-128-ecb', Buffer.from(key, 'base64'), '')
return Buffer.concat([decipher.update(Buffer.from(text, 'base64')), decipher.final()]).toString()
}

6
src/main/utils/index.ts
View File

@ -5,7 +5,6 @@ import { STORE_NAMES, URL_SCHEME_RXP } from '@common/constants'
import defaultSetting from '@common/defaultSetting'
import defaultHotKey from '@common/defaultHotKey'
import { migrateDataJson, migrateHotKey, migrateUserApi, parseDataFile } from './migrate'
import { commonColorNames, commonLightColorValues, commonDarkColorValues } from '@common/config'
import { nativeTheme } from 'electron'
import { joinPath } from '@common/utils/nodejs'
import themes from '@common/theme/index.json'
@ -263,11 +262,6 @@ export const getTheme = () => {
...theme.config.extInfo,
}
const vals = theme.isDark ? commonDarkColorValues : commonLightColorValues
for (let i = commonColorNames.length; i--;) {
colors[commonColorNames[i]] = vals[i]
}
return {
shouldUseDarkColors,
theme: {

48
src/renderer/assets/styles/index.less
View File

@ -231,17 +231,39 @@
// --color-100: #616161;
// --color-050: #424242;
// --color-000: #212121;
--color-000: #fff;
--color-050: #fafafa;
--color-100: #f5f5f5;
--color-200: #eeeeee;
--color-300: #e0e0e0;
--color-400: #bdbdbd;
--color-500: #9e9e9e;
--color-600: #757575;
--color-700: #616161;
--color-800: #424242;
--color-900: #212121;
// --color-000: #fff;
// --color-050: #fafafa;
// --color-100: #f5f5f5;
// --color-200: #eeeeee;
// --color-300: #e0e0e0;
// --color-400: #bdbdbd;
// --color-500: #9e9e9e;
// --color-600: #757575;
// --color-700: #616161;
// --color-800: #424242;
// --color-900: #212121;
--color-000: rgb(255,255,255);
--color-050: rgb(244,244,244);
--color-100: rgb(233,233,233);
--color-150: rgb(222,222,222);
--color-200: rgb(211,211,211);
--color-250: rgb(200,200,200);
--color-300: rgb(188,188,188);
--color-350: rgb(177,177,177);
--color-400: rgb(166,166,166);
--color-450: rgb(155,155,155);
--color-500: rgb(144,144,144);
--color-550: rgb(133,133,133);
--color-600: rgb(122,122,122);
--color-650: rgb(111,111,111);
--color-700: rgb(100,100,100);
--color-750: rgb(89,89,89);
--color-800: rgb(77,77,77);
--color-850: rgb(66,66,66);
--color-900: rgb(55,55,55);
--color-950: rgb(44,44,44);
--color-1000: rgb(33, 33, 33);
--color-app-background: var(--color-primary-light-600-alpha-600);
--color-main-background: rgba(255, 255, 255, 0.9);
@ -257,8 +279,8 @@
--color-badge-secondary: #4baed5;
--color-badge-tertiary: #e7aa36;
--color-font: var(--color-700);
--color-font-label: var(--color-200);
--color-font: var(--color-850);
--color-font-label: var(--color-450);
--color-primary-font: var(--color-primary);
--color-primary-font-hover: var(--color-primary-alpha-300);
--color-primary-font-active: var(--color-primary-dark-100-alpha-200);

2
src/renderer/components/layout/PlayBar/FullWidthProgress.vue
View File

@ -267,7 +267,7 @@ export default {
.timeContent {
flex: none;
color: var(--color-300);
color: var(--color-550);
font-size: 13px;
padding-left: 10px;
}

2
src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
View File

@ -257,7 +257,7 @@ export default {
width: 30%;
// position: relative;
flex: none;
color: var(--color-300);
color: var(--color-550);
font-size: 13px;
// padding-left: 10px;
display: flex;

2
src/renderer/components/layout/PlayBar/PlayProgress.vue
View File

@ -126,7 +126,7 @@ export default {
// width: 30%;
position: relative;
// flex: none;
color: var(--color-300);
color: var(--color-550);
font-size: 13px;
// padding-left: 10px;
// display: flex;

6
src/renderer/components/layout/PlayDetail/LyricPlayer.vue
View File

@ -206,13 +206,13 @@ export default {
}
:global {
.font-lrc {
color: var(--color-200);
color: var(--color-450);
}
.line-content {
line-height: 1.2;
padding: calc(var(--playDetail-lrc-font-size, 16px) / 2) 1px;
overflow-wrap: break-word;
color: var(--color-200);
color: var(--color-450);
transition: @transition-normal;
transition-property: padding;
@ -240,7 +240,7 @@ export default {
transition-property: font-size;
font-size: 1em;
background-repeat: no-repeat;
background-color: var(--color-200);
background-color: var(--color-450);
background-image: -webkit-linear-gradient(top, var(--color-primary-dark-200), var(--color-primary-dark-200));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

4
src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue
View File

@ -91,13 +91,13 @@ export default {
min-width: 0;
line-height: 1.3;
gap: 6px;
color: var(--color-200);
color: var(--color-450);
}
.name {
flex: 0 1 auto;
min-width: 0;
.mixin-ellipsis-1;
color: var(--color-400);
color: var(--color-650);
}
.label {
flex: none;

2
src/renderer/components/layout/SyncModeModal.vue
View File

@ -60,7 +60,7 @@ export default {
sync.isShowSyncMode = false
}
const handleSelectMode = (mode) => {
if (mode.startsWith('overwrite') && this.isOverwrite) mode += '_full'
if (mode.startsWith('overwrite') && isOverwrite.value) mode += '_full'
sendSyncAction({ action: 'select_mode', data: mode })
handleClose()
}

20
src/renderer/core/useApp/useSync.ts
View File

@ -1,5 +1,5 @@
import { markRaw, onBeforeUnmount } from '@common/utils/vueTools'
import { onSyncAction } from '@renderer/utils/ipc'
import { onSyncAction, sendSyncAction } from '@renderer/utils/ipc'
import { sync } from '@renderer/store'
import { appSetting } from '@renderer/store/setting'
@ -34,14 +34,14 @@ export default () => {
return async() => {
sync.enable = appSetting['sync.enable']
sync.port = appSetting['sync.port']
// if (appSetting['sync.enable'] && appSetting['sync.port']) {
// void sendSyncAction({
// action: 'enable',
// data: {
// enable: appSetting['sync.enable'],
// port: appSetting['sync.port'],
// },
// })
// }
if (appSetting['sync.enable'] && appSetting['sync.port']) {
void sendSyncAction({
action: 'enable',
data: {
enable: appSetting['sync.enable'],
port: appSetting['sync.port'],
},
})
}
}
}

23
src/renderer/store/list/listManage/action.ts
View File

@ -97,7 +97,7 @@ const removeUserList = (id: string) => {
}
const overwriteUserList = (lists: LX.List.UserListInfo[]) => {
userLists.splice(0, lists.length, ...lists)
userLists.splice(0, userLists.length, ...lists)
}
@ -108,13 +108,22 @@ const overwriteUserList = (lists: LX.List.UserListInfo[]) => {
export const listDataOverwrite = ({ defaultList, loveList, userList, tempList }: MakeOptional<LX.List.ListDataFull, 'tempList'>): string[] => {
const updatedListIds: string[] = []
overwriteUserList(userList.map(({ list, ...listInfo }) => {
const newUserIds: string[] = []
const newUserListInfos = userList.map(({ list, ...listInfo }) => {
newUserIds.push(listInfo.id)
if (allMusicList.has(listInfo.id)) {
overwriteMusicList(listInfo.id, list)
updatedListIds.push(listInfo.id)
}
return listInfo
}))
})
for (const list of userLists) {
if (!allMusicList.has(list.id)) continue
removeMusicList(list.id)
updatedListIds.push(list.id)
}
overwriteUserList(newUserListInfos)
if (allMusicList.has(LIST_IDS.DEFAULT)) {
overwriteMusicList(LIST_IDS.DEFAULT, defaultList)
updatedListIds.push(LIST_IDS.DEFAULT)
@ -130,8 +139,8 @@ export const listDataOverwrite = ({ defaultList, loveList, userList, tempList }:
}
const newIds = [LIST_IDS.DEFAULT, LIST_IDS.LOVE, ...userList.map(l => l.id)]
if (tempList) newIds.push(LIST_IDS.TEMP)
overwriteListPosition(newIds)
overwriteListUpdateInfo(newIds)
void overwriteListPosition(newIds)
void overwriteListUpdateInfo(newIds)
return updatedListIds
}
@ -158,10 +167,10 @@ export const userListsRemove = (ids: string[]) => {
const changedIds = []
for (const id of ids) {
removeUserList(id)
if (!allMusicList.has(id)) continue
removeMusicList(id)
removeListPosition(id)
removeListUpdateInfo(id)
if (!allMusicList.has(id)) continue
removeMusicList(id)
changedIds.push(id)
}

4
src/renderer/store/list/listManage/rendererListManage.ts
View File

@ -235,7 +235,7 @@ export const registerListAction = (appSetting: LX.AppSetting, onListChanged: (li
rendererOn(PLAYER_EVENT_NAME.list_music_update, list_music_update)
rendererOn(PLAYER_EVENT_NAME.list_music_update_position, list_music_update_position)
rendererOn(PLAYER_EVENT_NAME.list_music_overwrite, list_music_overwrite)
rendererOn(PLAYER_EVENT_NAME.list_data_overwire, list_music_clear)
rendererOn(PLAYER_EVENT_NAME.list_music_clear, list_music_clear)
return () => {
rendererOff(PLAYER_EVENT_NAME.list_data_overwire, list_data_overwrite)
@ -249,6 +249,6 @@ export const registerListAction = (appSetting: LX.AppSetting, onListChanged: (li
rendererOff(PLAYER_EVENT_NAME.list_music_update, list_music_update)
rendererOff(PLAYER_EVENT_NAME.list_music_update_position, list_music_update_position)
rendererOff(PLAYER_EVENT_NAME.list_music_overwrite, list_music_overwrite)
rendererOff(PLAYER_EVENT_NAME.list_data_overwire, list_music_clear)
rendererOff(PLAYER_EVENT_NAME.list_music_clear, list_music_clear)
}
}

6
src/renderer/store/utils.ts
View File

@ -5,7 +5,6 @@
// export const getList = (listId: string | null): LX.Download.ListItem[] | LX.Music.MusicInfo[] => {
// return listId == 'download' ? downloadList : getListFromState(listId)
// }
import { commonColorNames, commonDarkColorValues, commonLightColorValues } from '@common/config'
import { encodePath, isUrl } from '@common/utils/common'
import { joinPath } from '@common/utils/nodejs'
import { markRaw, shallowReactive } from '@common/utils/vueTools'
@ -41,11 +40,6 @@ export const buildThemeColors = (theme: LX.Theme, dataPath: string) => {
...theme.config.extInfo,
}
const vals = theme.isDark ? commonDarkColorValues : commonLightColorValues
for (let i = commonColorNames.length; i--;) {
colors[commonColorNames[i]] = vals[i]
}
return colors
}

27
src/renderer/utils/data.ts
View File

@ -43,13 +43,15 @@ const saveViewPrevStateThrottle = throttle((state) => {
saveViewPrevStateFromData(state)
}, 1000)
export const getListPosition = async(id: string): Promise<number> => {
const initPosition = async() => {
if (listPosition == null) listPosition = await getListPositionInfoFromData() ?? {}
}
export const getListPosition = async(id: string): Promise<number> => {
await initPosition()
return listPosition[id] ?? 0
}
export const setListPosition = async(id: string, position?: number) => {
if (listPosition == null) await getListPosition(id)
await initPosition()
listPosition[id] = position ?? 0
saveListPositionThrottle()
}
@ -57,7 +59,8 @@ export const removeListPosition = (id: string) => {
delete listPosition[id]
saveListPositionThrottle()
}
export const overwriteListPosition = (ids: string[]) => {
export const overwriteListPosition = async(ids: string[]) => {
await initPosition()
const removedIds = []
for (const id of Object.keys(listPosition)) {
if (ids.includes(id)) continue
@ -83,29 +86,32 @@ const saveListUpdateInfo = throttle(() => {
saveListUpdateInfoFromData(listUpdateInfo)
}, 1000)
export const getListUpdateInfo = async() => {
const initListUpdateInfo = async() => {
if (listUpdateInfo == null) {
listUpdateInfo = await getListUpdateInfoFromData() ?? {}
for (const [id, info] of Object.entries(listUpdateInfo)) {
setUpdateTime(id, info.updateTime ? dateFormat(info.updateTime) : '')
}
}
}
export const getListUpdateInfo = async() => {
await initListUpdateInfo()
return listUpdateInfo
}
export const setListUpdateInfo = async(info: LX.List.ListUpdateInfo) => {
if (listUpdateInfo == null) await getListUpdateInfo()
await initListUpdateInfo()
listUpdateInfo = info
saveListUpdateInfo()
}
export const setListAutoUpdate = async(id: string, enable: boolean) => {
if (listUpdateInfo == null) await getListUpdateInfo()
await initListUpdateInfo()
const targetInfo = listUpdateInfo[id] ?? { updateTime: 0, isAutoUpdate: false }
targetInfo.isAutoUpdate = enable
listUpdateInfo[id] = targetInfo
saveListUpdateInfo()
}
export const setListUpdateTime = async(id: string, time: number) => {
if (listUpdateInfo == null) await getListUpdateInfo()
await initListUpdateInfo()
const targetInfo = listUpdateInfo[id] ?? { updateTime: 0, isAutoUpdate: false }
targetInfo.updateTime = time
listUpdateInfo[id] = targetInfo
@ -119,9 +125,10 @@ export const removeListUpdateInfo = (id: string) => {
delete listUpdateInfo[id]
saveListUpdateInfo()
}
export const overwriteListUpdateInfo = (ids: string[]) => {
export const overwriteListUpdateInfo = async(ids: string[]) => {
await initListUpdateInfo()
const removedIds = []
for (const id of Object.keys(listPosition)) {
for (const id of Object.keys(listUpdateInfo)) {
if (ids.includes(id)) continue
removedIds.push(id)
}

28
src/renderer/views/Setting/components/SettingBackup.vue
View File

@ -37,7 +37,7 @@ import {
import { dialog } from '@renderer/plugins/Dialog'
import useImportTip from '@renderer/utils/compositions/useImportTip'
import { useI18n } from '@renderer/plugins/i18n'
import { createUserList, getListMusics, overwriteListMusics } from '@renderer/store/list/action'
import { getListMusics, overwriteListFull, overwriteListMusics } from '@renderer/store/list/action'
import { LIST_IDS } from '@common/constants'
import { defaultList, loveList, userLists } from '@renderer/store/list/state'
import { appSetting, updateSetting } from '@renderer/store/setting'
@ -67,12 +67,14 @@ export default {
}
const importOldListData = async(lists) => {
for await (const list of lists) {
const allLists = await getAllLists()
for (const list of lists) {
try {
if (userLists.some(l => l.id == list.id) || list.id == LIST_IDS.DEFAULT || list.id == LIST_IDS.LOVE) {
await overwriteListMusics({ listId: list.id, musicInfos: list.list.map(m => toNewMusicInfo(m)) })
const targetList = allLists.find(l => l.id == list.id)
if (targetList) {
targetList.list = list.list.map(m => toNewMusicInfo(m))
} else {
await createUserList({
allLists.push({
name: list.name,
id: list.id,
list: list.list.map(m => toNewMusicInfo(m)),
@ -85,14 +87,19 @@ export default {
console.log(err)
}
}
const defaultList = allLists.shift().list
const loveList = allLists.shift().list
await overwriteListFull({ defaultList, loveList, userList: allLists })
}
const importNewListData = async(lists) => {
for await (const list of lists) {
const allLists = await getAllLists()
for (const list of lists) {
try {
if (userLists.some(l => l.id == list.id) || list.id == LIST_IDS.DEFAULT || list.id == LIST_IDS.LOVE) {
await overwriteListMusics({ listId: list.id, musicInfos: list.list.map(m => fixNewMusicInfoQuality(m)) })
const targetList = allLists.find(l => l.id == list.id)
if (targetList) {
targetList.list = list.list.map(m => fixNewMusicInfoQuality(m))
} else {
await createUserList({
allLists.push({
name: list.name,
id: list.id,
list: list.list.map(m => fixNewMusicInfoQuality(m)),
@ -105,6 +112,9 @@ export default {
console.log(err)
}
}
const defaultList = allLists.shift().list
const loveList = allLists.shift().list
await overwriteListFull({ defaultList, loveList, userList: allLists })
}
const importOldSettingData = (setting) => {
console.log(setting)

40
src/renderer/views/Setting/components/ThemeEditModal/index.vue
View File

@ -9,6 +9,10 @@
<div ref="primary_color_ref" :class="$style.color" />
<div :class="$style.label">{{ $t('theme_edit_modal__primary') }}</div>
</div>
<div :class="$style.item">
<div ref="font_color_ref" :class="$style.color" />
<div :class="$style.label">{{ $t('theme_edit_modal__font') }}</div>
</div>
<div :class="$style.item">
<div ref="app_bg_color_ref" :class="$style.color" />
<div :class="$style.label">{{ $t('theme_edit_modal__app_bg') }}</div>
@ -124,7 +128,8 @@ import { isUrl, encodePath } from '@common/utils/common'
// import { appSetting, updateSetting } from '@renderer/store/setting'
// import { applyTheme, getThemes } from '@renderer/store/utils'
import { createThemeColors } from '@common/theme/utils'
import useMainCoolor from './useMainCoolor'
import useMainColor from './useMainColor'
import useFontColor from './useFontColor'
import useAppBgColor from './useAppBgColor'
import useMainBgColor from './useMainBgColor'
import useAsideFontColor from './useAsideFontColor'
@ -191,7 +196,8 @@ export default {
// '--color-badge-primary': string
// '--color-badge-secondary': string
// '--color-badge-tertiary': string
const { primary_color_ref, initMainColor, destroyMainColor } = useMainCoolor()
const { primary_color_ref, initMainColor, destroyMainColor } = useMainColor()
const { font_color_ref, initFontColor, destroyFontColor } = useFontColor()
const { app_bg_color_ref, initAppBgColor, destroyAppBgColor, setAppBgColor } = useAppBgColor()
const { aside_font_color_ref, initAsideFontColor, destroyAsideFontColor, setAsideFontColor } = useAsideFontColor()
const { main_bg_color_ref, initMainBgColor, destroyMainBgColor, setMainBgColor } = useMainBgColor()
@ -221,8 +227,8 @@ export default {
let hideBtnColorOrigin
let hideBtnColor
const applyPrimaryColor = (color, isDark) => {
theme.config.themeColors = createThemeColors(color, isDark)
const applyPrimaryColor = (color, fontColor, isDark) => {
theme.config.themeColors = createThemeColors(color, fontColor, isDark)
if (theme.config.extInfo['--color-app-background'].startsWith('var')) setAppBgColor(getColor(appBgColorOrigin, theme))
if (theme.config.extInfo['--color-nav-font'].startsWith('var')) setAsideFontColor(getColor(asideFontColorOrigin, theme))
if (theme.config.extInfo['--color-main-background'].startsWith('var')) setMainBgColor(getColor(mainBgColorOrigin, theme))
@ -273,8 +279,10 @@ export default {
hideBtnColor = getColor(hideBtnColorOrigin, theme)
initMainColor(theme.config.themeColors['--color-primary'], (color) => {
// console.log(color)
applyPrimaryColor(color, theme.isDark)
applyPrimaryColor(color, theme.config.themeColors['--color-1000'], theme.isDark)
})
initFontColor(theme.config.themeColors['--color-1000'] ?? (isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'), (color) => {
applyPrimaryColor(theme.config.themeColors['--color-primary'], color, theme.isDark)
})
initAppBgColor(appBgColor, (color) => {
// console.log('appBgColor', color)
@ -318,6 +326,7 @@ export default {
}
const destroyColors = () => {
destroyMainColor()
destroyFontColor()
destroyAppBgColor()
destroyAsideFontColor()
destroyMainBgColor()
@ -393,7 +402,7 @@ export default {
}
const handleDark = (val) => {
theme.isDark = val
applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.isDark)
applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.config.themeColors['--color-1000'], theme.isDark)
}
/**
* 预览主题
@ -507,6 +516,7 @@ export default {
removeBgImg,
primary_color_ref,
font_color_ref,
app_bg_color_ref,
main_bg_color_ref,
aside_font_color_ref,
@ -552,7 +562,7 @@ export default {
}
.content {
flex: auto;
padding: 15px 0;
// padding: 15px 0;
font-size: 14px;
gap: 5px;
display: flex;
@ -562,7 +572,7 @@ export default {
}
.groupTitle {
padding: 20px;
padding: 20px 20px 0;
display: flex;
flex-flow: row wrap;
@ -575,7 +585,7 @@ export default {
flex-flow: row wrap;
}
.item {
padding: 0 20px;
padding: 15px 20px 0;
width: 60px;
display: flex;
flex-flow: column nowrap;
@ -607,11 +617,11 @@ export default {
}
.bg {
width: 0;
flex: 1 1 auto;
// width: 180px;
min-width: 60px;
max-width: 200px;
// width: 0;
// flex: 1 1 auto;
width: 150px;
// min-width: 60px;
// max-width: 200px;
}
.bgImg {
width: 100%;

26
src/renderer/views/Setting/components/ThemeEditModal/useFontColor.ts Normal file
View File

@ -0,0 +1,26 @@
import { ref } from '@common/utils/vueTools'
import { pickrTools, PickrTools } from '@renderer/utils/pickrTools'
export default () => {
const font_color_ref = ref(null)
let tools: PickrTools | null
const initFontColor = (color: string, changed: (color: string) => void) => {
if (!font_color_ref.value) return
tools = pickrTools.create(font_color_ref.value, color, [
'rgba(33, 33, 33, 1)',
'rgba(229, 229, 229, 1)',
], changed, () => {})
}
const destroyFontColor = () => {
if (!tools) return
tools.destroy()
tools = null
}
return {
font_color_ref,
initFontColor,
destroyFontColor,
}
}

0
src/renderer/views/Setting/components/ThemeEditModal/useMainCoolor.ts → src/renderer/views/Setting/components/ThemeEditModal/useMainColor.ts
View File

6
src/renderer/views/Setting/index.vue
View File

@ -59,7 +59,7 @@ import SettingDesktopLyric from './components/SettingDesktopLyric'
import SettingSearch from './components/SettingSearch'
import SettingList from './components/SettingList'
import SettingDownload from './components/SettingDownload'
// import SettingSync from './components/SettingSync'
import SettingSync from './components/SettingSync'
import SettingHotKey from './components/SettingHotKey'
import SettingNetwork from './components/SettingNetwork'
import SettingOdc from './components/SettingOdc'
@ -78,7 +78,7 @@ export default {
SettingSearch,
SettingList,
SettingDownload,
// SettingSync,
SettingSync,
SettingHotKey,
SettingNetwork,
SettingOdc,
@ -102,7 +102,7 @@ export default {
{ id: 'SettingSearch', title: t('setting__search') },
{ id: 'SettingList', title: t('setting__list') },
{ id: 'SettingDownload', title: t('setting__download') },
// { id: 'SettingSync', title: t('setting__sync') },
{ id: 'SettingSync', title: t('setting__sync') },
{ id: 'SettingHotKey', title: t('setting__hot_key') },
{ id: 'SettingNetwork', title: t('setting__network') },
{ id: 'SettingOdc', title: t('setting__odc') },