新增桌面歌词字体设置

build-config/main/webpack.config.base.js

@@ -29,11 +29,10 @@ module.exports = {
         exclude: /node_modules/,
         enforce: 'pre',
       },
-      // {
+      {
-      //   test: /\.js$/,
+        test: /\.node$/,
-      //   loader: 'babel-loader',
+        use: 'node-loader',
-      //   exclude: /node_modules/,
+      },
-      // },
     ],
   },
   performance: {

build-config/main/webpack.config.prod.js

@@ -15,6 +15,7 @@ module.exports = merge(baseConfig, {
   },
   externals: [
     ...Object.keys(dependencies || {}),
+    // 'font-list',
   ],
   node: {
     __dirname: false,

build-config/renderer-lyric/webpack.config.base.js

@@ -44,6 +44,10 @@ module.exports = {
         exclude: /node_modules/,
         enforce: 'pre',
       },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

build-config/renderer/webpack.config.base.js

@@ -44,6 +44,10 @@ module.exports = {
         exclude: /node_modules/,
         enforce: 'pre',
       },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

package-lock.json

@@ -8740,6 +8740,10 @@
       "integrity": "sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA==",
       "dev": true
     },
+    "font-list": {
+      "version": "git+https://github.com/lyswhut/node-font-list.git#c6caf4060e471afe143a4aca30d554644522966d",
+      "from": "git+https://github.com/lyswhut/node-font-list.git#c6caf4060e471afe143a4aca30d554644522966d"
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -11212,6 +11216,28 @@
         }
       }
     },
+    "node-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/node-loader/-/node-loader-2.0.0.tgz",
+      "integrity": "sha512-I5VN34NO4/5UYJaUBtkrODPWxbobrE4hgDqPrjB25yPkonFhCmZ146vTH+Zg417E9Iwoh1l/MbRs1apc5J295Q==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "node-releases": {
       "version": "1.1.75",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",

package.json

@@ -83,6 +83,9 @@
     "files": [
       "dist/electron/**/*"
     ],
+    "asar": {
+      "smartUnpack": false
+    },
     "extraResources": [
       "./licenses"
     ],
@@ -205,6 +208,7 @@
     "less-plugin-clean-css": "^1.5.1",
     "markdown-it": "^12.2.0",
     "mini-css-extract-plugin": "^2.2.0",
+    "node-loader": "^2.0.0",
     "postcss": "^8.3.6",
     "postcss-loader": "^6.1.1",
     "postcss-pxtorem": "^6.0.0",
@@ -227,12 +231,13 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "crypto-js": "^4.1.1",
-    "electron-log": "^4.4.1",
     "bufferutil": "^4.0.3",
+    "crypto-js": "^4.1.1",
     "eiows": "^3.6.1",
+    "electron-log": "^4.4.1",
     "electron-store": "^8.0.0",
     "electron-updater": "^4.3.9",
+    "font-list": "git+https://github.com/lyswhut/node-font-list.git#c6caf4060e471afe143a4aca30d554644522966d",
     "http-terminator": "^3.0.0",
     "iconv-lite": "^0.6.3",
     "image-size": "^1.0.0",

publish/changeLog.md

@@ -5,6 +5,7 @@
 
 - 歌曲搜索框新增清理按钮，点击此按钮可以清理搜索框并返回初始搜索界面
 - 新增“下载的歌词文件编码格式”设置，默认下载的歌词编码仍是`UTF-8`，对于某些在设备(如车机)上出现歌词中文乱码的用户可以尝试选择以`GBK`编码格式保存歌词文件
+- 新增设置-桌面歌词-歌词字体设置，此设置可用于设置桌面歌词的字体
 
 ### 优化
 

src/common/defaultSetting.js

