MultiPub — 多平台内容发布工具

一次编辑，多平台适配，一键发布。

为内容创作者提供统一的编辑体验，通过 Content IR（中间表示） 解耦编辑与发布，经管道式适配引擎将同一内容自动转换为各平台原生格式，并实时预览效果。支持真实发布到微信公众号、知乎、B站、小红书——扫码登录后由 Playwright 浏览器自动化完成发布。

功能演示

哔哩哔哩：MultiPub一键发布多平台

核心能力

🎨 统一编辑器 — 基于 Tiptap (ProseMirror) 的富文本编辑器，支持标题、段落、图片、代码块、引用、列表、分割线、视频
🔄 Content IR 中间表示 — 编辑器与平台适配器完全解耦，新增平台无需修改核心代码
🔀 管道式适配引擎 — 可组合的转换步骤：过滤 → 标题降级 → 自动排版 → 标签生成
📱 多平台实时预览 — 分 Tab 展示各平台渲染效果，所见即所得
🤖 AI 润色 — 支持多模型（DeepSeek / 通义千问 / 智谱 GLM / Moonshot / Claude），一键优化文章
🚀 真实发布链路 — Playwright 浏览器自动化，无需手动操作网页即可发布到目标平台
📷 扫码登录 — 知乎、小红书支持 QR 码扫码登录，凭证自动持久化，一次登录持续使用
🔐 多凭证策略 — 公众号用 API Key，B站用 Cookie，小红书/知乎用扫码 + Cookie，各平台最优认证方式

目标平台

平台	输出格式	认证方式	发布方式	特点
公众号	富文本 HTML（内联样式）	API (AppID/AppSecret)	草稿 API	标题降级，强制内联样式，图片居中
知乎	Markdown	扫码登录 (Playwright)	浏览器自动化	保留原格式，代码块语言标注优化，支持图片上传
B站	HTML（专栏风格）	Cookie (SESSDATA)	专栏 API	视频嵌入支持，B站粉色主题
小红书	短文本 HTML（emoji 风格）	扫码登录 (Playwright)	浏览器自动化	长文压缩，emoji 增强，话题标签生成

项目结构

qny/
├── frontend/                  # React SPA
│   └── src/
│       ├── components/
│       │   ├── editor/        # Tiptap 编辑器（EditorShell, Toolbar, MetaEditor）
│       │   ├── preview/       # 分平台实时预览（Wechat, Zhihu, Bilibili, Xiaohongshu）
│       │   ├── publish/       # 发布面板 & 进度 & 扫码登录弹窗
│       │   └── layout/        # 三栏布局（AppLayout, TopBar）
│       ├── core/              # 核心逻辑（纯函数，无 UI 依赖）
│       │   ├── ir/            # Content IR 转换（Tiptap ↔ IR，schema 校验）
│       │   ├── adapters/      # 平台适配器（wechat, zhihu, bilibili, xiaohongshu）
│       │   ├── pipeline/      # 管道引擎 + 可复用步骤（过滤、排版、标签）
│       │   └── publish/       # 发布模拟器
│       ├── stores/            # Zustand 状态管理（editor, platform, publish）
│       ├── types/             # TypeScript 类型定义（ContentIR, PlatformAdapter）
│       └── styles/            # 全局样式 + 编辑器样式
├── backend/                   # Express 后端服务
│   └── src/
│       ├── routes/            # API 路由（drafts, publish, ai, media, xhs-auth, zhihu-auth）
│       ├── services/          # 业务逻辑
│       │   ├── storage.ts         # 草稿存储
│       │   ├── publish.ts         # 发布调度
│       │   ├── ai-polish.ts       # AI 润色
│       │   ├── wechat-api.ts      # 公众号 API
│       │   ├── wechat-publish.ts  # 公众号真实发布
│       │   ├── bilibili-api.ts    # B站 API
│       │   ├── bilibili-publish.ts# B站真实发布
│       │   ├── xiaohongshu-publish.ts # 小红书 Playwright 发布
│       │   ├── xhs-auth-service.ts    # 小红书扫码登录
│       │   ├── zhihu-publish.ts       # 知乎 Playwright 发布
│       │   └── zhihu-auth-service.ts  # 知乎扫码登录
│       └── models/            # 数据模型
├── docs/                      # 设计文档
│   ├── topics.md
│   ├── market-research.md
│   ├── requirement-breakdown.md
│   └── tech-design.md
└── DESIGN.md                  # 设计系统（色彩、字体、组件令牌）

