项目简介

TouchPad 是一个Windows控制工具。用户可以通过自定义快捷键操作和快捷启动可执行程序(.exe)的操作的快捷按钮并排列在网页中，通过任何可以与PC连接的浏览器设备进行操作。 并且提供了SMTC监控和操作。可以快捷地进行媒体控制，包括暂停，切歌，音量调整。

仓库地址：https://github.com/SpikeXiong/TouchPad

Touch Pad

https://github.com/user-attachments/assets/f3711042-ac29-4485-a078-44b6e760ff61

这是一个用于控制计算机的网页程序，包含前端和后端组件。

项目结构

.
├── front/           # 前端应用 (React + TypeScript)
├── server/          # 后端服务 (ASP.NET Core)
└── README.md        # 项目说明文档

功能特性

前端 (front/)

• 基于 React 和 TypeScript 构建
• 使用 Material-UI 组件库
• 支持 React Router 路由
• 集成 SignalR 实时通信
• 响应式设计

后端 (server/)

• 基于 ASP.NET Core 10.0 构建
• 使用 SignalR 实现实时通信
• 支持音频控制
• 支持热键管理
• 支持系统托盘图标
• 支持应用程序控制

技术栈

前端技术

• React 19.1.1
• TypeScript 5.8.3
• Material-UI 7.3.2
• React Router 7.9.3
• SignalR 客户端
• Vite 7.1.6

后端技术

• ASP.NET Core 10.0
• C#
• SignalR
• NAudio 2.2.1
• Windows Forms (用于系统托盘)

项目组件说明

前端 (front/)

• src/ - React 组件源码
  • components/ - React 组件
  • pages/ - 页面组件
  • services/ - 服务层
  • models/ - 数据模型
  • hooks/ - 自定义 Hook
  • contexts/ - React Context
  • assets/ - 静态资源
  • config.ts - 配置文件
• public/ - 静态资源文件
• package.json - 依赖包管理
• vite.config.ts - Vite 构建配置

后端 (server/)

• Controllers/ - 控制器层
  • CustomUIController.cs - 自定义UI控制器
  • WindowsController.cs - Windows控制器
• Hubs/ - SignalR 中继器
  • MessageHub.cs - 消息中继器
• Managers/ - 业务逻辑管理器
• Models/ - 数据模型
  • Message/ - 消息模型
    • MediaInfoMessage.cs - 媒体信息消息
  • Request/ - 请求模型
    • HotkeyRequest.cs - 热键请求
    • LaunchRequest.cs - 启动请求
    • SMTCRequest.cs - SMTC请求
    • VolumeRequest.cs - 音量请求
• Services/ - 服务层
  • ApplicationService.cs - 应用程序服务
  • AudioService.cs - 音频服务
  • CustomUIService.cs - 自定义UI服务
  • HotkeyService.cs - 热键服务
  • JsonFileService.cs - JSON文件服务
  • SMTCService.cs - SMTC服务
  • TrayIconService.cs - 托盘图标服务
• Resources/ - 资源文件
• Program.cs - 应用程序入口点

运行说明

前端运行

bash
cd front
npm install
npm run dev

后端运行

bash
cd server
# 使用 Visual Studio 或命令行运行
dotnet run

构建说明

前端构建

bash
cd front
npm run build

后端构建

bash
cd server
dotnet build

开发环境要求

• Node.js 18+
• .NET 10.0 SDK
• Visual Studio 或 VS Code

开发者指南

前端开发

• 使用 TypeScript 编写
• 遵循 React 组件化开发模式
• 使用 Material-UI 组件库

后端开发

• 使用 C# 编写
• 遵循 ASP.NET Core 开发规范
• 使用 SignalR 实现实时通信
• 使用 Windows Forms 实现系统托盘功能

注意事项

• 后端程序启动后会自动打开浏览器并最小化到系统托盘
• 前端和后端通过 SignalR 进行实时通信
• 项目使用了 Windows 特定功能（如系统托盘），在非 Windows 系统上可能无法正常运行

许可证

本项目为个人学习和开发用途。