更新软件默认使用的字体

publish/changeLog.md

@@ -12,6 +12,7 @@
 - Scheme URL 的播放歌曲允许更长的专辑名称
 - 播放本地歌曲时，将优先尝试读取本地同名字的 `jpg` 或 `png` 图片作为播放封面显示，若文件不存在则从音频文件内读取，最后再尝试使用在线图片（#2096）
 - 客户端模式的同步服务连接允许重定向 5 次（#2109）
+- 更新软件默认使用的字体，修复 MacOS 15 下界面出现乱码的问题（#2076）
 
 ### 修复
 
@@ -21,7 +22,8 @@
 
 ### 变更
 
-- 不再缓存换源歌曲信息
+- 不再长期缓存换源歌曲信息
+- 更新软件默认使用的字体，现在软件尽量使用系统自带的默认字体
 
 ### 其他
 

src/common/utils/index.ts

@@ -6,6 +6,14 @@ export const isWin = process.platform == 'win32'
 export const isMac = process.platform == 'darwin'
 export const isProd = process.env.NODE_ENV == 'production'
 
+export const getPlatform = (platform: NodeJS.Platform = process.platform) => {
+  switch (platform) {
+    case 'win32': return 'windows'
+    case 'darwin': return 'mac'
+    default: return 'linux'
+  }
+}
+
 
 // https://stackoverflow.com/a/53387532
 export function compareVer(currentVer: string, targetVer: string): -1 | 0 | 1 {

src/main/modules/winLyric/main.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import { BrowserWindow } from 'electron'
-import { debounce, isLinux, isWin } from '@common/utils'
+import { debounce, getPlatform, isLinux, isWin } from '@common/utils'
 import { initWindowSize } from './utils'
 import { mainSend } from '@common/mainIpc'
 import { encodePath } from '@common/utils/electron'
@@ -141,7 +141,7 @@ export const createWindow = () => {
   })
 
   const winURL = process.env.NODE_ENV !== 'production' ? 'http://localhost:9081/lyric.html' : `file://${path.join(encodePath(__dirname), 'lyric.html')}`
-  void browserWindow.loadURL(winURL + `?dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
+  void browserWindow.loadURL(winURL + `?os=${getPlatform()}&dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
 
   winEvent()
   // browserWindow.webContents.openDevTools()

src/main/modules/winMain/main.ts

@@ -1,7 +1,7 @@
 import { BrowserWindow, dialog, session } from 'electron'
 import path from 'node:path'
 import { createTaskBarButtons, getWindowSizeInfo } from './utils'
-import { isLinux, isWin } from '@common/utils'
+import { getPlatform, isLinux, isWin } from '@common/utils'
 import { getProxy, openDevTools as handleOpenDevTools } from '@main/utils'
 import { mainSend } from '@common/mainIpc'
 import { sendFocus, sendTaskbarButtonClick } from './rendererEvent'
@@ -109,7 +109,7 @@ export const createWindow = () => {
   browserWindow = new BrowserWindow(options)
 
   const winURL = process.env.NODE_ENV !== 'production' ? 'http://localhost:9080' : `file://${path.join(encodePath(__dirname), 'index.html')}`
-  void browserWindow.loadURL(winURL + `?dt=${!!global.envParams.cmdParams.dt}&dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
+  void browserWindow.loadURL(winURL + `?os=${getPlatform()}&dt=${!!global.envParams.cmdParams.dt}&dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
 
   winEvent()
 

src/renderer-lyric/App.vue

@@ -30,11 +30,12 @@ import useHoverHide from '@lyric/useApp/useHoverHide'
 import { onMounted } from '@common/utils/vueTools'
 import { setting } from '@lyric/store/state'
 import { sendConnectMainWindowEvent } from '@lyric/utils/ipc'
+import useCommon from '@lyric/useApp/useCommon'
 import useLyric from '@lyric/useApp/useLyric'
 import useTheme from '@lyric/useApp/useTheme'
 import { init as initLyricPlayer } from '@lyric/core/lyric'
 
-
+useCommon()
 const { handleMouseDown, handleTouchDown } = useWindowSize()
 const { handleMouseMoveMain, isHoverHide, isMouseEnter } = useHoverHide()
 useLyric()

src/renderer-lyric/assets/styles/reset.less

@@ -1,3 +1,26 @@
+// https://github.com/microsoft/vscode/blob/2dd0bca3954d4c03c427d6b447205b68817bd000/src/vs/workbench/browser/media/style.css
+/* Font Families (with CJK support) */
+
+.windows { font-family: "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hans) { font-family:"Microsoft YaHei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hant) { font-family:"Microsoft Jhenghei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ja) { font-family:"Yu Gothic UI", "Meiryo UI", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ko) { font-family:"Malgun Gothic", "Dotom", "Segoe WPC", "Segoe UI", sans-serif; }
+
+.mac { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.mac:lang(zh-Hans) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; }
+.mac:lang(zh-Hant) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; }
+.mac:lang(ja) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; }
+.mac:lang(ko) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; }
+
+/* Linux: add `system-ui` as first font and not `Ubuntu` to allow other distribution pick their standard OS font */
+.linux { font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; }
+.linux:lang(zh-Hans) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; }
+.linux:lang(zh-Hant) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; }
+.linux:lang(ja) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; }
+.linux:lang(ko) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
+
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -16,16 +39,20 @@ time, mark, audio, video {
 	border: 0;
 	font-size: 100%;
 	font: inherit;
+  font-size: inherit;
 	vertical-align: baseline;
 }
