208c24682b
- 新增试用用户首次登录欢迎弹窗，展示使用教程 - 新增试用期过期检测服务和过期提醒弹窗 - 从 JWT token 中提取 ispluginTrial 标识判断用户类型 - 试用用户跳过邀请码验证流程 - 在消息发送前检查试用期是否过期 - 新增 ExpiredPanel 和 WelcomePanel 面板组件 - 新增 expiredModal 和 welcomeModal 视图组件 - 优化用户登录流程，根据用户类型显示不同引导
154 lines
4.4 KiB
TypeScript
154 lines
4.4 KiB
TypeScript
/**
|
||
* 欢迎引导面板
|
||
* 功能：插件试用用户首次登录显示使用教程
|
||
* 依赖：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();
|
||
}
|
||
}
|
||
}
|
||
}
|