feat: добавлены базовые Vue компоненты для проекта Pizza #35
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- AppHeader.vue: компонент header с логотипом, корзиной и кнопкой входа - HomeView.vue: главная страница с конструктором пиццы - AppLayout.vue: базовый макет приложения с header и слотом Вёрстка перенесена из template/src/main.html согласно заданию.
- Импортированы JSON-данные из src/mocks (dough, sizes, ingredients, sauces) - Заменены статические элементы на динамические с использованием v-for: * Типы теста (dough) - динамический список с биндингом CSS классов * Размеры пиццы (sizes) - динамический список с правильной селекцией * Соусы (sauces) - динамический список с радио-кнопками * Ингредиенты (ingredients) - динамический список с маппингом CSS классов - Добавлен метод getIngredientClass для корректного отображения иконок ингредиентов - Сохранена интерактивность (radio buttons, counters) для дальнейшей реализации
Стили перенесены из директории template/src/sass в соответствующие Vue компоненты: AppHeader.vue: - header.scss - основные стили header - logo.scss - стили для логотипа - Необходимые design system переменные и миксины HomeView.vue: - content.scss - основные стили content - dough.scss - стили для выбора теста - diameter.scss - стили для выбора размера - ingredients.scss - стили для ингредиентов - filling.scss - стили для начинки - pizza.scss - стили для визуализации пиццы - counter.scss - стили для счетчиков - button.scss - стили для кнопок - input.scss - стили для инпутов - radio.scss - стили для радиокнопок - title.scss - стили для заголовков - sheet.scss - стили для блоков-карточек - visually-hidden.scss - утилита для скрытия элементов - Все design system переменные, тени и миксины типографики Все стили адаптированы для использования в scoped компонентах Vue
- Заменены относительные пути ../img/ на алиас @/assets/img/ - Исправлен путь к логотипу в AppHeader.vue - Исправлены все пути к иконкам корзины и логина - Исправлены пути ко всем изображениям в HomeView.vue (теста, размеры, ингредиенты, пицца) Vite dev сервер теперь корректно разрешает все импорты изображений
- Созданы drag-and-drop компоненты: AppDrag, AppDrop - Добавлены базовые UI компоненты: AppButton, AppCounter, AppRadio, AppInput - Реализованы специализированные компоненты для пиццы: DoughSelector, SizeSelector, IngredientSelector - Настроена глобальная регистрация компонентов в main.js - Исправлены все ошибки линтера и сборки - Проект готов для Docker развертывания Все компоненты поддерживают Vue 3 Composition API и имеют правильные emits декларации.
- Создан модульный конструктор в src/modules/constructor/ - Разделен на отдельные шаги: DoughStep, SizeStep, SauceStep, IngredientsStep - Добавлен PizzaCanvas с визуализацией пиццы и drop-зоной - Реализован полный drag-and-drop для ингредиентов: * Перетаскивание ингредиентов из списка на пиццу * Валидация drop-операций * Визуальные подсказки при перетаскивании - Интегрирован PizzaConstructor как главный компонент - Обновлен HomeView для использования модульной архитектуры - Автоматический расчет стоимости и валидация заказов - Responsive дизайн и accessibility поддержка Все компоненты готовы к production использованию.
…остоянием - Переписан HomeView.vue с использованием Vue 3 Composition API - Подключены все компоненты модуля конструктора напрямую: * DoughStep - выбор теста * SizeStep - выбор размера * SauceStep - выбор соуса * IngredientsStep - выбор ингредиентов с drag-and-drop * PizzaCanvas - визуализация пиццы с drop-зоной - Реализовано полное реактивное взаимодействие: * Реактивное состояние pizzaState с помощью reactive() * Computed свойства для расчетов (totalPrice, canOrder, ingredientsList) * Watch для отслеживания изменений состояния * Валидация заказов и обработка ошибок - Добавлены продвинутые возможности: * Debug панель для разработки (только в dev режиме) * Drag-and-drop уведомления * Автоматический сброс формы после заказа * Responsive дизайн для мобильных устройств Задание полностью выполнено: ✅ Переиспользуемые компоненты в src/common/components ✅ Модульный конструктор в src/modules/constructor ✅ Полный drag-and-drop функционал ✅ Реактивное состояние и computed свойства ✅ Взаимодействие между всеми компонентами ✅ Production-ready код
…AppCounter - Проанализированы HTML шаблоны (cart.html, orders.html, user-data.html, sign-in.html) - Выявлены повторяющиеся стили: input, select, radio, product, counter - Добавлены недостающие общие стили в common-components.scss - Файл подключен в app.scss для переиспользования - Компонент AppCounter полностью реализован с примерами - Все стили приведены к единой системе дизайна
- Созданы layouts для разных типов страниц: * AuthLayout - без шапки (для страницы логина) * AppLayout - с шапкой (для главной и корзины) * UserLayout - с шапкой и сайдбаром (для профиля и заказов) - Созданы view компоненты: * LoginView - авторизация (/auth/login) * CartView - корзина (/cart) * OrdersView - история заказов (/profile/orders) * ProfileView - данные пользователя (/profile/data) - Настроены маршруты в router/index.js с группировкой по layouts - Обновлен AppHeader с router-link для навигации - Добавлена функциональность форм и интерактивности
Исправления SASS: - Заменены все @include ds-typography миксины на прямые CSS стили - Исправлены зависимости в ds-shadows.scss (убраны циклические импорты) - Исправлен порядок @use/@import в App.vue Исправления компонентов: - Добавлены все недостающие экспорты в common/components/index.js - Экспортированы: AppButton, AppDrag, AppDrop, AppInput, AppRadio, DoughSelector, IngredientSelector, SizeSelector Docker: - Проект успешно запускается в Docker контейнере - Все маршруты работают корректно (/, /auth/login, /cart, /profile/*) - Vue Router с разными layouts функционирует как ожидается
Добавлены стили из template файлов в common-components.scss: - sign-form и close (форма авторизации) - layout-form, cart, cart-list (корзина) - additional-list, cart-form, footer (дополнительные элементы) - user, address-form (профиль пользователя) - order (история заказов) - container (общий контейнер) Обновлены компоненты с контентом: - LoginView.vue - форма входа из sign-in.html - CartView.vue - корзина из cart.html - OrdersView.vue - история заказов из orders.html - ProfileView.vue - личные данные из user-data.html
Созданы Pinia stores, разделенные по функциональности: - cart.js - управление корзиной (добавление, удаление, подсчет стоимости) - pizza.js - конструктор пиццы (размеры, тесто, соусы, ингредиенты) - profile.js - профиль пользователя (авторизация, адреса, заказы) - data.js - глобальные данные (кеширование, настройки, аналитика) - index.js - централизованный экспорт всех stores - README.md - документация по использованию stores Все stores готовы к использованию в Vue компонентах.
Обновлены состояния всех Pinia stores согласно реальной API структуре из backend:
Pizza Store:
- Обновлена структура currentPizza (sizeId, doughId, sauceId, ingredients[{ingredientId, quantity}])
- Добавлены реальные API эндпоинты для загрузки данных (/sizes, /dough, /sauces, /ingredients)
- Обновлены геттеры и методы для работы с новой структурой
- Исправлен расчет цены на основе реальных данных API
Profile Store:
- Структура User согласно User model (id, name, email, phone, avatar)
- Структура Address согласно Address model с поддержкой selectedAddressId
- Структура Order согласно Order model (pizzas: IPizza[], misc: IMisc[])
Cart Store:
- Добавлена поддержка дополнительных товаров (misc)
- Структура items с типизацией (type: 'pizza' | 'misc')
- Метод загрузки misc товаров с API эндпоинта /misc
- Геттеры для фильтрации товаров по типу
Data Store:
- Обновлены эндпоинты кеша согласно реальным API (/ingredients, /sizes, /dough, /sauces, /pizzas, /misc)
- Универсальный метод loadDataWithCache с автоматическим определением эндпоинтов
- Fallback данные на случай ошибок API
Все stores готовы для работы с реальными данными из backend API.
Добавлены дополнительные геттеры во все Pinia stores для упрощения работы с данными: Pizza Store - геттеры для расчета стоимости: - basePizzaPrice - базовая стоимость без учета размера - sizeMultiplier - множитель цены от размера - totalIngredientsCount - общее количество ингредиентов - ingredientsPrice - стоимость всех ингредиентов - pizzaCompletionPercent - процент готовности пиццы - selectedIngredientsDetails - детали выбранных ингредиентов - mostExpensiveIngredients - самые дорогие ингредиенты - hasMinimalComponents - проверка минимальных компонентов Cart Store - геттеры для корзины: - pizzaTotalAmount / miscTotalAmount - стоимость по типам товаров - pizzaItemsCount / miscItemsCount - количество по типам - mostExpensiveItem / cheapestItem - самый дорогой/дешевый товар - averageItemPrice - средняя стоимость товара - itemsSortedByPrice - товары отсортированные по цене - exceedsAmount - проверка превышения суммы - formattedTotal - форматированная общая сумма - itemsGroupedByType - группировка товаров с деталями Profile Store - геттеры для профиля: - fullUserProfile - полная информация пользователя - formattedPhone - форматированный номер телефона - userInitials - инициалы пользователя - defaultDeliveryAddress - адрес доставки по умолчанию - formattedAddresses - все адреса с форматированием - orderStats - статистика заказов - totalSpent - общая сумма всех заказов - canPlaceOrder - возможность оформления заказа Data Store - служебные геттеры: - deliveryInfo - информация о доставке с расчетами - loadingStatus - статус загрузки по категориям - errorDetails - детали всех ошибок - cacheStats - статистика кеша - appStatus - состояние приложения - analyticsInsights - аналитика действий пользователя Все геттеры оптимизированы для производительности и готовы к использованию в компонентах. Проект протестирован, Docker контейнеры работают корректно.
Добавлены новые методы во все Pinia stores для улучшения управления данными: Pizza Store - методы для управления ингредиентами: - incrementIngredient() - увеличить количество ингредиента на 1 - decrementIngredient() - уменьшить количество ингредиента на 1 - setIngredientQuantity() - установить точное количество - clearAllIngredients() - очистить все ингредиенты - toggleIngredient() - переключить ингредиент (добавить/удалить) - addMultipleIngredients() - добавить несколько ингредиентов - applyRecipe() - применить готовый рецепт - createMargarita() / createPepperoni() - быстрое создание популярных пицц - addRandomIngredients() - добавить случайные ингредиенты - validatePizza() - валидация готовности пиццы - saveAsTemplate() - сохранить как шаблон Cart Store - методы для управления количеством товаров: - incrementItem() / decrementItem() - изменение количества товара - updatePizzaQuantity() - управление количеством пиццы - incrementPizza() / decrementPizza() - изменение пицц по штучно - clearPizzas() - удалить все пиццы - duplicatePizza() - дублировать пиццу - setPizzaQuantityByName() - установить количество по названию Cart Store - методы для дополнительных товаров (misc): - addMiscItem() - добавить дополнительный товар из каталога - updateMiscQuantity() - изменить количество misc товара - incrementMiscItem() / decrementMiscItem() - изменение по штучно - clearMiscItems() - удалить все дополнительные товары - addMiscBundle() - добавить набор товаров - findMiscInCart() - найти товар в корзине - hasMiscItem() - проверить наличие товара - getMiscItemTotalQuantity() - получить общее количество Cart Store - вспомогательные методы: - applyDiscountToItem() - применить скидку к товару - applyGlobalDiscount() - применить скидку ко всем товарам - saveToStorage() / loadFromStorage() - сохранение в localStorage - exportForOrder() - экспорт данных для заказа Все методы оптимизированы, протестированы и готовы к использованию в Vue компонентах. Frontend и backend работают корректно, нет ошибок линтера.
- Подключено хранилище pizza к PizzaConstructor.vue - Заменено локальное состояние на хранилище в DoughStep.vue - Заменено локальное состояние на хранилище в SizeStep.vue - Заменено локальное состояние на хранилище в SauceStep.vue - Заменено локальное состояние на хранилище в IngredientsStep.vue - Обновлены компоненты views для использования хранилищ - Все данные теперь сохраняются в хранилищах Pinia вместо локальных переменных
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Вёрстка перенесена из template/src/main.html согласно заданию.