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	JavaScript 运行时
pnpm	>= 8.0.0	包管理器
Python	>= 3.8	视频发布服务
MySQL	8.0+	数据库

---

📋 详细安装步骤

第一步：安装 Node.js

下载并安装 Node.js 20+ 版本：https://nodejs.org/

# 验证安装
node --version  # 应显示 v20.x.x 或更高

第二步：安装 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  # 应显示 8.x.x 或更高

第三步：克隆项目

git clone https://github.com/your-repo/multi-platform-media-manage.git
cd multi-platform-media-manage

第四步：安装 Node.js 依赖

# 安装所有工作空间的依赖
pnpm install

此命令会自动安装 client、server、shared 三个工作空间的所有依赖。

第五步：编译 shared 共享模块

⚠️ 重要：首次运行或修改 shared 代码后必须执行此步骤！

# 编译 shared 模块（client 和 server 都依赖它）
cd shared
pnpm build
cd ..

或者使用快捷命令：

pnpm --filter @media-manager/shared build

shared 模块包含 TypeScript 类型定义和常量，被 client 和 server 共同引用。

第六步：配置数据库

6.1 创建 MySQL 数据库

-- 登录 MySQL
mysql -u root -p

-- 创建数据库
CREATE DATABASE media_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 退出
exit

6.2 导入数据库结构

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

6.3 配置环境变量

# 进入 server 目录
cd server

# 复制环境变量模板
cp env.example .env   # Linux/macOS
copy env.example .env # Windows CMD

编辑 .env 文件，填入数据库配置：

# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=你的MySQL密码
DB_DATABASE=media_manager

# JWT 密钥（生产环境请更换为随机字符串）
JWT_SECRET=your-super-secret-key-change-in-production

# 加密密钥（必须是 32 个字符）
ENCRYPTION_KEY=your-encryption-key-32-chars-long!

📄 完整配置项说明（点击展开）

配置项	说明	默认值
NODE_ENV	运行环境	development
PORT	服务端口	3000
DB_HOST	MySQL 主机	localhost
DB_PORT	MySQL 端口	3306
DB_USERNAME	数据库用户名	root
DB_PASSWORD	数据库密码	-
DB_DATABASE	数据库名称	media_manager
JWT_SECRET	JWT 密钥	-
JWT_ACCESS_EXPIRES_IN	Access Token 过期时间	15m
JWT_REFRESH_EXPIRES_IN	Refresh Token 过期时间	7d
ENCRYPTION_KEY	数据加密密钥（32字符）	-
UPLOAD_PATH	文件上传路径	./uploads
MAX_VIDEO_SIZE	最大视频大小 (MB)	4096

第七步：安装 Python 服务（视频发布功能）

Python 服务用于视频自动发布功能，必须安装。

7.1 进入 Python 目录

cd server/python

7.2 创建虚拟环境

Windows (PowerShell):

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
.\venv\Scripts\Activate.ps1

# 如果遇到执行策略错误，先运行：
# Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Windows (CMD):

python -m venv venv
venv\Scripts\activate.bat

Linux / macOS:

python3 -m venv venv
source venv/bin/activate

7.3 安装 Python 依赖

# 确保虚拟环境已激活（提示符前有 (venv)）
pip install -r requirements.txt

# 安装 Playwright 浏览器
playwright install chromium

# Linux 服务器还需安装系统依赖
# playwright install-deps chromium

7.4 验证 Python 服务

# 启动 Python 服务（测试）
python app.py

# 看到以下输出表示成功：
# ============================================================
# 多平台视频发布服务
# ============================================================
# 服务地址: http://0.0.0.0:5005
# ============================================================

按 Ctrl+C 停止服务。

第八步：启动开发服务

回到项目根目录：

cd ../..  # 从 server/python 返回根目录

方式一：同时启动所有服务（推荐）

pnpm dev

这会同时启动：

• Node.js 后端服务 (端口 3000)
• Electron 客户端 (端口 5173)

方式二：分别启动服务

终端 1 - 启动后端:

pnpm dev:server

终端 2 - 启动客户端:

pnpm dev:client

终端 3 - 启动 Python 服务:

cd server/python
.\venv\Scripts\Activate.ps1  # Windows
# source venv/bin/activate   # Linux/macOS
python app.py

第九步：登录系统

• 用户名: admin
• 密码: admin123

---

🔄 日常开发流程

# 1. 进入项目目录
cd multi-platform-media-manage

# 2. 启动主服务
pnpm dev

# 3. 启动 Python 服务（新开终端）
cd server/python
.\venv\Scripts\Activate.ps1
python app.py

❓ 常见问题

Q: 启动时报错 "Cannot find module '@media-manager/shared'"

A: 需要先编译 shared 模块：

cd shared && pnpm build && cd ..

Q: Python 服务启动报错

A: 确保：

1. 已激活虚拟环境（提示符前有 (venv)）
2. 已安装所有依赖：pip install -r requirements.txt
3. 已安装浏览器：playwright install chromium

Q: 数据库连接失败

A: 检查 server/.env 文件中的数据库配置是否正确。

Q: Electron 窗口空白

A: 确保后端服务已启动（端口 3000）。

📁 项目结构

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。