Веб-редактор DnD на основе Atomic CSS

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

🤖 Онлайн-опыт: Gitee, онлайн-опыт: Github

🐶 Особенности

• Простота в использовании, требуется только перетаскивание и выбор.
• Богатый набор компонентов, включая базовые и бизнес-компоненты.
• Соблюдение стандартов CSS-классов, основанных на классах DaisyUI, что позволяет создавать красивые страницы без необходимости изучения основ UI.
• Возможность произвольного переключения между различными темами.
• Адаптация к различным устройствам благодаря отзывчивости.
• Генерируемый код легко читается, соответствует стандартам HTML и имеет древовидную структуру.

🐭 Установка

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

🐹 Структура проекта

Структура проекта включает следующие элементы:

• classname — библиотека UI CSS атомных классов.
• template — хранилище конфигураций шаблонов.
• constants — константы, кроме атомных классов библиотеки UI.
• packages — библиотеки.
  • template — все шаблоны.
• store — хранилище данных.
  • base — управление состоянием меню, шаблонов, боковой панели и других элементов, не связанных с редактором.
  • editor — состояние содержимого редактора.
  • classes — инструменты и методы для работы с классами classname.
• views — модули.
  • tpvw — предварительный просмотр шаблона.
  • main — внешний вид редактора.
  • editor — холст.
  • template — шаблон, выбранный из меню.
  • menu-bar — меню.
  • side-bar — боковая панель.
    • file-a — папка, соответствующая категории.
    • file-b — папка.
      ...

🐻‍❄️ Горячие клавиши

🐰 Базовые библиотеки

В проекте используются следующие библиотеки:

• Vue3.
• Vite.
• Tailwind.
• Daisy UI.

🦊 Планы на ближайшее время

Проект доступен на Github по ссылке: https://github.com/cu-yang/acss-dnd/projects/1.