chore: 支持背景音乐音量设置

data/config.json

@@ -866,7 +866,8 @@
   ],
   "music": {
     "enabled": true,
-    "filePath": "/uploads/1765791477402.mp3"
+    "filePath": "",
+    "volume": "1"
   },
   "displayConfig": {
     "showBonusModule": true,

src/services/configService.js

@@ -105,7 +105,8 @@ const getDefaultConfig = () => ({
   // ========== 音乐配置默认值（和displayConfig同级） ==========
   music: {
     enabled: false,
-    filePath: ''
+    filePath: '',
+    volume: 0.5  // 默认音量50%
   },
   battleEndTime: {
     date: new Date().toISOString().split('T')[0],

src/utils/musicPlayer.js

@@ -5,6 +5,7 @@ class MusicPlayer {
     this.isPlaying = false; 
     this.defaultPath = "/assets/music/background.mp3"; 
     this.enabled = false; 
+    this.volume = 0.5; // 默认音量50%
   }
 
   /**
@@ -13,7 +14,7 @@ class MusicPlayer {
    */
   init(path) {
     // 组件调用 init 时，复用已有的 initMusicConfig，开关状态先传 this.enabled（后续组件会通过配置更新）
-    this.initMusicConfig(path, this.enabled);
+    this.initMusicConfig(path, this.enabled, this.volume);
   }
 
   /**
@@ -21,8 +22,9 @@ class MusicPlayer {
    * @param {string} filePath 音乐路径
    * @param {boolean} enabled 播放开关
    */
-  initMusicConfig(filePath, enabled) {
+  initMusicConfig(filePath, enabled, volume = 0.5) {
     this.enabled = enabled;
+    this.volume = volume;
     let validPath = this.defaultPath;
     if (filePath && filePath.endsWith('.mp3')) {
       validPath = filePath;
@@ -35,6 +37,7 @@ class MusicPlayer {
     }
     this.audio = new Audio(validPath);
     this.audio.loop = true;
+    this.audio.volume = this.volume;
   }
 
   /**
@@ -83,6 +86,20 @@ setMuted(muted) {
     console.log(muted ? "音乐已静音" : "音乐已取消静音");
   }
 }
+
+/**
+ * 设置音量
+ * @param {number} volume 音量值 (0.0 到 1.0)
+ */
+setVolume(volume) {
+  if (this.audio) {
+    // 限制音量范围在0.0到1.0之间
+    this.volume = Math.max(0, Math.min(1, volume));
+    this.audio.volume = this.volume;
+    console.log(`音乐音量已设置为: ${Math.round(this.volume * 100)}%`);
+  }
+}
+
   /**
    * 新增：stop 方法（组件 onUnmounted 调用，暂停+重置进度）
    */
@@ -124,7 +141,7 @@ setMuted(muted) {
       console.error("更新的音乐路径无效（非MP3格式）：", newPath);
       return;
     }
-    this.initMusicConfig(newPath, this.enabled);
+    this.initMusicConfig(newPath, this.enabled, this.volume);
     console.log("音乐路径已更新为：", newPath);
     if (this.enabled && this.isPlaying) {
       this.pause();

src/views/AdminPanel.vue

@@ -161,6 +161,14 @@
                 </label>
               </div>
               
+              <!-- 音量控制滑块 -->
+              <div class="config-item" style="margin: 15px 0;">
+                <label class="checkbox-label">
+                  <span class="text-gold">音乐音量调节：</span>
+                  <input type="range" min="0" max="1" step="0.01" v-model="musicVolume" @input="handleMusicVolumeChange" class="volume-slider">
+                  <span class="volume-value">{{ Math.round(musicVolume * 100) }}%</span>
+                </label>
+              </div>
               <!-- 提示文本（复用Logo上传的hint样式） -->
               <p class="upload-hint">
                 仅支持MP3格式音频文件，建议文件大小不超过10MB，上传后立即生效
@@ -919,6 +927,7 @@ const uploadMsg = ref(''); // 上传提示信息
 const musicEnabled = ref(false); // 首页播放开关状态
 const currentMusicPath = ref(''); // 当前音乐路径
 const musicList = ref([]); // 新增：已上传音乐列表
+const musicVolume = ref(0.5); // 音乐音量控制（0.0-1.0，默认50%）
 // 返回首页
 const goToHome = () => {
   router.push('/');
@@ -959,6 +968,7 @@ const initMusicConfig = async () => {
     const musicConfig = await getMusicConfig();
     musicEnabled.value = musicConfig.enabled || false;
     currentMusicPath.value = musicConfig.filePath || '';
+    musicVolume.value = musicConfig.volume !== undefined ? musicConfig.volume : 0.5; // 默认50%音量
     
     // 获取音乐文件列表
     const musicListResult = await getMusicList();
@@ -1114,7 +1124,8 @@ const handleMusicSwitchChange = async () => {
   try {
     await saveMusicConfig({
       enabled: musicEnabled.value,
-      filePath: currentMusicPath.value
+      filePath: currentMusicPath.value,
+      volume: musicVolume.value
     });
     
     uploadMsg.value = musicEnabled.value ? '✅ 背景音乐已开启' : '⏸️ 背景音乐已关闭';
@@ -1129,6 +1140,28 @@ const handleMusicSwitchChange = async () => {
   }
 };
 
+// 6.1 处理音量变化
+const handleMusicVolumeChange = async () => {
+  try {
+    await saveMusicConfig({
+      enabled: musicEnabled.value,
+      filePath: currentMusicPath.value,
+      volume: musicVolume.value
+    });
+    
+    // 更新播放器音量
+    musicPlayer.setVolume(musicVolume.value);
+    
+    uploadMsg.value = `✅ 音量已设置为 ${Math.round(musicVolume.value * 100)}%`;
+    setTimeout(() => {
+      uploadMsg.value = '';
+    }, 2000);
+  } catch (error) {
+    console.error('保存音乐配置失败:', error);
+    uploadMsg.value = '❌ 音量设置失败，请重试';
+  }
+};
+
 // 7. 测试播放音乐
 const testPlayMsg = ref('');
 
@@ -1140,9 +1173,9 @@ const testMusicPlay = () => {
 
   try {
     // 初始化音乐播放器（管理员页面强制启用播放）
-    musicPlayer.initMusicConfig(currentMusicPath.value, true);
+    musicPlayer.initMusicConfig(currentMusicPath.value, true, musicVolume.value);
     musicPlayer.play();
-    testPlayMsg.value = '🎵 开始播放音乐（管理员页面测试）';
+    testPlayMsg.value = `🎵 开始播放音乐（音量：${Math.round(musicVolume.value * 100)}%）`;
     
     setTimeout(() => {
       testPlayMsg.value = '';
@@ -1454,7 +1487,8 @@ const saveData = async () => {
     // 保存音乐配置
     currentConfig.music = {
       enabled: musicEnabled.value,
-      filePath: currentMusicPath.value
+      filePath: currentMusicPath.value,
+      volume: musicVolume.value
     };
 
     // 一次性保存所有配置
@@ -2438,4 +2472,18 @@ const deleteBonusRule = (index) => {
   background-color: #ffebee;
 }
 
+/* 音量控制滑块样式 */
+.volume-slider {
+  width: 200px;
+  margin: 0 10px;
+  vertical-align: middle;
+}
+
+.volume-value {
+  display: inline-block;
+  width: 40px;
+  text-align: center;
+  font-weight: bold;
+  color: #667eea;
+}
 </style>

src/views/BattleRanking.vue

@@ -896,7 +896,9 @@ onMounted(async () => {
     // 异步初始化数据
     await initializeData();
     if (localMusicConfig.value.enabled) {
-      musicPlayer.initMusicConfig(localMusicConfig.value.filePath, localMusicConfig.value.enabled);
+      // 获取音量设置，如果没有则使用默认值0.5
+      const volume = localMusicConfig.value.volume !== undefined ? localMusicConfig.value.volume : 0.5;
+      musicPlayer.initMusicConfig(localMusicConfig.value.filePath, localMusicConfig.value.enabled, volume);
       // 注意：由于浏览器自动播放策略限制，这里不直接调用play()
       // 而是等待用户的第一次交互（点击）后再播放
       console.log("音乐已准备就绪，等待用户首次交互后播放...");