# 多平台媒体管理系统

<p align="center">
  <img src="./docs/logo.png" width="128" height="128" alt="Logo">
</p>

<p align="center">
  <b>一个功能强大的多自媒体平台账号管理系统</b><br>
  支持视频自动发布、评论统一管理、数据分析等功能
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Electron-28+-47848F?style=flat-square&logo=electron&logoColor=white" alt="Electron">
  <img src="https://img.shields.io/badge/Vue-3.4+-4FC08D?style=flat-square&logo=vue.js&logoColor=white" alt="Vue">
  <img src="https://img.shields.io/badge/TypeScript-5+-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript">
  <img src="https://img.shields.io/badge/Node.js-20+-339933?style=flat-square&logo=node.js&logoColor=white" alt="Node.js">
  <img src="https://img.shields.io/badge/MySQL-8.0+-4479A1?style=flat-square&logo=mysql&logoColor=white" alt="MySQL">
</p>

## ✨ 功能特性

### 核心功能
- **多平台支持**: 抖音、快手、视频号、小红书、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，可以通过以下方式安装：

```bash
# 方式一：使用 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
```

### 安装

```bash
# 克隆项目
git clone https://github.com/your-repo/multi-platform-media-manage.git
cd multi-platform-media-manage

# 安装依赖
pnpm install
```

### 配置数据库

1. 创建 MySQL 数据库：

```sql
CREATE DATABASE media_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 导入数据库结构：

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

3. 配置环境变量：

```bash
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` 文件。

### 启动开发服务

```bash
# 同时启动前后端
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`

### 打包客户端

```bash
cd client

# 打包 Windows 版本
pnpm build:win

# 打包 macOS 版本
pnpm build:mac

# 打包 Linux 版本
pnpm build:linux
```

### Docker 部署服务端

```bash
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。