✨ feat: 优化页面样式

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;
+}

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']

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 {

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>
 

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;
 

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 {