From 054aca172e313a5ff62efa177616f0bcb99ecef0 Mon Sep 17 00:00:00 2001
From: Link <linkorgs@163.com>
Date: Sat, 7 Nov 2020 17:47:41 +0800
Subject: [PATCH] fix: lyrics are misplaced after minimization

---
 src/components/teleport-layout/index.tsx         |  1 +
 .../footer/component/lyrice-flash/index.tsx      |  8 ++++++--
 src/pages/footer/component/lyrice/index.tsx      | 16 +++++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/teleport-layout/index.tsx b/src/components/teleport-layout/index.tsx
index 29f213de..cb83575d 100644
--- a/src/components/teleport-layout/index.tsx
+++ b/src/components/teleport-layout/index.tsx
@@ -27,6 +27,7 @@ export const TeleportToAny = defineComponent({
     return () => (
       <Teleport to={props.container}>
         <div
+          v-show={props.visible}
           class={
             props.class ||
             classnames('cover-container', {
diff --git a/src/pages/footer/component/lyrice-flash/index.tsx b/src/pages/footer/component/lyrice-flash/index.tsx
index 381d791d..8848cf2c 100644
--- a/src/pages/footer/component/lyrice-flash/index.tsx
+++ b/src/pages/footer/component/lyrice-flash/index.tsx
@@ -38,8 +38,12 @@ export const LyriceFlash = defineComponent({
     })
 
     return () => (
-      <TeleportToAny container="body" class="lyrice-flash-contanier">
-        <div v-show={visible.value} class="lyrice-flash">
+      <TeleportToAny
+        container="body"
+        class="lyrice-flash-contanier"
+        visible={visible.value}
+      >
+        <div class="lyrice-flash">
           {lyrice.value.map((item, i) => (
             <div
               data-time={item.time}
diff --git a/src/pages/footer/component/lyrice/index.tsx b/src/pages/footer/component/lyrice/index.tsx
index 34f0e40f..6f8a527f 100644
--- a/src/pages/footer/component/lyrice/index.tsx
+++ b/src/pages/footer/component/lyrice/index.tsx
@@ -14,8 +14,14 @@ import {
 import { on, off } from '@/utils/index'
 import { uesModuleStore } from '@/hooks/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
+import {
+  NAMESPACED as LayoutNamespace,
+  State as LayoutState,
+  Size
+} from '@/layout/module'
 import { NAMESPACED, State, Getter } from '../../module'
 import classnams from 'classnames'
+import { debounce } from 'lodash'
 import './index.less'
 
 const prefix = 'song-details'
@@ -36,6 +42,9 @@ export const PlayLyrice = defineComponent({
     const offset = ref(0)
 
     const { useState, useGetter } = uesModuleStore<State, Getter>(NAMESPACED)
+    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+
+    const { screenSize } = toRefs(LayoutModule.useState())
 
     const lyrice = computed(() => useGetter('musicLyrics'))
     const { currentTime } = toRefs(useState())
@@ -60,6 +69,7 @@ export const PlayLyrice = defineComponent({
       nextTick(() => {
         offset.value = contanier.value.clientHeight / 2 - 50
         disabled.value = !visible.value
+        console.log(offset.value, disabled.value)
       })
     }
 
@@ -69,11 +79,11 @@ export const PlayLyrice = defineComponent({
       }
     })
 
-    const resize = () => {
-      if (visible.value) {
+    const resize = debounce(() => {
+      if (visible.value && screenSize.value !== Size.SM) {
         updateOffset()
       }
-    }
+    }, 100)
 
     onMounted(() => {
       on(window, 'resize', resize)