refactor(home): merge content of index.html into webview and enable configuring devstar home url in package.json
This commit is contained in:
Levi Yan
@@ -85,6 +85,11 @@
|
|||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": false,
|
"default": false,
|
||||||
"description": "Disable showing DevStar Home at startup"
|
"description": "Disable showing DevStar Home at startup"
|
||||||
|
},
|
||||||
|
"devstar.devstarHomePage": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "https://devstar.cn/devstar-home",
|
||||||
|
"description": "DevStar Home Page"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
113
src/home.ts
113
src/home.ts
@@ -8,16 +8,23 @@ export default class DSHome {
|
|||||||
private context: vscode.ExtensionContext;
|
private context: vscode.ExtensionContext;
|
||||||
private remoteContainer: RemoteContainer;
|
private remoteContainer: RemoteContainer;
|
||||||
private user:User;
|
private user:User;
|
||||||
static defaultUrl = 'http://localhost:8080/test/index.html';
|
private devstarHomePageUrl:string;
|
||||||
|
|
||||||
constructor(context: vscode.ExtensionContext) {
|
constructor(context: vscode.ExtensionContext) {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
this.user = new User(context);
|
this.user = new User(context);
|
||||||
this.remoteContainer = new RemoteContainer(this.user);
|
this.remoteContainer = new RemoteContainer(this.user);
|
||||||
|
|
||||||
|
const devstarHomePageUrl:string|undefined = vscode.workspace.getConfiguration('devstar').get('devstarHomePage')
|
||||||
|
if (undefined == devstarHomePageUrl || "" == devstarHomePageUrl) {
|
||||||
|
this.devstarHomePageUrl = "https://devstar.cn/devstar-home"
|
||||||
|
// this.devstarHomePageUrl = "http://localhost:3000/devstar-home"
|
||||||
|
} else {
|
||||||
|
this.devstarHomePageUrl = devstarHomePageUrl
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async toggle(url: string = DSHome.defaultUrl) {
|
async toggle(devstarHomePageUrl: string = this.devstarHomePageUrl) {
|
||||||
console.log(url);
|
|
||||||
const panel = vscode.window.createWebviewPanel(
|
const panel = vscode.window.createWebviewPanel(
|
||||||
'homeWebview',
|
'homeWebview',
|
||||||
'Home',
|
'Home',
|
||||||
@@ -27,9 +34,7 @@ export default class DSHome {
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
utils.fetch(url).then(async (content) => {
|
panel.webview.html = await this.getWebviewContent(devstarHomePageUrl);
|
||||||
panel.webview.html = await this.getWebviewContent(content);
|
|
||||||
})
|
|
||||||
|
|
||||||
panel.webview.onDidReceiveMessage(
|
panel.webview.onDidReceiveMessage(
|
||||||
async (message) => {
|
async (message) => {
|
||||||
@@ -129,7 +134,99 @@ export default class DSHome {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
async getWebviewContent(content: string): Promise<string> {
|
async getWebviewContent(devstarHomePageUrl: string): Promise<string> {
|
||||||
return `${content}`
|
return `
|
||||||
|
<?php
|
||||||
|
header("Access-Control-Allow-Origin: *");
|
||||||
|
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
|
||||||
|
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
|
||||||
|
header("Allow: GET, POST, OPTIONS, PUT, DELETE");
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DevStar Home</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<iframe id="embedded-devstar" src="${devstarHomePageUrl}" width="100%" height="100%" frameborder="0"
|
||||||
|
style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;">
|
||||||
|
</iframe>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const vscode = acquireVsCodeApi();
|
||||||
|
|
||||||
|
function firstOpenRemoteFolder() {
|
||||||
|
vscode.postMessage({ command: 'firstOpenRemoteFolder', host: host, username: username, password: password, port: port, path: path });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRemoteFolder() {
|
||||||
|
vscode.postMessage({ command: 'openRemoteFolder', host: host, path: path });
|
||||||
|
}
|
||||||
|
|
||||||
|
function firstOpenRemoteFolderWithData(host, username, password, port, path) {
|
||||||
|
vscode.postMessage({ command: 'firstOpenRemoteFolder', host: host, username: username, password: password, port: port, path: path });
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRemoteFolderWithData(host, path) {
|
||||||
|
vscode.postMessage({ command: 'openRemoteFolder', host: host, path: path });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function communicateVSCode(command, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// request to vscode
|
||||||
|
vscode.postMessage({ command: command, data: data })
|
||||||
|
|
||||||
|
function handleResponse(event) {
|
||||||
|
const jsonData = event.data;
|
||||||
|
if (jsonData.command === command) {
|
||||||
|
// console.log("communicateVSCode", jsonData.data)
|
||||||
|
|
||||||
|
// return vscode response
|
||||||
|
window.removeEventListener('message', handleResponse) // 清理监听器
|
||||||
|
resolve(jsonData.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('message', handleResponse)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
window.removeEventListener('message', handleResponse)
|
||||||
|
reject('timeout')
|
||||||
|
}, 5000); // 5秒超时
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听子页面的消息
|
||||||
|
window.addEventListener('message', async (event) => {
|
||||||
|
// 出于安全考虑，检查 event.origin 是否是你预期的源
|
||||||
|
// if (event.origin !== "http://expected-origin.com") {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
try {
|
||||||
|
const jsonData = event.data;
|
||||||
|
|
||||||
|
if (jsonData.target === 'vscode') {
|
||||||
|
const actionFromHome = jsonData.action
|
||||||
|
const dataFromHome = jsonData.data
|
||||||
|
const dataFromVSCodeResponse = await communicateVSCode(actionFromHome, dataFromHome)
|
||||||
|
|
||||||
|
var iframe = document.getElementById('embedded-devstar');
|
||||||
|
if (iframe && iframe.contentWindow) {
|
||||||
|
iframe.contentWindow.postMessage({ action: actionFromHome, data: dataFromVSCodeResponse }, '*')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing message:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user