✨ feat: 优化歌词体验

src/views/lyric/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="lyric-window" :class="theme">
+  <div class="lyric-window" :class="[lyricSetting.theme, { lyric_lock: lyricSetting.isLock }]">
+    <div class="drag-bar"></div>
     <div class="lyric-bar" :class="{ 'lyric-bar-hover': isDrag }">
       <div class="buttons">
         <!-- <div class="music-buttons">
@@ -13,23 +14,32 @@
             <i class="iconfont icon-next"></i>
           </div>
         </div> -->
-        <div class="check-theme" @click="checkTheme">
-          <i v-if="theme === 'light'" class="icon ri-sun-line"></i>
+        <div class="button check-theme" @click="checkTheme">
+          <i v-if="lyricSetting.theme === 'light'" class="icon ri-sun-line"></i>
           <i v-else class="icon ri-moon-line"></i>
         </div>
-        <div class="button-move">
-          <i class="icon ri-drag-move-2-line"></i>
+        <div class="button">
+          <i class="icon ri-share-2-line" :class="{ checked: lyricSetting.isTop }" @click="handleTop"></i>
+        </div>
+        <div class="button button-lock" @click="handleLock">
+          <i v-if="lyricSetting.isLock" class="icon ri-lock-line"></i>
+          <i v-else class="icon ri-lock-unlock-line"></i>
+        </div>
+        <div class="button">
+          <i class="icon ri-close-circle-line" @click="handleClose"></i>
         </div>
       </div>
     </div>
-    <div v-if="lyricData.lrcArray[lyricData.nowIndex]" class="lyric-box">
-      <h2 class="lyric lyric-current">{{ lyricData.lrcArray[lyricData.nowIndex].text }}</h2>
-      <p class="lyric-current">{{ lyricData.currentLrc.trText }}</p>
-      <template v-if="lyricData.lrcArray[lyricData.nowIndex + 1]">
-        <h2 class="lyric lyric-next">
-          {{ lyricData.lrcArray[lyricData.nowIndex + 1].text }}
-        </h2>
-        <p class="lyric-next">{{ lyricData.nextLrc.trText }}</p>
+    <div id="clickThroughElement" class="lyric-box">
+      <template v-if="lyricData.lrcArray[lyricData.nowIndex]">
+        <h2 class="lyric lyric-current">{{ lyricData.lrcArray[lyricData.nowIndex].text }}</h2>
+        <p class="lyric-current">{{ lyricData.currentLrc.trText }}</p>
+        <template v-if="lyricData.lrcArray[lyricData.nowIndex + 1]">
+          <h2 class="lyric lyric-next">
+            {{ lyricData.lrcArray[lyricData.nowIndex + 1].text }}
+          </h2>
+          <p class="lyric-next">{{ lyricData.nextLrc.trText }}</p>
+        </template>
       </template>
     </div>
   </div>
@@ -38,7 +48,6 @@
 <script setup lang="ts">
 import { useIpcRenderer } from '@vueuse/electron';
 
