#Практика: разработка плагина водяного знака

Этот кейс показывает, как одной фразой заставить AI разработать полноценный плагин водяного знака для NocoBase — от создания scaffold до проверки активации, всё делает AI.

#Итоговый эффект

После активации плагина:

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

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

Убедитесь, что Вы:

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

#Начало

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

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

#Что сделал AI

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

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

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

Серверная часть:

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

Клиентская часть:

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

После подтверждения плана AI начинает писать код.

#2. Создание scaffold плагина

yarn pm create @my-project/plugin-watermark

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

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

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

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

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

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

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

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

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

#6. Активация плагина

yarn pm enable @my-project/plugin-watermark

После активации откройте страницу NocoBase, и Вы увидите водяной знак, наложенный поверх содержимого.

#Сколько времени занял весь процесс

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

#Хотите сделать ещё больше плагинов?

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

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

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