diff --git a/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts index 381fa16..ea64409 100644 --- a/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts +++ b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts @@ -2,227 +2,6 @@ * 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 { IWebviewService, IOverlayWebview } from '../../../../contrib/webview/browser/webview.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'; -// import * as DOM from '../../../../../base/browser/dom.js'; - -// export class StockDetailsEditor extends EditorPane { -// static readonly ID = 'workbench.editor.stockDetails'; - -// private webview: IOverlayWebview | null = null; - -// constructor( -// group: IEditorGroup, -// @ITelemetryService telemetryService: ITelemetryService, -// @IThemeService themeService: IThemeService, -// @IStorageService storageService: IStorageService, -// @IWebviewService private readonly webviewService: IWebviewService -// ) { -// super(StockDetailsEditor.ID, group, telemetryService, themeService, storageService); -// } - -// /** -// * 创建编辑器容器并初始化 WebView。 -// */ -// protected createEditor(parent: HTMLElement): void { -// // 使用 WebView 服务创建 IOverlayWebview 实例 -// this.webview = this.webviewService.createWebviewOverlay({ -// providedViewType: 'stockDetailsEditor', -// title: '股票详情', -// options: { retainContextWhenHidden: true }, -// contentOptions: { -// allowScripts: true, -// localResourceRoots: [], // 根据需求设置本地资源根路径 -// }, -// extension: undefined, -// }); - -// // 将 WebView 定位到父元素 -// if (this.webview) { -// // 获取当前激活的窗口 -// const targetWindow = DOM.getActiveWindow(); - -// if (!targetWindow) { -// console.error('无法获取活动窗口'); -// return; -// } - -// // Claim WebView 所有权，绑定到目标窗口 -// this.webview.claim(this, targetWindow as any, undefined); - -// // 使用 layoutWebviewOverElement 方法，将 WebView 定位到 `parent` -// this.webview.layoutWebviewOverElement(parent, new Dimension(parent.offsetWidth, parent.offsetHeight)); -// } - -// } - -// /** -// * 设置编辑器输入并更新 WebView 内容。 -// */ -// override async setInput( -// input: StockDetailsInput, -// options: IEditorOptions | undefined, -// context: IEditorOpenContext, -// token: CancellationToken -// ): Promise { -// await super.setInput(input, options, context, token); - -// if (this.webview && input.resource) { -// const stockCode = input.getCode(); - -// if (!stockCode || stockCode.trim() === '') { -// this.renderErrorMessage('股票代码为空，请选择有效的股票。'); -// return; -// } - -// // 设置 WebView HTML 内容 -// const htmlContent = this.generateWebviewContent(stockCode); -// this.webview.setHtml(htmlContent); -// } -// } - -// /** -// * 生成 WebView 的 HTML 内容。 -// */ -// // private generateWebviewContent(stockCode: string): string { -// // return ` -// // -// // -// // -// // -// // -// // 股票详情 -// // -// // -// // -// //

股票详情

-// //
代码: ${stockCode}
-// //
价格: ¥123.45
-// //
涨跌幅: +3.21%
-// // -// // -// // `; -// // } - -// private generateWebviewContent(stockCode: string): string { -// return ` -// -// -// -// -// -// 股票详情 -// -// -// -//

股票详情

-//
代码: ${stockCode}
-//
价格: ¥加载中...
-//
涨跌幅: 加载中...
- -// -// -// -// `; -// } - -// /** -// * 渲染错误消息。 -// */ -// private renderErrorMessage(message: string): void { -// if (this.webview) { -// const errorContent = ` -// -// -// -// -// 错误 -// -// -//

错误

-//

${message}