-const windowData = window as any;
 const ipcRenderer = useIpcRenderer();
 
 const lyricData = ref({
@@ -60,27 +69,64 @@ const lyricData = ref({
   nowIndex: 0,
 });
 
+const lyricSetting = ref({
+  ...(localStorage.getItem('lyricData')
+    ? JSON.parse(localStorage.getItem('lyricData') || '')
+    : {
+        isTop: false,
+        theme: 'light',
+        isLock: false,
+      }),
+});
+
 onMounted(() => {
   ipcRenderer.on('receive-lyric', (event, data) => {
     try {
       lyricData.value = JSON.parse(data);
-      console.log('lyricData.value', lyricData.value);
     } catch (error) {
       console.error('error', error);
     }
   });
 });
-const theme = ref('dark');
+
 const checkTheme = () => {
-  if (theme.value === 'light') {
-    theme.value = 'dark';
+  if (lyricSetting.value.theme === 'light') {
+    lyricSetting.value.theme = 'dark';
   } else {
-    theme.value = 'light';
+    lyricSetting.value.theme = 'light';
   }
 };
-// const drag = (event: MouseEvent) => {
-//   windowData.electronAPI.dragStart(event);
-// };
+
+const handleTop = () => {
+  lyricSetting.value.isTop = !lyricSetting.value.isTop;
+  ipcRenderer.send('top-lyric', lyricSetting.value.isTop);
+};
+
+const handleLock = () => {
+  lyricSetting.value.isLock = !lyricSetting.value.isLock;
+};
+
+const handleClose = () => {
+  ipcRenderer.send('close-lyric');
+};
+
+watch(
+  () => lyricSetting.value,
+  (newValue) => {
+    localStorage.setItem('lyricData', JSON.stringify(newValue));
+  },
+  { deep: true },
+);
+
+// onMounted(() => {
+//   const el = document.getElementById('clickThroughElement') as HTMLElement;
+//   el.addEventListener('mouseenter', () => {
+//     if (lyricSetting.value.isLock) ipcRenderer.send('mouseenter-lyric');
+//   });
+//   el.addEventListener('mouseleave', () => {
+//     if (lyricSetting.value.isLock) ipcRenderer.send('mouseleave-lyric');
+//   });
+// });
 </script>
 
 <style>
@@ -93,10 +139,36 @@ body {
 .lyric-window {
   width: 100vw;
   height: 100vh;
-  @apply overflow-hidden text-gray-600 hover:bg-gray-400 hover:bg-opacity-75;
+  @apply overflow-hidden text-gray-600 rounded-xl box-border;
+  // border: 4px solid transparent;
   &:hover .lyric-bar {
     opacity: 1;
   }
+  &:hover .drag-bar {
+    opacity: 1;
+  }
+  &:hover {
+    box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 0.5);
+  }
+}
+
+.lyric_lock {
+  &:hover {
+    box-shadow: none;
+  }
+  &:hover .lyric-bar {
+    background-color: transparent;
+    .button {
+      opacity: 0;
+    }
+    .button-lock {
+      opacity: 1;
+      color: #d6d6d6;
+    }
+  }
+  &:hover .drag-bar {
+    opacity: 0;
+  }
 }
 
 .icon {
@@ -107,7 +179,7 @@ body {
   background-color: #b1b1b1;
   @apply flex flex-col justify-center items-center;
   width: 100vw;
-  height: 100px;
+  height: 40px;
   opacity: 0;
   &:hover {
     opacity: 1;
@@ -116,10 +188,24 @@ body {
 .lyric-bar-hover {
   opacity: 1;
 }
+
+.drag-bar {
+  -webkit-app-region: drag;
+  height: 20px;
+  cursor: move;
+  background-color: #383838;
+  opacity: 0;
+}
 .buttons {
   width: 100vw;
   height: 100px;
-  @apply flex  justify-center items-center;
+  @apply flex  justify-center items-center gap-4;
+}
+.button {
+  @apply cursor-pointer text-center;
+}
+.checked {
+  color: #fff !important;
 }
 .button-move {
   -webkit-app-region: drag;
@@ -151,9 +237,9 @@ body {
 }
 
 .lyric {
-  text-shadow: 0 0 10px #fff;
+  text-shadow: 0 0 1vw #2c2c2c;
   font-size: 4vw;
-  @apply font-bold m-0 p-0 whitespace-nowrap select-none pointer-events-none;
+  @apply font-bold m-0 p-0 select-none pointer-events-none;
 }
 
 .lyric-current {
@@ -168,6 +254,7 @@ body {
 .lyric-window.dark {
   .lyric {
     text-shadow: none;
+    text-shadow: 0 0 1vw #000000;
   }
   .lyric-current {
     color: #fff;
@@ -176,7 +263,8 @@ body {
     color: #cecece;
   }
 }
-// .lyric-box {
-//   writing-mode: vertical-rl;
-// }
+.lyric-box {
+  // writing-mode: vertical-rl;
+  padding: 10px;
+}
 </style>