fix(frontend): 收敛重复错误弹窗并统一去重处理

music-qianduan/src/api/index.js

@@ -89,7 +89,12 @@ api.interceptors.response.use(
         // 其他错误
         ElMessage.error(res.message || '未知错误')
       }
-      return Promise.reject(new Error(res.message || '未知错误'))
+      const businessError = new Error(res.message || '未知错误')
+      businessError.code = res.code
+      businessError.message = res.message || '未知错误'
+      // 标记为已提示，避免页面 catch 再次弹窗
+      businessError.__handled = true
+      return Promise.reject(businessError)
     } else {
       return res
     }
@@ -111,11 +116,16 @@ api.interceptors.response.use(
     // 处理网络错误
     if (error.message && error.message.includes('timeout')) {
       ElMessage.error('请求超时，请稍后再试')
+      error.message = '请求超时，请稍后再试'
     } else if (error.message && error.message.includes('Network Error')) {
       ElMessage.error('网络错误，请检查网络连接')
+      error.message = '网络错误，请检查网络连接'
     } else {
       ElMessage.error(error.message || '未知错误')
+      error.message = error.message || '未知错误'
     }
+    // 标记为已提示，避免页面 catch 再次弹窗
+    error.__handled = true
     return Promise.reject(error)
   }
 )

music-qianduan/src/utils/errorHandler.js

@@ -0,0 +1,16 @@
+import { ElMessage } from 'element-plus'
+
+/**
+ * 统一错误提示入口，避免拦截器和页面重复弹窗
+ * @param {Error|Object|string} error 错误对象
+ * @param {string} fallbackMsg 兜底提示文案
+ */
+export const showErrorOnce = (error, fallbackMsg = '操作失败，请稍后重试') => {
+  // 已在请求拦截器中提示过，则直接跳过
+  if (error && error.__handled) {
+    return
+  }
+
+  const message = error?.message || fallbackMsg
+  ElMessage.error(message)
+}

music-qianduan/src/views/MusicDetail.vue

@@ -263,6 +263,7 @@ import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { VideoPlay, VideoPause, Star, StarFilled, Plus } from '@element-plus/icons-vue'
 import { processImageUrl } from '../utils/imageUtils'
+import { showErrorOnce } from '../utils/errorHandler'
 
 const route = useRoute()
 const router = useRouter()
@@ -425,7 +426,7 @@ const submitComment = async (isReply = false) => {
     }
   } catch (error) {
     console.error('提交评论失败:', error);
-    ElMessage.error('评论失败，请稍后重试');
+    showErrorOnce(error, '评论失败，请稍后重试');
   }
 };
 
@@ -449,7 +450,7 @@ const deleteComment = async (commentId) => {
   } catch (error) {
     if (error !== 'cancel') {
       console.error('删除评论失败:', error);
-      ElMessage.error('删除失败，请稍后重试');
+      showErrorOnce(error, '删除失败，请稍后重试');
     }
   }
 };
@@ -560,7 +561,7 @@ const toggleCollect = async () => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 
@@ -583,7 +584,7 @@ const toggleLike = async () => {
     }
   } catch (error) {
     console.error('点赞操作失败:', error);
-    ElMessage.error('操作失败，请稍后重试');
+    showErrorOnce(error, '操作失败，请稍后重试');
   }
 };
 

music-qianduan/src/views/Playlist.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
+import { showErrorOnce } from '../utils/errorHandler'
 import { Search, Headset } from '@element-plus/icons-vue'
 import { getPlaylistList, getHotPlaylist, toggleCollectPlaylist, isPlaylistCollected, uncollectPlaylist, collectPlaylist } from '../api/playlist'
 import { getPlaylistTypeList } from '../api/playlistType'
@@ -170,7 +171,7 @@ const toggleCollect = async (playlist) => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 

music-qianduan/src/views/PlaylistDetail.vue

@@ -9,6 +9,7 @@ import { getMusicStatus } from '../api/music'
 import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
 import { processImageUrl } from '../utils/imageUtils'
+import { showErrorOnce } from '../utils/errorHandler'
 import MusicList from '../components/MusicList.vue'
 
 const route = useRoute()
