From 11b799fa1407ce0af598ea23d42b3a0c853500a1 Mon Sep 17 00:00:00 2001 From: mxwj Date: Thu, 21 Nov 2024 16:39:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=84=E8=8C=83=E4=BA=86=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../browser/editors/StockDetailsEditor.ts | 149 +++++++++ .../{views => editors}/StockDetailsInput.ts | 15 +- .../example/browser/example.contribution.ts | 4 +- .../browser/views/StockDetailsEditor.ts | 292 ------------------ .../example/browser/views/exampleView.ts | 2 +- 5 files changed, 160 insertions(+), 302 deletions(-) create mode 100644 src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts rename src/vs/workbench/contrib/example/browser/{views => editors}/StockDetailsInput.ts (75%) delete mode 100644 src/vs/workbench/contrib/example/browser/views/StockDetailsEditor.ts diff --git a/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts new file mode 100644 index 0000000..0456316 --- /dev/null +++ b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts @@ -0,0 +1,149 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ +import { EditorPane } from '../../../../browser/parts/editor/editorPane.js'; +import { Dimension } from '../../../../../base/browser/dom.js'; +import { StockDetailsInput } from './StockDetailsInput.js'; +import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js'; +import { IThemeService } from '../../../../../platform/theme/common/themeService.js'; +import { IStorageService } from '../../../../../platform/storage/common/storage.js'; + +import { CancellationToken } from '../../../../../base/common/cancellation.js'; +import { IEditorOptions } from '../../../../../platform/editor/common/editor.js'; +import { IEditorOpenContext } from '../../../../common/editor.js'; +import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js'; + +export class StockDetailsEditor extends EditorPane { + static readonly ID = 'workbench.editor.stockDetails'; + + private container: HTMLElement | null = null; + + constructor( + group: IEditorGroup, + @ITelemetryService telemetryService: ITelemetryService, + @IThemeService themeService: IThemeService, + @IStorageService storageService: IStorageService + ) { + super(StockDetailsEditor.ID, group, telemetryService, themeService, storageService); + } + + /** + * 创建编辑器容器并初始化界面。 + */ + protected createEditor(parent: HTMLElement): void { + this.container = document.createElement('div'); + this.container.className = 'stock-details-editor'; + + // 添加占位符 + const placeholder = document.createElement('div'); + placeholder.className = 'stock-placeholder'; + placeholder.textContent = '请选择一只股票查看详情'; + this.container.appendChild(placeholder); + + parent.appendChild(this.container); + } + + /** + * 设置编辑器输入。 + */ + override async setInput( + input: StockDetailsInput, + options: IEditorOptions | undefined, + context: IEditorOpenContext, + token: CancellationToken + ): Promise { + await super.setInput(input, options, context, token); + + if (input.resource) { + console.log(`setInput 接收到股票代码: ${input.getCode()}`); + const stockCode = input.getCode(); + + if (!stockCode || stockCode.trim() === '') { + this.renderErrorMessage('股票代码为空，请选择有效的股票。'); + return; + } + + this.renderStockDetails(stockCode); + } else { + this.renderErrorMessage('未提供有效的股票代码'); + } + + } + + /** + * 根据股票代码加载详情。 + */ + private renderStockDetails(stockCode: string): void { + if (!this.container) { + return; + } + + // 清空容器内容 + this.container.textContent = ''; // 不使用 innerHTML + + // 创建标题 + const title = document.createElement('h3'); + title.textContent = '股票详情'; + // 使用内联样式修改标题样式 + title.style.fontSize = '24px'; // 修改字体大小为 24 像素 + title.style.fontWeight = 'bold'; // 设置字体加粗 + title.style.margin = '10px 0'; // 设置上下外边距 + + // 创建股票代码段 + const codeInfo = document.createElement('p'); + codeInfo.textContent = `代码: ${stockCode}`; + + // 模拟价格信息 + const priceInfo = document.createElement('p'); + priceInfo.textContent = '价格: ¥123.45'; + + // 模拟涨跌幅信息 + const changeInfo = document.createElement('p'); + changeInfo.textContent = '涨跌幅: +3.21%'; + + // 添加到容器 + this.container.appendChild(title); + this.container.appendChild(codeInfo); + this.container.appendChild(priceInfo); + this.container.appendChild(changeInfo); + } + + + /** + * 渲染错误消息。 + */ + private renderErrorMessage(message: string): void { + if (!this.container) { + return; + } + + this.container.textContent = ''; // 清空之前的内容 + + const errorDiv = document.createElement('div'); + errorDiv.className = 'stock-error'; + errorDiv.textContent = message; + + this.container.appendChild(errorDiv); + } + + /** + * 布局调整。 + */ + override layout(dimension: Dimension): void { + if (this.container) { + this.container.style.width = `${dimension.width}px`; + this.container.style.height = `${dimension.height}px`; + } + } + + /** + * 清空输入内容。 + */ + override clearInput(): void { + if (this.container) { + this.container.textContent = ''; // 不使用 innerHTML + } + super.clearInput(); + } +} diff --git a/src/vs/workbench/contrib/example/browser/views/StockDetailsInput.ts b/src/vs/workbench/contrib/example/browser/editors/StockDetailsInput.ts similarity index 75% rename from src/vs/workbench/contrib/example/browser/views/StockDetailsInput.ts rename to src/vs/workbench/contrib/example/browser/editors/StockDetailsInput.ts index e748bce..c4bedfc 100644 --- a/src/vs/workbench/contrib/example/browser/views/StockDetailsInput.ts +++ b/src/vs/workbench/contrib/example/browser/editors/StockDetailsInput.ts @@ -16,15 +16,9 @@ export class StockDetailsInput extends EditorInput { constructor(resource: URI) { super(); - // 打印传入的 URI，无论是否有效 console.log(`StockDetailsInput 创建: ${resource ? resource.toString() : 'undefined'}`); - if (!resource || !resource.path || resource.path.trim() === '') { - // 如果 URI 无效，仅输出警告，不抛出异常 - console.warn(`StockDetailsInput: 收到无效的资源路径 ${resource ? resource.toString() : 'undefined'}`); - } - this.resource = resource; } @@ -33,7 +27,14 @@ export class StockDetailsInput extends EditorInput { } override getName(): string { - return `Stock Details (${this.resource.path})`; + // 获取股票代码部分 + const stockCode = this.resource.toString().replace(/^stock-details:\/\/+/, ''); // 移除前缀 'stock-details://' + return `${stockCode}`; // 自定义标题 + } + + public getCode(): string { + // 从 URI 中提取股票代码，移除前缀 'stock-details://' + return this.resource.toString().replace(/^stock-details:\/\/+/, ''); } override matches(other: EditorInput): boolean { diff --git a/src/vs/workbench/contrib/example/browser/example.contribution.ts b/src/vs/workbench/contrib/example/browser/example.contribution.ts index a116401..dc6ca0b 100644 --- a/src/vs/workbench/contrib/example/browser/example.contribution.ts +++ b/src/vs/workbench/contrib/example/browser/example.contribution.ts @@ -19,8 +19,8 @@ import { ExampleView } from './views/exampleView.js'; import { IViewPaneOptions } from '../../../browser/parts/views/viewPane.js'; import { EditorPaneDescriptor, IEditorPaneRegistry } from '../../../browser/editor.js'; import { EditorExtensions } from '../../../common/editor.js'; -import { StockDetailsEditor } from './views/StockDetailsEditor.js'; -import { StockDetailsInput } from './views/StockDetailsInput.js'; +import { StockDetailsEditor } from './editors/StockDetailsEditor.js'; +import { StockDetailsInput } from './editors/StockDetailsInput.js'; diff --git a/src/vs/workbench/contrib/example/browser/views/StockDetailsEditor.ts b/src/vs/workbench/contrib/example/browser/views/StockDetailsEditor.ts deleted file mode 100644 index 415a3aa..0000000 --- a/src/vs/workbench/contrib/example/browser/views/StockDetailsEditor.ts +++ /dev/null @@ -1,292 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ -// import { EditorPane } from '../../../../browser/parts/editor/editorPane.js'; -// import { Dimension } from '../../../../../base/browser/dom.js'; -// import { StockDetailsInput } from './StockDetailsInput.js'; -// import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js'; -// import { IThemeService } from '../../../../../platform/theme/common/themeService.js'; -// import { IStorageService } from '../../../../../platform/storage/common/storage.js'; - -// import { CancellationToken } from '../../../../../base/common/cancellation.js'; -// import { IEditorOptions } from '../../../../../platform/editor/common/editor.js'; -// import { IEditorOpenContext } from '../../../../common/editor.js'; - -// export class StockDetailsEditor extends EditorPane { -// static readonly ID = 'workbench.editor.stockDetails'; - -// private container: HTMLElement | null = null; - -// constructor( -// id: string, -// group: any, // 实际类型是 IEditorGroup -// @ITelemetryService telemetryService: ITelemetryService, -// @IThemeService themeService: IThemeService, -// @IStorageService storageService: IStorageService -// ) { -// super(id, group, telemetryService, themeService, storageService); -// } - -// protected createEditor(parent: HTMLElement): void { -// this.container = document.createElement('div'); -// this.container.className = 'stock-details-editor'; -// parent.appendChild(this.container); -// } - -// override async setInput( -// input: StockDetailsInput, -// options: IEditorOptions | undefined, -// context: IEditorOpenContext, -// token: CancellationToken -// ): Promise { -// super.setInput(input, options, context, token); - -// if (input.resource) { -// const stockCode = input.resource.path; -// this.container!.innerHTML = `加载股票详情: ${stockCode}`; -// // 加载和渲染股票数据逻辑 -// } -// } - -// override layout(dimension: Dimension): void { -// // 实现布局逻辑 -// } - -// override clearInput(): void { -// if (this.container) { -// this.container.innerHTML = ''; -// } -// super.clearInput(); -// } -// } - -// import { EditorPane } from '../../../../browser/parts/editor/editorPane.js'; -// import { Dimension } from '../../../../../base/browser/dom.js'; -// import { StockDetailsInput } from './StockDetailsInput.js'; -// import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js'; -// import { IThemeService } from '../../../../../platform/theme/common/themeService.js'; -// import { IStorageService } from '../../../../../platform/storage/common/storage.js'; - -// import { CancellationToken } from '../../../../../base/common/cancellation.js'; -// import { IEditorOptions } from '../../../../../platform/editor/common/editor.js'; -// import { IEditorOpenContext } from '../../../../common/editor.js'; -// import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js'; - -// export class StockDetailsEditor extends EditorPane { -// static readonly ID = 'workbench.editor.stockDetails'; - -// private container: HTMLElement | null = null; - -// constructor( -// group: IEditorGroup, // 修改第一个参数为 IEditorGroup 类型 -// @ITelemetryService telemetryService: ITelemetryService, -// @IThemeService themeService: IThemeService, -// @IStorageService storageService: IStorageService -// ) { -// super(StockDetailsEditor.ID, group, telemetryService, themeService, storageService); // ID 移动到 super 调用 -// } - -// protected createEditor(parent: HTMLElement): void { -// this.container = document.createElement('div'); -// this.container.className = 'stock-details-editor'; -// parent.appendChild(this.container); -// } - -// override async setInput( -// input: StockDetailsInput, -// options: IEditorOptions | undefined, -// context: IEditorOpenContext, -// token: CancellationToken -// ): Promise { -// super.setInput(input, options, context, token); - -// if (input.resource) { -// const stockCode = input.resource.path; - -// // 清空之前的内容 -// this.container!.textContent = ''; - -// // 创建一个新的 div 节点 -// const stockDetailsDiv = document.createElement('div'); -// stockDetailsDiv.className = 'stock-details'; -// stockDetailsDiv.textContent = `加载股票详情: ${stockCode}`; - -// // 将节点插入到容器中 -// this.container!.appendChild(stockDetailsDiv); -// } else { -// this.container!.textContent = '未提供有效的股票代码'; -// } -// } - - - -// override layout(dimension: Dimension): void { -// // 实现布局逻辑 -// } - -// override clearInput(): void { -// if (this.container) { -// this.container.innerHTML = ''; -// } -// super.clearInput(); -// } -// } - -import { EditorPane } from '../../../../browser/parts/editor/editorPane.js'; -import { Dimension } from '../../../../../base/browser/dom.js'; -import { StockDetailsInput } from './StockDetailsInput.js'; -import { ITelemetryService } from '../../../../../platform/telemetry/common/telemetry.js'; -import { IThemeService } from '../../../../../platform/theme/common/themeService.js'; -import { IStorageService } from '../../../../../platform/storage/common/storage.js'; - -import { CancellationToken } from '../../../../../base/common/cancellation.js'; -import { IEditorOptions } from '../../../../../platform/editor/common/editor.js'; -import { IEditorOpenContext } from '../../../../common/editor.js'; -import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js'; - -export class StockDetailsEditor extends EditorPane { - static readonly ID = 'workbench.editor.stockDetails'; - - private container: HTMLElement | null = null; - - constructor( - group: IEditorGroup, - @ITelemetryService telemetryService: ITelemetryService, - @IThemeService themeService: IThemeService, - @IStorageService storageService: IStorageService - ) { - super(StockDetailsEditor.ID, group, telemetryService, themeService, storageService); - } - - /** - * 创建编辑器容器并初始化界面。 - */ - protected createEditor(parent: HTMLElement): void { - this.container = document.createElement('div'); - this.container.className = 'stock-details-editor'; - - // 添加占位符 - const placeholder = document.createElement('div'); - placeholder.className = 'stock-placeholder'; - placeholder.textContent = '请选择一只股票查看详情'; - this.container.appendChild(placeholder); - - parent.appendChild(this.container); - } - - /** - * 设置编辑器输入。 - */ - // override async setInput( - // input: StockDetailsInput, - // options: IEditorOptions | undefined, - // context: IEditorOpenContext, - // token: CancellationToken - // ): Promise { - // await super.setInput(input, options, context, token); - - // if (input.resource) { - // const stockCode = input.resource.path; - - // // 清空现有内容并加载新的股票详情。 - // this.renderStockDetails(stockCode); - // } else { - // this.renderErrorMessage('未提供有效的股票代码'); - // } - // } - - override async setInput( - input: StockDetailsInput, - options: IEditorOptions | undefined, - context: IEditorOpenContext, - token: CancellationToken - ): Promise { - await super.setInput(input, options, context, token); - - if (input.resource) { - console.log(`setInput 接收到资源: ${input.resource.toString()}`); - const stockCode = input.resource.toString(); - - if (!stockCode || stockCode.trim() === '') { - this.renderErrorMessage('股票代码为空，请选择有效的股票。'); - return; - } - - this.renderStockDetails(stockCode); - } else { - this.renderErrorMessage('未提供有效的股票代码'); - } - } - - /** - * 根据股票代码加载详情。 - */ - private renderStockDetails(stockCode: string): void { - if (!this.container) { - return; - } - - // 清空容器内容 - this.container.textContent = ''; // 不使用 innerHTML - - // 创建标题 - const title = document.createElement('h3'); - title.textContent = '股票详情'; - - // 创建股票代码段 - const codeInfo = document.createElement('p'); - codeInfo.textContent = `代码: ${stockCode}`; - - // 模拟价格信息 - const priceInfo = document.createElement('p'); - priceInfo.textContent = '价格: ¥123.45'; - - // 模拟涨跌幅信息 - const changeInfo = document.createElement('p'); - changeInfo.textContent = '涨跌幅: +3.21%'; - - // 添加到容器 - this.container.appendChild(title); - this.container.appendChild(codeInfo); - this.container.appendChild(priceInfo); - this.container.appendChild(changeInfo); - } - - /** - * 渲染错误消息。 - */ - private renderErrorMessage(message: string): void { - if (!this.container) { - return; - } - - this.container.textContent = ''; // 清空之前的内容 - - const errorDiv = document.createElement('div'); - errorDiv.className = 'stock-error'; - errorDiv.textContent = message; - - this.container.appendChild(errorDiv); - } - - /** - * 布局调整。 - */ - override layout(dimension: Dimension): void { - if (this.container) { - this.container.style.width = `${dimension.width}px`; - this.container.style.height = `${dimension.height}px`; - } - } - - /** - * 清空输入内容。 - */ - override clearInput(): void { - if (this.container) { - this.container.textContent = ''; // 不使用 innerHTML - } - super.clearInput(); - } -} diff --git a/src/vs/workbench/contrib/example/browser/views/exampleView.ts b/src/vs/workbench/contrib/example/browser/views/exampleView.ts index adffd60..8a81130 100644 --- a/src/vs/workbench/contrib/example/browser/views/exampleView.ts +++ b/src/vs/workbench/contrib/example/browser/views/exampleView.ts @@ -21,7 +21,7 @@ import { URI } from '../../../../../base/common/uri.js'; import './media/exampleViewContainer.css'; import { IEditorService } from '../../../../services/editor/common/editorService.js'; -import { StockDetailsInput } from './StockDetailsInput.js'; +import { StockDetailsInput } from '../editors/StockDetailsInput.js'; export class ExampleView extends ViewPane { constructor(