@@ -2,7 +2,7 @@ const path = require('path')
 const os = require('os')
 
 const defaultSetting = {
-  version: '1.0.44',
+  version: '1.0.45',
   player: {
     togglePlayMethod: 'listLoop',
     highQuality: false,
@@ -26,6 +26,7 @@ const defaultSetting = {
     theme: 0,
     isLockScreen: true,
     style: {
+      font: '',
       fontSize: 120,
       opacity: 95,
       isZoomActiveLrc: true,

src/common/ipcNames.js

@@ -22,6 +22,7 @@ const names = {
     set_app_setting: 'set_app_setting',
     set_window_size: 'set_window_size',
     show_save_dialog: 'show_save_dialog',
+    get_system_fonts: 'get_system_fonts',
 
     handle_request: 'handle_request',
     cancel_request: 'cancel_request',

src/main/rendererEvents/index.js

@@ -19,6 +19,7 @@ require('./playList')
 require('./data')
 require('./lyric')
 require('./musicUrl')
+require('./systemFonts')
 
 require('./kw_decodeLyric')
 

src/main/rendererEvents/systemFonts.js

@@ -0,0 +1,5 @@
+const { mainHandle, NAMES: { mainWindow: ipcMainWindowNames } } = require('@common/ipc')
+const { getFonts } = require('@main/utils/fontManage')
+
+mainHandle(ipcMainWindowNames.get_system_fonts, getFonts)
+

src/main/utils/fontManage.js

@@ -0,0 +1,9 @@
+// const { getAvailableFontFamilies } = require('electron-font-manager')
+
+
+// exports.getAvailableFontFamilies = getAvailableFontFamilies
+
+
+const fontList = require('font-list')
+
+exports.getFonts = fontList.getFonts

src/renderer-lyric/App.vue

@@ -39,6 +39,7 @@ export default {
         y: -1,
         theme: 0,
         style: {
+          font: '',
           fontSize: 125,
           opacity: 80,
           isZoomActiveLrc: true,

src/renderer-lyric/components/core/Lyric.vue

@@ -21,6 +21,7 @@ export default {
       default() {
         return {
           style: {
+            font: '',
             fontSize: 125,
             opacity: 80,
             isZoomActiveLrc: true,
@@ -77,6 +78,7 @@ export default {
   computed: {
     lrcStyles() {
       return {
+        fontFamily: this.lrcConfig.style.font,
         fontSize: this.lrcConfig.style.fontSize / 100 + 'rem',
         opacity: this.lrcConfig.style.opacity / 100,
       }

src/renderer/App.vue

@@ -288,7 +288,7 @@ export default {
       })
 
       rendererOn(NAMES.mainWindow.set_config, (event, config) => {
-        console.log(config)
+        // console.log(config)
         // this.setDesktopLyricConfig(config)
         // console.log('set_config', JSON.stringify(this.setting) === JSON.stringify(config))
         this.setSetting(Object.assign({}, this.setting, config))

src/renderer/components/material/Selection.vue

@@ -45,8 +45,8 @@ export default {
   },
   computed: {
     label() {
-      if (!this.value) return ''
+      if (this.value == null) return ''
-      if (!this.itemName) return this.value
+      if (this.itemName == null) return this.value
       const item = this.list.find(l => l[this.itemKey] == this.value)
       if (!item) return ''
       return item[this.itemName]

src/renderer/lang/en-us/view/setting.json

@@ -51,6 +51,8 @@
   "desktop_lyric": "Desktop Lyric Settings",
   "desktop_lyric_always_on_top": "Make the lyrics always above other windows",
   "desktop_lyric_enable": "Display lyrics",
+  "desktop_lyric_font": "Lyric font",
+  "desktop_lyric_font_default": "Default",
   "desktop_lyric_lock": "Lock lyrics",
   "desktop_lyric_lock_screen": "It is not allowed to drag the lyrics window out of the main screen",
   "download": "Download",

src/renderer/lang/zh-cn/view/setting.json

@@ -51,6 +51,8 @@
   "desktop_lyric": "桌面歌词设置",
   "desktop_lyric_always_on_top": "使歌词总是在其他窗口之上",
   "desktop_lyric_enable": "显示歌词",
+  "desktop_lyric_font": "歌词字体",
+  "desktop_lyric_font_default": "默认",
   "desktop_lyric_lock": "锁定歌词",
   "desktop_lyric_lock_screen": "不允许歌词窗口拖出主屏幕之外",
   "download": "下载设置",

src/renderer/lang/zh-tw/view/setting.json

@@ -51,6 +51,8 @@
   "desktop_lyric": "桌面歌詞設置",
   "desktop_lyric_always_on_top": "使歌詞總是在其他窗口之上",
   "desktop_lyric_enable": "顯示歌詞",
+  "desktop_lyric_font": "歌詞字體",
+  "desktop_lyric_font_default": "默認",
   "desktop_lyric_lock": "鎖定歌詞",
   "desktop_lyric_lock_screen": "不允許歌詞窗口拖出主屏幕之外",
   "download": "下載設置",

src/renderer/views/Setting.vue

@@ -91,6 +91,10 @@ div(:class="$style.main")
           material-checkbox(id="setting_desktop_lyric_alwaysOnTop" v-model="current_setting.desktopLyric.isAlwaysOnTop" :label="$t('view.setting.desktop_lyric_always_on_top')")
         div(:class="$style.gapTop")
           material-checkbox(id="setting_desktop_lyric_lockScreen" v-model="current_setting.desktopLyric.isLockScreen" :label="$t('view.setting.desktop_lyric_lock_screen')")
+      dd
+        h3#desktop_lyric_font {{$t('view.setting.desktop_lyric_font')}}
+        div
+          material-selection(:list="fontList" :class="$style.gapLeft" v-model="current_setting.desktopLyric.style.font" item-key="id" item-name="label")
 
       dt#search {{$t('view.setting.search')}}
       dd
@@ -468,6 +472,9 @@ export default {
         ? this.sync.status.devices.map(d => `${d.deviceName} (${d.clientId.substring(0, 5)})`).join(', ')
         : ''
     },
+    fontList() {
+      return [{ id: '', label: this.$t('view.setting.desktop_lyric_font_default') }, ...this.systemFontList]
+    },
   },
   data() {
     return {
@@ -489,6 +496,7 @@ export default {
           y: -1,
           theme: '',
           style: {
+            font: '',
             fontSize: 125,
             opacity: 80,
             isZoomActiveLrc: true,
@@ -680,6 +688,7 @@ export default {
           devices: [],
         },
       },
+      systemFontList: [],
     }
   },
   watch: {
@@ -753,6 +762,7 @@ export default {
       if (!window.currentWindowSizeId) window.currentWindowSizeId = this.setting.windowSizeId
       // this.initTOC()
       this.getCacheSize()
+      this.getSystemFonts()
       this.getMediaDevice()
       this.current_hot_key = window.appHotKeyConfig
       this.initHotKeyConfig()
@@ -1261,6 +1271,13 @@ export default {
     handleRefreshSyncCode() {
       rendererInvoke(NAMES.mainWindow.sync_generate_code)
     },
+    getSystemFonts() {
+      rendererInvoke(NAMES.mainWindow.get_system_fonts).then(fonts => {
+        this.systemFontList = fonts.map(f => ({ id: f, label: f.replace(/(^"|"$)/g, '') }))
+      }).catch(() => {
+        this.systemFontList = []
+      })
+    },
   },
 }
 </script>