feat：新增背景音乐设置，音乐切换功能

2025-12-15 15:45:50 +08:00
parent 0d23216c74
commit 9ba67e55cd
5 changed files with 188 additions and 69 deletions
--- a/data/config.json
+++ b/data/config.json
@@ -866,7 +866,7 @@
  ],
  "musicConfig": {
    "enabled": true,
-    "filePath": "/assets/music/background.mp3"
+    "filePath": "/assets/music/1765778401201.mp3"
  },
  "displayConfig": {
    "showBonusModule": true,
@@ -957,6 +957,6 @@
  },
  "music": {
    "enabled": true,
-    "filePath": "/assets/music/background.mp3"
+    "filePath": "/assets/music/1765778401201.mp3"
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "cors": "^2.8.5",
-        "express": "^5.1.0",
+        "express": "^5.2.1",
        "multer": "^1.4.5-lts.1",
        "vue": "^3.5.24",
        "vue-router": "^4.6.3"
@@ -1337,23 +1337,27 @@
      }
    },
    "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
      "license": "MIT",
      "dependencies": {
        "bytes": "^3.1.2",
        "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
        "on-finished": "^2.4.1",
        "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
      },
      "engines": {
        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/brace-expansion": {
@@ -1712,18 +1716,19 @@
      }
    },
    "node_modules/express": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmmirror.com/express/-/express-5.1.0.tgz",
-      "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
      "license": "MIT",
      "dependencies": {
        "accepts": "^2.0.0",
-        "body-parser": "^2.2.0",
+        "body-parser": "^2.2.1",
        "content-disposition": "^1.0.0",
        "content-type": "^1.0.5",
        "cookie": "^0.7.1",
        "cookie-signature": "^1.2.1",
        "debug": "^4.4.0",
+        "depd": "^2.0.0",
        "encodeurl": "^2.0.0",
        "escape-html": "^1.0.3",
        "etag": "^1.8.1",
@@ -1940,40 +1945,39 @@
      }
    },
    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
      "license": "MIT",
      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
      },
      "engines": {
        "node": ">= 0.8"
-      }
-    },
-    "node_modules/http-errors/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.7.1.tgz",
+      "integrity": "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==",
      "license": "MIT",
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3.0.0"
      },
      "engines": {
        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/ignore-by-default": {
@@ -2538,36 +2542,20 @@
      }
    },
    "node_modules/raw-body": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-3.0.1.tgz",
-      "integrity": "sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
      "license": "MIT",
      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.7.0",
-        "unpipe": "1.0.0"
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
      },
      "engines": {
        "node": ">= 0.10"
      }
    },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.7.0.tgz",
-      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
    "node_modules/readable-stream": {
      "version": "2.3.8",
      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
  },
  "dependencies": {
    "cors": "^2.8.5",
-    "express": "^5.1.0",
+    "express": "^5.2.1",
    "multer": "^1.4.5-lts.1",
    "vue": "^3.5.24",
    "vue-router": "^4.6.3"
--- a/server.js
+++ b/server.js
@@ -138,6 +138,30 @@ app.get('/api/musicConfig', (req, res) => {
  }
 });

