refactor(home): merge content of index.html into webview and enable configuring devstar home url in package.json

2024-11-12 19:01:40 +08:00
parent 270b36c464
commit 97a22b4deb
2 changed files with 110 additions and 8 deletions
--- a/package.json
+++ b/package.json
@@ -85,6 +85,11 @@
          "type": "boolean",
          "default": false,
          "description": "Disable showing DevStar Home at startup"
+        },
+        "devstar.devstarHomePage": {
+          "type": "string",
+          "default": "https://devstar.cn/devstar-home",
+          "description": "DevStar Home Page"
        }
      }
    }
--- a/src/home.ts
+++ b/src/home.ts
@@ -8,16 +8,23 @@ export default class DSHome {
  private context: vscode.ExtensionContext;
  private remoteContainer: RemoteContainer;
  private user:User;
-  static defaultUrl = 'http://localhost:8080/test/index.html';
+  private devstarHomePageUrl:string;

  constructor(context: vscode.ExtensionContext) {
    this.context = context;
    this.user = new User(context);
    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) {
-    console.log(url);
+  async toggle(devstarHomePageUrl: string = this.devstarHomePageUrl) {
    const panel = vscode.window.createWebviewPanel(
      'homeWebview',
      'Home',
@@ -27,9 +34,7 @@ export default class DSHome {
      }
    );

-    utils.fetch(url).then(async (content) => {
-      panel.webview.html = await this.getWebviewContent(content);
-    })
+    panel.webview.html = await this.getWebviewContent(devstarHomePageUrl);

    panel.webview.onDidReceiveMessage(
      async (message) => {
@@ -129,7 +134,99 @@ export default class DSHome {
  }


-  async getWebviewContent(content: string): Promise<string> {
-    return `${content}`
+  async getWebviewContent(devstarHomePageUrl: string): Promise<string> {
+    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>`
  }
 }