Starten einer VSCode-Erweiterungs-Benutzeroberfläche für DBChat (Teil 7)

Dieses Tutorial setzt die Entwicklung von DBChat fort, einer VSCode-Erweiterung, die KI-Chat zur Interaktion mit Datenbanken nutzt. In den vorherigen Teilen ging es um die Einrichtung einer REPL, einer Datenbankverbindung und der LSP-Integration. Dieser Teil konzentriert sich auf die Erstellung einer Benutzeroberfläche (UI) in VSCode zum Verwalten von Datenbankverbindungen.

Das Ziel besteht darin, eine Schaltfläche in der linken Seitenleiste hinzuzufügen, die eine Chat-Ansicht zur Datenbankerkundung startet. Da sich der Cursor in der rechten Seitenleiste befindet, befindet sich DBChat auf der linken Seite. Für die Chat-Ansicht sind Datenbankverbindungen erforderlich, die über eine ~/.dbchat.toml-Konfigurationsdatei verwaltet werden (eingeführt in Teil 4). Dieser Teil erstellt eine Benutzeroberfläche zum Bearbeiten dieser Datei.

Die Benutzeroberfläche besteht aus:

1. Eine Liste der vorhandenen Datenbankverbindungen.
2. Eine Schaltfläche „ “ zum Hinzufügen neuer Verbindungen, die ein Formular „Verbindung hinzufügen“ öffnet.

Das aktualisierte package.json registriert die notwendigen Komponenten:

1. viewsContainers: Definiert die Seitenleistenschaltfläche in der Aktivitätsleiste.
2. views: Definiert das Panel (Webansicht), das der Schaltfläche zugeordnet ist.
3. menus: Fügt der Titelleiste des Panels eine Schaltfläche „ “ hinzu.

<code class="language-json">{
  "name": "dbchat",
  "displayName": "DBChat",
  "description": "Explore and Evolve Databases With Simple AI Chat",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.96.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:dbchat.ping",
    "onView:dbchat.chatPanel"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "dbchat.ping",
        "title": "DBChat: Ping"
      },
      {
        "command": "dbchat.addConnection",
        "title": "Add Database Connection",
        "icon": "$(add)"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "dbchat-sidebar",
          "title": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "views": {
      "dbchat-sidebar": [
        {
          "type": "webview",
          "id": "dbchat.chatPanel",
          "name": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "menus": {
      "view/title": [
        {
          "command": "dbchat.addConnection",
          "when": "view == dbchat.chatPanel",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "npm run check-types && npm run lint && node esbuild.js",
    "watch": "npm-run-all -p watch:*",
    "watch:esbuild": "node esbuild.js --watch",
    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
    "package": "npm run check-types && npm run lint && node esbuild.js --production",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "check-types": "tsc --noEmit",
    "lint": "eslint src",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.96.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.17.0",
    "@typescript-eslint/parser": "^8.17.0",
    "eslint": "^9.16.0",
    "esbuild": "^0.24.0",
    "npm-run-all": "^4.1.5",
    "typescript": "^5.7.2",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}</code>

Das Frontend der Erweiterung (HTML, CSS und JavaScript) ist wie folgt aufgebaut: Eine leere Hauptansicht, ein Verbindungsformular und ein Umschalter zum Anzeigen einer der beiden Ansichten. Der Code verwendet die VSCode-API, um die Kommunikation zwischen der Erweiterung und der Webansicht abzuwickeln. Eine DBChatPanel-Klasse verwaltet die Ansicht und interagiert mit der VSCode-API. Derzeit ist die Funktion _saveConnection ein Platzhalter.

Ein einfaches Demobild zeigt die anfängliche Benutzeroberfläche. Zukünftige Schritte umfassen die dynamische Gestaltung der Verbindungs-Benutzeroberfläche, die Aktualisierung von ~/.dbchat.toml und die Weiterleitung von Chat-Anfragen über das LSP-Backend.

Folgen Sie @shrsv23 für Updates.

Das obige ist der detaillierte Inhalt vonStarten einer VSCode-Erweiterungs-Benutzeroberfläche für DBChat (Teil 7). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!