# 多平台媒体管理系统

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

---

## 📋 详细安装步骤

### 第一步：安装 Node.js

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

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

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

### 第三步：克隆项目

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

### 第四步：安装 Node.js 依赖

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

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

### 第五步：编译 shared 共享模块

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

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

或者使用快捷命令：

```bash
pnpm --filter @media-manager/shared build
```

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

### 第六步：配置数据库

#### 6.1 创建 MySQL 数据库

```sql
-- 登录 MySQL
mysql -u root -p

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

-- 退出
exit
```

#### 6.2 导入数据库结构

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

#### 6.3 配置环境变量

```bash
# 进入 server 目录
cd server

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

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

```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!
```

<details>
<summary>📄 完整配置项说明（点击展开）</summary>

| 配置项 | 说明 | 默认值 |
|--------|------|--------|
| `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 |

</details>

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

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

#### 7.1 进入 Python 目录

```bash
cd server/python
```

#### 7.2 创建虚拟环境

**Windows (PowerShell)**:
```powershell
# 创建虚拟环境
python -m venv venv

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

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

**Windows (CMD)**:
```cmd
python -m venv venv
venv\Scripts\activate.bat
```

**Linux / macOS**:
```bash
python3 -m venv venv
source venv/bin/activate
```

#### 7.3 安装 Python 依赖

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

# 安装 Playwright 浏览器
playwright install chromium

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

#### 7.4 验证 Python 服务

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

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

按 `Ctrl+C` 停止服务。

### 第八步：启动开发服务

回到项目根目录：

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

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

```bash
pnpm dev
```

这会同时启动：
- Node.js 后端服务 (端口 3000)
- Electron 客户端 (端口 5173)

#### 方式二：分别启动服务

**终端 1 - 启动后端**:
```bash
pnpm dev:server
```

**终端 2 - 启动客户端**:
```bash
pnpm dev:client
```

**终端 3 - 启动 Python 服务**:
```bash
cd server/python
.\venv\Scripts\Activate.ps1  # Windows
# source venv/bin/activate   # Linux/macOS
python app.py
```

### 第九步：登录系统

- **用户名**: `admin`
- **密码**: `admin123`

---

## 🔄 日常开发流程

```bash
# 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 模块：
```bash
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`

### 打包客户端

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