feat: 新增背景音乐功能

data/config.json

@@ -864,6 +864,9 @@
       "role": "manager"
     }
   ],
+  "musicConfig": {
+    "enabled": true 
+  },
   "displayConfig": {
     "showBonusModule": true,
     "individual": {

server.js

@@ -76,7 +76,17 @@ app.post('/api/config', (req, res) => {
     res.status(500).json({ error: '保存配置文件失败' });
   }
 });
-
+// 第78行（新增位置）
+// API: 获取音乐配置
+app.get('/api/musicConfig', (req, res) => {
+  try {
+    const configData = fs.readFileSync(CONFIG_FILE_PATH, 'utf8');
+    const config = JSON.parse(configData);
+    res.json(config.musicConfig || { enabled: false });
+  } catch (error) {
+    res.status(500).json({ enabled: false });
+  }
+});
 // API: 上传图片
 app.post('/api/upload', upload.single('image'), (req, res) => {
   try {

src/router/index.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import BattleRanking from '../views/BattleRanking.vue';
 import AdminPanel from '../views/AdminPanel.vue';
+// 新增：引入音乐播放器（写在原有import之后，路由数组之前）
+import { musicPlayer } from '@/utils/musicPlayer';
 
 const routes = [
   {
@@ -26,6 +28,15 @@ const router = createRouter({
   history: createWebHistory(),
   routes
 });
+// 新增：路由守卫（写在router创建完成后，export router之前）
+router.afterEach((to) => {
+  // 主页面（/）播放，管理员页面（/admin开头）暂停
+  if (to.path === '/') {
+    musicPlayer.play();
+  } else if (to.path.startsWith('/admin')) {
+    musicPlayer.pause();
+  }
+});
 
 // 全局前置守卫，设置页面标题
 router.beforeEach((to, from, next) => {

src/services/configService.js

@@ -340,3 +340,14 @@ export const saveBackgroundConfig = async (backgroundConfig) => {
   config.backgroundConfig = backgroundConfig;
   return await writeConfig(config);
 };
+// 新增：获取音乐开关配置
+export const getMusicConfig = async () => {
+  try {
+    // 调用后端新增的/api/musicConfig接口
+    const response = await fetch('http://localhost:3000/api/musicConfig');
+    return await response.json();
+  } catch (error) {
+    // 报错时返回默认关闭状态
+    return { enabled: false };
+  }
+};

src/utils/musicPlayer.js

@@ -0,0 +1,30 @@
+// 单例模式：全局唯一的音乐播放器
+class MusicPlayer {
+  constructor() {
+    // 创建音频实例，指定背景音乐文件路径（需提前把音乐文件放public/assets/music下）
+    this.audio = new Audio('/assets/music/background.mp3');
+    // 默认设置循环播放（满足“循环播放”需求）
+    this.audio.loop = true;
+    // 初始状态：未播放
+    this.isPlaying = false;
+  }
+
+  // 播放音乐（仅当配置开启时执行）
+  play() {
+    if (!this.isPlaying) {
+      this.audio.play();
+      this.isPlaying = true;
+    }
+  }
+
+  // 暂停音乐（切到管理员页面时执行）
+  pause() {
+    if (this.isPlaying) {
+      this.audio.pause();
+      this.isPlaying = false;
+    }
+  }
+}
+
+// 导出单例，全局使用同一个播放器
+export const musicPlayer = new MusicPlayer();

src/views/BattleRanking.vue

@@ -215,6 +215,8 @@ import {
 } from '../data/mockData.js';
 import { readConfig } from '../services/configService.js';
 
+import { getMusicConfig } from '../services/configService.js';
+import { musicPlayer } from '@/utils/musicPlayer';
 // 创建默认显示配置的函数
 function createDefaultDisplayConfig() {
   return {
@@ -869,7 +871,13 @@ onMounted(async () => {
   try {
     // 异步初始化数据
     await initializeData();
-    
+    // 新增：加入音乐控制逻辑
+    const musicConfig = await getMusicConfig();
+    if (musicConfig.enabled) {
+      musicPlayer.play();
+    } else {
+      musicPlayer.pause();
+    }
     // 更新本地显示配置，确保columnAlignments属性存在
     if (displayConfig) {
       const configCopy = JSON.parse(JSON.stringify(displayConfig));

vite.config.js

@@ -1,7 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import path from 'path' // 新增：引入path模块
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: { // 新增：配置路径别名
+    alias: {
+      '@': path.resolve(__dirname, 'src') // 让@代表项目根目录下的src文件夹
+    }
+  }
 })