✨ feat: 优化播放器样式添加单曲循环优化桌面歌词效果

2026-04-03 14:20:50 +08:00 · 2024-12-15 01:40:13 +08:00
parent f2f5d3ac15
commit 7be126cf5f
7 changed files with 316 additions and 86 deletions
--- a/electron/lyric.js
+++ b/electron/lyric.js
@@ -1,17 +1,19 @@
-const { BrowserWindow } = require('electron');
+const { BrowserWindow, screen } = require('electron');
 const path = require('path');
 const config = require('./config');

 let lyricWindow = null;
+let isDragging = false;

 const createWin = () => {
  lyricWindow = new BrowserWindow({
    width: 800,
-    height: 300,
+    height: 200,
    frame: false,
    show: false,
    transparent: true,
    hasShadow: false,
+    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
@@ -68,6 +70,44 @@ const loadLyricWindow = (ipcMain) => {
  ipcMain.on('mouseleave-lyric', () => {
    lyricWindow.setIgnoreMouseEvents(false);
  });
+
+  // 开始拖动
+  ipcMain.on('lyric-drag-start', () => {
+    isDragging = true;
+  });
+
+  // 处理拖动移动
+  ipcMain.on('lyric-drag-move', (e, { deltaX, deltaY }) => {
+    if (!lyricWindow) return;
+
+    const [currentX, currentY] = lyricWindow.getPosition();
+    const { width: screenWidth, height: screenHeight } = screen.getPrimaryDisplay().workAreaSize;
+    const [windowWidth, windowHeight] = lyricWindow.getSize();
+
+    // 计算新位置，确保窗口不会移出屏幕
+    const newX = Math.max(0, Math.min(currentX + deltaX, screenWidth - windowWidth));
+    const newY = Math.max(0, Math.min(currentY + deltaY, screenHeight - windowHeight));
+
+    lyricWindow.setPosition(newX, newY);
+  });
+
+  // 结束拖动
+  ipcMain.on('lyric-drag-end', () => {
+    isDragging = false;
+  });
+
+  // 添加鼠标穿透事件处理
+  ipcMain.on('set-ignore-mouse', (e, shouldIgnore) => {
+    if (!lyricWindow) return;
+
+    if (shouldIgnore) {
+      // 设置鼠标穿透，但保留拖动区域可交互
+      lyricWindow.setIgnoreMouseEvents(true, { forward: true });
+    } else {
+      // 取消鼠标穿透
+      lyricWindow.setIgnoreMouseEvents(false);
+    }
+  });
 };

 module.exports = {
--- a/src/hooks/MusicHook.ts
+++ b/src/hooks/MusicHook.ts
@@ -92,7 +92,13 @@ export const audioServiceOn = (audio: typeof audioService) => {
  // 监听结束
  audio.onEnd(() => {
    handleEnded();
-    store.commit('nextPlay');
+    if (store.state.playMode === 1) {
+      // 单曲循环模式
+      audio.getCurrentSound()?.play();
+    } else {
+      // 列表循环模式
+      store.commit('nextPlay');
+    }
  });
 };

--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,10 @@
  width: 100%;
 }

+.n-slider-handle-indicator--top {
+  @apply bg-transparent text-[#ffffffdd] text-2xl px-2 py-1 shadow-none mb-0 !important;
+}
+
 .text-el {
  @apply overflow-ellipsis overflow-hidden whitespace-nowrap;
 }
--- a/src/layout/components/PlayBar.vue
+++ b/src/layout/components/PlayBar.vue
@@ -2,10 +2,14 @@
  <!-- 展开全屏 -->
  <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :background="background" />
  <!-- 底部播放栏 -->
+
  <div
    class="music-play-bar"
    :class="setAnimationClass('animate__bounceInUp') + ' ' + (musicFullVisible ? 'play-bar-opcity' : '')"
  >
+    <div class="music-time custom-slider">
+      <n-slider v-model:value="timeSlider" :step="1" :max="allTime" :min="0" :format-tooltip="formatTooltip"></n-slider>
+    </div>
    <div class="play-bar-img-wrapper" @click="setMusicFull">
      <n-image :src="getImgUrl(playMusic?.picUrl, '300y300')" class="play-bar-img" lazy preview-disabled />
      <div class="hover-arrow">
@@ -38,23 +42,26 @@
      <div class="music-buttons-play" @click="playMusicEvent">
        <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
      </div>
-      <div class="music-buttons-next" @click="handleEnded">
+      <div class="music-buttons-next" @click="handleNext">
        <i class="iconfont icon-next"></i>
      </div>
    </div>
-    <div class="music-time custom-slider">
-      <div class="time">{{ getNowTime }}</div>
-      <n-slider v-model:value="timeSlider" :step="0.05" :tooltip="false"></n-slider>
-      <div class="time">{{ getAllTime }}</div>
-    </div>
-    <div class="audio-volume custom-slider">
-      <div>
-        <i class="iconfont icon-notificationfill"></i>
-      </div>
-      <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false"></n-slider>
-    </div>
    <div class="audio-button">
-      <n-tooltip trigger="hover" :z-index="9999999" @click="toggleFavorite">
+      <div class="audio-volume custom-slider">
+        <div class="volume-icon" @click="mute">
+          <i class="iconfont" :class="getVolumeIcon"></i>
+        </div>
+        <div class="volume-slider">
+          <n-slider v-model:value="volumeSlider" :step="0.01" :tooltip="false" vertical></n-slider>
+        </div>
+      </div>
+      <n-tooltip trigger="hover" :z-index="9999999">
+        <template #trigger>
+          <i class="iconfont" :class="playModeIcon" @click="togglePlayMode"></i>
+        </template>
+        {{ playModeText }}
+      </n-tooltip>
+      <n-tooltip trigger="hover" :z-index="9999999">
        <template #trigger>
          <i class="iconfont icon-likefill" :class="{ 'like-active': isFavorite }" @click="toggleFavorite"></i>
        </template>
@@ -133,17 +140,33 @@ watch(
 // 使用 useThrottleFn 创建节流版本的 seek 函数
 const throttledSeek = useThrottleFn((value: number) => {
  if (!sound.value) return;
-  sound.value.seek((value * allTime.value) / 100);
+  sound.value.seek(value);
+  nowTime.value = value;
 }, 50); // 50ms 的节流延迟

 // 修改 timeSlider 计算属性
 const timeSlider = computed({
-  get: () => (nowTime.value / allTime.value) * 100,
+  get: () => nowTime.value,
  set: throttledSeek,
 });

+const formatTooltip = (value: number) => {
+  return `${secondToMinute(value)} / ${secondToMinute(allTime.value)}`;
+};
+
 // 音量条
 const audioVolume = ref(localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1);
+const getVolumeIcon = computed(() => {
+  // 0 静音 ri-volume-mute-line 0.5 ri-volume-down-line 1 ri-volume-up-line
+  if (audioVolume.value === 0) {
+    return 'ri-volume-mute-line';
+  }
+  if (audioVolume.value <= 0.5) {
+    return 'ri-volume-down-line';
+  }
+  return 'ri-volume-up-line';
+});
+
 const volumeSlider = computed({
  get: () => audioVolume.value * 100,
  set: (value) => {
@@ -153,17 +176,31 @@ const volumeSlider = computed({
    audioVolume.value = value / 100;
  },
 });
-// 获取当前播放时间
-const getNowTime = computed(() => {
-  return secondToMinute(nowTime.value);
+
+// 静音
+const mute = () => {
+  if (volumeSlider.value === 0) {
+    volumeSlider.value = 30;
+  } else {
+    volumeSlider.value = 0;
+  }
+};
+
+// 播放模式
+const playMode = computed(() => store.state.playMode);
+const playModeIcon = computed(() => {
+  return playMode.value === 0 ? 'ri-repeat-2-line' : 'ri-repeat-one-line';
+});
+const playModeText = computed(() => {
+  return playMode.value === 0 ? '列表循环' : '单曲循环';
 });

-// 获取总时间
-const getAllTime = computed(() => {
-  return secondToMinute(allTime.value);
-});
+// 切换播放模式
+const togglePlayMode = () => {
+  store.commit('togglePlayMode');
+};

-function handleEnded() {
+function handleNext() {
  store.commit('nextPlay');
 }

@@ -224,13 +261,13 @@ const toggleFavorite = async (e: Event) => {
 }

 .music-play-bar {
-  @apply h-20 w-full absolute bottom-0 left-0 flex items-center rounded-t-2xl overflow-hidden box-border px-6 py-2;
+  @apply h-20 w-full absolute bottom-0 left-0 flex items-center box-border px-6 py-2 pt-3;
  z-index: 9999;
  box-shadow: 0px 0px 10px 2px rgba(203, 203, 203, 0.034);
  background-color: #212121;
  animation-duration: 0.5s !important;
  .music-content {
-    width: 140px;
+    width: 160px;
    @apply ml-4;

    &-title {
@@ -253,14 +290,14 @@ const toggleFavorite = async (e: Event) => {
 }

 .music-buttons {
-  @apply mx-6;
+  @apply mx-6 flex-1 flex justify-center;

  .iconfont {
    @apply text-2xl hover:text-green-500 transition;
  }

  .icon {
-    @apply text-xl hover:text-white;
+    @apply text-3xl hover:text-white;
  }

  @apply flex items-center;
@@ -270,25 +307,28 @@ const toggleFavorite = async (e: Event) => {
  }

  &-play {
-    background: #383838;
-    @apply flex justify-center items-center w-12 h-12 rounded-full mx-4 hover:bg-green-500 transition bg-opacity-40;
-  }
-}
-
-.music-time {
-  @apply flex flex-1 items-center;
-
-  .time {
-    @apply mx-4 mt-1;
+    background-color: #ffffff20;
+    @apply flex justify-center items-center w-20 h-12 rounded-full mx-4 hover:bg-[#ffffff40] transition;
  }
 }

 .audio-volume {
-  width: 140px;
-  @apply flex items-center mx-4;
+  @apply flex items-center relative;
+  &:hover {
+    .volume-slider {
+      @apply opacity-100 visible;
+    }
+  }
+  .volume-icon {
+    @apply cursor-pointer;

-  .iconfont {
-    @apply text-2xl hover:text-green-500 transition cursor-pointer mr-4;
+    .iconfont {
+      @apply text-2xl hover:text-green-500 transition;
+    }
+  }
+
+  .volume-slider {
+    @apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 bg-gray-800 bg-opacity-80 rounded-xl;
  }
 }

@@ -356,17 +396,31 @@ const toggleFavorite = async (e: Event) => {
    --n-handle-size: 12px;
    --n-handle-color: var(--primary-color);

-    &:hover {
-      --n-rail-height: 6px;
-      --n-handle-size: 14px;
+    &.n-slider--vertical {
+      height: 100%;
+
+      .n-slider-rail {
+        width: 4px;
+      }
+
+      &:hover {
+        .n-slider-rail {
+          width: 6px;
+        }
+
+        .n-slider-handle {
+          width: 14px;
+          height: 14px;
+        }
+      }
    }

    .n-slider-rail {
-      @apply overflow-hidden;
+      @apply overflow-hidden transition-all duration-200;
    }

    .n-slider-handle {
-      @apply transition-opacity duration-200;
+      @apply transition-all duration-200;
      opacity: 0;
    }

@@ -418,4 +472,17 @@ const toggleFavorite = async (e: Event) => {
 .like-active {
  @apply text-red-600;
 }
+
+.icon-loop,
+.icon-single-loop {
+  font-size: 1.5rem;
+}
+
+.music-time .n-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  border-radius: 0;
+}
 </style>
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,6 +13,11 @@ const defaultSettings = {
  authorUrl: 'https://github.com/algerkong',
 };

+function getLocalStorageItem<T>(key: string, defaultValue: T): T {
+  const item = localStorage.getItem(key);
+  return item ? JSON.parse(item) : defaultValue;
+}
+
 interface State {
  menus: any[];
  play: boolean;
@@ -28,6 +33,7 @@ interface State {
  searchValue: string;
  searchType: number;
  favoriteList: number[];
+  playMode: number;
 }

 const state: State = {
@@ -36,7 +42,7 @@ const state: State = {
  isPlay: false,
  playMusic: {} as SongResult,
  playMusicUrl: '',
-  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') as string) : null,
+  user: getLocalStorageItem('user', null),
  playList: [],
  playListIndex: 0,
  setData: defaultSettings,
@@ -44,7 +50,8 @@ const state: State = {
  isMobile: false,
  searchValue: '',
  searchType: 1,
-  favoriteList: localStorage.getItem('favoriteList') ? JSON.parse(localStorage.getItem('favoriteList') || '[]') : [],
+  favoriteList: getLocalStorageItem('favoriteList', []),
+  playMode: getLocalStorageItem('playMode', 0),
 };

 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -91,6 +98,10 @@ const mutations = {
    state.favoriteList = state.favoriteList.filter((id) => id !== songId);
    localStorage.setItem('favoriteList', JSON.stringify(state.favoriteList));
  },
+  togglePlayMode(state: State) {
+    state.playMode = state.playMode === 0 ? 1 : 0;
+    localStorage.setItem('playMode', JSON.stringify(state.playMode));
+  },
 };

 const actions = {
--- a/src/views/lyric/index.vue
+++ b/src/views/lyric/index.vue
@@ -2,9 +2,11 @@
  <div
    class="lyric-window"
    :class="[lyricSetting.theme, { lyric_lock: lyricSetting.isLock }]"
+    @mousedown="handleMouseDown"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
+    <div class="drag-overlay"></div>
    <!-- 顶部控制栏 -->
    <div class="control-bar" :class="{ 'control-bar-show': showControls }">
      <div class="font-size-controls">
@@ -25,7 +27,7 @@
        <div class="control-button" @click="handleTop">
          <i class="ri-pushpin-line" :class="{ active: lyricSetting.isTop }"></i>
        </div>
-        <div class="control-button" @click="handleLock">
+        <div id="lyric-lock" class="control-button" @click="handleLock">
          <i v-if="lyricSetting.isLock" class="ri-lock-line"></i>
          <i v-else class="ri-lock-unlock-line"></i>
        </div>
@@ -61,7 +63,7 @@
              </div>
            </div>
          </template>
-          <div v-else class="lyric-empty">暂无歌词</div>
+          <div v-else class="lyric-empty">无歌词</div>
        </div>
      </div>
    </div>
@@ -84,6 +86,8 @@ const isInitialized = ref(false);
 // 字体大小控制
 const fontSize = ref(24); // 默认字体大小
 const fontSizeStep = 2; // 每次整的步长
+const animationFrameId = ref<number | null>(null);
+const lastUpdateTime = ref(performance.now());

 // 静态数据
 const staticData = ref<{
@@ -136,14 +140,21 @@ const clearHideTimer = () => {

 // 处理鼠标进入窗口
 const handleMouseEnter = () => {
-  if (!lyricSetting.value.isLock) return;
-  isHovering.value = true;
+  console.log('handleMouseEnter');
+  if (lyricSetting.value.isLock) {
+    isHovering.value = true;
+    windowData.electron.ipcRenderer.send('set-ignore-mouse', true);
+  } else {
+    windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
+  }
 };

 // 处理鼠标离开窗口
 const handleMouseLeave = () => {
+  console.log('handleMouseLeave');
  if (!lyricSetting.value.isLock) return;
  isHovering.value = false;
+  windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
 };

 // 监听锁定状态变化
@@ -180,7 +191,7 @@ const wrapperStyle = computed(() => {
  const containerCenter = containerHeight.value / 2;

  // 计算当前行到顶部的距离（包含padding）
-  const currentLineTop = currentIndex.value * lineHeight.value + containerHeight.value * 0.2; // 加上顶部padding
+  const currentLineTop = currentIndex.value * lineHeight.value + containerHeight.value * 0.2 + lineHeight.value; // 加上顶部padding

  // 计算偏移量，使当前行居中
  const targetOffset = containerCenter - currentLineTop;
@@ -265,10 +276,6 @@ onMounted(() => {
    resizeObserver.disconnect();
  });
 });
-
-// 动画帧ID
-const animationFrameId = ref<number | null>(null);
-
 // 实际播放时间
 const actualTime = ref(0);

@@ -317,9 +324,8 @@ const updateProgress = () => {
 };

 // 记录上次更新时间
-const lastUpdateTime = ref(performance.now());

-// 监听数据更新
+// 监听据更新
 watch(
  () => dynamicData.value,
  (newData: any) => {
@@ -351,7 +357,7 @@ watch(
  },
 );

-// 修改数据更新处理
+// 修改数据更新处
 const handleDataUpdate = (parsedData: {
  nowTime: number;
  startCurrentTime: number;
@@ -405,7 +411,7 @@ onMounted(() => {
          animationFrameId.value = null;
        }

-        // 保据格式正确
+        // 确保数据格式正确
        if (Array.isArray(parsedData.lrcArray)) {
          staticData.value = {
            lrcArray: parsedData.lrcArray,
@@ -446,6 +452,7 @@ const handleTop = () => {

 const handleLock = () => {
  lyricSetting.value.isLock = !lyricSetting.value.isLock;
+  windowData.electron.ipcRenderer.send('set-ignore-mouse', lyricSetting.value.isLock);
 };

 const handleClose = () => {
@@ -459,6 +466,74 @@ watch(
  },
  { deep: true },
 );
+
+// 添加拖动相关变量
+const isDragging = ref(false);
+const startPosition = ref({ x: 0, y: 0 });
+
+// 处理鼠标按下事件
+const handleMouseDown = (e: MouseEvent) => {
+  // 如果点击的是控制按钮区域或窗口被锁定，不处理拖动
+  if (
+    lyricSetting.value.isLock ||
+    (e.target as HTMLElement).closest('.control-buttons') ||
+    (e.target as HTMLElement).closest('.font-size-controls')
+  ) {
+    return;
+  }
+
+  // 只响应鼠标左键
+  if (e.button !== 0) return;
+
+  isDragging.value = true;
+  startPosition.value = { x: e.screenX, y: e.screenY };
+
+  // 添加全局鼠标事件监听
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value) return;
+
+    const deltaX = e.screenX - startPosition.value.x;
+    const deltaY = e.screenY - startPosition.value.y;
+
+    // 发送移动事件到主进程
+    windowData.electron.ipcRenderer.send('lyric-drag-move', { deltaX, deltaY });
+    startPosition.value = { x: e.screenX, y: e.screenY };
+  };
+
+  const handleMouseUp = () => {
+    if (!isDragging.value) return;
+    isDragging.value = false;
+
+    // 移除事件监听
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  // 添加全局事件监听
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+// 组件卸载时清理
+onUnmounted(() => {
+  isDragging.value = false;
+});
+
+onMounted(() => {
+  const lyricLock = document.getElementById('lyric-lock');
+  if (lyricLock) {
+    lyricLock.onmouseenter = () => {
+      if (lyricSetting.value.isLock) {
+        windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
+      }
+    };
+    lyricLock.onmouseleave = () => {
+      if (lyricSetting.value.isLock) {
+        windowData.electron.ipcRenderer.send('set-ignore-mouse', true);
+      }
+    };
+  }
+});
 </script>

 <style>
@@ -474,9 +549,25 @@ body {
  position: relative;
  overflow: hidden;
  background: transparent;
+  user-select: none;
+  transition: background-color 0.2s ease;
+  cursor: default;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.3);
+    .control-bar {
+      &-show {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+
+  &:active {
+    cursor: grabbing;
+  }

  &.dark {
-    --bg-color: transparent;
    --text-color: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --highlight-color: #1db954;
@@ -484,22 +575,11 @@ body {
  }

  &.light {
-    --bg-color: transparent;
    --text-color: #333333;
    --text-secondary: rgba(51, 51, 51, 0.6);
    --highlight-color: #1db954;
    --control-bg: rgba(255, 255, 255, 0.3);
  }
-
-  &.lyric_lock {
-    .control-bar {
-      background: var(--control-bg);
-
-      &-show {
-        opacity: 1;
-      }
-    }
-  }
 }

 .control-bar {
@@ -508,8 +588,6 @@ body {
  left: 0;
  right: 0;
  height: 40px;
-  background: var(--control-bg);
-  backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
  align-items: center;
@@ -519,14 +597,8 @@ body {
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
-  -webkit-app-region: drag;
  z-index: 100;

-  &-show {
-    opacity: 1;
-    visibility: visible;
-  }
-
  .font-size-controls {
    margin-right: auto; // 将字体控制放在侧
    padding-right: 20px;
@@ -583,6 +655,7 @@ body {
  right: 0;
  bottom: 0;
  overflow: hidden;
+  z-index: 100;
 }

 .lyric-scroll {
@@ -663,4 +736,27 @@ body {
 .lyric-line-current {
  opacity: 1;
 }
+
+.control-bar {
+  .control-buttons {
+    .control-button {
+      &:not(:has(.ri-lock-line)):not(:has(.ri-lock-unlock-line)) {
+        .lyric_lock & {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .lyric_lock & .font-size-controls {
+    display: none;
+  }
+}
+
+.lyric_lock {
+  background: transparent;
+  &:hover {
+    background: transparent;
+  }
+}
 </style>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        highlight: 'var(--highlight-color)',
+        text: 'var(--text-color)',
+        secondary: 'var(--text-secondary)',
+      },
+    },
  },
  plugins: [],
 };