---
title: "Практика: разработка плагина водяного знака"
description: "Разработка плагина водяного знака для NocoBase одной фразой через AI: наложение водяного знака на страницу, защита от изменений, настраиваемые параметры водяного знака."
keywords: "AI-разработка,плагин водяного знака,плагин NocoBase,практический кейс,AI-программирование"
---

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

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

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

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

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

![watermark plugin](https://static-docs.nocobase.com/20260416170645.png)

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

:::tip Перед чтением

- [NocoBase CLI](../ai/quick-start.md) — установка и запуск NocoBase
- [Быстрый старт по разработке плагинов с помощью AI](./index.md) — установка Skills

:::

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

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

:::warning Внимание

- NocoBase сейчас переходит с `client` (v1) на `client-v2`, и `client-v2` пока находится в разработке. Клиентский код, сгенерированный AI-разработкой, основан на `client-v2` и работает только по пути `/v/`. Это для предварительного ознакомления, не рекомендуется использовать в продакшене.
- Сгенерированный AI код не всегда корректен на 100%, рекомендуется делать review перед включением. Если в процессе работы возникают ошибки, отправьте сообщение об ошибке AI, чтобы он продолжил диагностику и исправление — обычно проблема решается за несколько итераций диалога.

:::

## Начало

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

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

<video width="100%" height="450" controls>
  <source src="https://static-docs.nocobase.com/nocobase-plugin-dev-compressed.mp4" type="video/mp4">
</video>

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

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

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

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

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

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

<!-- Нужен скриншот терминала с выводом плана разработки от AI -->

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

```bash
yarn pm create @my-project/plugin-watermark
```

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

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

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

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

<!-- Нужен скриншот терминала, показывающий процесс генерации серверного кода AI -->

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

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

<!-- Нужен скриншот терминала, показывающий процесс генерации клиентского кода AI -->

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

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

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

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

```bash
yarn pm enable @my-project/plugin-watermark
```

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

<!-- Нужно видео: полный процесс от ввода промпта → генерация кода AI → активация плагина → появление водяного знака на странице → открытие страницы настроек и изменение параметров → водяной знак меняется соответственно -->

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

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

| Работа                              | Оценка ручной разработки | Выполнено AI |
| ----------------------------------- | ------------------------ | ------------ |
| Создание scaffold                   | 2 минуты                 | автоматически|
| Таблица данных + API                | 20 минут                 | автоматически|
| Страница настроек плагина           | 30 минут                 | автоматически|
| Отрисовка водяного знака + защита   | 40 минут                 | автоматически|
| Конфигурация ACL                    | 10 минут                 | автоматически|
| Интернационализация                 | 15 минут                 | автоматически|
| **Итого**                           | **~2 часа**              | **~5 минут** |


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

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

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

- [Быстрый старт по разработке плагинов с помощью AI](./index.md) — быстрый старт и обзор возможностей
- [Поддерживаемые возможности](./capabilities) — всё, что AI может сделать, с примерами промптов
- [Разработка плагинов](../plugin-development/index.md) — полное руководство по разработке плагинов NocoBase
- [NocoBase CLI](../ai/quick-start.md) — инструмент командной строки для установки и управления NocoBase
