WX-Typesetting

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #llm #android #deep-learning #linux #docker #nodejs #kubernetes #vue #pytorch

(★ 35)

基于开源skill(gzh-design-skill)开发的公众号文章AI智能排版工作台(网站)，把 Markdown 一键排成可直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 主题生成器 + 双关卡校验

WX-Typesetting Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🤖 AI 智能排版工作台

<img src="./public/images/1.png" alt="排版工作台概览" width="800" />
 
 Ai智能排版工作台，6 套内置主题 + 自定义主题一键切换

<img src="./public/images/2.png" alt="主题选择与自定义" width="800" />
 
 通过文字描述或者上传参考图生成自定义主题

这是一个**纯前端**的**公众号文章 AI 智能排版网站**。

输入 Markdown / 富文本文章，选择排版主题，AI 自动生成符合微信公众号编辑器规范的 HTML，直接粘进公众号编辑器的精致 HTML —— 6 套精选主题 + 自定义主题生成器 + 双关卡校验

网站地址：www.wxtype.top/

整个项目是基于**摸鱼小李和甲木**开发的开源公众号排版skill(**gzh-design-skill**)
参考地址：https://github.com/isjiamu/gzh-design-skill

**网站轻量化处理，无需登录，无需服务器，本地即可直接使用**。

## ✨ 特性

- **🎨 6 套内置排版主题**：摸鱼绿、红白色系、石墨极简风、留白禅意风、摸鱼票据风、橄榄手记，覆盖深度分析、教程、创意评测等多种题材
- **🧠 AI 驱动排版**：接入 DeepSeek / Kimi 大模型，根据选中的主题组件库将 Markdown 转换为精美的公众号 HTML
- **🎛️ 自定义主题生成**：通过**文字描述或上传参考图**，AI 自动生成专属主题组件库并保存到本地复用
- **🖼️ 图床上传**：内置 ImgBB 图床接入，富文本 / Markdown 双编辑器均支持上传本地图片，自动生成图片链接插入光标处
- **📝 富文本 + Markdown 双编辑器**：左侧 Tiptap 富文本编辑（支持 AI 文案生成，可收起扩大中间区域），中间 Markdown 编辑（18 种快捷语法按钮）
- **👁️ 实时预览**：排版结果在右侧面板实时流式展示，所见即所得
- **📋 一键复制**：生成结果可通过 Clipboard API 一键复制，直接粘贴到公众号编辑器
- **✅ 合规校验**：内置 15 项微信编辑器和半角标点检测，确保粘贴后样式不丢失
- **🔒 隐私安全**：所有数据（文章/主题/Key）全部本地存储，不上传任何服务器。API Key 使用 AES + 浏览器指纹加密
- **🌓 UI 换肤**：网站整体布局支持 6 种主题风格一键切换
- **📖 排版历史**：自动保存每次排版记录，支持预览、复制、删除

## 🖼️ 效果预览

<img src="./public/images/4.jpg" alt="摸鱼绿主题" width="800" />
 
 摸鱼绿主题

<img src="./public/images/5.jpg" alt="红白色系主题" width="800" />
 
 红白色系主题

<img src="./public/images/6.jpg" alt="橄榄手记" width="800" />
 
 橄榄手记

<img src="./public/images/7.png" width="260" style="margin:0 6px" />
 <img src="./public/images/8.png" width="260" style="margin:0 6px" />
 <img src="./public/images/9.png" width="260" style="margin:0 6px" />
 
 石墨极简风、留白禅意风、摸鱼票据风

## 🏗️ 技术栈

| 技术 | 用途 |
|------|------|
| React 19 + TypeScript | 前端框架 |
| Vite 8 | 构建工具 |
| TailwindCSS 3 | 样式框架 |
| Zustand 5 | 状态管理 |
| Tiptap 3 | 富文本编辑器 |
| Dexie.js 4 | IndexedDB 本地数据库 |
| Turndown 7 | HTML → Markdown 转换 |
| markdown-it | Markdown → HTML 渲染 |
| modern-screenshot | 预览截图导出 |
| CryptoJS 4 | API Key 加密存储 |

## 🚀 快速开始

### 环境要求

- Node.js ≥ 20
- npm / pnpm / yarn

### 安装与运行

```bash
# 克隆项目
git clone https://github.com/your-username/wx-typeseting.git
cd wx-typeseting

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```
启动服务后直接本地访问，所有数据都存你本地，没有数据安全的担忧
浏览器打开 `http://localhost:5173`。
当然你也可以将项目部署到服务器进行访问

### 配置 API Key

1. 点击右上角 **API 配置** 按钮
2. 选择供应商（DeepSeek / Kimi）和模型，配置API key。配置kimi主要是通过参考图生成自定义主图需要识图的模型，如不需要自定义主题是不用配置kimi
3. 输入 API Key，点击保存
4. API Key 使用浏览器指纹加密后存储在 `localStorage`，不上传服务器（所有数据都不上传，统统存在本地）
5. 所有数据存你本地，你的APIkey放心配置，但有个缺点就是**清除浏览器缓存的时候不要选择清理Cookie** ,如清理cookie所有配置信息和排版历史记录都会被清掉，需重新配置API等信息

 <img src="./public/images/10.png" alt="本地存储说明" />
 
 Cookie选项不要选择

> 💡 **推荐配置**：
> - **排版渲染**：DeepSeek V4 Flash（便宜快速，适合文章排版）
> - **图片识别 / 自定义主题参考图**：Kimi K2.5（支持视觉识图）

## 📂 项目结构

```
wx-typeseting/
├── public/themes/               # 主题系统
│   ├── SKILL.md                #   AI 排版核心 Skill 指令
│   ├── theme-index.md          #   主题索引与选择决策表
│   ├── theme-generator.md      #   自定义主题生成器规则
│   ├── common-components.md    #   通用组件库（代码块/图片/标签标题/占位板块）
│   ├── format-normalize.md     #   格式归一化（Word/PDF/网页 → Markdown）
│   ├── eval-cases.md           #   主题效果校验用例
│   ├── theme-moyu-green.md     #   摸鱼绿主题组件库
│   ├── theme-red-white.md      #   红白色系主题组件库
│   ├── theme-graphite-minimal.md #  石墨极简风主题组件库
│   ├── theme-zen-whitespace.md #   留白禅意风主题组件库
│   ├── theme-moyu-ticket.md    #   摸鱼票据风主题组件库
│   └── theme-olive-journal.md  #   橄榄手记主题组件库
├── src/
│   ├── components/
│   │   ├── layout/             #   布局组件（TopBar / LeftPanel / MiddlePanel / RightPanel）
│   │   ├── editor/             #   编辑器组件（RichTextEditor / MarkdownEditor / Toolbar / ImgbbPrompt）
│   │   └── topbar/             #   顶栏弹出组件（ApiKeyDialog / CustomThemeDialog / HistoryDialog / BalanceAlert）
│   ├── store/                  #   Zustand 状态管理（editor / theme / settings / history）
│   ├── lib/
│   │   ├── llm/                #   LLM 客户端（providers / client / promptBuilder）
│   │   ├── storage/            #   本地存储（IndexedDB / AES 加密 / 文章/主题/历史 CRUD / 图床上传）
│   │   ├── themes/             #   主题加载与缓存
│   │   ├── validation/         #   微信合规校验 / CSS 净化
│   │   ├── clipboard/          #   剪贴板 API / 文件下载
│   │   └── markdown/           #   HTML ↔ Markdown 双向转换
│   ├── styles/                 #   全局样式 + 6 套 UI 换肤主题
│   └── types/                  #   TypeScript 类型定义
├── scripts/                    #   辅助脚本（docx 提取、HTML 校验等）
├── index.html
├── vite.config.ts
├── tailwind.config.js
└── package.json
```

## 🎨 内置主题

| 主题 | 主色 | 适用场景 |
|------|------|---------|
| 🟢 摸鱼绿 | `#059669` | 教程、测评、清单、工具盘点（默认推荐） |
| 🔴 红白色系 | `#DC2626` | 深度分析、观点、力量感话题 |
| ⚫ 石墨极简风 | `#52525B` | 设计、科技评论、专业观点 |
| 🍃 留白禅意风 | `#4A5D52` | 禅意冥想、极简生活、深度随笔 |
| 🎫 摸鱼票据风 | `#059669` | 测评、工具对比、创意评测 |
| 🫒 橄榄手记 | `#1E1F23` | 内刊手记、深度评测、案例复盘 |

> 此外，可通过**文字描述**或**上传参考图**让 AI 生成专属自定义主题。

## 📖 使用指南

### 基本排版流程

1. **输入内容**：在左侧面板粘贴富文本（含格式粘贴），可以通过AI生成，点击「转换为 Markdown」；或直接在中间面板输入 Markdown
2. **选择主题**：顶部卡片选择一个排版主题
3. **一键排版**：点击「排版渲染」按钮，AI 开始流式生成
4. **预览 & 复制**：右侧面板实时预览，确认后点击「复制到公众号」

### AI 文案生成

左侧面板下方的 AI 输入框可以直接生成公众号文章：

- 输入文章主题 / 关键词描述
- AI 流式生成文章 HTML
- 生成结果自动填入左侧编辑器

### 图床配置与上传

1. 点击左侧面板底部 **配置图床API** 按钮（已配置后显示「已配置图片API」）
2. 注册 [ImgBB](https://imgbb.com/) 获取免费 API Key 并填入
3. 可选设置图片过期时长（6 小时 / 1 天 / 3 天 / 自定义天数，默认无限时长）
4. 之后点击编辑器工具栏的**图片**按钮即可上传本地图片：
   - **富文本模式**：上传成功后图片直接插入编辑器
   - **Markdown 模式**：自动在光标处插入 `![](https://raw.githubusercontent.com/pwping/WX-Typesetting/main/图片链接)` 语法
5. 图片上传到 ImgBB 图床，链接为原图直链，可直接用于公众号文章

> 图片属于您的隐私文件，建议自行注册图床账号来管理图片。

### 自定义主题

1. 点击顶部 **➕ 自定义主题**
2. 选择生成方式：
   - **文字描述**：描述你想要的配色、风格、氛围
   - **参考图**：上传一张现有的排版截图
3. AI 自动分析并生成完整主题组件库
4. 实时预览，满意后保存
5. 新主题自动出现在顶部选择卡片

### 快捷 Markdown 语法

中间面板支持 18 种快捷语法按钮：标题 H1-H3 / 粗体 / 斜体 / 高亮 / 下划线 / 删除线 / 链接 / 引用 / 列表 / 代码 / 图片 / 分割线 / 表格 等。

## 🛡️ 数据隐私（所有数据存本地）

- ✅ 所有文章数据存储在本地 IndexedDB
- ✅ 排版历史存储在本地 IndexedDB
- ✅ 自定义主题存储在本地 IndexedDB
- ✅ API Key / 图床 Key 使用 AES（PBKDF2 + 浏览器指纹 + 随机盐）加密后存储在 localStorage
- ✅ **不上传任何数据到服务器**（文章内容本地处理；仅图片上传至您自行配置的 ImgBB 图床）

## 📦 构建部署

```bash
# 生产构建
npm run build

# 预览构建结果
npm run preview
```

构建产物在 `dist/` 目录，可直接部署到任何静态文件服务器。

## ⭐ Star History

如果这个项目帮到了你，点个 Star 支持一下～

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 开源协议

本项目采用 GNU AGPL-3.0 协议，要点：

1、必须署名 — 保留版权与联名署名声明
2、衍生品必须开源 — 任何修改版本、Fork、二次分发，必须以 AGPL-3.0（或兼容协议）公开发布，提供完整源代码
3、网络服务也要开源 — 即使只是把修改版本部署成 SaaS / Web 服务给别人用而不分发代码，也要公开源代码（这是 AGPL 区别于 GPL 的核心）
4、不允许闭源、专有化、仅付费分发

WX-Typesetting

WX-Typesetting Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

WX-Typesetting

WX-Typesetting Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README