https://github.com/meetqy/acss-dnd

一款基于原子类 css 特性的 web 拖拽式编辑器(An web dnd editor on atomic css features)
https://github.com/meetqy/acss-dnd

atomic-css css daisyui drag-and-drop dragdrop tailwind tailwindcss template typescript vue

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/meetqy/acss-dnd
• Owner: meetqy
• License: mit
• Created: 2022-03-02T12:13:02.000Z (almost 3 years ago)
• Default Branch: dev
• Last Pushed: 2022-04-08T11:33:24.000Z (over 2 years ago)
• Last Synced: 2024-10-27T06:48:33.629Z (2 months ago)
• Topics: atomic-css, css, daisyui, drag-and-drop, dragdrop, tailwind, tailwindcss, template, typescript, vue
• Language: TypeScript
• Homepage: http://cuyang.me/acss-dnd/
• Size: 5.74 MB
• Stars: 23
• Watchers: 2
• Forks: 2
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        




**An web dnd editor on atomic css features**  

**一款基于原子类 css 特性的 web 拖拽式编辑器**



  🤖

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





## 🐶 特点

- 操作简单，只需要拖拽和选择

- 组件丰富，基础组件和业务组件

- css 类规范，基于 daisyui 的 class 类，不需要 ui 基础，也能创建出漂亮的页面

- 多种主题随意切换

- 响应式，生成的页面自动适配多端设备

- 导出代码的代码易读、符合 html 规范、tree 结构

## 🐭 安装

```sh

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

        ...

```

## 🐻‍❄️ 快捷键

![](https://cdn.cuyang.me/acss-dnd/keyboard.gif)

| 快捷键                | 作用                     |

| --------------------- | ------------------------ |

| `Shift` + `BackSpace` | 删除选中元素             |

| `Shift` + `ArrowUp`   | 向上移动选中元素         |

| `Shift` + `ArrowDown` | 向下移动选中元素         |

| `Shift` + `p`         | 查找选中元素的父级并选中 |

| `Shift` + `c`         | 查找选中元素的子级并选中 |

## 🐰 基础库

- [vue3](https://vuejs.org/)

- [vite](https://vitejs.dev/)

- [tailwind](https://tailwindcss.com/)

- [daisy ui](https://daisyui.com/)

## 🐼 提 Bug 或建议

- 打开链接 👉🏻 https://github.com/cu-yang/acss-dnd/issues/new/choose

- 选择对应模板

![](https://cdn.cuyang.me/acss-dnd/issues.png)

## 🦊 近期计划

**Github Project**: [https://github.com/cu-yang/acss-dnd/projects/1](https://github.com/cu-yang/acss-dnd/projects/1)