diff --git a/.eslintrc b/.eslintrc index 24e309d5..98c998c6 100644 --- a/.eslintrc +++ b/.eslintrc @@ -51,6 +51,7 @@ "@typescript-eslint/space-before-function-paren": "off", "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/naming-convention": "off", + "@typescript-eslint/ban-ts-comment": "off", "vue/max-attributes-per-line": "off", "vue/singleline-html-element-content-newline": "off", "vue/use-v-on-exact": "off", @@ -102,6 +103,7 @@ }], "@typescript-eslint/naming-convention": "off", "@typescript-eslint/return-await": "off", + "@typescript-eslint/ban-ts-comment": "off", "multiline-ternary": "off", "@typescript-eslint/comma-dangle": "off", }, diff --git a/publish/changeLog.md b/publish/changeLog.md index 1ad837ec..00f93302 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,3 +1,11 @@ +### 新增 + +- 新增桌面歌词设置字体加粗设置，可以到设置-桌面歌词设置-加粗字体修改 + +### 优化 + +- 微调了桌面歌词逐行字体阴影，使其看起来更匀称 + ### 修复 - 修复播放下载列表的歌曲时，调整歌词偏移时间功能异常的问题 diff --git a/src/common/defaultSetting.ts b/src/common/defaultSetting.ts index 4b057acb..d509ad82 100644 --- a/src/common/defaultSetting.ts +++ b/src/common/defaultSetting.ts @@ -58,7 +58,7 @@ const defaultSetting: LX.AppSetting = { 'desktopLyric.style.align': 'center', 'desktopLyric.style.font': '', 'desktopLyric.style.fontSize': 20, - 'desktopLyric.style.lineGap': 14, + 'desktopLyric.style.lineGap': 15, 'desktopLyric.style.lyricUnplayColor': 'rgba(255, 255, 255, 1)', 'desktopLyric.style.lyricPlayedColor': 'rgba(7, 197, 86, 1)', 'desktopLyric.style.lyricShadowColor': 'rgba(0, 0, 0, 0.15)', @@ -66,6 +66,8 @@ const defaultSetting: LX.AppSetting = { 'desktopLyric.style.opacity': 95, 'desktopLyric.style.ellipsis': false, 'desktopLyric.style.isZoomActiveLrc': true, + 'desktopLyric.style.isFontWeightFont': true, + 'desktopLyric.style.isFontWeightLine': false, 'list.isClickPlayList': false, 'list.isShowSource': true, @@ -117,7 +119,7 @@ const defaultSetting: LX.AppSetting = { // 使用新年皮肤 if (new Date().getMonth() < 2) { defaultSetting['theme.id'] = 'happy_new_year' - defaultSetting['desktopLyric.style.lyricPlayedColor'] = 'rgba(255, 18, 34, 1)' + defaultSetting['desktopLyric.style.lyricPlayedColor'] = 'rgba(255, 57, 71, 1)' } diff --git a/src/common/types/app_setting.d.ts b/src/common/types/app_setting.d.ts index dfddc435..f4d65759 100644 --- a/src/common/types/app_setting.d.ts +++ b/src/common/types/app_setting.d.ts @@ -304,6 +304,16 @@ declare global { */ 'desktopLyric.style.isZoomActiveLrc': boolean + /** + * 是否加粗逐字歌词字体 + */ + 'desktopLyric.style.isFontWeightFont': boolean + + /** + * 是否加粗逐行歌词字体 + */ + 'desktopLyric.style.isFontWeightLine': boolean + /** * 是否启用双击列表里的歌曲时自动切换到当前列表播放（仅对歌单、排行榜有效） */ diff --git a/src/common/types/desktop_lyric.d.ts b/src/common/types/desktop_lyric.d.ts index db670437..dcedaecc 100644 --- a/src/common/types/desktop_lyric.d.ts +++ b/src/common/types/desktop_lyric.d.ts @@ -26,6 +26,8 @@ declare namespace LX { // 'desktopLyric.style.fontWeight': LX.AppSetting['desktopLyric.style.fontWeight'] 'desktopLyric.style.opacity': LX.AppSetting['desktopLyric.style.opacity'] 'desktopLyric.style.ellipsis': LX.AppSetting['desktopLyric.style.ellipsis'] + 'desktopLyric.style.isFontWeightFont': LX.AppSetting['desktopLyric.style.isFontWeightFont'] + 'desktopLyric.style.isFontWeightLine': LX.AppSetting['desktopLyric.style.isFontWeightLine'] 'desktopLyric.style.isZoomActiveLrc': LX.AppSetting['desktopLyric.style.isZoomActiveLrc'] 'common.langId': LX.AppSetting['common.langId'] 'player.isShowLyricTranslation': LX.AppSetting['player.isShowLyricTranslation'] diff --git a/src/lang/en-us.json b/src/lang/en-us.json index b864b0c5..f3deaffa 100644 --- a/src/lang/en-us.json +++ b/src/lang/en-us.json @@ -446,6 +446,8 @@ "setting__search_focus_search_box": "Automatically focus the search box on startup", "setting__search_history": "Search history", "setting__search_hot": "Top Searches", + "setting__setting__desktop_lyric_font_weight_font": "verbatim lyrics", + "setting__setting__desktop_lyric_font_weight_line": "progressive lyrics", "setting__sync": "Data synchronization", "setting__sync_address": "Synchronization service address: {address}", "setting__sync_auth_code": "Connection code: {code}", diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json index 8399a507..9ab030c6 100644 --- a/src/lang/zh-cn.json +++ b/src/lang/zh-cn.json @@ -448,6 +448,8 @@ "setting__search_focus_search_box": "启动时自动聚焦搜索框", "setting__search_history": "显示历史搜索记录", "setting__search_hot": "显示热门搜索", + "setting__setting__desktop_lyric_font_weight_font": "逐字歌词", + "setting__setting__desktop_lyric_font_weight_line": "逐行歌词", "setting__sync": "数据同步", "setting__sync_address": "同步服务地址：{address}", "setting__sync_auth_code": "连接码：{code}", diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json index 3a3dd3c4..32a8ed00 100644 --- a/src/lang/zh-tw.json +++ b/src/lang/zh-tw.json @@ -447,6 +447,8 @@ "setting__search_focus_search_box": "啟動時自動聚焦搜索框", "setting__search_history": "顯示歷史搜索記錄", "setting__search_hot": "顯示熱門搜索", + "setting__setting__desktop_lyric_font_weight_font": "逐字歌詞", + "setting__setting__desktop_lyric_font_weight_line": "逐行歌詞", "setting__sync": "數據同步", "setting__sync_address": "同步服務地址：{address}", "setting__sync_auth_code": "連接碼：{code}", diff --git a/src/main/modules/winLyric/utils.ts b/src/main/modules/winLyric/utils.ts index 43e43751..8d51aca8 100644 --- a/src/main/modules/winLyric/utils.ts +++ b/src/main/modules/winLyric/utils.ts @@ -76,6 +76,8 @@ export const watchConfigKeys = [ // 'desktopLyric.style.fontWeight', 'desktopLyric.style.opacity', 'desktopLyric.style.ellipsis', + 'desktopLyric.style.isFontWeightFont', + 'desktopLyric.style.isFontWeightLine', 'desktopLyric.style.isZoomActiveLrc', 'common.langId', 'player.isShowLyricTranslation', diff --git a/src/renderer-lyric/assets/styles/layout.less b/src/renderer-lyric/assets/styles/layout.less index 38d25cec..9c631693 100644 --- a/src/renderer-lyric/assets/styles/layout.less +++ b/src/renderer-lyric/assets/styles/layout.less @@ -48,18 +48,156 @@ text-shadow+: 0 0 0 @color; } +.stroke4(@color) { + text-shadow: + 0.02em -0.02em 0 var(--color-lyric-shadow), + // -0.02em 0.02em 0 var(--color-lyric-shadow), + // 0.02em 0.02em 0 var(--color-lyric-shadow), + // 0.02em -0.02em 0 var(--color-lyric-shadow), + -0.02em -1px 0 var(--color-lyric-shadow), + -0.02em 1px 0 var(--color-lyric-shadow), + 0.02em 1px 0 var(--color-lyric-shadow), + 0.02em -1px 0 var(--color-lyric-shadow), + -0.02em 0px 0 var(--color-lyric-shadow), + -0.02em 0px 0 var(--color-lyric-shadow), + 0.02em 0px 0 var(--color-lyric-shadow), + 0.02em 0px 0 var(--color-lyric-shadow), + // -1px -0.02em 0 var(--color-lyric-shadow), + // -1px 0.02em 0 var(--color-lyric-shadow), + // 1px 0.02em 0 var(--color-lyric-shadow), + // 1px -0.02em 0 var(--color-lyric-shadow), + -1px -1px 0 var(--color-lyric-shadow), + -1px 1px 0 var(--color-lyric-shadow), + 1px 1px 0 var(--color-lyric-shadow), + 1px -1px 0 var(--color-lyric-shadow), + -1px 0px 0 var(--color-lyric-shadow), + -1px 0px 0 var(--color-lyric-shadow), + 1px 0px 0 var(--color-lyric-shadow), + 1px 0px 0 var(--color-lyric-shadow) + // 0px -0.02em 0 var(--color-lyric-shadow), + // 0px 0.02em 0 var(--color-lyric-shadow), + // 0px 0.02em 0 var(--color-lyric-shadow), + // 0px -0.02em 0 var(--color-lyric-shadow), + // 0px -1px 0 var(--color-lyric-shadow), + // 0px 1px 0 var(--color-lyric-shadow), + // 0px 1px 0 var(--color-lyric-shadow), + // 0px -1px 0 var(--color-lyric-shadow) + ; + // text-shadow: + // -0.04em -0.04em 0 var(--color-lyric-shadow), + // // -0.04em 0.04em 0 var(--color-lyric-shadow), + // 0.04em 0.04em 0 var(--color-lyric-shadow), + // 0.04em -0.04em 0 var(--color-lyric-shadow), + // -0.04em 0px 0 var(--color-lyric-shadow), + // -0.04em 0px 0 var(--color-lyric-shadow), + // 0.04em 0px 0 var(--color-lyric-shadow), + // 0.04em 0px 0 var(--color-lyric-shadow), + // // 0px -0.03em 0 var(--color-lyric-shadow), + // 0px 0.04em 0 var(--color-lyric-shadow), + // // 0px 0.03em 0 var(--color-lyric-shadow), + // 0px -0.04em 0 var(--color-lyric-shadow); + + // @maxi: 2 + 1; + // .i-loop (@i) when (@i > 0) { + // @maxj: 2 + 1; + // .j-loop (@j) when (@j > 0) { + // text-shadow+: (@i - 1)*(-1px) (@j - 1)*(-1px) 0 @color; + // text-shadow+: (@i - 1)*(-1px) (@j - 1)*(1px) 0 @color; + // text-shadow+: (@i - 1)*(1px) (@j - 1)*(1px) 0 @color; + // text-shadow+: (@i - 1)*(1px) (@j - 1)*(-1px) 0 @color; + // .j-loop(@j - 1); + // } + // .j-loop (0) {} + // .j-loop(@maxj); + // .i-loop(@i - 1); + // } + // .i-loop (0) {} + // .i-loop(@maxi); + // text-shadow+: 0 0 0 @color; +} + +.stroke3(@color) { + text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode), + 0.04em -0.03em 0 var(--color-lyric-shadow-font-mode), + -0.04em -0.03em 0 var(--color-lyric-shadow-font-mode), + -0.04em 0.04em 0 var(--color-lyric-shadow-font-mode), + 0.04em 0.01em 0 var(--color-lyric-shadow-font-mode), + 0.04em -0.01em 0 var(--color-lyric-shadow-font-mode), + -0.04em -0.01em 0 var(--color-lyric-shadow-font-mode), + -0.04em 0.01em 0 var(--color-lyric-shadow-font-mode), + 0.04em 0px 0 var(--color-lyric-shadow-font-mode), + 0.04em 0px 0 var(--color-lyric-shadow-font-mode), + -0.04em 0px 0 var(--color-lyric-shadow-font-mode), + -0.04em 0px 0 var(--color-lyric-shadow-font-mode), + 0.01em 0.04em 0 var(--color-lyric-shadow-font-mode), + 0.01em -0.03em 0 var(--color-lyric-shadow-font-mode), + -0.01em -0.03em 0 var(--color-lyric-shadow-font-mode), + -0.01em 0.04em 0 var(--color-lyric-shadow-font-mode), + 0.01em 0.01em 0 var(--color-lyric-shadow-font-mode), + 0.01em -0.01em 0 var(--color-lyric-shadow-font-mode), + -0.01em -0.01em 0 var(--color-lyric-shadow-font-mode), + -0.01em 0.01em 0 var(--color-lyric-shadow-font-mode), + 0.01em 0px 0 var(--color-lyric-shadow-font-mode), + 0.01em 0px 0 var(--color-lyric-shadow-font-mode), + -0.01em 0px 0 var(--color-lyric-shadow-font-mode), + -0.01em 0px 0 var(--color-lyric-shadow-font-mode), + 0px 0.04em 0 var(--color-lyric-shadow-font-mode), + 0px -0.03em 0 var(--color-lyric-shadow-font-mode), + 0px -0.03em 0 var(--color-lyric-shadow-font-mode), + 0px 0.04em 0 var(--color-lyric-shadow-font-mode), + 0px 0.01em 0 var(--color-lyric-shadow-font-mode), + 0px -0.01em 0 var(--color-lyric-shadow-font-mode), + 0px -0.01em 0 var(--color-lyric-shadow-font-mode), + 0px 0.01em 0 var(--color-lyric-shadow-font-mode); + // text-shadow: 0.04em 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0.04em -0.03em 0 var(--color-lyric-shadow-font-mode), + // -0.04em -0.03em 0 var(--color-lyric-shadow-font-mode), + // -0.04em 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0.04em 0.01em 0 var(--color-lyric-shadow-font-mode), + // 0.04em -0.02em 0 var(--color-lyric-shadow-font-mode), + // -0.04em -0.02em 0 var(--color-lyric-shadow-font-mode), + // -0.04em 0.01em 0 var(--color-lyric-shadow-font-mode), + // 0.04em 0px 0 var(--color-lyric-shadow-font-mode), + // 0.04em 0px 0 var(--color-lyric-shadow-font-mode), + // -0.04em 0px 0 var(--color-lyric-shadow-font-mode), + // -0.04em 0px 0 var(--color-lyric-shadow-font-mode), + // 0.01em 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0.01em -0.03em 0 var(--color-lyric-shadow-font-mode), + // -0.02em -0.03em 0 var(--color-lyric-shadow-font-mode), + // -0.02em 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0.01em 0.01em 0 var(--color-lyric-shadow-font-mode), + // 0.01em -0.02em 0 var(--color-lyric-shadow-font-mode), + // -0.02em -0.02em 0 var(--color-lyric-shadow-font-mode), + // -0.02em 0.01em 0 var(--color-lyric-shadow-font-mode), + // 0.01em 0px 0 var(--color-lyric-shadow-font-mode), + // 0.01em 0px 0 var(--color-lyric-shadow-font-mode), + // -0.02em 0px 0 var(--color-lyric-shadow-font-mode), + // -0.02em 0px 0 var(--color-lyric-shadow-font-mode), + // 0px 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0px -0.03em 0 var(--color-lyric-shadow-font-mode), + // 0px -0.03em 0 var(--color-lyric-shadow-font-mode), + // 0px 0.04em 0 var(--color-lyric-shadow-font-mode), + // 0px 0.01em 0 var(--color-lyric-shadow-font-mode), + // 0px -0.02em 0 var(--color-lyric-shadow-font-mode), + // 0px -0.02em 0 var(--color-lyric-shadow-font-mode), + // 0px 0.01em 0 var(--color-lyric-shadow-font-mode); +} + .stroke2(@color) { text-shadow: 2px 0 @color, -2px 0 @color, 0 2px @color, 0 -2px @color, 1px 1px @color, -1px -1px @color, 1px -1px @color, -1px 1px @color; } // .stroke2(@color) { -// text-shadow: -// -1px -1px 0px @color, -// 0px -1px 0px @color, -// 1px -1px 0px @color, -// -1px 0px 0px @color, -// 1px 0px 0px @color, -// -1px 1px 0px @color, -// 0px 1px 0px @color, -// 1px 1px 0px @color; +// // text-shadow: 1px 1px 2px @color; +// // text-shadow: +// // -1px -1px 0px @color, +// // 0px -1px 0px @color, +// // 1px -1px 0px @color, +// // -1px 0px 0px @color, +// // 1px 0px 0px @color, +// // -1px 1px 0px @color, +// // 0px 1px 0px @color, +// // 1px 1px 0px @color; +// // -webkit-text-stroke: 0.03em black; +// // -webkit-text-fill-color: @color; // } diff --git a/src/renderer-lyric/components/layout/LyricHorizontal/index.vue b/src/renderer-lyric/components/layout/LyricHorizontal/index.vue index 55e2c6e6..de90a834 100644 --- a/src/renderer-lyric/components/layout/LyricHorizontal/index.vue +++ b/src/renderer-lyric/components/layout/LyricHorizontal/index.vue @@ -1,7 +1,7 @@