Тестовое задание 27 Jan 2024
alnitak - доска задач и дашборд выручки, пересобранные как редакторская рабочая панель
- Nuxt 3
- Vue 3
- TypeScript
- ECharts
- Pinia
- Tailwind
- Cloudflare
SPA с двумя поверхностями - канбан-доска на localStorage (этапы, перетаскиваемые карточки задач) и русскоязычный финансовый дашборд (общая выручка, прибыль по продуктам, план против факта на ECharts) - пересобранное целиком. Оригинал выглядел как наполовину готовое демо: текст-заглушка ('Welcome, recruiter or whoever you are'), три несвязанных визуальных языка (светлый канбан, тёмный дашборд, плиточная главная), стоковый синий Tailwind вместо бренда и реальные дефекты под капотом. С них и начал: композабл графиков утекал инстансом ECharts при каждом заходе и переинициализировал тот же узел вместо обновления; обработчик Escape сравнивал не ту строку клавиши ('Esc' вместо 'Escape'), из-за чего шорткат не работал; карточка задачи вкладывала кнопку удаления и ссылку редактирования внутрь внешней кнопки - невалидный HTML; ID на миллисекундах сталкивались при быстром добавлении; валидация создания задачи проваливалась и сохраняла задачи с пустым заголовком; ссылка на этап была устаревшим одноразовым снимком. Поверх этого - одна авторская система: тёплая бумажная палитра OKLCH с подкрашенными нейтралями и единственным акцентом цвета глины, Fraunces для заголовков и Inter Tight с табличными цифрами для данных, повторяющийся акцентный кант 'ledger rule' как фирменный приём, и тема ECharts, пересобранная из дефолтного сине-голубого в согласованную палитру глина/шалфей/сланец, приведённую к rgb, чтобы линии и заливки реально отрисовывались и не пропадали при наведении. Доступность - честный уровень: skip-ссылка, лендмарки header/main/footer, модалка с фокус-ловушкой, Escape и возвратом фокуса, видимый фокус, семантика списков, доступные имена на русском и учёт prefers-reduced-motion. Вёрстка - честный адаптив 390-1440 со snap-прокруткой колонок и графиками, сворачивающимися в одну колонку, а в UX добавились онбординг-пустое состояние, скелетная загрузка, брендированная страница ошибки и сброс доски. Nuxt 3 + Vue 3 + TypeScript + Pinia + ECharts + Tailwind, статическая сборка (SPA) и деплой на Cloudflare Pages.