WANITIL Support Frontend

Веб-интерфейс системы технической поддержки сотрудников. Реализован единый метаданный CRUD-интерфейс для модулей Addresses, CRM, Service, Requests, Incidents, SLA, Configuration items, Device и System.

План реализации и принятые технические решения приведены в docs/PROJECT_PLAN.md.

Возможности

• аутентификация Knox Token;
• загрузка текущего пользователя, эффективных разрешений и доступной навигации через /me/, /me/permissions/ и /me/capabilities/;
• мгновенное применение языка и светлой/тёмной темы;
• форма управления профилем и ролевое ограничение меню/CRUD-действий;
• навигация по модулям и сущностям;
• серверная пагинация, поиск, выбор строк и состояния ошибок;
• создание и редактирование через формы, построенные из OpenAPI-схем;
• удаление с подтверждением;
• пересчёт SLA и эскалация для основных процессов;
• сохранение параметров списка в URL.

Стек

Vue 3, TypeScript, Nuxt 3, Vuetify 3, Pinia, Vitest.

Запуск

Требуется Node.js 18+ (для новых проектов рекомендуется Node.js 20 LTS).

cp .env.example .env
npm install
npm run dev

По умолчанию API доступен по адресу http://localhost:10000/api/v1. Другой адрес задаётся переменной NUXT_PUBLIC_API_BASE.

Запуск в Podman

Соберите production-образ из корня проекта:

podman build -t wanitil-main-web -f Containerfile .

Запустите контейнер, передав доступный браузеру адрес API:

podman run --rm --name wanitil-main-web \
  -p 3000:3000 \
  -e NUXT_PUBLIC_API_BASE=http://localhost:10000/api/v1 \
  wanitil-main-web

Интерфейс будет доступен по адресу http://localhost:3000. Значение NUXT_PUBLIC_API_BASE — публичный URL: его должен видеть браузер пользователя, поэтому имя контейнера API обычно указывать здесь не следует.

Для фонового запуска добавьте параметр -d. Проверить состояние контейнера и его healthcheck можно командами:

podman ps
podman healthcheck run wanitil-main-web

Проверки

npm run typecheck
npm test
npm run build

Структура

• config/modules.ts — реестр модулей и ресурсов;
• components/ResourceCrud.vue — общий список, фильтры и CRUD;
• components/ResourceForm.vue — динамическая форма;
• server/api/resource-schema.get.ts — преобразование OpenAPI request schema;
• stores/auth.ts — состояние сессии;
• docs/PROJECT_PLAN.md — исходный план и критерии готовности.

/api/v1/main/*.

OpenAPI: http://localhost:10000/api/v1/docs/, основные методы: