# Документация проекта YalArba

**Версия документации:** 1.0 (Первичная)  
**Дата составления:** 03 декабря 2025 года  
**Актуальный статус проекта:** Разработка в процессе (базовый функционал)

---

## 1. Общая информация

### 1.1. Назначение проекта
**YalArba** — это веб-приложение, созданное на Vue 3 с использованием современных инструментов разработки. На текущем этапе реализована базовая структура SPA (Single Page Application) с системой авторизации и основными страницами-заглушками для будущего функционала.

### 1.2. Технологический стек
- **Фреймворк:** Vue 3 (Composition API, `<script setup>`)
- **Маршрутизация:** Vue Router 4
- **Состояние приложения:** Pinia (стейт-менеджмент)
- **Интернационализация:** Vue I18n
- **Сборка:** Vite (предположительно)
- **Стилизация:** CSS (с использованием модульных компонентов)

### 1.3. Текущий статус функционала
✅ **Реализовано:**
- Базовая структура SPA с маршрутизацией
- Система авторизации (логин, регистрация, защищенные маршруты)
- Главная страница с поисковой строкой
- Страницы профиля, настроек, поддержки, обратной связи
- Страница "О нас" с разделами о разработчиках

🔄 **В разработке:**
- Функционал поиска и отображения результатов
- Детальные страницы объектов (restObject)
- Основная бизнес-логика приложения

---

## 2. Архитектура проекта

### 2.1. Структура каталогов
```
src/
├── assets/           # Глобальные стили, шрифты, изображения
├── auth/             # Логика авторизации (store)
├── components/       # Vue-компоненты (сгруппированы по функциям)
├── locales/          # Файлы интернационализации (i18n)
├── router/           # Конфигурация маршрутизации
├── views/            # Страницы приложения (роуты)
├── App.vue           # Корневой компонент
└── main.js           # Точка входа приложения
```

### 2.2. Маршрутизация (router/index.js)
Приложение использует Vue Router с защитой маршрутов через мета-поле `requiresAuth`.

#### 2.2.1. Публичные маршруты (доступны без авторизации):
- `/` - Главная страница (HomeView)
- `/about` - О проекте
- `/support` - Поддержка
- `/feetback` - Обратная связь
- `/results` - Результаты поиска
- `/registration` - Регистрация
- `/login` - Вход в систему

#### 2.2.2. Защищенные маршруты (требуют авторизации):
- `/profile` - Профиль пользователя
- `/settings` - Настройки
- `/restObject` - Детальная страница объекта

#### 2.2.3. Механизм защиты маршрутов:
```javascript
router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();
  await authStore.checkAuth();

  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login'); // Перенаправление на страницу входа
  } else {
    next();
  }
});
```

### 2.3. Компонентная структура
Каждая страница (view) состоит из:
1. **FHeader** - Полный заголовок (шапка сайта)
2. **Основной компонент страницы** (контент)
3. **FooterB** - Нижний колонтитул

---

## 3. Страницы приложения

### 3.1. Главная страница (`/`)
**Компоненты:** `FHeader + SearchLine + FooterB`  
**Назначение:** Отображает поисковую строку для будущего поискового функционала.

### 3.2. Страница авторизации (`/login`)
**Компоненты:** `FHeader + LogIn + FooterB`  
**Компонент:** `inout.vue` (логика входа)

### 3.3. Страница регистрации (`/registration`)
**Компоненты:** `FHeader + Registration + FooterB`  
**Компонент:** `registration.vue`

### 3.4. Профиль пользователя (`/profile`)
**Статус:** Требует авторизации  
**Компоненты:** `FHeader + Profile + FooterB`  
**Компонент:** `profile.vue`

### 3.5. Настройки (`/settings`)
**Статус:** Требует авторизации  
**Компоненты:** `FHeader + Settings + FooterB`  
**Компонент:** `settings.vue`

### 3.6. Объект (`/restObject`)
**Статус:** Требует авторизации, в разработке  
**Компоненты:** `FHeader + RestObject + FooterB`  
**Особенность:** Использует моковые данные (`mockPlace`)

### 3.7. Результаты поиска (`/results`)
**Компоненты:** `FHeader + SearchLine + Results + FooterB`  
**Компоненты:** `searchLine.vue`, `results.vue`

### 3.8. О проекте (`/about`)
**Компоненты:** `FHeader + About + Developers + Commits + FooterB`  
**Разделы:** Информация о проекте, разработчики, коммиты

