修改HOME页面

src/home.ts

@@ -8,9 +8,7 @@ export default class DSHome {
   private context: vscode.ExtensionContext;
   private remoteContainer: RemoteContainer;
   private user: User;
-  private devstarHomePageUrl: string;
+  private devstarDomain: string | undefined;
-  private devstarDomain: string | undefined
-
 
   /**
    * 配置项提供devstarDomain 
@@ -33,54 +31,51 @@ export default class DSHome {
     this.remoteContainer = new RemoteContainer(user);
 
     if (devstarDomain != undefined && devstarDomain != "") {
-      this.devstarDomain = devstarDomain.endsWith('/') ? devstarDomain.slice(0, -1) : devstarDomain
+      this.devstarDomain = devstarDomain.endsWith('/') ? devstarDomain.slice(0, -1) : devstarDomain;
-      this.devstarHomePageUrl = this.devstarDomain + "/devstar-home"
     } else {
-      const devstarDomainFromConfig = utils.devstarDomain()
+      const devstarDomainFromConfig = utils.devstarDomain();
       if (devstarDomainFromConfig != undefined && devstarDomainFromConfig != "") {
-        this.devstarDomain = devstarDomainFromConfig.endsWith('/') ? devstarDomainFromConfig.slice(0, -1) : devstarDomainFromConfig
+        this.devstarDomain = devstarDomainFromConfig.endsWith('/') ? devstarDomainFromConfig.slice(0, -1) : devstarDomainFromConfig;
-        this.devstarHomePageUrl = this.devstarDomain + "/devstar-home"
       } else {
-        this.devstarDomain = "https://devstar.cn"
+        this.devstarDomain = "https://devstar.cn";
-        this.devstarHomePageUrl = "https://devstar.cn/devstar-home"
       }
     }
   }
 
   setUser(user: User) {
-    this.user = user
+    this.user = user;
   }
 
   setRemoteContainer(remoteContainer: RemoteContainer) {
-    this.remoteContainer = remoteContainer
+    this.remoteContainer = remoteContainer;
   }
 
   setDevstarDomainAndHomePageURL(devstarDomain: string) {
     if (devstarDomain != undefined && devstarDomain != "") {
-      this.devstarDomain = devstarDomain.endsWith('/') ? devstarDomain.slice(0, -1) : devstarDomain
+      this.devstarDomain = devstarDomain.endsWith('/') ? devstarDomain.slice(0, -1) : devstarDomain;
-      this.devstarHomePageUrl = devstarDomain.endsWith('/') ? this.devstarDomain + "devstar-home" : devstarDomain + "/devstar-home"
     } else {
-      console.error("devstarDomain is undefined or null")
+      console.error("devstarDomain is undefined or null");
     }
   }
 
-  async toggle(devstarHomePageUrl: string = this.devstarHomePageUrl) {
+  async toggle() {
     const panel = vscode.window.createWebviewPanel(
       'homeWebview',
       vscode.l10n.t('Home'),
       vscode.ViewColumn.One,
       {
         enableScripts: true,
+        enableForms: true,
         retainContextWhenHidden: true,
       }
     );
 
-    panel.webview.html = await this.getWebviewContent(devstarHomePageUrl);
+    panel.webview.html = await this.getWebviewContent();
 
     panel.webview.onDidReceiveMessage(
       async (message) => {
-        const data = message.data
+        const data = message.data;
-        const need_return = message.need_return
+        const need_return = message.need_return;
         if (need_return) {
           // ================= need return ====================
           switch (message.command) {
@@ -88,78 +83,71 @@ export default class DSHome {
             case 'getHomeConfig':
               const config = {
                 language: vscode.env.language
-              }
+              };
-              panel.webview.postMessage({ command: 'getHomeConfig', data: { homeConfig: config } })
+              panel.webview.postMessage({ command: 'getHomeConfig', data: { homeConfig: config } });
               break;
             case 'getUserToken':
-              const userToken = this.user.getUserTokenFromLocal()
+              const userToken = this.user.getUserTokenFromLocal();
               if (userToken === undefined) {
-                panel.webview.postMessage({ command: 'getUserToken', data: { userToken: '' } })
+                panel.webview.postMessage({ command: 'getUserToken', data: { userToken: '' } });
-                break;
               } else {
-                panel.webview.postMessage({ command: 'getUserToken', data: { userToken: userToken } })
+                panel.webview.postMessage({ command: 'getUserToken', data: { userToken: userToken } });
-                break;
               }
+              break;
             case 'getUsername':
-              const username = this.user.getUsernameFromLocal()
+              const username = this.user.getUsernameFromLocal();
               if (username === undefined) {
-                panel.webview.postMessage({ command: 'getUsername', data: { username: '' } })
+                panel.webview.postMessage({ command: 'getUsername', data: { username: '' } });
-                break;
               } else {
-                panel.webview.postMessage({ command: 'getUsername', data: { username: username } })
+                panel.webview.postMessage({ command: 'getUsername', data: { username: username } });
-                break;
               }
+              break;
             case 'firstOpenRemoteFolder':
               // data.host - project name
-              await this.remoteContainer.firstOpenProject(data.host, data.hostname, data.port, data.username, data.path, this.context)
+              await this.remoteContainer.firstOpenProject(data.host, data.hostname, data.port, data.username, data.path, this.context);
               break;
             case 'openRemoteFolder':
               this.remoteContainer.openRemoteFolder(data.host, data.port, data.username, data.path);
               break;
             case 'getDevstarDomain':
-              panel.webview.postMessage({ command: 'getDevstarDomain', data: { devstarDomain: this.devstarDomain } })
+              panel.webview.postMessage({ command: 'getDevstarDomain', data: { devstarDomain: this.devstarDomain } });
               break;
             // ----------------- not frequent -----------------------
             case 'setUserToken':
-              this.user.setUserTokenToLocal(data.userToken)
+              this.user.setUserTokenToLocal(data.userToken);
               if (data.userToken === this.user.getUserTokenFromLocal()) {
-                panel.webview.postMessage({ command: 'setUserToken', data: { ok: true } })
+                panel.webview.postMessage({ command: 'setUserToken', data: { ok: true } });
-                break;
               } else {
-                panel.webview.postMessage({ command: 'setUserToken', data: { ok: false } })
+                panel.webview.postMessage({ command: 'setUserToken', data: { ok: false } });
-                break;
               }
+              break;
             case 'setUsername':
               this.user.setUsernameToLocal(data.username);
               if (data.username === this.user.getUsernameFromLocal()) {
                 panel.webview.postMessage({ command: 'setUsername', data: { ok: true } });
-                break;
               } else {
                 panel.webview.postMessage({ command: 'setUsername', data: { ok: false } });
-                break;
               }
+              break;
             case 'getUserPublicKey':
-              var userPublicKey = '';
+              let userPublicKey = '';
               if (this.user.existUserPrivateKey()) {
                 userPublicKey = this.user.getUserPublicKey();
-                panel.webview.postMessage({ command: 'getUserPublicKey', data: { userPublicKey: userPublicKey } })
-                break;
-              } else {
-                panel.webview.postMessage({ command: 'getUserPublicKey', data: { userPublicKey: userPublicKey } })
-                break;
               }
+              panel.webview.postMessage({ command: 'getUserPublicKey', data: { userPublicKey: userPublicKey } });
+              break;
             case 'createUserPublicKey':
               await this.user.createUserSSHKey();
               if (this.user.existUserPublicKey()) {
-                panel.webview.postMessage({ command: 'createUserPublicKey', data: { ok: true } })
+                panel.webview.postMessage({ command: 'createUserPublicKey', data: { ok: true } });
-                break;
               } else {
-                panel.webview.postMessage({ command: 'createUserPublicKey', data: { ok: false } })
+                panel.webview.postMessage({ command: 'createUserPublicKey', data: { ok: false } });
-                break;
               }
+              break;
             case 'getMachineName':
               const machineName = os.hostname();
-              panel.webview.postMessage({ command: 'getMachineName', data: { machineName: machineName } })
+              panel.webview.postMessage({ command: 'getMachineName', data: { machineName: machineName } });
+              break;
           }
         } else {
           // ================= don't need return ==============
@@ -170,10 +158,10 @@ export default class DSHome {
               vscode.window.showInformationMessage(data.message);
               break;
             case 'showWarningNotification':
-              vscode.window.showWarningMessage(data.message)
+              vscode.window.showWarningMessage(data.message);
               break;
             case 'showErrorNotification':
-              await utils.showErrorNotification(data.message)
+              await utils.showErrorNotification(data.message);
               break;
           }
         }
@@ -182,105 +170,189 @@ export default class DSHome {
       this.context.subscriptions
     );
 
-    this.context.subscriptions.push(panel)
+    this.context.subscriptions.push(panel);
   }
 
-
+  async getWebviewContent(): Promise<string> {
-  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>
+      <style>
+        body {
+          margin: 0;
+          padding: 20px;
+          font-family: var(--vscode-font-family);
+          background-color: var(--vscode-editor-background);
+          color: var(--vscode-editor-foreground);
+        }
+        .header {
+          text-align: center;
+          margin-bottom: 30px;
+        }
+        .feature-list {
+          list-style: none;
+          padding: 0;
+        }
+        .feature-item {
+          padding: 10px;
+          margin: 10px 0;
+          background-color: var(--vscode-button-background);
+          border-radius: 4px;
+          cursor: pointer;
+          text-align: center;
+        }
+        .feature-item:hover {
+          background-color: var(--vscode-button-hoverBackground);
+        }
+        .login-status {
+          padding: 10px;
+          margin: 10px 0;
+          border-radius: 4px;
+          text-align: center;
+        }
+        .logged-in {
+          background-color: var(--vscode-inputValidation-infoBackground);
+          border: 1px solid var(--vscode-inputValidation-infoBorder);
+        }
+        .logged-out {
+          background-color: var(--vscode-inputValidation-warningBackground);
+          border: 1px solid var(--vscode-inputValidation-warningBorder);
+        }
+        .hidden {
+          display: none;
+        }
+      </style>
     </head>
-
     <body>
-        <iframe id="embedded-devstar" src="${devstarHomePageUrl}" sandbox="allow-popups allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation" width="100%" height="100%" frameborder="0"
+      <div class="header">
-          style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;">
+        <h1>🚀 DevStar Home</h1>
-        </iframe>
+        <p>欢迎使用 DevStar 扩展</p>
+      </div>
+
+      <!-- 登录状态显示 -->
+      <div id="loginStatus" class="login-status hidden">
+        <span id="statusText"></span>
+        <span id="usernameDisplay"></span>
+      </div>
+      
+      <ul class="feature-list">
+        <li class="feature-item" onclick="handleMainAction()" id="mainActionButton">
+          主要功能
+        </li>
+        <li class="feature-item" onclick="vscodePostMessage('showInformationNotification', {message: '功能2点击'})">
+          功能 2
+        </li>
+        <li class="feature-item" onclick="vscodePostMessage('showInformationNotification', {message: '功能3点击'})">
+          功能 3
+        </li>
+      </ul>
 
       <script>
         const vscode = acquireVsCodeApi();
+        let isLoggedIn = false;
+        let username = '';
 
-          function firstOpenRemoteFolder() {
+        function vscodePostMessage(command, data) {
-            vscode.postMessage({ command: 'firstOpenRemoteFolder', host: host, username: username, password: password, port: port, path: path });
+          vscode.postMessage({ 
+            command: command, 
+            need_return: false, 
+            data: data 
+          });
         }
 
-          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, need_return: true, data: data });
-              vscode.postMessage({ command: command, need_return: true, data: data })
 
             function handleResponse(event) {
               const jsonData = event.data;
               if (jsonData.command === command) {
-                  // console.log("communicateVSCode", jsonData.data)
+                window.removeEventListener('message', handleResponse);
-
+                resolve(jsonData.data);
-                  // return vscode response
-                  window.removeEventListener('message', handleResponse) // 清理监听器
-                  resolve(jsonData.data)
               }
             }
 
-              window.addEventListener('message', handleResponse)
+            window.addEventListener('message', handleResponse);
 
             setTimeout(() => {
-                window.removeEventListener('message', handleResponse)
+              window.removeEventListener('message', handleResponse);
-                reject('timeout')
+              reject('timeout');
-              }, 5000); // 5秒超时
+            }, 5000);
-            })
-          }
-
-          // 监听子页面的消息
-          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 }, '*')
-                }
-              } else if (jsonData.target === 'vscode_no_return') {
-                vscode.postMessage({ command: jsonData.action, need_return: false, data: jsonData.data })
-              }
-            } catch (error) {
-              console.error('Error parsing message:', error);
-            }
           });
+        }
+
+        // 检查登录状态
+        async function checkLoginStatus() {
+          try {
+            const userTokenResult = await communicateVSCode('getUserToken', {});
+            const usernameResult = await communicateVSCode('getUsername', {});
+            
+            const userToken = userTokenResult.userToken;
+            username = usernameResult.username;
+            
+            isLoggedIn = !!(userToken && userToken.trim() !== '' && username && username.trim() !== '');
+            
+            updateUI();
+          } catch (error) {
+            console.error('检查登录状态失败:', error);
+            isLoggedIn = false;
+            updateUI();
+          }
+        }
+
+        // 更新UI显示
+        function updateUI() {
+          const loginStatus = document.getElementById('loginStatus');
+          const statusText = document.getElementById('statusText');
+          const usernameDisplay = document.getElementById('usernameDisplay');
+          const mainActionButton = document.getElementById('mainActionButton');
+          
+          loginStatus.classList.remove('hidden');
+          
+          if (isLoggedIn) {
+            loginStatus.classList.remove('logged-out');
+            loginStatus.classList.add('logged-in');
+            statusText.textContent = '已登录';
+            usernameDisplay.textContent = username ? ' - 用户: ' + username : '';
+            mainActionButton.textContent = '跳转到本地服务 (端口 80)';
+          } else {
+            loginStatus.classList.remove('logged-in');
+            loginStatus.classList.add('logged-out');
+            statusText.textContent = '未登录';
+            usernameDisplay.textContent = '';
+            mainActionButton.textContent = '跳转到 DevStar 官网';
+          }
+        }
+
+        // 处理主要功能点击
+        function handleMainAction() {
+          if (isLoggedIn) {
+            // 已登录：跳转到本地80端口
+            vscodePostMessage('showInformationNotification', {message: '跳转到本地服务 http://localhost:80'});
+            window.open('http://localhost:80', '_blank');
+          } else {
+            // 未登录：跳转到 DevStar 官网
+            vscodePostMessage('showInformationNotification', {message: '跳转到 DevStar 官网'});
+            window.open('https://devstar.cn', '_blank');
+          }
+        }
+
+        // 页面加载时检查登录状态
+        window.addEventListener('load', async () => {
+          await checkLoginStatus();
+        });
+
+        // 可选：添加重新检查登录状态的功能
+        function refreshLoginStatus() {
+          checkLoginStatus();
+          vscodePostMessage('showInformationNotification', {message: '登录状态已刷新'});
+        }
       </script>
     </body>
-
+    </html>`;
-      </html>`
   }
 }

src/main.ts

@@ -179,8 +179,8 @@ export class DevStarExtension {
 
   registerGlobalCommands(context: vscode.ExtensionContext) {
     context.subscriptions.push(
-      vscode.commands.registerCommand('devstar.showHome', (url: string) =>
+      vscode.commands.registerCommand('devstar.showHome', () =>
-        this.dsHome.toggle(url)
+        this.dsHome.toggle()
       ),
       vscode.commands.registerCommand('devstar.clean', () => {
         // 先清除ssh key