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

Reviewed-on: #7

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+vs100.zip

.npmrc

@@ -0,0 +1,160 @@
+# =========================================
+# .npmrc - 完整镜像配置
+# 适用于 Node.js 项目，包含所有常见二进制包镜像
+# =========================================
+
+# ====================
+# 基础镜像配置
+# ====================
+registry=https://registry.npmmirror.com/
+
+# Node.js 相关镜像
+disturl=https://npmmirror.com/mirrors/node
+nodedir=https://npmmirror.com/mirrors/node
+node_src_dir=https://npmmirror.com/mirrors/node
+nodelibcxxdir=https://npmmirror.com/mirrors/node_libcxx
+
+# ====================
+# 原生模块二进制镜像
+# ====================
+
+# node-sass 相关
+sass_binary_site=https://npmmirror.com/mirrors/node-sass
+sass_binary_host=https://npmmirror.com/mirrors/node-sass
+
+# Electron 相关
+electron_mirror=https://npmmirror.com/mirrors/electron/
+electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
+ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
+
+# Python 相关
+python_mirror=https://npmmirror.com/mirrors/python
+
+# ====================
+# 浏览器驱动镜像
+# ====================
+
+# Chrome 相关
+chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver
+CHROMEDRIVER_CDNURL=https://npmmirror.com/mirrors/chromedriver
+
+# Firefox 相关
+geckodriver_cdnurl=https://npmmirror.com/mirrors/geckodriver
+GECKODRIVER_CDNURL=https://npmmirror.com/mirrors/geckodriver
+
+# Opera 相关
+operadriver_cdnurl=https://npmmirror.com/mirrors/operadriver
+OPERADRIVER_CDNURL=https://npmmirror.com/mirrors/operadriver
+
+# Edge 相关
+edgedriver_cdnurl=https://npmmirror.com/mirrors/edgedriver
+EDGEDRIVER_CDNURL=https://npmmirror.com/mirrors/edgedriver
+
+# ====================
+# 测试工具镜像
+# ====================
+
+# PhantomJS
+phantomjs_cdnurl=https://npmmirror.com/mirrors/phantomjs
+PHANTOMJS_CDNURL=https://npmmirror.com/mirrors/phantomjs
+
+# Selenium
+selenium_cdnurl=https://npmmirror.com/mirrors/selenium
+SELENIUM_CDNURL=https://npmmirror.com/mirrors/selenium
+
+# ====================
+# 数据库相关镜像
+# ====================
+
+# SQLite
+sqlite3_binary_host=https://npmmirror.com/mirrors/sqlite3
+sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3
+
+# PostgreSQL (pg)
+pg_binary_host=https://npmmirror.com/mirrors/pg
+
+# ====================
+# 图像处理相关镜像
+# ====================
+
+# Canvas
+canvas_binary_host=https://npmmirror.com/mirrors/canvas
+canvas_binary_host_mirror=https://npmmirror.com/mirrors/canvas
+
+# Sharp
+sharp_binary_host=https://npmmirror.com/mirrors/sharp
+sharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp
+
+# ====================
+# 加密和压缩相关
+# ====================
+
+# bcrypt
+bcrypt_binary_host=https://npmmirror.com/mirrors/bcrypt
+
+# node-zopfli
+zopfli_binary_host=https://npmmirror.com/mirrors/node-zopfli
+
+# ====================
+# 其他常见二进制包
+# ====================
+
+# fsevents (macOS)
+fsevents_binary_host_mirror=https://npmmirror.com/mirrors/fsevents
+
+# grpc
+grpc_binary_host_mirror=https://npmmirror.com/mirrors/grpc
+
+# leveldown
+leveldown_binary_host=https://npmmirror.com/mirrors/leveldown
+
+# snappy
+snappy_binary_host=https://npmmirror.com/mirrors/snappy
+
+# hiredis
+hiredis_binary_host=https://npmmirror.com/mirrors/hiredis
+
+# utf-8-validate
+utf-8-validate_binary_host=https://npmmirror.com/mirrors/utf-8-validate
+
+# bufferutil
+bufferutil_binary_host=https://npmmirror.com/mirrors/bufferutil
+
+# ====================
+# node-gyp 构建配置
+# ====================
+
+# Python 配置
+python=python3
+
+# 构建工具配置
+msvs_version=2019
+
+# 缓存和日志配置
+loglevel=verbose
+progress=true
+
+# ====================
+# 网络和超时配置
+# ====================
+
+# 重试配置
+fetch-retries=5
+fetch-timeout=300000
+socket-timeout=300000
+
+# SSL 配置
+strict-ssl=false
+
+# ====================
+# 开发工具配置
+# ====================
+
+# TypeScript
+typescript_registry=https://registry.npmmirror.com/
+
+# Webpack
+webpack_cli_registry=https://registry.npmmirror.com/
+
+# Babel
+babel_registry=https://registry.npmmirror.com/

data/config.json

@@ -0,0 +1,962 @@
+{
+  "individualRankings": [
+    {
+      "id": 8,
+      "name": "杨鑫鹏",
+      "score": 208600,
+      "level": "SSS",
+      "avatar": "/uploads/1763972044872.jpg",
+      "department": "销售部",
+      "completedTasks": 32,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763600399414,
+      "name": "王松根",
+      "score": 149000,
+      "level": "A",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763702198797,
+      "name": "岳杨",
+      "score": 149000,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763703428082,
+      "name": "刘博",
+      "score": 149000,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 1763606483656,
+      "name": "陈梦蝶",
+      "score": 149000,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1,
+      "name": "刘贵博",
+      "score": 149000,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 48,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 3,
+      "name": "赵政行",
+      "score": 149000,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 42,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763703454998,
+      "name": "汪思柔",
+      "score": 119200,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 1763703551860,
+      "name": "刘正艺",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 1763703442159,
+      "name": "刘莉",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 2,
+      "name": "张政",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 45,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763702288912,
+      "name": "仝维茜",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702407090,
+      "name": "李明娣",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702548562,
+      "name": "高博祎",
+      "score": 89400,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763606463583,
+      "name": "刘天乐",
+      "score": 69600,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 4,
+      "name": "秦婧婧",
+      "score": 59600,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 40,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763606343912,
+      "name": "李胜豪",
+      "score": 59600,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606422126,
+      "name": "贾景杰",
+      "score": 59600,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763702177212,
+      "name": "东知",
+      "score": 59600,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702567245,
+      "name": "吕璐",
+      "score": 59600,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 7,
+      "name": "姜浩然",
+      "score": 39800,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 34,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763702217482,
+      "name": "何盘珍",
+      "score": 29800,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 12,
+      "name": "孙珊珊",
+      "score": 26820,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "刘奔腾",
+      "completedTasks": 24,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763703508858,
+      "name": "毕艺超",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "/uploads/1763860106271.jpg",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 5,
+      "name": "李先锐",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 38,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 6,
+      "name": "孙悦",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 36,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 9,
+      "name": "曾焱平",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 30,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 10,
+      "name": "贺鸿飞",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 28,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 11,
+      "name": "齐文涛",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 26,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 13,
+      "name": "刘奔腾",
+      "score": 0,
+      "level": "B",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 22,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 14,
+      "name": "刘硕",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 20,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 15,
+      "name": "王蓉",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 18,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606252253,
+      "name": "朱宝林",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606266583,
+      "name": "宋鹏博",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606282323,
+      "name": "蔡令斐",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606298308,
+      "name": "李奉颖",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606312478,
+      "name": "张如意",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥇",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "二战区"
+    },
+    {
+      "id": 1763606387926,
+      "name": "李杰",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606403982,
+      "name": "刘丽",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606503187,
+      "name": "贾振颖",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606519461,
+      "name": "王雨晴",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606538022,
+      "name": "高俊圳",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606552741,
+      "name": "毕洁雨",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥈",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "三战区"
+    },
+    {
+      "id": 1763606570669,
+      "name": "熊春杰",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763606588683,
+      "name": "张频",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702274156,
+      "name": "杨李佳",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702306246,
+      "name": "吴玉洁",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702325175,
+      "name": "谢寒雪",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702340664,
+      "name": "袁如萍",
+      "score": 0,
+      "level": "A",
+      "avatar": "🥉",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "四战区"
+    },
+    {
+      "id": 1763702392030,
+      "name": "周顺凡",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702423195,
+      "name": "陈亚军",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702436351,
+      "name": "刘红珍",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702447900,
+      "name": "符引娣",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702460269,
+      "name": "郭天浩",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702472630,
+      "name": "申婷",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702487455,
+      "name": "胡飞宇",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702504527,
+      "name": "乌甜丽",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702516929,
+      "name": "蒋雪柔",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "⭐",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "五战区"
+    },
+    {
+      "id": 1763702537028,
+      "name": "刘家秀",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702585045,
+      "name": "孙丽霞",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702598899,
+      "name": "金芳林",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702614259,
+      "name": "班悦",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702630093,
+      "name": "吴玮良",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763702726441,
+      "name": "彭颖",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "👑",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "一战区"
+    },
+    {
+      "id": 1763703383063,
+      "name": "李子豪",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763703395440,
+      "name": "崔凤鸣",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🔥",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "六战区"
+    },
+    {
+      "id": 1763703414516,
+      "name": "曹恒",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 1763703472947,
+      "name": "刘孜一",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    },
+    {
+      "id": 1763703487798,
+      "name": "王灿佳",
+      "score": 0,
+      "level": "SSS",
+      "avatar": "🎯",
+      "department": "销售部",
+      "completedTasks": 0,
+      "bonus": 0,
+      "team": "七战区"
+    }
+  ],
+  "teamRankings": [
+    {
+      "id": 1,
+      "name": "一战区",
+      "totalScore": 844400,
+      "memberCount": 11,
+      "level": "SSS",
+      "leader": "王将军",
+      "completedTasks": 210,
+      "bonus": 0
+    },
+    {
+      "id": 7,
+      "name": "七战区",
+      "totalScore": 447000,
+      "memberCount": 8,
+      "level": "A",
+      "leader": "曹将军",
+      "completedTasks": 148,
+      "bonus": 0
+    },
+    {
+      "id": 4,
+      "name": "四战区",
+      "totalScore": 327800,
+      "memberCount": 10,
+      "level": "S",
+      "leader": "熊将军",
+      "completedTasks": 172,
+      "bonus": 0
+    },
+    {
+      "id": 3,
+      "name": "三战区",
+      "totalScore": 278200,
+      "memberCount": 9,
+      "level": "SS",
+      "leader": "李将军",
+      "completedTasks": 185,
+      "bonus": 0
+    },
+    {
+      "id": 6,
+      "name": "六战区",
+      "totalScore": 149000,
+      "memberCount": 10,
+      "level": "A",
+      "leader": "刘将军",
+      "completedTasks": 155,
+      "bonus": 0
+    },
+    {
+      "id": 5,
+      "name": "五战区",
+      "totalScore": 89400,
+      "memberCount": 9,
+      "level": "S",
+      "leader": "周将军",
+      "completedTasks": 165,
+      "bonus": 0
+    },
+    {
+      "id": 2,
+      "name": "二战区",
+      "totalScore": 86420,
+      "memberCount": 12,
+      "level": "SS",
+      "leader": "贺将军",
+      "completedTasks": 198,
+      "bonus": 0
+    }
+  ],
+  "bonusRules": [
+    {
+      "rank": "1-3",
+      "individualBonus": "5000元, 3000元, 2000元",
+      "teamBonus": "15000元, 10000元, 8000元",
+      "description": "顶尖表现，高额奖励"
+    },
+    {
+      "rank": "4-6",
+      "individualBonus": "1500元, 1000元, 1000元",
+      "teamBonus": "6000元, 6000元",
+      "description": "优秀表现，丰厚激励"
+    },
+    {
+      "rank": "7-10",
+      "individualBonus": "800元, 800元, 500元, 500元",
+      "teamBonus": "无",
+      "description": "良好表现，基础奖励"
+    }
+  ],
+  "systemUsers": [
+    {
+      "username": "admin",
+      "password": "admin123",
+      "role": "admin"
+    },
+    {
+      "username": "manager",
+      "password": "manager123",
+      "role": "manager"
+    }
+  ],
+  "musicConfig": {
+    "enabled": true,
+    "filePath": "/assets/music/1765778401201.mp3"
+  },
+  "displayConfig": {
+    "showBonusModule": true,
+    "individual": {
+      "showLevel": false,
+      "showDepartment": false,
+      "scoreColumn": {
+        "displayName": "业绩",
+        "displayStyle": "amount"
+      },
+      "columnWidths": {
+        "rank": 48,
+        "avatar": 48,
+        "name": 100,
+        "score": 150,
+        "level": 80,
+        "department": 1,
+        "bonus": 100,
+        "team": 100
+      },
+      "columnAlignments": {
+        "rank": "center",
+        "avatar": "left",
+        "name": "left",
+        "score": "left",
+        "level": "left",
+        "department": "left",
+        "bonus": "left"
+      },
+      "defaultDisplayRows": 0,
+      "filterZeroScore": true
+    },
+    "crown": {
+      "size": 72,
+      "animationEnabled": true
+    },
+    "crownPosition": {
+      "top": -80,
+      "left": null,
+      "right": null,
+      "bottom": null
+    },
+    "team": {
+      "showMemberCount": false,
+      "showLeader": true,
+      "totalScoreColumn": {
+        "displayName": "业绩",
+        "displayStyle": "amount"
+      },
+      "columnWidths": {
+        "rank": 30,
+        "name": 100,
+        "score": 100,
+        "memberCount": 60,
+        "leader": 100,
+        "bonus": 80
+      },
+      "columnAlignments": {
+        "rank": "center",
+        "name": "center",
+        "score": "left",
+        "memberCount": "left",
+        "leader": "left",
+        "bonus": "left"
+      },
+      "defaultDisplayRows": 0,
+      "filterZeroScore": false
+    },
+    "championLogos": {
+      "teamChampion": "/uploads/1763979489455.png",
+      "individualChampion": "",
+      "teamChampionSize": 121,
+      "individualChampionSize": 120,
+      "teamChampionType": "photo",
+      "teamChampionPhotoWidth": 400,
+      "teamChampionPhotoHeight": 242
+    },
+    "subtitleImage": {
+      "src": "/completed_performance.png",
+      "width": 200,
+      "height": 60,
+      "alt": "总战绩"
+    }
+  },
+  "battleEndTime": {
+    "date": "2026-02-08",
+    "time": "00:00:00"
+  },
+  "music": {
+    "enabled": true,
+    "filePath": "/assets/music/1765778401201.mp3"
+  }
+}

