Сделать шаблонное UI

[SmurW632]

Предложение: Создание Layout-системы для авторизованных страниц

Описание проблемы

В текущей реализации приложения отсутствует единая структура для страниц, требующих авторизации. Многие компоненты (шапка, навигация, футер) дублируются в каждом представлении, что приводит к:

• Дублированию кода - одна и та же разметка повторяется в каждом .vue файле
• Сложности поддержки - изменения в навигации требуют правки всех файлов
• Нарушению DRY принципа - код не соответствует принципу "Don't Repeat Yourself"
• Увеличению времени разработки - каждый новый компонент требует копирования структуры

Текущая ситуация

Пример дублирования кода в CatalogView.vue:

<template>
  <div class="container container-wide">
    <!-- Шапка (дублируется в каждом компоненте) -->
    <header class="header">
      <div class="header-logo">
        <span class="logo-emoji">📚</span>
        <span class="logo-text">EduPlatform</span>
      </div>
      <nav class="header-nav">
        <router-link to="/catalog" class="active">Каталог</router-link>
        <router-link to="/my-courses">Мои курсы</router-link>
        <a href="#">О нас</a>
      </nav>
      <div class="header-actions" v-if="!isAuthenticated">
        <router-link to="/login" class="btn btn-text">Вход</router-link>
        <router-link to="/register" class="btn btn-primary btn-sm">Регистрация</router-link>
      </div>
      <div class="header-actions" v-else>
        <span class="user-name">{{ userName }}</span>
        <button @click="logout" class="btn btn-text">Выйти</button>
      </div>
    </header>

    <!-- Основной контент страницы -->
    <div class="content">
      <!-- ... -->
    </div>
  </div>
</template>

Предлагаемое решение

Создать систему Layout компонентов для разделения структуры страниц (@Kinoe141):
src/
├── layouts/
│ ├── DefaultLayout.vue # Основной layout с шапкой и футером
│ ├── AuthLayout.vue # Layout для страниц авторизации (без шапки)
│ └── AdminLayout.vue # Layout для админ-панели (на будущее)
├── components/
│ ├── AppHeader.vue # Шапка приложения
│ ├── AppFooter.vue # Футер приложения
│ ├── AppSidebar.vue # Сайдбар для авторизованных пользователей

Пример реализации

layouts/DefaultLayout.vue

<template>
  <div class="app-layout">
    <AppHeader />
    <AppSidebar v-if="isAuthenticated" />
    <main class="app-main" :class="{ 'with-sidebar': isAuthenticated }">
      <div class="container">
        <Breadcrumbs />
        <slot /> <!-- Сюда будет вставляться контент страницы -->
      </div>
    </main>
    <AppFooter />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useAuthStore } from '@/js/stores/auth'
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import AppSidebar from '@/components/AppSidebar.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'

const authStore = useAuthStore()
const isAuthenticated = computed(() => authStore.isAuthenticated)
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  padding: 24px 0;
}

.app-main.with-sidebar {
  margin-left: 280px;
  padding: 24px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .app-main.with-sidebar {
    margin-left: 0;
  }
}
</style>

AppHeader.vue
AuthLayout.vue
HomeView.vue
index.js
LoginView.vue

Преимущества предложенного решения

• DRY принцип - код пишется один раз и переиспользуется
• Легкость поддержки - изменения в навигации в одном месте
• Быстрая разработка - новые страницы создаются за минуты
• Единый стиль - все страницы автоматически следуют дизайн-системе
• Консистентность - одинаковый интерфейс на всех страницах
• Удобная навигация - меню и хлебные крошки всегда на месте
• Быстрая загрузка - компоненты кешируются
• Масштабируемость - легко добавлять новые Layout'ы (админка, мобильная версия)
• Тестируемость - Layout'ы можно тестировать отдельно
• Чистая архитектура - разделение ответственности