从webpack迁移到vite

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

@@ -10,8 +10,8 @@
 import { isFullscreen } from '@renderer/store'
 import { appSetting } from '@renderer/store/setting'
 
-import ControlBtns from './ControlBtns'
-import NavBar from './NavBar'
+import ControlBtns from './ControlBtns.vue'
+import NavBar from './NavBar.vue'
 
 </script>
 

src/renderer/components/layout/PlayBar/FullWidthProgress.vue

@@ -47,7 +47,7 @@
 import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
-import ControlBtns from './ControlBtns'
+import ControlBtns from './ControlBtns.vue'
 // import PlayProgress from './PlayProgress'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
@@ -284,7 +284,7 @@ export default {
   gap: 18px;
 }
 
-.play-btn {
+.playBtn {
   flex: none;
   height: 52%;
   // margin-top: -2px;

src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue

@@ -47,7 +47,7 @@
 import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
-import ControlBtns from './ControlBtns'
+import ControlBtns from './ControlBtns.vue'
 // import PlayProgress from './PlayProgress'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'

src/renderer/components/layout/PlayBar/MiniWidthProgress.vue

@@ -49,8 +49,8 @@
 import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
-import ControlBtns from './ControlBtns'
-import PlayProgress from './PlayProgress'
+import ControlBtns from './ControlBtns.vue'
+import PlayProgress from './PlayProgress.vue'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
 import {
@@ -314,7 +314,7 @@ export default {
   gap: 18px;
 }
 
-.play-btn {
+.playBtn {
   flex: none;
   height: 52%;
   // margin-top: -2px;

src/renderer/components/layout/PlayDetail/LyricPlayer.vue

@@ -56,7 +56,7 @@ import {
 } from '@renderer/store/player/action'
 import { onMounted, onBeforeUnmount, computed, reactive, ref, nextTick, watch } from '@common/utils/vueTools'
 import useLyric from '@renderer/utils/compositions/useLyric'
-import LyricMenu from './components/LyricMenu'
+import LyricMenu from './components/LyricMenu.vue'
 import { appSetting } from '@renderer/store/setting'
 import { setLyricOffset } from '@renderer/core/lyric'
 
@@ -263,7 +263,7 @@ export default {
   //   font-size: 1.2em;
   // }
 }
-.lrc-active-zoom {
+.lrcActiveZoom {
   :global {
     .line-content {
       &.active {
@@ -343,12 +343,12 @@ export default {
   .lyricSelectlineExtended {
     font-size: 14px;
   }
-  .lrc-active {
+  .lrcActive {
     color: var(--color-primary);
   }
 }
 
-.lyric-space {
+.lyricSpace {
   height: 70%;
 }
 

src/renderer/components/layout/PlayDetail/PlayBar.vue

@@ -42,7 +42,7 @@ import { playNext, playPrev, togglePlay } from '@renderer/core/player'
 import { status, isPlay } from '@renderer/store/player/state'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 
-import ControlBtns from './components/ControlBtns'
+import ControlBtns from './components/ControlBtns.vue'
 
 const {
   nowPlayTimeStr,
@@ -71,13 +71,13 @@ const {
   overflow: hidden;
 }
 
-.progress-container {
+.progressContainer {
   width: 100%;
   position: relative;
   padding: 3px 0;
 }
 
-.progress-content {
+.progressContent {
   position: relative;
   height: 16px;
   padding: 5px 0;
@@ -87,12 +87,12 @@ const {
   height: 100%;
 }
 
-.bar-transition {
+.barTransition {
   transition-property: transform;
   transition-timing-function: ease-out;
   transition-duration: 0.2s;
 }
-.time-label {
+.timeLabel {
   width: 100%;
   height: 18px;
   display: flex;
@@ -104,7 +104,7 @@ const {
   flex: auto;
 }
 
-.play-control {
+.playControl {
   flex: none;
   height: 100%;
   display: flex;
@@ -113,7 +113,7 @@ const {
   padding: 0 25px;
   color: var(--color-button-font);
 }
-.play-btn {
+.playBtn {
   height: 40%;
   padding: 5px;
   cursor: pointer;
@@ -125,7 +125,7 @@ const {
   opacity: 1;
   cursor: pointer;
 
-  +.play-btn {
+  +.playBtn {
     margin-left: 10px;
   }
   svg {

src/renderer/components/layout/PlayDetail/components/LyricMenu.vue

@@ -2,10 +2,10 @@
   <teleport to="#root">
     <div ref="dom_menu" :class="$style.container" :style="menuStyles" :aria-hidden="!modelValue">
       <!-- <div :class="$style.group">
-      <div :class="$style.title">{{$t('lyric_menu__align')}}</div>
+      <div :class="$style.title">{{ $t('lyric_menu__align') }}</div>
       <div :class="$style.subGroup">
-        <div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'left' }]" role="button" @click="setFontAlign('left')" ignore-tip :aria-label="$t('lyric_menu__align_left')">{{$t('lyric_menu__align_left')}}</div>
-        <div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'center' }]" role="button" @click="setFontAlign('center')" ignore-tip :aria-label="$t('lyric_menu__align_center')">{{$t('lyric_menu__align_center')}}</div>
+        <div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'left' }]" role="button" @click="setFontAlign('left')" ignore-tip :aria-label="$t('lyric_menu__align_left')">{{ $t('lyric_menu__align_left') }}</div>
+        <div :class="[$style.btn, { [$style.active]: appSetting['playDetail.style.align'] == 'center' }]" role="button" @click="setFontAlign('center')" ignore-tip :aria-label="$t('lyric_menu__align_center')">{{ $t('lyric_menu__align_center') }}</div>
       </div>
     </div> -->
       <div :class="$style.group">
@@ -83,7 +83,7 @@ export default {
       required: true,
     },
   },
-  emits: ['updateLyric', 'update:model-value'],
+  emits: ['updateLyric', 'update:modelValue'],
   setup(props, { emit }) {
     // const appSetting = useRefGetter('appSetting')
     // const playDetailSetting = useRefGetter('playDetailSetting')
@@ -98,7 +98,7 @@ export default {
     const location = computed(() => props.xy)
 
     const onHide = () => {
-      emit('update:model-value', false)
+      emit('update:modelValue', false)
     }
 
     const setFontAlign = val => {

src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue

@@ -11,11 +11,11 @@ div(:class="$style.container")
               div.select(:class="$style.name") {{ item.userName }}
               div(:class="$style.metaInfo")
                 time(v-if="item.timeStr" :class="$style.label") {{ timeFormat(item.timeStr) }}
-                div(v-if="item.location" :class="$style.label") {{$t('comment__location', { location: item.location })}}
+                div(v-if="item.location" :class="$style.label") {{ $t('comment__location', { location: item.location }) }}
             div(v-if="item.likedCount != null" :class="$style.likes")
               svg(:class="$style.likesIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" space="preserve")
                 use(xlink:href="#icon-thumbs-up")
-              | {{item.likedCount}}
+              | {{ item.likedCount }}
           p.select(:class="$style.comment_text") {{ item.text }}
           div(v-if="item.images?.length" :class="$style.comment_images")
             img(v-for="(url, index) in item.images" :key="index" :src="url" loading="lazy" decoding="async")

src/renderer/components/layout/PlayDetail/components/MusicComment/index.vue

@@ -33,14 +33,14 @@ div.comment(ref="dom_container" :class="$style.comment")
             div(:class="$style.pagination")
               material-pagination(:count="newComment.total" :btn-length="5" :limit="newComment.limit" :page="newComment.page" @btn-click="handleToggleCommentPage")
     div(v-else :class="$style.unavailable")
-      p {{$t('comment__unavailable')}}
+      p {{ $t('comment__unavailable') }}
 </template>
 
 <script>
 import { appSetting } from '@renderer/store/setting'
 import { toOldMusicInfo } from '@renderer/utils'
 import music from '@renderer/utils/musicSdk'
-import CommentFloor from './CommentFloor'
+import CommentFloor from './CommentFloor.vue'
 
 export default {
   name: 'MusicComment',

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

@@ -44,7 +44,7 @@ transition(enter-active-class="animated slideInRight" leave-active-class="animat
           div.description(:class="$style.description")
             p {{ $t('player__music_name') }}{{ musicInfo.name }}
             p {{ $t('player__music_singer') }}{{ musicInfo.singer }}
-            p(v-if="musicInfo.album") {{ $t('player__music_album') }}{{musicInfo.album}}
+            p(v-if="musicInfo.album") {{ $t('player__music_album') }}{{ musicInfo.album }}
 
       transition(enter-active-class="animated fadeIn" leave-active-class="animated fadeOut")
         LyricPlayer(v-if="visibled")
@@ -70,9 +70,9 @@ import {
   setShowPlayComment,
   setShowPlayLrcSelectContentLrc,
 } from '@renderer/store/player/action'
-import LyricPlayer from './LyricPlayer'
-import PlayBar from './PlayBar'
-import MusicComment from './components/MusicComment'
+import LyricPlayer from './LyricPlayer.vue'
+import PlayBar from './PlayBar.vue'
+import MusicComment from './components/MusicComment/index.vue'
 import { registerAutoHideMounse, unregisterAutoHideMounse } from './autoHideMounse'
 import { appSetting } from '@renderer/store/setting'
 import { closeWindow, maxWindow, minWindow, setFullScreen } from '@renderer/utils/ipc'

src/renderer/components/layout/Toolbar/index.vue

@@ -9,8 +9,8 @@
 <script setup>
 import { isFullscreen } from '@renderer/store'
 import { appSetting } from '@renderer/store/setting'
-import ControlBtns from './ControlBtns'
-import SearchInput from './SearchInput'
+import ControlBtns from './ControlBtns.vue'
+import SearchInput from './SearchInput.vue'
 
 </script>