Чат приложение

Современное чат-приложение на Vue 3 + Pinia с поддержкой сохранения истории сообщений и управлением состоянием.

🚀 Технологии

• Vue 3 - Progressive JavaScript Framework
• Pinia - State management для Vue 3
• Vite - Modern frontend build tool
• Vue Router 4 - Client-side routing

📋 Возможности

• Отправка и получение сообщений в реальном времени
• Имитация отказа отправки (10% вероятность)
• Повторная отправка неудачных сообщений
• Сохранение истории сообщений в localStorage
• Синхронизация между вкладками браузера
• Ввод имени пользователя

🛠️ Установка

npm install

📦 Запуск

Разработка

npm run dev

Приложение откроется на http://localhost:5173

Сборка

npm run build

Просмотр собранного приложения

npm run preview

📁 Структура проекта

src/
├── components/          # Vue компоненты
│   ├── Chat.vue        # Основной компонент чата
│   ├── Message.vue     # Компонент сообщения
│   ├── YourNameComponent.vue  # Ввод имени пользователя
│   └── ui/             # UI компоненты
│       ├── CustomButton.vue
│       └── CustomInput.vue
├── store/
│   └── chatStore.ts    # Pinia store для управления состоянием
├── models/
│   └── Message.ts      # Модель сообщения
├── router/
│   └── index.ts        # Vue Router конфигурация
├── assets/
│   └── css/
│       └── main.css    # Основные стили
├── utils.ts            # Утилиты
├── App.vue             # Корневой компонент
└── main.ts             # Entry point

🔄 Поток данных

1. Отправка сообщения: User → ChatScreen Component → Pinia Store
2. Получение сообщения: Pinia Store → MessageItem Component → Render
3. Сохранение: Pinia Store → localStorage
4. Навигация: Vue Router с автоматической переадресацией на основе auth state

🎯 Основные действия

• Введите имя пользователя на стартовой странице /name
• Напишите сообщение и нажмите "Отправить" или Enter
• Некоторые сообщения могут не отправиться (красная граница)
• Нажмите на иконку повтора, чтобы повторно отправить сообщение
• История сохраняется автоматически

💾 Локальное хранилище

• history - Массив успешно отправленных сообщений
• message - Текущее сообщение для синхронизации между вкладками

🛠️ Code Quality

• ESLint - Code linting и форматирование
• TypeScript - Type-safe development
• BEM - CSS naming convention

Запуск линтера:

npm run lint

📝 Лицензия

MIT