🗄️ Store 状态管理

GlassMusicPlayer 使用 Pinia 进行状态管理，所有 Store 均支持持久化存储。

🎧 useAudioStore

音频播放器核心状态。

📁 文件位置：src/stores/modules/audio.ts

📊 状态

interface AudioStoreState {
  count: number
  audio: {
    audio: HTMLAudioElement | null  // 音频元素
    isPlaying: boolean              // 是否播放中
    isPaused: boolean               // 是否已暂停
    isLoading: boolean              // 是否加载中
    currentSong: Song | null        // 当前歌曲
    currentIndex: number            // 当前索引
    playlist: Song[]                // 播放列表
    originalPlaylist: Song[]        // 原始列表（随机模式用）
    playMode: PlayMode              // 播放模式
    volume: number                  // 音量 (0-1)
    isMuted: boolean                // 是否静音
    previousVolume: number          // 静音前的音量
    currentTime: number             // 当前时间（秒）
    duration: number                // 总时长（秒）
    playHistory: Song[]             // 播放历史
    error: string | null            // 错误信息
  }
}

🔁 播放模式枚举

enum PlayMode {
  LIST = 'list',      // 列表循环
  SINGLE = 'single',  // 单曲循环
  RANDOM = 'random',  // 随机播放
}

📤 Getters

Getter	返回类型	说明
`getCurrentSong`	`Song \| null`	当前歌曲
`getIsPlaying`	`boolean`	是否播放中
`getPlaylist`	`Song[]`	播放列表
`getPlayMode`	`PlayMode`	播放模式
`getVolume`	`number`	音量
`getIsMuted`	`boolean`	是否静音
`getCurrentTime`	`number`	当前时间
`getDuration`	`number`	总时长
`getProgress`	`number`	进度百分比
`hasNext`	`boolean`	是否有下一首
`hasPrevious`	`boolean`	是否有上一首

⚡ Actions

Action	参数	说明
`initAudio()`	-	初始化音频播放器
`setupAudioEvents()`	-	设置音频事件监听
`playSong(song?, index?)`	`Song`, `number`	播放歌曲
`refreshAndReplay()`	-	刷新播放地址并重试（URL过期时自动调用）
`pause()`	-	暂停
`resume()`	-	继续播放
`togglePlay()`	-	切换播放/暂停
`nextSong()`	-	下一首
`previousSong()`	-	上一首
`handleSongEnd()`	-	处理歌曲播放结束
`stop()`	-	停止播放
`togglePlayMode()`	-	切换播放模式
`setPlayMode(mode)`	`PlayMode`	设置播放模式
`shufflePlaylist()`	-	打乱播放列表
`setVolume(vol)`	`number`	设置音量
`toggleMute()`	-	切换静音
`setCurrentTime(time)`	`number`	设置播放时间
`setProgress(prog)`	`number`	设置播放进度
`addSong(song)`	`Song`	添加歌曲
`addSongs(songs)`	`Song[]`	批量添加
`removeSong(id)`	`string \| number`	移除歌曲
`removeSongs(ids)`	`Array`	批量移除
`moveSong(from, to)`	`number`, `number`	移动歌曲
`queueNext(id)`	`string \| number`	下一首播放
`clearPlaylist()`	-	清空列表
`setPlaylist(songs, startIndex?)`	`Song[]`, `number`	设置播放列表
`playByIndex(index)`	`number`	按索引播放
`addToHistory(song)`	`Song`	添加到历史
`clearHistory()`	-	清空历史
`clearError()`	-	清除错误
`destroy()`	-	销毁播放器

💾 持久化字段

count
audio.currentSong
audio.currentIndex
audio.playlist
audio.originalPlaylist
audio.playMode
audio.volume
audio.isMuted
audio.playHistory

🌐 useGlobalStore

全局应用状态。

📁 文件位置：src/stores/modules/global.ts

📊 状态

interface GlobalState {
  count: number
  theme?: 'light' | 'dark' | 'system'  // 主题模式
  searchHistory: string[]               // 搜索历史
  lang?: 'zh' | 'en' | 'ja'            // 语言
}

⚡ Actions

Action	参数	说明
`setGlobalState(key, value)`	`keyof GlobalState`, `any`	设置全局状态
`setTheme(theme)`	`'light' \| 'dark' \| 'system'`	设置主题
`toggleTheme()`	-	切换主题（浅/深）
`setLang(lang)`	`'zh' \| 'en' \| 'ja'`	设置语言
`addSearchHistory(q)`	`string`	添加搜索历史
`removeSearchHistory(q)`	`string`	移除搜索历史
`clearSearchHistory()`	-	清空搜索历史

