修复音乐/歌单/歌手页搜索清空与标签筛选逻辑

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>

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>

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>