@@ -201,7 +202,7 @@ const toggleCollect = async () => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 
@@ -226,7 +227,7 @@ const deleteComment = async (commentId) => {
   } catch (error) {
     if (error !== 'cancel') {
       console.error('删除评论失败:', error)
-      ElMessage.error('删除失败，请稍后重试')
+      showErrorOnce(error, '删除失败，请稍后重试')
     }
   }
 }
@@ -319,7 +320,7 @@ const submitComment = async (isReply = false) => {
     }
   } catch (error) {
     console.error('提交评论失败:', error)
-    ElMessage.error('评论失败，请稍后重试')
+    showErrorOnce(error, '评论失败，请稍后重试')
   }
 }
 
@@ -364,7 +365,7 @@ const submitEdit = async () => {
     }
   } catch (error) {
     console.error('更新歌单失败:', error)
-    ElMessage.error('更新失败，请稍后重试')
+    showErrorOnce(error, '更新失败，请稍后重试')
   }
 }
 
@@ -390,7 +391,7 @@ const deletePlaylist = () => {
       }
     } catch (error) {
       console.error('删除歌单失败:', error)
-      ElMessage.error('删除失败，请稍后重试')
+      showErrorOnce(error, '删除失败，请稍后重试')
     }
   }).catch(() => {})
 }
@@ -510,7 +511,7 @@ const deleteFromPlaylist = async (music) => {
   } catch (error) {
     if (error !== 'cancel') {
       console.error('移除歌曲失败:', error)
-      ElMessage.error('移除失败，请稍后重试')
+      showErrorOnce(error, '移除失败，请稍后重试')
     }
   }
 }

music-qianduan/src/views/Search.vue

@@ -152,6 +152,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
+import { showErrorOnce } from '../utils/errorHandler'
 import { Search } from '@element-plus/icons-vue'
 import { searchMusic, toggleCollectMusic, getMusicStatus } from '../api/music'
 import { searchPlaylist, toggleCollectPlaylist } from '../api/playlist'
@@ -362,7 +363,7 @@ const handleCollectChange = async (id) => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 
@@ -387,7 +388,7 @@ const handleCollectPlaylist = async (id) => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 
@@ -414,7 +415,7 @@ const handleCollectSinger = async (id, event) => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 

music-qianduan/src/views/Singer.vue

@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '../stores/user'
 import { ElMessage } from 'element-plus'
+import { showErrorOnce } from '../utils/errorHandler'
 import { Search } from '@element-plus/icons-vue'
 import { getSingerList, getHotSinger, isSingerCollected, collectSinger, uncollectSinger } from '../api/singer'
 import { getSingerTypeList } from '../api/singerType'
@@ -170,7 +171,7 @@ const toggleCollect = async (singer, event) => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 

music-qianduan/src/views/SingerDetail.vue

@@ -7,6 +7,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getSingerById, isSingerCollected, collectSinger, uncollectSinger } from '../api/singer'
 import { getCommentList, addComment, deleteComment as apiDeleteComment } from '../api/comment'
 import { processImageUrl } from '../utils/imageUtils'
+import { showErrorOnce } from '../utils/errorHandler'
 import { processMusicUrl, getMusicBySinger, getMusicStatus } from '../api/music'
 import { connect, subscribe, unsubscribe, disconnect } from '../utils/websocket' // 导入 WebSocket 工具
 import MusicList from '../components/MusicList.vue'
@@ -219,7 +220,7 @@ const toggleCollect = async () => {
     }
   } catch (error) {
     console.error('收藏操作失败:', error)
-    ElMessage.error('操作失败，请稍后重试')
+    showErrorOnce(error, '操作失败，请稍后重试')
   }
 }
 
@@ -311,7 +312,7 @@ const submitComment = async (isReply = false) => {
     }
   } catch (error) {
     console.error('提交评论失败:', error)
-    ElMessage.error('评论失败，请稍后重试')
+    showErrorOnce(error, '评论失败，请稍后重试')
   }
 }
 
@@ -336,7 +337,7 @@ const deleteComment = async (commentId) => {
   } catch (error) {
     if (error !== 'cancel') {
       console.error('删除评论失败:', error)
-      ElMessage.error('删除失败，请稍后重试')
+      showErrorOnce(error, '删除失败，请稍后重试')
     }
   }
 }