⚙️ useSettingsStore

设置状态（背景、歌词显示等）。

📁 文件位置：src/stores/modules/settings.ts

📊 状态

interface SettingsState {
  aurora: AuroraSettingsState           // 极光背景设置
  colorBends: ColorBendsSettingsState   // 渐变背景设置
  ultimate: UltimateSettingsState       // 终极背景设置
  shadowBling: ShadowBlingSettingsState // 光影背景设置
  footerLyrics: FooterLyricsSettingsState // 底栏歌词设置
  audioVisualizer: AudioVisualizerSettingsState // 音频可视化设置
  backgroundType: 'aurora' | 'colorbends' | 'ultimate' | 'shadowBling'
  audioQuality: AudioQuality            // 音频品质
}

🌌 Aurora 设置

interface AuroraSettingsState {
  colorStops: string[]        // 颜色数组
  amplitude: number           // 振幅
  blend: number               // 混合度
  speed: number               // 速度
  intensity: number           // 强度
  colorPositions: number[]    // 颜色位置
}

🌈 ColorBends 设置

interface ColorBendsSettingsState {
  colors: string[]            // 颜色数组
  rotation: number            // 旋转角度
  speed: number               // 速度
  scale: number               // 缩放
  frequency: number           // 频率
  warpStrength: number        // 扭曲强度
  mouseInfluence: number      // 鼠标影响
  parallax: number            // 视差
  noise: number               // 噪点
  transparent: boolean        // 透明
  autoRotate: number          // 自动旋转
}

✨ Ultimate 设置

interface UltimateSettingsState {
  bg1: string                 // 背景色1
  bg2: string                 // 背景色2
  color1: string              // 颜色1
  color2: string              // 颜色2
  color3: string              // 颜色3
  color4: string              // 颜色4
  color5: string              // 颜色5
  interactiveColor: string    // 交互颜色
  circleSize: string          // 圆形大小
  blending: string            // 混合模式
}

💫 ShadowBling 设置

interface ShadowBlingSettingsState {
  bgColors: string[]          // 背景颜色数组
  speed: number               // 速度
  intensity: number           // 强度
}

🎵 底栏歌词设置

interface FooterLyricsSettingsState {
  enabled: boolean                           // 是否启用
  modes: Array<'original' | 'trans' | 'roma'> // 显示模式
}

🎨 音频可视化设置

interface AudioVisualizerSettingsState {
  enabledInFooter: boolean    // 底栏是否启用可视化
  enabledInDrawer: boolean    // 抽屉是否启用可视化
  visualizerType: 'bars' | 'wave' | 'circular' // 可视化类型
}

🎚️ 音频品质

type AudioQuality = 'standard' | 'higher' | 'exhigh' | 'lossless' | 'hires' | 'jyeffect' | 'sky' | 'jymaster'

值	说明
`standard`	标准品质
`higher`	较高品质
`exhigh`	极高品质
`lossless`	无损品质
`hires`	Hi-Res 品质
`jyeffect`	鲸云臻品音效
`sky`	沉浸环绕声
`jymaster`	超清母带

⚡ Actions

Action	参数	说明
`setBackgroundType(type)`	`'aurora' \| 'colorbends' \| 'ultimate' \| 'shadowBling'`	设置背景类型
`setAurora(partial)`	`Partial<AuroraSettingsState>`	更新极光设置
`setColorStops(stops)`	`string[]`	设置极光颜色
`setColorPositions(positions)`	`number[]`	设置极光颜色位置
`resetAurora()`	-	重置极光设置
`setColorBends(partial)`	`Partial<ColorBendsSettingsState>`	更新渐变设置
`setBendsColors(colors)`	`string[]`	设置渐变颜色
`resetColorBends()`	-	重置渐变设置
`setUltimate(partial)`	`Partial<UltimateSettingsState>`	更新终极设置
`resetUltimate()`	-	重置终极设置
`setShadowBling(partial)`	`Partial<ShadowBlingSettingsState>`	更新光影设置
`resetShadowBling()`	-	重置光影设置
`setFooterLyricsEnabled(val)`	`boolean`	设置底栏歌词开关
`setFooterLyricsModes(modes)`	`Array`	设置底栏歌词模式
`setAudioQuality(quality)`	`AudioQuality`	设置音频品质
`setAudioVisualizerFooter(enabled)`	`boolean`	设置底栏可视化开关
`setAudioVisualizerDrawer(enabled)`	`boolean`	设置抽屉可视化开关
`setAudioVisualizerType(type)`	`'bars' \| 'wave' \| 'circular'`	设置可视化类型

