fix(taskbar-lyrics): 现在控制按钮会在依附任务栏时显示

注意：此提交由 AI 生成！

Author: MoYingJi

src/views/TaskbarLyric/index.vue

@@ -3,17 +3,33 @@
     class="taskbar-lyric"
     :class="{ dark: state.isDark, 'layout-reverse': !state.isCenter, floating: isFloating }"
     :style="rootStyle"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <div class="cover-wrapper" v-if="coverSrc && settingStore.taskbarLyricShowCover">
       <Transition name="cross-fade">
         <img :key="coverSrc" :src="coverSrc" class="cover" alt="cover" @error="onCoverError" />
       </Transition>
     </div>
 
+    <Transition name="controls-expand">
+      <div class="media-controls" v-if="showControls">
+        <div class="control-btn" @click.stop="controlAction('playPrev')">
+          <SvgIcon name="SkipPrev" />
+        </div>
+        <div class="control-btn" @click.stop="controlAction('playOrPause')">
+          <SvgIcon :name="state.isPlaying ? 'Pause' : 'Play'" />
+        </div>
+        <div class="control-btn" @click.stop="controlAction('playNext')">
+          <SvgIcon name="SkipNext" />
+        </div>
+      </div>
+    </Transition>
+
     <div class="content" :style="contentStyle">
       <Transition :name="settingStore.taskbarLyricAnimationMode" mode="out-in">
         <TransitionGroup tag="div" class="lyric-list-wrapper" name="lyric-list" :key="transitionKey">
-              <div
+          <div
             v-for="item in displayItems"
             :key="item.key"
             class="lyric-item"
@@ -57,6 +73,8 @@ import LyricScroll from "./LyricScroll.vue";
 const settingStore = useSettingStore();
 const route = useRoute();
 const isFloating = computed(() => route.query.mode === "floating");
+const isHovering = ref(false);
+const showControls = computed(() => !isFloating.value && isHovering.value);
 
 /**
  * 只有当 IPC 时间与本地时间误差超过 250ms 时，才同步 IPC 的时间
@@ -138,6 +156,25 @@ const lyricFontFamily = computed(() => {
   return font === "default" ? "inherit" : font;
 });
 
+const handleMouseEnter = () => {
+  if (!isFloating.value) isHovering.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovering.value = false;
+};
+
+const controlAction = (action: "playPrev" | "playOrPause" | "playNext") => {
+  const ipc = window.electron?.ipcRenderer;
+  if (!ipc) return;
+
+  if (action === "playOrPause") {
+    state.isPlaying = !state.isPlaying;
+  }
+
+  ipc.send("send-to-main-win", action);
+};
+
 const transitionKey = computed(() => {
   if (!currentLyricText.value) {
     return `meta-${state.title}-${state.artist}`;
@@ -597,6 +634,11 @@ $radius: 4px;
     font-size: clamp(12px, 29vh, 26px);
     -webkit-app-region: drag;
 
+    .media-controls,
+    .control-btn {
+      -webkit-app-region: no-drag;
+    }
+
     &:hover,
     &:active {
       background-color: transparent;
@@ -666,7 +708,7 @@ $radius: 4px;
   );
   --mask-horizontal: linear-gradient(
     to right,
-    transparent 0,
+    transparent 0%,
     black var(--mask-gap),
     black calc(100% - var(--mask-gap)),
     transparent 100%
@@ -825,6 +867,66 @@ $radius: 4px;
     transform: translate3d(-5px, 0, 0);
   }
 }
+
+.media-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  max-width: 8.6em;
+  gap: 0.4em;
+  overflow: hidden;
+  z-index: 10;
+
+  .control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.4em;
+    height: 2.3em;
+    font-size: 1.3em;
+    color: inherit;
+    border-radius: $radius;
+    border: 1px solid rgba(128, 128, 128, 0.4);
+    box-sizing: border-box;
+    transition:
+      background-color 0.2s,
+      transform 0.1s,
+      border-color 0.2s;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.2);
+      border-color: rgba(128, 128, 128, 0.7);
+      opacity: 1;
+    }
+
+    &:active {
+      transform: scale(0.92);
+      background-color: rgba(128, 128, 128, 0.3);
+      border-color: rgba(128, 128, 128, 0.9);
+    }
+  }
+}
+
+.controls-expand {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.4s var(--lyric-ease);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    max-width: 0;
+    opacity: 0;
+    margin: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    max-width: 8.6em;
+    opacity: 1;
+  }
+}
 </style>
 
 <style lang="scss">