diff --git a/src/extension.ts b/src/extension.ts index 50b32d2..183d353 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -310,8 +310,8 @@ export async function activate(context: vscode.ExtensionContext) { logoutCommand, changeInvitationCodeCommand, testNotificationCommand, - testTrialUserCommand, - testExpiredUserCommand, + // testTrialUserCommand, + // testExpiredUserCommand, // TODO: 等待重新实现这些命令 // viewHistoryCommand, // newSessionCommand, diff --git a/src/panels/ICHelperPanel.ts b/src/panels/ICHelperPanel.ts index 9148914..8292195 100644 --- a/src/panels/ICHelperPanel.ts +++ b/src/panels/ICHelperPanel.ts @@ -490,6 +490,12 @@ export async function showICHelperPanel( command: "invitationCodeVerified", success: true }); + // 延迟显示欢迎弹窗，确保邀请码弹窗已关闭 + setTimeout(() => { + panel.webview.postMessage({ + command: "showNdtWelcomeModal" + }); + }, 300); } else { // 验证失败，返回错误信息 panel.webview.postMessage({ @@ -504,6 +510,10 @@ export async function showICHelperPanel( // 跳转到 IC Coder 官网 vscode.env.openExternal(vscode.Uri.parse("https://www.iccoder.com")); break; + case "openTutorial": + // 打开使用教程 + vscode.env.openExternal(vscode.Uri.parse("https://www.iccoder.com/tutorial")); + break; case "openUserManual": // 打开用户手册 vscode.env.openExternal(vscode.Uri.parse("https://www.iccoder.com")); diff --git a/src/views/ndtWelcomeModal.ts b/src/views/ndtWelcomeModal.ts new file mode 100644 index 0000000..99f67a8 --- /dev/null +++ b/src/views/ndtWelcomeModal.ts @@ -0,0 +1,330 @@ +/** + * 宁德时代欢迎弹窗 + * 功能：邀请码验证成功后显示欢迎信息 + * 依赖：无 + * 使用场景：宁德时代用户首次验证邀请码成功后显示 + */ + +/** + * 获取宁德时代欢迎弹窗的 HTML 内容 + */ +export function getNdtWelcomeModalContent(logoUri?: string): string { + return ` + + + `; +} + +/** + * 获取宁德时代欢迎弹窗的 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(); + } + }); + })(); + `; +} diff --git a/src/views/webviewContent.ts b/src/views/webviewContent.ts index 5bb4900..8ed58b6 100644 --- a/src/views/webviewContent.ts +++ b/src/views/webviewContent.ts @@ -35,6 +35,11 @@ import { getWelcomeModalStyles, getWelcomeModalScript, } from "./welcomeModal"; +import { + getNdtWelcomeModalContent, + getNdtWelcomeModalStyles, + getNdtWelcomeModalScript, +} from "./ndtWelcomeModal"; import { getExpiredModalContent, getExpiredModalStyles, @@ -111,6 +116,7 @@ export function getWebviewContent( ${getInputAreaStyles()} ${getInvitationModalStyles()} ${getWelcomeModalStyles()} + ${getNdtWelcomeModalStyles()} ${getExpiredModalStyles()} .file-editor-section { @@ -479,6 +485,7 @@ export function getWebviewContent( ${getProgressBarContent()} ${getInvitationModalContent(qrCodeUri, logoUri)} ${getWelcomeModalContent(logoUri)} + ${getNdtWelcomeModalContent(logoUri)} ${getExpiredModalContent(logoUri)}
@@ -888,6 +895,7 @@ export function getWebviewContent( ${getInputAreaScript()} ${getInvitationModalScript()} ${getWelcomeModalScript()} + ${getNdtWelcomeModalScript()} ${getExpiredModalScript()} `;