Skip to content
This repository was archived by the owner on Jul 17, 2026. It is now read-only.

Commit 7952bca

Browse files
imsyyimsyy
committed
🦄 refactor: 优化部分组件性能
1 parent e00bdf5 commit 7952bca

10 files changed

Lines changed: 263 additions & 291 deletions

File tree

‎components.d.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ declare module 'vue' {
1414
AboutSetting: typeof import('./src/components/Setting/AboutSetting.vue')['default']
1515
ArtistList: typeof import('./src/components/List/ArtistList.vue')['default']
1616
AutoClose: typeof import('./src/components/Modal/AutoClose.vue')['default']
17-
Background: typeof import('./src/components/Other/background.vue')['default']
1817
BackgroundRender: typeof import('./src/components/Special/BackgroundRender.vue')['default']
1918
BatchList: typeof import('./src/components/Modal/BatchList.vue')['default']
2019
ChangeRate: typeof import('./src/components/Modal/ChangeRate.vue')['default']
@@ -27,7 +26,6 @@ declare module 'vue' {
2726
DownloadSong: typeof import('./src/components/Modal/DownloadSong.vue')['default']
2827
Equalizer: typeof import('./src/components/Modal/Equalizer.vue')['default']
2928
ExcludeLyrics: typeof import('./src/components/Modal/ExcludeLyrics.vue')['default']
30-
FluidBackground: typeof import('./src/components/Special/FluidBackground.vue')['default']
3129
FullPlayer: typeof import('./src/components/Player/FullPlayer.vue')['default']
3230
GeneralSetting: typeof import('./src/components/Setting/GeneralSetting.vue')['default']
3331
JumpArtist: typeof import('./src/components/Modal/JumpArtist.vue')['default']

‎src/components/Player/FullPlayer.vue‎

Lines changed: 72 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,89 @@
11
<template>
2-
<div
3-
v-show="statusStore.showFullPlayer"
4-
:style="{
5-
'--main-color': statusStore.mainColor,
6-
cursor: statusStore.playerMetaShow || isShowComment ? 'auto' : 'none',
7-
}"
8-
:class="['full-player', { 'show-comment': isShowComment }]"
9-
@mouseleave="playerLeave"
10-
>
11-
<!-- 背景 -->
12-
<PlayerBackground />
13-
<!-- 独立歌词 -->
14-
<Transition name="fade" mode="out-in">
2+
<Teleport to="body">
3+
<Transition name="up" mode="out-in">
154
<div
16-
v-if="isShowComment && !statusStore.pureLyricMode"
17-
:key="instantLyrics.content"
18-
class="lrc-instant"
5+
v-if="statusStore.showFullPlayer"
6+
:style="{
7+
'--main-color': statusStore.mainColor,
8+
cursor: statusStore.playerMetaShow || isShowComment ? 'auto' : 'none',
9+
}"
10+
:class="['full-player', { 'show-comment': isShowComment }]"
11+
@mouseleave="playerLeave"
1912
>
20-
<span class="lrc">{{ instantLyrics.content }}</span>
21-
<span v-if="instantLyrics.tran" class="lrc-tran">{{ instantLyrics.tran }}</span>
22-
</div>
23-
</Transition>
24-
<!-- 菜单 -->
25-
<PlayerMenu @mouseenter.stop="stopHide" @mouseleave.stop="playerMove" />
26-
<!-- 主内容 -->
27-
<Transition name="zoom" mode="out-in">
28-
<div
29-
:key="playerContentKey"
30-
:class="[
31-
'player-content',
32-
{
33-
'no-lrc': noLrc,
34-
pure: statusStore.pureLyricMode && musicStore.isHasLrc,
35-
},
36-
]"
37-
@mousemove="playerMove"
38-
>
39-
<Transition name="zoom">
40-
<div v-if="!pureLyricMode" :key="musicStore.playSong.id" class="content-left">
41-
<!-- 封面 -->
42-
<PlayerCover />
43-
<!-- 数据 -->
44-
<PlayerData :center="playerDataCenter" :theme="statusStore.mainColor" />
13+
<!-- 背景 -->
14+
<PlayerBackground />
15+
<!-- 独立歌词 -->
16+
<Transition name="fade" mode="out-in">
17+
<div
18+
v-if="isShowComment && !statusStore.pureLyricMode"
19+
:key="instantLyrics.content"
20+
class="lrc-instant"
21+
>
22+
<span class="lrc">{{ instantLyrics.content }}</span>
23+
<span v-if="instantLyrics.tran" class="lrc-tran">{{ instantLyrics.tran }}</span>
4524
</div>
4625
</Transition>
47-
<!-- 歌词 -->
48-
<div class="content-right">
49-
<!-- 数据 -->
50-
<PlayerData
51-
v-if="statusStore.pureLyricMode && musicStore.isHasLrc"
52-
:center="statusStore.pureLyricMode"
53-
:theme="statusStore.mainColor"
54-
:light="pureLyricMode"
55-
/>
56-
<!-- 歌词 -->
57-
<MainAMLyric v-if="settingStore.useAMLyrics" />
58-
<MainLyric v-else />
59-
</div>
26+
<!-- 菜单 -->
27+
<PlayerMenu @mouseenter.stop="stopHide" @mouseleave.stop="playerMove" />
28+
<!-- 主内容 -->
29+
<Transition name="zoom" mode="out-in">
30+
<div
31+
:key="playerContentKey"
32+
:class="[
33+
'player-content',
34+
{
35+
'no-lrc': noLrc,
36+
pure: statusStore.pureLyricMode && musicStore.isHasLrc,
37+
},
38+
]"
39+
@mousemove="playerMove"
40+
>
41+
<Transition name="zoom">
42+
<div v-if="!pureLyricMode" :key="musicStore.playSong.id" class="content-left">
43+
<!-- 封面 -->
44+
<PlayerCover />
45+
<!-- 数据 -->
46+
<PlayerData :center="playerDataCenter" :theme="statusStore.mainColor" />
47+
</div>
48+
</Transition>
49+
<!-- 歌词 -->
50+
<div class="content-right">
51+
<!-- 数据 -->
52+
<PlayerData
53+
v-if="statusStore.pureLyricMode && musicStore.isHasLrc"
54+
:center="statusStore.pureLyricMode"
55+
:theme="statusStore.mainColor"
56+
:light="pureLyricMode"
57+
/>
58+
<!-- 歌词 -->
59+
<MainAMLyric v-if="settingStore.useAMLyrics" />
60+
<MainLyric v-else />
61+
</div>
62+
</div>
63+
</Transition>
64+
<!-- 评论 -->
65+
<Transition name="zoom" mode="out-in">
66+
<PlayerComment v-show="isShowComment && !statusStore.pureLyricMode" />
67+
</Transition>
68+
<!-- 控制中心 -->
69+
<PlayerControl @mouseenter.stop="stopHide" @mouseleave.stop="playerMove" />
70+
<!-- 音乐频谱 -->
71+
<PlayerSpectrum
72+
v-if="settingStore.showSpectrums"
73+
:color="statusStore.mainColor ? `rgb(${statusStore.mainColor})` : 'rgb(239 239 239)'"
74+
:show="!statusStore.playerMetaShow"
75+
:height="60"
76+
/>
6077
</div>
6178
</Transition>
62-
<!-- 评论 -->
63-
<Transition name="zoom" mode="out-in">
64-
<PlayerComment v-show="isShowComment && !statusStore.pureLyricMode" />
65-
</Transition>
66-
<!-- 控制中心 -->
67-
<PlayerControl @mouseenter.stop="stopHide" @mouseleave.stop="playerMove" />
68-
<!-- 音乐频谱 -->
69-
<PlayerSpectrum
70-
v-if="settingStore.showSpectrums"
71-
:color="statusStore.mainColor ? `rgb(${statusStore.mainColor})` : 'rgb(239 239 239)'"
72-
:show="!statusStore.playerMetaShow"
73-
:height="60"
74-
/>
75-
</div>
79+
</Teleport>
7680
</template>
7781

7882
<script setup lang="ts">
7983
import { useStatusStore, useMusicStore, useSettingStore } from "@/stores";
8084
import { isElectron } from "@/utils/env";
8185
import { throttle } from "lodash-es";
82-
import { usePlayer } from "@/utils/player";
8386
84-
const player = usePlayer();
8587
const musicStore = useMusicStore();
8688
const statusStore = useStatusStore();
8789
const settingStore = useSettingStore();
@@ -159,10 +161,6 @@ const playerLeave = () => {
159161
};
160162
161163
onMounted(() => {
162-
console.log("播放器开启");
163-
statusStore.fullPlayerActive = true;
164-
// 音乐频谱
165-
if (settingStore.showSpectrums) player.initSpectrumData();
166164
// 阻止息屏
167165
if (isElectron && settingStore.preventSleep) {
168166
window.electron.ipcRenderer.send("prevent-sleep", true);

0 commit comments

Comments
 (0)