Appearance
Структура проекта
bash
.
├── .vscode/
│ └── settings.json # настройки VSCode
├── assets/
│ └── css/
│ └── main.css # глобальные стили, импорты из Tailwind CSS и Nuxt UI
├── components/
│ ├── common/
│ │ ├── ActionButton.vue # универсальная кнопка действия с выпадающим меню
│ │ ├── BaseForm.vue # компонент генератора формы CRUD на основе конфигурации
│ │ ├── BaseFormItemWrapper.vue # обёртка полей формы с заголовками и отступами
│ │ ├── Breadcrumbs.vue # компонент хлебных крошек для навигации по страницам
│ │ ├── ColorModeButton.vue # кнопка переключения цветовой темы интерфейса
│ │ ├── ContentWrapper.vue # обёртка основного содержимого страницы с отступами
│ │ ├── DebugDrawer.vue # компонент боковой панели отладки (payload, ответы API)
│ │ ├── DomainSwitcher.vue # переключатель между сайтами (воркспейсами)
│ │ ├── Header.vue # шапка админки (логотип, действия, переключатели)
│ │ ├── InstanceDeleteButton.vue # кнопка удаления сущности с подтверждением
│ │ ├── PageTitle.vue # компонент заголовка страницы
│ │ ├── Sidebar.vue # боковая панель навигации
│ │ ├── SummaryList.vue # компонент списка-сводки для отображения краткой информации
│ │ ├── Table.vue # универсальный компонент таблицы для отображения сущностей
│ │ └── TableEditable.vue # таблица с возможностью добавления и удаления строк (в формах)
│ ├── collection/
│ │ └── AttachedProducts.vue # в форме редактирования коллекции, выводит карточки прикрепленных товаров.
│ ├── orders/
│ │ └── HandleOrderForm.vue # дополнительная логика для обработки формы заказов.
│ └── site/
│ ├── brand
│ │ └── Detail.vue # вывод детальной информации о бренде (кнопка Подробнее о бренде).
│ ├── category
│ │ └── Detail.vue # вывод детальной информации о категории (кнопка Подробнее о категории).
│ ├── collection
│ │ └── Detail.vue # вывод детальной информации о коллекции (кнопка Подробнее о коллекции).
│ ├── product
│ │ └── Detail.vue # вывод детальной информации о товаре (кнопка Подробнее о товаре).
│ ├── region
│ │ └── Detail.vue # вывод детальной информации о регионе (кнопка Подробнее о регионе).
│ ├── DetailBlock.vue # компонент для отображения блока с детальной информацией о сущности.
│ ├── DetailMediaBlock.vue # компонент для отображения блока с изображениями сущности.
│ └── DetailDialog.vue # диалог который всплывает при клике на кнопку Подробнее о [бренде|категории|коллекции|...].
├── composables/
│ ├── forms/
│ │ ├── useShopSettingsForm.ts # конфиг формы настроек магазина
│ │ └── useOrderFormCitySelect.ts # логика выбора города в заказе
│ ├── useActionsButton.js # логика и computed для меню кнопки ActionButton
│ ├── useAutoSlug.ts # генерация slug на основе названия (с дебаунсом)
│ ├── useBreadcrumbs.js # логика построения хлебных крошек
│ ├── useDebugMode.js # логика включения/отключения режима отладки
│ ├── useEntitiesRequests.js # функции для получения сущностей через API
│ ├── useFillFormFields.js # заполнение полей формы данными с сервера
│ ├── useFormatFormData.js # обработка и сбор payload перед отправкой формы
│ ├── useGroupFields.ts # группировка полей формы по секциям
│ ├── useRenderFields.js # рендер полей формы по конфигурации
│ ├── useRowActions.js # логика отображения кнопок действий в таблице
│ ├── useSaveShortcuts.ts # обработка горячих клавиш для сохранения
│ ├── useSidebar.js # логика построения бокового меню
│ ├── useSites.js # получение и хранение списка сайтов (воркспейсов)
│ ├── useSummary.js # хранение и фильтрация элементов для сводок
│ └── useTableHeader.js # рендер заголовка таблицы с кнопками и фильтрами
├── configs/
│ ├── cells/ # папка где хранятся переиспользуемые клетки для таблиц
│ │ ├── cellDeleted.ts # создает клетку с лейблом указывающим на то, удалена ли запись или нет.
│ │ ├── cellIsPrivate.ts # создает клетку с лейблом указывающим на то, приватная ли сущность или нет.
│ │ ├── cellIsPublish.ts # создает клетку с лейблом указывающим на то, опубликована ли запись или нет.
│ │ └── cellMediaPreview.ts # создает клетку которая отображает превью медиафайла.
│ ├── entityConfig.ts # на основе этого файла строятся таблицы в списках сущностей
├── features/ # папка где хранятся самостоятельные автономные фичи
│ └── table-settings/ # фича для настройки отображения таблиц в списках (скрыть столбцы, изменить количество элементов на странице)
├── layers/ # nuxt слои (https://nuxt.com/docs/4.x/getting-started/layers)
│ └── media/ # слой отвечает за загрузку и редактирования медиафайлов. В текущем варианте должен быть в features, но исторически сложилось так.
├── layouts/
│ ├── default.vue # layout-файлы для страниц админки
│ └── login.vue # layout-файлы для страниц авторизации
├── middleware/
│ ├── error-handler.global.ts # глобальный обработчик ошибок
│ ├── redirects.global.js # глобальный обработчик правил перенаправлений
│ └── route-related-entities-loader.global.ts # если урл соответствует одному из условий, то загружаем для этого урл нужные сущности.
├── pages/
│ └── admin/
│ ├── global/ # страницы уровня глобального пространства
│ │ ├── brands/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── categories/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── cities/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── orders/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── partners/
│ │ │ └── personal-discounts.vue
│ │ ├── products/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── regions/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── sites/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── users/
│ │ │ ├── clients/
│ │ │ │ ├── [id]/
│ │ │ │ │ └── edit.vue
│ │ │ │ ├── create.vue
│ │ │ │ └── index.vue
│ │ │ ├── partners/
│ │ │ │ ├── [id]/
│ │ │ │ │ └── edit.vue
│ │ │ │ ├── create.vue
│ │ │ │ └── index.vue
│ │ │ └── system/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ ├── warehouses/
│ │ │ ├── [id]/
│ │ │ │ └── edit.vue
│ │ │ ├── create.vue
│ │ │ └── index.vue
│ │ └── index.vue
│ ├── login/
│ │ └── index.vue # страница авторизации
│ ├── profile/
│ │ └── index.vue # страница профиля администратора
│ ├── settings/
│ │ └── index.vue # страница настроек админпанели
│ └── site/ # страницы уровня локального пространства
│ └── [site_id]/
│ ├── brands/
│ │ ├── [id]/
│ │ │ └── edit.vue
│ │ └── index.vue
│ ├── categories/
│ │ ├── [id]/
│ │ │ └── edit.vue
│ │ └── index.vue
│ ├── products/
│ │ ├── [id]/
│ │ │ └── edit.vue
│ │ └── index.vue
│ ├── settings/
│ │ ├── shop.vue
│ │ └── site.vue
│ └── index.vue
├── plugins/ # плагины Nuxt
├── public/ # статические файлы
├── server/ # серверная часть
│ ├── api/ # API сервер
│ │ ├── fetch/
│ │ │ ├── create.ts # API для создания сущности
│ │ │ ├── delete.ts # API для удаления сущности
│ │ │ ├── get.ts # API для получения списка сущностей
│ │ │ └── update.ts # API для обновления сущности
│ │ └── media/
│ │ ├── crop.post.ts # API для кропа изображения
│ │ ├── upload.post.ts # API для загрузки файлов
│ ├── middleware/ # серверные middleware
│ └── plugins/ # серверные плагины
├── types/ # типы
│ └── forms.global.d.ts # типы для конфигов и утилит используемых в формах
├── utils/ # утилиты
│ ├── extractFromPath.ts # функции для извлечения параметров из пути URL
├── dateFormatters.ts # функции для работы с датой
├── downloadFile.ts # функция для скачивания файлов по урл
├── formatBytes.ts # функция для форматирования размера файла (в байтах) в более читаемый вид, например: из 2048 → "2 Кб", из 1048576 → "1024 Мб"
├── getExtensionFromUrl.ts # функция извлекает расширение файла из URL-адреса.
├── sleep.ts # функция приостанавливает выполнение кода на заданное количество миллисекунд.
├── renameEntityFieldsBeforeSubmit.ts # функция, которая переименовывает поля в объекте данных перед отправкой (submit), сохраняя их значения.
│ ├── generateSlug.ts # функции для генерации слага
│ ├── transformData.ts # функции для преобразования данных полученных от API
│ └── validationRules.ts # функции для валидации полей форм
├── .env # файл с переменными окружения
├── .env.example # файл с примерами переменных окружения
├── .eslintrc.js # конфигурация ESLint
├── .gitignore # файл с настройками игнорирования файлов
├── .npmrc # файл с настройками npm
├── .prettierrc # конфигурация Prettier
├── app.config.ts # конфигурация приложения Nuxt и Nuxt UI
├── app.vue # главный файл Nuxt
├── docker-compose.yml # конфигурация Docker Compose
├── Dockerfile # Dockerfile для Docker
├── error.vue # страница вывода ошибок
├── LICENSE # лицензия
├── nuxt.config.ts # конфигурация Nuxt
├── package-lock.json # файл с зависимостями и версиями пакетов
├── package.json # файл с зависимостями и скриптами для разработки
├── README.md # файл с описанием проекта
├── tailwind.config.js # конфигурация Tailwind CSS
└── tsconfig.json # конфигурация TypeScript