{"id":18160176,"url":"https://github.com/meetqy/acss-dnd","last_synced_at":"2026-03-27T07:39:00.990Z","repository":{"id":42436842,"uuid":"465291488","full_name":"meetqy/acss-dnd","owner":"meetqy","description":"一款基于原子类 css 特性的 web 拖拽式编辑器(An web dnd editor on atomic css features)","archived":false,"fork":false,"pushed_at":"2022-04-08T11:33:24.000Z","size":6019,"stargazers_count":22,"open_issues_count":19,"forks_count":2,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-05-01T13:02:39.888Z","etag":null,"topics":["atomic-css","css","daisyui","drag-and-drop","dragdrop","tailwind","tailwindcss","template","typescript","vue"],"latest_commit_sha":null,"homepage":"http://cuyang.me/acss-dnd/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meetqy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-02T12:13:02.000Z","updated_at":"2025-03-07T03:27:41.000Z","dependencies_parsed_at":"2022-08-25T10:11:43.607Z","dependency_job_id":null,"html_url":"https://github.com/meetqy/acss-dnd","commit_stats":null,"previous_names":["cu-yang/acss-dnd"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetqy%2Facss-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetqy%2Facss-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetqy%2Facss-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetqy%2Facss-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meetqy","download_url":"https://codeload.github.com/meetqy/acss-dnd/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252846137,"owners_count":21813382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-css","css","daisyui","drag-and-drop","dragdrop","tailwind","tailwindcss","template","typescript","vue"],"created_at":"2024-11-02T08:07:38.860Z","updated_at":"2025-10-16T03:01:51.540Z","avatar_url":"https://github.com/meetqy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg style=\"width: 300px\" src='https://cdn.cuyang.me/acss-dnd/logo.png?acss-dnd'\u003e\n\n**An web dnd editor on atomic css features**  \n**一款基于原子类 css 特性的 web 拖拽式编辑器**\n\n\u003cp align='center'\u003e\n  🤖\n  \u003ca href='https://meetqy.gitee.io/acss-dnd'\u003e在线体验 Gitee\u003c/a\u003e · \u003cspan\u003e🎡\u003c/span\u003e \u003ca href='https://cuyang.me/acss-dnd'\u003e在线体验 Github\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/div\u003e\n\n## 🐶 特点\n\n- 操作简单，只需要拖拽和选择\n- 组件丰富，基础组件和业务组件\n- css 类规范，基于 daisyui 的 class 类，不需要 ui 基础，也能创建出漂亮的页面\n- 多种主题随意切换\n- 响应式，生成的页面自动适配多端设备\n- 导出代码的代码易读、符合 html 规范、tree 结构\n\n## 🐭 安装\n\n```sh\ngit clone https://github.com/cu-yang/acss-dnd.git\nyarn\nyarn dev\n```\n\n## 🐹 项目结构\n\n```\n- classname  # ui库css原子类\n- template   # 存放模板配置\n- contants   # 除了ui库原子类的常量\n- packages   # 库\n  - template                # 所有的模板\n- store\n    - base                  # menu、template、sidebar状态管理，编辑器以外的状态\n    - editor                # 编辑器中内容的状态\n    - classes               # classname操作的工具类方法\n- views      # 模块\n    - tpvw                  # 模板预览\n    - main                  # 编辑器外部的样式\n    - editor                # 画布\n    - template              # 模板 选中菜单，弹出对应的template\n    - menu-bar              # 菜单\n    - side-bar              # 属性操作\n        - file-a            # 一个文件夹相当于一个分类\n        - file-b\n        ...\n```\n\n## 🐻‍❄️ 快捷键\n\n![](https://cdn.cuyang.me/acss-dnd/keyboard.gif)\n\n| 快捷键                | 作用                     |\n| --------------------- | ------------------------ |\n| `Shift` + `BackSpace` | 删除选中元素             |\n| `Shift` + `ArrowUp`   | 向上移动选中元素         |\n| `Shift` + `ArrowDown` | 向下移动选中元素         |\n| `Shift` + `p`         | 查找选中元素的父级并选中 |\n| `Shift` + `c`         | 查找选中元素的子级并选中 |\n\n## 🐰 基础库\n\n- [vue3](https://vuejs.org/)\n- [vite](https://vitejs.dev/)\n- [tailwind](https://tailwindcss.com/)\n- [daisy ui](https://daisyui.com/)\n\n## 🐼 提 Bug 或建议\n\n- 打开链接 👉🏻 https://github.com/cu-yang/acss-dnd/issues/new/choose\n- 选择对应模板\n\n![](https://cdn.cuyang.me/acss-dnd/issues.png)\n\n## 🦊 近期计划\n\n**Github Project**: [https://github.com/cu-yang/acss-dnd/projects/1](https://github.com/cu-yang/acss-dnd/projects/1)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeetqy%2Facss-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeetqy%2Facss-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeetqy%2Facss-dnd/lists"}