package.json

@@ -6,14 +6,21 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "server": "npm run build && node server.js",
+    "start": "node server.js"
   },
   "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^5.2.1",
+    "multer": "^1.4.5-lts.1",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "nodemon": "^3.1.11",
+    "sass": "^1.94.0",
     "vite": "^7.2.2"
   }
 }

public/red-background.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080">
+  <!-- 渐变定义 -->
+  <defs>
+    <linearGradient id="redGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#e74c3c" stop-opacity="0.8"/>
+      <stop offset="50%" stop-color="#c0392b" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#a93226" stop-opacity="0.8"/>
+    </linearGradient>
+    <!-- 纹理图案 -->
+    <pattern id="pattern" width="100" height="100" patternUnits="userSpaceOnUse">
+      <rect width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+      <circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.2)"/>
+      <path d="M0 50 L100 50 M50 0 L50 100" stroke="rgba(255,255,255,0.05)" stroke-width="1"/>
+    </pattern>
+  </defs>
+  
+  <!-- 主背景 -->
+  <rect width="1920" height="1080" fill="url(#redGradient)"/>
+  
+  <!-- 纹理叠加 -->
+  <rect width="1920" height="1080" fill="url(#pattern)"/>
+  
+  <!-- 装饰性光效 -->
+  <circle cx="400" cy="200" r="300" fill="rgba(255,255,255,0.1)" filter="blur(50px)"/>
+  <circle cx="1500" cy="800" r="400" fill="rgba(255,255,255,0.08)" filter="blur(60px)"/>
+</svg>

server.js

