@axtools/web2api
v0.1.0
Published
Web API — 多平台任务调度与前端面板
Readme
web2api - 多平台 AI 内容生成任务监控管理系统
🚀 统一管理多平台 AI 账号、Cookie、任务提交和状态追踪的一体化 Web 系统
📸 界面预览
📖 项目简介
web2api 是一个多平台 AI 内容生成任务监控与管理 Web 系统，由前端（Vue 3）和后端（Hono + Playwright）两部分组成。
核心工作流程
┌──────────────┐ REST API + SSE ┌──────────────────┐ 浏览器自动化 ┌────────────────┐
│ │ ◄──────────────────────► │ │ ◄──────────────────► │ │
│ 前端 Web UI │ │ 后端 Hono服务 │ │ 目标AI平台 │
│ (Vue 3) │ │ (Playwright) │ │ Seedance/豆包 │
│ │ │ │ │ │
└──────────────┘ └──────────────────┘ └────────────────┘用户通过 Web 界面导入各平台的 Cookie，创建任务（如生成视频、生成图片、查询积分等），系统使用 Playwright 浏览器自动化 执行这些操作，实时追踪异步任务进度，并将结果返回给用户。
✨ 核心特性
- 🔌 插件式平台架构 - 新增平台只需创建目录 + 实现接口，系统自动识别
- 🍪 多账号 Cookie 管理 - 支持 JSON/字符串/EditThisCookie 格式导入，状态实时追踪
- 📊 实时监控仪表盘 - 支持全屏监控模式，数字滚动动画，状态一目了然
- 🔄 智能轮询调度 - 异步任务自动轮询，页面隐藏时暂停，可见时恢复
- 📡 SSE 实时推送 - 任务状态变更即时同步到前端，无需手动刷新
- ⚙️ 运行时配置调整 - 超时、并发、轮询间隔等参数可在 Web 界面实时修改
- 🛡️ 扣费点保护机制 - 关键操作后自动标记，服务器重启可恢复任务状态
🏗️ 技术栈
前端
| 技术 | 版本 | 说明 | |------|------|------| | Vue | ^3.5.34 | 渐进式 JavaScript 框架 | | TypeScript | ~6.0.2 | 类型安全的 JavaScript 超集 | | Vite | ^8.0.12 | 下一代前端构建工具 | | Pinia | ^3.0.4 | Vue 官方状态管理库 | | Vue Router | ^5.1.0 | 官方路由管理器 | | Tailwind CSS | ^4.3.0 | 实用优先的 CSS 框架 | | ax-ui-kit | - | 自研 UI 组件库 | | VueUse | ^14.3.0 | Vue 组合式函数集合 |
后端
| 技术 | 版本 | 说明 | |------|------|------| | Hono | ^4.7.0 | 超快的轻量级 Web 框架 | | Playwright | ^1.40.0 | 浏览器自动化测试工具 | | TypeScript | ~5.7.0 | 类型安全的 JavaScript 超集 | | tsx | ^4.19.0 | TypeScript 执行器 |
🚀 快速开始
环境要求
- Node.js >= 18
- pnpm >= 8
1. 安装依赖
# 克隆项目后，进入项目根目录
cd web2api
# 安装前端依赖
pnpm install
# 安装后端依赖
cd server
pnpm install
cd ..2. 开发模式启动
终端 1 - 启动后端服务：
cd server
pnpm dev后端服务默认运行在 http://localhost:8033
终端 2 - 启动前端开发服务器：
# 在项目根目录
pnpm dev前端开发服务器默认运行在 http://localhost:5173
前端已通过 Vite 代理配置，API 请求会自动转发到后端端口，无需额外配置。
3. 生产模式部署
构建前端：
cd web2api
pnpm build构建产物将输出到 dist/ 目录。
启动生产服务：
cd server
pnpm start📦 支持的平台
已接入平台
| 平台 | ID | 支持操作 | 说明 |
|------|-----|---------|------|
| Seedance 2.0 (小云雀) | seedance | generate-video（文生视频/图生视频）check-credits（查询积分） | 剪映 AI 视频生成平台 |
| 豆包 (Doubao) | doubao | chat（对话）generate-image（文生图）generate-video（视频生成）generate-music（音乐生成）upload-file（文件上传） | 字节跳动 AI 助手 |
添加新平台
系统采用插件式架构，新增平台只需：
- 在
server/src/platforms/下创建平台目录 - 实现
Platform接口 - 在
server/src/app.ts中注册平台
详细指南请参考：docs/add-new-platform.md
⚙️ 配置说明
环境变量
| 环境变量 | 对应配置 | 默认值 | 说明 |
|----------|----------|--------|------|
| PORT | server.port | 8033 | 后端服务端口 |
| HOST | server.host | 0.0.0.0 | 绑定地址 |
| API_KEY | server.apiKey | null | API 认证密钥（null 表示关闭认证） |
| FRONTEND_ORIGIN | CORS 源 | * | 前端跨域来源 |
| HEADLESS | browser.headless | true | 是否启用无头模式 |
| MAX_WORKERS | task.maxWorkers | 20 | 最大并发任务数 |
| TASK_TIMEOUT | task.defaultTimeout | 1200s | 任务默认超时时间 |
| LOG_LEVEL | log.level | info | 日志级别 |
运行时配置
系统支持在 Web 界面的「系统设置」页面实时调整以下参数：
- 浏览器设置：无头模式、空闲超时、页面加载超时
- 任务配置：任务超时、轮询超时、轮询间隔、最大并发
- API 设置：调用间隔、API 超时
- 日志设置：日志级别
配置变更自动持久化到 server/cache/data/settings.json。
📁 项目结构
web2api/
├── src/ # 前端源码
│ ├── views/ # 页面视图
│ │ ├── DashboardView.vue # 仪表盘
│ │ ├── TaskListView.vue # 任务列表
│ │ ├── TaskCreateView.vue # 创建任务
│ │ ├── CookieManageView.vue # Cookie 管理
│ │ └── SettingsView.vue # 系统设置
│ ├── components/ # 公共组件
│ ├── composables/ # 组合式函数
│ ├── stores/ # Pinia 状态管理
│ ├── api/ # API 封装
│ └── router/ # 路由配置
│
├── server/ # 后端源码
│ ├── src/
│ │ ├── app.ts # 主入口
│ │ ├── config/ # 配置系统
│ │ ├── platforms/ # 平台实现
│ │ │ ├── seedance/ # Seedance 平台
│ │ │ └── doubao/ # 豆包平台
│ │ ├── core/ # 核心模块
│ │ │ ├── task-manager.ts # 任务管理
│ │ │ ├── cookie-manager.ts # Cookie 管理
│ │ │ ├── polling-scheduler.ts # 轮询调度
│ │ │ └── browser-pool.ts # 浏览器池
│ │ └── routes/ # API 路由
│ └── cache/ # 运行时数据（自动创建）
│ ├── cookies/ # Cookie 文件
│ ├── data/ # 任务/设置数据
│ ├── downloads/ # 下载资源
│ └── logs/ # 日志文件
│
├── docs/ # 架构文档
│ ├── frontend-architecture.md
│ ├── backend-architecture.md
│ └── add-new-platform.md
│
└── images/ # 项目截图🔧 核心功能详解
任务状态机
pending ──► processing ──► completed
│
├──────────► failed
│
└──────────► cancelled
processing 阶段包含 polling 子状态（已提交到远程平台，正在轮询结果）Cookie 状态
active- 正常可用expired- 已过期banned- 账号被封rate_limited- 请求频率限制unknown- 状态未知
任务事件
每次状态变更都会记录 TaskEvent，包含：
from/to- 状态变更前后message- 事件描述timestamp- 时间戳
🔌 MCP 集成
web2api 内置了 Model Context Protocol (MCP) 服务端，允许任何支持 MCP 的客户端（Claude Desktop、WorkBuddy、Cursor 等）通过标准化协议调用平台 AI 能力。
传输协议
| 属性 | 值 |
|------|-----|
| 传输类型 | Streamable HTTP |
| 服务端地址 | http://localhost:8033/mcp |
| 协议版本 | 2024-11-05 |
| 服务名称 | web2api-mcp |
端点
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /mcp | JSON-RPC 请求（initialize、tools/list、tools/call、ping） |
| GET | /mcp | SSE 流式连接（心跳 15s，session 过期 30min） |
| DELETE | /mcp | 关闭 Session |
| GET | /api/mcp/resources/:type/:platform/:filename | 资源文件下载（支持 Range 请求） |
可用工具
系统会自动将已接入平台的操作暴露为 MCP Tool：
| 工具名 | 说明 |
|--------|------|
| seedance/generate-video | Seedance 文生视频 / 图生视频 |
| seedance/check-credits | 查询 Seedance 积分 |
| doubao/chat | 豆包 SSE 流式对话 |
| doubao/generate-image | 豆包文生图 |
| doubao/generate-video | 豆包视频生成 |
| doubao/generate-music | 豆包音乐生成 |
| system/list-tasks | 列出所有任务 |
| system/get-task | 查询单个任务详情 |
测试 MCP
使用 MCP Inspector 调试工具：
npx @modelcontextprotocol/inspector http://localhost:8033/mcp确保后端服务已启动（
cd server && pnpm dev），然后运行上述命令打开 Web 调试界面。
客户端配置
根据不同 MCP 客户端，在对应的配置文件中添加以下内容。
WorkBuddy（~/.workbuddy/mcp.json）：
{
"mcpServers": {
"web2api": {
"type": "streamableHttp",
"url": "http://localhost:8033/mcp"
}
}
}Claude Desktop（claude_desktop_config.json）：
{
"mcpServers": {
"web2api": {
"type": "streamableHttp",
"url": "http://localhost:8033/mcp"
}
}
}通用 Streamable HTTP 配置：
{
"mcpServers": {
"web2api": {
"transport": "streamable-http",
"url": "http://localhost:8033/mcp"
}
}
}配置后需要重启对应的 MCP 客户端使其生效。如需远程访问，将
localhost替换为服务器实际 IP 或域名。
📚 架构文档
| 文档 | 路径 | 说明 | |------|------|------| | 前端架构设计 | docs/frontend-architecture.md | 前端完整设计文档 | | 后端架构设计 | docs/backend-architecture.md | 后端完整设计文档 | | 添加新平台指南 | docs/add-new-platform.md | 9 步详细接入指南 |
🤝 贡献指南
欢迎提交 Issue 和 PR！在贡献代码前，请：
- 阅读 docs/add-new-platform.md 了解架构设计
- 遵循现有的代码风格和目录结构
- 确保通过所有测试
📄 许可证
🙏 致谢
- Vue.js - 渐进式 JavaScript 框架
- Hono - 超快的轻量级 Web 框架
- Playwright - 浏览器自动化工具
- Tailwind CSS - 实用优先的 CSS 框架