修复音乐页三标签筛选与搜索一致性

music-qianduan/src/views/Music.vue

@@ -25,11 +25,42 @@ const musicTypes = ref([])
 
 // 标签页
 const activeTab = ref('all')
+const hotMusicSource = ref([])
 const hotMusicList = ref([])
+const latestMusicSource = ref([])
 const latestMusicList = ref([])
 const loadingHot = ref(false)
 const loadingLatest = ref(false)
 
+const getMusicTypeId = (music) => {
+  return music?.typeId ?? music?.musicTypeId ?? music?.type?.id ?? null
+}
+
+const applyMusicFilter = (list = []) => {
+  const normalizedKeyword = keyword.value.trim().toLowerCase()
+
+  return list.filter((music) => {
+    const matchType = selectedType.value == null || getMusicTypeId(music) === selectedType.value
+
+    if (!normalizedKeyword) {
+      return matchType
+    }
+
+    const searchText = [
+      music.name,
+      music.typeName,
+      music.album,
+      music.singer,
+      ...(Array.isArray(music.singerNames) ? music.singerNames : [])
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+
+    return matchType && searchText.includes(normalizedKeyword)
+  })
+}
+
 // 获取音乐列表
 const fetchMusicList = async (params = {}) => {
   loading.value = true
@@ -43,8 +74,6 @@ const fetchMusicList = async (params = {}) => {
       musicList.value = res.data.list || res.data.records || []
       total.value = res.data.total || 0
 
-      console.log('音乐列表数据:', res.data)
-
       // 确保音乐URL和封面URL正确处理
       musicList.value.forEach(music => {
         if (music.url) {
@@ -68,6 +97,21 @@ const fetchMusicList = async (params = {}) => {
   }
 }
 
+const updateHotMusicView = (params = {}) => {
+  const filteredList = applyMusicFilter(hotMusicSource.value)
+  const page = params.page || currentPage.value
+  const size = params.size || pageSize.value
+
+  total.value = filteredList.length
+  const startIndex = (page - 1) * size
+  const endIndex = startIndex + size
+  hotMusicList.value = filteredList.slice(startIndex, endIndex)
+}
+
+const updateLatestMusicView = () => {
+  latestMusicList.value = applyMusicFilter(latestMusicSource.value)
+}
+
 // 获取音乐类型列表
 const fetchMusicTypes = async () => {
   try {
@@ -85,28 +129,52 @@ const fetchMusicTypes = async () => {
 
 // 处理搜索
 const handleSearch = () => {
-  if (activeTab.value !== 'all') {
+  currentPage.value = 1
+
+  if (activeTab.value === 'hot') {
+    updateHotMusicView({ page: 1, size: pageSize.value })
     return
   }
-  currentPage.value = 1
+
+  if (activeTab.value === 'latest') {
+    updateLatestMusicView()
+    return
+  }
+
   fetchMusicList()
 }
 
 const handleKeywordClear = () => {
-  if (activeTab.value !== 'all') {
-    return
-  }
   keyword.value = ''
   currentPage.value = 1
+
+  if (activeTab.value === 'hot') {
+    updateHotMusicView({ page: 1, size: pageSize.value })
+    return
+  }
+
+  if (activeTab.value === 'latest') {
+    updateLatestMusicView()
+    return
+  }
+
   fetchMusicList()
 }
 
 // 处理类型变化
 const handleTypeChange = () => {
-  if (activeTab.value !== 'all') {
+  currentPage.value = 1
+
+  if (activeTab.value === 'hot') {
+    updateHotMusicView({ page: 1, size: pageSize.value })
     return
   }
-  currentPage.value = 1
+
+  if (activeTab.value === 'latest') {
+    updateLatestMusicView()
+    return
+  }
+
   fetchMusicList()
 }
 
@@ -144,25 +212,19 @@ const fetchHotMusic = async (params = {}) => {
     // 从缓存中获取全部50条热门音乐
     const res = await getHotMusic(50)
     if (res.code === 200) {
-      const allHotMusic = res.data || []
-      total.value = allHotMusic.length // 总数是50
+      hotMusicSource.value = res.data || []
 
       // 处理URL
-      allHotMusic.forEach(music => {
+      hotMusicSource.value.forEach(music => {
         if (music.url) music.url = processMusicUrl(music.url)
         if (music.cover) music.cover = processMusicUrl(music.cover)
       })
 
       // 更新状态
-      await updateMusicStatuses(allHotMusic)
-
-      // 根据当前页码和每页数量进行前端分页
-      const page = params.page || currentPage.value
-      const size = params.size || pageSize.value
-      const startIndex = (page - 1) * size
-      const endIndex = startIndex + size
-      hotMusicList.value = allHotMusic.slice(startIndex, endIndex)
+      await updateMusicStatuses(hotMusicSource.value)
 
+      // 根据筛选和分页展示
+      updateHotMusicView(params)
     } else {
       ElMessage.error(res.message || '获取热门音乐失败')
     }
@@ -180,10 +242,10 @@ const fetchLatestMusic = async () => {
   try {
     const res = await getLatestMusic(20) // 获取20首最新音乐
     if (res.code === 200) {
-      latestMusicList.value = res.data || []
+      latestMusicSource.value = res.data || []
 
       // 处理音乐URL和封面URL
-      latestMusicList.value.forEach(music => {
+      latestMusicSource.value.forEach(music => {
         if (music.url) {
           music.url = processMusicUrl(music.url)
         }
@@ -193,7 +255,8 @@ const fetchLatestMusic = async () => {
       })
 
       // 更新状态
-      updateMusicStatuses(latestMusicList.value)
+      await updateMusicStatuses(latestMusicSource.value)
+      updateLatestMusicView()
     } else {
       ElMessage.error(res.message || '获取最新音乐失败')
     }
@@ -207,21 +270,31 @@ const fetchLatestMusic = async () => {
 
 // 切换标签页
 const handleTabChange = (tab) => {
-  currentPage.value = 1; // 重置页码
+  currentPage.value = 1 // 重置页码
   if (tab.paneName === 'hot') {
-    fetchHotMusic();
+    fetchHotMusic({ page: 1, size: pageSize.value })
   } else if (tab.paneName === 'latest') {
-    fetchLatestMusic();
+    fetchLatestMusic()
   } else {
-    fetchMusicList();
+    fetchMusicList({ page: 1, size: pageSize.value })
   }
 }
 
-
 watch(keyword, (val) => {
-  if (val === '' && activeTab.value === 'all') {
+  if (val === '') {
     currentPage.value = 1
-    fetchMusicList()
+
+    if (activeTab.value === 'hot') {
+      updateHotMusicView({ page: 1, size: pageSize.value })
+      return
+    }
+
+    if (activeTab.value === 'latest') {
+      updateLatestMusicView()
+      return
+    }
+
+    fetchMusicList({ page: 1, size: pageSize.value })
   }
 })
 
@@ -236,7 +309,7 @@ onMounted(() => {
   <div class="music-page">
     <div class="page-header">
       <h1>音乐库</h1>
-      <div class="filter-container" v-if="activeTab === 'all'">
+      <div class="filter-container">
         <el-select v-model="selectedType" placeholder="音乐类型" clearable @change="handleTypeChange">
           <el-option
             v-for="item in musicTypes"
@@ -282,7 +355,7 @@ onMounted(() => {
           :total="total"
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          @page-change="fetchHotMusic"
+          @page-change="updateHotMusicView"
           @collect-change="handleCollectChange"
         />
       </el-tab-pane>