@@ -0,0 +1,331 @@
+import express from 'express';
+import cors from 'cors';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import multer from 'multer';
+
+// 获取当前文件的目录路径
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const PORT = 3000;
+const CONFIG_FILE_PATH = path.join(__dirname, 'data', 'config.json');
+
+// ===================== 原有图片上传配置（保留） =====================
+// 创建图片上传目录
+const uploadDir = path.join(__dirname, 'uploads');
+if (!fs.existsSync(uploadDir)) {
+  fs.mkdirSync(uploadDir, { recursive: true });
+}
+
+// 图片上传multer配置
+const imageStorage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, uploadDir);
+  },
+  filename: (req, file, cb) => {
+    const timestamp = Date.now();
+    const ext = path.extname(file.originalname);
+    const filename = `${timestamp}${ext}`;
+    cb(null, filename);
+  }
+});
+
+const imageUpload = multer({ 
+  storage: imageStorage,
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB限制
+  fileFilter: (req, file, cb) => {
+    const allowedTypes = /jpeg|jpg|png|gif/;
+    const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
+    const mimetype = allowedTypes.test(file.mimetype);
+    if (extname && mimetype) {
+      return cb(null, true);
+    } else {
+      cb(new Error('只允许上传图片文件（JPEG、JPG、PNG、GIF）'));
+    }
+  }
+});
+
+// ===================== 新增：音乐上传配置 =====================
+// 创建音乐上传目录（对应前端访问路径）
+const musicUploadDir = path.join(__dirname, 'public', 'assets', 'music');
+// 确保目录存在（不存在则创建）
+if (!fs.existsSync(musicUploadDir)) {
+  fs.mkdirSync(musicUploadDir, { recursive: true });
+}
+
+// 音乐上传multer配置
+const musicStorage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, musicUploadDir); // 保存到public/assets/music
+  },
+  filename: (req, file, cb) => {
+    // 保留原文件名+时间戳，避免重复
+    const timestamp = Date.now();
+    const ext = path.extname(file.originalname);
+    const filename = `${timestamp}${ext}`;
+    cb(null, filename);
+  }
+});
+
+const musicUpload = multer({
+  storage: musicStorage,
+  limits: { fileSize: 10 * 1024 * 1024 }, // 10MB音乐文件限制
+  fileFilter: (req, file, cb) => {
+    // 仅允许MP3格式
+    const allowedTypes = /mp3/;
+    const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
+    const mimetype = allowedTypes.test(file.mimetype) || file.mimetype === 'audio/mpeg';
+    if (extname && mimetype) {
+      return cb(null, true);
+    } else {
+      cb(new Error('只允许上传MP3格式的音频文件！'));
+    }
+  }
+});
+
+// ===================== 中间件（保留+优化） =====================
+app.use(cors());
+app.use(express.json());
+
+// 静态文件服务（Vue应用、上传的图片、音乐文件）
+app.use(express.static(path.join(__dirname, 'dist')));
+app.use('/uploads', express.static(uploadDir));
+app.use('/assets/music', express.static(musicUploadDir)); // 新增：音乐文件静态访问
+
+// ===================== 原有API（保留） =====================
+// API: 获取整体配置数据
+app.get('/api/config', (req, res) => {
+  try {
+    const configData = fs.readFileSync(CONFIG_FILE_PATH, 'utf8');
+    res.json(JSON.parse(configData));
+  } catch (error) {
+    console.error('读取配置文件失败:', error);
+    res.status(500).json({ error: '读取配置文件失败' });
+  }
+});
+
+// API: 保存整体配置数据
+app.post('/api/config', (req, res) => {
+  try {
+    fs.writeFileSync(CONFIG_FILE_PATH, JSON.stringify(req.body, null, 2), 'utf8');
+    res.json({ success: true });
+  } catch (error) {
+    console.error('保存配置文件失败:', error);
+    res.status(500).json({ error: '保存配置文件失败' });
+  }
+});
+
+// ===================== 新增：音乐专属API =====================
+// API: 获取音乐配置（单独返回musicConfig）
+app.get('/api/musicConfig', (req, res) => {
+  try {
+    const configData = fs.readFileSync(CONFIG_FILE_PATH, 'utf8');
+    const config = JSON.parse(configData);
+    // 兜底：如果没有musicConfig，返回默认值
+    res.json(config.musicConfig || { 
+      enabled: false, 
+      filePath: '/assets/music/background.mp3' 
+    });
+  } catch (error) {
+    console.error('读取音乐配置失败:', error);
+    res.status(500).json({ 
+      enabled: false, 
+      filePath: '/assets/music/background.mp3' 
+    });
+  }
+});
+
+// ===================== 新增：获取已上传音乐列表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 {
+    // 1. 读取原有配置
+    const configData = fs.readFileSync(CONFIG_FILE_PATH, 'utf8');
+    const config = JSON.parse(configData);
+    
+    // 2. 校验参数
+    const { enabled, filePath } = req.body;
+    if (typeof enabled !== 'boolean' || !filePath) {
+      return res.status(400).json({ 
+        success: false, 
+        error: '参数错误：enabled必须为布尔值，filePath不能为空' 
+      });
+    }
+    
+    // 3. 更新musicConfig节点（保留其他配置不变）
+    config.musicConfig = { enabled, filePath };
+    
+    // 4. 写入配置文件
+    fs.writeFileSync(CONFIG_FILE_PATH, JSON.stringify(config, null, 2), 'utf8');
+    
+    res.json({ 
+      success: true, 
+      data: config.musicConfig 
+    });
+  } catch (error) {
+    console.error('更新音乐配置失败:', error);
+    res.status(500).json({ 
+      success: false, 
+      error: '更新音乐配置失败' 
+    });
+  }
+});
+
+// API: 上传音乐文件
+app.post('/api/upload/music', musicUpload.single('musicFile'), (req, res) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ 
+        success: false, 
+        error: '没有选择要上传的音乐文件' 
+      });
+    }
+    
+    // 返回前端可访问的音乐路径（对应public/assets/music）
+    const relativePath = `/assets/music/${req.file.filename}`;
+    res.json({ 
+      success: true, 
+      filePath: relativePath, // 音乐访问路径
+      filename: req.file.filename,
+      originalName: req.file.originalname
+    });
+  } catch (error) {
+    console.error('音乐文件上传失败:', error);
+    res.status(500).json({ 
+      success: false, 
+      error: error.message || '音乐文件上传失败' 
+    });
+  }
+});
+
+// ===================== 兼容前端旧路径 /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) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ error: '没有文件上传' });
+    }
+    
+    // 返回文件的相对路径
+    const relativePath = `/uploads/${req.file.filename}`;
+    res.json({ 
+      success: true, 
+      filePath: relativePath,
+      filename: req.file.filename
+    });
+  } catch (error) {
+    console.error('文件上传失败:', error);
+    res.status(500).json({ error: error.message || '文件上传失败' });
+  }
+});
+
+// API: 删除图片
+app.delete('/api/upload/:filename', (req, res) => {
+  try {
+    const filename = req.params.filename;
+    const filePath = path.join(uploadDir, filename);
+    
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath);
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ error: '文件不存在' });
+    }
+  } catch (error) {
+    console.error('文件删除失败:', error);
+    res.status(500).json({ error: '文件删除失败' });
+  }
+});
+
+// ===================== 前端路由兼容（保留） =====================
+// 处理Vue Router历史模式 - 使用正则表达式代替通配符
+app.get(/^((?!\/api).)*$/, (req, res) => {
+  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+});
+
+// ===================== 服务器启动（保留+优化） =====================
+// 启动服务器并监听错误
+const server = app.listen(PORT, '0.0.0.0', () => {
+  console.log(`服务器运行在 http://localhost:${PORT}`);
+  console.log('服务器已成功启动，可以访问 http://localhost:3000');
+  console.log('API端点:');
+  console.log('  - 整体配置: GET/POST /api/config');
+  console.log('  - 音乐配置: GET/POST /api/musicConfig');
+  console.log('  - 图片上传: POST /api/upload');
+  console.log('  - 音乐上传: POST /api/upload/music');
+  console.log('  - 图片删除: DELETE /api/upload/:filename');
+});
+
+// 监听服务器错误
+server.on('error', (error) => {
+  console.error('服务器错误:', error);
+  
+  if (error.code === 'EADDRINUSE') {
+    console.error(`端口 ${PORT} 已被占用，请尝试其他端口。`);
+  }
+});
+
+// 监听SIGINT信号（Ctrl+C）
+process.on('SIGINT', () => {
+  console.log('正在关闭服务器...');
+  server.close(() => {
+    console.log('服务器已关闭');
+    process.exit(0);
+  });
+});
+
+// 确保服务器持续运行
+setInterval(() => {
+  // 保持服务器活动的空操作
+}, 60000); // 每分钟执行一次

src/App.vue

@@ -3,14 +3,210 @@
 </script>
 
 <template>
-  <div class="app-container">
+  <div class="content-container">
-    <router-view />
+    <!-- 左侧标题语图片 - 相对于content-container定位 -->
+    <div class="banner-left">
+      <img src="/banner1.png" alt="左侧标题语" class="banner-image" />
+    </div>
+    
+    <!-- Logo图片，放置在左上角 - 相对于content-container定位 -->
+    <div class="logo-container">
+      <img src="/logo.png" alt="Logo" class="app-logo" />
+    </div>
+    
+    <!-- 右侧标题语图片 - 相对于content-container定位 -->
+    <div class="banner-right">
+      <img src="/banner2.png" alt="右侧标题语" class="banner-image" />
+    </div>
+    
+    <div class="main-content">
+        <router-view />
+
+        <!-- 页脚 -->
+        <footer class="game-footer">
+          <div class="footer-content">
+            <p>&copy; 2025-2026 聚上集团 | 云上企 版权所有.</p>
+          </div>
+        </footer>           
+    </div> 
   </div>
 </template>
 
 <style scoped>
