内嵌了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 { 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 `
|
||||
// <!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>
|
||||
// `;
|
||||
// }
|
||||
|
||||
// 清空容器内容
|
||||
this.container.textContent = ''; // 不使用 innerHTML
|
||||
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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.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>
|
||||
|
||||
// 创建标题
|
||||
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);
|
||||
<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 {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user