📋 Todo List - Управление задачами

Веб-приложение для управления задачами с поддержкой проектов, тегов, подзадач и фильтрации. Сделано на Vue 3 и TypeScript использует шифрование для импорта/экспорта данных.

✨ Основные возможности

🎯 Управление задачами

• Создание и редактирование задач с интуитивным интерфейсом
• Статусы задач: К выполнению, В процессе, Готово
• Подзадачи с возможностью создания иерархической структуры
• Теги для категоризации и быстрого поиска
• Прогресс-бар для отслеживания выполнения подзадач

📁 Управление проектами

• Множественные проекты для организации задач по темам
• Переключение между проектами с сохранением контекста
• Создание, редактирование и удаление проектов
• Счетчик задач для каждого проекта

🔍 Фильтрация и поиск

• Поиск по названию задач
• Фильтрация по статусам (все, к выполнению, в процессе, готово)
• Фильтрация по тегам с цветовым кодированием
• Сброс фильтров одной кнопкой

📱 Адаптивный дизайн

• Мобильная версия с оптимизированным интерфейсом
• Модальные окна для мобильных устройств
• Touch-friendly элементы управления
• Адаптивная типографика и размеры

🔐 Безопасность данных

• Экспорт/импорт с паролем для резервного копирования

🚀 Технологический стек

• Vue 3 - Реактивный фреймворк
• TypeScript - Типизированный JavaScript
• Vite - Быстрый сборщик
• Tailwind CSS - Utility-first CSS фреймворк
• Lucide Vue - Современные иконки
• Crypto Web API - Шифрование данных

📦 Установка и запуск

Предварительные требования

• Node.js 22+
• npm или yarn

Установка зависимостей

npm install

Запуск в режиме разработки

npm run dev

Сборка для продакшена

npm run build

Предварительный просмотр сборки

npm run preview

🎮 Использование

Создание проекта

1. Нажмите кнопку "Новый проект" в боковой панели или мобильном меню
2. Введите название проекта
3. Проект автоматически станет активным

Добавление задач

1. Выберите проект
2. Нажмите "Добавить задачу"
3. Заполните название, выберите статус и добавьте теги
4. Нажмите "Добавить"

Работа с подзадачами

1. Кликните на задачу для редактирования
2. Используйте кнопку "+" для добавления подзадачи
3. Подзадачи отображаются с отступом и прогресс-баром

Фильтрация

1. Используйте поле поиска для поиска по названию
2. Выберите статусы для фильтрации
3. Кликните на теги для фильтрации по ним
4. Используйте "Сбросить все фильтры" для очистки

Экспорт/импорт данных

1. Нажмите кнопку экспорта в заголовке
2. Введите пароль для шифрования
3. Скачайте файл с данными
4. Для импорта выберите файл и введите пароль

📱 Мобильная версия

Приложение полностью адаптировано для мобильных устройств:

• Мобильное меню для управления проектами
• Модальные окна для фильтров и проектов
• Touch-оптимизированные элементы управления
• Компактные badge'и тегов
• Всегда видимые кнопки управления проектами

🏗️ Архитектура

Компоненты

• App.vue - Главный компонент приложения
• TaskItem.vue - Отдельная задача с подзадачами
• TaskList.vue - Список задач
• ProjectManager.vue - Управление проектами
• FilterControls.vue - Фильтры и поиск
• TagInput.vue - Ввод тегов
• Modal.vue - Модальные окна

Composables

• useTodo.ts - Основная логика управления задачами
• useStorage.ts - Работа с localStorage и шифрованием
• useTaskEdit.ts - Редактирование задач
• useTagColors.ts - Цветовое кодирование тегов
• useModal.ts - Управление модальными окнами

---

Создано с ❤️ на Vue 3 + TypeScript