✨ feat: 添加远程控制功能，支持远程控制音乐播放操作

2026-04-03 14:20:50 +08:00 · 2025-04-29 23:21:16 +08:00
parent 0128662ed2
commit c82ffd0c7d
14 changed files with 995 additions and 10 deletions
--- a/package.json
+++ b/package.json
@@ -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",
--- 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/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,227 @@
+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 htmlPath = path.join(process.cwd(), 'resources', 'html', 'remote-control.html');
+      if (fs.existsSync(htmlPath)) {
+        res.sendFile(htmlPath);
+      } else {
+        res.status(404).send('远程控制界面文件未找到');
+        console.error('远程控制界面文件不存在:', htmlPath);
+      }
+    } catch (error) {
+      console.error('加载远程控制界面失败:', error);
+      res.status(500).send('加载远程控制界面失败');
+    }
+  });
+} 
--- 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
@@ -168,7 +168,6 @@ import {
  setBackgroundImg
 } from '@/utils';
 import { getArtistDetail } from '@/api/artist';
-import { cloneDeep } from 'lodash';

 const userStore = useUserStore();
 const playerStore = usePlayerStore();
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -72,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';
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -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>

@@ -548,6 +558,9 @@
        </div>
      </n-space>
    </n-modal>
+
+    <!-- 远程控制设置弹窗 -->
+    <remote-control-setting v-model:visible="showRemoteControlModal" />
  </div>
 </template>

@@ -569,6 +582,7 @@ import { useUserStore } from '@/store/modules/user';
 import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
+import RemoteControlSetting from '@/views/setting/ServerSetting.vue';

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

@@ -1096,6 +1110,9 @@ 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>
--- a/src/renderer/views/setting/ServerSetting.vue
+++ b/src/renderer/views/setting/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>