From 8aca3ddf75f790ab4f46d6392f2f0ac8e4e5ace3 Mon Sep 17 00:00:00 2001
From: root <root@mg742608608780487.local>
Date: Sun, 8 Mar 2026 22:56:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=9F=B3=E4=B9=90/=E6=AD=8C?=
 =?UTF-8?q?=E5=8D=95/=E6=AD=8C=E6=89=8B=E9=A1=B5=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E4=B8=8E=E6=A0=87=E7=AD=BE=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 music-qianduan/src/views/Music.vue    | 33 ++++++++++++++++++++++++---
 music-qianduan/src/views/Playlist.vue | 19 ++++++++++++++-
 music-qianduan/src/views/Singer.vue   | 19 ++++++++++++++-
 3 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/music-qianduan/src/views/Music.vue b/music-qianduan/src/views/Music.vue
index e03016c..6b7017a 100644
--- a/music-qianduan/src/views/Music.vue
+++ b/music-qianduan/src/views/Music.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { Search } from '@element-plus/icons-vue'
 import { getMusicList, getHotMusic, getLatestMusic, processMusicUrl, getMusicStatus } from '../api/music'
@@ -73,7 +73,10 @@ const fetchMusicTypes = async () => {
   try {
     const res = await getMusicTypeList()
     if (res.code === 200) {
-      musicTypes.value = res.data || []
+      musicTypes.value = [
+        { id: null, name: '全部' },
+        ...(res.data || [])
+      ]
     }
   } catch (error) {
     console.error('获取音乐类型失败:', error)
@@ -82,12 +85,27 @@ const fetchMusicTypes = async () => {
 
 // 处理搜索
 const handleSearch = () => {
+  if (activeTab.value !== 'all') {
+    return
+  }
+  currentPage.value = 1
+  fetchMusicList()
+}
+
+const handleKeywordClear = () => {
+  if (activeTab.value !== 'all') {
+    return
+  }
+  keyword.value = ''
   currentPage.value = 1
   fetchMusicList()
 }
 
 // 处理类型变化
 const handleTypeChange = () => {
+  if (activeTab.value !== 'all') {
+    return
+  }
   currentPage.value = 1
   fetchMusicList()
 }
@@ -199,6 +217,14 @@ const handleTabChange = (tab) => {
   }
 }
 
+
+watch(keyword, (val) => {
+  if (val === '' && activeTab.value === 'all') {
+    currentPage.value = 1
+    fetchMusicList()
+  }
+})
+
 // 初始化
 onMounted(() => {
   fetchMusicList()
@@ -210,7 +236,7 @@ onMounted(() => {
   <div class="music-page">
     <div class="page-header">
       <h1>音乐库</h1>
-      <div class="filter-container">
+      <div class="filter-container" v-if="activeTab === 'all'">
         <el-select v-model="selectedType" placeholder="音乐类型" clearable @change="handleTypeChange">
           <el-option
             v-for="item in musicTypes"
@@ -224,6 +250,7 @@ onMounted(() => {
           v-model="keyword"
           placeholder="搜索音乐"
           clearable
+          @clear="handleKeywordClear"
           @keyup.enter="handleSearch"
         >
           <template #suffix>
diff --git a/music-qianduan/src/views/Playlist.vue b/music-qianduan/src/views/Playlist.vue
index aaac174..f157a28 100644
--- a/music-qianduan/src/views/Playlist.vue
+++ b/music-qianduan/src/views/Playlist.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
@@ -129,6 +129,13 @@ const handleSearch = () => {
   fetchPlaylists()
 }
 
+const handleKeywordClear = () => {
+  keyword.value = ''
+  searchedKeyword.value = ''
+  currentPage.value = 1
+  fetchPlaylists()
+}
+
 // 处理分页变化
 const handlePageChange = (page) => {
   currentPage.value = page
@@ -205,6 +212,15 @@ const formatPlayCount = (count) => {
   }
 }
 
+
+watch(keyword, (val) => {
+  if (val === '' && searchedKeyword.value !== '') {
+    searchedKeyword.value = ''
+    currentPage.value = 1
+    fetchPlaylists()
+  }
+})
+
 onMounted(() => {
   fetchPlaylistTypes()
   fetchPlaylists()
@@ -221,6 +237,7 @@ onMounted(() => {
           v-model="keyword"
           placeholder="搜索歌单"
           clearable
+          @clear="handleKeywordClear"
           @keyup.enter="handleSearch"
         >
           <template #suffix>
diff --git a/music-qianduan/src/views/Singer.vue b/music-qianduan/src/views/Singer.vue
index 2907736..f89355d 100644
--- a/music-qianduan/src/views/Singer.vue
+++ b/music-qianduan/src/views/Singer.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
@@ -127,6 +127,13 @@ const handleSearch = () => {
   fetchSingers()
 }
 
+const handleKeywordClear = () => {
+  keyword.value = ''
+  searchedKeyword.value = ''
+  currentPage.value = 1
+  fetchSingers()
+}
+
 // 处理分页变化
 const handlePageChange = (page) => {
   currentPage.value = page
@@ -205,6 +212,15 @@ const formatFans = (count) => {
   }
 }
 
+
+watch(keyword, (val) => {
+  if (val === '' && searchedKeyword.value !== '') {
+    searchedKeyword.value = ''
+    currentPage.value = 1
+    fetchSingers()
+  }
+})
+
 onMounted(() => {
   fetchSingerTypes()
   fetchSingers()
@@ -221,6 +237,7 @@ onMounted(() => {
           v-model="keyword"
           placeholder="搜索歌手"
           clearable
+          @clear="handleKeywordClear"
           @keyup.enter="handleSearch"
         >
           <template #suffix>