✨ feat: 支持刷新私人漫游 (#762)

* ✨ feat: 支持刷新私人漫游

* 🐞 fix: 修复 #758

* 🐞 fix: 修复 #734

* 🐞 fix: 修复代码审查

* ✨ feat: 支持个性化歌词边距

* ✨ feat: 支持左右对唱互换

* ✨ feat: 支持音译翻译调换

* ✨ feat: 不喜欢括号与别名

* ✨ feat: 显示主页问好

* ✨ feat: 自定义css js

* 🐞 fix: 兼容网页端

* Revert "🐞 fix: 兼容网页端"

This reverts commit a721693.

* Revert "✨ feat: 自定义css js"

This reverts commit f8d4482.

* 🐞 fix: 修复被错误移除的空格

* 🐞 fix: 修复部分写法问题

---------

Co-authored-by: imsyy <one@imsyy.top>

Author: kazukokawagawa

src/components/Card/SongCard.vue

@@ -39,8 +39,8 @@
               }"
               class="name-text"
             >
-              {{ song?.name || "未知曲目" }}
-              <n-text v-if="song.alia?.length" class="alia" depth="3"> ({{ song.alia }}) </n-text>
+              {{ settingStore.hideLyricBrackets ? removeBrackets(song?.name) : (song?.name || "未知曲目") }}
+              <n-text v-if="song.alia?.length && !settingStore.hideLyricBrackets" class="alia" depth="3"> ({{ song.alia }}) </n-text>
             </n-ellipsis>
           </div>
           <n-flex :size="4" :wrap="false" class="desc" align="center">
@@ -90,7 +90,7 @@
               MV
             </n-tag>
             <!-- 歌手 -->
-            <div v-if="Array.isArray(song.artists)" class="artists text-hidden">
+            <div v-if="Array.isArray(song.artists)" class="artists">
               <n-text
                 v-for="ar in song.artists"
                 :key="ar.id"
@@ -103,7 +103,7 @@
             <div v-else-if="song.type === 'radio'" class="artists">
               <n-text class="ar"> 电台节目 </n-text>
             </div>
-            <div v-else class="artists text-hidden" @click="openJumpArtist(song.artists)">
+            <div v-else class="artists" @click="openJumpArtist(song.artists)">
               <n-text class="ar"> {{ song.artists || "未知艺术家" }} </n-text>
             </div>
           </n-flex>
@@ -163,6 +163,7 @@ import { QualityType, type SongType } from "@/types/main";
 import { useStatusStore, useMusicStore, useDataStore, useSettingStore } from "@/stores";
 import { formatNumber } from "@/utils/helper";
 import { openJumpArtist } from "@/utils/modal";
+import { removeBrackets } from "@/utils/format";
 import { toLikeSong } from "@/utils/auth";
 import { isObject } from "lodash-es";
 import { formatTimestamp, msToTime } from "@/utils/time";