架构设计

编辑器 (Tiptap)
    │
    ▼
Content IR ────── JSON 中间表示, 与平台无关
    │
    ▼
管道引擎 ──────── 过滤 → 标题降级 → 自动排版 → 标签生成
    │
    ▼
平台适配器 ────── wechat / zhihu / bilibili / xiaohongshu
    │
    ▼
PlatformOutput ── 各平台原生格式 (HTML / Markdown)
    │
    ├──► 实时预览 ── 分 Tab 展示各平台渲染效果
    │
    └──► 发布引擎 ── API 直连 / Playwright 浏览器自动化 ──► 目标平台

发布架构

每个平台采用最适合的发布策略：

                    ┌─ 公众号 ──► API 直连（draft API）
                    │
编辑器 → ContentIR ─┼─ B站   ──► API 直连（专栏 API，Cookie 鉴权）
                    │
                    ├─ 小红书 ──► Playwright 浏览器自动化（扫码登录）
                    │
                    └─ 知乎  ──► Playwright 浏览器自动化（扫码登录）

API 直连：速度快、稳定，适合有开放 API 的平台
浏览器自动化：模拟真实用户操作，适合无开放 API 或 API 受限的平台；使用 AI 视觉模型辅助页面分析和按钮定位

Content IR（内容中间表示）

ContentIR 是架构核心——编辑器只输出 IR，适配器只消费 IR，双方互不感知：

interface ContentIR {
  id: string;
  meta: {
    title: string;
    tags: string[];
    coverImage?: ImageAsset;
  };
  blocks: ContentBlock[];   // heading | paragraph | image | code | quote | list | divider | video
  createdAt: number;
  updatedAt: number;
}

管道式适配引擎

每个适配器是一组有序步骤的管道组合，步骤可复用：

// 公众号示例
const wechatPipeline = {
  steps: [
    filterUnsupportedBlocks(['video']),   // 过滤不支持块
    adjustHeadingLevels({ min: 3 }),       // 标题降级
    generateSummary(),                     // 生成摘要
  ],
};

新增平台的扩展方式

实现 PlatformAdapter 接口 + 注册即可，无需修改核心代码：

新建 core/adapters/new-platform.ts
实现 transform(ir) → PlatformOutput
在 core/adapters/index.ts 中 import 注册
新建预览组件 → 在 PreviewPanel 中添加 Tab
（可选）实现真实发布服务 → 在 backend/src/services/ 中创建发布模块

技术栈

层	技术
前端框架	React 19 + TypeScript
构建工具	Vite 8
编辑器	Tiptap (ProseMirror)
状态管理	Zustand
样式	Tailwind CSS 3
UI 组件	Radix UI + Lucide Icons
Markdown	unified + remark + remark-gfm
后端	Express 5 (TypeScript)
浏览器自动化	Playwright
AI 润色	OpenAI-compatible API / Anthropic API
AI 视觉	多模态视觉模型（页面分析 & 按钮定位）

快速开始

环境要求

Node.js >= 22
npm >= 10
（可选）Chromium 浏览器 — 用于知乎/小红书 Playwright 发布，首次运行时自动下载

安装

# 安装前端依赖
cd frontend && npm install

# 安装后端依赖
cd .. && npm install

配置

# 复制环境变量模板并编辑
cp backend/.env.example backend/.env

关键配置项：

变量	说明	必填
`WECHAT_APPID` / `WECHAT_APPSECRET`	公众号 API 凭证	发布到公众号时
`BILIBILI_SESSDATA` / `BILIBILI_BILI_JCT`	B站 Cookie 凭证	发布到 B站时
`AI_PROVIDER`	AI 润色提供商：`openai-compatible` / `anthropic`	使用 AI 润色时
`AI_API_KEY` / `AI_API_URL` / `AI_MODEL`	AI 润色模型配置	使用 AI 润色时
`AI_VISION_MODEL`	AI 视觉模型（页面分析用）	发布到小红书/知乎时
`XHS_CHROMIUM_PATH` / `ZHIHU_CHROMIUM_PATH`	Chromium 可执行文件路径	可选，默认自动下载
`XHS_HEADLESS` / `ZHIHU_HEADLESS`	设为 `false` 显示浏览器窗口	调试时

小红书/知乎登录：无需手动填写 Cookie！启动后在发布面板点击对应平台，扫码即可自动保存凭证。详见 backend/.env 中的详细注释。

