CONTENT STUDIO · 码上排

我做了一个内容排版系统
从此写公众号不用再和样式较劲

前台编辑器 + 后台管理，专注公众号排版

好久没更新了。这段时间没闲着——我把一个念叨了很久的想法真正做了出来：一个专注内容排版的编辑器系统「码上排」。

起因很简单：每次在公众号后台排版都要和内联样式、复制丢格式、图文卡片死磕，实在太费劲。于是我决定自己动手，把「写作」和「排版」这件事一次性做顺。今天就借这篇文章，认真记录一下它的前后台功能。

🎯 它想解决什么问题

复制丢样式：公众号会过滤外部 CSS/class，样式必须内联，普通编辑器复制过去就乱。

排版太费时：标题、卡片、引用、分隔线，每篇都要在后台一点点手动调。

草稿易丢：换设备、断网、忘保存，辛苦写的稿子说没就没。

✨ 一句话介绍

「码上排」= 专注公众号的内容编辑器
写完即排好，
一键复制到公众号后台不丢格式

离线优先本地存草稿历史版本Web + 桌面端

🧩 整体架构

① 前台编辑器（content-studio）

用户真正写作、排版、导出的地方，Web 与桌面端同一套代码。

② 终端 API（content-studio-api）

账号、云端草稿、会员与样式片段权益，与主业务系统解耦。

③ 后台管理（admin-web + admin-serv）

运营侧：样式片段库、模版管理、用户与内容运营。

④ 宣传官网（content-studio-site）

落地页、模版橱窗、功能与定价说明。

🖥️ 前台：写得爽，导出即用

▸ 所见即所得富文本
基于 Tiptap 3 / ProseMirror，标题、引用、列表、卡片随手就来。

▸ 一键复制到公众号
输出内联样式 HTML，公众号会过滤外部 CSS，内联样式复制过去不丢格式。

▸ 离线优先 + 本地存储
桌面端用 SQLite、Web 端用 IndexedDB，草稿和历史版本都在本地，断网照写。

▸ 一套代码，双端运行
Web 端随开随用，桌面端（Win/Mac/Linux）基于 Tauri 2 打包。

⚙️ 后台：账号、草稿、样式库

账号体系：邮箱注册 / 登录 / 登出，图形验证码，JWT + Redis 会话。

云端草稿：草稿增删改查 + 历史版本追加，多端同步不怕丢。

样式片段库：分类管理可复用的排版片段，支持会员 / 单品购买解锁。

运营管理端：Vue 3 后台，管样式模版、用户、内容与权益。

🛠️ 技术栈

前端：React 19 + Vite 5 + TypeScript + Tailwind + Radix UI + Tiptap 3

桌面：Tauri 2（Rust）+ SQLite

后端：Go 1.24 + Gin + GORM + MySQL + Redis + JWT

官网 / 后台：Next.js（App Router）/ Vue 3 + Vite

🔗 立即体验

官网 · 了解与模版橱窗

www.maspai.com

编辑器 · 打开即用

app.maspai.com

⚠️ 现状说明

实话实说，目前还有个短板：域名尚未备案，服务器暂放在海外，所以国内访问速度和稳定性可能不太理想，偶尔会慢或打不开。

这是现阶段的临时方案，后续会考虑迁移到国内并完成备案，把访问体验做扎实。先记录在这，也欢迎大家包涵与反馈。

💡 顺便说一句

你现在看到的这篇排版工整的推文，
正是用「码上排」排出来的 😉
卡片、分隔、配色，一次搞定，复制即发。

好久没发，这次认真记录 ✍️

如果这套东西对你有点启发，
点个关注，后续会持续分享
开发过程、踩过的坑和更新进度。

长按识别 · 关注我，一起把工具做顺手