Compare commits
3 Commits
ae05db9b66
...
0204afc276
| Author | SHA1 | Date | |
|---|---|---|---|
|
0204afc276 | ||
|
|
29283db1ec | ||
|
|
d9bac9bc6c |
@ -5,47 +5,68 @@
|
||||
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 container: HTMLElement | null = null;
|
||||
private webview: IOverlayWebview | null = null;
|
||||
|
||||
constructor(
|
||||
group: IEditorGroup,
|
||||
@ITelemetryService telemetryService: ITelemetryService,
|
||||
@IThemeService themeService: IThemeService,
|
||||
@IStorageService storageService: IStorageService
|
||||
@IStorageService storageService: IStorageService,
|
||||
@IWebviewService private readonly webviewService: IWebviewService
|
||||
) {
|
||||
super(StockDetailsEditor.ID, group, telemetryService, themeService, storageService);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建编辑器容器并初始化界面。
|
||||
* 创建编辑器容器并初始化 WebView。
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置编辑器输入。
|
||||
* 设置编辑器输入并更新 WebView 内容。
|
||||
*/
|
||||
override async setInput(
|
||||
input: StockDetailsInput,
|
||||
@ -55,8 +76,7 @@ export class StockDetailsEditor extends EditorPane {
|
||||
): Promise<void> {
|
||||
await super.setInput(input, options, context, token);
|
||||
|
||||
if (input.resource) {
|
||||
console.log(`setInput 接收到股票代码: ${input.getCode()}`);
|
||||
if (this.webview && input.resource) {
|
||||
const stockCode = input.getCode();
|
||||
|
||||
if (!stockCode || stockCode.trim() === '') {
|
||||
@ -64,76 +84,129 @@ export class StockDetailsEditor extends EditorPane {
|
||||
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;
|
||||
}
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 渲染错误消息。
|
||||
*/
|
||||
private renderErrorMessage(message: string): void {
|
||||
if (!this.container) {
|
||||
return;
|
||||
if (this.webview) {
|
||||
const errorContent = `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>错误</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="color: red;">错误</h1>
|
||||
<p>${message}</p>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
this.webview.setHtml(errorContent);
|
||||
}
|
||||
|
||||
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`;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,9 +214,14 @@ export class StockDetailsEditor extends EditorPane {
|
||||
* 清空输入内容。
|
||||
*/
|
||||
override clearInput(): void {
|
||||
if (this.container) {
|
||||
this.container.textContent = ''; // 不使用 innerHTML
|
||||
if (this.webview) {
|
||||
this.webview.setHtml('<!DOCTYPE html><html><body></body></html>'); // 清空内容
|
||||
}
|
||||
super.clearInput();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ import { EditorPaneDescriptor, IEditorPaneRegistry } from '../../../browser/edit
|
||||
import { EditorExtensions } from '../../../common/editor.js';
|
||||
import { StockDetailsEditor } from './editors/StockDetailsEditor.js';
|
||||
import { StockDetailsInput } from './editors/StockDetailsInput.js';
|
||||
import { IStockDetailsService, StockDetailsService } from './common/stockDetailsService.js';
|
||||
import { IStockDetailsService, StockDetailsService } from '../common/stockDetailsService.js';
|
||||
import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
|
||||
|
||||
// 注册消息传递服务
|
||||
|
||||
13
src/vs/workbench/contrib/example/browser/resources/app.js
Normal file
13
src/vs/workbench/contrib/example/browser/resources/app.js
Normal file
@ -0,0 +1,13 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 模拟异步获取股票数据
|
||||
setTimeout(() => {
|
||||
const stockCode = '000001'; // 示例代码，实际可通过外部注入
|
||||
document.getElementById('stock-code').textContent = stockCode;
|
||||
document.getElementById('price').textContent = '价格: ¥' + (Math.random() * 100).toFixed(2);
|
||||
document.getElementById('change').textContent = '涨跌幅: ' + (Math.random() * 10 - 5).toFixed(2) + '%';
|
||||
}, 1000);
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>股票详情</title>
|
||||
<link rel="stylesheet" href="[[CSS_PATH]]"> <!-- 动态替换 CSS 路径 -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>股票详情</h1>
|
||||
<div class="info">代码: <span id="stock-code">[[STOCK_CODE]]</span></div> <!-- 动态替换股票代码 -->
|
||||
<div id="price" class="info">价格: ¥加载中...</div>
|
||||
<div id="change" class="info">涨跌幅: 加载中...</div>
|
||||
<script src="[[JS_PATH]]"></script> <!-- 动态替换 JS 路径 -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,16 @@
|
||||
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;
|
||||
}
|
||||
@ -18,7 +18,7 @@ import { IAccessibleViewService } from '../../../../../platform/accessibility/br
|
||||
import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
|
||||
import * as DOM from '../../../../../base/browser/dom.js';
|
||||
|
||||
import { IStockDetailsService, StockDetail } from '../common/stockDetailsService.js';
|
||||
import { IStockDetailsService, StockDetail } from '../../common/stockDetailsService.js';
|
||||
|
||||
export class AuxiliaryView extends ViewPane {
|
||||
private stockDetailContainer: HTMLElement | undefined;
|
||||
|
||||
@ -23,8 +23,8 @@ import './media/exampleViewContainer.css';
|
||||
import { IEditorService } from '../../../../services/editor/common/editorService.js';
|
||||
import { StockDetailsInput } from '../editors/StockDetailsInput.js';
|
||||
import { IWorkbenchLayoutService, Parts } from '../../../../services/layout/browser/layoutService.js';
|
||||
import { IStockDetailsService, StockDetail } from '../common/stockDetailsService.js';
|
||||
|
||||
import { IStockDetailsService, StockDetail } from '../../common/stockDetailsService.js';
|
||||
import { httpService } from '../../common/stockHttpService.js';
|
||||
|
||||
export class ExampleView extends ViewPane {
|
||||
constructor(
|
||||
@ -62,30 +62,77 @@ export class ExampleView extends ViewPane {
|
||||
this.editorService.onDidActiveEditorChange(() => this.onActiveEditorChange());
|
||||
}
|
||||
|
||||
override renderBody(container: HTMLElement): void {
|
||||
// override renderBody(container: HTMLElement): void {
|
||||
// super.renderBody(container);
|
||||
|
||||
// const ul = DOM.$('ul'); // 创建一个无序列表
|
||||
// ul.classList.add('stock-list'); // 为列表添加样式类
|
||||
// const data = [
|
||||
// { name: 'Stock A', code: '000001', price: 100 },
|
||||
// { name: 'Stock B', code: '000002', price: 200 },
|
||||
// { name: 'Stock C', code: '000003', price: 300 },
|
||||
// { name: 'Stock D', code: '000004', price: 400 },
|
||||
// { name: 'Stock E', code: '000005', price: 500 },
|
||||
// ]; // 假数据
|
||||
|
||||
// for (const stock of data) {
|
||||
// const li = DOM.$('li');
|
||||
// li.textContent = `${stock.name} (${stock.code}) ¥${stock.price.toFixed(2)}`;
|
||||
// li.classList.add('stock-item');
|
||||
// li.addEventListener('click', () => {
|
||||
// this.openStockDetails(stock); // 点击时打开股票详情
|
||||
// });
|
||||
// ul.appendChild(li);
|
||||
// }
|
||||
|
||||
// container.appendChild(ul); // 将列表附加到容器中
|
||||
// }
|
||||
|
||||
override async renderBody(container: HTMLElement): Promise<void> {
|
||||
super.renderBody(container);
|
||||
|
||||
const ul = DOM.$('ul'); // 创建一个无序列表
|
||||
ul.classList.add('stock-list'); // 为列表添加样式类
|
||||
// 保持现有的静态数据和渲染逻辑
|
||||
const ul = DOM.$('ul');
|
||||
ul.classList.add('stock-list');
|
||||
|
||||
const data = [
|
||||
{ name: 'Stock A', code: '000001', price: 100 },
|
||||
{ name: 'Stock B', code: '000002', price: 200 },
|
||||
{ name: 'Stock C', code: '000003', price: 300 },
|
||||
{ name: 'Stock D', code: '000004', price: 400 },
|
||||
{ name: 'Stock E', code: '000005', price: 500 },
|
||||
]; // 假数据
|
||||
];
|
||||
|
||||
for (const stock of data) {
|
||||
const li = DOM.$('li');
|
||||
li.textContent = `${stock.name} (${stock.code}) ¥${stock.price.toFixed(2)}`;
|
||||
li.classList.add('stock-item');
|
||||
li.addEventListener('click', () => {
|
||||
this.openStockDetails(stock); // 点击时打开股票详情
|
||||
this.openStockDetails(stock);
|
||||
});
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
container.appendChild(ul); // 将列表附加到容器中
|
||||
container.appendChild(ul);
|
||||
|
||||
// 发起 POST 请求
|
||||
const requestBody = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
year: '1',
|
||||
indexType: 'hs300'
|
||||
};
|
||||
|
||||
console.log('即将进入请求调用');
|
||||
|
||||
try {
|
||||
const response = await httpService.fetchPostJson('https://www.shidaotec.com/api/strategy/selectStockPageList', requestBody);
|
||||
console.log('API Response:', response); // 请求完成后再打印
|
||||
} catch (err) {
|
||||
console.error('Error fetching stock data:', err); // 捕获异常
|
||||
}
|
||||
|
||||
console.log('已步过');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ import { IAccessibleViewService } from '../../../../../platform/accessibility/br
|
||||
import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
|
||||
import * as DOM from '../../../../../base/browser/dom.js';
|
||||
|
||||
import { IStockDetailsService, StockDetail } from '../common/stockDetailsService.js';
|
||||
import { IStockDetailsService, StockDetail } from '../../common/stockDetailsService.js';
|
||||
|
||||
export class PanelView extends ViewPane {
|
||||
private stockDetailContainer: HTMLElement | undefined;
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import { createDecorator } from '../../../../../platform/instantiation/common/instantiation.js';
|
||||
import { Emitter, Event } from '../../../../../base/common/event.js';
|
||||
import { createDecorator } from '../../../../platform/instantiation/common/instantiation.js';
|
||||
import { Emitter, Event } from '../../../../base/common/event.js';
|
||||
|
||||
/**
|
||||
* 定义服务接口和标识符
|
||||
38
src/vs/workbench/contrib/example/common/stockHttpService.ts
Normal file
38
src/vs/workbench/contrib/example/common/stockHttpService.ts
Normal file
@ -0,0 +1,38 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
export class HttpService {
|
||||
async fetchJson(url: string, options: RequestInit = {}): Promise<any> {
|
||||
const response = await fetch(url, options);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP Error: ${response.status} - ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async fetchText(url: string, options: RequestInit = {}): Promise<string> {
|
||||
const response = await fetch(url, options);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP Error: ${response.status} - ${response.statusText}`);
|
||||
}
|
||||
return response.text();
|
||||
}
|
||||
|
||||
async fetchPostJson(url: string, body: any, headers: Record<string, string> = { 'Content-Type': 'application/json' }): Promise<any> {
|
||||
console.log('Fetching data with body:', body);
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
// console.log('Response:', response);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP Error: ${response.status} - ${response.statusText}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例
|
||||
export const httpService = new HttpService();
|
||||
Loading…
Reference in New Issue
Block a user