ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

添加主题字体颜色设置

Browse Source
This commit is contained in:
lyswhut
2022-12-30 12:12:09 +08:00
parent a7c2857808
commit 6ff1d683a5
33 changed files with 628 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/Setting/components/SettingBackup.vue
+19 -9
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)
src/renderer/views/Setting/components/ThemeEditModal/index.vue
+25 -15
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%;
src/renderer/views/Setting/components/ThemeEditModal/useFontColor.ts
+26
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,
}
}
src/renderer/views/Setting/components/ThemeEditModal/useMainCoolor.ts → src/renderer/views/Setting/components/ThemeEditModal/useMainColor.ts
View File
src/renderer/views/Setting/index.vue
+3 -3
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') },