一款专为内容创作者打造的轻量级、高颜值可视化卡片制作工具。 v3.1 核心升级：智能分页、自动 Emoji、双导出引擎、Markdown 支持！
RedNote Card Gen 是一个基于 React 和 TypeScript 开发的在线工具，旨在帮助用户快速生成排版精美、风格独特的社交媒体配图（特别是小红书风格）。无需复杂的设计软件，通过简单的配置即可生成“干货清单”、“金句语录”、“知识拼图”等多种流行版式的高清图片。
- � 智能自动分页：不再需要手动计算字数！系统根据卡片尺寸（3:4 或 9:16）自动计算最佳字数，超长内容自动拆分为多页轮播图。
- ✨ 自动 Emoji 插入：根据上下文内容（美食、旅行、工作、情感等）智能匹配并插入 Emoji，让文字瞬间生动起来。
- 📝 Markdown 语法支持：直接输入 Markdown，自动渲染标题、列表、引用与加粗样式，写作更流畅。
- ** 自动草稿保存**：实时保存编辑内容到本地（LocalStorage），防误触丢失，随时恢复灵感。
- 智能分页重构：基于实际渲染高度进行分页，适配不同布局；保留手动
===分页；自动 Emoji 与分页联动 - 导出增强：支持
PNG/WebP/PDF，按需加载导出引擎，提供进度提示与失败重试 - 自定义组件：Logo 叠加（位置/大小/透明度）、水印叠加（文本/位置/透明度）
- 交互增强：新增
Undo/Redo历史栈与局部刷新；移动端抽屉编辑不影响全局 - 草稿管理：保存/载入/删除多个草稿版本，便于版本化编辑
- 模板管理：保存当前配置为模板，支持应用与删除，提升复用效率
- 文案优化：智能分页说明更新为“基于渲染高度自动分页”
- 🔄 双导出引擎 (Dual Engine)：
- html2canvas (标准)：兼容性好，速度快。
- html-to-image (高清)：SVG级渲染，完美解决生僻字乱码、复杂阴影丢失问题，画质更锐利。
- 🧠 智能排版 (Smart Layout)：根据字数自动计算最佳字号，让卡片永远版式平衡。
- 🎛️ 细粒度控制：新增行高、字间距、段后距、对齐方式的毫米级调节滑块。
- ⚡ PWA 支持：支持安装到手机/电脑桌面，离线也能用！拥有独立的启动图标和启动画面。
- 📱 移动端原生体验：重构的移动端抽屉式面板，支持触摸手势，操作更顺手。
- 🎨 丰富的主题系统：内置 15+ 款精心调配的配色方案（极简白、奶油风、红书红、黑曜石、赛博朋克等），支持纯色及渐变背景。
- 📐 6大核心布局：
- 干货清单：适合教程和步骤分享。
- 金句语录：突出文字情感。
- 名词解释：经典的词典卡片风格。
- 知识拼图：Grid 布局，适合碎片化知识。
- 手绘涂鸦：模拟手账风格，虚线边框与手写字体。
- 极简高级：留白艺术，适合高端氛围。
- 💧 水印保护：支持自定义水印文字、九宫格位置及透明度保护版权。
- 🔠 个性化字体库：集成了站酷高端黑、站酷快乐体、马山正毛笔、龙沧狂草等优质开源字体。
- 核心框架: React 18, TypeScript
- 构建工具: Vite
- 样式库: Tailwind CSS, PostCSS
- 图标库: Lucide React
- 导出核心: html2canvas + html-to-image (Dual Engine)
- 内容处理: react-markdown + Regex (Smart Paging)
- PWA: Vite PWA Plugin
- ⚡ New: 按需加载 (Lazy Loading)：图片导出引擎（html2canvas/html-to-image）动态加载，显著提升首屏加载速度。
- ♻️ Refactor: 组件原子化：控制面板拆解为
ContentTab和StyleTab，降低代码耦合度。 - 📱 Refactor: 移动端重构：抽离独立的
MobileDrawer组件，代码逻辑更清晰。
- ✨ New: 自动分页功能：根据尺寸（3:4/9:16）自动拆分长文。
- ✨ New: Emoji 智能增强：自动在列表和段落中插入相关表情符号。
- ✨ New: 内容处理器重构，支持更鲁棒的文本分析。
- ✨ New: 集成 html-to-image 高清导出引擎，解决乱码问题。
- ✨ New: Markdown 渲染支持。
- ✨ New: PWA 安装支持。
- ✨ New: 智能排版系统（行高/间距/字号自动计算）。
- ✨ 新增水印功能。
- ✨ 新增更多图片比例。
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run buildMIT