运行

# 终端 1 — 后端（端口 3001）
npx tsx backend/src/index.ts

# 终端 2 — 前端（端口 5173）
cd frontend && npm run dev

脚本

# 前端
cd frontend
npm run dev          # 开发模式（HMR）
npm run build        # 生产构建
npm run preview      # 预览生产构建

# 后端
npx tsx backend/src/index.ts          # 启动
npx tsx watch backend/src/index.ts    # 热重载模式

API 接口

草稿管理

方法	路径	说明
GET	`/api/health`	健康检查
GET	`/api/drafts`	列出所有草稿
GET	`/api/drafts/:id`	获取单篇草稿
POST	`/api/drafts`	创建草稿
PUT	`/api/drafts/:id`	更新草稿
DELETE	`/api/drafts/:id`	删除草稿

发布 & 认证

方法	路径	说明
POST	`/api/publish`	发布到指定平台
GET	`/api/xhs-auth/status`	查询小红书登录状态
POST	`/api/xhs-auth/qrcode`	获取小红书登录二维码
GET	`/api/zhihu-auth/status`	查询知乎登录状态
POST	`/api/zhihu-auth/qrcode`	获取知乎登录二维码

AI

方法	路径	说明
POST	`/api/ai/polish`	AI 润色文章内容

媒体

方法	路径	说明
POST	`/api/media/upload`	上传媒体文件（图片等）

Releases

版本发布页面：GitHub Releases

版本命名

采用 v主版本.次版本.修订号 语义化版本（SemVer）：

主版本 — 不兼容的架构变更或平台适配接口大改
次版本 — 新功能（新增平台支持、新管道步骤、AI 能力）
修订号 — Bug 修复与小幅优化

更新日志

每个版本的详细变更记录见 Releases 页面，或查看本地 commit 历史。

Packages

从源码构建

本项目为源码分发，克隆后即可运行（无需发布到包管理器）：

git clone git@github.com:chstor/MultiPub.git
cd MultiPub
npm install && cd frontend && npm install && cd ..

Docker 镜像（推荐）

# 构建后端镜像
FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY backend/ ./backend/
# Playwright 依赖
RUN npx playwright install --with-deps chromium
EXPOSE 3001
ENV PORT=3001
CMD ["npx", "tsx", "backend/src/index.ts"]

# 构建
docker build -t multipub-backend .

# 运行（挂载 .env 配置）
docker run -p 3001:3001 -v $(pwd)/backend/.env:/app/backend/.env multipub-backend

前端为纯静态资源，可单独构建后部署到任意静态托管服务（Nginx、Vercel、Cloudflare Pages 等）。

未来计划

GitHub Container Registry 发布自动构建的 Docker 镜像
GitHub Actions CI/CD 自动化 release
桌面端打包（Electron / Tauri）

设计系统

基于 DESIGN.md，采用 Anthropic / claude.ai 的暖调编辑风格：

色彩 — 奶油底色 (#faf9f5) + 珊瑚主色 (#cc785c) + 深海军蓝 (#181715)
字体 — 衬线体 display (Cormorant Garamond) + 人文无衬线 body (Inter)
圆角 — 层级分明：xs(4) → sm(6) → md(8) → lg(12) → xl(16) → pill(9999)

License

MIT

Navigation Menu

Repository navigation

About

Repository files navigation

MultiPub — 多平台内容发布工具

功能演示

核心能力

目标平台

项目结构

架构设计

发布架构

Content IR（内容中间表示）

管道式适配引擎

新增平台的扩展方式

技术栈

快速开始

环境要求

安装

配置

运行

脚本

API 接口

草稿管理

发布 & 认证

AI

媒体

Releases

版本命名

更新日志

Packages

从源码构建

Docker 镜像（推荐）

未来计划

设计系统

License

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
backend		backend
docs		docs
frontend		frontend
.gitignore		.gitignore
DESIGN.md		DESIGN.md
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

MultiPub — 多平台内容发布工具

功能演示

核心能力

目标平台

项目结构

架构设计

发布架构

Content IR（内容中间表示）

管道式适配引擎

新增平台的扩展方式

技术栈

快速开始

环境要求

安装

配置

运行

脚本

API 接口

草稿管理

发布 & 认证

AI

媒体

Releases

版本命名

更新日志

Packages

从源码构建

Docker 镜像（推荐）

未来计划

设计系统

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages