new file: main_dc/BB/bbvue/documentation/docs.md
Add docs for FronEnd begushiybashkir.ru
This commit is contained in:
@@ -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
|
||||
Reference in New Issue
Block a user