new file: main_dc/BB/bbvue/documentation/docs.md

Add docs for FronEnd begushiybashkir.ru
2025-12-02 20:53:24 +05:00
parent 519da05072
commit 06bb95dc29
1 changed files with 351 additions and 0 deletions
@@ -0,0 +1,351 @@
 # Документация сайта бегового клуба "Бегущий Башкир"
 ## 📋 Обзор проекта
 **Сайт:** [begushiybashkir.ru](https://begushiybashkir.ru)
 **Технологический стек:** Vue 3, Vue Router, Pinia, Vite
 **Тип проекта:** SPA (Single Page Application) для бегового клуба
 ---
 ## 🏗️ Архитектура проекта
 ### Структура каталогов
 ```
 src/
 ├── assets/           # Статические ресурсы
 │   ├── logo/        # Логотипы
 │   └── main.css     # Глобальные стили
 ├── components/       # Vue компоненты
 ├── pages/           # Страницы приложения
 ├── stores/          # Состояние приложения (Pinia)
 └── router/          # Маршрутизация
 public/
 ├── images/          # Изображения для галереи
 └── favicon.ico      # Иконка сайта
 ```
 ---
 ## 🌐 Основные страницы
 ### 1. Главная страница (`Home.vue`)
 - **Назначение:** Приветствие, представление клуба, призыв к действию
 - **Особенности:** Слайдер, статистика клуба, преимущества, события
 - **SEO:** Оптимизирована для поисковых систем
 ### 2. О клубе (`About.vue`)
 - **Назначение:** Подробная информация о клубе
 - **Контент:** Философия, тренер, локации, контакты
 - **Особенности:** Информация о тренере Аминеве Загире
 ### 3. Галерея (`Gallery.vue`)
 - **Назначение:** Фотографии мероприятий и тренировок
 - **Функционал:** Слайдер, лайтбокс, фильтрация
 - **Особенности:** Адаптивная сетка изображений
 ### 4. Достижения (`Achievements.vue`)
 - **Назначение:** Демонстрация успехов участников
 - **Функционал:** Фильтрация, поиск, статистика
 - **Контент:** Личные и командные достижения
 ### 5. Статистика (`DetailedStats.vue`)
 - **Назначение:** Персональная статистика участников
 - **Функционал:** Графики, фильтры, экспорт данных
 - **Данные:** Пробег, темп, история тренировок
 ### 6. События (`Events.vue`)
 - **Назначение:** Расписание мероприятий
 - **Функционал:** Регистрация, управление участием
 - **Типы событий:** Тренировки, забеги, семинары
 ---
 ## 🔐 Система аутентификации
 ### Компоненты:
 - `Login.vue` - Вход в систему
 - `Register.vue` - Регистрация
 - `Logout.vue` - Выход
 - `ForgotPassword.vue` - Восстановление пароля
 ### Хранилище:
 - `auth.js` - Управление состоянием авторизации
 - **Функции:** login, logout, register, refreshToken
 ---
 ## 🎨 Дизайн и стили
 ### Основные принципы:
 1. **Цветовая палитра:**
   - Основной: #2e8b57 (зеленый)
   - Акцентный: #ffd700 (золотой)
   - Фон: #f8fff8 (светло-зеленый)
 2. **Типографика:**
   - Заголовки: жирный шрифт
   - Основной текст: читабельный контраст
   - Стили для русского и башкирского языков
 3. **Адаптивность:**
   - Mobile-first подход
   - Breakpoints: 360px, 480px, 768px, 1024px
   - Гибкие контейнеры и сетки
 ---
 ## 🛠️ Функциональные компоненты
 ### `NavigationMenu.vue`
 - Навигационное меню
 - Адаптивный дизайн
 - Учет состояния авторизации
 ### `EventCard.vue`
 - Карточка события
 - Интерактивные элементы
 - Состояния регистрации
 ### `RegistrationCard.vue`
 - Карточка регистрации
 - Управление участием
 - Статусы подтверждения
 ---
 ## 📊 Управление состоянием (Pinia)
 ### Сторы:
 1. **`auth.js`** - Авторизация
 2. **`stats.js`** - Статистика пользователя
 3. **`event.js`** - События и регистрации
 ### Особенности:
 - Persistence через localStorage
 - Автоматическое обновление токенов
 - Централизованная обработка ошибок
 ---
 ## 🚀 Маршрутизация (Vue Router)
 ### Основные маршруты:
 ```javascript
 [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/gallery', component: Gallery },
  { path: '/achievements', component: Achievements },
  { path: '/stats', component: DetailedStats },
  { path: '/events', component: Events },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/profile', component: Profile }
 ]
 ```
 ### Защищенные маршруты:
 - Требуют авторизации
 - Автоматический редирект на логин
 ---
 ## 📱 Адаптивный дизайн
 ### Подходы:
 1. **CSS Grid и Flexbox** - для компоновки
 2. **Относительные единицы** - rem, em, vw, vh
 3. **Медиа-запросы** - для разных устройств
 4. **Mobile-first** - базовая версия для мобильных
 ### Особые случаи:
 - Ландшафтная ориентация
 - Малые экраны (до 360px)
 - Планшеты (768-1024px)
 ---
 ## 🖼️ Оптимизация изображений
 ### Стратегии:
 1. **Ленивая загрузка** - для галереи
 2. **Предзагрузка** - для слайдера
 3. **Адаптивные изображения** - разные размеры для разных устройств
 4. **Оптимизация форматов** - WebP где поддерживается
 ---
 ## ⚡ Производительность
 ### Оптимизации:
 1. **Code splitting** - разделение кода по маршрутам
 2. **Tree shaking** - удаление неиспользуемого кода
 3. **Кэширование** - статических ресурсов
 4. **Минификация** - CSS и JavaScript
 ---
 ## 🔍 SEO оптимизация
 ### Мета-теги:
 - Динамические заголовки
 - Оптимизированные описания
 - Ключевые слова
 - Open Graph для соцсетей
 ### Технические аспекты:
 - Чистые URL
 - Навигационная структура
 - Скорость загрузки
 - Мобильная адаптация
 ---
 ## 📝 Контент
 ### Языки:
 1. **Русский** - основной язык
 2. **Башкирский** - для подвала сайта
 3. **Иконки** - визуальная коммуникация
 ### Контент-стратегия:
 - Регулярное обновление событий
 - Добавление новых достижений
 - Обновление галереи
 - Актуальная статистика
 ---
 ## 🔧 Разработка
 ### Команды:
 ```bash
 npm install      # Установка зависимостей
 npm run dev      # Запуск dev сервера
 npm run build    # Сборка для production
 npm run lint     # Проверка кода
 ```
 ### Конфигурация:
 - ESLint - для качества кода
 - Vite - для сборки
 - Vue 3 Composition API
 - Hot Module Replacement
 ---
 ## 📄 Файлы конфигурации
 ### Основные:
 - `vite.config.js` - настройка Vite
 - `package.json` - зависимости и скрипты
 - `index.html` - главный HTML файл
 - `README.md` - документация проекта
 ---
 ## 🚨 Обработка ошибок
 ### Стратегии:
 1. **Глобальный перехват** - для API запросов
 2. **Пользовательские уведомления** - дружелюбные сообщения
 3. **Резервные состояния** - для отсутствующих данных
 4. **Кнопки повтора** - для повторных попыток
 ---
 ## 🔄 Интеграции
 ### Планируемые:
 1. **Календарь событий** - синхронизация
 2. **Платежная система** - для платных мероприятий
 3. **Социальные сети** - автоматическая публикация
 4. **Email рассылка** - для участников
 ---
 ## 📈 Аналитика
 ### Метрики:
 1. **Посещаемость** - популярные страницы
 2. **Конверсии** - регистрации и участие
 3. **Вовлеченность** - время на сайте
 4. **Устройства** - мобильные vs десктоп
 ---
 ## 🛡️ Безопасность
 ### Меры:
 1. **HTTPS** - шифрование трафика
 2. **Валидация данных** - на клиенте и сервере
 3. **Защита от XSS** - экранирование вывода
 4. **Rate limiting** - для API запросов
 ---
 ## 📚 Дальнейшее развитие
 ### Планы:
 1. **PWA** - прогрессивное веб-приложение
 2. **Push-уведомления** - для событий
 3. **Офлайн-режим** - кэширование данных
 4. **Интернационализация** - полная поддержка башкирского
 5. **Мобильное приложение** - на React Native
 ---
 ## 🎯 Целевая аудитория
 ### Основные группы:
 1. **Новички** - желающие начать бегать
 2. **Любители** - регулярно занимающиеся
 3. **Профессионалы** - участвующие в соревнованиях
 4. **Болельщики** - интересующиеся клубом
 ---
 ## 📞 Поддержка
 ### Каналы связи:
 1. **Телефон:** +7 (927) 30-93-095
 2. **Email:** zog1r@mail.ru
 3. **Telegram:** @begushiybashkir
 4. **Instagram:** @begushiybashkir
 ---
 ## 📋 Чеклист развертывания
 ### Обновление контента:
 - [ ] Проверить актуальность событий
 - [ ] Обновить достижения
 - [ ] Добавить новые фото в галерею
 - [ ] Проверить контактную информацию
 ### Техническая проверка:
 - [ ] Тестирование на мобильных устройствах
 - [ ] Проверка скорости загрузки
 - [ ] Валидация HTML/CSS
 - [ ] Проверка ссылок
 ### SEO оптимизация:
 - [ ] Обновить мета-теги
 - [ ] Проверить заголовки
 - [ ] Оптимизировать изображения
 - [ ] Проверить sitemap
 ---
 ## 🏆 Особенности проекта
 ### Уникальные черты:
 1. **Двуязычность** - русский и башкирский
 2. **Сообщество** - ориентация на взаимодействие
 3. **Тренерский подход** - акцент на профессиональное руководство
 4. **Природа** - тренировки на свежем воздухе
 ---
 *Документация будет дополняться по мере развития проекта. Последнее обновление: декабрь 2025