refactor: replace console statements with debug instances

- Replace all console.log/error/warn statements with appropriate debug instances
- Add debug utils with modular debug instances for different components
- Use debugUI for UI components (pages and components)
- Use debugStore for store files
- Use debugUtils for utility functions
- Use debugPlayroom for Playroom specific debugging
- Use debugLyrics for lyrics-related debugging
- Use debugVisualizer for audio visualization debugging
- Use debugResource for resource checking debugging
- Maintain original message content with Chinese descriptions
- Preserve Tab indentation throughout all files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Astrian Zheng 2025-08-19 13:24:39 +10:00
parent 210700bc0d
commit 60740274b7
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
16 changed files with 104 additions and 37 deletions

24
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@tailwindcss/vite": "^4.1.7",
"axios": "^1.9.0",
"debug": "^4.4.1",
"gsap": "^3.13.0",
"pinia": "^3.0.2",
"tailwindcss": "^4.1.7",
@ -1613,6 +1614,23 @@
"dev": true,
"license": "MIT"
},
"node_modules/debug": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -2295,6 +2313,12 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"license": "MIT"
},
"node_modules/muggle-string": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",

View File

@ -22,6 +22,7 @@
"dependencies": {
"@tailwindcss/vite": "^4.1.7",
"axios": "^1.9.0",
"debug": "^4.4.1",
"gsap": "^3.13.0",
"pinia": "^3.0.2",
"tailwindcss": "^4.1.7",

View File

@ -8,6 +8,7 @@ import LeftArrowIcon from './assets/icons/leftarrow.vue'
// import SearchIcon from './assets/icons/search.vue'
import CorgIcon from './assets/icons/corg.vue'
import { watch } from 'vue'
import { debug } from './utils/debug'
import UpdatePopup from './components/UpdatePopup.vue'
@ -17,7 +18,7 @@ const route = useRoute()
const router = useRouter()
watch(() => presentPreferencePanel, (value) => {
console.log(value)
debug('偏好设置面板显示状态', value)
})
</script>

View File

@ -11,6 +11,7 @@ import { artistsOrganize } from '../utils'
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import TrackItem from './TrackItem.vue'
import LoadingIndicator from '../assets/icons/loadingindicator.vue'
import { debugUI } from '../utils/debug'
const props = defineProps<{
albumCid: string
@ -97,7 +98,7 @@ watch(() => props.present, async (newVal) => {
})
watch(() => props.albumCid, async () => {
console.log("AlbumDetailDialog mounted with albumCid:", props.albumCid)
debugUI('专辑详情对话框加载', props.albumCid)
album.value = undefined // Reset album when cid changes
try {
let res = await apis.getAlbum(props.albumCid)
@ -106,7 +107,7 @@ watch(() => props.albumCid, async () => {
}
album.value = res
} catch (error) {
console.error(error)
debugUI('专辑详情加载失败', error)
}
})

View File

@ -291,7 +291,7 @@ if (isAudioVisualizationSupported) {
isAnalyzing = visualizer.isAnalyzing
error = visualizer.error
console.log('[Player] audioVisualizer 返回值:', {
debugPlayer('audioVisualizer 返回值:', {
barHeights: barHeights.value,
isAnalyzing: isAnalyzing.value,
})

View File

@ -90,6 +90,7 @@ import { onMounted, ref, watch, nextTick, computed, onUnmounted } from 'vue'
import axios from 'axios'
import gsap from 'gsap'
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import { debugLyrics } from '../utils/debug'
//
interface LyricsLine {
@ -367,7 +368,7 @@ function handleWheel(event: WheelEvent) {
//
function handleLineClick(line: LyricsLine | GapLine, index: number) {
if (line.type === 'lyric') {
console.log('Jump to time:', line.time)
debugLyrics('跳转到时间点', line.time)
//
// emit('seek', line.time)
}
@ -494,7 +495,7 @@ watch(() => playQueueStore.currentTime, (time) => {
//
watch(() => props.lrcSrc, async (newSrc) => {
console.log('Loading new lyrics from:', newSrc)
debugLyrics('加载新歌词', newSrc)
//
currentLineIndex.value = -1
lineRefs.value = []
@ -517,7 +518,7 @@ watch(() => props.lrcSrc, async (newSrc) => {
try {
const response = await axios.get(newSrc)
parsedLyrics.value = parseLyrics(response.data)
console.log('Parsed lyrics:', parsedLyrics.value)
debugLyrics('歌词解析完成', parsedLyrics.value)
autoScroll.value = true
userScrolling.value = false
@ -528,7 +529,7 @@ watch(() => props.lrcSrc, async (newSrc) => {
}
} catch (error) {
console.error('Failed to load lyrics:', error)
debugLyrics('歌词加载失败', error)
parsedLyrics.value = []
} finally {
loading.value = false

View File

@ -4,6 +4,7 @@ import { ref } from 'vue'
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import { useToast } from 'vue-toast-notification'
import { useFavourites } from '../stores/useFavourites'
import { debugUI } from '../utils/debug'
import QueueAddIcon from '../assets/icons/queueadd.vue'
import StarEmptyIcon from '../assets/icons/starempty.vue'
@ -23,7 +24,7 @@ const toast = useToast()
const favourites = useFavourites()
function appendToQueue() {
console.log('aaa')
debugUI('添加歌曲到队列')
let queue = playQueueStore.list
queue.push({
song: props.track,
@ -41,7 +42,7 @@ function appendToQueue() {
<template>
<button
class="flex justify-between align-center gap-4 text-left px-2 h-[2.75rem] hover:bg-neutral-600/40 odd:bg-netural-600/20 relative overflow-hidden bg-neutral-800/20 odd:bg-neutral-800/40 transition-all"
@click="playfrom(index)" @mouseenter="() => { hover = true; console.log('aaa') }" @mouseleave="hover = false">
@click="playfrom(index)" @mouseenter="() => { hover = true; debugUI('鼠标悬停在歌曲项') }" @mouseleave="hover = false">
<span class="text-[3.7rem] text-white/10 absolute left-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>

View File

@ -5,6 +5,7 @@ import { useRoute } from 'vue-router'
import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import { artistsOrganize } from '../utils'
import TrackItem from '../components/TrackItem.vue'
import { debugUI } from '../utils/debug'
import PlayIcon from '../assets/icons/play.vue'
import StarEmptyIcon from '../assets/icons/starempty.vue'
@ -24,9 +25,9 @@ onMounted(async () => {
res.songs[parseInt(track)] = await apis.getSong(res.songs[parseInt(track)].cid)
}
album.value = res
console.log(res)
debugUI('专辑详情加载完成', res)
} catch (error) {
console.log(error)
debugUI('专辑详情加载失败', error)
}
})
@ -38,7 +39,7 @@ function playTheAlbum(from: number = 0) {
let newPlayQueue = []
for (const track of album.value?.songs ?? []) {
console.log(track)
debugUI('添加歌曲到播放队列', track)
newPlayQueue.push({
song: track,
album: album.value

View File

@ -2,6 +2,7 @@
import StarFilledIcon from '../assets/icons/starfilled.vue'
import PlayIcon from '../assets/icons/play.vue'
import ShuffleIcon from '../assets/icons/shuffle.vue'
import { debugUI } from '../utils/debug'
import { useFavourites } from '../stores/useFavourites'
import { ref } from 'vue'
@ -124,7 +125,7 @@ function shuffle(list: 'favourites' | number) {
<div class="flex flex-col gap-2 mt-4 mr-8 pb-8">
<PlayListItem v-for="(item, index) in favourites.favourites.slice().reverse()" :key="item.song.cid" :item="item"
:index="index" @play="(playFrom) => {
console.log('play from', playFrom)
debugUI('从收藏库播放', playFrom)
playTheList('favourites', playFrom)
}" />
</div>

View File

@ -8,6 +8,7 @@ import { useTemplateRef } from 'vue'
import { ref, watch } from 'vue'
import { usePreferences } from '../stores/usePreferences'
import { useFavourites } from '../stores/useFavourites'
import { debugPlayroom } from '../utils/debug'
import ScrollingLyrics from '../components/ScrollingLyrics.vue'
@ -132,14 +133,14 @@ function toggleVolumeControl() {
function createVolumeDraggable() {
if (!volumeSliderThumb.value || !volumeSliderContainer.value) {
console.warn('Volume slider elements not found')
debugPlayroom('音量滑块元素未找到')
return
}
//
const containerWidth = volumeSliderContainer.value.clientWidth
if (containerWidth === 0) {
console.warn('Volume slider container has no width')
debugPlayroom('音量滑块容器宽度为0')
return
}
@ -164,7 +165,7 @@ function createVolumeDraggable() {
}
})
console.log('Volume draggable created successfully')
debugPlayroom('音量滑块拖拽创建成功')
}
function updateAudioVolume() {
@ -187,7 +188,7 @@ function formatDetector() {
function playNext() {
if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
console.log("at the bottom, pause")
debugPlayroom('到达播放队列末尾,暂停')
playQueueStore.currentIndex = 0
playQueueStore.isPlaying = false
} else {
@ -305,7 +306,7 @@ function makePlayQueueListDismiss() {
}
function getCurrentTrack() {
console.log(playQueueStore.queue)
debugPlayroom('获取当前播放轨道', playQueueStore.queue)
if (playQueueStore.queue.length === 0) {
return null
}
@ -438,10 +439,10 @@ function setupPageFocusHandlers() {
handleVisibilityChange = () => {
if (document.hidden) {
//
console.log('[Playroom] 页面失去焦点,暂停动画')
debugPlayroom('页面失去焦点,暂停动画')
} else {
//
console.log('[Playroom] 页面重新获得焦点,同步状态')
debugPlayroom('页面重新获得焦点,同步状态')
nextTick(() => {
resyncLyricsState()
})
@ -449,7 +450,7 @@ function setupPageFocusHandlers() {
}
handlePageFocus = () => {
console.log('[Playroom] 窗口获得焦点,同步状态')
debugPlayroom('窗口获得焦点,同步状态')
nextTick(() => {
resyncLyricsState()
})
@ -465,7 +466,7 @@ function resyncLyricsState() {
const currentTrack = getCurrentTrack()
if (!currentTrack) { return }
console.log('[Playroom] 重新同步歌词状态')
debugPlayroom('重新同步歌词状态')
//
if (controllerRef.value) {
@ -488,7 +489,7 @@ function resyncLyricsState() {
const shouldShowLyrics = preferences.presentLyrics && currentTrack.song.lyricUrl ? true : false
if (shouldShowLyrics !== presentLyrics.value) {
console.log(`[Playroom] 歌词状态不一致,重新设置: ${presentLyrics.value} -> ${shouldShowLyrics}`)
debugPlayroom(`歌词状态不一致,重新设置: ${presentLyrics.value} -> ${shouldShowLyrics}`)
//
presentLyrics.value = shouldShowLyrics

View File

@ -1,5 +1,6 @@
import { defineStore } from "pinia"
import { ref, watch, computed } from "vue"
import { debugStore } from '../utils/debug'
// 声明全局类型
declare global {
@ -293,7 +294,7 @@ export const useFavourites = defineStore('favourites', () => {
await saveFavourites()
} catch (error) {
// 保存失败时可以考虑回滚或错误处理
console.error('Failed to save updated song:', error)
debugStore('更新歌曲信息保存失败', error)
}
}
}

View File

@ -1,5 +1,6 @@
import { defineStore } from "pinia"
import { ref } from "vue"
import { debugStore } from '../utils/debug'
// 声明全局类型
declare global {
@ -153,7 +154,7 @@ export const useUpdatePopup = defineStore('updatePopup', () => {
return false
} catch (error) {
console.error('检查更新弹窗状态失败:', error)
debugStore('检查更新弹窗状态失败', error)
return false
}
}
@ -166,7 +167,7 @@ export const useUpdatePopup = defineStore('updatePopup', () => {
await setStoredValue('lastUpdatePopupVersion', currentVersion)
}
} catch (error) {
console.error('标记更新弹窗已显示失败:', error)
debugStore('标记更新弹窗已显示失败', error)
}
}
@ -182,7 +183,7 @@ export const useUpdatePopup = defineStore('updatePopup', () => {
detectAvailableAPIs()
isLoaded.value = true
} catch (error) {
console.error('初始化更新弹窗 store 失败:', error)
debugStore('初始化更新弹窗 store 失败', error)
isLoaded.value = true
}
}

View File

@ -1,5 +1,6 @@
// utils/audioVisualizer.ts - 平衡频谱版本
import { ref, onUnmounted, Ref } from 'vue'
import { debugVisualizer } from './debug'
interface AudioVisualizerOptions {
sensitivity?: number
@ -27,7 +28,7 @@ export function audioVisualizer(options: AudioVisualizerOptions = {}) {
minHeight = 0 // 最小高度百分比
} = options
console.log('[AudioVisualizer] 初始化平衡频谱,选项:', options)
debugVisualizer('初始化平衡频谱', options)
// 导出的竖杠高度值数组 (0-100)
const barHeights: Ref<number[]> = ref(Array(barCount).fill(0))
@ -46,7 +47,7 @@ export function audioVisualizer(options: AudioVisualizerOptions = {}) {
// 调试日志
function log(...args: any[]) {
if (debug) {
console.log('[AudioVisualizer]', ...args)
debugVisualizer(...args)
}
}

View File

@ -1,6 +1,7 @@
/**
*
*/
import { debugUtils } from './debug'
/**
* Safari
@ -39,7 +40,7 @@ export function supportsWebAudioVisualization(): boolean {
// Safari 在某些情况下对 AudioContext 的支持有限制
// 特别是在处理跨域音频资源时
if (isSafari()) {
console.log('[BrowserDetection] Safari detected, audio visualization disabled')
debugUtils('Safari浏览器检测音频可视化禁用')
return false
}

30
src/utils/debug.ts Normal file
View File

@ -0,0 +1,30 @@
import createDebug from 'debug'
// 创建不同模块的 debug 实例
export const debugPlayer = createDebug('msr:player')
export const debugStore = createDebug('msr:store')
export const debugApi = createDebug('msr:api')
export const debugUI = createDebug('msr:ui')
export const debugUtils = createDebug('msr:utils')
export const debugVisualizer = createDebug('msr:visualizer')
export const debugResource = createDebug('msr:resource')
export const debugLyrics = createDebug('msr:lyrics')
export const debugPlayroom = createDebug('msr:playroom')
// 通用 debug 实例
export const debug = createDebug('msr:app')
// 在开发环境下默认启用所有 debug
if (import.meta.env.DEV) {
// 从环境变量或 localStorage 读取 DEBUG 设置
const debugEnv = import.meta.env.VITE_DEBUG || localStorage.getItem('DEBUG')
if (debugEnv) {
createDebug.enable(debugEnv)
} else {
// 开发环境默认启用所有 msr: 相关的调试
createDebug.enable('msr:*')
}
}
// 导出 createDebug 以便其他地方创建自定义实例
export default createDebug

View File

@ -1,5 +1,6 @@
import axios from 'axios'
import apis from '../apis'
import { debugResource } from './debug'
/**
* URL
@ -12,7 +13,7 @@ export const checkAndRefreshSongResource = async (
updateCallback?: (updatedSong: Song) => void
): Promise<Song> => {
if (!song.sourceUrl) {
console.warn('[ResourceChecker] 歌曲没有 sourceUrl:', song.name)
debugResource('歌曲没有 sourceUrl', song.name)
return song
}
@ -31,15 +32,15 @@ export const checkAndRefreshSongResource = async (
})
// 资源可用,返回原始歌曲
console.log('[ResourceChecker] 资源可用:', song.name)
debugResource('资源可用', song.name)
return song
} catch (error) {
// 资源不可用,刷新歌曲信息
console.log('[ResourceChecker] 资源不可用,正在刷新:', song.name, error)
debugResource('资源不可用,正在刷新', song.name, error)
try {
const updatedSong = await apis.getSong(song.cid)
console.log('[ResourceChecker] 歌曲信息已刷新:', updatedSong.name)
debugResource('歌曲信息已刷新', updatedSong.name)
// 调用更新回调(如果提供)
if (updateCallback) {
@ -48,7 +49,7 @@ export const checkAndRefreshSongResource = async (
return updatedSong
} catch (refreshError) {
console.error('[ResourceChecker] 刷新歌曲信息失败:', refreshError)
debugResource('刷新歌曲信息失败', refreshError)
// 刷新失败,返回原始歌曲
return song
}