feat: 实现试用用户欢迎引导和过期检测功能
- 新增试用用户首次登录欢迎弹窗，展示使用教程 - 新增试用期过期检测服务和过期提醒弹窗 - 从 JWT token 中提取 ispluginTrial 标识判断用户类型 - 试用用户跳过邀请码验证流程 - 在消息发送前检查试用期是否过期 - 新增 ExpiredPanel 和 WelcomePanel 面板组件 - 新增 expiredModal 和 welcomeModal 视图组件 - 优化用户登录流程，根据用户类型显示不同引导
This commit is contained in:
Roe-xin
78
src/panels/ExpiredPanel.ts
Normal file
78
src/panels/ExpiredPanel.ts
Normal file
@ -0,0 +1,78 @@
|
||||
/**
|
||||
* 试用期到期提醒面板
|
||||
* 功能：试用期到期时显示续费提示
|
||||
* 依赖：vscode
|
||||
* 使用场景：试用用户到期时显示
|
||||
*/
|
||||
|
||||
import * as vscode from 'vscode';
|
||||
|
||||
export class ExpiredPanel {
|
||||
public static render() {
|
||||
const panel = vscode.window.createWebviewPanel(
|
||||
'icCoderExpired',
|
||||
'试用期已到期',
|
||||
vscode.ViewColumn.One,
|
||||
{ enableScripts: true }
|
||||
);
|
||||
|
||||
panel.webview.html = this.getHtmlContent();
|
||||
}
|
||||
|
||||
private static getHtmlContent(): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: var(--vscode-foreground);
|
||||
background-color: var(--vscode-editor-background);
|
||||
}
|
||||
h1 {
|
||||
color: var(--vscode-errorForeground);
|
||||
font-size: 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin: 15px 0;
|
||||
color: var(--vscode-descriptionForeground);
|
||||
}
|
||||
.button {
|
||||
padding: 12px 30px;
|
||||
background: var(--vscode-button-background);
|
||||
color: var(--vscode-button-foreground);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin: 10px;
|
||||
}
|
||||
.button:hover {
|
||||
background: var(--vscode-button-hoverBackground);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>⏰ 您的试用期已到期</h1>
|
||||
<p>感谢您使用 IC Coder！您的 15 天试用期已结束。</p>
|
||||
<p>如需继续使用，请联系我们获取正式版本。</p>
|
||||
|
||||
<button class="button" onclick="contact()">联系我们</button>
|
||||
|
||||
<script>
|
||||
function contact() {
|
||||
window.open('https://iccoder.com/contact', '_blank');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -426,12 +426,55 @@ export async function showICHelperPanel(
|
||||
case "checkInvitationCode":
|
||||
// 检查邀请码验证状态
|
||||
{
|
||||
const { InvitationService } = require("../services/invitationService");
|
||||
const isVerified = await InvitationService.isVerified(context);
|
||||
panel.webview.postMessage({
|
||||
command: "invitationCodeStatus",
|
||||
verified: isVerified
|
||||
});
|
||||
// 先检查是否是试用用户
|
||||
const { getCachedUserInfo } = require("../services/userService");
|
||||
const userInfo = getCachedUserInfo();
|
||||
|
||||
if (userInfo?.isPluginTrial === true) {
|
||||
// 试用用户，跳过邀请码验证，直接返回已验证
|
||||
console.log('[ICHelperPanel] 试用用户，跳过邀请码验证');
|
||||
panel.webview.postMessage({
|
||||
command: "invitationCodeStatus",
|
||||
verified: true
|
||||
});
|
||||
} else {
|
||||
// 正式用户，检查邀请码
|
||||
const { InvitationService } = require("../services/invitationService");
|
||||
const isVerified = await InvitationService.isVerified(context);
|
||||
panel.webview.postMessage({
|
||||
command: "invitationCodeStatus",
|
||||
verified: isVerified
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "checkWelcomeModal":
|
||||
// 检查是否需要显示欢迎弹窗
|
||||
{
|
||||
console.log('[ICHelperPanel] 收到 checkWelcomeModal 消息');
|
||||
const showWelcome = context.globalState.get('showWelcomeModal');
|
||||
console.log('[ICHelperPanel] showWelcomeModal 标记值:', showWelcome);
|
||||
|
||||
if (showWelcome) {
|
||||
// 清除标记并显示欢迎弹窗
|
||||
await context.globalState.update('showWelcomeModal', undefined);
|
||||
console.log('[ICHelperPanel] ✅ 发送 showWelcomeModal 命令到前端');
|
||||
panel.webview.postMessage({
|
||||
command: "showWelcomeModal"
|
||||
});
|
||||
} else {
|
||||
console.log('[ICHelperPanel] showWelcomeModal 标记为 false，不显示弹窗');
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "checkTrialExpiration":
|
||||
// 检查试用期是否过期
|
||||
{
|
||||
console.log('[ICHelperPanel] 收到 checkTrialExpiration 消息');
|
||||
const { TrialExpirationService } = require("../services/trialExpirationService");
|
||||
const trialService = new TrialExpirationService(context, panel);
|
||||
const isExpired = await trialService.checkExpiration();
|
||||
console.log('[ICHelperPanel] 试用期过期状态:', isExpired);
|
||||
}
|
||||
break;
|
||||
case "verifyInvitationCode":
|
||||
|
||||
153
src/panels/WelcomePanel.ts
Normal file
153
src/panels/WelcomePanel.ts
Normal file
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user