13 Star 77 Fork 11

meetqy / acss-dnd

加入 Gitee
与超过 1000 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

An web dnd editor on atomic css features
一款基于原子类 css 特性的 web 拖拽式编辑器

🤖 在线体验 Gitee · 🎡 在线体验 Github

🐶 特点

  • 操作简单,只需要拖拽和选择
  • 组件丰富,基础组件和业务组件
  • css 类规范,基于 daisyui 的 class 类,不需要 ui 基础,也能创建出漂亮的页面
  • 多种主题随意切换
  • 响应式,生成的页面自动适配多端设备
  • 导出代码的代码易读、符合 html 规范、tree 结构

🐭 安装

git clone https://github.com/cu-yang/acss-dnd.git
yarn
yarn dev

🐹 项目结构

- classname  # ui库css原子类
- template   # 存放模板配置
- contants   # 除了ui库原子类的常量
- packages   # 库
  - template                # 所有的模板
- store
    - base                  # menu、template、sidebar状态管理,编辑器以外的状态
    - editor                # 编辑器中内容的状态
    - classes               # classname操作的工具类方法
- views      # 模块
    - tpvw                  # 模板预览
    - main                  # 编辑器外部的样式
    - editor                # 画布
    - template              # 模板 选中菜单,弹出对应的template
    - menu-bar              # 菜单
    - side-bar              # 属性操作
        - file-a            # 一个文件夹相当于一个分类
        - file-b
        ...

🐻‍❄️ 快捷键

快捷键 作用
Shift + BackSpace 删除选中元素
Shift + ArrowUp 向上移动选中元素
Shift + ArrowDown 向下移动选中元素
Shift + p 查找选中元素的父级并选中
Shift + c 查找选中元素的子级并选中

🐰 基础库

🐼 提 Bug 或建议

🦊 近期计划

Github Project: https://github.com/cu-yang/acss-dnd/projects/1

简介

acss-dnd(atomic css drag and drop) 是一款基于 atomic css 特性,开发的 web 拖拽式网页编辑器。 展开 收起
取消

发行版

暂无发行版

acss-dnd

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/meetqy/acss-dnd.git
git@gitee.com:meetqy/acss-dnd.git
meetqy
acss-dnd
acss-dnd
dev

搜索帮助

E71a60c3 8189591 Df7b7c6b 8189591