vscode/src/vs/workbench/contrib/example/browser/views/exampleView.ts

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

import { IViewPaneOptions, ViewPane } from '../../../../browser/parts/views/viewPane.js';

import { IKeybindingService } from '../../../../../platform/keybinding/common/keybinding.js';
import { IContextMenuService } from '../../../../../platform/contextview/browser/contextView.js';
import { IConfigurationService } from '../../../../../platform/configuration/common/configuration.js';
import { IContextKeyService } from '../../../../../platform/contextkey/common/contextkey.js';
import { IViewDescriptorService } from '../../../../common/views.js';
import { IInstantiationService } from '../../../../../platform/instantiation/common/instantiation.js';
import { IOpenerService } from '../../../../../platform/opener/common/opener.js';
import { IThemeService } from '../../../../../platform/theme/common/themeService.js';
import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js';
import { IAccessibleViewService } from '../../../../../platform/accessibility/browser/accessibleView.js';
import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
import * as DOM from '../../../../../base/browser/dom.js';
import { URI } from '../../../../../base/common/uri.js';

import './media/exampleViewContainer.css';
import { IEditorService } from '../../../../services/editor/common/editorService.js';
import { StockDetailsInput } from './StockDetailsInput.js';

export class ExampleView extends ViewPane {
	constructor(
		options: IViewPaneOptions,
		@IKeybindingService keybindingService: IKeybindingService,
		@IContextMenuService contextMenuService: IContextMenuService,
		@IConfigurationService configurationService: IConfigurationService,
		@IContextKeyService contextKeyService: IContextKeyService,
		@IViewDescriptorService viewDescriptorService: IViewDescriptorService,
		@IInstantiationService instantiationService: IInstantiationService,
		@IOpenerService openerService: IOpenerService,
		@IThemeService themeService: IThemeService,
		@ITelemetryService telemetryService: ITelemetryService,
		@IHoverService hoverService: IHoverService,
		@IAccessibleViewService accessibleViewService: IAccessibleViewService
	) {
		super(
			options,
			keybindingService,
			contextMenuService,
			configurationService,
			contextKeyService,
			viewDescriptorService,
			instantiationService,
			openerService,
			themeService,
			telemetryService,
			hoverService,

		);
	}

	// 您可以在这里添加自定义的视图逻辑

	// override renderBody(container: HTMLElement): void {
	// 	super.renderBody(container);

	// 	// 创建一个用于股票列表的容器
	// 	const stockListContainer = DOM.$('.stock-list-container');
	// 	stockListContainer.style.padding = '10px';
	// 	stockListContainer.style.overflowY = 'auto';
	// 	stockListContainer.style.maxHeight = '100%';

	// 	// 模拟股票列表
	// 	const mockStockData = [
	// 		{ name: 'Stock A', code: '000001', price: '100.00' },
	// 		{ name: 'Stock B', code: '000002', price: '200.00' },
	// 		{ name: 'Stock C', code: '000003', price: '300.00' },
	// 		{ name: 'Stock D', code: '000004', price: '400.00' },
	// 		{ name: 'Stock E', code: '000005', price: '500.00' },
	// 	];

	// 	// 创建列表元素
	// 	const ul = DOM.$('ul');
	// 	ul.style.listStyleType = 'none';
	// 	ul.style.margin = '0';
	// 	ul.style.padding = '0';

	// 	// 遍历伪数据并创建每个列表项
	// 	mockStockData.forEach(stock => {
	// 		const li = DOM.$('li');
	// 		li.style.display = 'flex';
	// 		li.style.justifyContent = 'space-between';
	// 		li.style.padding = '8px';
	// 		li.style.borderBottom = '1px solid #ccc';

	// 		const name = DOM.$('span');
	// 		name.textContent = `${stock.name} (${stock.code})`;

	// 		const price = DOM.$('span');
	// 		price.textContent = `￥${stock.price}`;

	// 		li.appendChild(name);
	// 		li.appendChild(price);
	// 		ul.appendChild(li);
	// 	});

	// 	// 将列表添加到容器中
	// 	stockListContainer.appendChild(ul);
	// 	container.appendChild(stockListContainer);
	// }

	override renderBody(container: HTMLElement): void {
		super.renderBody(container);

		const ul = DOM.$('ul'); // 创建一个无序列表
		ul.classList.add('stock-list'); // 为列表添加样式类
		const data = [
			{ name: 'Stock A', code: '000001', price: 100 },
			{ name: 'Stock B', code: '000002', price: 200 },
			{ name: 'Stock C', code: '000003', price: 300 },
			{ name: 'Stock D', code: '000004', price: 400 },
			{ name: 'Stock E', code: '000005', price: 500 },
		]; // 假数据

		for (const stock of data) {
			const li = DOM.$('li');
			li.textContent = `${stock.name} (${stock.code}) ¥${stock.price.toFixed(2)}`;
			li.classList.add('stock-item');
			li.addEventListener('click', () => {
				this.openStockDetails(stock); // 点击时打开股票详情
			});
			ul.appendChild(li);
		}

		container.appendChild(ul); // 将列表附加到容器中
	}

	// private openStockDetails(stock: { name: string; code: string; price: number }): void {
	// 	const uri = URI.parse(`stock-details://${stock.code}`); // 自定义 URI
	// 	const editorInput = new StockDetailsInput(uri); // 创建新的输入实例

	// 	const editorService = this.instantiationService.invokeFunction(accessor => accessor.get(IEditorService)); // 获取编辑器服务
	// 	editorService.openEditor(editorInput, { pinned: true }).then(() => { // 打开编辑器
	// 		console.log(`Opened details for ${stock.name}`);
	// 	});
	// }

	private openStockDetails(stock: { name: string; code: string; price: number }): void {
		if (!stock.code || stock.code.trim() === '') {
			console.error('无法打开股票详情：股票代码为空');
			return;
		}

		console.log(`准备打开股票详情: ${stock.name} (${stock.code})`);

		const uri = URI.parse(`stock-details://${stock.code}`); // 自定义 URI
		const editorInput = new StockDetailsInput(uri); // 创建新的输入实例

		const editorService = this.instantiationService.invokeFunction(accessor => accessor.get(IEditorService)); // 获取编辑器服务
		editorService.openEditor(editorInput, { pinned: true }).then(() => {
			console.log(`成功打开股票详情: ${stock.name} (${stock.code})`);
		}).catch(err => {
			console.error(`打开股票详情失败: ${err.message}`);
		});
	}

	override layoutBody(height: number, width: number): void {
		// 布局逻辑，如果需要调整高度和宽度
	}
}