#Руководство: создание плагина водяного знака

В этом руководстве показано, как одной фразой поручить ИИ разработать полноценный плагин водяного знака NocoBase — от создания каркаса до включения и проверки, всё выполняет ИИ.

#Итоговый результат

После включения плагина:

• На страницах NocoBase отображается полупрозрачный водяной знак с именем текущего вошедшего пользователя
• Водяной знак нельзя удалить, просто убрав DOM — периодическая проверка автоматически восстановит его
• Текст водяного знака, прозрачность и размер шрифта настраиваются в разделе «Настройки плагина»

#Предварительные требования

Убедитесь, что у вас есть:

1. Рабочее окружение разработки NocoBase (NocoBase Skills устанавливаются автоматически при инициализации NocoBase CLI)
2. Редактор с поддержкой ИИ агентов (например, Claude Code, Codex, Cursor и т. д.)

#Начало работы

В корневом каталоге проекта NocoBase отправьте ИИ следующий запрос:

Помоги мне использовать навык nocobase-plugin-development для разработки плагина водяного знака NocoBase.
Требования: наложить полупрозрачный водяной знак на страницу с именем текущего вошедшего пользователя, чтобы предотвратить утечку данных через скриншоты.
Периодически проверять, не удалён ли DOM водяного знака, и при необходимости восстанавливать его.
Поддержать настройку текста водяного знака, прозрачности и размера шрифта на странице настроек плагина.
Имя плагина — @my-project/plugin-watermark

#Что сделал ИИ

После получения требований ИИ автоматически выполнит следующие шаги:

#1. Анализ требований и подтверждение плана

ИИ сначала проанализирует, какие точки расширения NocoBase нужны этому плагину, затем представит план разработки. Например:

На стороне сервера:

• Коллекция watermarkSettings для хранения конфигурации водяного знака (text, opacity, fontSize)
• Пользовательский API для чтения и записи настроек водяного знака
• Конфигурация ACL: вошедшие пользователи могут читать, администраторы — записывать

На стороне клиента:

• Страница настроек плагина с формой для настройки параметров водяного знака
• Логика отрисовки водяного знака: чтение конфигурации и наложение водяного знака на страницу
• Обнаружение вмешательства с таймером для мониторинга DOM водяного знака

После подтверждения плана ИИ приступает к написанию кода.

#2. Создание каркаса плагина

yarn pm create @my-project/plugin-watermark

ИИ генерирует стандартную структуру каталогов плагина в packages/plugins/@my-project/plugin-watermark/.

#3. Написание серверного кода

ИИ сгенерирует следующие файлы:

• Определение коллекции — таблица watermarkSettings с полями text, opacity и fontSize
• Пользовательский API — эндпоинты для чтения и обновления настроек водяного знака
• Конфигурация ACL — вошедшие пользователи могут читать настройки водяного знака, администраторы — изменять их

#4. Написание клиентского кода

• Страница настроек плагина — форма Ant Design для настройки текста водяного знака, прозрачности (ползунок) и размера шрифта
• Отрисовка водяного знака — создаёт полноэкранное наложение canvas/div на странице с именем текущего вошедшего пользователя
• Обнаружение вмешательства — двойная защита с MutationObserver и таймером; водяной знак немедленно восстанавливается при удалении DOM

#5. Интернационализация

ИИ автоматически генерирует языковые пакеты на китайском и английском — дополнительных действий с вашей стороны не требуется:

• src/locale/zh-CN.json — переводы на китайский
• src/locale/en-US.json — переводы на английский

#6. Включение плагина

yarn pm enable @my-project/plugin-watermark

После включения откройте страницу NocoBase — вы увидите водяной знак, наложенный на содержимое.

#Сколько времени это заняло

От ввода запроса до работающего плагина уходит примерно 3–5 минут. ИИ выполнил следующую работу:

#Хотите создать ещё плагины?

Плагин водяного знака в основном затрагивает клиентскую отрисовку и простое серверное хранение. Если хотите узнать, чем ещё ИИ может помочь — например, пользовательские блоки, сложные связи коллекций, расширения рабочего процесса и многое другое — см. Поддерживаемые возможности.

#Связанные ссылки

• Быстрый старт ИИ-разработки плагинов — быстрый старт и обзор возможностей
• Поддерживаемые возможности — всё, чем ИИ может помочь, с примерами запросов
• Разработка плагинов — полное руководство по разработке плагинов NocoBase
• NocoBase CLI — инструмент командной строки для установки и управления NocoBase