Files
IC-Coder-Plugin/src/views/ndtWelcomeModal.ts

330 lines
9.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 宁德时代欢迎弹窗
* 功能:邀请码验证成功后显示欢迎信息
* 依赖:无
* 使用场景:宁德时代用户首次验证邀请码成功后显示
*/
/**
* 获取宁德时代欢迎弹窗的 HTML 内容
*/
export function getNdtWelcomeModalContent(logoUri?: string): string {
return `
<!-- 宁德时代欢迎弹窗 -->
<div id="ndtWelcomeModal" class="ndt-welcome-modal" style="display: none;">
<div class="ndt-welcome-modal-overlay"></div>
<div class="ndt-welcome-modal-content">
${logoUri ? `<img src="${logoUri}" class="ndt-welcome-logo-corner" alt="IC Coder" />` : ""}
<div class="ndt-welcome-modal-header">
<div class="ndt-welcome-icon">🎉</div>
<h2>欢迎企业<span style="white-space: nowrap;">的各位专家</span>使用 IC Coder</h2>
</div>
<div class="ndt-welcome-modal-body">
<!-- 试用期提示 -->
<div class="ndt-trial-banner">
<span>您已获得 <strong>5 天企业版试用期</strong>企业版试用期内Credits用量无限并可无限制使用所有功能</span>
</div>
<!-- IC Coder 简介 -->
<div class="ndt-intro-section">
<h3 class="ndt-section-title">关于 IC Coder</h3>
<p class="ndt-intro-text">IC Coder是一款The Agentic AI Verilog Coding Platform自主式人工智能 Verilog 编码平台。我们采用全球顶尖的IC Coder自研芯片设计微调模型为代码生成提供强大的AI能力支撑。</p>
<div class="ndt-features">
<div class="ndt-feature-item">
<span class="ndt-feature-text">多智能体架构Multi-Agent System多个专业化AI智能体协同工作分别负责架构设计、代码生成、验证测试等不同环节</span>
</div>
<div class="ndt-feature-item">
<span class="ndt-feature-text">增强上下文引擎:智能理解和管理大规模设计上下文,确保生成代码的一致性和准确性</span>
</div>
<div class="ndt-feature-item">
<span class="ndt-feature-text">AI自主仿真IC Coder提供完全自动化的仿真验证流程无需手动编写测试代码</span>
</div>
</div>
</div>
<!-- 按钮组 -->
<div class="ndt-button-group">
<button id="ndtTutorialBtn" class="ndt-welcome-btn ndt-welcome-btn-secondary">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" fill="currentColor"/>
<path d="M8 5v3l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span>查看使用教程</span>
</button>
<button id="ndtWelcomeStartBtn" class="ndt-welcome-btn ndt-welcome-btn-primary">
<span>开始使用</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
</div>
`;
}
/**
* 获取宁德时代欢迎弹窗的 CSS 样式
*/
export function getNdtWelcomeModalStyles(): string {
return `
/* 宁德时代欢迎弹窗样式 */
.ndt-welcome-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
font-family: var(--vscode-font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
}
.ndt-welcome-modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease-out;
}
.ndt-welcome-modal-content {
position: relative;
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-widget-border);
border-radius: 12px;
width: 100%;
max-width: 480px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
animation: modalSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow: hidden;
}
.ndt-welcome-logo-corner {
position: absolute;
top: 16px;
left: 24px;
height: 40px;
width: auto;
opacity: 0.9;
z-index: 10;
}
.ndt-welcome-modal-header {
padding: 60px 32px 20px;
text-align: center;
}
.ndt-welcome-icon {
font-size: 48px;
margin-bottom: 16px;
}
.ndt-welcome-modal-header h2 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 600;
color: var(--vscode-foreground);
line-height: 1.4;
}
.ndt-welcome-modal-subtitle {
margin: 0;
font-size: 14px;
color: var(--vscode-descriptionForeground);
line-height: 1.5;
}
.ndt-welcome-modal-body {
padding: 0 32px 32px;
}
/* 试用期横幅 */
.ndt-trial-banner {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
background: var(--vscode-editor-inactiveSelectionBackground);
border-radius: 8px;
margin-bottom: 20px;
font-size: 13px;
color: var(--vscode-descriptionForeground);
border-left: 3px solid var(--vscode-textLink-foreground);
}
.ndt-trial-banner strong {
color: var(--vscode-textLink-foreground);
font-weight: 600;
}
/* IC Coder 简介区域 */
.ndt-intro-section {
margin-bottom: 24px;
}
.ndt-section-title {
margin: 0 0 12px;
font-size: 15px;
font-weight: 600;
color: var(--vscode-foreground);
}
.ndt-intro-text {
margin: 0 0 16px;
font-size: 13px;
color: var(--vscode-descriptionForeground);
line-height: 1.6;
}
.ndt-features {
display: flex;
flex-direction: column;
gap: 10px;
}
.ndt-feature-item {
padding: 10px 12px;
background: var(--vscode-editor-inactiveSelectionBackground);
border-radius: 6px;
font-size: 13px;
color: var(--vscode-foreground);
border-left: 2px solid var(--vscode-textLink-foreground);
}
.ndt-feature-text {
display: block;
}
/* 按钮组 */
.ndt-button-group {
display: flex;
gap: 12px;
}
.ndt-welcome-btn {
flex: 1;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s;
}
.ndt-welcome-btn-primary {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
}
.ndt-welcome-btn-primary:hover {
background: var(--vscode-button-hoverBackground);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ndt-welcome-btn-secondary {
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
}
.ndt-welcome-btn-secondary:hover {
background: var(--vscode-button-secondaryHoverBackground);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ndt-welcome-btn:active {
transform: translateY(0);
}
`;
}
/**
* 获取宁德时代欢迎弹窗的 JavaScript 逻辑
*/
export function getNdtWelcomeModalScript(): string {
return `
// 宁德时代欢迎弹窗逻辑
(function() {
const modal = document.getElementById('ndtWelcomeModal');
const startBtn = document.getElementById('ndtWelcomeStartBtn');
const tutorialBtn = document.getElementById('ndtTutorialBtn');
const overlay = modal?.querySelector('.ndt-welcome-modal-overlay');
// 显示宁德时代欢迎弹窗
window.showNdtWelcomeModal = function() {
if (modal) {
modal.style.display = 'flex';
}
};
// 隐藏宁德时代欢迎弹窗
window.hideNdtWelcomeModal = function() {
if (modal) {
modal.style.display = 'none';
}
};
// 点击"查看使用教程"按钮
if (tutorialBtn) {
tutorialBtn.addEventListener('click', function() {
// 打开使用教程链接
vscode.postMessage({
command: 'openTutorial'
});
});
}
// 点击"开始使用"按钮
if (startBtn) {
startBtn.addEventListener('click', function() {
hideNdtWelcomeModal();
// 通知后端用户已查看欢迎弹窗
vscode.postMessage({ command: 'ndtWelcomeModalViewed' });
});
}
// 点击遮罩层关闭弹窗
if (overlay) {
overlay.addEventListener('click', function() {
hideNdtWelcomeModal();
vscode.postMessage({ command: 'ndtWelcomeModalViewed' });
});
}
// 阻止点击弹窗内容时关闭
const content = modal?.querySelector('.ndt-welcome-modal-content');
if (content) {
content.addEventListener('click', function(e) {
e.stopPropagation();
});
}
// 监听来自后端的消息
window.addEventListener('message', function(event) {
const message = event.data;
if (message.command === 'showNdtWelcomeModal') {
showNdtWelcomeModal();
}
});
})();
`;
}