Интерфейс и формы
На этой странице
Через интерфейс пользователь проходит рабочий процесс приложения. 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, а о работе с harness проекта — в руководстве «Продолжите разработку с другим агентом программирования».
Пример приложения
Категория: CRM и управление клиентами. Пример: CRM для небольшой команды с закреплением контактов за сотрудниками и доступом для руководителя.
Названия и товарные знаки
Названия shadcn/ui, React, React DOM, Radix UI, Tailwind CSS, Lucide, React Hook Form, i18next, Sonner, react-dropzone, qrcode.react и все связанные с ними товарные знаки остаются собственностью соответствующих владельцев или сопровождающих проектов. Упоминания обозначают продукты, стандарты или примеры исходного кода. Документация OwlMeans не подразумевает спонсорской поддержки или одобрения со стороны этих владельцев.