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/assets/styles/index.less
+35 -13
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);
src/renderer/components/layout/PlayBar/FullWidthProgress.vue
+1 -1
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;
}
src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
+1 -1
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;
src/renderer/components/layout/PlayBar/PlayProgress.vue
+1 -1
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;
src/renderer/components/layout/PlayDetail/LyricPlayer.vue
+3 -3
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;
src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue
+2 -2
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;
src/renderer/components/layout/SyncModeModal.vue
+1 -1
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()
}
src/renderer/core/useApp/useSync.ts
+10 -10
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'],
},
})
}
}
}
src/renderer/store/list/listManage/action.ts
+16 -7
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)
}
src/renderer/store/list/listManage/rendererListManage.ts
+2 -2
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)
}
}
src/renderer/store/utils.ts
-6
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
}
src/renderer/utils/data.ts
+17 -10
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)
}
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') },