添加vue eslint规则，修复问题

.eslintrc

@@ -1,9 +1,15 @@
 {
-  "extends": "standard",
+  "extends": [
+    "plugin:vue/vue3-recommended",
+    "standard"
+  ],
   "plugins": [
     "html"
   ],
-  "parser": "babel-eslint",
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
   "rules": {
     "no-new": "off",
     "camelcase": "off",
@@ -18,7 +24,8 @@
     "standard/no-callback-literal": "off",
     "prefer-const": "off",
     "no-labels": "off",
-    "node/no-callback-literal": "off"
+    "node/no-callback-literal": "off",
+    "vue/multi-word-component-names": "off"
   },
   "settings": {
     "html/html-extensions": [".html", ".vue"]

CHANGELOG.md

@@ -21,12 +21,6 @@ Change log format is based on [Keep a Changelog](http://keepachangelog.com/).
 
 - 降级electron到v13.4.0（这修复了windows 7下播放歌曲时软件会崩溃的问题）
 
-## [1.15.3](https://github.com/lyswhut/lx-music-desktop/compare/v1.15.1...v1.15.3) - 2021-11-09
-
-### 其他
-
-- 降级electron到v13.4.0（这修复了windows 7下播放歌曲时软件会崩溃的问题）
-
 ## [1.15.1](https://github.com/lyswhut/lx-music-desktop/compare/v1.15.0...v1.15.1) - 2021-11-09
 
 ### 优化

package-lock.json

@@ -8041,6 +8041,44 @@
       "integrity": "sha1-DDvzpn6FP4u7xYD7SUX78W9Bt8U=",
       "dev": true
     },
+    "eslint-plugin-vue": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.1.1.tgz",
+      "integrity": "sha512-rx64IrlhdfPya6u2V5ukOGiLCTgaCBdMSpczLVqyo8A0l+Vbo+lzvIfEUfAQ2auj+MF6y0TwxLorzdCIzHunnw==",
+      "dev": true,
+      "requires": {
+        "eslint-utils": "^3.0.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^8.0.1"
+      },
+      "dependencies": {
+        "eslint-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+          "dev": true,
+          "requires": {
+            "eslint-visitor-keys": "^2.0.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -15131,6 +15169,74 @@
         "@vue/shared": "3.2.23"
       }
     },
+    "vue-eslint-parser": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz",
+      "integrity": "sha512-lhWjDXJhe3UZw2uu3ztX51SJAPGPey1Tff2RK3TyZURwbuI4vximQLzz4nQfCv8CZq4xx7uIiogHMMoSJPr33A==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.3.2",
+        "eslint-scope": "^6.0.0",
+        "eslint-visitor-keys": "^3.0.0",
+        "espree": "^9.0.0",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
+          "integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
+          "dev": true
+        },
+        "debug": {
+          "version": "4.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
+          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "eslint-scope": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-6.0.0.tgz",
+          "integrity": "sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
+          "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
+          "dev": true
+        },
+        "espree": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-9.1.0.tgz",
+          "integrity": "sha512-ZgYLvCS1wxOczBYGcQT9DDWgicXwJ4dbocr9uYN+/eresBAUuBu+O4WzB21ufQ/JqQT8gyp7hJ3z8SHii32mTQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.6.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^3.1.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
     "vue-i18n": {
       "version": "9.2.0-beta.22",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.0-beta.22.tgz",

package.json

@@ -200,6 +200,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^8.1.1",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",

src/renderer/components/core/Aside/index.vue

@@ -2,7 +2,7 @@
 <div :class="$style.aside">
   <ControlBtns v-if="setting.controlBtnPosition == 'left'" />
   <div :class="$style.logo" v-else>L X</div>
-  <Nav />
+  <NavBar />
 </div>
 </template>
 
@@ -10,10 +10,10 @@
 import { mapGetters } from 'vuex'
 
 import ControlBtns from './ControlBtns'
-import Nav from './Nav'
+import NavBar from './NavBar'
 
 export default {
-  components: { ControlBtns, Nav },
+  components: { ControlBtns, NavBar },
   computed: {
     ...mapGetters(['setting']),
   },

src/renderer/components/core/PlayDetail/index.vue

@@ -28,7 +28,7 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
             p(v-if="musicInfo.album") {{$t('player__music_album')}}{{musicInfo.album}}
 
       transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
-        Lyric(v-if="visibleLrc")
+        LyricPlayer(v-if="visibleLrc")
       core-music-comment(:class="$style.comment" :musicInfo="musicInfoItem" :show="isShowPlayComment" @close="hideComment")
     play-bar
 </template>
@@ -46,12 +46,12 @@ import {
   musicInfoItem,
   musicInfo,
 } from '@renderer/core/share/player'
-import Lyric from './Lyric'
+import LyricPlayer from './LyricPlayer'
 import PlayBar from './PlayBar'
 
 export default {
   components: {
-    Lyric,
+    LyricPlayer,
     PlayBar,
   },
   setup() {

src/renderer/core/useApp/useDataInit.js

@@ -97,22 +97,9 @@ const usePlayInfoInit = () => {
   return downloadList => {
     return getPlayInfo().then(info => {
       window.restorePlayInfo = null
-      if (!info) return
-      if (info.index < 0) return
-      if (info.listId) {
-        if (info.listId == 'download') {
-          const list = downloadList
-          // console.log(list)
-          if (!list || !list[info.index]) return
-          info.list = list
-        } else {
-          const list = getList(info.listId)
-          // console.log(list)
-          if (!list[info.index]) return
-          info.list = list
-        }
-      }
-      if (!info.list || !info.list[info.index]) return
+      if (!info?.listId || info.index < 0) return
+      const list = getList(info.listId)
+      if (!list || !list[info.index]) return
       window.restorePlayInfo = info
       setPlayList({
         listId: info.listId,

src/renderer/core/useApp/usePlayer/usePlayer.js

@@ -182,7 +182,7 @@ export default ({ setting }) => {
       },
     })
 
-    setImg(playMusicInfo)
+    setImg({ musicInfo: musicInfoItem.value, listId: playMusicInfo.listId })
     setLrc(musicInfoItem.value)
     if (setting.value.player.togglePlayMethod == 'random') setPlayedList({ ...playMusicInfo })
   }

src/renderer/plugins/Dialog/Dialog.vue

@@ -39,7 +39,7 @@ export default {
       return this.confirmButtonText || this.$t('confirm_button_text')
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     const el = this.$el
     el.parentNode.removeChild(el)
   },

src/renderer/plugins/lyric/index.js

@@ -1,24 +0,0 @@
-import { onBeforeUnmount, ref, computed, useI18n, watch, useCommit } from '@renderer/utils/vueTools'
-import { formatPlayTime2 } from '@renderer/utils'
-
-import { setLoopPlay } from '../player'
-
-export default ({ setting }) => {
-  const { t } = useI18n()
-
-  const toggleDesktopLyricBtnTitle = computed(() => {
-    return `${
-      setting.value.desktopLyric.enable
-        ? t('desktop_lyric__off')
-        : t('desktop_lyric__on')
-    }（${
-      setting.value.desktopLyric.isLock
-        ? t('desktop_lyric__unlock')
-        : t('desktop_lyric__lock')
-    }）`
-  })
-
-  return {
-    toggleDesktopLyricBtnTitle,
-  }
-}

src/renderer/plugins/lyric/useLyric.js

@@ -1,48 +0,0 @@
-import { useRefGetter, reactive, computed, watch, useCommit } from '@renderer/utils/vueTools'
-import Lyric from '@renderer/utils/lyric-font-player'
-import { getCurrentTime } from '@renderer/plugins/player'
-import { setDesktopLyricInfo } from '@renderer/utils/tools'
-
-// let lrc = window.lrc
-
-export default ({ setting, musicInfo, isPlay, listId, setStatusText }) => {
-  const lyric = reactive({
-    lines: [],
-    text: '',
-    line: 0,
-  })
-
-  const lrc = window.lrc = new Lyric({
-    lineClassName: 'lrc-content',
-    fontClassName: 'font',
-    shadowContent: false,
-    activeLineClassName: 'active',
-    onPlay: (line, text) => {
-      lyric.text = text
-      lyric.line = line
-      setStatusText(text)
-      // console.log(line, text)
-    },
-    onSetLyric: lines => { // listening lyrics seting event
-      // console.log(lines) // lines is array of all lyric text
-      lyric.lines = lines
-      lyric.line = 0
-    },
-    // offset: 80,
-  })
-
-
-  const setLyric = () => {
-    lrc.setLyric(
-      setting.value.player.isPlayLxlrc && musicInfo.value.lxlrc ? musicInfo.vlaue.lxlrc : musicInfo.vlaue.lrc,
-      setting.value.player.isShowLyricTranslation && musicInfo.value.tlrc ? musicInfo.value.tlrc : '',
-    )
-    if (isPlay.value && (musicInfo.value.url || listId.value == 'download')) {
-      const time = getCurrentTime() * 1000
-      setDesktopLyricInfo('play', time)
-      lrc.play(time)
-    }
-  }
-  watch(setting.value.player.isShowLyricTranslation, setLyric)
-  watch(setting.value.player.isPlayLxlrc, setLyric)
-}

src/renderer/store/modules/list.js

@@ -391,8 +391,8 @@ const mutations = {
     window.eventHub.emit(eventListNames.listChange, [id])
   },
   clearCache() {
-    const [listIds, lists] = Object.entries(allList)
-    for (const { list } of lists) {
+    const lists = Object.values(allList)
+    for (const list of lists) {
       for (const item of list) {
         if (item.otherSource) item.otherSource = null
         if (item.typeUrl['128k']) delete item.typeUrl['128k']
@@ -408,7 +408,7 @@ const mutations = {
     }
     clearMusicUrl()
     clearLyric()
-    window.eventHub.emit(eventListNames.listChange, listIds)
+    window.eventHub.emit(eventListNames.listChange, Object.keys(allList))
   },
   setOtherSource(state, { musicInfo, otherSource }) {
     musicInfo.otherSource = otherSource

src/renderer/views/Download.vue

@@ -192,7 +192,7 @@ export default {
   created() {
     this.listenEvent()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unlistenEvent()
   },
   methods: {

src/renderer/views/Search.vue

@@ -120,7 +120,7 @@ export default {
   created() {
     this.listenEvent()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unlistenEvent()
   },
   mounted() {

src/renderer/views/list/List.vue

@@ -1,6 +1,6 @@
 <template>
 <div id="my-list" :class="$style.container" @click="handleContainerClick" v-if="isInitedList">
-  <Lists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
+  <MyLists :list-id="listId" @show-menu="$refs.musicList.hideMenu()" ref="lists" />
   <MusicList :list-id="listId" @show-menu="$refs.lists.hideListsMenu()" ref="musicList" />
 </div>
 
@@ -11,13 +11,13 @@ import { getListPrevSelectId } from '@renderer/utils/data'
 import { isInitedList } from '@renderer/core/share/list'
 import { getList } from '@renderer/core/share/utils'
 
-import Lists from './components/Lists'
+import MyLists from './components/MyLists'
 import MusicList from './components/MusicList'
 
 export default {
   name: 'List',
   components: {
-    Lists,
+    MyLists,
     MusicList,
   },
   setup() {

src/renderer/views/list/components/MyLists.vue

@@ -48,7 +48,7 @@ import { computed } from '@renderer/utils/vueTools'
 import { getList } from '@renderer/core/share/utils'
 
 export default {
-  name: 'ListLists',
+  name: 'MyLists',
   props: {
     listId: {
       type: [String, Number],

src/renderer/views/setting/Setting.vue

@@ -1,5 +1,4 @@
 <template>
-
 <div :class="$style.main">
   <!-- <div class="scroll" :class="$style.toc">
     <ul :class="$style.tocList">
@@ -19,20 +18,20 @@
   </div> -->
   <div class="scroll" :class="$style.setting" ref="dom_setting">
     <dl ref="dom_setting_list">
-      <Basic />
-      <Play />
-      <DesktopLyric />
-      <Search />
-      <List />
-      <Download />
-      <Sync />
-      <HotKey />
-      <Network />
-      <Odc />
-      <Backup />
-      <Other />
-      <Update />
-      <About />
+      <SettingBasic />
+      <SettingPlay />
+      <SettingDesktopLyric />
+      <SettingSearch />
+      <SettingList />
+      <SettingDownload />
+      <SettingSync />
+      <SettingHotKey />
+      <SettingNetwork />
+      <SettingOdc />
+      <SettingBackup />
+      <SettingOther />
+      <SettingUpdate />
+      <SettingAbout />
     </dl>
   </div>
 </div>
@@ -42,38 +41,38 @@
 import { useRefGetter, watch, useCommit } from '@renderer/utils/vueTools'
 import { currentStting } from './setting'
 
-import Basic from './components/Basic'
-import Play from './components/Play'
-import DesktopLyric from './components/DesktopLyric'
-import Search from './components/Search'
-import List from './components/List'
-import Download from './components/Download'
-import Sync from './components/Sync'
-import HotKey from './components/HotKey'
-import Network from './components/Network'
-import Odc from './components/Odc'
-import Backup from './components/Backup'
-import Other from './components/Other'
-import Update from './components/Update'
-import About from './components/About'
+import SettingBasic from './components/SettingBasic'
+import SettingPlay from './components/SettingPlay'
+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 SettingHotKey from './components/SettingHotKey'
+import SettingNetwork from './components/SettingNetwork'
+import SettingOdc from './components/SettingOdc'
+import SettingBackup from './components/SettingBackup'
+import SettingOther from './components/SettingOther'
+import SettingUpdate from './components/SettingUpdate'
+import SettingAbout from './components/SettingAbout'
 
 export default {
   name: 'Setting',
   components: {
-    Basic,
-    Play,
-    DesktopLyric,
-    Search,
-    List,
-    Download,
-    Sync,
-    HotKey,
-    Network,
-    Odc,
-    Backup,
-    Other,
-    Update,
-    About,
+    SettingBasic,
+    SettingPlay,
+    SettingDesktopLyric,
+    SettingSearch,
+    SettingList,
+    SettingDownload,
+    SettingSync,
+    SettingHotKey,
+    SettingNetwork,
+    SettingOdc,
+    SettingBackup,
+    SettingOther,
+    SettingUpdate,
+    SettingAbout,
   },
   setup() {
     const setting = useRefGetter('setting')

src/renderer/views/setting/components/SettingAbout.vue

@@ -59,7 +59,7 @@ import { openUrl, clipboardWriteText } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'About',
+  name: 'SettingAbout',
   setup() {
     const handleShowPact = () => {
       isShowPact.value = true

src/renderer/views/setting/components/SettingBackup.vue

@@ -31,7 +31,7 @@ import { currentStting } from '../setting'
 import { getList } from '@renderer/core/share/utils'
 
 export default {
-  name: 'Update',
+  name: 'SettingUpdate',
   setup() {
     const { t } = useI18n()
     const setting = useGetter('setting')

src/renderer/views/setting/components/SettingBasic.vue

@@ -63,7 +63,7 @@ import apiSourceInfo from '@renderer/utils/music/api-source-info'
 import UserApiModal from './UserApiModal'
 
 export default {
-  name: 'Basic',
+  name: 'SettingBasic',
   components: {
     UserApiModal,
   },

src/renderer/views/setting/components/SettingDesktopLyric.vue

@@ -21,7 +21,7 @@ import { getSystemFonts } from '@renderer/utils/tools'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'DesktopLyric',
+  name: 'SettingDesktopLyric',
   setup() {
     const { t } = useI18n()
     const systemFontList = ref([])

src/renderer/views/setting/components/SettingDownload.vue

@@ -44,7 +44,7 @@ import { openDirInExplorer, selectDir } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Download',
+  name: 'SettingDownload',
   setup() {
     const { t } = useI18n()
 

src/renderer/views/setting/components/SettingHotKey.vue

@@ -51,7 +51,7 @@ const formatHotKeyName = (name) => {
 }
 
 export default {
-  name: 'HotKey',
+  name: 'SettingHotKey',
   setup() {
     const { t } = useI18n()
     const current_hot_key = ref({

src/renderer/views/setting/components/SettingList.vue

@@ -20,7 +20,7 @@ dd(:tips="$t('setting__basic_sourcename_title')")
 import { currentStting } from '../setting'
 
 export default {
-  name: 'List',
+  name: 'SettingList',
   setup() {
     return {
       currentStting,

src/renderer/views/setting/components/SettingNetwork.vue

@@ -22,7 +22,7 @@ import { debounce } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Network',
+  name: 'SettingNetwork',
   setup() {
     watch(() => currentStting.value.network.proxy.enable, enable => {
       proxy.enable = enable

src/renderer/views/setting/components/SettingOdc.vue

@@ -12,7 +12,7 @@ dd
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Odc',
+  name: 'SettingOdc',
   setup() {
     return {
       currentStting,

src/renderer/views/setting/components/SettingOther.vue

@@ -26,7 +26,7 @@ import { sizeFormate, clearCache, getCacheSize } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Other',
+  name: 'SettingOther',
   setup() {
     const { t } = useI18n()
 

src/renderer/views/setting/components/SettingPlay.vue

@@ -26,7 +26,7 @@ import { setTaskBarProgress } from '@renderer/utils/tools'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Play',
+  name: 'SettingPlay',
   setup() {
     const mediaDevices = ref([])
     const getMediaDevice = async() => {

src/renderer/views/setting/components/SettingSearch.vue

@@ -15,7 +15,7 @@ dd
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Search',
+  name: 'SettingSearch',
   setup() {
     return {
       currentStting,

src/renderer/views/setting/components/SettingSync.vue

@@ -23,7 +23,7 @@ import { debounce } from '@renderer/utils'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Update',
+  name: 'SettingSync',
   setup() {
     const { t } = useI18n()
 

src/renderer/views/setting/components/SettingUpdate.vue

@@ -22,7 +22,7 @@ import { sizeFormate } from '@renderer/utils/tools'
 import { currentStting } from '../setting'
 
 export default {
-  name: 'Update',
+  name: 'SettingUpdate',
   setup() {
     const { t } = useI18n()
 

src/renderer/views/songList/SongList.vue

@@ -169,7 +169,7 @@ export default {
     if (!this.isVisibleListDetail) this.setTagListWidth()
     this.listenEvent()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.unlistenEvent()
   },
   methods: {

src/renderer/views/songList/components/TagList.vue

@@ -28,16 +28,17 @@ export default {
     },
     modelValue: {
       type: Object,
+      required: true,
     },
   },
-  computed: {
-    ...mapGetters(['setting']),
-  },
   data() {
     return {
       show: false,
     }
   },
+  computed: {
+    ...mapGetters(['setting']),
+  },
   mounted() {
     document.addEventListener('click', this.handleHide)
   },