如何通过 VSCode 的 API 实现一个自定义的视图（Custom View）？

{
  "name": "my-custom-view-extension",
  "displayName": "My Custom View",
  "description": "A VSCode extension with a custom tree view.",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onView:myCustomViewId"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "myCustomViewContainerId",
          "title": "我的自定义视图",
          "icon": "resources/icon.svg" // 可选，活动栏图标
        }
      ]
    },
    "views": {
      "myCustomViewContainerId": [
        {
          "id": "myCustomViewId",
          "name": "项目任务列表",
          "when": "workspaceFolders" // 可选，视图何时显示
        }
      ]
    },
    "commands": [
      {
        "command": "myCustomViewId.openItem",
        "title": "打开任务"
      },
      {
        "command": "myCustomViewId.refresh",
        "title": "刷新视图"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTests.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.80.0",
    "@types/glob": "^8.1.0",
    "@types/mocha": "^10.0.1",
    "@types/node": "16.x",
    "@typescript-eslint/eslint-plugin": "^5.59.8",
    "@typescript-eslint/parser": "^5.59.8",
    "eslint": "^8.41.0",
    "glob": "^8.1.0",
    "mocha": "^10.2.0",
    "typescript": "^5.1.3",
    "@vscode/test-electron": "^2.3.2"
  }
}

import * as vscode from 'vscode';

// 1. 定义你的数据结构
// 比如，一个简单的任务项
class Task {
  constructor(
    public readonly label: string,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
    public readonly command?: vscode.Command,
    public readonly children: Task[] = []
  ) {}
}

// 2. 实现 TreeItem 接口，或者直接使用 vscode.TreeItem
// 为了方便，我们直接让 Task 继承 TreeItem
class TaskTreeItem extends vscode.TreeItem {
  constructor(
    public readonly task: Task,
    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
    public readonly command?: vscode.Command
  ) {
    super(task.label, collapsibleState);
    this.command = command;
    this.tooltip = `${task.label} - 点击查看详情`; // 鼠标悬停提示
    this.description = `任务描述...`; // 附加描述
    // 可以设置图标，比如：
    // this.iconPath = new vscode.ThemeIcon('check');
  }
}

// 3. 实现 TreeDataProvider 接口
class TaskDataProvider implements vscode.TreeDataProvider<TaskTreeItem> {
  // 用于触发视图刷新的事件
  private _onDidChangeTreeData: vscode.EventEmitter<TaskTreeItem | undefined | void> = new vscode.EventEmitter<TaskTreeItem | undefined | void>();
  readonly onDidChangeTreeData: vscode.Event<TaskTreeItem | undefined | void> = this._onDidChangeTreeData.event;

  // 模拟一些数据
  private data: Task[] = [
    new Task('前端开发', vscode.TreeItemCollapsibleState.Expanded, undefined, [
      new Task('实现登录页面', vscode.TreeItemCollapsibleState.None, {
        command: 'myCustomViewId.openItem',
        title: '打开任务',
        arguments: ['登录页面']
      }),
      new Task('优化购物车', vscode.TreeItemCollapsibleState.None, {
        command: 'myCustomViewId.openItem',
        title: '打开任务',
        arguments: ['购物车']
      })
    ]),
    new Task('后端服务', vscode.TreeItemCollapsibleState.Expanded, undefined, [
      new Task('用户认证接口', vscode.TreeItemCollapsibleState.None, {
        command: 'myCustomViewId.openItem',
        title: '打开任务',
        arguments: ['认证接口']
      }),
      new Task('数据库迁移', vscode.TreeItemCollapsibleState.None, {
        command: 'myCustomViewId.openItem',
        title: '打开任务',
        arguments: ['数据库']
      })
    ]),
    new Task('文档编写', vscode.TreeItemCollapsibleState.None)
  ];

  // 获取给定元素的子元素，如果 element 为 undefined，则返回根元素
  getChildren(element?: TaskTreeItem): vscode.ProviderResult<TaskTreeItem[]> {
    if (element) {
      return element.task.children.map(task => new TaskTreeItem(task, task.collapsibleState, task.command));
    } else {
      // 返回根元素
      return this.data.map(task => new TaskTreeItem(task, task.collapsibleState, task.command));
    }
  }

  // 获取给定元素的 TreeItem 表示
  getTreeItem(element: TaskTreeItem): vscode.TreeItem {
    return element; // 因为 TaskTreeItem 已经继承了 vscode.TreeItem
  }

  // 刷新视图的方法
  refresh(): void {
    this._onDidChangeTreeData.fire();
  }
}

// 4. 注册视图和命令
export function activate(context: vscode.ExtensionContext) {
  const taskDataProvider = new TaskDataProvider();

  // 注册 TreeView
  vscode.window.createTreeView('myCustomViewId', {
    treeDataProvider: taskDataProvider,
    showCollapseAll: true // 显示全部折叠按钮
  });

  // 注册命令，用于处理视图项的点击事件
  context.subscriptions.push(
    vscode.commands.registerCommand('myCustomViewId.openItem', (itemLabel: string) => {
      vscode.window.showInformationMessage(`你点击了任务: ${itemLabel}`);
      // 这里可以添加更多逻辑，比如打开文件、跳转到特定位置等
    })
  );

  // 注册刷新命令
  context.subscriptions.push(
    vscode.commands.registerCommand('myCustomViewId.refresh', () => {
      taskDataProvider.refresh();
      vscode.window.showInformationMessage('自定义视图已刷新！');
    })
  );
}

export function deactivate() {}

context.subscriptions.push(
  vscode.commands.registerCommand('myCustomViewId.openItem', (itemLabel: string) => {
    vscode.window.showInformationMessage(`你点击了任务: ${itemLabel}`);
    // 这里才是真正处理用户交互的地方
    // 比如：
    // vscode.workspace.openTextDocument(vscode.Uri.file(`/path/to/your/files/${itemLabel}.md`)).then(doc => {
    //   vscode.window.showTextDocument(doc);
    // });
  })
);

class TaskDataProvider implements vscode.TreeDataProvider<TaskTreeItem> {
  // ... 其他代码 ...

  private _onDidChangeTreeData: vscode.EventEmitter<TaskTreeItem | undefined | void> = new vscode.EventEmitter<TaskTreeItem | undefined | void>();
  readonly onDidChangeTreeData: vscode.Event<TaskTreeItem | undefined | void> = this._onDidChangeTreeData.event;

  refresh(): void {
    // 调用 fire() 会触发 VSCode 重新渲染整个视图
    // 也可以传入一个特定的 TreeItem 来只刷新该项及其子项
    this._onDidChangeTreeData.fire();
  }
}

// 假设你有一个删除任务的命令
vscode.commands.registerCommand('myCustomViewId.deleteTask', (taskLabel: string) => {
  // 1. 更新内部数据模型
  taskDataProvider.deleteTask(taskLabel); // 假设 TaskDataProvider 有一个 deleteTask 方法
  // 2. 触发视图刷新
  taskDataProvider.refresh();
  vscode.window.showInformationMessage(`任务 "${taskLabel}" 已删除。`);
});

// 在 TaskDataProvider 中实现 deleteTask 方法
class TaskDataProvider implements vscode.TreeDataProvider<TaskTreeItem> {
  // ... 其他代码 ...
  deleteTask(label: string): void {
    // 这里实现从 this.data 中移除对应任务的逻辑
    // 这可能涉及到递归查找和修改
    this.data = this.data.filter(task => task.label !== label); // 简化示例
  }
}