Интерфейс и формы
На этой странице
Через интерфейс пользователь проходит рабочий процесс приложения. OwlMeans Common объединяет привычные UI-библиотеки с формами, навигацией и соглашениями по идентификации.
Библиотеки по назначению
| Библиотека или стандарт | Назначение | Публичный пакет OwlMeans |
|---|---|---|
| React и React DOM | Отрисовывают интерактивные экраны приложения. | @owlmeans/web-client |
| shadcn/ui | Предоставляет UI-компоненты для текущего семейства веб-панелей. | @owlmeans/web-panel |
| Radix UI | Предоставляет базовые элементы интерфейса: диалоги, меню и элементы выбора. | @owlmeans/web-panel |
| Tailwind CSS | Задаёт единое оформление с помощью утилитарных классов. | @owlmeans/web-panel |
| Lucide | Предоставляет значки для повторного использования в интерфейсе. | @owlmeans/web-panel |
| React Hook Form и адаптеры резолверов | Управляют полями форм и подключают проверку данных. | @owlmeans/client-panel |
| i18next | Поддерживает перевод текстов приложения. | @owlmeans/client-i18n |
| Sonner | Показывает уведомления приложения. | @owlmeans/web-panel |
| react-dropzone | Обрабатывает выбор и загрузку файлов. | @owlmeans/web-client |
| qrcode.react | Отрисовывает QR-коды там, где они нужны. | @owlmeans/web-panel |
Это общедоступные зависимости и стандарты экосистемы. Точный набор зависимостей приложения определяется сгенерированным проектом и разработанными функциями; не каждому приложению нужны все перечисленные библиотеки.
Использование в проекте
- Опишите нужное поведение в спецификации или истории.
- Попросите агента следовать существующим в проекте соглашениям OwlMeans Common.
- Чтобы разобраться в зависимости, изучите документацию соответствующего публичного пакета.
- Опробуйте поведение в предварительном просмотре и проверьте правила доступа.
Попросите агента создать форму контакта с подписями полей, понятными сообщениями об ошибках и навигацией с клавиатуры. Введите некорректный адрес электронной почты и убедитесь, что форма объясняет, что нужно исправить.
UI — набор экранов и элементов управления, которыми пользуется человек. Библиотека форм помогает единообразно обрабатывать введённые значения, ошибки и отправку данных.
Об архитектуре приложения читайте в OwlMeans Tech Concept, а о работе со средой агента — в руководстве по продолжению разработки с другим агентом.
Пример приложения
Категория: CRM и управление клиентами. Пример: CRM для небольшой команды, где контакты закреплены за ответственными сотрудниками, а руководитель имеет доступ к ним.
Названия и товарные знаки
Названия shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react и связанные с ними знаки принадлежат соответствующим владельцам или сопровождающим проектов. Упоминания служат для обозначения продуктов, стандартов или примеров исходного кода. Документация OwlMeans не подразумевает спонсорства или одобрения со стороны этих владельцев.