為 DBChat 啟動 VSCode 擴充 UI（第 7 部分）-js教程-PHP中文網

為 DBChat 啟動 VSCode 擴充 UI（第 7 部分）

Mary-Kate Olsen

發布： 2025-01-20 02:38:07

原創

344 人瀏覽過

本教學繼續開發 DBChat，這是一個使用 AI 聊天與資料庫互動的 VSCode 擴充功能。前面的部分介紹了設定 REPL、資料庫連接和 LSP 整合。本部分重點介紹在 VSCode 中建立使用者介面 (UI) 以管理資料庫連線。

目標是新增一個左側邊欄按鈕，啟動聊天視圖以進行資料庫探索。由於遊標佔據右側邊欄，因此 DBChat 將駐留在左側。聊天視圖需要資料庫連接，透過 ~/.dbchat.toml 設定檔（在第 4 部分中介紹）進行管理。這部分建立一個 UI 來編輯此文件。

使用者介面將包括：

現有資料庫連線的清單。
用於新增連線的「」按鈕，開啟「新增連線」表單。

更新後的package.json註冊了必要的組件：

viewsContainers：定義活動欄中的側邊欄按鈕。
views：定義與按鈕關聯的面板（webview）。
menus：在面板的標題列中新增一個「」按鈕。

<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>

登入後複製

擴充的前端（HTML、CSS 和 JavaScript）的結構如下：一個空的主視圖、一個連接表單和一個用於顯示任一視圖的切換器。程式碼使用 VSCode API 來處理擴充功能和 Web 視圖之間的通訊。 DBChatPanel 類別管理視圖並與 VSCode API 互動。目前，_saveConnection 函數是一個佔位符。

簡單的演示圖像顯示了初始 UI。未來的步驟包括使連接 UI 動態化、更新 ~/.dbchat.toml 以及透過 LSP 後端路由聊天查詢。