• Deutsch

      • Praxisbeispiel: Watermark-Plugin entwickeln

      Dieses Beispiel zeigt, wie Sie mit nur einem Satz die KI dazu bringen, ein vollständiges NocoBase-Watermark-Plugin zu entwickeln – vom Erstellen des Gerüsts bis zur Aktivierungsprüfung wird der gesamte Prozess von der KI durchgeführt.

      Endergebnis

      Nach Aktivierung des Plugins:

      • Ein halbtransparentes Wasserzeichen wird über die NocoBase-Seiten gelegt und zeigt den Namen des aktuell angemeldeten Benutzers an
      • Das Wasserzeichen kann nicht durch Löschen des DOM entfernt werden – eine regelmäßige Prüfung generiert es automatisch neu
      • Unter „Plugin-Konfiguration" können Wasserzeichentext, Transparenz und Schriftgröße angepasst werden

      watermark plugin

      Voraussetzungen

      Empfohlene Vorablektüre

      Stellen Sie sicher, dass Sie:

      1. Eine laufende NocoBase-Entwicklungsumgebung haben (NocoBase Skills werden bei der Initialisierung der NocoBase CLI automatisch installiert)
      2. Einen Editor mit KI-Agent-Unterstützung geöffnet haben (z. B. Claude Code, Codex, Cursor usw.)
      Hinweis
      • NocoBase befindet sich derzeit in der Migration von client (v1) zu client-v2. client-v2 befindet sich noch in der Entwicklung. Der von der KI-Entwicklung generierte Client-Code basiert auf client-v2 und kann nur unter dem Pfad /v/ verwendet werden. Er ist als Vorschau gedacht und nicht für den direkten Einsatz in der Produktion empfohlen.
      • Der von der KI generierte Code ist nicht zwangsläufig zu 100 % korrekt. Es wird empfohlen, ihn vor der Aktivierung zu überprüfen. Wenn zur Laufzeit Probleme auftreten, können Sie die Fehlermeldung an die KI senden, damit diese die Fehlersuche und -behebung fortsetzt – meist sind nur wenige Konversationsrunden erforderlich.

      Loslegen

      Senden Sie im Stammverzeichnis Ihres NocoBase-Projekts die folgende Eingabeaufforderung an die KI:

      Hilf mir mit dem nocobase-plugin-development Skill, ein NocoBase-Watermark-Plugin zu entwickeln.
Anforderungen: Halbtransparentes Wasserzeichen über die Seite legen, das den Namen des aktuell angemeldeten Benutzers anzeigt, um Screenshot-Lecks zu verhindern.
Regelmäßig prüfen, ob das Wasserzeichen-DOM gelöscht wurde; falls ja, neu generieren.
Auf der Plugin-Einstellungsseite die Konfiguration von Wasserzeichentext, Transparenz und Schriftgröße unterstützen.
Plugin-Name: @my-project/plugin-watermark

      Was die KI gemacht hat

      Nachdem die KI die Anforderungen erhalten hat, führt sie folgende Schritte automatisch aus:

      1. Anforderungen analysieren und Plan bestätigen

      Die KI analysiert zunächst, welche NocoBase-Erweiterungspunkte dieses Plugin benötigt, und stellt Ihnen einen Entwicklungsplan vor. Zum Beispiel:

      Serverseite:

      • Eine watermarkSettings-Datentabelle, die die Wasserzeichenkonfiguration speichert (Text, Transparenz, Schriftgröße)
      • Eine benutzerdefinierte API zum Lesen und Schreiben der Wasserzeichenkonfiguration
      • ACL-Konfiguration: Angemeldete Benutzer können lesen, Administratoren können schreiben

      Clientseite:

      • Plugin-Einstellungsseite mit einem Formular zur Konfiguration der Wasserzeichenparameter
      • Wasserzeichen-Renderlogik: Wasserzeichen über die Seite legen, nachdem die Konfiguration gelesen wurde
      • Manipulationsschutz: Timer überwacht das Wasserzeichen-DOM

      Nach Bestätigung des Plans beginnt die KI mit der Codegenerierung.

      2. Plugin-Gerüst erstellen

      yarn pm create @my-project/plugin-watermark

      Die KI generiert unter packages/plugins/@my-project/plugin-watermark/ die Standard-Verzeichnisstruktur des Plugins.

      3. Serverseitigen Code schreiben

      Die KI generiert folgende Dateien:

      • Datentabellendefinition — watermarkSettings-Tabelle mit den Feldern text, opacity, fontSize
      • Benutzerdefinierte API — Schnittstellen zum Lesen und Aktualisieren der Wasserzeichenkonfiguration
      • ACL-Konfiguration — Angemeldete Benutzer können die Wasserzeichenkonfiguration lesen, Administratoren können sie ändern

      4. Clientseitigen Code schreiben

      • Plugin-Einstellungsseite — Ein Ant Design Formular zur Konfiguration von Wasserzeichentext, Transparenz (Schieberegler) und Schriftgröße
      • Wasserzeichen-Rendering — Erstellt eine bildschirmfüllende Canvas-/Div-Overlay-Schicht auf der Seite, die den Namen des aktuell angemeldeten Benutzers anzeigt
      • Manipulationsschutz — Doppelte Absicherung durch MutationObserver und Timer; bei Löschen des DOM wird sofort neu generiert

      5. Internationalisierung

      Die KI generiert automatisch Sprachpakete für Chinesisch und Englisch, ohne dass Sie zusätzlich aktiv werden müssen:

      • src/locale/zh-CN.json — Chinesische Übersetzung
      • src/locale/en-US.json — Englische Übersetzung

      6. Plugin aktivieren

      yarn pm enable @my-project/plugin-watermark

      Nach der Aktivierung sehen Sie beim Öffnen einer NocoBase-Seite das Wasserzeichen über dem Inhalt.

      Wie lange hat der gesamte Prozess gedauert?

      Von der Eingabeaufforderung bis zur Verwendbarkeit des Plugins vergehen etwa 3–5 Minuten. Die KI hat folgende Aufgaben erledigt:

      AufgabeGeschätzte manuelle EntwicklungKI-Bearbeitung
      Gerüst erstellen2 MinutenAutomatisch
      Datentabelle + API20 MinutenAutomatisch
      Plugin-Einstellungsseite30 MinutenAutomatisch
      Wasserzeichen-Rendering + Manipulationsschutz40 MinutenAutomatisch
      ACL-Konfiguration10 MinutenAutomatisch
      Internationalisierung15 MinutenAutomatisch
      Gesamt~2 Stunden~5 Minuten

      Möchten Sie weitere Plugins entwickeln?

      Das Watermark-Plugin betrifft hauptsächlich Frontend-Rendering und einfache Backend-Speicherung. Wenn Sie wissen möchten, was die KI sonst noch für Sie tun kann – wie benutzerdefinierte Blöcke, komplexe Datentabellenbeziehungen, Workflow-Erweiterungen usw. –, werfen Sie einen Blick auf Unterstützte Funktionen.