### 3.9. Поддержка (`/support`)
**Компоненты:** `FHeader + Support + FooterB`  
**Компонент:** `support.vue`

### 3.10. Обратная связь (`/feetback`)
**Примечание:** Возможна опечатка в названии (feedback → feetback)  
**Компоненты:** `FHeader + Feetback + FooterB`  
**Компонент:** `feetback.vue`

---

## 4. Система авторизации

### 4.1. Хранилище состояния (Pinia Store)
Расположение: `/src/auth/stores/auth.store.js` (предположительно)

**Основные функции:**
- `checkAuth()` - проверка статуса авторизации
- `isAuthenticated` - реактивное состояние авторизации

### 4.2. Процесс авторизации
1. Пользователь переходит на защищенный маршрут
2. `router.beforeEach` вызывает `authStore.checkAuth()`
3. Если пользователь не авторизован → перенаправление на `/login`
4. После успешной авторизации доступ к защищенным маршрутам разрешен

---

## 5. Конфигурация приложения

### 5.1. Точка входа (main.js)
```javascript
import { createApp } from 'vue';
import SPA_VUE_App from './App.vue';
import appRouter from './router/index.js';
import i18n from './locales/i18n.js';
import { createPinia } from 'pinia';

const spaAppVue3 = createApp(SPA_VUE_App);
const pinia = createPinia();

spaAppVue3.use(pinia);
spaAppVue3.use(appRouter);
spaAppVue3.use(i18n);

spaAppVue3.mount('#app');
```

### 5.2. Глобальные стили и шрифты
- `/src/assets/main.css` - основные стили
- `/src/assets/fonts.css` - подключение шрифтов

### 5.3. Интернационализация (i18n)
Конфигурация находится в `/src/locales/i18n.js`  
(контент файла не предоставлен)

---

## 6. Текущие задачи и TODO

### 6.1. Необходимо исправить:
1. **Опечатка в маршруте:** `feetback` → `feedback`
2. **Импорты в ResultsView.vue:**
   ```javascript
   // Избыточный импорт (дважды)
   import searchLine from '@/components/searchLine/searchLine.vue';
   import SearchLine from '@/components/searchLine/searchLine.vue';
   ```

### 6.2. Планируемый функционал:
1. **Реализация поиска** (компоненты `SearchLine`, `Results`)
2. **Работа с API** для получения реальных данных
3. **Детальная страница объекта** (заполнение `RestObject`)
4. **Интеграция бэкенда** для авторизации
5. **Заполнение страниц контентом** (About, Support, Settings)

### 6.3. Архитектурные улучшения:
1. Добавить Error Boundary для обработки ошибок
2. Реализовать ленивую загрузку компонентов для всех маршрутов
3. Добавить мета-теги для SEO
4. Реализовать систему уведомлений
5. Добавить валидацию форм

---

## 7. Рекомендации по разработке

### 7.1. Соглашения по именованию:
- **Компоненты:** PascalCase (`RestObjectView.vue`)
- **Файлы маршрутов:** Папка `views/` + суффикс `View`
- **Вложенные компоненты:** Группировка по функциональности

### 7.2. Структура компонентов:
```vue
<template>
  <!-- 1. Шапка -->
  <!-- 2. Основной контент -->
  <!-- 3. Подвал -->
</template>

<script setup>
  // Импорты в порядке: header → основной компонент → footer
</script>
```

### 7.3. Работа с состоянием:
- Использовать Pinia stores для глобального состояния
- Локальное состояние хранить в компонентах через `ref()`, `reactive()`
- Авторизацию обрабатывать через `auth.store`

---

## 8. Развертывание и сборка

### 8.1. Предполагаемая команда сборки:
```bash
npm run build  # или yarn build
```

### 8.2. Структура сборки:
- **Входная точка:** `index.html`
- **Основной скрипт:** `main.js`
- **Базовая настройка:** Мета-теги, фавиконка, подключение стилей

---

## 9. Контакты и поддержка

**Сайт проекта:** [yalarba.ru](https://yalarba.ru)  
**Дата начала разработки:** Не указана (актуально на 03.12.2025)  
**Статус:** Активная разработка

---

*Документация будет обновляться по мере добавления нового функционала. Все изменения в архитектуре и API должны отражаться в соответствующих разделах документации.*