@@ -320,6 +321,7 @@ const localCover = async (show: boolean) => {
   }
   .title {
     flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
     padding: 4px 20px 4px 0;
@@ -335,6 +337,7 @@ const localCover = async (show: boolean) => {
       overflow: hidden;
     }
     .info {
+      min-width: 0;
       .name {
         display: flex;
         flex-direction: row;
@@ -343,6 +346,7 @@ const localCover = async (show: boolean) => {
         font-size: 16px;
       }
       .desc {
+        min-width: 0;
         margin-top: 2px;
         font-size: 13px;
         .n-tag {
@@ -375,8 +379,13 @@ const localCover = async (show: boolean) => {
         }
       }
       .artists {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         .ar {
-          display: inline-flex;
+          display: inline;
           transition: opacity 0.3s;
           opacity: 0.6;
           cursor: pointer;
@@ -407,6 +416,7 @@ const localCover = async (show: boolean) => {
   }
   .album {
     flex: 1;
+    min-width: 0;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     padding-right: 20px;

src/components/Layout/Menu.vue

@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import { useMobile } from "@/composables/useMobile";
 import { usePlayerController } from "@/core/player/PlayerController";
+import { useSongManager } from "@/core/player/SongManager";
 import {
   useDataStore,
   useLocalStore,
@@ -54,6 +55,7 @@ const musicStore = useMusicStore();
 const statusStore = useStatusStore();
 const settingStore = useSettingStore();
 const player = usePlayerController();
+const songManager = useSongManager();
 
 const { isDesktop } = useMobile();
 
@@ -62,6 +64,16 @@ const menuRef = ref<MenuInst | null>(null);
 const menuActiveKey = ref<string | number>((router.currentRoute.value.name as string) || "home");
 const playlistMode = ref<"online" | "local">("online");
 
+// 刷新私人漫游
+const handleRefreshFM = async (e: Event) => {
+  e.stopPropagation();
+  await songManager.refreshPersonalFM();
+  // 刷新后如果处于私人漫游模式，则重新播放
+  if (statusStore.personalFmMode && musicStore.personalFMSong?.id) {
+    player.playSong();
+  }
+};
+
 // 菜单内容
 const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
   return settingStore.useOnlineService
@@ -89,7 +101,18 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         },
         {
           key: "personal-fm",
-          label: "私人漫游",
+          label: () =>
+            h("div", { class: "user-liked roaming-label" }, [
+              h(NText, null, () => "私人漫游"),
+              h(NButton, {
+                type: "tertiary",
+                round: true,
+                strong: true,
+                secondary: true,
+                renderIcon: renderIcon("Refresh"),
+                onClick: handleRefreshFM,
+              }),
+            ]),
           show: isLogin() !== 0 && !settingStore.sidebarHide.hidePersonalFM,
           icon: renderIcon("Radio", {
             style: {
@@ -575,4 +598,17 @@ watch(
     border-radius: 8px;
   }
 }
+.roaming-label {
+  .n-button {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s;
+  }
+  &:hover {
+    .n-button {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
 </style>

src/components/Modal/Setting/HomePageSectionManager.vue

@@ -1,5 +1,17 @@
 <template>
   <div class="home-page-section-manager">
+    <n-card
+      :content-style="{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '16px',
+      }"
+      class="greeting-item"
+    >
+      <n-text class="name">显示主页问好</n-text>
+      <n-switch v-model:value="settingStore.showHomeGreeting" :round="false" />
+    </n-card>
     <div ref="sortableRef" class="sortable-list">
       <n-card
         v-for="item in settingStore.homePageSections"
@@ -50,6 +62,17 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.greeting-item {
+  border-radius: 8px;
+  margin-bottom: 12px;
+  .name {
+    font-size: 16px;
+    line-height: normal;
+  }
+  .n-switch {
+    margin-left: auto;
+  }
+}
 .sortable-list {
   margin-top: 12px;
   display: flex;

src/components/Modal/Setting/SidebarHideManager.vue

@@ -34,13 +34,11 @@ const settingStore = useSettingStore();
 const statusStore = useStatusStore();
 
 type SidebarHideKey = keyof typeof settingStore.sidebarHide;
-type SidebarHideItem = { label: string, key: SidebarHideKey };
+type SidebarHideItem = { label: string; key: SidebarHideKey };
 
-const when = (
-  condition: boolean, ...item: SidebarHideItem[]
-): SidebarHideItem[] => {
+const when = (condition: boolean, ...item: SidebarHideItem[]): SidebarHideItem[] => {
   return condition ? item : [];
-}
+};
 
 const sidebarItems: SidebarHideItem[] = [
   { label: "发现音乐", key: "hideDiscover" },
@@ -63,8 +61,6 @@ const updateSetting = (key: SidebarHideKey, val: boolean) => {
 
 <style scoped lang="scss">
 .list {
-  margin-top: 12px;
-  padding-right: 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;

src/components/Player/FullPlayerMobile.vue

@@ -127,7 +127,7 @@
         <div class="lyric-header">
           <s-image :src="musicStore.getSongCover('s')" class="lyric-cover" />
           <div class="lyric-info">
-            <div class="name text-hidden">{{ musicStore.playSong.name }}</div>
+            <div class="name text-hidden">{{ settingStore.hideLyricBrackets ? removeBrackets(musicStore.playSong.name) : musicStore.playSong.name }}</div>
             <div class="artist text-hidden">{{ artistName }}</div>
           </div>
           <!-- 喜欢按钮 -->
@@ -165,14 +165,16 @@
 
 <script setup lang="ts">
 import { useSwipe } from "@vueuse/core";
-import { useMusicStore, useStatusStore, useDataStore } from "@/stores";
+import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
 import { usePlayerController } from "@/core/player/PlayerController";
 import { useTimeFormat } from "@/composables/useTimeFormat";
 import { toLikeSong } from "@/utils/auth";
 import { openPlaylistAdd } from "@/utils/modal";
+import { removeBrackets } from "@/utils/format";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 const dataStore = useDataStore();
 const player = usePlayerController();
 const { timeDisplay, toggleTimeFormat } = useTimeFormat();

src/components/Player/MainPlayer.vue

@@ -44,7 +44,7 @@
             <!-- 名称 -->
             <TextContainer
               :key="musicStore.playSong.name"
-              :text="musicStore.playSong.name"
+              :text="settingStore.hideLyricBrackets ? removeBrackets(musicStore.playSong.name) : musicStore.playSong.name"
               :speed="0.2"
               class="name"
             />
@@ -224,6 +224,7 @@ import {
   openPlaylistAdd,
 } from "@/utils/modal";
 import { convertSecondsToTime } from "@/utils/time";
+import { removeBrackets } from "@/utils/format";
 import type { DropdownOption } from "naive-ui";
 
 const router = useRouter();

src/components/Player/PlayerComponents/PlayerComment.vue

@@ -16,7 +16,7 @@
         </template>
       </n-image>
       <n-flex :size="2" class="song-info" vertical>
-        <span class="title text-hidden">{{ musicStore.playSong.name }}</span>
+        <span class="title text-hidden">{{ settingStore.hideLyricBrackets ? removeBrackets(musicStore.playSong.name) : musicStore.playSong.name }}</span>
         <span class="artist text-hidden">
           {{
             Array.isArray(musicStore.playSong.artists)
@@ -70,15 +70,16 @@
 
 <script setup lang="ts">
 import type { CommentType } from "@/types/main";
-import { useMusicStore, useStatusStore } from "@/stores";
+import { useMusicStore, useStatusStore, useSettingStore } from "@/stores";
 import { getComment, getHotComment } from "@/api/comment";
 import { isEmpty } from "lodash-es";
-import { formatCommentList } from "@/utils/format";
+import { formatCommentList, removeBrackets } from "@/utils/format";
 import { NScrollbar } from "naive-ui";
 import { coverLoaded } from "@/utils/helper";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
+const settingStore = useSettingStore();
 
 const commentScroll = ref<InstanceType<typeof NScrollbar> | null>(null);