由大模型编写的基于nextjs的前端工具箱，包含markdown预览，html预览，mermaid预览等功能.zip

# 前端工具箱 基于 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 ### 安装依赖 ```bash pnpm install ``` ### 启动开发服务器 ```bash 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**: 图片格式导出 ### 响应式设计 - 桌面端：侧边栏固定显示 - 移动端：点击左上角菜单按钮显示/隐藏侧边栏