tp/main_dc/yalarba/serv_spa/spa/vue/documentation/docs.md

Документация проекта 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. Механизм защиты маршрутов:

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)

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:

   // Избыточный импорт (дважды)
   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. Структура компонентов:

<template>
  <!-- 1. Шапка -->
  <!-- 2. Основной контент -->
  <!-- 3. Подвал -->
</template>

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

7.3. Работа с состоянием:

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

---

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

8.1. Предполагаемая команда сборки:

npm run build  # или yarn build

8.2. Структура сборки:

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

---

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

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

---

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