From ae9c08aa358586c4ab6dbe9e42cd4eaf4c439806 Mon Sep 17 00:00:00 2001
From: Fam Zheng <fam@euphon.net>
Date: Tue, 26 May 2026 10:37:40 +0100
Subject: [PATCH] =?UTF-8?q?music(player):=20'=E4=BB=85=E7=9C=8B=E6=94=B6?=
 =?UTF-8?q?=E8=97=8F'=20=E5=88=87=E6=8D=A2=E7=A7=BB=E5=88=B0=20filterbar?=
 =?UTF-8?q?=EF=BC=88=E6=A0=87=E7=AD=BE=E9=82=A3=E8=A1=8C=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/music/frontend/src/views/PlayerView.vue | 27 +++++++++-----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/music/frontend/src/views/PlayerView.vue b/apps/music/frontend/src/views/PlayerView.vue
index 246b63d..cbed67a 100644
--- a/apps/music/frontend/src/views/PlayerView.vue
+++ b/apps/music/frontend/src/views/PlayerView.vue
@@ -44,6 +44,13 @@
         :class="{ active: activeTagName === t.name }"
         @click="setTag(t.name)"
       >{{ t.name }}<span class="chip-n">{{ t.count }}</span></button>
+
+      <button
+        class="chip fav-chip"
+        :class="{ active: favOnly }"
+        :title="favOnly ? '显示全部' : '仅看收藏'"
+        @click="toggleFavOnly"
+      >{{ favOnly ? '★ 仅看收藏' : '☆ 仅看收藏' }}</button>
     </nav>
 
     <div class="main">
@@ -54,12 +61,6 @@
           <button :class="{ active: sortMode === 'least' }" @click="setSort('least')">最少播放</button>
           <button :class="{ active: sortMode === 'recent' }" @click="setSort('recent')">最近</button>
           <button :class="{ active: sortMode === 'random' }" @click="setSort('random')">随机</button>
-          <button
-            class="fav-toggle"
-            :class="{ active: favOnly }"
-            :title="favOnly ? '显示全部' : '仅看收藏'"
-            @click="toggleFavOnly"
-          >{{ favOnly ? '★' : '☆' }}</button>
         </div>
 
         <div class="playlist">
@@ -1402,17 +1403,13 @@ onBeforeUnmount(() => {
   border-color: var(--accent-strong);
   color: var(--accent);
 }
-.sort-bar .fav-toggle {
+.fav-chip {
   margin-left: auto;
-  border-radius: 4px !important;
-  border-right-width: 1px !important;
-  font-size: 14px;
-  padding: 4px 8px;
 }
-.sort-bar .fav-toggle.active {
-  color: #f5b800;
-  border-color: #f5b800;
-  background: rgba(245, 184, 0, 0.12);
+.fav-chip.active {
+  color: #f5b800 !important;
+  border-color: #f5b800 !important;
+  background: rgba(245, 184, 0, 0.14) !important;
 }
 
 .row-fav {