Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@biaogebusy
biaogebusy committed Jun 8, 2024
1 parent 2301316 commit ec24d4d
Showing 1 changed file with 24 additions and 17 deletions.
41 changes: 24 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,29 @@

## web builder

| 功能点 | 说明 |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout builder | 动态 layout，row 和 col 方向都可以添加组件，任意对齐方式，视频：[Layout 嵌套](https://www.bilibili.com/video/BV1pH4y1L7qk/?vd_source=f65b4e2d70ecc450290b6b1710c0ada5)、[动画配置](https://www.bilibili.com/video/BV17F4m157uP/?spm_id_from=pageDriver&vd_source=f65b4e2d70ecc450290b6b1710c0ada5) |
| 组件编辑 | 删除、复制 JSON、编辑组件数据、拖动上下排列 |
| 媒体库浏览 | 查看后台上传的媒体资源文件 |
| 边栏可拖拽 | 直接从边栏选择组件放入内容区 |
| 页面历史版本 | 当提交、清空、加载示例等覆盖操作时新增历史版本 |
| 选择示例页加载 | 加载示例页面到内容区 |
| 复制整个页面的 JSON | 可直接复制 json，部署到后台发布 |
| 切换全宽 | 方便大屏编辑，减少干扰 |
| 快速生成页面 | 根据一定的规则从组件库中生成页面 |
| 多主题切换预览 | 预览在多主题下的组件显示情况 |
| Builder 暗黑风格 | 支持切换浅色风格和暗黑风格，专注内容创作 |
| 内容区组件导航 | 边栏可通过导航查看组件，可上下拖动排序 |
| 页面预览 | 调转到新窗口查看真实的页面 |
| 响应式预览 | 可切换不同设备尺寸查看页面响应式排版 |
| 功能点 | 说明 |
| ------------------- | --------------------------------------------------------------------- |
| Layout builder | 动态 layout，基于 TailwindCss 的动态组件，支持静态数据和 API 数据来源 |
| 组件编辑 | 删除、复制 JSON、编辑组件数据、拖动上下排列 |
| 媒体库浏览 | 查看后台上传的媒体资源文件 |
| 边栏可拖拽 | 直接从边栏选择组件放入内容区 |
| 页面历史版本 | 当提交、清空、加载示例等覆盖操作时新增历史版本 |
| 选择示例页加载 | 加载示例页面到内容区 |
| 复制整个页面的 JSON | 可直接复制 json，部署到后台发布 |
| 切换全宽 | 方便大屏编辑，减少干扰 |
| 快速生成页面 | 根据一定的规则从组件库中生成页面 |
| 多主题切换预览 | 预览在多主题下的组件显示情况 |
| Builder 暗黑风格 | 支持切换浅色风格和暗黑风格，专注内容创作 |
| 内容区组件导航 | 边栏可通过导航查看组件，可上下拖动排序 |
| 页面预览 | 调转到新窗口查看真实的页面 |
| 响应式预览 | 可切换不同设备尺寸查看页面响应式排版 |

## 相关视频演示

- [Layout 嵌套](https://www.bilibili.com/video/BV1pH4y1L7qk/?vd_source=f65b4e2d70ecc450290b6b1710c0ada5)
- [GSAP 动画配置](https://www.bilibili.com/video/BV17F4m157uP/?spm_id_from=pageDriver&vd_source=f65b4e2d70ecc450290b6b1710c0ada5)
- TailwindCss 自定义组件[API 数据来源](https://www.bilibili.com/video/BV1ux4y1n7MA/?spm_id_from=333.999.0.0) | [静态数据来源](https://www.bilibili.com/video/BV1rf421R7He/?spm_id_from=333.999.0.0)
- [复制功能快速构建组件](https://www.bilibili.com/video/BV1nF4m1w7cs/?spm_id_from=333.999.0.0)

## 对应版本

Expand All @@ -107,7 +114,7 @@

## 安装 npm install

1. 代码下载或者 clone 项目到本地：`git clone git@github.com:biaogebusy/xinshi-ui.git`
1. 代码下载或者 clone 项目到本地：`git clone git@github.com:biaogebusy/web-builder.git`
2. 请使用 npm install 安装，严格安装 package-lock.json 锁版本安装，依赖较多，请多等待，使用 yarn 或者 pnpm 会有报错；

## 本地开发
Expand Down

0 comments on commit ec24d4d

Please sign in to comment.