Skip to content

Visual-Editor是一个可视化拖拽编辑器,可拖拽左侧物料区组件,放置在中间画布中,并支持组件样式、属性、事件编辑。

Notifications You must be signed in to change notification settings

yifanle/visual-editor

Repository files navigation

       __     ___                 _   _____    _ _ _             
       \ \   / (_)___ _   _  __ _| | | ____|__| (_) |_ ___  _ __ 
        \ \ / /| / __| | | |/ _` | | |  _| / _` | | __/ _ \| '__|
         \ V / | \__ \ |_| | (_| | | | |__| (_| | | || (_) | |   
          \_/  |_|___/\__,_|\__,_|_| |_____\__,_|_|\__\___/|_|   
                                                           

Visual-Editor是一个可视化拖拽编辑器,可拖拽左侧物料区组件,放置在中间画布中,并支持组件样式、属性、事件编辑。
🔗 项目预览地址
也许您对这个项目很感兴趣,也想加入项目未来的发展,或者您也有奇妙的想法想加在这个项目上,或者想通过这样的项目来提升自己的技术,让自己的简历上填上一笔,都期待您参与进来,📡 欢迎私信骚扰

👓 效果图:

✨ 可以用它:

可视化搭建表单
低代码、可视化设计移动端、PC网页端页面设计

🧿 我们的不同(计划):

不止拖拽:
将实现自定义组件像画画一样简单!
丰富的社区内容:
敬请期待!

🔨 目前已经完成的功能:

  • 左侧物料区添加组件
  • 左侧物料区组件拖拽至中间画布
  • 画布内组件拖拽位置变动
  • 拖拽辅助线,自动对齐贴合
  • 画布标尺,测量线,画布拖拽
  • 撤销(ctrl+z)、恢复(ctrl+y)
  • JSON数据编辑和导出(2023年5月9日)
  • 实现清空画布功能并支持撤回(2023年5月10日)

🧬 技术栈:

前端:

  • vue3
  • TypeScript
  • pinia
  • vue-router

📂 前端项目目录介绍:

workflow-editor
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  ├─ scss
│  │  │  └─ element-plus.scss
│  │  └─ vue.svg
│  ├─ components  # 系统组件
│  │  ├─ admin    # 项目留存的admin系统的接口文件夹,
│  │  │  │        # 用于存放admin系统的组件
│  │  │  └─ menu
│  │  │     └─ index.vue
│  │  ├─ common   # 公用组件
│  │  │  └─ header
│  │  │     └─ index.vue
│  │  ├─ editor   # 编辑器组件
│  │  │  ├─ configArea  # 右侧属性编辑区
│  │  │  │  └─ index.vue
│  │  │  ├─ mainCanvas  # 中间画布
│  │  │  │  └─ index.vue
│  │  │  ├─ materials   # 左侧物料组件区
│  │  │  │  └─ index.vue
│  │  │  └─ weRender    # Item渲染组件
│  │  │     └─ index.vue
│  │  └─ svgIcon
│  │     └─ index.vue
│  ├─ interface         # Model类型
│  │  ├─ IDataModel.ts
│  │  ├─ IDragState.ts
│  │  ├─ IMaterialsData.ts
│  │  └─ IRenderItem.ts
│  ├─ layouts           # 项目布局,支持admin系统布局
│  │  ├─ admin.vue
│  │  ├─ editor.vue
│  │  └─ index.vue
│  ├─ main.ts           # 项目入口文件
│  ├─ mock              # jsonSchema 描述文件
│  │  ├─ data.json
│  │  └─ materials.json
│  ├─ pages             # 系统页面 admin扩展的页面将放在这里
│  │  ├─ 404.vue
│  │  ├─ about.vue
│  │  └─ index.vue
│  ├─ router            # 路由,目前为最简单的写法,需要用到时修改
│  │  └─ index.ts
│  ├─ utils             # 工具类们
│  │  ├─ EmitterUtil.ts
│  │  ├─ UseFocus.ts
│  │  ├─ useIcon.ts
│  │  ├─ UseItemDraggable.ts
│  │  └─ UseMenuDraggable.ts
│  └─ vite-env.d.ts
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

该项目在未来一段时间可能不会再更新了,但如果你依然感兴趣那么,可以联系我:QQ-2878725498

🧠 关于提交

1.fork项目
2.clone到本地
3.在自己clone的项目中

git add .
git commit -m "提交的内容"
git push -u origin main

点击pull request
每次requset之前请先pull原项目来更新合并自己的项目
如何更新fork来的项目

About

Visual-Editor是一个可视化拖拽编辑器,可拖拽左侧物料区组件,放置在中间画布中,并支持组件样式、属性、事件编辑。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published