# Frontend Setup - Vue.js 3

## Установка зависимостей

```bash
npm install
```

## Зависимости

- **Vue.js 3** - Фреймворк
- **Vue Router 4** - Маршрутизация
- **Pinia** - State management
- **Axios** - HTTP клиент
- **Vue I18n** - Многоязычность (DE, EN, RU)

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

```
resources/js/
├── App.vue                 # Главный компонент
├── app.js                  # Точка входа
├── bootstrap.js            # Bootstrap файл
├── router/                 # Маршрутизация
│   └── index.js
├── stores/                 # Pinia stores
│   ├── auth.js            # Store для аутентификации
│   └── cart.js            # Store для корзины
├── services/              # Сервисы
│   └── api.js            # API клиент
├── i18n/                 # Интернационализация
│   ├── index.js
│   └── locales/
│       ├── ru.json
│       ├── en.json
│       └── de.json
├── components/           # Компоненты
│   ├── layout/
│   │   ├── Header.vue
│   │   └── Footer.vue
│   ├── admin/
│   │   ├── AdminSidebar.vue
│   │   └── AdminHeader.vue
│   └── LanguageSwitcher.vue
├── layouts/             # Layout компоненты
│   ├── MainLayout.vue
│   └── AuthLayout.vue
└── pages/               # Страницы
    ├── Home.vue
    ├── Menu.vue
    ├── Cart.vue
    ├── Checkout.vue
    ├── Reservation.vue
    ├── Cabinet.vue
    ├── auth/
    │   ├── Login.vue
    │   ├── Register.vue
    │   ├── SetPassword.vue
    │   └── VerifyEmail.vue
    ├── cabinet/
    │   ├── Orders.vue
    │   ├── Reservations.vue
    │   ├── Profile.vue
    │   └── Addresses.vue
    └── admin/
        ├── Layout.vue
        ├── Dashboard.vue
        ├── Menu.vue
        ├── Orders.vue
        ├── Reservations.vue
        ├── Staff.vue
        └── Settings.vue
```

## Запуск в режиме разработки

```bash
npm run dev
```

Это запустит Vite dev server на порту 5173 (или другом доступном).

## Сборка для production

```bash
npm run build
```

Собранные файлы будут в `public/build/`.

## Маршруты

### Публичные маршруты
- `/` - Главная страница
- `/menu` - Меню
- `/cart` - Корзина
- `/checkout` - Оформление заказа
- `/reservation` - Бронирование столов
- `/auth/login` - Вход
- `/auth/register` - Регистрация
- `/auth/set-password?token=xxx` - Установка пароля
- `/auth/verify-email?token=xxx` - Подтверждение email

### Защищенные маршруты (требуют авторизации)
- `/cabinet` - Личный кабинет
- `/cabinet/orders` - История заказов
- `/cabinet/reservations` - История бронирований
- `/cabinet/profile` - Профиль
- `/cabinet/addresses` - Адреса

### Административные маршруты
- `/admin` - Панель управления
- `/admin/menu` - Управление меню (admin, manager)
- `/admin/orders` - Управление заказами
- `/admin/reservations` - Управление бронированиями
- `/admin/staff` - Управление персоналом (admin)
- `/admin/settings` - Настройки (admin)

## State Management (Pinia)

### Auth Store
- `user` - Текущий пользователь
- `token` - Токен авторизации
- `isAuthenticated` - Статус авторизации
- `login()` - Вход
- `register()` - Регистрация
- `logout()` - Выход
- `checkAuth()` - Проверка авторизации
- `setPassword()` - Установка пароля
- `hasRole(role)` - Проверка роли
- `hasAnyRole(roles)` - Проверка одной из ролей

### Cart Store
- `items` - Товары в корзине
- `itemCount` - Количество товаров
- `total` - Общая сумма
- `addItem()` - Добавить товар
- `removeItem()` - Удалить товар
- `updateQuantity()` - Изменить количество
- `clearCart()` - Очистить корзину

## API Клиент

Все API запросы идут через `services/api.js`:
- Автоматическое добавление токена из localStorage
- Обработка 401 ошибок (перенаправление на логин)
- Базовый URL: `/api`

## Интернационализация

Поддерживаемые языки:
- Русский (ru) - по умолчанию
- Английский (en)
- Немецкий (de)

Язык сохраняется в localStorage и определяется автоматически из браузера.

Использование:
```vue
<template>
    <h1>{{ $t('common.welcome') }}</h1>
</template>
```

## Навигационные guards

- Автоматическая проверка авторизации для защищенных маршрутов
- Проверка ролей для административных маршрутов
- Редирект на логин при отсутствии авторизации
- Редирект на главную для авторизованных пользователей на страницах логина/регистрации

## Переменные окружения

Добавьте в `.env`:
```env
FRONTEND_URL=http://localhost:5173
```

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

1. **SPA (Single Page Application)** - все маршруты обрабатываются Vue Router
2. **Автоматическая авторизация** - токен сохраняется в localStorage
3. **Корзина в localStorage** - данные корзины сохраняются между сессиями
4. **Адаптивный дизайн** - базовые стили для мобильных устройств
5. **Многоязычность** - поддержка 3 языков из коробки

## Следующие шаги

1. Реализовать страницу оформления заказа с интеграцией Stripe
2. Реализовать страницу бронирования столов
3. Реализовать страницы личного кабинета
4. Реализовать административную панель
5. Добавить WebSocket для чата поддержки
6. Улучшить стилизацию и добавить UI библиотеку (Vuetify, Element Plus и т.д.)