-// -// -// `; -// this.webview.setHtml(errorContent); -// } -// } - -// /** -// * 布局调整。 -// */ -// override layout(dimension: Dimension): void { -// if (this.webview && this.webview.container) { -// const webviewContainer = this.webview.container; - -// // 设置 WebView 的宽高 -// webviewContainer.style.width = `${dimension.width}px`; -// webviewContainer.style.height = `${dimension.height}px`; - -// // 限制 WebView 到当前编辑器区域 -// const clippingContainer = this.getContainer(); -// if (clippingContainer) { -// this.webview.layoutWebviewOverElement(clippingContainer, dimension); -// } -// } -// } - -// /** -// * 清空输入内容。 -// */ -// override clearInput(): void { -// if (this.webview) { -// this.webview.setHtml(''); // 清空内容 -// } -// super.clearInput(); -// } -// } - import { EditorPane } from '../../../../browser/parts/editor/editorPane.js'; import { Dimension } from '../../../../../base/browser/dom.js'; import { StockDetailsInput } from './StockDetailsInput.js'; @@ -236,9 +15,6 @@ import { IEditorOpenContext } from '../../../../common/editor.js'; import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js'; import * as DOM from '../../../../../base/browser/dom.js'; -import { FileAccess } from '../../../../../base/common/network.js'; - - export class StockDetailsEditor extends EditorPane { static readonly ID = 'workbench.editor.stockDetails'; @@ -265,24 +41,28 @@ export class StockDetailsEditor extends EditorPane { options: { retainContextWhenHidden: true }, contentOptions: { allowScripts: true, - localResourceRoots: [ - FileAccess.asFileUri('vs/workbench/contrib/example/browser/resources') - ], // 指定资源路径 + localResourceRoots: [], // 根据需求设置本地资源根路径 }, extension: undefined, }); // 将 WebView 定位到父元素 if (this.webview) { + // 获取当前激活的窗口 const targetWindow = DOM.getActiveWindow(); + if (!targetWindow) { console.error('无法获取活动窗口'); return; } + // Claim WebView 所有权，绑定到目标窗口 this.webview.claim(this, targetWindow as any, undefined); + + // 使用 layoutWebviewOverElement 方法，将 WebView 定位到 `parent` this.webview.layoutWebviewOverElement(parent, new Dimension(parent.offsetWidth, parent.offsetHeight)); } + } /** @@ -298,44 +78,98 @@ export class StockDetailsEditor extends EditorPane { if (this.webview && input.resource) { const stockCode = input.getCode(); + if (!stockCode || stockCode.trim() === '') { this.renderErrorMessage('股票代码为空，请选择有效的股票。'); return; } - // 获取 HTML、CSS 和 JS 文件的路径 - const htmlPath = FileAccess.asBrowserUri('vs/workbench/contrib/example/browser/resources/index.html').toString(); - const cssPath = FileAccess.asBrowserUri('vs/workbench/contrib/example/browser/resources/styles.css').toString(); - const jsPath = FileAccess.asBrowserUri('vs/workbench/contrib/example/browser/resources/app.js').toString(); - - try { - // 使用 fetch 动态加载 HTML 文件内容 - let htmlContent = await fetch(htmlPath) - .then(response => response.text()) - .catch(err => { - console.error('加载 HTML 文件失败:', err); - return `

加载 HTML 文件失败: ${err.message}

`; - }); - - // 替换 HTML 文件中的动态占位符 - htmlContent = htmlContent - .replace('[[STOCK_CODE]]', stockCode) // 替换股票代码占位符 - .replace('[[CSS_PATH]]', cssPath) // 替换 CSS 路径占位符 - .replace('[[JS_PATH]]', jsPath); // 替换 JS 路径占位符 - - // 将动态生成的 HTML 设置为 Webview 内容 - this.webview.setHtml(htmlContent); - } catch (error) { - console.error('加载资源失败:', error); - this.renderErrorMessage(`加载资源失败: ${error.message}`); - } + // 设置 WebView HTML 内容 + const htmlContent = this.generateWebviewContent(stockCode); + this.webview.setHtml(htmlContent); } } + /** + * 生成 WebView 的 HTML 内容。 + */ + // private generateWebviewContent(stockCode: string): string { + // return ` + // + // + // + // + // + // 股票详情 + // + // + // + //

股票详情

+ //
代码: ${stockCode}
+ //
价格: ¥123.45
+ //
涨跌幅: +3.21%
+ // + // + // `; + // } + private generateWebviewContent(stockCode: string): string { + return ` + + + + + + 股票详情 + + + +

股票详情

+
代码: ${stockCode}
+
价格: ¥加载中...
+
涨跌幅: 加载中...
- - + + + + `; + } /** * 渲染错误消息。 @@ -365,9 +199,12 @@ export class StockDetailsEditor extends EditorPane { override layout(dimension: Dimension): void { if (this.webview && this.webview.container) { const webviewContainer = this.webview.container; + + // 设置 WebView 的宽高 webviewContainer.style.width = `${dimension.width}px`; webviewContainer.style.height = `${dimension.height}px`; + // 限制 WebView 到当前编辑器区域 const clippingContainer = this.getContainer(); if (clippingContainer) { this.webview.layoutWebviewOverElement(clippingContainer, dimension); @@ -388,3 +225,5 @@ export class StockDetailsEditor extends EditorPane { + +