Files
IC-Coder-Plugin/src/views/ndtWelcomeModal.ts
2026-02-26 16:31:16 +08:00

331 lines
9.8 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>欢迎宁德时代新能源科技股份有限公司的各位专家使用 IC Coder</h2>
<p class="ndt-welcome-modal-subtitle">感谢您选择 IC Coder 作为您的芯片设计助手</p>
</div>
<div class="ndt-welcome-modal-body">
<!-- 试用期提示 -->
<div class="ndt-trial-banner">
<span>您已获得 <strong>5 天试用期</strong>,试用期内可无限制使用所有功能</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 编码平台。我们采用全球顶尖的大语言模型加上自研的针对芯片设计领域深度优化的微调模型为代码生成提供强大的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">自研EDA工具集完整的仿真、综合、时序分析工具链无缝集成到AI工作流中</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();
}
});
})();
`;
}