这是个纯前端的网页搭建工具,不用搞后端,浏览器里直接用就行
能做这些事:
- 左边是组件库,有文本、标题、按钮、图片、卡片、容器,直接拖中间画布就行
- 点一下组件,右边能改文字、颜色、大小、对齐方式
- 按钮可以设置跳转链接,还能选新窗口打开
- 有两种布局模式:自由模式(想把组件拖哪就拖哪),自动模式(竖着按顺序排)
- 可以预览,看看做出来什么样
- 能导出HTML文件,直接就能部署
- 操作错了能撤销重做
- 界面适配手机电脑
界面用的shadcn/ui组件库,看起来比较现代简洁,没事自己做个简单网页用挺好
用Next.js 15 + React + TypeScript写的,样式用Tailwind CSS,UI用shadcn的组件
主要做了这些功能:
1. 拖拽功能
- 原生HTML5的拖放API,不用额外库
- 拖进去会自动生成唯一ID,存好配置
- 自由模式存坐标,自动模式存索引
2. 属性面板
- 选中组件就显示对应的属性
- 改完样式实时更新
- 颜色、文字、下拉框这些基础控件
3. 布局切换
- 自由模式用absolute定位
- 自动模式用block,垂直排
- 对齐、间距都能调
4. 预览和导出
- 预览弄了个弹窗,直接渲染看效果
- 导出HTML会把所有组件转成静态HTML+CSS
- 导出来的文件浏览器直接开就行
5. 状态管理
- 就用React的useState,没搞复杂的状态管理库
- 撤销重做用历史记录数组
- 选中状态单独存
界面还算好看吧,用shadcn的组件配合Tailwind的渐变,看起来挺现代的,虽然不如专业的建站工具功能多,但自己玩玩够用了