DLE/frontend/src/assets/styles

Структура стилей проекта

Обзор

Проект использует структурированный подход к организации стилей CSS для улучшения поддерживаемости, предотвращения конфликтов и обеспечения согласованности пользовательского интерфейса.

Файлы стилей

• variables.css - CSS-переменные (цвета, размеры, отступы)
• base.css - Базовые стили для всего приложения и сброс стилей
• layout.css - Стили для основной структуры макета приложения
• global.css - Общие утилитарные классы, доступные во всем приложении
• home.css.bak - Устаревший файл, переименован в .bak. Стили перенесены в scoped стили компонентов

Приоритеты использования стилей

1. Компонентные scoped стили - для стилей, специфичных для компонента
2. global.css - для общих классов, используемых в нескольких компонентах
3. variables.css - для общих переменных CSS во всем проекте

Рекомендации по использованию

Для новых компонентов:

1. Используйте scoped стили внутри файла компонента:

   <style scoped>
   .component-name {
     /* стили компонента */
   }
   </style>
   

2. Используйте глобальные классы для общих элементов:

   <button class="btn btn-primary">Сохранить</button>
   

3. Используйте CSS-переменные вместо жестко закодированных значений:

   .element {
     color: var(--color-primary);
     padding: var(--spacing-md);
   }
   

Для существующих компонентов:

1. При обновлении компонента постепенно переносите стили из home.css в scoped стили компонента
2. Не удаляйте стили из home.css до полного тестирования всех зависящих компонентов

Глобальные CSS-классы

Контейнеры

• .page-container - Основной контейнер страницы
• .card - Контейнер для блока информации

Кнопки

• .btn - Базовый класс для всех кнопок
• .btn-primary - Основная (зеленая) кнопка
• .btn-secondary - Дополнительная (синяя) кнопка
• .btn-accent - Акцентная (фиолетовая) кнопка
• .btn-danger - Кнопка опасного действия (красная)

Формы

• .form-control - Элемент формы (input, select, textarea)
• .form-group - Группа элементов формы
• .form-label - Метка для элемента формы

Утилиты

• .text-center - Выравнивание текста по центру
• .d-flex - Включение flex-контейнера
• .mt-*, .mb-* - Отступы сверху/снизу

Процесс миграции

Постепенно мы переходим от использования большого глобального файла home.css к модульным scoped стилям в компонентах и более структурированным общим стилям.

1. Новые компоненты должны использовать только scoped стили и global.css
2. При обновлении существующих компонентов переносите стили из home.css
3. После полного перехода home.css будет удален

Выполненная миграция (обновлено)

Миграция стилей завершена для следующих компонентов:

1. ChatInterface.vue - перенесены стили интерфейса чата, включая адаптивные стили для мобильных устройств
2. Message.vue - перенесены стили для сообщений с разными типами вложений

Файл home.css переименован в home.css.bak и больше не используется в проекте. Ссылка на него удалена из HomeView.vue.

Для запуска проекта с проверкой стилей можно использовать команду:

yarn dev:styles