【AI辅助】从小项目开始基于Electron + React的Mac录屏工具：录屏+画中画+视频保存

项目介绍

Release：https://github.com/zekihe/screenSider/releases

软件图标

Screen Sider 是一款基于 Electron + React 开发的现代化 macOS 屏幕录制工具，专注于提供简洁高效的录屏体验。它完美解决了传统录屏软件的痛点：复杂的操作界面、功能冗余、性能占用大等问题。

🎯 核心特色：（部分功能待完善）

🎥 屏幕录制 - 支持全屏、窗口、自定义区域录制

👤 摄像头画中画 - 实时叠加摄像头画面，支持拖拽调整位置

🎨 画中画样式自定义 - 圆形、圆角、方形多种样式可选

💾 智能保存 - 自动保存录制文件，支持快速预览和分享

⚡ 高性能 - 基于 Electron-vite 构建，启动迅速，运行流畅

🚀 快速开始

1. 克隆项目

git clone https://github.com/zekihe/screenSider.git
cd screenSider

2. 安装依赖

npm install
# 或使用 yarn
yarn install

3. 开发模式运行

npm run dev
# 或 预览
npm run preview

📁 项目结构

├── src/
│   ├── main/            # Electron主进程
│   │   └── index.js     # 主进程入口文件
│   ├── preload/         # 预加载脚本
│   │   └── index.js     # 进程通信桥梁
│   └── renderer/        # 渲染进程(React应用)
│       ├── common/      # 公共资源
│       │   ├── images/  # 图片资源
│       │   └── styles/  # 全局样式
│       ├── components/  # 通用组件
│       ├── pages/       # 页面组件
│       │   ├── App.jsx          # 主应用页面
│       │   ├── CameraOverlay.jsx # 摄像头画中画页面
│       │   ├── Error.jsx         # 错误提示页面
│       │   ├── ScreenSelector.jsx # 屏幕选择页面
│       │   └── Settings.jsx      # 设置页面
│       ├── router/      # 路由配置
│       │   └── index.jsx # 路由定义
│       ├── index.html   # HTML模板
│       └── main.jsx     # React应用入口
├── main.js             # Electron入口点
├── build/
│   └── electron-builder.json # 构建配置
├── eslint.config.js    # ESLint配置
├── .prettierrc.yaml    # Prettier配置
├── package.json        # 项目配置
├── preview/            # 预览图
│   └── preview-01.png  # 应用预览图
└── README.md           # 项目说明

🔮 未来规划

短期计划

窗口、自定义区域录制 画中画样式自定义 - 圆形、圆角、方形多种样式可选 智能保存 - 自动保存录制文件，支持快速预览和分享 支持更多视频格式

添加视频编辑功能（剪辑、标注）

📞 联系与支持

📧 邮箱：zeke.ho@foxmail.com

🌐 项目地址：github.com/zekihe/scre…