From 632cdb12396a71ee81d0514c246d4ed76078d521 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Mon, 13 Jan 2025 22:55:46 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |  2 +-
 src/renderer/assets/css/base.css             |  4 ++
 src/renderer/components.d.ts                 |  1 +
 src/renderer/layout/components/MusicFull.vue | 48 +++++++++++++-------
 src/renderer/layout/components/PlayBar.vue   | 11 ++++-
 src/renderer/layout/components/SearchBar.vue | 13 ++++--
 src/renderer/layout/components/TitleBar.vue  |  2 +-
 7 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 6337456..7f76a45 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
     "howler": "^2.2.4",
     "lodash": "^4.17.21",
     "marked": "^15.0.4",
-    "naive-ui": "^2.39.0",
+    "naive-ui": "^2.41.0",
     "postcss": "^8.4.49",
     "prettier": "^3.3.2",
     "remixicon": "^4.2.0",
diff --git a/src/renderer/assets/css/base.css b/src/renderer/assets/css/base.css
index 63fd989..d7c3c73 100644
--- a/src/renderer/assets/css/base.css
+++ b/src/renderer/assets/css/base.css
@@ -5,3 +5,7 @@ body {
 .n-popover:has(.music-play) {
   border-radius: 1.5rem !important;
 }
+.n-popover {
+  border-radius: 0.5rem !important;
+  overflow: hidden !important;
+}
diff --git a/src/renderer/components.d.ts b/src/renderer/components.d.ts
index da30727..f079c97 100644
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -28,6 +28,7 @@ declare module 'vue' {
     NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
+    NMarquee: typeof import('naive-ui')['NMarquee']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NPagination: typeof import('naive-ui')['NPagination']
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index eb41c6b..489538e 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -1,6 +1,6 @@
 <template>
   <n-drawer
-    :show="musicFull"
+    v-model:show="isVisible"
     height="100%"
     placement="bottom"
     :style="{ background: currentBackground || background }"
@@ -22,15 +22,24 @@
         <div>
           <div class="music-content-name">{{ playMusic.name }}</div>
           <div class="music-content-singer">
-            <span
-              v-for="(item, index) in playMusic.ar || playMusic.song.artists"
-              :key="index"
-              class="cursor-pointer hover:text-green-500"
-              @click="handleArtistClick(item.id)"
+            <n-ellipsis
+              class="text-ellipsis"
+              line-clamp="2"
+              :tooltip="{
+                contentStyle: { maxWidth: '600px' },
+                zIndex: 99999
+              }"
             >
-              {{ item.name }}
-              {{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
-            </span>
+              <span
+                v-for="(item, index) in playMusic.ar || playMusic.song.artists"
+                :key="index"
+                class="cursor-pointer hover:text-green-500"
+                @click="handleArtistClick(item.id)"
+              >
+                {{ item.name }}
+                {{ index < (playMusic.ar || playMusic.song.artists).length - 1 ? ' / ' : '' }}
+              </span>
+            </n-ellipsis>
           </div>
         </div>
       </div>
@@ -74,7 +83,7 @@
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 
 import {
@@ -97,7 +106,7 @@ const animationFrame = ref<number | null>(null);
 const isDark = ref(false);
 
 const props = defineProps({
-  musicFull: {
+  modelValue: {
     type: Boolean,
     default: false
   },
@@ -107,10 +116,17 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['update:modelValue']);
+
+const isVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
 // 歌词滚动方法
 const lrcScroll = (behavior = 'smooth') => {
   const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`);
-  if (props.musicFull && !isMouse.value && nowEl && lrcContainer.value) {
+  if (isVisible.value && !isMouse.value && nowEl && lrcContainer.value) {
     const containerRect = lrcContainer.value.getBoundingClientRect();
     const nowElRect = nowEl.getBoundingClientRect();
     const relativeTop = nowElRect.top - containerRect.top;
@@ -142,9 +158,9 @@ watch(nowIndex, () => {
 });
 
 watch(
-  () => props.musicFull,
+  () => isVisible.value,
   () => {
-    if (props.musicFull) {
+    if (isVisible.value) {
       nextTick(() => {
         lrcScroll('instant');
       });
@@ -227,7 +243,7 @@ onBeforeUnmount(() => {
 
 const store = useStore();
 const handleArtistClick = (id: number) => {
-  props.musicFull = false;
+  isVisible.value = false;
   store.commit('setCurrentArtistId', id);
 };
 
@@ -275,7 +291,7 @@ defineExpose({
     @apply flex flex-col justify-center items-center relative;
 
     &-name {
-      @apply font-bold text-xl pb-1 pt-4;
+      @apply font-bold text-2xl pb-1 pt-4;
     }
 
     &-singer {
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/layout/components/PlayBar.vue
index 5253469..4ed948d 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -51,7 +51,14 @@
         </n-ellipsis>
       </div>
       <div class="music-content-name">
-        <n-ellipsis class="text-ellipsis" line-clamp="1">
+        <n-ellipsis
+          class="text-ellipsis"
+          line-clamp="1"
+          :tooltip="{
+            contentStyle: { maxWidth: '600px' },
+            zIndex: 99999
+          }"
+        >
           <span
             v-for="(artists, artistsindex) in playMusic.ar || playMusic.song.artists"
             :key="artistsindex"
@@ -141,7 +148,7 @@
       </n-popover>
     </div>
     <!-- 播放音乐 -->
-    <music-full ref="MusicFullRef" v-model:music-full="musicFullVisible" :background="background" />
+    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
   </div>
 </template>
 
diff --git a/src/renderer/layout/components/SearchBar.vue b/src/renderer/layout/components/SearchBar.vue
index bf51c72..68d3955 100644
--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -73,8 +73,12 @@
             <i class="iconfont ri-restart-line"></i>
             <span>重启</span>
           </div>
-          <div class="menu-item" @click="toGithubRelease">
+          <div class="menu-item" @click="selectItem('refresh')">
             <i class="iconfont ri-refresh-line"></i>
+            <span>刷新</span>
+          </div>
+          <div class="menu-item" @click="toGithubRelease">
+            <i class="iconfont ri-github-fill"></i>
             <span>当前版本</span>
             <div class="version-info">
               <span class="version-number">{{ updateInfo.currentVersion }}</span>
@@ -212,6 +216,9 @@ const selectItem = async (key: string) => {
     case 'user':
       router.push('/user');
       break;
+    case 'refresh':
+      window.location.reload();
+      break;
     default:
   }
 };
@@ -286,7 +293,7 @@ const toGithubRelease = () => {
 }
 
 .user-popover {
-  @apply min-w-[280px] p-0 rounded-xl overflow-hidden;
+  @apply min-w-[220px] p-0 rounded-xl overflow-hidden;
   @apply bg-light dark:bg-black;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
@@ -303,7 +310,7 @@ const toGithubRelease = () => {
     @apply py-1;
 
     .menu-item {
-      @apply flex items-center px-3 py-2 text-sm cursor-pointer;
+      @apply flex items-center px-3 py-1 text-sm cursor-pointer;
       @apply text-gray-700 dark:text-gray-300;
       transition: background-color 0.2s;
 
diff --git a/src/renderer/layout/components/TitleBar.vue b/src/renderer/layout/components/TitleBar.vue
index 482fed9..8af87e2 100644
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -99,7 +99,7 @@ const drag = (event: MouseEvent) => {
   -webkit-app-region: drag;
   @apply flex justify-between px-6 py-2 select-none relative;
   @apply text-dark dark:text-white;
-  z-index: 999;
+  z-index: 3000;
 }
 
 #buttons {