feat: 更新发布流程文档，添加版本更新和打包步骤；优化邀请码验证弹窗和WebView内容，增加Logo支持

2026-01-28 17:10:28 +08:00
parent a734ccbb88
commit eae3968465
6 changed files with 239 additions and 88 deletions
--- a/PUBLISH.md
+++ b/PUBLISH.md
@ -268,6 +268,44 @@ pnpm vsce publish 0.0.3
 4. 执行发布命令
 5. 验证市场上的插件是否正常

+
+
+## 更新流程
+
+1. 修改版本号
+
+   手动修改 修改package.json文件
+
+   命令修改
+
+   ```bash
+   #补丁版本 （1.0.0 -> 1.0.1)
+   pnpm version patch
+   
+   #次要版本 (1.0.0 -> 1.1.0)
+   pnpm version minor
+   
+   #主要版本 (1.0.0 -> 2.0.0)
+   pnpm version major
+   ```
+
+2. 打包
+
+   ```bash
+   #先build
+   pnpm run build
+   
+   #后打包成.vsix
+   pnpm vsce package --no-dependencies
+   ```
+
+   
+
+3. 手动上传/命令上传
+
+   - https://marketplace.visualstudio.com/ 在这个里面手动上传 更新就选择update
+   - 命令上传：vsce publish
+
 ---

 ## 常见问题
--- a/media/homepage-logo.png
+++ b/media/homepage-logo.png
--- a/src/panels/ICHelperPanel.ts
+++ b/src/panels/ICHelperPanel.ts
@ -162,6 +162,11 @@ export async function showICHelperPanel(
    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "QRCode", "wx.png")
  );

+  // 获取Logo URI
+  const logoUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "media", "homepage-logo.png")
+  );
+
  // 设置HTML内容
  panel.webview.html = getWebviewContent(
    iconUri.toString(),
@ -169,7 +174,8 @@ export async function showICHelperPanel(
    liteIconUri.toString(),
    syIconUri.toString(),
    maxIconUri.toString(),
-    qrCodeUri.toString()
+    qrCodeUri.toString(),
+    logoUri.toString()
  );

  // 获取并发送用户信息到 webview
--- a/src/views/ICViewProvider.ts
+++ b/src/views/ICViewProvider.ts
@ -59,13 +59,25 @@ export function showICHelperPanel(context: vscode.ExtensionContext) {
    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "model", "Max.png")
  );

+  // 获取二维码图片URI
+  const qrCodeUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "src", "assets", "QRCode", "wx.png")
+  );
+
+  // 获取Logo URI
+  const logoUri = panel.webview.asWebviewUri(
+    vscode.Uri.joinPath(context.extensionUri, "media", "homepage-logo.png")
+  );
+
  // 设置HTML内容
  panel.webview.html = getWebviewContent(
    iconUri.toString(),
    autoIconUri.toString(),
    liteIconUri.toString(),
    syIconUri.toString(),
-    maxIconUri.toString()
+    maxIconUri.toString(),
+    qrCodeUri.toString(),
+    logoUri.toString()
  );

  // 处理消息
--- a/src/views/invitationModal.ts
+++ b/src/views/invitationModal.ts
@ -5,38 +5,57 @@
 /**
 * 获取邀请码弹窗的 HTML 内容
 */
