多平台媒体管理系统
一个功能强大的多自媒体平台账号管理系统
支持视频自动发布、评论统一管理、数据分析等功能
✨ 功能特性
核心功能
- 多平台支持: 抖音、快手、视频号、小红书、B站等主流平台
- 账号管理: 多平台账号添加、浏览器扫码登录、登录状态监控
- 视频发布: 单视频多平台一键发布、批量发布、定时发布
- 评论管理: 多平台评论聚合、一键回复、批量回复
- 数据分析: 多平台数据汇总、趋势分析、数据导出
- 作品同步: 自动同步各平台作品数据和评论
客户端特性
- 标签页管理: 多标签页切换，支持右键菜单操作
- 系统托盘: 最小化到托盘，后台持续运行
- 快捷键支持:
Ctrl+W 关闭当前标签页
- 内嵌浏览器: 平台扫码登录，无需外部浏览器
- 任务队列: 实时显示后台任务进度
- 自定义标题栏: 现代化无边框窗口设计
📸 界面预览
- 浅色主题设计，简洁优雅
- 可折叠侧边栏，平滑动画过渡
- 响应式布局，自适应不同窗口尺寸
🏗️ 系统架构
┌─────────────────────────────────────────────────────────────┐
│ 桌面客户端 (Electron + Vue3) │
│ 标签页系统 | 系统托盘 | 内嵌浏览器 │
├─────────────────────────────────────────────────────────────┤
│ HTTP/WebSocket 通信 │
├─────────────────────────────────────────────────────────────┤
│ 后端服务 (Express + TypeORM) │
├──────────────────┬──────────────────┬───────────────────────┤
│ Playwright │ 定时调度器 │ WebSocket 服务 │
│ 自动化引擎 │ (node-schedule) │ (实时任务通知) │
├──────────────────┴──────────────────┴───────────────────────┤
│ MySQL + Redis 数据存储 │
└─────────────────────────────────────────────────────────────┘
🛠️ 技术栈
客户端
| 技术 |
版本 |
说明 |
| Electron |
28+ |
桌面应用框架 |
| Vue |
3.4+ |
前端框架 |
| TypeScript |
5+ |
类型安全 |
| Element Plus |
2.4+ |
UI 组件库 |
| Pinia |
2+ |
状态管理 |
| ECharts |
5+ |
图表库 |
| SCSS |
- |
样式预处理 |
服务端
| 技术 |
版本 |
说明 |
| Node.js |
20+ |
运行时 |
| Express |
4+ |
Web 框架 |
| TypeORM |
0.3+ |
ORM 框架 |
| Playwright |
1.40+ |
浏览器自动化 |
| WebSocket |
ws |
实时通信 |
| node-schedule |
- |
定时任务 |
数据库
- MySQL 8.0+
- Redis 7+ (可选，用于缓存)
🚀 快速开始
环境要求
- Node.js >= 20.0.0
- pnpm >= 8.0.0
- MySQL 8.0+
安装 pnpm
如果尚未安装 pnpm，可以通过以下方式安装：
# 方式一：使用 npm 安装（推荐）
npm install -g pnpm
# 方式二：使用 corepack（Node.js 16.13+ 内置）
corepack enable
corepack prepare pnpm@latest --activate
# 方式三：Windows PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex
# 方式四：macOS/Linux
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 验证安装
pnpm --version
安装
# 克隆项目
git clone https://github.com/your-repo/multi-platform-media-manage.git
cd multi-platform-media-manage
# 安装依赖
pnpm install
配置数据库
- 创建 MySQL 数据库：
CREATE DATABASE media_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
- 导入数据库结构：
mysql -u root -p media_manager < database/schema.sql
- 配置环境变量：
cd server
cp env.example .env
# 编辑 .env 文件，填入数据库配置
主要配置项：
| 配置项 |
说明 |
默认值 |
DB_HOST |
MySQL 主机 |
localhost |
DB_PORT |
MySQL 端口 |
3306 |
DB_USERNAME |
数据库用户名 |
root |
DB_PASSWORD |
数据库密码 |
- |
DB_DATABASE |
数据库名称 |
media_manager |
JWT_SECRET |
JWT 密钥 |
- |
PORT |
服务端口 |
3000 |
详细配置说明请参考 server/env.example 文件。
启动开发服务
# 同时启动前后端
pnpm dev
# 或分别启动
pnpm dev:server # 启动后端
pnpm dev:client # 启动客户端（新终端）
默认账号
📁 项目结构
multi-platform-media-manage/
├── client/ # 桌面客户端
│ ├── electron/ # Electron 主进程
│ │ ├── main.ts # 主进程入口（窗口、托盘）
│ │ └── preload.ts # 预加载脚本
│ ├── public/ # 静态资源
│ │ └── favicon.svg # 应用图标
│ ├── build/ # 打包资源
│ │ └── icon.svg # 打包图标源文件
│ ├── src/
│ │ ├── views/ # 页面组件
│ │ ├── components/ # 公共组件
│ │ │ ├── BrowserTab.vue # 内嵌浏览器
│ │ │ └── TaskProgressDialog # 任务进度
│ │ ├── layouts/ # 布局组件
│ │ │ └── MainLayout.vue # 主布局（标签页）
│ │ ├── stores/ # Pinia 状态管理
│ │ │ ├── tabs.ts # 标签页状态
│ │ │ └── taskQueue.ts # 任务队列状态
│ │ ├── api/ # API 请求
│ │ ├── router/ # 路由配置
│ │ └── styles/ # 全局样式
│ ├── electron-builder.json # 打包配置
│ └── package.json
├── server/ # 后端服务
│ ├── src/
│ │ ├── routes/ # API 路由
│ │ ├── services/ # 业务逻辑
│ │ │ ├── HeadlessBrowserService # 浏览器自动化
│ │ │ └── TaskQueueService # 任务队列
│ │ ├── models/ # 数据模型
│ │ ├── middleware/ # 中间件
│ │ ├── automation/ # 自动化引擎
│ │ └── websocket/ # WebSocket 服务
│ ├── Dockerfile
│ └── docker-compose.yml
├── shared/ # 共享代码
│ ├── src/
│ │ ├── types/ # TypeScript 类型
│ │ └── constants/ # 常量定义
│ └── package.json
├── database/ # 数据库脚本
│ └── schema.sql
└── README.md
⌨️ 快捷键
| 快捷键 |
功能 |
Ctrl+W |
关闭当前标签页 |
| 右键标签 |
标签页操作菜单 |
| 右键关闭按钮 |
托盘/退出菜单 |
📦 打包发布
生成应用图标
- 访问 https://convertio.co/svg-ico/
- 上传
client/build/icon.svg
- 下载并保存为
client/build/icon.ico
打包客户端
cd client
# 打包 Windows 版本
pnpm build:win
# 打包 macOS 版本
pnpm build:mac
# 打包 Linux 版本
pnpm build:linux
Docker 部署服务端
cd server
docker-compose up -d
📡 API 接口
认证相关
| 路径 |
方法 |
描述 |
/api/auth/login |
POST |
用户登录 |
/api/auth/register |
POST |
用户注册 |
/api/auth/me |
GET |
获取当前用户 |
账号管理
| 路径 |
方法 |
描述 |
/api/accounts |
GET |
获取账号列表 |
/api/accounts |
POST |
添加账号 |
/api/accounts/:id |
PUT |
更新账号 |
/api/accounts/:id |
DELETE |
删除账号 |
/api/accounts/:id/refresh |
POST |
刷新账号状态 |
发布管理
| 路径 |
方法 |
描述 |
/api/publish |
GET |
获取发布任务 |
/api/publish |
POST |
创建发布任务 |
/api/publish/:id |
DELETE |
删除任务 |
作品管理
| 路径 |
方法 |
描述 |
/api/works |
GET |
获取作品列表 |
/api/works/sync/:accountId |
POST |
同步账号作品 |
/api/works/:id/comments/sync |
POST |
同步作品评论 |
任务队列
| 路径 |
方法 |
描述 |
/api/task-queue |
GET |
获取任务列表 |
| WebSocket |
- |
实时任务状态推送 |
🔧 开发指南
添加新平台支持
- 在
shared/src/types/platform.ts 添加平台类型
- 在
shared/src/constants/platforms.ts 添加平台配置
- 在
server/src/services/HeadlessBrowserService.ts 添加平台适配方法
WebSocket 事件
| 事件 |
方向 |
描述 |
TASK_CREATED |
Server→Client |
任务创建 |
TASK_PROGRESS |
Server→Client |
任务进度更新 |
TASK_COMPLETED |
Server→Client |
任务完成 |
TASK_FAILED |
Server→Client |
任务失败 |
CAPTCHA_REQUIRED |
Server→Client |
需要验证码 |
📄 许可证
MIT License
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📮 联系
如有问题或建议，请提交 Issue。
Ethanfly
495fc64667
Update project configuration and assets