+// ===================== 新增：获取已上传音乐列表API =====================
+app.get('/api/music/list', (req, res) => {
+  try {
+    // 音乐文件存储目录（和之前配置的一致）
+    const musicDir = path.join(__dirname, 'public', 'assets', 'music');
+    // 先判断目录是否存在，避免报错
+    if (!fs.existsSync(musicDir)) {
+      return res.json({ success: true, data: [] });
+    }
+    // 读取目录下的所有MP3文件
+    const files = fs.readdirSync(musicDir).filter(file => file.endsWith('.mp3'));
+    // 返回文件名+访问路径
+    const musicList = files.map(file => ({
+      filename: file,
+      filePath: `/assets/music/${file}`
+    }));
+    res.json({ success: true, data: musicList });
+  } catch (error) {
+    console.error('读取音乐列表失败:', error);
+    res.status(500).json({ success: false, error: '读取音乐列表失败' });
+  }
+});
+// ===================== 新增结束 =====================
+
 // API: 更新音乐配置（仅更新musicConfig节点，不影响其他配置）
 app.post('/api/musicConfig', (req, res) => {
  try {
@@ -200,6 +224,31 @@ app.post('/api/upload/music', musicUpload.single('musicFile'), (req, res) => {
  }
 });

+// ===================== 兼容前端旧路径 /upload-music =====================
+app.post('/upload-music', (req, res) => {
+  musicUpload.single('musicFile')(req, res, (err) => {
+    if (err) {
+      return res.status(500).json({ 
+        success: false, 
+        error: err.message || '音乐文件上传失败' 
+      });
+    }
+    if (!req.file) {
+      return res.status(400).json({ 
+        success: false, 
+        error: '没有选择要上传的音乐文件' 
+      });
+    }
+    const relativePath = `/assets/music/${req.file.filename}`;
+    res.json({ 
+      success: true, 
+      filePath: relativePath,
+      filename: req.file.filename,
+      originalName: req.file.originalname
+    });
+  });
+});
+
 // ===================== 原有图片上传/删除API（保留） =====================
 // API: 上传图片
 app.post('/api/upload', imageUpload.single('image'), (req, res) => {
--- a/src/views/AdminPanel.vue
+++ b/src/views/AdminPanel.vue
@@ -92,6 +92,24 @@
                </span>
              </div>

+<!-- 新增：已上传音乐列表 -->
+<div class="music-list-section" style="margin: 20px 0;">
+  <h4 class="text-gold">🎵 已上传音乐列表</h4>
+  <div class="music-list" v-if="musicList.length > 0">
+    <div 
+      class="music-item"
+      v-for="music in musicList"
+      :key="music.filePath"
+      :class="{ active: music.filePath === currentMusicPath }"
+      @click="switchToMusic(music.filePath)"
+    >
+      {{ music.filename }}
+      <span v-if="music.filePath === currentMusicPath" style="color: #667eea; margin-left: 8px;">✅ 当前使用</span>
+    </div>
+  </div>
+  <p v-else class="upload-hint">暂无已上传的音乐文件</p>
+</div>
+
              <!-- 当前音乐路径回显（对齐Logo大小配置） -->
              <div class="config-item" style="margin: 10px 0;">
                <label class="checkbox-label">
@@ -858,6 +876,7 @@ const selectedMusicFile = ref(null); // 选中的MP3文件
 const uploadMsg = ref(''); // 上传提示信息
 const musicEnabled = ref(false); // 首页播放开关状态
 const currentMusicPath = ref(''); // 当前音乐路径
+const musicList = ref([]); // 新增：已上传音乐列表
 // 返回首页
 const goToHome = () => {
  router.push('/');
@@ -916,7 +935,42 @@ const handleMusicFileChange = (e) => {
  }
 };

-// 2. 上传并切换音乐文件（更新config.json+实时生效）
+// 新增：获取已上传音乐列表（调用后端/api/music/list接口）
+const fetchMusicList = async () => {
+  try {
+    const res = await fetch('http://localhost:3000/api/music/list');
+    const data = await res.json();
+    if (data.success) {
+      musicList.value = data.data;
+    } else {
+      uploadMsg.value = `⚠️ 获取音乐列表失败：${data.error}`;
+    }
+  } catch (err) {
+    uploadMsg.value = `⚠️ 获取音乐列表异常：${err.message}`;
+  }
+};
+
+// 新增：点击列表项切换音乐
+const switchToMusic = async (filePath) => {
+  try {
+    uploadMsg.value = '⏳ 正在切换音乐...';
+    // 调用后端接口更新config.json的音乐路径
+    await updateMusicConfig(musicEnabled.value, filePath);
+    // 回显新路径到页面
+    currentMusicPath.value = filePath;
+    // 实时切换播放器音乐（和原有上传逻辑保持一致）
+    musicPlayer.updateMusicPath(filePath);
+    // 若开关开启，立即播放新音乐
+    if (musicEnabled.value) {
+      musicPlayer.play();
+    }
+    uploadMsg.value = '✅ 音乐切换成功！';
+  } catch (err) {
+    uploadMsg.value = `❌ 切换音乐失败：${err.message}`;
+  }
+};
+
+// 修改原handleMusicUpload方法，在上传成功后添加fetchMusicList()
 const handleMusicUpload = async () => {
  if (!selectedMusicFile.value) {
    uploadMsg.value = '❌ 请先选择MP3文件！';
@@ -925,30 +979,25 @@ const handleMusicUpload = async () => {

  uploadMsg.value = '⏳ 正在上传音乐文件...';
  try {
-    // 构建FormData（适配后端上传接口）
    const formData = new FormData();
-    formData.append('music', selectedMusicFile.value);
-    
-    // 调用上传接口（替换为你的实际接口地址）
-    const response = await fetch('/api/upload-music', {
+    formData.append('musicFile', selectedMusicFile.value);
+    const response = await fetch('http://localhost:3000/upload-music', {
      method: 'POST',
      body: formData
    });
    const uploadResult = await response.json();

    if (uploadResult.success) {
-      // 更新config.json的filePath（保留开关状态）
      await updateMusicConfig(musicEnabled.value, uploadResult.filePath);
-      // 回显新路径
      currentMusicPath.value = uploadResult.filePath;
-      // 实时切换播放器音乐
      musicPlayer.updateMusicPath(uploadResult.filePath);
-      // 若开关开启，立即播放
      if (musicEnabled.value) {
        musicPlayer.play();
      }
+      // 新增：上传成功后刷新列表
+      await fetchMusicList();
      uploadMsg.value = '✅ 音乐上传成功！已自动应用到首页';
-      selectedMusicFile.value = null; // 清空选中文件
+      selectedMusicFile.value = null;
    } else {
      uploadMsg.value = `❌ 上传失败：${uploadResult.error}`;
    }
@@ -987,6 +1036,7 @@ const initMusicConfig = async () => {
    const config = await getMusicConfig();
    musicEnabled.value = config.enabled ?? false; // 兼容默认值
    currentMusicPath.value = config.filePath || '/assets/music/background.mp3'; // 默认路径
+    await fetchMusicList();//  新增：初始化时加载已上传列表
  } catch (err) {
    uploadMsg.value = `⚠️ 音乐配置初始化失败：${err.message}`;
    // 初始化默认值
@@ -2193,4 +2243,36 @@ const deleteBonusRule = (index) => {
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
 }
+
+/* 新增：已上传音乐列表样式 */
+.music-list-section {
+  margin: 20px 0;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+.music-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+}
+.music-item {
+  padding: 10px 15px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.music-item:hover {
+  background: #f0f7ff;
+  border-color: #667eea;
+}
+.music-item.active {
+  background: #e6f0ff;
+  border-color: #667eea;
+  font-weight: 500;
+}
+
 </style>