-.app-container {
+/* 左侧标题语样式 - 相对于content-container定位 */
+.banner-left {
+  position: absolute;
+  left: 10px;
+  top: 680px;
+  transform: translateY(-50%);
+  z-index: 900; /* 低于logo但高于其他内容 */
+  max-width: 200px; /* 设置最大宽度 */
+}
+
+/* 右侧标题语样式 - 相对于content-container定位 */
+.banner-right {
+  position: absolute;
+  right: 10px;
+  top: 680px;
+  transform: translateY(-50%);
+  z-index: 900; /* 低于logo但高于其他内容 */
+  max-width: 200px; /* 设置最大宽度 */
+}
+
+/* 标题语图片样式 */
+.banner-image {
+  width: 100%;
+  height: auto;
+  border-radius: 4px; /* 添加圆角效果 */
+}
+
+/* Logo容器样式 - 相对于content-container定位 */
+.logo-container {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000; /* 确保logo在最上层 */
+  max-width: calc(100% - 20px); /* 确保不超出容器边界 */
+}
+
+/* Logo图片样式 - 不设置固定宽度 */
+.app-logo {
+  width: 360px; /* 设置固定宽度为360px */
+  height: auto; /* 保持宽高比 */
+  border-radius: 8px; /* 添加圆角效果 */
+  max-width: 100%; /* 确保logo不超出容器 */
+  /* 不设置固定宽度，让logo保持原始尺寸 */
+}
+
+/* 主容器 */
+.main-content {
   min-height: 100vh;
-  overflow-x: hidden;
+  position: relative;
+}
+
+/* 背景覆盖层，确保文本可读性 */
+.main-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: -1;
+}
+
+.game-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dark-bg);
+  color: var(--gold-secondary);
+  padding: 20px 0;
+  text-align: center;
+}
+
+.footer-content {
+  font-size: 14px;
+  /* 雕刻效果：使用多层text-shadow创建凸起感 */
+  text-shadow: 
+    -1px -1px 0 rgba(255, 255, 255, 0.3),  /* 高光 - 左上 */
+    1px 1px 0 rgba(0, 0, 0, 0.5),           /* 阴影 - 右下 */
+    0 0 5px rgba(17, 17, 17, 0.5);         /* 光晕 */
+  /* 背景和内边距 */
+  padding: 8px 16px;
+  border-radius: 4px;
+  
+  /* 添加轻微的3D效果 */
+  transform: perspective(1000px) rotateX(0deg);
+  transition: all 0.3s ease;
+}
+
+/* 鼠标悬停时增强3D效果 */
+.footer-content:hover {
+  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  text-shadow: 
+    -1px -1px 0 rgba(255, 255, 255, 0.4),
+    1px 1px 0 rgba(0, 0, 0, 0.6),
+    0 0 8px rgba(15, 15, 15, 0.7);
+}
+
+/* 针对1920x1080分辨率的banner精确定位 */
+@media (width: 1920px) and (height: 1080px) {
+  .banner-left {
+    left: 120px !important;
+    top: 240px !important;
+    transform: translateY(0) !important;
+  }
+  
+  .banner-right {
+    right: 120px !important;
+    top: 200px !important;
+    transform: translateY(0) !important;
+  }
+}
+
+/* 移动设备响应式设计 */
+@media (max-width: 768px) {
+  /* 1. 背景图片全屏显示并固定 */
+  .main-content {
+    padding: 0 !important;
+    margin-top: 50px;
+    background-image: url('/battle-background.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    min-height: 100vh;
+  }
+
+  /* 移动设备上隐藏左右标题语，避免遮挡主要内容 */
+  .banner-left,
+  .banner-right {
+    scale: 0.4;
+  }
+
+  .banner-left {
+    margin-left: -28px;
+    top: 60px;
+  }
+
+  .banner-right{
+     margin-right: -28px;
+     top: 36px;
+  }
+  
+  /* 移动设备上的logo样式 - 保持相对于content-container定位 */
+  .logo-container {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    text-align: center;
+    background: transparent; /* 设置为透明背景 */
+    padding: 5px;
+    border-radius: 0 0 8px 8px;
+  }
+  
+  /* 移动设备上设置logo尺寸 */
+  .app-logo {
+    width: 200px; /* 移动设备上设置固定宽度为200px */
+  }
+  
+  /* 移动设备上的页脚雕刻效果适配 */
+  .footer-content {
+    font-size: 12px;
+    padding: 6px 12px;
+    text-shadow: 
+      -1px -1px 0 rgba(255, 255, 255, 0.2),
+      1px 1px 0 rgba(0, 0, 0, 0.4),
+      0 0 3px rgba(255, 215, 0, 0.4);
+  }
+  
+  .footer-content:hover {
+    transform: none; /* 移动设备上禁用悬停效果 */
+    box-shadow: none;
+  }
 }
 </style>

src/data/mockData.js

@@ -1,450 +1,147 @@
-// 模拟数据 - 个人排名
+import {
-export const individualRankings = [
+  getIndividualRankings,
-  {
+  saveIndividualRankings as saveIndividualRankingsToConfig,
-    id: 1,
+  getTeamRankings,
-    name: '张三',
+  saveTeamRankings as saveTeamRankingsToConfig,
-    score: 985,
+  getSystemUsers,
-    level: 'SSS',
+  saveSystemUsers as saveSystemUsersToConfig,
-    avatar: '👑',
+  addSystemUser as addSystemUserToConfig,
-    department: '销售部',
+  deleteSystemUser as deleteSystemUserToConfig,
-    completedTasks: 48,
+  updateSystemUser as updateSystemUserToConfig,
-    bonus: 5000
+  getDisplayConfig,
-  },
+  saveDisplayConfig as saveDisplayConfigToConfig,
-  {
+  getBattleEndTime,
-    id: 2,
+  saveBattleEndTime as saveBattleEndTimeToConfig,
-    name: '李四',
+  getBonusRules,
-    score: 972,
+  saveBonusRules as saveBonusRulesToConfig
-    level: 'SSS',
+} from '../services/configService';
-    avatar: '🥇',
+
-    department: '技术部',
+// 初始化空数据占位符，将在initializeData中正确加载
-    completedTasks: 45,
+export let individualRankings = [];
-    bonus: 3000
+export let teamRankings = [];
-  },
+export let bonusRules = [
-  {
+  { rank: '1-3', description: '前三名', individualBonus: '¥10000, ¥8000, ¥5000', teamBonus: '¥50000, ¥30000, ¥20000' },
-    id: 3,
+  { rank: '4-10', description: '四至十名', individualBonus: '¥3000/人', teamBonus: '¥10000/队' },
-    name: '王五',
+  { rank: '11-20', description: '十一至二十名', individualBonus: '¥1000/人', teamBonus: '¥5000/队' }
-    score: 958,
-    level: 'SS',
-    avatar: '🥈',
-    department: '市场部',
-    completedTasks: 42,
-    bonus: 2000
-  },
-  {
-    id: 4,
-    name: '赵六',
-    score: 923,
-    level: 'SS',
-    avatar: '🥉',
-    department: '财务部',
-    completedTasks: 40,
-    bonus: 1500
-  },
-  {
-    id: 5,
-    name: '钱七',
-    score: 897,
-    level: 'S',
-    avatar: '⭐',
-    department: '人力资源部',
-    completedTasks: 38,
-    bonus: 1000
-  },
-  {
-    id: 6,
-    name: '孙八',
-    score: 876,
-    level: 'S',
-    avatar: '⭐',
-    department: '销售部',
-    completedTasks: 36,
-    bonus: 1000
-  },
-  {
-    id: 7,
-    name: '周九',
-    score: 854,
-    level: 'A',
-    avatar: '🔥',
-    department: '技术部',
-    completedTasks: 34,
-    bonus: 800
-  },
-  {
-    id: 8,
-    name: '吴十',
-    score: 832,
-    level: 'A',
-    avatar: '🔥',
-    department: '市场部',
-    completedTasks: 32,
-    bonus: 800
-  },
-  {
-    id: 9,
-    name: '郑十一',
-    score: 810,
-    level: 'B',
-    avatar: '⚡',
-    department: '财务部',
-    completedTasks: 30,
-    bonus: 500
-  },
-  {
-    id: 10,
-    name: '王十二',
-    score: 795,
-    level: 'B',
-    avatar: '⚡',
-    department: '人力资源部',
-    completedTasks: 28,
-    bonus: 500
-  },
-  {
-    id: 11,
-    name: '李十三',
-    score: 782,
-    level: 'B',
-    avatar: '⚡',
-    department: '销售部',
-    completedTasks: 26,
-    bonus: 500
-  },
-  {
-    id: 12,
-    name: '张十四',
-    score: 765,
-    level: 'B',
-    avatar: '⚡',
-    department: '技术部',
-    completedTasks: 24,
-    bonus: 500
-  },
-  {
-    id: 13,
-    name: '王十五',
-    score: 748,
-    level: 'B',
-    avatar: '⚡',
-    department: '市场部',
-    completedTasks: 22,
-    bonus: 500
-  },
-  {
-    id: 14,
-    name: '赵十六',
-    score: 732,
-    level: 'C',
-    avatar: '🎯',
-    department: '财务部',
-    completedTasks: 20,
-    bonus: 300
-  },
-  {
-    id: 15,
-    name: '钱十七',
-    score: 715,
-    level: 'C',
-    avatar: '🎯',
-    department: '人力资源部',
-    completedTasks: 18,
-    bonus: 300
-  }
 ];
+export let systemUsers = [];
+export let displayConfig = null;
+export let battleEndTime = { date: new Date().toISOString().split('T')[0], time: '00:00:00' };
 
-// 模拟数据 - 战队排名
-export const teamRankings = [
-  {
-    id: 1,
-    name: '王者之师',
-    totalScore: 4850,
-    memberCount: 5,
-    level: 'SSS',
-    leader: '张三',
-    completedTasks: 210,
-    bonus: 15000
-  },
-  {
-    id: 2,
-    name: '战无不胜',
-    totalScore: 4680,
-    memberCount: 5,
-    level: 'SS',
-    leader: '李四',
-    completedTasks: 198,
-    bonus: 10000
-  },
-  {
-    id: 3,
-    name: '超越极限',
-    totalScore: 4520,
-    memberCount: 5,
-    level: 'SS',
-    leader: '王五',
-    completedTasks: 185,
-    bonus: 8000
-  },
-  {
-    id: 4,
-    name: '精英战队',
-    totalScore: 4280,
-    memberCount: 5,
-    level: 'S',
-    leader: '赵六',
-    completedTasks: 172,
-    bonus: 6000
-  },
-  {
-    id: 5,
-    name: '梦想之巅',
-    totalScore: 4150,
-    memberCount: 5,
-    level: 'S',
-    leader: '钱七',
-    completedTasks: 165,
-    bonus: 6000
-  },
-  {
-    id: 6,
-    name: '无敌战队',
-    totalScore: 3980,
-    memberCount: 5,
-    level: 'A',
-    leader: '孙八',
-    completedTasks: 155,
-    bonus: 4000
-  },
-  {
-    id: 7,
-    name: '冲锋陷阵',
-    totalScore: 3850,
-    memberCount: 5,
-    level: 'A',
-    leader: '周九',
-    completedTasks: 148,
-    bonus: 4000
-  },
-  {
-    id: 8,
-    name: '锐不可当',
-    totalScore: 3720,
-    memberCount: 5,
-    level: 'A',
-    leader: '吴十',
-    completedTasks: 142,
-    bonus: 4000
-  },
-  {
-    id: 9,
-    name: '同心协力',
-    totalScore: 3600,
-    memberCount: 5,
-    level: 'B',
-    leader: '郑十一',
-    completedTasks: 135,
-    bonus: 2000
-  },
-  {
-    id: 10,
-    name: '众志成城',
-    totalScore: 3480,
-    memberCount: 5,
-    level: 'B',
-    leader: '王十二',
-    completedTasks: 128,
-    bonus: 2000
-  },
-  {
-    id: 11,
-    name: '气势如虹',
-    totalScore: 3350,
-    memberCount: 5,
-    level: 'B',
-    leader: '李十三',
-    completedTasks: 122,
-    bonus: 2000
-  },
-  {
-    id: 12,
-    name: '披荆斩棘',
-    totalScore: 3220,
-    memberCount: 5,
-    level: 'B',
-    leader: '张十四',
-    completedTasks: 115,
-    bonus: 2000
-  },
-  {
-    id: 13,
-    name: '勇攀高峰',
-    totalScore: 3100,
-    memberCount: 5,
-    level: 'C',
-    leader: '王十五',
-    completedTasks: 108,
-    bonus: 1000
-  },
-  {
-    id: 14,
-    name: '力争上游',
-    totalScore: 2980,
-    memberCount: 5,
-    level: 'C',
-    leader: '赵十六',
-    completedTasks: 102,
-    bonus: 1000
-  },
-  {
-    id: 15,
-    name: '蓄势待发',
-    totalScore: 2850,
-    memberCount: 5,
-    level: 'C',
-    leader: '钱十七',
-    completedTasks: 95,
-    bonus: 1000
-  }
-];
-
-// 奖金设置说明
-export const bonusRules = [
-  {
-    rank: '1-3',
-    individualBonus: '5000元, 3000元, 2000元',
-    teamBonus: '15000元, 10000元, 8000元',
-    description: '顶尖表现，高额奖励'
-  },
-  {
-    rank: '4-6',
-    individualBonus: '1500元, 1000元, 1000元',
-    teamBonus: '6000元, 6000元',
-    description: '优秀表现，丰厚激励'
-  },
-  {
-    rank: '7-10',
-    individualBonus: '800元, 800元, 500元, 500元',
-    teamBonus: '无',
-    description: '良好表现，基础奖励'
-  }
-];
-
-// 系统用户（用于后台登录）
-export const systemUsers = [
-  {
-    username: 'admin',
-    password: 'admin123',
-    role: 'admin'
-  },
-  {
-    username: 'manager',
-    password: 'manager123',
-    role: 'manager'
-  }
-];
-
-// 显示配置
-export const displayConfig = {
-  // 个人排名显示配置
-  individual: {
-    showLevel: false,    // 显示等级列
-    showDepartment: false,  // 显示部门列
-    scoreColumn: {
-      displayName: '签单金额',  // 列显示名称
-      displayStyle: 'amount'    // 显示样式: 'amount'(金额) 或 'number'(普通数字)
-    },
-    columnWidths: {
-      rank: 60,      // 排名列宽度
-      avatar: 60,    // 头像列宽度
-      name: 1,       // 姓名列宽度（1表示自动填充）
-      score: 80,     // 分数列宽度
-      level: 80,     // 等级列宽度
-      department: 1, // 部门列宽度（1表示自动填充）
-      bonus: 80      // 奖金列宽度
-    }
-  },
-  // 战队排名显示配置
-  team: {
-    showMemberCount: false,  // 显示人数列
-    showLeader: false,        // 显示队长列
-    totalScoreColumn: {
-      displayName: '签单金额',  // 列显示名称
-      displayStyle: 'amount'    // 显示样式: 'amount'(金额) 或 'number'(普通数字)
-    },
-    columnWidths: {
-      rank: 60,      // 排名列宽度
-      name: 1,       // 战队名列宽度（1表示自动填充）
-      score: 80,     // 分数列宽度
-      memberCount: 60, // 人数列宽度
-      leader: 1,     // 队长列宽度（1表示自动填充）
-      bonus: 80      // 奖金列宽度
-    }
-  }
-};
-
-// 结束时间配置（精确到秒）
-export let battleEndTime = {
-  date: '2026-02-01',
-  time: '23:59:59'
-};
-
-// 战鼓参数配置
-export let drumConfig = {
-  // 音效参数
-  sound: {
-    volume: 1.0,           // 音量 0-1
-    frequency1: 150,       // 第一个音调频率
-    frequency2: 100,       // 第二个音调频率
-    attackTime: 0.01,      // 起音时间
-    decayTime: 0.3,        // 衰减时间
-    type1: 'sine',         // 第一个振荡器类型
-    type2: 'triangle'      // 第二个振荡器类型
-  },
-  // 动画参数
-  animation: {
-    beatInterval: 200,     // 节拍间隔（毫秒）
-    beatScale: 1.3,        // 跳动缩放比例
-    beatTranslateY: -15,   // 跳动上下位移
-    beatRotate: 5,         // 跳动旋转角度
-    idlePulseDuration: 2,  // 闲置脉动持续时间
-    beatDuration: 100      // 单次跳动持续时间
-  },
-  // 节拍模式
-  pattern: {
-    strongBeats: [1, 4],   // 强拍位置（1-4拍）
-    totalBeats: 4          // 每小节总拍数
-  }
-};
 
 // 保存结束时间
-export const saveBattleEndTime = (endTime) => {
+export const saveBattleEndTime = async (endTime) => {
-  battleEndTime = endTime;
+  battleEndTime = { ...endTime };
   console.log('保存结束时间:', battleEndTime);
+  return await saveBattleEndTimeToConfig(endTime);
 };
 
-// 保存数据的方法（模拟本地存储）
+// 保存英雄排名数据
-export const saveIndividualRankings = (data) => {
+export const saveIndividualRankings = async (data) => {
-  // 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
+  individualRankings = [...data];
-  console.log('保存个人排名数据:', data);
+  console.log('保存英雄排名数据:', data);
-  // 在真实环境中，可以调用API保存数据
+  return await saveIndividualRankingsToConfig(data);
 };
 
-export const saveTeamRankings = (data) => {
+// 保存战区排名数据
-  // 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
+export const saveTeamRankings = async (data) => {
-  console.log('保存战队排名数据:', data);
+  teamRankings = [...data];
-  // 在真实环境中，可以调用API保存数据
+  console.log('保存战区排名数据:', data);
+  return await saveTeamRankingsToConfig(data);
 };
 
 // 保存显示配置
-export const saveDisplayConfig = (config) => {
+export const saveDisplayConfig = async (config) => {
-  // 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
+  displayConfig = { ...config };
   console.log('保存显示配置:', config);
-  // 在真实环境中，可以调用API保存数据
+  return await saveDisplayConfigToConfig(config);
 };
 
-// 保存战鼓配置
+
-export const saveDrumConfig = (config) => {
+
-  // 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
+// 保存奖金规则
-  console.log('保存战鼓配置:', config);
+export const saveBonusRules = async (rules) => {
-  drumConfig = { ...drumConfig, ...config };
+  bonusRules = [...rules];
-  // 在真实环境中，可以调用API保存数据
+  console.log('保存奖金规则:', rules);
+  return await saveBonusRulesToConfig(rules);
+};
+
+// 验证用户登录
+export const validateUser = (username, password) => {
+  return systemUsers.find(user => user.username === username && user.password === password);
+};
+
+// 初始化数据（异步版本，用于应用启动时加载数据）
+export const initializeData = async () => {
+  try {
+    await refreshData();
+  } catch (error) {
+    console.error('数据初始化失败:', error);
+  }
+};
+
+// 刷新数据
+export const refreshData = async () => {
+  try {
+    individualRankings = await getIndividualRankings();
+    teamRankings = await getTeamRankings();
+    bonusRules = await getBonusRules() || [
+      { rank: '1-3', description: '前三名', individualBonus: '¥10000, ¥8000, ¥5000', teamBonus: '¥50000, ¥30000, ¥20000' },
+      { rank: '4-10', description: '四至十名', individualBonus: '¥3000/人', teamBonus: '¥10000/队' },
+      { rank: '11-20', description: '十一至二十名', individualBonus: '¥1000/人', teamBonus: '¥5000/队' }
+    ];
+    systemUsers = await getSystemUsers();
+    displayConfig = await getDisplayConfig();
+    battleEndTime = await getBattleEndTime();
+
+    return true;
+  } catch (error) {
+    console.error('刷新数据失败:', error);
+    return false;
+  }
+};
+
+// 添加系统用户
+export const addSystemUser = async (user) => {
+  try {
+    const result = await addSystemUserToConfig(user);
+    if (result) {
+      // 刷新用户列表
+      systemUsers = await getSystemUsers();
+    }
+    return result;
+  } catch (error) {
+    console.error('添加用户失败:', error);
+    throw error;
+  }
+};
+
+// 删除系统用户
+export const deleteSystemUser = async (userId) => {
+  try {
+    const result = await deleteSystemUserToConfig(userId);
+    if (result) {
+      // 刷新用户列表
+      systemUsers = await getSystemUsers();
+    }
+    return result;
+  } catch (error) {
+    console.error('删除用户失败:', error);
+    throw error;
+  }
+};
+
+// 更新系统用户
+export const updateSystemUser = async (userId, updatedData) => {
+  try {
+    const result = await updateSystemUserToConfig(userId, updatedData);
+    if (result) {
+      // 刷新用户列表
+      systemUsers = await getSystemUsers();
+    }
+    return result;
+  } catch (error) {
+    console.error('更新用户失败:', error);
+    throw error;
+  }
 };

src/main.js

@@ -2,11 +2,13 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from './router'
+import { getBackgroundConfig } from './services/configService'
+
+// 背景设置已移至样式表 style.css 中定义
 
 const app = createApp(App)
 
 // 使用路由
 app.use(router)
 
-// 挂载应用
+app.mount('#app');
-app.mount('#app')

src/router/index.js

@@ -1,13 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import BattleRanking from '../views/BattleRanking.vue';
+import BattleRanking from '../views/BattleRanking.vue'; // 首页组件
-import AdminPanel from '../views/AdminPanel.vue';
+import AdminPanel from '../views/AdminPanel.vue';       // 管理员面板组件
+import { musicPlayer } from '@/utils/musicPlayer';     // 音乐播放器实例
+import { getMusicConfig } from '@/services/configService'; // 音乐配置读取服务
 
+// 路由配置
 const routes = [
   {
     path: '/',
     name: 'BattleRanking',
     component: BattleRanking,
-    meta: { title: '百人大战排行榜' }
+    meta: { title: '百日大战排行榜' }
   },
   {
     path: '/admin',
@@ -16,23 +19,56 @@ const routes = [
     meta: { title: '管理员面板' }
   },
   {
-    // 捕获所有未匹配的路由，重定向到首页
+    // 404路由：未匹配路径重定向到首页
     path: '/:pathMatch(.*)*',
     redirect: '/'
   }
 ];
 
+// 创建路由实例
 const router = createRouter({
   history: createWebHistory(),
   routes
 });
 
-// 全局前置守卫，设置页面标题
+// 路由守卫：页面切换时控制音乐状态
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
-  // 设置文档标题
+  // 1. 进入管理员页面：强制暂停+静音
+  if (to.path.startsWith('/admin')) {
+    musicPlayer.pause();         // 暂停音乐
+    musicPlayer.setMuted(true);  // 强制静音（管理员页面始终无声音）
+    next();
+    return;
+  }
+
+  // 2. 进入首页：按配置播放/暂停
+  if (to.path === '/') {
+    try {
+      const musicConfig = await getMusicConfig(); // 读取音乐配置
+      if (musicConfig.enabled) {
+        // 初始化音乐路径+开关状态
+        musicPlayer.initMusicConfig(musicConfig.filePath, musicConfig.enabled);
+        musicPlayer.setMuted(false); // 首页取消静音
+        musicPlayer.play();          // 播放音乐
+      } else {
+        musicPlayer.pause(); // 开关关闭则暂停
+      }
+    } catch (error) {
+      console.error('首页音乐配置读取失败：', error);
+      musicPlayer.pause();
+    }
+  }
+
+  // 3. 进入其他页面：暂停音乐
+  if (to.path !== '/' && !to.path.startsWith('/admin')) {
+    musicPlayer.pause();
+  }
+
+  // 4. 设置页面标题（可选增强）
   if (to.meta.title) {
     document.title = to.meta.title;
   }
+
   next();
 });
 

src/services/configService.js

@@ -0,0 +1,449 @@
+// 配置文件API路径
+// 修复后（绝对路径，直接请求后端3000端口）
+const CONFIG_API_URL = 'http://localhost:3000/api/config';
+// 新增：音乐相关API地址（和后端接口对应）
+const MUSIC_API_URL = 'http://localhost:3000/api/musicConfig';
+const MUSIC_UPLOAD_API_URL = 'http://localhost:3000/api/upload/music';
+
+/**
+ * 读取配置文件
+ * @returns {Object} 配置数据
+ */
+export const readConfig = async () => {
+  try {
+    const response = await fetch(CONFIG_API_URL);
+    if (response.ok) {
+      return await response.json();
+    } else if (response.status === 404) {
+      // 配置文件不存在，使用默认配置
+      console.log('配置文件不存在，使用默认配置');
+      return getDefaultConfig();
+    }
+    throw new Error(`获取配置失败: ${response.status}`);
+  } catch (error) {
+    console.error('读取配置失败:', error);
+    return getDefaultConfig();
+  }
+};
+
+/**
+ * 写入配置文件
+ * @param {Object} config 新的配置数据
+ * @returns {boolean} 是否写入成功
+ */
+export const writeConfig = async (config) => {
+  try {
+    const response = await fetch(CONFIG_API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(config)
+    });
+    
+    if (response.ok) {
+      const result = await response.json();
+      return result.success;
+    }
+    
+    throw new Error(`保存配置失败: ${response.status}`);
+  } catch (error) {
+    console.error('写入配置失败:', error);
+    return false;
+  }
+};
+
+// 同步版本的readConfig（用于向后兼容）
+export const getConfig = async () => {
+  return await readConfig();
+};
+
+/**
+ * 获取默认配置（用于兜底）
+ * @returns {Object} 默认配置
+ */
+const getDefaultConfig = () => ({
+  individualRankings: [],
+  teamRankings: [],
+  bonusRules: [],
+  systemUsers: [],
+  displayConfig: {
+    showBonusModule: true, // 控制奖金设置模块的显示，默认不显示
+    individual: {
+      showLevel: false,
+      showDepartment: false,
+      scoreColumn: {
+        displayName: '分数',
+        displayStyle: 'number'
+      },
+      teamColumn: {
+        displayName: '战区',
+        displayStyle: 'text'
+      },
+      columnWidths: {
+        rank: '80px',
+        name: '150px',
+        dept: '150px',
+        team: '120px',
+        score: '100px',
+        level: '80px',
+        bonus: '100px'
+      }
+    },
+    team: {
+      showMemberCount: false,
+      showLeader: false,
+      totalScoreColumn: {
+        displayName: '业绩',
+        displayStyle: 'number'
+      },
+      columnWidths: {
+        rank: '80px',
+        name: '150px',
+        score: '100px',
+        memberCount: '120px',
+        bonus: '100px'
+      }
+    }
+  },
+  // ========== 音乐配置默认值（和displayConfig同级） ==========
+  music: {
+    enabled: false,
+    filePath: '/assets/music/background.mp3'
+  },
+  // ==========================================================
+  battleEndTime: {
+    date: new Date().toISOString().split('T')[0],
+    time: '00:00:00'
+  },
+  backgroundConfig: {
+    useBackgroundImage: true,
+    backgroundImage: '/battle-background.jpg', // 默认战旗背景图片
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundColor: '#1a1a1a' // 备选背景色
+  }
+});
+
+/**
+ * 获取英雄排名数据
+ * @returns {Array} 英雄排名数组
+ */
+export const getIndividualRankings = async () => {
+  const config = await readConfig();
+  return config.individualRankings || [];
+};
+
+/**
+ * 保存英雄排名数据
+ * @param {Array} rankings 英雄排名数组
+ * @returns {boolean} 是否保存成功
+ */
+export const saveIndividualRankings = async (rankings) => {
+  const config = await readConfig();
+  config.individualRankings = rankings;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取战区排名数据
+ * @returns {Array} 战区排名数组
+ */
+export const getTeamRankings = async () => {
+  const config = await readConfig();
+  return config.teamRankings || [];
+};
+
+/**
+ * 保存战区排名数据
+ * @param {Array} rankings 战区排名数组
+ * @returns {boolean} 是否保存成功
+ */
+export const saveTeamRankings = async (rankings) => {
+  const config = await readConfig();
+  config.teamRankings = rankings;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取奖金规则
+ * @returns {Array} 奖金规则数组
+ */
+export const getBonusRules = async () => {
+  const config = await readConfig();
+  return config.bonusRules || [];
+};
+
+/**
+ * 保存奖金规则
+ * @param {Array} rules 奖金规则数组
+ * @returns {boolean} 是否保存成功
+ */
+export const saveBonusRules = async (rules) => {
+  const config = await readConfig();
+  config.bonusRules = rules;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取系统用户
+ * @returns {Array} 系统用户数组
+ */
+export const getSystemUsers = async () => {
+  const config = await readConfig();
+  return config.systemUsers || [];
+};
+
+/**
+ * 保存系统用户
+ * @param {Array} users 系统用户数组
+ * @returns {boolean} 是否保存成功
+ */
+export const saveSystemUsers = async (users) => {
+  const config = await readConfig();
+  config.systemUsers = users;
+  return await writeConfig(config);
+};
+
+/**
+ * 添加用户
+ * @param {Object} user 用户信息
+ * @returns {boolean} 是否添加成功
+ */
+export const addSystemUser = async (user) => {
+  try {
+    const users = await getSystemUsers();
+    // 检查用户名是否已存在
+    const existingUser = users.find(u => u.username === user.username);
+    if (existingUser) {
+      throw new Error('用户名已存在');
+    }
+    
+    users.push({
+      id: Date.now(),
+      ...user
+    });
+    
+    return await saveSystemUsers(users);
+  } catch (error) {
+    console.error('添加用户失败:', error);
+    throw error;
+  }
+};
+
+/**
+ * 删除用户
+ * @param {number} userId 用户ID
+ * @returns {boolean} 是否删除成功
+ */
+export const deleteSystemUser = async (userId) => {
+  try {
+    let users = await getSystemUsers();
+    // 确保至少保留一个管理员用户
+    if (users.length <= 1) {
+      throw new Error('系统至少需要保留一个管理员用户');
+    }
+    
+    users = users.filter(u => u.id !== userId);
+    return await saveSystemUsers(users);
+  } catch (error) {
+    console.error('删除用户失败:', error);
+    throw error;
+  }
+};
+
+/**
+ * 更新用户信息
+ * @param {number} userId 用户ID
+ * @param {Object} updatedData 更新的数据
+ * @returns {boolean} 是否更新成功
+ */
+export const updateSystemUser = async (userId, updatedData) => {
+  try {
+    const users = await getSystemUsers();
+    const userIndex = users.findIndex(u => u.id === userId);
+    
+    if (userIndex === -1) {
+      throw new Error('用户不存在');
+    }
+    
+    // 如果要更新用户名，检查是否与其他用户冲突
+    if (updatedData.username && updatedData.username !== users[userIndex].username) {
+      const existingUser = users.find(u => u.id !== userId && u.username === updatedData.username);
+      if (existingUser) {
+        throw new Error('用户名已存在');
+      }
+    }
+    
+    users[userIndex] = {
+      ...users[userIndex],
+      ...updatedData
+    };
+    
+    return await saveSystemUsers(users);
+  } catch (error) {
+    console.error('更新用户失败:', error);
+    throw error;
+  }
+};
+
+/**
+ * 获取显示配置
+ * @returns {Object} 显示配置
+ */
+export const getDisplayConfig = async () => {
+  const config = await readConfig();
+  return config.displayConfig || getDefaultConfig().displayConfig;
+};
+
+/**
+ * 保存显示配置
+ * @param {Object} displayConfig 显示配置
+ * @returns {boolean} 是否保存成功
+ */
+export const saveDisplayConfig = async (displayConfig) => {
+  const config = await readConfig();
+  config.displayConfig = displayConfig;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取战斗结束时间
+ * @returns {Object} 结束时间配置
+ */
+export const getBattleEndTime = async () => {
+  const config = await readConfig();
+  return config.battleEndTime || getDefaultConfig().battleEndTime;
+};
+
+/**
+ * 保存战斗结束时间
+ * @param {Object} endTime 结束时间配置
+ * @returns {boolean} 是否保存成功
+ */
+export const saveBattleEndTime = async (endTime) => {
+  const config = await readConfig();
+  config.battleEndTime = endTime;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取背景配置
+ * @returns {Object} 背景配置
+ */
+export const getBackgroundConfig = async () => {
+  const config = await readConfig();
+  return config.backgroundConfig || getDefaultConfig().backgroundConfig;
+};
+
+/**
+ * 保存背景配置
+ * @param {Object} backgroundConfig 背景配置
+ * @returns {boolean} 是否保存成功
+ */
+export const saveBackgroundConfig = async (backgroundConfig) => {
+  const config = await readConfig();
+  config.backgroundConfig = backgroundConfig;
+  return await writeConfig(config);
+};
+
+/**
+ * 获取音乐配置（优先读后端接口，失败则兜底本地配置）
+ * @returns {Object} 音乐配置 { enabled, filePath }
+ */
+export const getMusicConfig = async () => {
+  try {
+    // 优先调用后端音乐配置接口
+    const response = await fetch(MUSIC_API_URL);
+    if (response.ok) {
+      const musicConfig = await response.json();
+      // 基础格式校验
+      if (typeof musicConfig.enabled !== 'boolean' || !musicConfig.filePath) {
+        throw new Error('后端音乐配置返回格式异常');
+      }
+      return musicConfig;
+    }
+    throw new Error(`获取音乐配置失败: ${response.status}`);
+  } catch (error) {
+    console.error('读取音乐配置接口失败，兜底读取本地配置:', error);
+    // 兜底逻辑：读取本地config中的music字段
+    const localConfig = await readConfig();
+    return localConfig.music || { enabled: false, filePath: '/assets/music/background.mp3' };
+  }
+};
+
+/**
+ * 上传音乐文件（带返回值格式校验）
+ * @param {File} file 音乐文件（MP3）
+ * @returns {Object} { success: boolean, filePath?: string, error?: string }
+ */
+export const uploadMusicFile = async (file) => {
+  try {
+    // 前置校验：文件类型
+    if (!file.type.includes('audio/mpeg') && !file.name.endsWith('.mp3')) {
+      throw new Error('仅支持MP3格式的音乐文件');
+    }
+
+    // 构建FormData（适配后端multer.single('musicFile')）
+    const formData = new FormData();
+    formData.append('musicFile', file);
+
+    const response = await fetch(MUSIC_UPLOAD_API_URL, {
+      method: 'POST',
+      body: formData // FormData格式无需设置Content-Type，浏览器自动处理
+    });
+
+    if (response.ok) {
+      const result = await response.json();
+      // 严格校验后端返回格式
+      if (typeof result.success !== 'boolean') {
+        throw new Error('音乐上传接口返回格式异常（缺失success字段）');
+      }
+      if (result.success && !result.filePath) {
+        throw new Error('音乐上传成功但未返回文件路径');
+      }
+      return result;
+    }
+
+    throw new Error(`音乐上传失败: ${response.status}`);
+  } catch (error) {
+    console.error('上传音乐文件失败:', error);
+    return { success: false, error: error.message };
+  }
+};
+
+/**
+ * 更新音乐配置（同步更新后端+本地配置）
+ * @param {boolean} enabled 是否开启播放
+ * @param {string} filePath 音乐文件路径
+ * @returns {boolean} 是否更新成功
+ */
+export const updateMusicConfig = async (enabled, filePath) => {
+  try {
+    // 1. 调用后端接口更新音乐配置
+    const response = await fetch(MUSIC_API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ enabled, filePath })
+    });
+
+    if (response.ok) {
+      const result = await response.json();
+      if (result.success) {
+        // 2. 同步更新本地config中的music字段
+        const localConfig = await readConfig();
+        localConfig.music = { enabled, filePath };
+        await writeConfig(localConfig);
+        console.log('音乐配置已同步更新到本地');
+      }
+      return result.success;
+    }
+
+    throw new Error(`保存音乐配置失败: ${response.status}`);
+  } catch (error) {
+    console.error('更新音乐配置失败:', error);
+    return false;
+  }
+};

src/style.css

@@ -5,25 +5,53 @@
   box-sizing: border-box;
 }
 
+/* 图片预加载 - 提升移动端加载性能 */
+body::before {
+  content: "";
+  display: none;
+  background-image: url(/battle-background.jpg);
+}
+
 /* 根元素样式 */
 :root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  /* 王者荣耀风格字体 - 使用系统默认字体但设置更多样化 */
+  font-family: 'Microsoft YaHei', 'PingFang SC', 'SimHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   line-height: 1.5;
-  font-weight: 400;
+  font-weight: 500;
   
-  /* 自定义颜色变量 */
+  /* 王者荣耀风格配色方案 */
-  --primary-color: #ff6b6b;
+  /* 主色调：金色、红色、黑色 */
-  --secondary-color: #ee5a24;
+  --primary-color: #ffc107;       /* 王者荣耀金色 */
-  --accent-color: #6c5ce7;
+  --secondary-color: #e74c3c;     /* 王者荣耀红色 */
-  --success-color: #28a745;
+  --accent-color: #f39c12;        /* 亮金色 */
-  --warning-color: #ffc107;
+  --success-color: #27ae60;       /* 成功绿色 */
-  --danger-color: #dc3545;
+  --warning-color: #e67e22;       /* 警告橙色 */
-  --info-color: #17a2b8;
+  --danger-color: #c0392b;        /* 危险深红色 */
-  --dark-color: #343a40;
+  --info-color: #3498db;          /* 信息蓝色 */
-  --light-color: #f8f9fa;
+  --dark-color: #1a1a1a;          /* 几乎黑色 */
+  --light-color: #f5f5f5;         /* 浅灰色背景 */
   --white-color: #ffffff;
-  --text-color: #495057;
+  --text-color: #333333;
-  --text-light: #6c757d;
+  --text-light: #666666;
+  
+  /* 王者荣耀特有颜色 */
+  --gold-primary: #ffd700;        /* 纯金色 */
+  --gold-secondary: #ffc700;      /* 次级金色 */
+  --gold-tertiary: #ffb700;       /* 三级金色 */
+  --red-primary: #e74c3c;         /* 主红色 */
+  --red-secondary: #c0392b;       /* 次级红色 */
+  --black-primary: #1a1a1a;       /* 主黑色 */
+  --black-secondary: #2c2c2c;     /* 次级黑色 */
+  
+  /* 边框发光效果 */
+  --glow-primary: 0 0 10px rgba(255, 215, 0, 0.5);
+  --glow-secondary: 0 0 15px rgba(231, 76, 60, 0.4);
+  
+  /* 渐变背景 */
+  --gradient-primary: linear-gradient(135deg, #ffd700, #ffc700, #ffb700);
+  --gradient-secondary: linear-gradient(135deg, #e74c3c, #c0392b, #a93226);
+  --gradient-background: linear-gradient(135deg, #1a1a1a, #2c2c2c, #1a1a1a);
+  --gradient-card: linear-gradient(145deg, #ffffff, #f0f0f0);
   
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -38,57 +66,393 @@ html, body {
   width: 100%;
   height: 100%;
   color: var(--text-color);
-  background-color: var(--light-color);
+  background-color: var(--dark-color);
+  background-image: url(/battle-background.jpg);
+  background-size: auto;
+  background-position: top center;
+  background-repeat: revert;
+  background-attachment: fixed;
 }
 
 #app {
   width: 100%;
   min-height: 100vh;
+  display: flex;
+  justify-content: center;
 }
 
-/* 标题样式 */
+/* 主内容容器 - 适配1920x1080分辨率 */
+.content-container {
+  width: 100%;
+  max-width: 1920px;
+  min-height: 100vh;
+  padding: 0 20px;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* 当屏幕宽度超过1920px时，保持内容居中且大小不变 */
+@media (min-width: 1921px) {
+  .content-container {
+    width: 1920px;
+    margin: 0 auto;
+    /* box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); */
+  }
+}
+
+/* 当屏幕高度超过1080px时，保持内容垂直对齐 */
+@media (min-height: 1081px) {
+  #app {
+    align-items: flex-start;
+  }
+}
+
+/* 针对1920x1080分辨率的精确调整 */
+@media (width: 1920px) and (height: 1080px) {
+  .content-container {
+    padding: 0;
+  }
+}
+
+/* 游戏化标题样式 */
 h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1.2;
-  color: var(--dark-color);
+  color: var(--gold-primary);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  letter-spacing: 0.5px;
 }
 
-/* 链接样式 */
+/* 游戏化主标题 */
+h1.game-title {
+  color: black;
+  font-size: 3.5rem;
+  font-weight: 800;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* 游戏化次级标题 */
+h2.game-subtitle {
+  color: var(--gold-secondary);
+  font-size: 1.8rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-align: center;
+}
+
+/* 游戏化链接样式 */
 a {
-  color: var(--accent-color);
+  color: var(--gold-primary);
   text-decoration: none;
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  position: relative;
 }
 
 a:hover {
-  color: var(--primary-color);
+  color: var(--gold-tertiary);
-  text-decoration: underline;
+  text-decoration: none;
 }
 
-/* 按钮基础样式重置 */
+a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  background-color: var(--gold-primary);
+  transition: width 0.3s ease;
+}
+
+a:hover::after {
+  width: 100%;
+  box-shadow: 0 0 5px var(--gold-primary);
+}
+
+/* 游戏化按钮样式 */
 button {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   cursor: pointer;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 button:focus {
   outline: none;
 }
 
-/* 输入框基础样式 */
+/* 游戏化主按钮 */
+.btn-game {
+  background: var(--gradient-primary);
+  color: var(--black-primary);
+  border: 2px solid var(--gold-primary);
+  padding: 10px 20px;
+  border-radius: 30px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3), var(--glow-primary);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-game:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4), var(--glow-primary);
+  background: var(--gold-tertiary);
+}
+
+.btn-game:active {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3), var(--glow-primary);
+}
+
+/* 按钮波纹效果 */
+.btn-game::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn-game:active::before {
+  width: 300px;
+  height: 300px;
+}
+
+/* 游戏化次要按钮 */
+.btn-game-secondary {
+  background: var(--gradient-secondary);
+  color: var(--white-color);
+  border: 2px solid var(--red-primary);
+  padding: 10px 20px;
+  border-radius: 30px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3), var(--glow-secondary);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-game-secondary:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4), var(--glow-secondary);
+  background: var(--red-secondary);
+  animation: borderGlow 1.5s ease-in-out infinite alternate;
+}
+
+.btn-game-secondary:active {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3), var(--glow-secondary);
+}
+
+/* 次要按钮波纹效果 */
+.btn-game-secondary::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn-game-secondary:active::before {
+  width: 300px;
+  height: 300px;
+}
+
+/* 游戏化输入框样式 */
 input, select, textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
+  background: rgba(0, 0, 0, 0.8);
+  border: 2px solid var(--gold-primary);
+  border-radius: 8px;
+  padding: 10px 15px;
+  color: var(--gold-primary);
+  transition: all 0.3s ease;
+  box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
 
-/* 表格样式重置 */
+/* 登录表单输入框增强 */
+.form-input {
+  background: rgba(0, 0, 0, 0.9);
+  border-color: var(--gold-secondary);
+  color: var(--gold-primary);
+  font-size: 1.1rem;
+  padding: 12px 15px;
+  width: 100%;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.form-input:focus {
+  border-color: var(--gold-tertiary);
+  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.85);
+}
+
+/* 表单标签增强 */
+.form-group label {
+  color: var(--gold-primary);
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 8px;
+  display: block;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+}
+
+/* 占位符文本颜色 */
+input::placeholder {
+  color: rgba(255, 215, 0, 0.6);
+  font-style: italic;
+}
+
+/* 登录表单容器增强 */
+.login-form {
+  background: rgba(0, 0, 0, 0.85);
+  padding: 30px;
+  border-radius: 15px;
+  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
+}
+
+/* 错误信息增强 */
+.error-message {
+  color: var(--red-primary);
+  font-weight: 600;
+  text-align: center;
+  margin-top: 15px;
+  padding: 10px;
+  border: 1px solid var(--red-primary);
+  border-radius: 5px;
+  background: rgba(231, 76, 60, 0.1);
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--gold-tertiary);
+  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), var(--glow-primary);
+  background: rgba(255, 255, 255, 0.15);
+}
+
+/* 游戏化表格样式 */
 table {
   border-collapse: collapse;
   width: 100%;
+  border: 2px solid var(--gold-primary);
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
+  border-radius: 10px;
+  overflow: hidden;
+  animation: tableGlow 2s ease-in-out infinite alternate;
+}
+
+/* 表格发光动画 */
+@keyframes tableGlow {
+  from { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
+  to { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
+}
+
+/* 游戏化卡片样式 */
+.card-game {
+  background: transparent;
+  border: 0;
+  /* padding: 20px; */
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  animation: float 3s ease-in-out infinite;
+}
+
+.card-game::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
+  transform: rotate(45deg);
+  animation: shine 6s infinite;
+}
+
+.card-game:hover {
+  transform: translateY(-5px);
+  /* box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), var(--glow-primary); */
+  /* border-color: var(--gold-tertiary); */
+}
+
+@keyframes shine {
+  0% { transform: rotate(45deg) translate(-100%, -100%); }
+  100% { transform: rotate(45deg) translate(100%, 100%); }
+}
+
+/* 卡片浮动动画 */
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+  100% { transform: translateY(0px); }
+}
+
+/* 游戏化边框发光效果 */
+.glow-border {
+  border: 2px solid var(--gold-primary);
+  box-shadow: 0 0 15px var(--gold-primary), 0 0 30px var(--gold-secondary), inset 0 0 15px var(--gold-primary);
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  animation: glowPulse 2s ease-in-out infinite alternate;
+}
+
+.glow-border:hover {
+  box-shadow: 0 0 20px var(--gold-primary), 0 0 40px var(--gold-secondary), inset 0 0 20px var(--gold-primary);
+  border-color: var(--gold-tertiary);
+  animation: glowPulse 1s ease-in-out infinite alternate;
+}
+
+/* 发光脉动动画 */
+@keyframes glowPulse {
+  from {
+    box-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary), inset 0 0 10px var(--gold-primary);
+  }
+  to {
+    box-shadow: 0 0 20px var(--gold-primary), 0 0 40px var(--gold-secondary), inset 0 0 20px var(--gold-primary);
+  }
+}
+
+/* 游戏化徽章样式 */
+.badge-game {
+  background: var(--gradient-primary);
+  color: var(--black-primary);
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
 }
 
 /* 滚动条样式 */
