多平台媒体管理系统

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

✨ 功能特性

核心功能

多平台支持: 抖音、快手、视频号、小红书、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  # 启动客户端（新终端）

默认账号

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

📦 打包发布

生成应用图标

访问 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。

README.md 11 KB Geçmiş Ham

多平台媒体管理系统

✨ 功能特性

核心功能

客户端特性

📸 界面预览

🏗️ 系统架构

🛠️ 技术栈

客户端

服务端

数据库

🚀 快速开始

环境要求

安装 pnpm

安装

配置数据库

启动开发服务

默认账号

📁 项目结构

⌨️ 快捷键

📦 打包发布

生成应用图标

打包客户端

Docker 部署服务端

📡 API 接口

认证相关

账号管理

发布管理

作品管理

任务队列

🔧 开发指南

添加新平台支持

WebSocket 事件

📄 许可证

🤝 贡献

📮 联系

README.md 11 KB

Geçmiş Ham