Это старая версия документа!
Содержание
Design Template: как использовать общие элементы интерфейса
Назначение: Справка по компоненту. Продукт: ShariX Open · Общий компонент.
Для кого: Разработчик · Разработчик интерфейса · Рецензент и приёмщик · Нейросеть.
Темы: Интерфейс → Библиотека элементов · Интерфейс → Формы.
Модуль design_template предоставляет повторно используемые элементы интерфейса:
- поля форм;
- действия;
- статусы;
- копирование;
- помощь;
- навигационные элементы;
- общие стили.
Бизнес-данные, права и допустимые операции остаются у страницы и её серверного кода.
Git-репозиторий называется sharix-open-webapp-design-template, а в приложении он используется как design_template. Начальная точка для поиска готового элемента — component_library/catalog.json и docs/component-library.md.
Что означает владелец элемента в каталоге
| Значение owner | Где находится реализация | Как действовать |
|---|---|---|
| shared | Общая реализация в design_template; конкретные template/CSS/JS указаны в записи. | Переиспользовать и изменять общий компонент, проверяя нужные страницы. |
| framework | Существующий элемент используемого framework, например Bootstrap. | Использовать принятый способ подключения, не делать вторую копию без причины. |
| product | Элемент или композиция конкретной сборки. | Проверить указанное место реализации; наличие записи ещё не означает перенос в общую библиотеку. |
| service | Композиция предметного сервиса. | Сохранить предметный смысл у сервиса; отдельно выделять только действительно общую часть. |
Каталог перечисляет элементы разных мест реализации. Нельзя считать каждый его пункт уже готовым shared-компонентом только потому, что он найден в одном списке.
Владелец элемента не определяет лицензию
Поле owner в каталоге показывает место реализации элемента. Значения shared, product и service не говорят, что соответствующий модуль открыт. Каталог может ссылаться на интерфейсы отдельно лицензируемых закрытых компонентов.
Перед использованием исходников проверить репозиторий, LICENSE и доступность реализации. На публичной странице описываются открытая библиотека design_template и её собственные компоненты. Ссылка в каталоге не является разрешением копировать шаблон или бизнес-логику закрытого модуля в общий элемент или публичный экспорт Penpot.
Слово shared означает совместное использование модуля, а не открытую лицензию. В установке ShariX Open могут присутствовать отдельно лицензируемые закрытые компоненты. Их внутренние модели, алгоритмы и инструкции описываются в intrawiki. Публичная Wiki обозначает только название и границу; за деталями и согласованием доступа обращаются к ответственным со стороны Platform.
Если обнаружена граница закрытого компонента, описание его интерфейса и доработку согласуют с ответственными Platform. В публичной задаче можно указать ID элемента, потребность и общую точку подключения без закрытой реализации.
Какой элемент выбрать
| Задача | Файлы или функция | Что остаётся у страницы |
|---|---|---|
| Отобразить поле формы | templates/design_template/components/form_field.html | Объект поля формы Django (BoundField), required, правила проверки, нормализация и обработка сохранения. Общий шаблон показывает подпись, поле, help text и ошибки; учитывает скрытые поля и checkbox. |
| Ввод телефона | apply_phone_inputs() в forms.py, static/design_template/phone_input.css и phone_input.js | Серверная нормализация и допустимость номера. Плюс отображается вне редактируемого значения; подпись и высота должны согласовываться с соседними полями. |
| Показать/скрыть пароль | static/design_template/password_input.css и password_input.js | Подключить общий механизм один раз. Второй переключатель на отдельной форме не добавляется. |
| Действие, статус, копирование | action.html, badge.html, copy_control.html | Право операции и бизнес-статус. Копируется уже доступный видимый текст; элемент не получает скрытый секрет с сервера. |
| Пустое состояние и помощь | empty_state.html, page_help.html | Текст для текущей роли и следующий доступный шаг. Инструкция deploy не подставляется в помощь обычному посетителю. |
| Группировка страниц кабинета | group_cabinet_pages() | Передать уже разрешённые страницы. Группировка не расширяет их права. |
Короткие имена HTML в таблице относятся к каталогу templates/design_template/components/. Для assets и функций точные пути смотрят в записи каталога и документации модуля.
Порядок изменения страницы
- Назвать задачу пользователя и его роль. Проверить существующий элемент и владельца его реализации.
- Прочитать ожидаемые входные данные шаблона и способ подключения CSS/JS в макете страницы.
- Переиспользовать подходящий элемент. Нейтральное поведение менять в design_template, а бизнес-логику страницы оставить у её модуля.
- Подключить CSS/JS один раз, сохранив порядок стилей и активную тему.
- Проверить настоящую страницу: пустой и заполненный ввод, серверную ошибку, длинную подпись, короткое значение, focus, клавиатуру, узкий экран и доступные темы.
- Уточнить ru/en тексты и контекстную справку по доступному действию.
Для формы дополнительно проверить:
- связь label с input;
- расположение ошибки и help text;
- телефонный префикс;
- единственный переключатель пароля.
Открытая галерея не подтверждает работоспособность конкретной формы.
Дизайн, макет и исполняемый интерфейс
Penpot помогает передать визуальное решение, а работающая форма определяется HTML/CSS/JS и серверной обработкой. Палитра, меню и предметная композиция отдельного продукта не становятся общей частью автоматически. Компонент использует предусмотренные токены оформления своей сборки; бизнес-модели не переносятся в тему.
После изменения общего элемента
Общие (shared) модули ShariX Open могут использоваться и в Platform. После публикации изменения нужно оповестить ответственного со стороны Platform и передать:
- репозитории и commits;
- описание изменения;
- результаты проверки.
Ответственный проверяет изменение, тестирует его и оформляет принятие в общий код по своим инструкциям в intrawiki. Действия на Platform не выполняются как продолжение публичной инструкции ShariX Open.
Уведомление должно содержать:
- ID элемента;
- изменённые файлы;
- commits;
- совместимые версии;
- проверенные страницы ShariX Open.
Это позволяет ответственному понять, где требуется его проверка. Порядок — публикация shared-изменений, критерии — приёмка.
Проверенная исходная база: 29.10.2026
Проверены опубликованные исходники указанных ревизий. Это source-анализ; он не подтверждает применённую версию, конфигурацию или успешный сценарий конкретного сервера.
- sharix-open-webapp-design-template: README.md — 8f96190d24c9.
- sharix-open-webapp-design-template: docs/component-library.md — 8f96190d24c9.
- sharix-open-webapp-design-template: forms.py — 8f96190d24c9.