👤 useUserStore

用户登录状态。

📁 文件位置：src/stores/modules/user.ts

📊 状态

interface UserState {
  isLoggedIn: boolean           // 是否已登录
  profile: UserProfile | null   // 用户资料
  lastLoginAt: number           // 上次登录时间
}

interface UserProfile {
  userId: number
  nickname: string
  avatarUrl: string
  vipType?: number
}

📤 Getters

Getter	返回类型	说明
`nickname`	`string`	用户昵称
`avatarUrl`	`string`	头像 URL

⚡ Actions

Action	参数	说明
`setUser(profile)`	`UserProfile`	设置用户信息
`logout()`	-	退出登录

💾 持久化字段

isLoggedIn
profile
lastLoginAt

💾 useLocalMusicStore

本地音乐管理状态。

📁 文件位置：src/stores/modules/localMusic.ts

📊 状态

interface LocalMusicState {
  musics: LocalMusic[]     // 本地音乐列表
  isLoading: boolean       // 是否加载中
}

interface LocalMusic {
  id: string               // 唯一标识
  name: string             // 歌曲名称
  artist: string           // 艺术家
  album: string            // 专辑名称
  duration: number         // 时长（秒）
  cover: string            // 封面（Base64）
  file: File               // 音频文件
  createTime: number       // 添加时间戳
}

⚡ Actions

Action	参数	返回值	说明
`loadMusics()`	-	`Promise<void>`	从 IndexedDB 加载所有本地音乐
`addMusic(file)`	`File`	`Promise<LocalMusic>`	添加本地音乐（自动解析元数据）
`deleteMusic(id)`	`string`	`Promise<void>`	删除本地音乐
`convertToSong(music)`	`LocalMusic`	`Song`	将本地音乐转换为播放器可用的 Song 对象

💡 使用示例

vue

<script setup lang="ts">
import { useLocalMusicStore } from '@/stores/modules/localMusic'

const localMusicStore = useLocalMusicStore()

// 加载本地音乐
onMounted(() => {
  localMusicStore.loadMusics()
})

// 添加本地音乐
const handleFileSelect = async (file: File) => {
  const music = await localMusicStore.addMusic(file)
  console.log('Added:', music.name)
}

// 播放本地音乐
const playLocalMusic = (music: LocalMusic) => {
  const song = localMusicStore.convertToSong(music)
  audioStore.playSong(song)
}
</script>

🎵 支持的音频格式

本地音乐功能支持大多数常见音频格式：

MP3、FLAC、WAV、OGG、AAC、M4A 等
使用 music-metadata-browser 库解析元数据
自动提取专辑封面、艺术家、专辑名等信息

🗄️ Store 状态管理 ​

🎧 useAudioStore ​

📊 状态 ​

🔁 播放模式枚举 ​

📤 Getters ​

⚡ Actions ​

💾 持久化字段 ​

🌐 useGlobalStore ​

📊 状态 ​

⚡ Actions ​

⚙️ useSettingsStore ​

📊 状态 ​

🌌 Aurora 设置 ​

🌈 ColorBends 设置 ​

✨ Ultimate 设置 ​

💫 ShadowBling 设置 ​

🎵 底栏歌词设置 ​

🎨 音频可视化设置 ​

🎚️ 音频品质 ​

⚡ Actions ​

👤 useUserStore ​

📊 状态 ​

📤 Getters ​

⚡ Actions ​

💾 持久化字段 ​

💾 useLocalMusicStore ​

📊 状态 ​

⚡ Actions ​

💡 使用示例 ​

🎵 支持的音频格式 ​

🗄️ Store 状态管理

🎧 useAudioStore

📊 状态

🔁 播放模式枚举

📤 Getters

⚡ Actions

💾 持久化字段

🌐 useGlobalStore

📊 状态

⚡ Actions

⚙️ useSettingsStore

📊 状态

🌌 Aurora 设置

🌈 ColorBends 设置

✨ Ultimate 设置

💫 ShadowBling 设置

🎵 底栏歌词设置

🎨 音频可视化设置

🎚️ 音频品质

⚡ Actions

👤 useUserStore

📊 状态

📤 Getters

⚡ Actions

💾 持久化字段

💾 useLocalMusicStore

📊 状态

⚡ Actions

💡 使用示例

🎵 支持的音频格式