Техническое задание: Клон интерфейса чат-приложения
Основная цель
Разработать визуально точную, но функционально упрощенную версию интерфейса популярного мессенджера в виде одностраничного приложения (SPA) на Vue 3.
Ключевые требования
Технический стек
- Фреймворк: Vue 3 с использованием синтаксиса
<script setup>.
- Стилизация: Стили компонентов должны быть написаны внутри самих компонентов (scoped или в теге
<style>).
- Логика: Используется только JavaScript, без сторонних CSS-фреймворков и тяжелых библиотек.
Функциональность
- Приложение должно состоять из нескольких страниц (например, список чатов, страница чата, настройки), между которыми осуществляется навигация.
- Все интерактивные элементы (кнопки, пункты списков, переключатели) должны иметь заглушки. При клике должен срабатывать обработчик, который выводит в консоль браузера (
console.log) название или идентификатор элемента (например, значение v-model).
- Кнопка "Избранное" не ведет на отдельную страницу, а лишь выполняет
console.log.
- Все повторяющиеся элементы (списки чатов, сообщения, карточки) должны рендериться в цикле (
v-for) на основе локальных массивов данных-заглушек, созданных внутри компонента.
Визуальная часть (UI/UX)
- Интерфейс должен максимально соответствовать предоставленному референсу по визуальному стилю, расположению блоков и элементов.
- Обязательна поддержка двух цветовых тем: светлой и темной. Переключение между темами должно быть реализовано.
- Верстка должна быть предельно простой, но аккуратной, без излишних анимаций и сложных эффектов.
- Для фоновых изображений в карточках на главной странице можно использовать любые placeholder-изображения или градиенты.
- Количество элементов (карточек, чатов, сообщений) - на усмотрение разработчика, но достаточно для демонстрации работы циклов.
Данные и контент
- Все текстовые данные, имена пользователей, аватары, сообщения - произвольные (заглушки).
- Все ссылки на внешние ресурсы, названия компаний, телефоны и прочие реальные данные из референса должны быть заменены на вымышленные.