Тестовое задание · 20 Jun 2023

dubhe - доска авторов и постов, переписанная в рабочую поверхность-картотеку

• Vue 3
• TypeScript
• Vue CLI
• SCSS
• vee-validate
• vuedraggable
• OKLCH
• Responsive
• Accessible

Vue 3 + TypeScript (Vue CLI / webpack) тестовое задание: одна доска, которая забирает десять авторов и их посты из API JSONPlaceholder и позволяет создавать, редактировать, удалять и перетаскивать посты из колонки одного автора к другому. Стек сохранил, остальное переписал. По корректности: формы добавления и редактирования импортировали несуществующий хелпер yup и падали при монтировании, так что валидация вообще не работала - переписал на корректную схему object/string с переведёнными сообщениями; слой данных грузил авторов, а затем посты каждого автора последовательно и без обратной связи - заменил на параллельную загрузку через Promise.all, которая чисто сбрасывается при повторном запросе и несёт явный статус по каждому автору, так что каждая колонка показывает свои состояния загрузки, пустоты и ошибки; а оригинал монтировал отдельное скрытое модальное окно редактирования внутри каждой карточки поста (около сотни экземпляров, каждый - свой vue-final-modal), что свёрнуто в одно общее окно редактирования, управляемое с доски, - карточка лишь эмитит запрос на редактирование. Перетаскивание между колонками (vuedraggable поверх общей группы SortableJS) сделано надёжным и получило FLIP-анимацию, так что карточки, которые сдвигает перемещаемый пост, плавно едут вверх или вниз на месте, а в качестве не-drag запасного варианта есть клавиатурный select 'переместить к автору'. Редизайн - выдержанная OKLCH-система-картотека 'Atelier Ledger': тёплый бумажный холст, охряный акцент, Fraunces в заголовках поверх Inter в тексте, колонки как подписанные вкладки папок, посты как карточки картотеки, с канонической светлой темой и отполированной тёмной. Всё это - полноэкранный шелл: сама страница не скроллится; лента колонок скроллится по горизонтали, а каждая колонка скроллит свои посты по вертикали, так что на экране 1080 шапка, доска и футер остаются в кадре. Движение - ease-out-expo везде: колонки появляются со стаггером, шапка плавно въезжает, карточки приподнимаются на hover, у модалок согласованные анимации появления и скрытия. Доступность - реальная база: skip-ссылка, лендмарки и единственный h1, доступные имена у каждой иконочной кнопки и контрола перемещения, фокус-кольца focus-visible, регион aria-live для оповещений о создании/редактировании/удалении/перемещении, и guard'ы reduced-motion, - а вёрстка честный адаптив от 390 до 1440, который на телефонах сворачивает горизонтальную ленту колонок в стопку в один столбец. Идёт с кастомным фавиконом-картотекой (SVG, размеры PNG, веб-манифест). Vue 3 + TypeScript + Vue CLI + vee-validate + vuedraggable + vue-final-modal + SCSS, self-hosted на сервере Hetzner за Caddy.