✨ feat: 添加额外资源配置，优化远程控制页面HTML路径获取逻辑

🐞 fix: 修复远程控制页面找不到问题
🌈 style: v4.5.0
2026-04-03 22:30:50 +08:00 · 2025-04-30 00:47:14 +08:00 · 2025-04-30 00:14:05 +08:00 · 2025-04-29 23:48:49 +08:00 · 2025-04-29 23:38:17 +08:00 · 2025-04-29 23:33:44 +08:00
28 changed files with 1712 additions and 367 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,23 +1,25 @@
 # 更新日志

-## v4.4.0
-## 更新时间 2025 年 4 月 23 日 00:16
+## v4.5.0
+## 更新时间 2025 年 4 月 29 日 23:50
 > 如果更新遇到问题，请前往 <a href="http://donate.alger.fun/download" target="_blank">下载 AlgerMusicPlayer</a>

 > 帮我点个 star <a href="https://github.com/algerkong/AlgerMusicPlayer" target="_blank">github star</a>

-> 请我喝咖啡 ☕️ <a href="http://donate.alger.fun/donate" target="_blank">赏你</a>
+> 请我喝咖啡(支持作者) ☕️ <a href="http://donate.alger.fun/donate" target="_blank" style="color: red; font-weight: bold;">赏你</a>

 > QQ群 976962720

 ### ✨ 新功能
