feat: 实现试用用户欢迎引导和过期检测功能

- 新增试用用户首次登录欢迎弹窗，展示使用教程 - 新增试用期过期检测服务和过期提醒弹窗 - 从 JWT token 中提取 ispluginTrial 标识判断用户类型 - 试用用户跳过邀请码验证流程 - 在消息发送前检查试用期是否过期 - 新增 ExpiredPanel 和 WelcomePanel 面板组件 - 新增 expiredModal 和 welcomeModal 视图组件 - 优化用户登录流程，根据用户类型显示不同引导
2026-02-26 15:42:18 +08:00
parent 316c784bde
commit 208c24682b
12 changed files with 924 additions and 7 deletions
--- a/src/panels/WelcomePanel.ts
+++ b/src/panels/WelcomePanel.ts
@ -0,0 +1,153 @@
+/**
+ * 欢迎引导面板
+ * 功能：插件试用用户首次登录显示使用教程
+ * 依赖：vscode
+ * 使用场景：试用用户首次登录时显示
+ */
+
+import * as vscode from 'vscode';
+
+export class WelcomePanel {
+  public static currentPanel: WelcomePanel | undefined;
+  private readonly _panel: vscode.WebviewPanel;
+  private _disposables: vscode.Disposable[] = [];
+
+  private constructor(panel: vscode.WebviewPanel) {
+    this._panel = panel;
+    this._panel.webview.html = this.getHtmlContent();
+
+    // 监听来自 webview 的消息
+    this._panel.webview.onDidReceiveMessage(
+      (message) => {
+        if (message.command === 'close') {
+          this._panel.dispose();
+        }
+      },
+      null,
+      this._disposables
+    );
+
+    // 监听关闭事件
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+  }
+
+  public static render(context: vscode.ExtensionContext) {
+    // 避免重复显示
+    if (WelcomePanel.currentPanel) {
+      WelcomePanel.currentPanel._panel.reveal(vscode.ViewColumn.One);
+      return;
+    }
+
+    const panel = vscode.window.createWebviewPanel(
+      'icCoderWelcome',
+      '欢迎使用 IC Coder',
+      vscode.ViewColumn.One,
+      {
+        enableScripts: true,
+        retainContextWhenHidden: true
+      }
+    );
+
+    WelcomePanel.currentPanel = new WelcomePanel(panel);
+  }
+
+  private getHtmlContent(): string {
+    return `
+      <!DOCTYPE html>
+      <html lang="zh-CN">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>欢迎使用 IC Coder</title>
+        <style>
+          body {
+            padding: 40px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            line-height: 1.6;
+            color: var(--vscode-foreground);
+            background-color: var(--vscode-editor-background);
+          }
+          h1 {
+            color: var(--vscode-textLink-foreground);
+            margin-bottom: 20px;
+          }
+          .welcome-message {
+            font-size: 16px;
+            margin-bottom: 30px;
+            color: var(--vscode-descriptionForeground);
+          }
+          .step {
+            margin: 20px 0;
+            padding: 20px;
+            background: var(--vscode-editor-inactiveSelectionBackground);
+            border-radius: 8px;
+            border-left: 4px solid var(--vscode-textLink-foreground);
+          }
+          .step h3 {
+            margin-top: 0;
+            color: var(--vscode-textLink-foreground);
+          }
+          .step p {
+            margin: 10px 0;
+          }
+          .button {
+            padding: 12px 24px;
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-top: 20px;
+          }
+          .button:hover {
+            background: var(--vscode-button-hoverBackground);
+          }
+        </style>
+      </head>
+      <body>
+        <h1>🎉 欢迎使用 IC Coder！</h1>
+        <p class="welcome-message">
+          您已成功激活 15 天试用期，让我们开始探索 IC Coder 的强大功能吧！
+        </p>
+
+        <div class="step">
+          <h3>📝 步骤 1：打开聊天面板</h3>
+          <p>点击侧边栏的 IC Coder 图标，或使用命令面板搜索 "IC Coder: Open Chat"</p>
+        </div>
+
+        <div class="step">
+          <h3>💬 步骤 2：输入您的需求</h3>
+          <p>描述您想要生成的 Verilog 代码或需要帮助的问题，AI 将为您提供专业的解决方案</p>
+        </div>
+
+        <div class="step">
+          <h3>🔬 步骤 3：运行仿真</h3>
+          <p>使用 "生成 VCD" 命令运行 iverilog 仿真，并通过波形查看器查看仿真结果</p>
+        </div>
+
+        <button class="button" onclick="closePanel()">开始使用</button>
+
+        <script>
+          const vscode = acquireVsCodeApi();
+
+          function closePanel() {
+            vscode.postMessage({ command: 'close' });
+          }
+        </script>
+      </body>
+      </html>
+    `;
+  }
+
+  public dispose() {
+    WelcomePanel.currentPanel = undefined;
+    this._panel.dispose();
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}