+input, button, textarea {
+	font-family: inherit;
+}
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-html {
-  font-family: "Microsoft YaHei", "Microsoft Jhenghei", "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", sans-serif;
+  display: block;
 }
+// html {
+// }
 body {
 	line-height: 1.2;
 }
@@ -44,6 +71,3 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-button {
-  font-family: inherit;
-}

src/renderer-lyric/index.html

@@ -8,6 +8,16 @@
   <body id="body" style="background-color: transparent;">
     <div id="root"></div>
     <script>
+      const formatLang = (lang = 'en') => {
+        if (lang === 'zh-cn') return 'zh-Hans'
+        if (lang === 'zh-tw') return 'zh-Hant'
+        return lang.split('-')[0]
+      }
+      window.setLang = (lang = navigator.language.toLocaleLowerCase()) => {
+        document.documentElement.setAttribute('lang', formatLang(lang))
+      }
+      window.setLang()
+      document.documentElement.classList.add(/os=(\w+)/.exec(window.location.search)[1])
       window.dom_style_theme = document.createElement('style')
       window.dom_style_lyric = document.createElement('style')
 

src/renderer-lyric/main.ts

@@ -17,7 +17,10 @@ void getSetting().then((setting) => {
   // window.lx.appSetting = setting
   // Set language automatically
   const languageId = setting['common.langId']
-  if (window.i18n.locale !== languageId && languageId != null) window.i18n.setLanguage(languageId)
+  if (window.i18n.locale !== languageId && languageId != null) {
+    window.i18n.setLanguage(languageId)
+    window.setLang(languageId)
+  }
 
   // store.commit('setSetting', setting)
   initSetting(setting)

src/renderer-lyric/types/app.d.ts

@@ -9,6 +9,7 @@ declare global {
     lxData: any
 
     setTheme: (colors: Record<string, string>) => void
+    setLang: (lang?: string) => void
     setLyricColor: (colors: Record<string, string>) => void
   }
 

src/renderer-lyric/useApp/useCommon.ts

@@ -0,0 +1,10 @@
+import { watch } from '@common/utils/vueTools'
+import { setting } from '@lyric/store/state'
+
+export default () => {
+  watch(() => setting['common.langId'], (id) => {
+    if (!id) return
+    window.i18n.setLanguage(id)
+    window.setLang(id)
+  })
+}

src/renderer/assets/styles/reset.less

@@ -1,3 +1,26 @@
+// https://github.com/microsoft/vscode/blob/2dd0bca3954d4c03c427d6b447205b68817bd000/src/vs/workbench/browser/media/style.css
+/* Font Families (with CJK support) */
+
+.windows { font-family: "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hans) { font-family:"Microsoft YaHei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hant) { font-family:"Microsoft Jhenghei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ja) { font-family:"Yu Gothic UI", "Meiryo UI", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ko) { font-family:"Malgun Gothic", "Dotom", "Segoe WPC", "Segoe UI", sans-serif; }
+
+.mac { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.mac:lang(zh-Hans) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; }
+.mac:lang(zh-Hant) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; }
+.mac:lang(ja) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; }
+.mac:lang(ko) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; }
+
+/* Linux: add `system-ui` as first font and not `Ubuntu` to allow other distribution pick their standard OS font */
+.linux { font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; }
+.linux:lang(zh-Hans) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; }
+.linux:lang(zh-Hant) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; }
+.linux:lang(ja) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; }
+.linux:lang(ko) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
+
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -19,12 +42,37 @@ time, mark, audio, video {
   font-size: inherit;
 	vertical-align: baseline;
 }