- 优化音源解析功能，添加音源配置，添加GD音乐台解析支持 ([ed9cf9c](https://github.com/algerkong/AlgerMusicPlayer/commit/ed9cf9c))
+- 添加远程控制功能，支持使用局域网链接地址远程控制音乐播放操作（默认关闭需要在设置中开启） ([c82ffd0](https://github.com/algerkong/AlgerMusicPlayer/commit/c82ffd0))（#169）
+- 更新歌手数据加载逻辑，首页添加周杰伦歌手信息常驻 ([3069514](https://github.com/algerkong/AlgerMusicPlayer/commit/3069514))

 ### 🐛 Bug 修复
- 修复下载管理切换 tab 程序卡死问题 ([27d5bd8](https://github.com/algerkong/AlgerMusicPlayer/commit/27d5bd8)) (#153)
- 修复歌曲播放地址缓存导致播放失败问题，添加过期时间 ([76e55d4](https://github.com/algerkong/AlgerMusicPlayer/commit/76e55d4))
- 修复 Electron 版本更新导致的桌面歌词窗口出现边框的问题 ([a676136](https://github.com/algerkong/AlgerMusicPlayer/commit/a676136))
- 优化底部菜单位置和间距 修复移动端菜单不显示问题 ([25b90fa](https://github.com/algerkong/AlgerMusicPlayer/commit/25b90fa))
+- 修复音乐播放重复声音的问题，添加锁机制，添加防抖机制，优化音频服务和快捷键处理逻辑 ([159dd03](https://github.com/algerkong/AlgerMusicPlayer/commit/159dd03)) (#173)
+- 修复歌手页面数据加载不全问题 ([57424f9](https://github.com/algerkong/AlgerMusicPlayer/commit/57424f9)) (#165)
+
+### 🎨 优化
+- 优化应用图标，更新应用图标资源 ([0128662](https://github.com/algerkong/AlgerMusicPlayer/commit/0128662))
+- 优化设置页面，拆分组件 ([c98fa20](https://github.com/algerkong/AlgerMusicPlayer/commit/c98fa20))
+- 优化设置模块，合并默认设置与存储设置，初始化时读取设置 ([0a22c7b](https://github.com/algerkong/AlgerMusicPlayer/commit/0a22c7b))

-### 🔧 其他变更
- 更新项目依赖 ([35b9cbf](https://github.com/algerkong/AlgerMusicPlayer/commit/35b9cbf))([7624a1a](https://github.com/algerkong/AlgerMusicPlayer/commit/7624a1a))
--- a/README.md
+++ b/README.md
@@ -14,20 +14,22 @@
  - 支持歌单、MV、专辑等完整音乐服务
  - 灰色音乐资源解析（基于 @unblockneteasemusic/server）
  - 高品质音乐试听（需网易云VIP）
-  - 音乐文件下载（支持右键下载和批量下载）
+  - 音乐文件下载（支持右键下载和批量下载, 附带歌词封面等信息）
 - 🚀 技术特性
  - 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
  - 自动更新检测
-  - 全平台适配（Desktop & Web & Mobile Web）
+  - 全平台适配（Desktop & Web & Mobile Web & Android<后续> & ios<后续>）

 ## 项目简介
- 一个基于 electron typescript vue3 的桌面音乐播放器 适配 web端 桌面端 web移动端
+ 一个第三方音乐播放器、本地服务、桌面歌词、音乐下载、最高音质

 ## 预览地址
 [http://mc.alger.fun/](http://mc.alger.fun/)

 QQ群:789288579

+tg群:[AlgerMusic tg](https://t.me/+9efsKRuvKBk2NWVl)
+
 ## 软件截图
 ![首页白](./docs/image.png)
 ![首页黑](./docs/image3.png)
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "AlgerMusicPlayer",
-  "version": "4.4.0",
+  "version": "4.5.0",
  "description": "Alger Music Player",
  "author": "Alger <algerkc@qq.com>",
  "main": "./out/main/index.js",
@@ -24,7 +24,9 @@
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^4.0.0",
    "@unblockneteasemusic/server": "^0.27.8-patch.1",
+    "cors": "^2.8.5",
    "electron-store": "^8.1.0",
+    "express": "^4.18.2",
    "electron-updater": "^6.6.2",
    "font-list": "^1.5.1",
    "netease-cloud-music-api-alger": "^4.26.1",
@@ -54,7 +56,7 @@
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.7",
    "cross-env": "^7.0.3",
-    "electron": "^35.2.0",
+    "electron": "^36.0.0",
    "electron-builder": "^25.1.8",
    "electron-vite": "^3.1.0",
    "eslint": "^9.0.0",
@@ -97,6 +99,13 @@
        "repo": "AlgerMusicPlayer"
      }
    ],
+    "extraResources": [
+      {
+        "from": "resources/html",
+        "to": "html",
+        "filter": ["**/*"]
+      }
+    ],
    "mac": {
      "icon": "resources/icon.icns",
      "target": [
--- a/resources/html/remote-control.html
+++ b/resources/html/remote-control.html
@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>AlgerMusicPlayer 远程控制</title>
+  <style>
+    :root {
+      --primary-color: #007AFF;
+      --secondary-color: #5AC8FA;
+      --success-color: #4CD964;
+      --danger-color: #FF3B30;
+      --warning-color: #FF9500;
+      --light-gray: #F2F2F7;
+      --medium-gray: #E5E5EA;
+      --dark-gray: #8E8E93;
+      --text-color: #000000;
+      --text-secondary: #6C6C6C;
+      --background-color: #FFFFFF;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --primary-color: #0A84FF;
+        --secondary-color: #64D2FF;
+        --success-color: #30D158;
+        --danger-color: #FF453A;
+        --warning-color: #FF9F0A;
+        --light-gray: #1C1C1E;
+        --medium-gray: #2C2C2E;
+        --dark-gray: #8E8E93;
+        --text-color: #FFFFFF;
+        --text-secondary: #AEAEB2;
+        --background-color: #000000;
+      }
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: var(--text-color);
+      background-color: var(--light-gray);
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+      padding: 0;
+      margin: 0;
+    }
+
+    .header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background-color: var(--background-color);
+      padding: 12px 16px;
+      text-align: center;
+      border-bottom: 1px solid var(--medium-gray);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+
+    .header h1 {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    .container {
+      max-width: 540px;
+      margin: 0 auto;
+      padding: 16px;
+      width: 100%;
+      flex: 1;
+    }
+
+    .card {
+      background-color: var(--background-color);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+
+    .song-info {
+      display: flex;
+      align-items: center;
+      padding-bottom: 16px;
+    }
+
+    .song-cover {
+      width: 72px;
+      height: 72px;
+      border-radius: 8px;
+      object-fit: cover;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+      background-color: var(--medium-gray);
+    }
+
+    .song-details {
+      margin-left: 16px;
+      flex: 1;
+    }
+
+    .song-details h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .song-details p {
+      margin: 4px 0 0;
+      font-size: 15px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .play-state {
+      font-size: 14px;
+      color: var(--primary-color);
+      margin-top: 4px;
+      display: flex;
+      align-items: center;
+    }
+
+    .play-state::before {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 6px;
+    }
+
+    .playing .play-state::before {
+      background-color: var(--success-color);
+    }
+
+    .paused .play-state::before {
+      background-color: var(--warning-color);
+    }
+
+    .controls {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .extra-controls {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    .btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--background-color);
+      color: var(--primary-color);
+      border: 1px solid var(--medium-gray);
+      padding: 16px 0;
+      border-radius: 12px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      user-select: none;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .btn:active {
+      transform: scale(0.97);
+      opacity: 0.7;
+    }
+
+    .btn::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--primary-color);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      z-index: -1;
+    }
+
+    .btn:active::before {
+      opacity: 0.1;
+    }
+
+    .btn svg {
+      margin-bottom: 8px;
+      width: 24px;
+      height: 24px;
+      fill: var(--primary-color);
+    }
+
+    .btn-play svg {
+      width: 28px;
+      height: 28px;
+      margin-bottom: 6px;
+    }
+
+    .status-bar {
+      text-align: center;
+      padding: 8px 16px;
+      font-size: 14px;
+      color: var(--text-secondary);
+      background-color: var(--background-color);
+      border-top: 1px solid var(--medium-gray);
+      position: sticky;
+      bottom: 0;
+    }
+
+    .status-message {
+      display: inline-block;
+      transition: opacity 0.3s ease;
+    }
+
+    .status-message.fade {
+      opacity: 0;
+    }
+
+    .refresh-button {
+      color: var(--primary-color);
+      background: none;
+      border: none;
+      font-size: 14px;
+      cursor: pointer;
+      padding: 0;
+      margin-left: 8px;
+    }
+
+    @media (max-width: 350px) {
+      .controls, .extra-controls {
+        gap: 8px;
+      }
+      
+      .btn {
+        padding: 12px 0;
+        font-size: 12px;
+      }
+      
+      .btn svg {
+        width: 20px;
+        height: 20px;
+        margin-bottom: 6px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>AlgerMusicPlayer 远程控制</h1>
+  </div>
+
+  <div class="container">
+    <div class="card" id="songInfoCard">
+      <div class="song-info">
+        <img id="songCover" class="song-cover" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E" alt="封面">
+        <div class="song-details">
+          <h2 id="songTitle">未在播放</h2>
+          <p id="songArtist">--</p>
+          <div class="play-state" id="playState">未播放</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="controls">
+        <button id="prevBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+          </svg>
+          上一首
+        </button>
+        <button id="playBtn" class="btn btn-play">
+          <svg id="playIcon" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M8 5v14l11-7z"/>
+          </svg>
+          播放/暂停
+        </button>
+        <button id="nextBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+          </svg>
+          下一首
+        </button>
+      </div>
+
+      <div class="extra-controls">
+        <button id="volumeDownBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
+          </svg>
+          音量-
+        </button>
+        <button id="volumeUpBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+          </svg>
+          音量+
+        </button>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="extra-controls">
+        <button id="favoriteBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+          收藏
+        </button>
+        <button id="refreshBtn" class="btn">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
+          </svg>
+          刷新
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="status-bar">
+    <span id="status" class="status-message">准备就绪</span>
+  </div>
+
+  <script>
+    // 页面加载完成后执行
+    document.addEventListener('DOMContentLoaded', () => {
+      // 获取DOM元素
+      const songInfoCard = document.getElementById('songInfoCard');
+      const songTitle = document.getElementById('songTitle');
+      const songArtist = document.getElementById('songArtist');
+      const songCover = document.getElementById('songCover');
+      const playState = document.getElementById('playState');
+      const playBtn = document.getElementById('playBtn');
+      const playIcon = document.getElementById('playIcon');
+      const prevBtn = document.getElementById('prevBtn');
+      const nextBtn = document.getElementById('nextBtn');
+      const favoriteBtn = document.getElementById('favoriteBtn');
+      const volumeUpBtn = document.getElementById('volumeUpBtn');
+      const volumeDownBtn = document.getElementById('volumeDownBtn');
+      const refreshBtn = document.getElementById('refreshBtn');
+      const status = document.getElementById('status');
+      
+      let isPlaying = false;
+      
+      // 显示状态消息并淡出
+      function showStatus(message, autoClear = true) {
+        status.textContent = message;
+        status.classList.remove('fade');
+        
+        if (autoClear) {
+          setTimeout(() => {
+            status.classList.add('fade');
+          }, 2000);
+        }
+      }
+      
+      // 更新播放/暂停图标
+      function updatePlayIcon() {
+        if (isPlaying) {
+          playIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
+        } else {
+          playIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+        }
+      }
+      
+      // 更新状态的函数
+      async function updateStatus() {
+        try {
+          showStatus('获取播放状态...', false);
+          
+          const response = await fetch('/api/status');
+          const data = await response.json();
+          
+          // 更新播放状态
+          isPlaying = data.isPlaying;
+          updatePlayIcon();
+          
+          // 更新UI
+          if (data.currentSong) {
+            songTitle.textContent = data.currentSong.name || '未知歌曲';
+            
+            if (data.currentSong.ar && data.currentSong.ar.length) {
+              songArtist.textContent = data.currentSong.ar.map(a => a.name).join(', ');
+            } else if (data.currentSong.artists && data.currentSong.artists.length) {
+              songArtist.textContent = data.currentSong.artists.map(a => a.name).join(', ');
+            } else {
+              songArtist.textContent = '未知艺术家';
+            }
+            
+            if (data.currentSong.picUrl) {
+              songCover.src = data.currentSong.picUrl;
+            }
+          } else {
+            songTitle.textContent = '未在播放';
+            songArtist.textContent = '--';
+            songCover.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238E8E93'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z'/%3E%3C/svg%3E";
+          }
+          
+          // 更新播放状态
+          playState.textContent = isPlaying ? '正在播放' : '已暂停';
+          songInfoCard.className = isPlaying ? 'card playing' : 'card paused';
+          
+          showStatus('已更新', true);
+        } catch (error) {
+          console.error('获取状态失败:', error);
+          showStatus('获取状态失败');
+        }
+      }
+      
+      // 发送命令的函数
+      async function sendCommand(endpoint) {
+        try {
+          showStatus('发送命令中...', false);
+          const response = await fetch('/api/' + endpoint, { method: 'POST' });
+          const data = await response.json();
+          
+          showStatus(data.message || '命令已发送');
+          
+          // 稍等后更新状态
+          setTimeout(updateStatus, 500);
+        } catch (error) {
+          console.error('发送命令失败:', error);
+          showStatus('发送命令失败');
+        }
+      }
+      
+      // 绑定按钮事件
+      playBtn.addEventListener('click', () => sendCommand('toggle-play'));
+      prevBtn.addEventListener('click', () => sendCommand('prev'));
+      nextBtn.addEventListener('click', () => sendCommand('next'));
+      favoriteBtn.addEventListener('click', () => sendCommand('toggle-favorite'));
+      volumeUpBtn.addEventListener('click', () => sendCommand('volume-up'));
+      volumeDownBtn.addEventListener('click', () => sendCommand('volume-down'));
+      refreshBtn.addEventListener('click', updateStatus);
+      
+      // 初始加载状态
+      updateStatus();
+      
+      // 每1秒更新一次状态
+      setInterval(updateStatus, 1000);
+      
+      // 添加触摸反馈
+      const buttons = document.querySelectorAll('.btn');
+      buttons.forEach(btn => {
+        btn.addEventListener('touchstart', function() {
+          this.style.transform = 'scale(0.97)';
+          this.style.opacity = '0.7';
+        });
+        
+        btn.addEventListener('touchend', function() {
+          this.style.transform = 'scale(1)';
+          this.style.opacity = '1';
+        });
+      });
+
+      // 检测深色模式变化
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        updateStatus();
+      });
+    });
+  </script>
+</body>
+</html> 
--- a/resources/icon.icns
+++ b/resources/icon.icns
--- a/resources/icon.png
+++ b/resources/icon.png
--- a/src/i18n/lang/en-US/common.ts
+++ b/src/i18n/lang/en-US/common.ts
@@ -26,6 +26,7 @@ export default {
  delete: 'Delete',
  refresh: 'Refresh',
  retry: 'Retry',
+  reset: 'Reset',
  validation: {
    required: 'This field is required',
    invalidInput: 'Invalid input',
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -83,7 +83,9 @@ export default {
    unlimitedDownload: 'Unlimited Download',
    unlimitedDownloadDesc: 'Enable unlimited download mode for music , default limit 300 songs',
    downloadPath: 'Download Directory',
-    downloadPathDesc: 'Choose download location for music files'
+    downloadPathDesc: 'Choose download location for music files',
+    remoteControl: 'Remote Control',
+    remoteControlDesc: 'Set remote control function'
  },
  network: {
    apiPort: 'Music API Port',
@@ -230,5 +232,15 @@ export default {
      disableAll: 'All shortcuts disabled, please save to apply',
      enableAll: 'All shortcuts enabled, please save to apply'
    }
+  },
+  remoteControl: {
+    title: 'Remote Control',
+    enable: 'Enable Remote Control',
+    port: 'Port',
+    allowedIps: 'Allowed IPs',
+    addIp: 'Add IP',
+    emptyListHint: 'Empty list means allow all IPs',
+    saveSuccess: 'Remote control settings saved',
+    accessInfo: 'Remote control access address:',
  }
 };
--- a/src/i18n/lang/zh-CN/common.ts
+++ b/src/i18n/lang/zh-CN/common.ts
@@ -26,6 +26,7 @@ export default {
  delete: '删除',
  refresh: '刷新',
  retry: '重试',
+  reset: '重置',
  validation: {
    required: '此项是必填的',
    invalidInput: '输入无效',
--- a/src/i18n/lang/zh-CN/settings.json
+++ b/src/i18n/lang/zh-CN/settings.json
@@ -1,5 +0,0 @@
-"playback": {
-  "musicSources": "音源设置",
-  "musicSourcesDesc": "选择音乐解析使用的音源平台",
-  "musicSourcesWarning": "至少需要选择一个音源平台"
-} 
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -83,7 +83,9 @@ export default {
    unlimitedDownload: '无限制下载',
    unlimitedDownloadDesc: '开启后将无限制下载音乐（可能出现下载失败的情况）, 默认限制 300 首',
    downloadPath: '下载目录',
-    downloadPathDesc: '选择音乐文件的下载位置'
+    downloadPathDesc: '选择音乐文件的下载位置',
+    remoteControl: '远程控制',
+    remoteControlDesc: '设置远程控制功能'
  },
  network: {
    apiPort: '音乐API端口',
@@ -230,5 +232,15 @@ export default {
      disableAll: '已禁用所有快捷键，请记得保存',
      enableAll: '已启用所有快捷键，请记得保存'
    }
+  },
+  remoteControl: {
+    title: '远程控制',
+    enable: '启用远程控制',
+    port: '服务端口',
+    allowedIps: '允许的IP地址',
+    addIp: '添加IP',
+    emptyListHint: '空列表表示允许所有IP访问',
+    saveSuccess: '远程控制设置已保存',
+    accessInfo: '远程控制访问地址:',
  }
 };
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -8,6 +8,7 @@ import { loadLyricWindow } from './lyric';
 import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
 import { initializeFonts } from './modules/fonts';
+import { initializeRemoteControl } from './modules/remoteControl';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
 import { initializeStats, setupStatsHandlers } from './modules/statsService';
 import { initializeTray, updateCurrentSong, updatePlayState, updateTrayMenu } from './modules/tray';
@@ -66,6 +67,9 @@ function initialize() {
  // 初始化快捷键
  initializeShortcuts(mainWindow);

+  // 初始化远程控制服务
+  initializeRemoteControl(mainWindow);
+
  // 初始化更新处理程序
  setupUpdateHandlers(mainWindow);
 }
--- a/src/main/modules/remoteControl.ts
+++ b/src/main/modules/remoteControl.ts
@@ -0,0 +1,229 @@
+import { ipcMain } from 'electron';
+import express from 'express';
+import cors from 'cors';
+import os from 'os';
+import { getStore } from './config';
+import path from 'path';
+import fs from 'fs';
+
+// 定义远程控制相关接口
+export interface RemoteControlConfig {
+  enabled: boolean;
+  port: number;
+  allowedIps: string[];
+}
+
+// 默认配置
+export const defaultRemoteControlConfig: RemoteControlConfig = {
+  enabled: false,
+  port: 31888,
+  allowedIps: []
+};
+
+let app: express.Application | null = null;
+let server: any = null;
+let mainWindowRef: Electron.BrowserWindow | null = null;
+let currentSong: any = null;
+let isPlaying: boolean = false;
+
+// 获取本地IP地址
+function getLocalIpAddresses(): string[] {
+  const interfaces = os.networkInterfaces();
+  const addresses: string[] = [];
+
+  for (const key in interfaces) {
+    const iface = interfaces[key];
+    if (iface) {
+      for (const alias of iface) {
+        if (alias.family === 'IPv4' && !alias.internal) {
+          addresses.push(alias.address);
+        }
+      }
+    }
+  }
+
+  return addresses;
+}
+
+// 初始化远程控制服务
+export function initializeRemoteControl(mainWindow: Electron.BrowserWindow) {
+  mainWindowRef = mainWindow;
+  const store = getStore() as any;
+  let config = store.get('remoteControl') as RemoteControlConfig;
+
+  // 如果配置不存在，使用默认配置
+  if (!config) {
+    config = defaultRemoteControlConfig;
+    store.set('remoteControl', config);
+  }
+
+  // 监听当前歌曲变化
+  ipcMain.on('update-current-song', (_, song: any) => {
+    currentSong = song;
+  });
+
+  // 监听播放状态变化
+  ipcMain.on('update-play-state', (_, playing: boolean) => {
+    isPlaying = playing;
+  });
+
+  // 监听远程控制配置变化
+  ipcMain.on('update-remote-control-config', (_, newConfig: RemoteControlConfig) => {
+    if (server) {
+      stopServer();
+    }
+    
+    store.set('remoteControl', newConfig);
+    
+    if (newConfig.enabled) {
+      startServer(newConfig);
+    }
+  });
+
+  // 获取远程控制配置
+  ipcMain.handle('get-remote-control-config', () => {
+    const config = store.get('remoteControl') as RemoteControlConfig;
+    return config || defaultRemoteControlConfig;
+  });
+
+  // 获取本地IP地址
+  ipcMain.handle('get-local-ip-addresses', () => {
+    return getLocalIpAddresses();
+  });
+
+  // 如果启用了远程控制，启动服务器
+  if (config.enabled) {
+    startServer(config);
+  }
+}
+
+// 启动远程控制服务器
+function startServer(config: RemoteControlConfig) {
+  if (!mainWindowRef) {
+    console.error('主窗口未初始化，无法启动远程控制服务');
+    return;
+  }
+
+  app = express();
+  
+  // 跨域配置
+  app.use(cors());
+  app.use(express.json());
+  
+  // IP 过滤中间件
+  app.use((req, res, next) => {
+    const clientIp = req.ip || req.socket.remoteAddress || '';
+    const cleanIp = clientIp.replace(/^::ffff:/, ''); // 移除IPv6前缀
+    console.log('config',config)
+    if (config.allowedIps.length === 0 || config.allowedIps.includes(cleanIp)) {
+      next();
+    } else {
+      res.status(403).json({ error: '未授权的IP地址' });
+    }
+  });
+
+  // 路由配置
+  setupRoutes(app);
+
+  // 启动服务器
+  try {
+    server = app.listen(config.port, () => {
+      console.log(`远程控制服务已启动，监听端口: ${config.port}`);
+    });
+  } catch (error) {
+    console.error('启动远程控制服务失败:', error);
+  }
+}
+
+// 停止远程控制服务器
+function stopServer() {
+  if (server) {
+    server.close();
+    server = null;
+    app = null;
+    console.log('远程控制服务已停止');
+  }
+}
+
+// 设置路由
+function setupRoutes(app: express.Application) {
+  // 获取当前播放状态
+  app.get('/api/status', (_, res) => {
+    res.json({
+      isPlaying,
+      currentSong
+    });
+  });
+
+  // 播放/暂停
+  app.post('/api/toggle-play', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'togglePlay');
+    res.json({ success: true, message: '已发送播放/暂停指令' });
+  });
+
+  // 上一首
+  app.post('/api/prev', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'prevPlay');
+    res.json({ success: true, message: '已发送上一首指令' });
+  });
+
+  // 下一首
+  app.post('/api/next', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'nextPlay');
+    res.json({ success: true, message: '已发送下一首指令' });
+  });
+
+  // 音量加
+  app.post('/api/volume-up', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'volumeUp');
+    res.json({ success: true, message: '已发送音量加指令' });
+  });
+
+  // 音量减
+  app.post('/api/volume-down', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'volumeDown');
+    res.json({ success: true, message: '已发送音量减指令' });
+  });
+
+  // 收藏/取消收藏
+  app.post('/api/toggle-favorite', (_, res) => {
+    if (!mainWindowRef) {
+      return res.status(500).json({ error: '主窗口未初始化' });
+    }
+    mainWindowRef.webContents.send('global-shortcut', 'toggleFavorite');
+    res.json({ success: true, message: '已发送收藏/取消收藏指令' });
+  });
+
+  // 提供远程控制界面HTML
+  app.get('/', (_, res) => {
+    try {
+      const resourcesPath = process.resourcesPath || '';
+      const finalPath = path.join(resourcesPath, 'html', 'remote-control.html');
+      
+      if (fs.existsSync(finalPath)) {
+        res.sendFile(finalPath);
+      } else {
+        res.status(404).send('远程控制界面文件未找到');
+        console.error('远程控制界面文件不存在:', finalPath);
+      }
+    } catch (error) {
+      console.error('加载远程控制界面失败:', error);
+      res.status(500).send('加载远程控制界面失败');
+    }
+  });
+} 
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -26,7 +26,6 @@ import { isElectron, isLyricWindow } from '@/utils';
 import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
 import { useAppShortcuts } from './utils/appShortcuts';
-import { initShortcut } from './utils/shortcut';

 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
@@ -120,8 +119,6 @@ onMounted(async () => {
      window.api.sendSong(cloneDeep(playerStore.playMusic));
    }
  }
-  // 初始化快捷键
-  initShortcut();
 });
 </script>

--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -19,8 +19,10 @@ declare module 'vue' {
    NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
    NCollapse: typeof import('naive-ui')['NCollapse']
    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
    NDrawer: typeof import('naive-ui')['NDrawer']
    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
    NDropdown: typeof import('naive-ui')['NDropdown']
@@ -50,6 +52,7 @@ declare module 'vue' {
    NTabPane: typeof import('naive-ui')['NTabPane']
    NTabs: typeof import('naive-ui')['NTabs']
    NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
    NTooltip: typeof import('naive-ui')['NTooltip']
    NVirtualList: typeof import('naive-ui')['NVirtualList']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/src/renderer/components/home/TopBanner.vue
+++ b/src/renderer/components/home/TopBanner.vue
@@ -100,7 +100,7 @@
            @click="handleArtistClick(item.id)"
          >
            <div
-              :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
+              :style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
              class="recommend-singer-item-bg"
            ></div>
            <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
@@ -159,7 +159,7 @@ import { IDayRecommend } from '@/type/day_recommend';
 import { Playlist } from '@/type/list';
 import type { IListDetail } from '@/type/listDetail';
 import { SongResult } from '@/type/music';
-import type { IHotSinger } from '@/type/singer';
+import type { Artist, IHotSinger } from '@/type/singer';
 import {
  getImgUrl,
  isMobile,
@@ -167,6 +167,7 @@ import {
  setAnimationDelay,
  setBackgroundImg
 } from '@/utils';
+import { getArtistDetail } from '@/api/artist';

 const userStore = useUserStore();
 const playerStore = usePlayerStore();
@@ -246,21 +247,49 @@ const getCarouselItemStyleForPlaylist = (playlistCount: number) => {
 };

 onMounted(async () => {
-  await loadData();
+  loadNonUserData();
 });

-const loadData = async () => {
+const JayChouId = 6452;
+const loadArtistData = async () => {
  try {
-    // 获取每日推荐
-    try {
+    const { data: artistData }: { data: { data: { artist: Artist } } } = await getArtistDetail(JayChouId);
+    console.log('artistData', artistData);
+    if (hotSingerData.value) {
+      // 将周杰伦数据放在第一位
+      hotSingerData.value.artists = [artistData.data.artist, ...hotSingerData.value.artists];
+    }
+  } catch (error) {
+    console.error('获取周杰伦数据失败:', error);
+  }
+}
+
+// 加载不需要登录的数据
+const loadNonUserData = async () => {
+  try {
+
+        // 获取每日推荐
+        try {
      const {
        data: { data: dayRecommend }
      } = await getDayRecommend();
      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
    } catch (error) {
-      console.error('error', error);
+      console.error('获取每日推荐失败:', error);
    }
+    // 获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+    hotSingerData.value = singerData;

+    await loadArtistData();
+  } catch (error) {
+    console.error('加载热门歌手数据失败:', error);
+  }
+};
+
+// 加载需要登录的数据
+const loadUserData = async () => {
+  try {
    if (userStore.user) {
      const { data: playlistData } = await getUserPlaylist(userStore.user?.userId);
      // 确保最多只显示4个歌单，并按播放次数排序
@@ -268,12 +297,8 @@ const loadData = async () => {
        .sort((a, b) => b.playCount - a.playCount)
        .slice(0, 4);
    }
-
-    // 获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-    hotSingerData.value = singerData;
  } catch (error) {
-    console.error('error', error);
+    console.error('加载用户数据失败:', error);
  }
 };

@@ -394,7 +419,7 @@ const loadFullPlaylist = async (trackIds: { id: number }[], initialSongs: SongRe
 // 监听登录状态
 watchEffect(() => {
  if (userStore.user) {
-    loadData();
+    loadUserData();
  }
 });

--- a/src/renderer/components/settings/ClearCacheSettings.vue
+++ b/src/renderer/components/settings/ClearCacheSettings.vue
@@ -0,0 +1,116 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.system.cache')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    @positive-click="handleConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-space vertical>
+      <p>{{ t('settings.system.cacheClearTitle') }}</p>
+      <n-checkbox-group v-model:value="selectedTypes">
+        <n-space vertical>
+          <n-checkbox
+            v-for="option in clearCacheOptions"
+            :key="option.key"
+            :value="option.key"
+            :label="option.label"
+          >
+            <template #default>
+              <div>
+                <div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
+                <div class="text-gray-400 text-sm">
+                  {{ t(`settings.system.cacheTypes.${option.key}.description`) }}
+                </div>
+              </div>
+            </template>
+          </n-checkbox>
+        </n-space>
+      </n-checkbox-group>
+    </n-space>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:show', 'confirm']);
+
+const { t } = useI18n();
+const visible = ref(props.show);
+const selectedTypes = ref<string[]>([]);
+
+const clearCacheOptions = ref([
+  {
+    label: t('settings.system.cacheTypes.history.label'),
+    key: 'history',
+    description: t('settings.system.cacheTypes.history.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.favorite.label'),
+    key: 'favorite',
+    description: t('settings.system.cacheTypes.favorite.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.user.label'),
+    key: 'user',
+    description: t('settings.system.cacheTypes.user.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.settings.label'),
+    key: 'settings',
+    description: t('settings.system.cacheTypes.settings.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.downloads.label'),
+    key: 'downloads',
+    description: t('settings.system.cacheTypes.downloads.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.resources.label'),
+    key: 'resources',
+    description: t('settings.system.cacheTypes.resources.description')
+  },
+  {
+    label: t('settings.system.cacheTypes.lyrics.label'),
+    key: 'lyrics',
+    description: t('settings.system.cacheTypes.lyrics.description')
+  }
+]);
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+const handleConfirm = () => {
+  emit('confirm', selectedTypes.value);
+  selectedTypes.value = [];
+};
+
+const handleCancel = () => {
+  selectedTypes.value = [];
+  visible.value = false;
+};
+</script> 
--- a/src/renderer/components/settings/MusicSourceSettings.vue
+++ b/src/renderer/components/settings/MusicSourceSettings.vue
@@ -0,0 +1,120 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.playback.musicSources')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    @positive-click="handleConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-space vertical>
+      <p>{{ t('settings.playback.musicSourcesDesc') }}</p>
+      <n-checkbox-group v-model:value="selectedSources">
+        <n-grid :cols="2" :x-gap="12" :y-gap="8">
+          <n-grid-item v-for="source in musicSourceOptions" :key="source.value">
+            <n-checkbox :value="source.value">
+              {{ source.label }}
+              <template v-if="source.value === 'gdmusic'">
+                <n-tooltip>
+                  <template #trigger>
+                    <n-icon size="16" class="ml-1 text-blue-500 cursor-help">
+                      <i class="ri-information-line"></i>
+                    </n-icon>
+                  </template>
+                  {{ t('settings.playback.gdmusicInfo') }}
+                </n-tooltip>
+              </template>
+            </n-checkbox>
+          </n-grid-item>
+        </n-grid>
+      </n-checkbox-group>
+      <div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
+        {{ t('settings.playback.musicSourcesWarning') }}
+      </div>
+
+      <!-- GD音乐台设置 -->
+      <div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
+        <h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
+          GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
+        </p>
+      </div>
+    </n-space>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { type Platform } from '@/types/music';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  sources: {
+    type: Array as () => Platform[],
+    default: () => ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']
+  }
+});
+
+const emit = defineEmits(['update:show', 'update:sources']);
+
+const { t } = useI18n();
+const visible = ref(props.show);
+const selectedSources = ref<Platform[]>(props.sources);
+
+const musicSourceOptions = ref([
+  { label: 'MiGu音乐', value: 'migu' },
+  { label: '酷狗音乐', value: 'kugou' },
+  { label: 'pyncmd', value: 'pyncmd' },
+  { label: '酷我音乐', value: 'kuwo' },
+  { label: 'Bilibili音乐', value: 'bilibili' },
+  { label: 'YouTube', value: 'youtube' },
+  { label: 'GD音乐台', value: 'gdmusic' }
+]);
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+// 同步外部sources属性变化
+watch(
+  () => props.sources,
+  (newVal) => {
+    selectedSources.value = [...newVal];
+  },
+  { deep: true }
+);
+
+const handleConfirm = () => {
+  // 确保至少选择一个音源
+  const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];
+  const valuesToEmit = selectedSources.value.length > 0 
+    ? [...new Set(selectedSources.value)] 
+    : defaultPlatforms;
+  
+  emit('update:sources', valuesToEmit);
+  visible.value = false;
+};
+
+const handleCancel = () => {
+  // 取消时还原为props传入的初始值
+  selectedSources.value = [...props.sources];
+  visible.value = false;
+};
+</script> 
--- a/src/renderer/components/settings/ProxySettings.vue
+++ b/src/renderer/components/settings/ProxySettings.vue
@@ -0,0 +1,152 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="dialog"
+    :title="t('settings.network.proxy')"
+    :positive-text="t('common.confirm')"
+    :negative-text="t('common.cancel')"
+    :show-icon="false"
+    @positive-click="handleProxyConfirm"
+    @negative-click="handleCancel"
+  >
+    <n-form
+      ref="formRef"
+      :model="proxyForm"
+      :rules="proxyRules"
+      label-placement="left"
+      label-width="80"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item :label="t('settings.network.proxy')" path="protocol">
+        <n-select
+          v-model:value="proxyForm.protocol"
+          :options="[
+            { label: 'HTTP', value: 'http' },
+            { label: 'HTTPS', value: 'https' },
+            { label: 'SOCKS5', value: 'socks5' }
+          ]"
+        />
+      </n-form-item>
+      <n-form-item :label="t('settings.network.proxyHost')" path="host">
+        <n-input
+          v-model:value="proxyForm.host"
+          :placeholder="t('settings.network.proxyHostPlaceholder')"
+        />
+      </n-form-item>
+      <n-form-item :label="t('settings.network.proxyPort')" path="port">
+        <n-input-number
+          v-model:value="proxyForm.port"
+          :placeholder="t('settings.network.proxyPortPlaceholder')"
+          :min="1"
+          :max="65535"
+        />
+      </n-form-item>
+    </n-form>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+import type { FormRules } from 'naive-ui';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  config: {
+    type: Object,
+    default: () => ({
+      protocol: 'http',
+      host: '127.0.0.1',
+      port: 7890
+    })
+  }
+});
+
+const emit = defineEmits(['update:show', 'confirm']);
+
+const { t } = useI18n();
+const message = useMessage();
+const formRef = ref();
+
+const visible = ref(props.show);
+const proxyForm = ref({
+  protocol: props.config.protocol || 'http',
+  host: props.config.host || '127.0.0.1',
+  port: props.config.port || 7890
+});
+
+const proxyRules: FormRules = {
+  protocol: {
+    required: true,
+    message: t('settings.validation.selectProxyProtocol'),
+    trigger: ['blur', 'change']
+  },
+  host: {
+    required: true,
+    message: t('settings.validation.proxyHost'),
+    trigger: ['blur', 'change'],
+    validator: (_rule, value) => {
+      if (!value) return false;
+      // 简单的IP或域名验证
+      const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+      return ipRegex.test(value);
+    }
+  },
+  port: {
+    required: true,
+    message: t('settings.validation.portNumber'),
+    trigger: ['blur', 'change'],
+    validator: (_rule, value) => {
+      return value >= 1 && value <= 65535;
+    }
+  }
+};
+
+// 同步外部show属性变化
+watch(
+  () => props.show,
+  (newVal) => {
+    visible.value = newVal;
+  }
+);
+
+// 同步内部visible变化
+watch(
+  () => visible.value,
+  (newVal) => {
+    emit('update:show', newVal);
+  }
+);
+
+// 同步外部config变化
+watch(
+  () => props.config,
+  (newVal) => {
+    proxyForm.value = {
+      protocol: newVal.protocol || 'http',
+      host: newVal.host || '127.0.0.1',
+      port: newVal.port || 7890
+    };
+  },
+  { deep: true }
+);
+
+const handleProxyConfirm = async () => {
+  try {
+    await formRef.value?.validate();
+    emit('confirm', { ...proxyForm.value });
+    visible.value = false;
+    message.success(t('settings.network.messages.proxySuccess'));
+  } catch (err) {
+    message.error(t('settings.network.messages.proxyError'));
+  }
+};
+
+const handleCancel = () => {
+  visible.value = false;
+};
+</script> 
--- a/src/renderer/components/settings/ServerSetting.vue
+++ b/src/renderer/components/settings/ServerSetting.vue
@@ -0,0 +1,226 @@
+<template>
+  <n-modal
+    v-model:show="visible"
+    preset="card"
+    :title="t('settings.remoteControl.title')"
+    class="remote-control-modal"
+    style="max-width: 650px; width: 100%"
+  >
+    <n-scrollbar>
+      <div class="remote-control-setting">
+        <n-form label-placement="left" label-width="auto" :style="{ maxWidth: '640px' }">
+          <n-form-item :label="t('settings.remoteControl.enable')">
+            <n-switch v-model:value="remoteControlConfig.enabled" />
+          </n-form-item>
+
+          <n-form-item :label="t('settings.remoteControl.port')">
+            <n-input-number
+              v-model:value="remoteControlConfig.port"
+              :min="1024"
+              :max="65535"
+              :disabled="!remoteControlConfig.enabled"
+            />
+          </n-form-item>
+
+          <n-form-item :label="t('settings.remoteControl.allowedIps')">
+            <div class="allowed-ips-container">
+              <div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
+                <n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
+                <n-button 
+                  quaternary 
+                  circle 
+                  type="error" 
+                  :disabled="!remoteControlConfig.enabled" 
+                  @click="removeIp(index)"
+                >
+                  <template #icon>
+                    <n-icon><i class="ri-delete-bin-line"></i></n-icon>
+                  </template>
+                </n-button>
+              </div>
+              <n-button 
+                secondary 
+                size="small" 
+                :disabled="!remoteControlConfig.enabled" 
+                @click="addIp"
+              >
+                <template #icon>
+                  <n-icon><i class="ri-add-line"></i></n-icon>
+                </template>
+                {{ t('settings.remoteControl.addIp') }}
+              </n-button>
+              <n-text depth="3" size="small" class="allow-all-hint">
+                {{ t('settings.remoteControl.emptyListHint') }}
+              </n-text>
+            </div>
+          </n-form-item>
+
+          <n-form-item>
+            <n-space>
+              <n-button 
+                type="primary" 
+                :disabled="!remoteControlConfig.enabled" 
+                @click="saveConfig"
+              >
+                {{ t('common.save') }}
+              </n-button>
+              <n-button @click="resetConfig">
+                {{ t('common.reset') }}
+              </n-button>
+            </n-space>
+          </n-form-item>
+
+          <n-collapse-transition :show="remoteControlConfig.enabled">
+            <div class="remote-info">
+              <n-alert type="info">
+                <template #icon>
+                  <n-icon><i class="ri-information-line"></i></n-icon>
+                </template>
+                <p>{{ t('settings.remoteControl.accessInfo') }}</p>
+                <div class="access-url">
+                  <n-tag type="success">
+                    http://localhost:{{ remoteControlConfig.port }}/
+                  </n-tag>
+                </div>
+                <div v-if="localIpAddresses.length" class="local-ips">
+                  <div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
+                    <n-tag type="info">
+                      http://{{ ip }}:{{ remoteControlConfig.port }}/
+                    </n-tag>
+                  </div>
+                </div>
+              </n-alert>
+            </div>
+          </n-collapse-transition>
+        </n-form>
+      </div>
+    </n-scrollbar>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessage } from 'naive-ui';
+import { cloneDeep } from 'lodash';
+
+const { t } = useI18n();
+const message = useMessage();
+
+// 控制弹窗显示的属性
+const visible = defineModel('visible', { default: false });
+
+// 默认配置
+const defaultConfig:{
+  enabled: boolean,
+  port: number,
+  allowedIps: string[]
+} = {
+  enabled: false,
+  port: 31888,
+  allowedIps: []
+};
+
+// 远程控制配置
+const remoteControlConfig = ref({...defaultConfig});
+
+// 本地IP地址列表
+const localIpAddresses = ref<string[]>([]);
+
+// 获取本地IP地址
+const getLocalIpAddresses = () => {
+  if (window.electron) {
+    window.electron.ipcRenderer.invoke('get-local-ip-addresses').then((ips: string[]) => {
+      localIpAddresses.value = ips;
+    });
+  }
+};
+
+// 添加IP地址
+const addIp = () => {
+  remoteControlConfig.value.allowedIps.push('');
+};
+
+// 删除IP地址
+const removeIp = (index: number) => {
+  remoteControlConfig.value.allowedIps.splice(index, 1);
+};
+
+// 保存配置
+const saveConfig = () => {
+  // 过滤空IP
+  remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
+  
+  if (window.electron) {
+    window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
+    message.success(t('settings.remoteControl.saveSuccess'));
+  }
+};
+
+// 重置配置
+const resetConfig = () => {
+  if (window.electron) {
+    window.electron.ipcRenderer.invoke('get-remote-control-config').then((config) => {
+      if (config) {
+        remoteControlConfig.value = config;
+      } else {
+        remoteControlConfig.value = { ...defaultConfig };
+      }
+    });
+  }
+};
+
+// 组件挂载时，获取当前配置
+onMounted(async () => {
+  if (window.electron) {
+    try {
+      const config = await window.electron.ipcRenderer.invoke('get-remote-control-config');
+      if (config) {
+        remoteControlConfig.value = config;
+      }
+      // 获取本地IP地址
+      getLocalIpAddresses();
+    } catch (error) {
+      console.error('获取远程控制配置失败:', error);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.remote-control-setting {
+  padding: 0 20px;
+}
+
+.allowed-ips-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+
+  .ip-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .allow-all-hint {
+    margin-top: 5px;
+  }
+}
+
+.remote-info {
+  margin-top: 16px;
+  
+  .access-url {
+    margin-top: 10px;
+  }
+  
+  .local-ips {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+}
+</style> 
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -41,6 +41,9 @@ class AudioService {

  private seekDebounceTimer: NodeJS.Timeout | null = null;

+  // 添加操作锁防止并发操作
+  private operationLock = false;
+
  constructor() {
    if ('mediaSession' in navigator) {
      this.initMediaSession();
@@ -358,6 +361,14 @@ class AudioService {

  // 播放控制相关
  play(url?: string, track?: SongResult, isPlay: boolean = true): Promise<Howl> {
+    // 如果操作锁已激活，说明有操作正在进行中，直接返回
+    if (this.operationLock) {
+      console.log('audioService: 操作锁激活，忽略当前播放请求');
+      return Promise.reject(new Error('操作锁激活，请等待当前操作完成'));
+    }
+
+    this.operationLock = true;
+
    // 如果没有提供新的 URL 和 track，且当前有音频实例，则继续播放
    if (this.currentSound && !url && !track) {
      // 如果有进行中的seek操作，等待其完成
@@ -366,15 +377,17 @@ class AudioService {
        this.seekLock = false;
      }
      this.currentSound.play();
+      this.operationLock = false;
      return Promise.resolve(this.currentSound);
    }

    // 如果没有提供必要的参数，返回错误
    if (!url || !track) {
+      this.operationLock = false;
      return Promise.reject(new Error('Missing required parameters: url and track'));
    }

-    return new Promise((resolve, reject) => {
+    return new Promise<Howl>((resolve, reject) => {
      let retryCount = 0;
      const maxRetries = 1;

@@ -507,11 +520,15 @@ class AudioService {
          }
        } catch (error) {
          console.error('Error creating audio instance:', error);
+          this.operationLock = false;
          reject(error);
        }
      };

      tryPlay();
+    }).finally(() => {
+      // 无论成功或失败都解除操作锁
+      this.operationLock = false;
    });
  }

@@ -524,6 +541,13 @@ class AudioService {
  }

  stop() {
+    if (this.operationLock) {
+      console.log('audioService: 操作锁激活，忽略当前停止请求');
+      return;
+    }
+
+    this.operationLock = true;
+    
    if (this.currentSound) {
      try {
        // 确保任何进行中的seek操作被取消
@@ -538,11 +562,14 @@ class AudioService {
      }
      this.currentSound = null;
    }
+    
    this.currentTrack = null;
    if ('mediaSession' in navigator) {
      navigator.mediaSession.playbackState = 'none';
    }
    this.disposeEQ();
+    
+    this.operationLock = false;
  }

  setVolume(volume: number) {
@@ -553,6 +580,13 @@ class AudioService {
  }

  seek(time: number) {
+    if (this.operationLock) {
+      console.log('audioService: 操作锁激活，忽略当前seek请求');
+      return;
+    }
+
+    this.operationLock = true;
+    
    if (this.currentSound) {
      try {
        // 直接执行seek操作，避免任何过滤或判断
@@ -564,9 +598,18 @@ class AudioService {
        console.error('Seek操作失败:', error);
      }
    }
+    
+    this.operationLock = false;
  }

  pause() {
+    if (this.operationLock) {
+      console.log('audioService: 操作锁激活，忽略当前暂停请求');
+      return;
+    }
+
+    this.operationLock = true;
+    
    if (this.currentSound) {
      try {
        // 如果有进行中的seek操作，等待其完成
@@ -579,6 +622,8 @@ class AudioService {
        console.error('Error pausing audio:', error);
      }
    }
+    
+    this.operationLock = false;
  }

  clearAllListeners() {
--- a/src/renderer/store/modules/settings.ts
+++ b/src/renderer/store/modules/settings.ts
@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash';
+import { cloneDeep, merge } from 'lodash';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';

@@ -7,17 +7,6 @@ import { isElectron } from '@/utils';
 import { applyTheme, getCurrentTheme, ThemeType } from '@/utils/theme';

 export const useSettingsStore = defineStore('settings', () => {
-  // 初始化时先从存储中读取设置
-  const getInitialSettings = () => {
-    if (isElectron) {
-      const savedSettings = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
-      return savedSettings || setDataDefault;
-    }
-    const savedSettings = localStorage.getItem('appSettings');
-    return savedSettings ? JSON.parse(savedSettings) : setDataDefault;
-  };
-
-  const setData = ref(getInitialSettings());
  const theme = ref<ThemeType>(getCurrentTheme());
  const isMobile = ref(false);
  const isMiniMode = ref(false);
@@ -28,7 +17,11 @@ export const useSettingsStore = defineStore('settings', () => {
    { label: '系统默认', value: 'system-ui' }
  ]);
  const showDownloadDrawer = ref(false);
+  
+  // 先声明 setData ref 但不初始化
+  const setData = ref<any>({});

+  // 先定义 setSetData 函数
  const setSetData = (data: any) => {
    // 合并现有设置和新设置
    const mergedData = {
@@ -44,6 +37,24 @@ export const useSettingsStore = defineStore('settings', () => {
    setData.value = cloneDeep(mergedData);
  };

+  // 初始化时先从存储中读取设置
+  const getInitialSettings = () => {
+    // 从存储中获取保存的设置
+    const savedSettings = isElectron
+      ? window.electron.ipcRenderer.sendSync('get-store-value', 'set')
+      : JSON.parse(localStorage.getItem('appSettings') || '{}');
+
+    // 合并默认设置和保存的设置
+    const mergedSettings = merge({}, setDataDefault, savedSettings);
+    
+    // 更新设置并返回
+    setSetData(mergedSettings);
+    return mergedSettings;
+  };
+
+  // 初始化 setData
+  setData.value = getInitialSettings();
+
  const toggleTheme = () => {
    theme.value = theme.value === 'dark' ? 'light' : 'dark';
    applyTheme(theme.value);
--- a/src/renderer/type/singer.ts
+++ b/src/renderer/type/singer.ts
@@ -4,7 +4,7 @@ export interface IHotSinger {
  artists: Artist[];
 }

-interface Artist {
+export interface Artist {
  name: string;
  id: number;
  picId: number;
@@ -29,4 +29,6 @@ interface Artist {
  identifyTag?: any;
  alg?: any;
  fansCount?: any;
+  cover?: string;
+  avatar?: string;
 }
--- a/src/renderer/types/music.ts
+++ b/src/renderer/types/music.ts
@@ -0,0 +1,5 @@
+// 音乐平台类型
+export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
+
+// 默认平台列表
+export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube']; 
--- a/src/renderer/utils/appShortcuts.ts
+++ b/src/renderer/utils/appShortcuts.ts
@@ -7,6 +7,10 @@ import { usePlayerStore, useSettingsStore } from '@/store';
 import { isElectron } from '.';
 import { showShortcutToast } from './shortcutToast';

+// 添加一个简单的防抖机制
+let actionTimeout: NodeJS.Timeout | null = null;
+const ACTION_DELAY = 300; // 毫秒
+
 interface ShortcutConfig {
  key: string;
  enabled: boolean;
@@ -27,6 +31,17 @@ let appShortcuts: ShortcutsConfig = {};
 * @param action 快捷键动作
 */
 export async function handleShortcutAction(action: string) {
+  // 如果存在未完成的动作，则忽略当前请求
+  if (actionTimeout) {
+    console.log('忽略快速连续的动作请求:', action);
+    return;
+  }
+
+  // 设置防抖锁
+  actionTimeout = setTimeout(() => {
+    actionTimeout = null;
+  }, ACTION_DELAY);
+
  const playerStore = usePlayerStore();
  const settingsStore = useSettingsStore();

@@ -38,61 +53,71 @@ export async function handleShortcutAction(action: string) {
    showShortcutToast(message, iconName);
  };

-  switch (action) {
-    case 'togglePlay':
-      if (playerStore.play) {
-        await audioService.pause();
-        showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
-      } else {
-        await audioService.play();
-        showToast(t('player.playBar.play'), 'ri-play-circle-line');
-      }
-      break;
-    case 'prevPlay':
-      playerStore.prevPlay();
-      showToast(t('player.playBar.prev'), 'ri-skip-back-line');
-      break;
-    case 'nextPlay':
-      playerStore.nextPlay();
-      showToast(t('player.playBar.next'), 'ri-skip-forward-line');
-      break;
-    case 'volumeUp':
-      if (currentSound && currentSound?.volume() < 1) {
-        currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+  try {
+    switch (action) {
+      case 'togglePlay':
+        if (playerStore.play) {
+          await audioService.pause();
+          showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
+        } else {
+          await audioService.play();
+          showToast(t('player.playBar.play'), 'ri-play-circle-line');
+        }
+        break;
+      case 'prevPlay':
+        await playerStore.prevPlay();
+        showToast(t('player.playBar.prev'), 'ri-skip-back-line');
+        break;
+      case 'nextPlay':
+        await playerStore.nextPlay();
+        showToast(t('player.playBar.next'), 'ri-skip-forward-line');
+        break;
+      case 'volumeUp':
+        if (currentSound && currentSound?.volume() < 1) {
+          currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+          showToast(
+            `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+            'ri-volume-up-line'
+          );
+        }
+        break;
+      case 'volumeDown':
+        if (currentSound && currentSound?.volume() > 0) {
+          currentSound?.volume((currentSound?.volume() || 0) - 0.1);
+          showToast(
+            `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+            'ri-volume-down-line'
+          );
+        }
+        break;
+      case 'toggleFavorite': {
+        const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
+        const numericId = Number(playerStore.playMusic.id);
+        if (isFavorite) {
+          playerStore.removeFromFavorite(numericId);
+        } else {
+          playerStore.addToFavorite(numericId);
+        }
        showToast(
-          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
-          'ri-volume-up-line'
+          isFavorite
+            ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
+            : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
+          isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
        );
+        break;
      }
-      break;
-    case 'volumeDown':
-      if (currentSound && currentSound?.volume() > 0) {
-        currentSound?.volume((currentSound?.volume() || 0) - 0.1);
-        showToast(
-          `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
-          'ri-volume-down-line'
-        );
-      }
-      break;
-    case 'toggleFavorite': {
-      const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
-      const numericId = Number(playerStore.playMusic.id);
-      if (isFavorite) {
-        playerStore.removeFromFavorite(numericId);
-      } else {
-        playerStore.addToFavorite(numericId);
-      }
-      showToast(
-        isFavorite
-          ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
-          : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
-        isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
-      );
-      break;
+      default:
+        console.log('未知的快捷键动作:', action);
+        break;
+    }
+  } catch (error) {
+    console.error(`执行快捷键动作 ${action} 时出错:`, error);
+  } finally {
+    // 确保在出错时也能清除超时
+    if (actionTimeout) {
+      clearTimeout(actionTimeout);
+      actionTimeout = null;
    }
-    default:
-      console.log('未知的快捷键动作:', action);
-      break;
  }
 }

--- a/src/renderer/utils/shortcut.ts
+++ b/src/renderer/utils/shortcut.ts
@@ -1,10 +0,0 @@
-import { isElectron } from '.';
-import { handleShortcutAction } from './appShortcuts';
-
-export function initShortcut() {
-  if (isElectron) {
-    window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
-      handleShortcutAction(action);
-    });
-  }
-}
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -33,6 +33,7 @@
              @play="handlePlay"
            />
            <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
+            <div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
          </div>
        </div>
      </n-tab-pane>
@@ -54,6 +55,7 @@
              }"
            />
            <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
+            <div v-else-if="albumPage.hasMore" ref="albumsLoadMoreRef" class="load-more-trigger"></div>
          </div>
        </div>
      </n-tab-pane>
@@ -70,7 +72,7 @@
 </template>

 <script setup lang="ts">
-import { useDateFormat, useThrottleFn } from '@vueuse/core';
+import { useDateFormat } from '@vueuse/core';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -114,6 +116,12 @@ const albumPage = ref({
  hasMore: true
 });

+// 无限滚动引用
+const songsLoadMoreRef = ref<HTMLElement | null>(null);
+const albumsLoadMoreRef = ref<HTMLElement | null>(null);
+let songsObserver: IntersectionObserver | null = null;
+let albumsObserver: IntersectionObserver | null = null;
+
 // 加载歌手信息
 const loadArtistInfo = async () => {
  if (!artistId.value) return;
@@ -138,12 +146,12 @@ const loadArtistInfo = async () => {
 const resetPagination = () => {
  songPage.value = {
    page: 1,
-    pageSize: 30,
+    pageSize: 50,
    hasMore: true
  };
  albumPage.value = {
    page: 1,
-    pageSize: 30,
+    pageSize: 50,
    hasMore: true
  };
  songs.value = [];
@@ -181,6 +189,8 @@ const loadSongs = async () => {
      songs.value = page === 1 ? newSongs : [...songs.value, ...newSongs];
      songPage.value.hasMore = newSongs.length === pageSize;
      songPage.value.page++;
+    } else {
+      songPage.value.hasMore = false;
    }
  } catch (error) {
    console.error('加载歌曲失败:', error);
@@ -207,6 +217,8 @@ const loadAlbums = async () => {
      albums.value = page === 1 ? newAlbums : [...albums.value, ...newAlbums];
      albumPage.value.hasMore = newAlbums.length === pageSize;
      albumPage.value.page++;
+    } else {
+      albumPage.value.hasMore = false;
    }
  } catch (error) {
    console.error('加载专辑失败:', error);
@@ -229,29 +241,64 @@ const handlePlay = () => {
  );
 };

-// 添加滚动处理函数
-const handleScroll = useThrottleFn(() => {
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-  const windowHeight = window.innerHeight;
-  const documentHeight = document.documentElement.scrollHeight;
+// 设置无限滚动观察器
+const setupIntersectionObservers = () => {
+  // 清除现有的观察器
+  if (songsObserver) songsObserver.disconnect();
+  if (albumsObserver) albumsObserver.disconnect();

-  if (documentHeight - (scrollTop + windowHeight) < 100) {
-    if (activeTab.value === 'songs') {
+  // 创建歌曲观察器
+  songsObserver = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !songLoading.value && songPage.value.hasMore) {
      loadSongs();
-    } else if (activeTab.value === 'albums') {
+    }
+  }, { threshold: 0.1 });
+
+  // 创建专辑观察器
+  albumsObserver = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && !albumLoading.value && albumPage.value.hasMore) {
      loadAlbums();
    }
-  }
-}, 200);
+  }, { threshold: 0.1 });
+
+  // 监听标签页更改，重新设置观察器
+  watch(activeTab, (newTab) => {
+    nextTick(() => {
+      if (newTab === 'songs' && songsLoadMoreRef.value && songPage.value.hasMore) {
+        songsObserver?.observe(songsLoadMoreRef.value);
+      } else if (newTab === 'albums' && albumsLoadMoreRef.value && albumPage.value.hasMore) {
+        albumsObserver?.observe(albumsLoadMoreRef.value);
+      }
+    });
+  });
+
+  // 监听引用元素的变化
+  watch(songsLoadMoreRef, (el) => {
+    if (el && activeTab.value === 'songs' && songPage.value.hasMore) {
+      songsObserver?.observe(el);
+    }
+  });
+
+  watch(albumsLoadMoreRef, (el) => {
+    if (el && activeTab.value === 'albums' && albumPage.value.hasMore) {
+      albumsObserver?.observe(el);
+    }
+  });
+};

-// 监听页面滚动
 onMounted(() => {
  loadArtistInfo();
-  window.addEventListener('scroll', handleScroll);
+  
+  // 添加nextTick以确保DOM已更新
+  nextTick(() => {
+    setupIntersectionObservers();
+  });
 });

 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll);
+  // 清理观察器
+  if (songsObserver) songsObserver.disconnect();
+  if (albumsObserver) albumsObserver.disconnect();
 });

 // 监听路由参数变化
@@ -260,6 +307,10 @@ watch(
  (newId) => {
    if (newId) {
      loadArtistInfo();
+      // 添加nextTick以确保DOM已更新
+      nextTick(() => {
+        setupIntersectionObservers();
+      });
    }
  }
 );
@@ -325,6 +376,10 @@ watch(
    @apply text-center py-4 text-gray-500 dark:text-gray-400;
  }

+  .load-more-trigger {
+    @apply h-4 w-full;
+  }
+
  .artist-description {
    .description-content {
      @apply text-sm leading-relaxed whitespace-pre-wrap;
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -150,7 +150,7 @@
              />
            </div>

-            <div class="set-item">
+            <div class="set-item" v-if="isElectron">
              <div>
                <div class="set-item-title">{{ t('settings.playback.musicSources') }}</div>
                <div class="set-item-content">
@@ -165,7 +165,7 @@
                    <div class="text-sm">
                      <span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
                      <span v-if="musicSources.length > 0" class="text-gray-400">
-                        {{ musicSources.map((source) => getSourceLabel(source)).join(', ') }}
+                        {{ musicSources.join(', ') }}
                      </span>
                      <span v-else class="text-red-500 text-xs">
                        {{ t('settings.playback.noMusicSources') }}
@@ -271,6 +271,16 @@
                }}</n-button>
              </div>
            </div>
+
+            <div class="set-item">
+              <div>
+                <div class="set-item-title">{{ t('settings.application.remoteControl') }}</div>
+                <div class="set-item-content">{{ t('settings.application.remoteControlDesc') }}</div>
+              </div>
+              <n-button size="small" @click="showRemoteControlModal = true">{{
+                t('common.configure')
+              }}</n-button>
+            </div>
          </div>
        </div>

@@ -418,142 +428,40 @@
      <play-bottom />
    </n-scrollbar>

-    <!-- 快捷键设置弹窗 -->
-    <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
+    <template v-if="isElectron">
+      <!-- 快捷键设置弹窗 -->
+      <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
+
+      <!-- 代理设置弹窗 -->
+      <proxy-settings 
+        v-model:show="showProxyModal" 
+        :config="proxyForm"
+        @confirm="handleProxyConfirm"
+      />
+
+      <!-- 音源设置弹窗 -->
+      <music-source-settings
+        v-model:show="showMusicSourcesModal"
+        v-model:sources="musicSources"
+      />
+
+      <!-- 远程控制设置弹窗 -->
+      <remote-control-setting v-model:visible="showRemoteControlModal" />
+
+    </template>

-    <!-- 代理设置弹窗 -->
-    <n-modal
-      v-model:show="showProxyModal"
-      preset="dialog"
-      :title="t('settings.network.proxy')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      :show-icon="false"
-      @positive-click="handleProxyConfirm"
-      @negative-click="showProxyModal = false"
-    >
-      <n-form
-        ref="formRef"
-        :model="proxyForm"
-        :rules="proxyRules"
-        label-placement="left"
-        label-width="80"
-        require-mark-placement="right-hanging"
-      >
-        <n-form-item :label="t('settings.network.proxy')" path="protocol">
-          <n-select
-            v-model:value="proxyForm.protocol"
-            :options="[
-              { label: 'HTTP', value: 'http' },
-              { label: 'HTTPS', value: 'https' },
-              { label: 'SOCKS5', value: 'socks5' }
-            ]"
-          />
-        </n-form-item>
-        <n-form-item :label="t('settings.network.proxyHost')" path="host">
-          <n-input
-            v-model:value="proxyForm.host"
-            :placeholder="t('settings.network.proxyHostPlaceholder')"
-          />
-        </n-form-item>
-        <n-form-item :label="t('settings.network.proxyPort')" path="port">
-          <n-input-number
-            v-model:value="proxyForm.port"
-            :placeholder="t('settings.network.proxyPortPlaceholder')"
-            :min="1"
-            :max="65535"
-          />
-        </n-form-item>
-      </n-form>
-    </n-modal>
    <!-- 清除缓存弹窗 -->
-    <n-modal
+    <clear-cache-settings
      v-model:show="showClearCacheModal"
-      preset="dialog"
-      :title="t('settings.system.cache')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      @positive-click="clearCache"
-      @negative-click="
-        () => {
-          selectedCacheTypes = [];
-        }
-      "
-    >
-      <n-space vertical>
-        <p>{{ t('settings.system.cacheClearTitle') }}</p>
-        <n-checkbox-group v-model:value="selectedCacheTypes">
-          <n-space vertical>
-            <n-checkbox
-              v-for="option in clearCacheOptions"
-              :key="option.key"
-              :value="option.key"
-              :label="option.label"
-            >
-              <template #default>
-                <div>
-                  <div>{{ t(`settings.system.cacheTypes.${option.key}.label`) }}</div>
-                  <div class="text-gray-400 text-sm">
-                    {{ t(`settings.system.cacheTypes.${option.key}.description`) }}
-                  </div>
-                </div>
-              </template>
-            </n-checkbox>
-          </n-space>
-        </n-checkbox-group>
-      </n-space>
-    </n-modal>
+      @confirm="clearCache"
+    />

-    <!-- 音源设置弹窗 -->
-    <n-modal
-      v-model:show="showMusicSourcesModal"
-      preset="dialog"
-      :title="t('settings.playback.musicSources')"
-      :positive-text="t('common.confirm')"
-      :negative-text="t('common.cancel')"
-      @positive-click="showMusicSourcesModal = false"
-      @negative-click="showMusicSourcesModal = false"
-    >
-      <n-space vertical>
-        <p>{{ t('settings.playback.musicSourcesDesc') }}</p>
-        <n-checkbox-group v-model:value="musicSources">
-          <n-grid :cols="2" :x-gap="12" :y-gap="8">
-            <n-grid-item v-for="source in musicSourceOptions" :key="source.value">
-              <n-checkbox :value="source.value">
-                {{ source.label }}
-                <template v-if="source.value === 'gdmusic'">
-                  <n-tooltip>
-                    <template #trigger>
-                      <n-icon size="16" class="ml-1 text-blue-500 cursor-help">
-                        <i class="ri-information-line"></i>
-                      </n-icon>
-                    </template>
-                    {{ t('settings.playback.gdmusicInfo') }}
-                  </n-tooltip>
-                </template>
-              </n-checkbox>
-            </n-grid-item>
-          </n-grid>
-        </n-checkbox-group>
-        <div v-if="musicSources.length === 0" class="text-red-500 text-sm">
-          {{ t('settings.playback.musicSourcesWarning') }}
-        </div>

-        <!-- GD音乐台设置 -->
-        <div v-if="musicSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
-          <h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
-          <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
-            GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
-          </p>
-        </div>
-      </n-space>
-    </n-modal>
  </div>
 </template>

 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
 import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -564,18 +472,21 @@ import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
 import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
+import ProxySettings from '@/components/settings/ProxySettings.vue';
+import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
+import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
+import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
 import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
+import { type Platform } from '@/types/music';

 import config from '../../../../package.json';

-// 手动定义Platform类型，避免从主进程导入的问题
-type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube' | 'gdmusic';
-// 所有平台
-const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'kuwo', 'bilibili', 'youtube', 'gdmusic'];
+// 所有平台默认值
+const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili', 'youtube'];

 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
@@ -691,41 +602,12 @@ const openDownloadPath = () => {
 };

 const showProxyModal = ref(false);
-const formRef = ref();
 const proxyForm = ref({
  protocol: 'http',
  host: '127.0.0.1',
  port: 7890
 });

-const proxyRules: FormRules = {
-  protocol: {
-    required: true,
-    message: t('settings.validation.selectProxyProtocol'),
-    trigger: ['blur', 'change']
-  },
-  host: {
-    required: true,
-    message: t('settings.validation.proxyHost'),
-    trigger: ['blur', 'change'],
-    validator: (_rule, value) => {
-      if (!value) return false;
-      // 简单的IP或域名验证
-      const ipRegex =
-        /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
-      return ipRegex.test(value);
-    }
-  },
-  port: {
-    required: true,
-    message: t('settings.validation.portNumber'),
-    trigger: ['blur', 'change'],
-    validator: (_rule, value) => {
-      return value >= 1 && value <= 65535;
-    }
-  }
-};
-
 // 使用 store 中的字体列表
 const systemFonts = computed(() => settingsStore.systemFonts);

@@ -803,24 +685,16 @@ watch(
  { immediate: true, deep: true }
 );

-const handleProxyConfirm = async () => {
-  try {
-    await formRef.value?.validate();
-    // 保存代理配置时保留enable状态
-    setData.value = {
-      ...setData.value,
-      proxyConfig: {
-        enable: setData.value.proxyConfig?.enable || false,
-        protocol: proxyForm.value.protocol,
-        host: proxyForm.value.host,
-        port: proxyForm.value.port
-      }
-    };
-    showProxyModal.value = false;
-    message.success(t('settings.network.messages.proxySuccess'));
-  } catch (err) {
-    message.error(t('settings.network.messages.proxyError'));
-  }
+const handleProxyConfirm = async (proxyConfig) => {
+  // 保存代理配置时保留enable状态
+  setData.value = {
+    ...setData.value,
+    proxyConfig: {
+      enable: setData.value.proxyConfig?.enable || false,
+      ...proxyConfig
+    }
+  };
+  message.success(t('settings.network.messages.proxySuccess'));
 };

 const validateAndSaveRealIP = () => {
@@ -866,48 +740,9 @@ const toggleDonationList = () => {

 // 清除缓存相关
 const showClearCacheModal = ref(false);
-const clearCacheOptions = ref([
-  {
-    label: t('settings.system.cacheTypes.history.label'),
-    key: 'history',
-    description: t('settings.system.cacheTypes.history.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.favorite.label'),
-    key: 'favorite',
-    description: t('settings.system.cacheTypes.favorite.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.user.label'),
-    key: 'user',
-    description: t('settings.system.cacheTypes.user.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.settings.label'),
-    key: 'settings',
-    description: t('settings.system.cacheTypes.settings.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.downloads.label'),
-    key: 'downloads',
-    description: t('settings.system.cacheTypes.downloads.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.resources.label'),
-    key: 'resources',
-    description: t('settings.system.cacheTypes.resources.description')
-  },
-  {
-    label: t('settings.system.cacheTypes.lyrics.label'),
-    key: 'lyrics',
-    description: t('settings.system.cacheTypes.lyrics.description')
-  }
-]);

-const selectedCacheTypes = ref<string[]>([]);
-
-const clearCache = async () => {
-  const clearTasks = selectedCacheTypes.value.map(async (type) => {
+const clearCache = async (selectedCacheTypes) => {
+  const clearTasks = selectedCacheTypes.map(async (type) => {
    switch (type) {
      case 'history':
        localStorage.removeItem('musicHistory');
@@ -966,8 +801,6 @@ const clearCache = async () => {

  await Promise.all(clearTasks);
  message.success(t('settings.system.messages.clearSuccess'));
-  showClearCacheModal.value = false;
-  selectedCacheTypes.value = [];
 };

 const showShortcutModal = ref(false);
@@ -1062,17 +895,6 @@ onMounted(() => {
 });

 // 音源设置相关
-const musicSourceOptions = ref([
-  { label: 'MiGu音乐', value: 'migu' },
-  { label: '酷狗音乐', value: 'kugou' },
-  { label: 'pyncmd', value: 'pyncmd' },
-  { label: '酷我音乐', value: 'kuwo' },
-  { label: 'Bilibili音乐', value: 'bilibili' },
-  { label: 'YouTube', value: 'youtube' },
-  { label: 'GD音乐台', value: 'gdmusic' }
-]);
-
-// 已选择的音源列表
 const musicSources = computed({
  get: () => {
    if (!setData.value.enabledMusicSources) {
@@ -1082,7 +904,7 @@ const musicSources = computed({
  },
  set: (newValue: Platform[]) => {
    // 确保至少选择一个音源
-    const valuesToSet = newValue.length > 0 ? newValue : ALL_PLATFORMS;
+    const valuesToSet = newValue.length > 0 ? [...new Set(newValue)] : ALL_PLATFORMS;
    setData.value = {
      ...setData.value,
      enabledMusicSources: valuesToSet
@@ -1092,10 +914,8 @@ const musicSources = computed({

 const showMusicSourcesModal = ref(false);

-const getSourceLabel = (source: Platform) => {
-  const sourceLabel = musicSourceOptions.value.find(s => s.value === source)?.label;
-  return sourceLabel || source;
-};
+// 远程控制设置弹窗
+const showRemoteControlModal = ref(false);
 </script>

 <style lang="scss" scoped>
Author	SHA1	Message	Date
alger	4abb6a5a9f	✨ feat: 添加额外资源配置，优化远程控制页面HTML路径获取逻辑	2025-04-30 00:47:14 +08:00
alger	b1d515465a	🐞 fix: 修复远程控制页面找不到问题	2025-04-30 00:14:05 +08:00
alger	ea7dca7975	🌈 style: v4.5.0	2025-04-29 23:48:49 +08:00
alger	c98fa20a74	✨ feat: 优化设置页面拆分组件	2025-04-29 23:38:17 +08:00
Alger	16d6ff39c8	Merge pull request #173 from algerkong/fix/overlapping-playback 🐞 fix: 修复音乐播放重复声音的问题，添加锁机制，添加防抖机制，优化音频服务和快捷键处理逻辑	2025-04-29 23:33:44 +08:00
alger	159dd03a2c	🐞 fix: 修复音乐播放重复声音的问题，添加锁机制，添加防抖机制，优化音频服务和快捷键处理逻辑	2025-04-29 23:33:03 +08:00
Alger	167c8ad493	Merge pull request #171 from algerkong/feat/remote-control ✨ feat: 添加远程控制功能，支持远程控制音乐播放操作	2025-04-29 23:23:43 +08:00
alger	c82ffd0c7d	✨ feat: 添加远程控制功能，支持远程控制音乐播放操作	2025-04-29 23:21:16 +08:00
alger	0128662ed2	🎨 style: 优化应用图标更新应用图标资源	2025-04-27 21:56:03 +08:00
alger	30695149d6	✨ feat: 更新歌手数据加载逻辑，首页添加周杰伦歌手信息常驻	2025-04-25 23:10:02 +08:00
Alger	bbc1bb7436	Merge pull request #165 from algerkong/fix/artist-error 🐞 fix: 修复歌手页面数据加载问题	2025-04-25 23:08:31 +08:00
alger	57424f9e15	🐞 fix: 修复歌手页面数据加载问题	2025-04-25 23:07:09 +08:00
algerkong	32b93680b9	✨ feat: 优化音源选择逻辑以去重	2025-04-25 09:07:19 +08:00
algerkong	0a22c7b5d7	✨ feat: 优化设置模块，合并默认设置与存储设置，初始化时读取设置	2025-04-25 09:07:19 +08:00
algerkong	64f5fcaee4	🔧 chore: 移除不再使用的快捷键初始化功能	2025-04-25 09:07:19 +08:00
Alger	304c24a673	feat: Update README.md	2025-04-24 20:41:20 +08:00
Alger	a56bca98b2	feat: Update README.md	2025-04-24 20:38:25 +08:00