351 lines
12 KiB
Markdown
351 lines
12 KiB
Markdown
# Документация сайта бегового клуба "Бегущий Башкир"
|
||
|
||
## 📋 Обзор проекта
|
||
|
||
**Сайт:** [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 |