-export function getInvitationModalContent(qrCodeUri?: string): string {
+export function getInvitationModalContent(
+  qrCodeUri?: string,
+  logoUri?: string,
+): string {
  return `
    <!-- 邀请码验证弹窗 -->
    <div id="invitationModal" class="invitation-modal" style="display: none;">
      <div class="invitation-modal-overlay"></div>
      <div class="invitation-modal-content">
-        <button id="invitationCloseBtn" class="invitation-close-btn" title="关闭">×</button>
+        ${logoUri ? `<img src="${logoUri}" class="invitation-logo-corner" alt="IC Coder" />` : ""}
+        <button id="invitationCloseBtn" class="invitation-close-btn" title="关闭">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M1 1L13 13M13 1L1 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+
        <div class="invitation-modal-header">
-          <h2>验证邀请码</h2>
-          <p class="invitation-modal-subtitle">仅供企业端用户和内部人员使用</p>
+          <!-- <div class="invitation-icon">🔐</div> -->
+          <h2>欢迎使用 IC Coder</h2>
+          <p class="invitation-modal-subtitle">目前IC Coder插件端仅供企业端付费用户使用，2026年3月起会逐步开放给所有用户使用~</p>
        </div>
+
        <div class="invitation-modal-body">
          <div class="invitation-qrcode-section">
-            <p class="invitation-qrcode-text">欢迎扫码添加微信获取邀请码</p>
-            <img src="${qrCodeUri}" alt="微信二维码" class="invitation-qrcode-image" />
+            <div class="invitation-qrcode-wrapper">
+              <img src="${qrCodeUri}" alt="微信二维码" class="invitation-qrcode-image" />
+            </div>
+            <p class="invitation-qrcode-text">欢迎扫码添加微信，填写《企业试用申请表》获取邀请码,与我们一起加速芯片设计与验证吧！</p>
          </div>
+
+          <div class="invitation-divider">
+          </div>
+
          <div class="invitation-input-section">
+            <label class="invitation-input-label">邀请码</label>
            <input
              type="text"
              id="invitationCodeInput"
              class="invitation-code-input"
-              placeholder="请输入邀请码"
+              placeholder="请输入您的邀请码"
              maxlength="20"
            />
            <div id="invitationError" class="invitation-error" style="display: none;"></div>
+            <button id="invitationSubmitBtn" class="invitation-btn invitation-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 class="invitation-modal-footer">
-          <button id="invitationSubmitBtn" class="invitation-btn invitation-btn-primary">
-            验证
-          </button>
-        </div>
      </div>
    </div>
  `;
@ -58,6 +77,8 @@ export function getInvitationModalStyles(): string {
      display: flex;
      align-items: center;
      justify-content: center;
+      padding: 20px;
+      font-family: var(--vscode-font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
    }

    .invitation-modal-overlay {
@ -66,45 +87,61 @@ export function getInvitationModalStyles(): string {
      left: 0;
      right: 0;
      bottom: 0;
-      background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(5px);
+      animation: fadeIn 0.3s ease-out;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
    }

    .invitation-modal-content {
      position: relative;
      background: var(--vscode-editor-background);
-      border: 1px solid var(--vscode-panel-border);
-      border-radius: 8px;
-      width: 90%;
-      max-width: 400px;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-      animation: modalSlideIn 0.3s ease-out;
+      border: 1px solid var(--vscode-widget-border);
+      border-radius: 12px;
+      width: 100%;
+      max-width: 420px;
+      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;
+      display: flex;
+      flex-direction: column;
    }

    .invitation-close-btn {
      position: absolute;
-      top: 12px;
-      right: 12px;
-      width: 28px;
-      height: 28px;
+      top: 16px;
+      right: 16px;
+      width: 32px;
+      height: 32px;
      border: none;
      background: transparent;
-      color: var(--vscode-foreground);
-      font-size: 24px;
-      line-height: 1;
+      color: var(--vscode-descriptionForeground);
      cursor: pointer;
-      border-radius: 4px;
+      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
-      opacity: 0.6;
-      z-index: 1;
+      z-index: 10;
+    }
+
+    .invitation-logo-corner {
+      position: absolute;
+      top: 16px;
+      left: 24px;
+      height: 40px;
+      width: auto;
+      opacity: 0.9;
+      z-index: 10;
    }

    .invitation-close-btn:hover {
-      opacity: 1;
      background: var(--vscode-toolbar-hoverBackground);
+      color: var(--vscode-foreground);
    }
    
    .invitation-close-btn:active {
@ -114,59 +151,100 @@ export function getInvitationModalStyles(): string {
    @keyframes modalSlideIn {
      from {
        opacity: 0;
-        transform: translateY(-20px);
+        transform: translateY(20px) scale(0.98);
      }
      to {
        opacity: 1;
-        transform: translateY(0);
+        transform: translateY(0) scale(1);
      }
    }

    .invitation-modal-header {
-      padding: 24px 24px 16px;
-      border-bottom: 1px solid var(--vscode-panel-border);
+      padding: 60px 32px 20px;
      text-align: center;
    }

    .invitation-modal-header h2 {
-      margin: 0;
-      font-size: 18px;
+      margin: 0 0 12px;
+      font-size: 20px;
      font-weight: 600;
      color: var(--vscode-foreground);
    }

    .invitation-modal-subtitle {
-      margin: 8px 0 0;
+      margin: 0;
      font-size: 13px;
      color: var(--vscode-descriptionForeground);
+      line-height: 1.5;
    }

    .invitation-modal-body {
-      padding: 24px;
+      padding: 0 32px 32px;
    }

    .invitation-qrcode-section {
      text-align: center;
      margin-bottom: 24px;
+      background: var(--vscode-editor-inactiveSelectionBackground);
+      padding: 20px;
+      border-radius: 8px;
+      margin-top: 10px;
    }

-    .invitation-qrcode-text {
-      margin: 0 0 16px;
-      font-size: 13px;
-      color: var(--vscode-foreground);
-      line-height: 1.5;
+    .invitation-qrcode-wrapper {
+      display: inline-block;
+      padding: 8px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .invitation-qrcode-image {
-      width: 200px;
-      height: 200px;
-      border: 1px solid var(--vscode-panel-border);
-      border-radius: 8px;
-      background: #fff;
+      width: 150px;
+      height: 150px;
+      display: block;
+    }
+
+    .invitation-qrcode-text {
+      margin-top: 12px;
+      font-size: 12px;
+      color: var(--vscode-descriptionForeground);
+      line-height: 1.5;
+    }
+
+    .invitation-divider {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+      color: var(--vscode-descriptionForeground);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .invitation-divider::before,
+    .invitation-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--vscode-widget-border);
+      opacity: 0.5;
+    }
+
+    .invitation-divider span {
+      padding: 0 12px;
    }

    .invitation-input-section {
-      margin-top: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .invitation-input-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--vscode-foreground);
    }

    .invitation-code-input {
@ -176,63 +254,74 @@ export function getInvitationModalStyles(): string {
      border: 1px solid var(--vscode-input-border);
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
-      border-radius: 4px;
+      border-radius: 6px;
      outline: none;
-      transition: border-color 0.2s;
      box-sizing: border-box;
+      transition: border-color 0.2s;
    }

    .invitation-code-input:focus {
      border-color: var(--vscode-focusBorder);
+      /* box-shadow: 0 0 0 2px var(--vscode-focusBorder); */
    }
    
    .invitation-code-input::placeholder {
-      color: var(--vscode-input-placeholderForeground);
+       color: var(--vscode-input-placeholderForeground);
    }

    .invitation-error {
-      margin-top: 12px;
      padding: 8px 12px;
-      font-size: 13px;
+      font-size: 12px;
      color: var(--vscode-errorForeground);
      background: var(--vscode-inputValidation-errorBackground);
      border: 1px solid var(--vscode-inputValidation-errorBorder);
-      border-radius: 4px;
+      border-radius: 6px;
+      animation: shakeError 0.4s ease-in-out;
    }
    
-    .invitation-modal-footer {
-      padding: 16px 24px;
-      border-top: 1px solid var(--vscode-panel-border);
-      display: flex;
-      justify-content: flex-end;
+    @keyframes shakeError {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-6px); }
+      75% { transform: translateX(6px); }
    }

    .invitation-btn {
-      padding: 8px 20px;
-      font-size: 13px;
+      width: 100%;
+      padding: 10px 16px;
+      font-size: 14px;
+      font-weight: 600;
      border: none;
-      border-radius: 4px;
+      border-radius: 6px;
      cursor: pointer;
-      transition: all 0.2s;
-      outline: none;
-    }
-
-    .invitation-btn-primary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
      background: var(--vscode-button-background);
      color: var(--vscode-button-foreground);
+      transition: all 0.2s;
    }

-    .invitation-btn-primary:hover {
+    .invitation-btn:hover {
      background: var(--vscode-button-hoverBackground);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
-    .invitation-btn-primary:active {
-      transform: scale(0.98);
+    .invitation-btn:active {
+      transform: translateY(0);
    }
    
-    .invitation-btn-primary:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .invitation-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+    
+    .invitation-btn svg {
+      width: 16px;
+      height: 16px;
    }
  `;
 }
@ -303,9 +392,14 @@ export function getInvitationModalScript(): string {
      submitBtn.addEventListener('click', submitInvitationCode);

      // 点击关闭按钮
-      closeBtn.addEventListener('click', function() {
-        hideInvitationModal();
-      });
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function(e) {
+          console.log('[InvitationModal] Close button clicked');
+          e.preventDefault();
+          e.stopPropagation();
+          hideInvitationModal();
+        });
+      }

      // 回车键提交
      input.addEventListener('keypress', function(e) {
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@ -39,7 +39,8 @@ export function getWebviewContent(
  liteIconUri?: string,
  syIconUri?: string,
  maxIconUri?: string,
-  qrCodeUri?: string
+  qrCodeUri?: string,
+  logoUri?: string,
 ): string {
  // 获取当前环境，只在 dev 和 test 环境下显示快速操作按钮
  const currentEnv = getCurrentEnv();
@ -404,13 +405,13 @@ export function getWebviewContent(
 <body>
  ${getConversationHistoryBarContent()}
  ${getProgressBarContent()}
-  ${getInvitationModalContent(qrCodeUri)}
+  ${getInvitationModalContent(qrCodeUri, logoUri)}
  <div class="header">
    <div style="display: flex; align-items: center; justify-content: center; gap: 15px;">
      <img src="${iconUri}" alt="IC Coder" style="width: 48px; height: 48px;" />
      <h1 style="margin: 0; font-size: 36px;">IC Coder</h1>
    </div>
-    <p style="font-size: 16px; margin-top: 12px;">专注于真实FPGA研发的Verilog智能体编程平台</p>
+    <p style="font-size: 16px; margin-top: 12px;">The Agentic AI Verilog Coding Platform, 将芯片设计与验证的效率提升至少20倍！</p>
  </div>

  <div class="chat-container">