为 DBChat 启动 VSCode 扩展 UI（第 7 部分）

本教程继续开发 DBChat，这是一个使用 AI 聊天与数据库交互的 VSCode 扩展。 前面的部分介绍了设置 REPL、数据库连接和 LSP 集成。本部分重点介绍在 VSCode 中创建用户界面 (UI) 以管理数据库连接。

目标是添加一个左侧边栏按钮，启动聊天视图以进行数据库探索。 由于光标占据右侧边栏，因此 DBChat 将驻留在左侧。 聊天视图需要数据库连接，通过 ~/.dbchat.toml 配置文件（在第 4 部分中介绍）进行管理。 这部分构建一个 UI 来编辑此文件。

用户界面将包括：

1. 现有数据库连接的列表。
2. 用于添加新连接的“ ”按钮，打开“添加连接”表单。

更新后的package.json注册了必要的组件：

1. viewsContainers：定义活动栏中的侧边栏按钮。
2. views：定义与按钮关联的面板（webview）。
3. 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 后端路由聊天查询。

关注@shrsv23以获取更新。

以上是为 DBChat 启动 VSCode 扩展 UI（第 7 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！