multi-platform-media-manage

多平台媒体管理系统

一个功能强大的多自媒体平台账号管理系统，支持视频自动发布、评论统一管理、数据分析等功能。

✨ 功能特性

核心功能

• 多平台支持: 抖音、快手、视频号、小红书、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

配置数据库

1. 创建 MySQL 数据库：

CREATE DATABASE media_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

1. 导入数据库结构：

mysql -u root -p media_manager < database/schema.sql

1. 配置环境变量：

cd server
cp .env.example .env
# 编辑 .env 文件，填入数据库配置

启动开发服务

# 同时启动前后端
pnpm dev

# 或分别启动
pnpm dev:server  # 启动后端
pnpm dev:client  # 启动客户端（新终端）

默认账号

• 用户名: admin
• 密码: admin123

📁 项目结构

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	关闭当前标签页
右键标签	标签页操作菜单
右键关闭按钮	托盘/退出菜单

📦 打包发布

生成应用图标

1. 访问 https://convertio.co/svg-ico/
2. 上传 client/build/icon.svg
3. 下载并保存为 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	-	实时任务状态推送

🔧 开发指南

添加新平台支持

1. 在 shared/src/types/platform.ts 添加平台类型
2. 在 shared/src/constants/platforms.ts 添加平台配置
3. 在 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。