内嵌了js，css
This commit is contained in:
mxwj
parent
2062121cb9
commit
aaa90f76f3
@ -13,6 +13,7 @@ import { CancellationToken } from '../../../../../base/common/cancellation.js';
|
|||||||
import { IEditorOptions } from '../../../../../platform/editor/common/editor.js';
|
import { IEditorOptions } from '../../../../../platform/editor/common/editor.js';
|
||||||
import { IEditorOpenContext } from '../../../../common/editor.js';
|
import { IEditorOpenContext } from '../../../../common/editor.js';
|
||||||
import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js';
|
import { IEditorGroup } from '../../../../services/editor/common/editorGroupsService.js';
|
||||||
|
import * as DOM from '../../../../../base/browser/dom.js';
|
||||||
|
|
||||||
export class StockDetailsEditor extends EditorPane {
|
export class StockDetailsEditor extends EditorPane {
|
||||||
static readonly ID = 'workbench.editor.stockDetails';
|
static readonly ID = 'workbench.editor.stockDetails';
|
||||||
@ -32,16 +33,35 @@ export class StockDetailsEditor extends EditorPane {
|
|||||||
* 创建编辑器容器并初始化界面。
|
* 创建编辑器容器并初始化界面。
|
||||||
*/
|
*/
|
||||||
protected createEditor(parent: HTMLElement): void {
|
protected createEditor(parent: HTMLElement): void {
|
||||||
this.container = document.createElement('div');
|
// 使用 WebView 服务创建 IOverlayWebview 实例
|
||||||
this.container.className = 'stock-details-editor';
|
this.webview = this.webviewService.createWebviewOverlay({
|
||||||
|
providedViewType: 'stockDetailsEditor',
|
||||||
|
title: '股票详情',
|
||||||
|
options: { retainContextWhenHidden: true },
|
||||||
|
contentOptions: {
|
||||||
|
allowScripts: true,
|
||||||
|
localResourceRoots: [], // 根据需求设置本地资源根路径
|
||||||
|
},
|
||||||
|
extension: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
// 添加占位符
|
// 将 WebView 定位到父元素
|
||||||
const placeholder = document.createElement('div');
|
if (this.webview) {
|
||||||
placeholder.className = 'stock-placeholder';
|
// 获取当前激活的窗口
|
||||||
placeholder.textContent = '请选择一只股票查看详情';
|
const targetWindow = DOM.getActiveWindow();
|
||||||
this.container.appendChild(placeholder);
|
|
||||||
|
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,56 +79,98 @@ export class StockDetailsEditor extends EditorPane {
|
|||||||
console.log(`setInput 接收到股票代码: ${input.getCode()}`);
|
console.log(`setInput 接收到股票代码: ${input.getCode()}`);
|
||||||
const stockCode = input.getCode();
|
const stockCode = input.getCode();
|
||||||
|
|
||||||
|
|
||||||
if (!stockCode || stockCode.trim() === '') {
|
if (!stockCode || stockCode.trim() === '') {
|
||||||
this.renderErrorMessage('股票代码为空，请选择有效的股票。');
|
this.renderErrorMessage('股票代码为空，请选择有效的股票。');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.renderStockDetails(stockCode);
|
// 设置 WebView HTML 内容
|
||||||
} else {
|
const htmlContent = this.generateWebviewContent(stockCode);
|
||||||
this.renderErrorMessage('未提供有效的股票代码');
|
this.webview.setHtml(htmlContent);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 根据股票代码加载详情。
|
* 生成 WebView 的 HTML 内容。
|
||||||
*/
|
*/
|
||||||
private renderStockDetails(stockCode: string): void {
|
// private generateWebviewContent(stockCode: string): string {
|
||||||
if (!this.container) {
|
// return `
|
||||||
return;
|
// <!DOCTYPE html>
|
||||||
|
// <html lang="en">
|
||||||
|
// <head>
|
||||||
|
// <meta charset="UTF-8">
|
||||||
|
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
// <title>股票详情</title>
|
||||||
|
// <style>
|
||||||
|
// body {
|
||||||
|
// font-family: Arial, sans-serif;
|
||||||
|
// margin: 0;
|
||||||
|
// padding: 20px;
|
||||||
|
// background: #f5f5f5;
|
||||||
|
// color: #333;
|
||||||
|
// }
|
||||||
|
// h1 {
|
||||||
|
// font-size: 24px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
// }
|
||||||
|
// .info {
|
||||||
|
// margin: 5px 0;
|
||||||
|
// }
|
||||||
|
// </style>
|
||||||
|
// </head>
|
||||||
|
// <body>
|
||||||
|
// <h1>股票详情</h1>
|
||||||
|
// <div class="info">代码: ${stockCode}</div>
|
||||||
|
// <div class="info">价格: ¥123.45</div>
|
||||||
|
// <div class="info">涨跌幅: +3.21%</div>
|
||||||
|
// </body>
|
||||||
|
// </html>
|
||||||
|
// `;
|
||||||
|
// }
|
||||||
|
|
||||||
|
private generateWebviewContent(stockCode: string): string {
|
||||||
|
return `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>股票详情</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
h1 {
|
||||||
// 清空容器内容
|
font-size: 24px;
|
||||||
this.container.textContent = ''; // 不使用 innerHTML
|
margin-bottom: 10px;
|
||||||
|
|
||||||
// 创建标题
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
.info {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>股票详情</h1>
|
||||||
|
<div class="info">代码: ${stockCode}</div>
|
||||||
|
<div id="price" class="info">价格: ¥加载中...</div>
|
||||||
|
<div id="change" class="info">涨跌幅: 加载中...</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 模拟异步获取股票数据
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById('price').textContent = '价格: ¥' + (Math.random() * 100).toFixed(2);
|
||||||
|
document.getElementById('change').textContent = '涨跌幅: ' + (Math.random() * 10 - 5).toFixed(2) + '%';
|
||||||
|
}, 100);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 渲染错误消息。
|
* 渲染错误消息。
|
||||||
@ -131,9 +193,18 @@ export class StockDetailsEditor extends EditorPane {
|
|||||||
* 布局调整。
|
* 布局调整。
|
||||||
*/
|
*/
|
||||||
override layout(dimension: Dimension): void {
|
override layout(dimension: Dimension): void {
|
||||||
if (this.container) {
|
if (this.webview && this.webview.container) {
|
||||||
this.container.style.width = `${dimension.width}px`;
|
const webviewContainer = this.webview.container;
|
||||||
this.container.style.height = `${dimension.height}px`;
|
|
||||||
|
// 设置 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();
|
super.clearInput();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user