-input {
+input, button, textarea {
 	font-family: inherit;
 }
-html {
-  font-family: "Microsoft YaHei", "Microsoft Jhenghei", "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", sans-serif;
-}
+// html {
+//   font-family:
+//     // windows
+//     Segoe WPC,Segoe UI,
+//     Microsoft YaHei,
+//     Microsoft Jhenghei,
+//     Yu Gothic UI,Meiryo UI,
+//     Malgun Gothic,Dotom,
+
+//     // mac
+//     -apple-system,BlinkMacSystemFont,
+//     PingFang SC,
+//     PingFang TC,
+//     Hiragino Kaku Gothic Pro,
+//     Apple SD Gothic Neo,
+//     Hiragino Sans GB,Nanum Gothic,AppleGothic,
+
+//     // linux
+//     system-ui,Ubuntu,Droid Sans,
+//     Source Han Sans SC,Source Han Sans CN,
+//     Source Han Sans TC,Source Han Sans TW,
+//     Source Han Sans J,Source Han Sans JP,
+//     Source Han Sans K,Source Han Sans JR,
+//     Source Han Sans,UnDotum,FBaekmuk Gulim,
+
+//     sans-serif;
+// }
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
@@ -50,6 +98,3 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-button {
-  font-family: inherit;
-}

src/renderer/core/music/utils.ts

@@ -58,7 +58,7 @@ export const getOtherSource = async(musicInfo: LX.Music.MusicInfo | LX.Download.
       reject(new Error('find music timeout'))
     }, 15_000)
     musicSdk.findMusic(searchMusicInfo).then((otherSource) => {
-      if (otherSourceCache.size > 100) otherSourceCache.clear()
+      if (otherSourceCache.size > 10) otherSourceCache.clear()
       const source = otherSource.map(toNewMusicInfo) as LX.Music.MusicInfoOnline[]
       otherSourceCache.set(musicInfo, source)
       resolve(source)

src/renderer/core/useApp/useSettingSync.ts

@@ -20,6 +20,7 @@ export default () => {
   watch(() => appSetting['common.langId'], (id) => {
     if (!id) return
     setLanguage(id)
+    window.setLang(id)
   })
 
   watch(() => appSetting['common.apiSource'], apiSource => {

src/renderer/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: transparent;">
+<html style="background-color: transparent;">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,6 +15,16 @@
   <div id="root" style="display: none;">
   </div>
   <script>
+    const formatLang = (lang = 'en') => {
+      if (lang === 'zh-cn') return 'zh-Hans'
+      if (lang === 'zh-tw') return 'zh-Hant'
+      return lang.split('-')[0]
+    }
+    window.setLang = (lang = navigator.language.toLocaleLowerCase()) => {
+      document.documentElement.setAttribute('lang', formatLang(lang))
+    }
+    window.setLang()
+    document.documentElement.classList.add(/os=(\w+)/.exec(window.location.search)[1])
     window.shouldUseDarkColors = /dark=true/.test(window.location.search)
     window.dt = /dt=true/.test(window.location.search)
     document.documentElement.classList.add(window.dt ? 'disableTransparent' : 'transparent')

src/renderer/main.ts

@@ -59,6 +59,7 @@ void getSetting().then(setting => {
     void updateSetting({ 'common.langId': langId })
     console.log('Set lang', setting['common.langId'])
   }
+  window.setLang(setting['common.langId'])
   window.i18n.setLanguage(setting['common.langId'])
 
   if (!setting['common.startInFullscreen'] && (document.body.clientHeight > window.screen.availHeight || document.body.clientWidth > window.screen.availWidth) && setting['common.windowSizeId'] > 1) {

src/renderer/types/app.d.ts

@@ -44,6 +44,7 @@ declare global {
     lxData: any
 
     setTheme: (colors: Record<string, string>) => void
+    setLang: (lang?: string) => void
   }
 
   module NodeJS {