Все проекты

Тестовое задание23 Jan 2024

atria - тестовое на Vue: список серверов, превращённый в тёплую панель инфраструктурного журнала

atria - тестовое на Vue: список серверов, превращённый в тёплую панель инфраструктурного журналаРемейк
  • Vue 3
  • TypeScript
  • Vite
  • Tailwind CSS
  • vue-router
  • OKLCH
  • Responsive
  • Accessible

Тестовое на Vue 3 + TypeScript + Vite + Tailwind: одноэкранный master/detail, который загружает набор сгенерированных серверов (у каждого id клиента, имя хоста и тип - vds, hosting или dedicated), показывает их списком слева и редактирует выбранный справа, с генерацией, очисткой, сохранением и удалением. Оставил фреймворк и переписал остальное. По корректности: список рендерил v-for с ключом по неуникальному id клиента, поэтому правка или удаление строки заставляли Vue переиспользовать не тот DOM-узел, а выделение цеплялось не за ту запись - перевёл ключ на уникальный id; у кнопок Delete и Cancel внутри формы не было type, они по умолчанию были submit и тихо запускали сохранение на каждый клик - сделал их настоящими button; Clear очищал список, но оставлял редактор привязанным к уже удалённой записи, тупик без сохранения - заодно сбрасываю выделение; а домашний экран пересоздавал случайный список при каждом mount, теряя правки при возврате на страницу - сделал посев один раз. Мелочи: select приводился к неверному типу элемента, type-only импорты шли как значения, остались дефолтные title, favicon и страницы-заглушки от Vite. Редизайн - осознанный тёплый «инфраструктурный журнал»: вместо рефлекса тёмной ops-консоли светлая система крем-и-чернила на OKLCH (с тёплым «эспрессо» тёмным вариантом, не сине-графитовым), моноширинный шрифт для всех машинных полей, чтобы идентификаторы читались как данные, чистый гротеск для подписей и фирменные линованная рейка плюс левая колонка-нумератор, так что список читается как строки в журнале. Двухпанельная раскладка - настоящий адаптив 390-1440: панели складываются на мобильном, а редактор сам прокручивается в зону видимости при выборе строки, так что тап никогда не «пустой» - и доступность как база: кликабельные строки это настоящие button с aria-pressed, skip-ссылка, лендмарки и один h1, focus-visible кольца, заголовки по маршрутам, контраст на обеих темах и guard на reduced-motion. Добавил и полировку, которой не было в каркасе: переключатель темы с пред-покраской без мигания, тосты и инлайн-подтверждения на разрушающих действиях, состояния пустоты, загрузки и ошибки, наполненную страницу About с легендой типов и кастомный favicon-плитку (SVG, размеры PNG, web-манифест). Self-hosting на сервере Hetzner за Caddy с серым облаком в DNS, без проксирования Cloudflare.

ДемоКод