前端工具箱

基于 Next.js + React + Tailwind CSS 构建的前端开发工具集合，提供多种实用的开发工具。

🚀 功能特性

✅ 已实现功能

Markdown 编辑器

基于 Vditor 的强大 Markdown 编辑和预览工具

• 实时预览和语法高亮
• 强制高性能模式 (300ms 防抖延迟)
• 文件导入导出
• 内容复制和清空
• 优化性能，彻底解决打字卡顿问题

HTML 编辑器

功能完整的在线 HTML 代码编辑和预览工具

• 实时预览 (iframe 沙盒环境)
• 多种视图模式 (分屏/编辑/预览)
• 代码语法高亮
• 行号显示和字体大小调节
• 代码格式化功能
• 全屏编辑模式
• 文件导入导出

Word 转 Markdown

强大的Word文档转换工具，支持图片处理和批量下载

• 支持 .docx 格式文档上传
• 自动提取并转换文档中的图片
• 实时 Markdown 预览
• 图片自动保存到 img 文件夹
• 一键下载包含 Markdown 和图片的压缩包
• 转换过程警告提示
• 支持复制 Markdown 内容到剪贴板

Mermaid 图表编辑器

基于 Mermaid.js 的图表创建工具

• 支持流程图、时序图、甘特图等多种图表类型
• 实时预览和语法高亮
• PNG/SVG 格式导出
• 代码导入导出功能

Graphviz 图表编辑器

使用 DOT 语言创建复杂图形的工具

• 支持有向图、无向图、网络图等
• 实时渲染和预览
• PNG/SVG 格式导出
• 多种布局算法支持

🛠️ 技术栈

• 框架: Next.js 15.1.8
• UI 库: React 19
• 样式: Tailwind CSS
• 编辑器: Vditor
• 图标: Lucide React
• 语言: TypeScript
• 包管理: pnpm
• 图表库: Mermaid.js, Graphviz (@hpcc-js/wasm)
• 文档转换: Mammoth.js, Turndown
• 文件处理: JSZip, html2canvas

📦 安装和运行

环境要求

• Node.js 18+
• pnpm

安装依赖

pnpm install

启动开发服务器

pnpm dev

应用将在 http://localhost:3000 启动

🎯 使用指南

Markdown 编辑器

1. 访问首页，点击 "Markdown 预览" 卡片
2. 在编辑区域输入 Markdown 内容
3. 实时查看预览效果
4. 享受强制高性能模式的流畅体验
5. 工具栏功能：
   • 高性能模式: 显示当前性能状态
   • 导入/导出: 文件操作
   • 复制/清空: 内容操作

HTML 编辑器

1. 访问首页，点击 "HTML 预览" 卡片
2. 在左侧编辑区域输入 HTML 代码
3. 右侧会实时显示预览效果
4. 使用视图模式切换 (分屏/编辑/预览)
5. 工具栏功能：
   • 格式化: 自动格式化 HTML 代码
   • 全屏: 进入/退出全屏模式
   • 导入/导出: 文件操作
   • 行号: 切换行号显示
   • 字体: 调整字体大小

Word 转 Markdown

1. 访问首页，点击 "Word 转 Markdown" 卡片
2. 点击 "上传Word文档" 按钮选择 .docx 文件
3. 等待转换完成，查看转换结果和警告信息
4. 在左侧编辑 Markdown 源码，右侧实时预览
5. 工具栏功能：
   • 复制Markdown: 将内容复制到剪贴板
   • 下载压缩包: 下载包含 Markdown 文件和图片的 ZIP 包
6. 支持的转换内容：
   • 文本格式：标题、段落、粗体、斜体
   • 图片：自动提取并保存到 img 文件夹
   • 表格：转换为 Markdown 表格格式
   • 列表：有序和无序列表

Mermaid 图表编辑器

1. 访问首页，点击 "Mermaid 图表" 卡片
2. 在左侧编辑区域输入 Mermaid 代码
3. 右侧会实时显示图表预览
4. 工具栏功能：
   • 导入/导出代码: 文件操作
   • 导出PNG/SVG: 图片格式导出

Graphviz 图表编辑器

1. 访问首页，点击 "Graphviz 图表" 卡片
2. 在左侧编辑区域输入 DOT 语言代码
3. 右侧会实时渲染图表
4. 工具栏功能：
   • 导入/导出代码: 文件操作
   • 导出PNG/SVG: 图片格式导出

响应式设计

• 桌面端：侧边栏固定显示
• 移动端：点击左上角菜单按钮显示/隐藏侧边栏