Page Builder (可视化页面构建器)

这是一个基于 React/Next.js 的可视化页面设计器，支持拖拽排版、图层管理，并可将设计结果导出为 React 代码或 PNG 图片。

✨ 功能特点

• 可视化操作: 拖拽式界面，所见即所得。
• 图层管理: 支持文本、图片、形状等多种图层，可自由调整层级。
• 样式定制: 支持自定义颜色、渐变、圆角等丰富样式。
• 代码导出: 一键生成基于 Tailwind CSS 的 React 组件代码。
• 图片导出: 支持将设计好的页面直接导出为 PNG 图片。
• 灵活布局: 支持任意画布尺寸，适配桌面端、移动端及各类社交媒体尺寸。

🚀 快速开始

环境要求

• Node.js (建议 v18 或更高版本)
• npm 或 yarn

安装步骤

1. 进入项目目录并安装依赖：

   cd page-builder
   npm install

2. 启动开发服务器：

   npm run dev

3. 在浏览器中访问 http://localhost:3000 即可使用。

📂 项目结构

• app/: Next.js 页面路由和布局文件
• components/: React 组件源码
• public/: 静态资源文件

📌 使用说明

• 图片图层与形状图层都支持上传图片；导出代码时需要填写图片路径占位符（如 card-bg.jpg）。
• 自动保存会写入 IndexedDB（含图片），可能占用较多存储空间。
• 首次打开会恢复上次保存的画布尺寸与图层。
• 若图片为外链资源，导出 PNG 可能失败。

📄 开源协议

MIT