@@ -136,15 +500,220 @@ table {
 .mb-4 { margin-bottom: 1.5rem; }
 .mb-5 { margin-bottom: 3rem; }
 
+/* 表格行样式增强 */
+.table-row {
+  /* color: var(--gold-secondary); */
+  font-weight: 600;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+}
+
+.table-row:hover {
+  color: var(--gold-primary);
+  background: rgba(255, 215, 0, 0.1);
+}
+
+.table-header {
+  color: var(--gold-primary);
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+/* 表格单元格样式增强 */
+.rank-col, .score-col, .bonus-col {
+  /* color: var(--gold-tertiary); */
+  font-weight: 700;
+}
+
+.name-col, .dept-col, .level-col {
+  /* color: var(--gold-secondary); */
+  font-weight: 600;
+}
+
 /* 响应式断点 */
 @media (max-width: 768px) {
   :root {
     font-size: 14px;
   }
+  
+  /* 移动端背景图片优化：保留图片但优化加载性能 */
+  html, body {
+    background-color: var(--dark-color);
+    background-image: url(/battle-background.jpg);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    /* 预加载优化 */
+    background-attachment: scroll !important;
+  }
+
+  .content-container {
+    padding: 0;
+  }
 }
 
 @media (max-width: 480px) {
   :root {
     font-size: 13px;
   }
+  
+  /* 小屏幕手机背景图片优化 */
+  html, body {
+    background-color: var(--dark-color);
+    background-image: url(/battle-background.jpg);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+
+  .content-container {
+    padding: 0;
+  }
 }
+
+/* 游戏化标题发光动画 */
+.game-title {
+  animation: titleGlow 3s ease-in-out infinite alternate;
+  text-stroke: 1px var(--gold-tertiary);
+  -webkit-text-stroke: 1px var(--gold-tertiary);
+}
+
+@keyframes titleGlow {
+  from {
+    text-shadow: 
+      0 0 1px rgba(0, 0, 0, 0.9), /* 提高清晰度的细影 */
+      0 0 10px rgba(255, 215, 0, 0.5);
+  }
+  to {
+    text-shadow: 
+      0 0 1px rgba(0, 0, 0, 0.9), /* 提高清晰度的细影 */
+      0 0 15px rgba(255, 215, 0, 0.7), 
+      0 0 25px rgba(255, 215, 0, 0.5);
+  }
+}
+
+/* 游戏化副标题发光动画 */
+.game-subtitle {
+  animation: subtitleGlow 2s ease-in-out infinite alternate;
+}
+
+@keyframes subtitleGlow {
+  from {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 193, 7, 0.4);
+  }
+  to {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 193, 7, 0.6);
+  }
+}
+
+/* 数字滚动动画 */
+@keyframes countUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 数字滚动效果类 */
+.count-animation {
+  animation: countUp 0.8s ease-out;
+  font-weight: bold;
+  color: var(--gold-primary);
+}
+
+/* 鼠标悬停缩放效果 */
+.hover-scale {
+  transition: transform 0.3s ease;
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+/* 游戏化滚动条样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--dark-bg);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(var(--gold-primary), var(--gold-secondary));
+  border-radius: 6px;
+  border: 2px solid var(--dark-bg);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(var(--gold-secondary), var(--gold-tertiary));
+  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
+}
+
+/* 渐变背景动画 */
+.gradient-bg {
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* 内容区域渐入动画 */
+.content {
+  animation: fadeIn 0.8s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 排名前三名特殊发光动画 */
+.rank-1 {
+  animation: championGlow 2s ease-in-out infinite alternate;
+}
+
+.rank-2 {
+  animation: championGlow 2.5s ease-in-out infinite alternate;
+}
+
+.rank-3 {
+  animation: championGlow 3s ease-in-out infinite alternate;
+}
+
+@keyframes championGlow {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
+
+/* 金色文本悬停效果增强 */
+.text-gold {
+  transition: all 0.3s ease;
+}
+
+.text-gold:hover {
+  color: var(--gold-secondary);
+  text-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
+}

src/utils/musicPlayer.js

@@ -0,0 +1,137 @@
+// src/utils/musicPlayer.js
+class MusicPlayer {
+  constructor() {
+    this.audio = null; 
+    this.isPlaying = false; 
+    this.defaultPath = "/assets/music/background.mp3"; 
+    this.enabled = false; 
+  }
+
+  /**
+   * 适配组件调用的 init 方法（核心：复用 initMusicConfig 逻辑）
+   * @param {string} path 音乐文件路径（组件中传入的 musicPath）
+   */
+  init(path) {
+    // 组件调用 init 时，复用已有的 initMusicConfig，开关状态先传 this.enabled（后续组件会通过配置更新）
+    this.initMusicConfig(path, this.enabled);
+  }
+
+  /**
+   * 原有初始化音乐配置方法（保留，适配动态配置）
+   * @param {string} filePath 音乐路径
+   * @param {boolean} enabled 播放开关
+   */
+  initMusicConfig(filePath, enabled) {
+    this.enabled = enabled;
+    let validPath = this.defaultPath;
+    if (filePath && filePath.endsWith('.mp3')) {
+      validPath = filePath;
+    } else if (filePath) {
+      console.warn(`音乐路径无效（非MP3格式）：${filePath}，使用兜底路径`);
+    }
+    if (this.audio) {
+      this.audio.pause();
+      this.audio = null;
+    }
+    this.audio = new Audio(validPath);
+    this.audio.loop = true;
+  }
+
+  /**
+   * 播放音乐（保留原有逻辑，适配开关）
+   */
+  play() {
+    if (!this.enabled) {
+      console.log("首页播放开关未开启，跳过音乐播放");
+      return;
+    }
+    if (!this.audio) {
+      this.initMusicConfig(this.defaultPath, false);
+      console.warn("未初始化音乐配置，使用兜底路径且关闭播放开关");
+      return;
+    }
+    if (!this.isPlaying) {
+      this.audio.play()
+        .then(() => {
+          this.isPlaying = true;
+          console.log("音乐播放成功，当前路径：", this.getCurrentPath());
+        })
+        .catch(err => {
+          console.error("音乐播放失败（浏览器自动播放限制/路径错误）：", err);
+          this.isPlaying = false;
+        });
+    }
+  }
+
+  /**
+   * 暂停音乐（保留原有逻辑）
+   */
+  pause() {
+    if (this.audio && this.isPlaying) {
+      this.audio.pause();
+      this.isPlaying = false;
+      console.log("音乐已暂停");
+    }
+  }
+/**
+ * 新增：设置静音/取消静音（适配管理员/首页场景）
+ * @param {boolean} muted 是否静音
+ */
+setMuted(muted) {
+  if (this.audio) {
+    this.audio.muted = muted;
+    console.log(muted ? "音乐已静音" : "音乐已取消静音");
+  }
+}
+  /**
+   * 新增：stop 方法（组件 onUnmounted 调用，暂停+重置进度）
+   */
+  stop() {
+    if (this.audio) {
+      this.audio.pause();
+      this.audio.currentTime = 0; // 重置播放进度到开头
+      this.isPlaying = false;
+      console.log("音乐已停止（重置进度）");
+    }
+  }
+
+  /**
+   * 新增：destroy 方法（组件 onUnmounted 调用，销毁实例释放内存）
+   */
+  destroy() {
+    this.stop(); // 先停止播放
+    if (this.audio) {
+      this.audio = null; // 清空音频实例，释放内存
+      console.log("音乐实例已销毁，释放内存");
+    }
+  }
+
+  /**
+   * 获取当前音乐路径（保留原有逻辑）
+   * @returns {string} 相对路径
+   */
+  getCurrentPath() {
+    if (!this.audio) return this.defaultPath;
+    return this.audio.src.split(window.location.origin)[1] || this.defaultPath;
+  }
+
+  /**
+   * 更新音乐路径（保留原有逻辑）
+   * @param {string} newPath 新路径
+   */
+  updateMusicPath(newPath) {
+    if (!newPath || !newPath.endsWith('.mp3')) {
+      console.error("更新的音乐路径无效（非MP3格式）：", newPath);
+      return;
+    }
+    this.initMusicConfig(newPath, this.enabled);
+    console.log("音乐路径已更新为：", newPath);
+    if (this.enabled && this.isPlaying) {
+      this.pause();
+      this.play();
+    }
+  }
+}
+
+// 导出全局唯一实例
+export const musicPlayer = new MusicPlayer();

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文件夹
+    }
+  }
 })