排版转化工具 | Typesetting Conversion Tool

一个功能强大的微信公众号文章排版转化工具，支持文件导入、富文本编辑、AI 智能美化和模板选择。

📥 下载

类型	获取方式
源码	点击页面右上角 "Code" → "Download ZIP"
Windows 应用	前往 Releases 下载 .exe 安装包

✨ 功能特性

• 📁 文件导入 - 支持拖拽上传 .txt、.md 文件，自动转换为 HTML 格式
• 🎨 富文本编辑 - 完整的编辑工具栏，支持加粗、斜体、下划线、标题、列表、引用等
• 🎯 一键复制 - 复制排版后的内容，直接粘贴到微信公众号后台
• 💎 精美模板 - 内置多种风格模板（商务蓝、科技紫、温暖橙、雅致青、极简灰等）
• ⚙️ 样式定制 - 自定义主色调、字体大小、行间距、字间距、标题样式
• 📱 手机预览 - 实时手机效果预览，所见即所得
• 导出功能 - 支持导出 HTML 格式内容

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装依赖

npm install

配置环境变量

复制 .env.example 为 .env.local：

cp .env.example .env.local

编辑 .env.local 配置你的 API Key（如需要 AI 功能）：

ANTHROPIC_API_KEY=your_api_key_here

获取 API Key: https://console.anthropic.com/

运行开发服务器

npm run dev

访问 http://localhost:3000

生产构建

npm run build
npm start

📖 使用说明

1. 导入文章 - 拖拽 .txt 或 .md 文件到上传区域，或点击选择文件
2. 编辑内容 - 使用富文本编辑器工具栏格式化内容
3. 选择模板 - 在左侧选择喜欢的样式模板
4. 自定义样式 - 在右侧调整主色调、行距、字体大小等
5. 预览效果 - 查看右侧手机预览效果
6. 导出/复制 - 点击导出按钮或复制内容到剪贴板

🛠 技术栈

• 框架: Next.js 16.1.6 (App Router, Turbopack)
• 编辑器: TipTap 富文本编辑器
• 样式: Tailwind CSS 4.2.1
• 图标: Lucide React
• 文件解析: mammoth (用于 docx 解析)
• AI: Anthropic Claude API (可选)

📦 打包发布

源码发布

# 清理构建缓存
rm -rf .next node_modules

# 压缩源码
zip -r typesetting-conversion-tool-source.zip . -x "node_modules/*" -x ".next/*" -x "*.git/*"

构建独立应用 (Windows .exe)

使用 Electron 打包：

# 安装 Electron
npm install --save-dev electron electron-builder concurrently wait-on

# 构建
npm run build
npm run package

📝 项目结构

typesetting-conversion-tool/
├── src/
│   ├── app/              # Next.js App Router 页面
│   │   ├── api/          # API 路由
│   │   ├── layout.tsx    # 根布局
│   │   └── page.tsx      # 主页面
│   ├── components/       # React 组件
│   │   ├── editor/       # 编辑器组件
│   │   ├── templates/    # 模板选择器
│   │   ├── file-import/  # 文件导入组件
│   │   └── export/       # 导出组件
│   ├── lib/              # 工具函数
│   │   ├── ai/           # AI 相关功能
│   │   └── beauty/       # 美化格式化
│   └── styles/           # 全局样式
├── public/               # 静态资源
├── package.json
├── next.config.js
├── tailwind.config.js
└── tsconfig.json

🎯 脚本命令

命令	说明
npm run dev	启动开发服务器
npm run build	构建生产版本
npm start	启动生产服务器
npm run lint	运行 ESLint 检查

📄 开源协议

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

📮 联系方式

如有问题或建议，请提 Issue 或联系作者。

🙏 致谢

感谢以下开源项目：

• TipTap - 强大的富文本编辑器
• Next.js - React 全栈框架
• Tailwind CSS - 实用优先 CSS 框架
• Lucide - 美观的图标库

---

Enjoy Typesetting! 🎉