diff --git a/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts
index 0456316..1c32fe4 100644
--- a/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts
+++ b/src/vs/workbench/contrib/example/browser/editors/StockDetailsEditor.ts
@@ -13,6 +13,7 @@ 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';
@@ -32,16 +33,35 @@ export class StockDetailsEditor extends EditorPane {
* 创建编辑器容器并初始化界面。
*/
protected createEditor(parent: HTMLElement): void {
- this.container = document.createElement('div');
- this.container.className = 'stock-details-editor';
+ // 使用 WebView 服务创建 IOverlayWebview 实例
+ this.webview = this.webviewService.createWebviewOverlay({
+ providedViewType: 'stockDetailsEditor',
+ title: '股票详情',
+ options: { retainContextWhenHidden: true },
+ contentOptions: {
+ allowScripts: true,
+ localResourceRoots: [], // 根据需求设置本地资源根路径
+ },
+ extension: undefined,
+ });
- // 添加占位符
- const placeholder = document.createElement('div');
- placeholder.className = 'stock-placeholder';
- placeholder.textContent = '请选择一只股票查看详情';
- this.container.appendChild(placeholder);
+ // 将 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));
+ }
- parent.appendChild(this.container);
}
/**
@@ -59,57 +79,99 @@ export class StockDetailsEditor extends EditorPane {
console.log(`setInput 接收到股票代码: ${input.getCode()}`);
const stockCode = input.getCode();
+
if (!stockCode || stockCode.trim() === '') {
this.renderErrorMessage('股票代码为空，请选择有效的股票。');
return;
}
- this.renderStockDetails(stockCode);
- } else {
- this.renderErrorMessage('未提供有效的股票代码');
+ // 设置 WebView HTML 内容
+ const htmlContent = this.generateWebviewContent(stockCode);
+ this.webview.setHtml(htmlContent);
}
-
}
/**
- * 根据股票代码加载详情。
+ * 生成 WebView 的 HTML 内容。
*/
- private renderStockDetails(stockCode: string): void {
- if (!this.container) {
- return;
- }
+ // private generateWebviewContent(stockCode: string): string {
+ // return `
+ //
+ //
+ //
+ //
+ //
+ // 股票详情
+ //
+ //
+ //
+ // 股票详情
+ // 代码: ${stockCode}
+ // 价格: ¥123.45
+ // 涨跌幅: +3.21%
+ //
+ //
+ // `;
+ // }
- // 清空容器内容
- this.container.textContent = ''; // 不使用 innerHTML
+ private generateWebviewContent(stockCode: string): string {
+ return `
+
+
+
+
+
+ 股票详情
+
+
+
+ 股票详情
+ 代码: ${stockCode}
+ 价格: ¥加载中...
+ 涨跌幅: 加载中...
- // 创建标题
- 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);
+
+
+
+ `;
}
-
/**
* 渲染错误消息。
*/
@@ -131,9 +193,18 @@ export class StockDetailsEditor extends EditorPane {
* 布局调整。
*/
override layout(dimension: Dimension): void {
- if (this.container) {
- this.container.style.width = `${dimension.width}px`;
- this.container.style.height = `${dimension.height}px`;
+ 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);
+ }
}
}
@@ -147,3 +218,8 @@ export class StockDetailsEditor extends EditorPane {
super.clearInput();
}
}
+
+
+
+
+