Merge remote-tracking branch 'refs/remotes/origin/merge/merge' into feat/back-to-front

# Conflicts: # src/config/settings.ts # src/services/icCoderAuthProvider.ts
2026-01-10 19:01:22 +08:00
parent 4a7af49fea 4687c3faa6
commit 9786b7141c
21 changed files with 1514 additions and 47 deletions
--- a/src/views/agentCard.ts
+++ b/src/views/agentCard.ts
@ -98,24 +98,24 @@ export function getAgentCardStyles(): string {
    }
    /* 低调显示的工具调用样式 */
    .agent-step.low-profile {
-      opacity: 0.5;
-      font-size: 10px;
-      padding: 2px 6px;
+      opacity: 0.85;
+      font-size: 12px;
+      padding: 4px 8px;
      background: transparent;
      margin-bottom: 2px;
    }
    .agent-step.low-profile .step-icon {
-      opacity: 0.4;
-      font-size: 10px;
+      opacity: 0.8;
+      font-size: 12px;
    }
    .agent-step.low-profile .step-name {
-      font-weight: 300;
+      font-weight: 400;
      color: var(--vscode-descriptionForeground);
-      opacity: 0.7;
+      opacity: 0.9;
    }
    .agent-step.low-profile .step-result {
-      opacity: 0.6;
-      font-size: 9px;
+      opacity: 0.85;
+      font-size: 11px;
    }
  `;
 }
--- a/src/views/conversationHistoryBar.ts
+++ b/src/views/conversationHistoryBar.ts
@ -1,3 +1,10 @@
+import {
+  getUserInfoComponentContent,
+  getUserInfoComponentStyles,
+  getUserInfoComponentScript,
+} from "./userInfoComponent";
+import { userAvatarIconSvg } from "../constants/toolIcons";
+
 /**
 * 获取会话历史栏的 HTML 内容
 */
@ -6,7 +13,7 @@ export function getConversationHistoryBarContent(): string {
    <div class="conversation-history-bar">
      <div class="history-dropdown-container">
        <button class="history-dropdown-button" onclick="toggleHistoryDropdown()">
-          <span class="dropdown-label">Past Conversations</span>
+          <span class="dropdown-label">历史对话</span>
          <svg class="dropdown-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z" fill="currentColor"/>
          </svg>
@ -19,11 +26,20 @@ export function getConversationHistoryBarContent(): string {
        </div>
      </div>

-      <button class="new-conversation-button" onclick="createNewConversation()" title="新建对话">
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
-        </svg>
-      </button>
+      <div class="right-actions">
+        <button class="new-conversation-button" onclick="createNewConversation()" title="新建对话">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>
+          </svg>
+        </button>
+
+        <div class="user-info-container">
+          <button class="user-avatar-icon-button" id="userAvatarIconButton" style="display: none;" title="查看用户信息" onclick="openUserDetailModal()">
+            ${userAvatarIconSvg}
+          </button>
+          ${getUserInfoComponentContent()}
+        </div>
+      </div>
    </div>
  `;
 }
@ -49,13 +65,59 @@ export function getConversationHistoryBarStyles(): string {
      flex: 1;
    }

+    .right-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .user-info-container {
+      position: relative;
+    }
+
+    .user-avatar-icon-button {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      background: transparent;
+      color: var(--vscode-foreground);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .user-avatar-icon-button:hover {
+      background: var(--vscode-toolbar-hoverBackground);
+      transform: scale(1.1);
+    }
+
+    .user-avatar-icon-button:active {
+      transform: scale(0.95);
+    }
+
+    .user-avatar-icon-button.active {
+      background: var(--vscode-toolbar-hoverBackground);
+    }
+
+    .user-avatar-icon-button svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    ${getUserInfoComponentStyles()}
+
    .history-dropdown-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: transparent;
-      color: var(--vscode-input-foreground);
+      color: var(--vscode-foreground);
      border: none;
      border-radius: 4px;
      cursor: pointer;
@ -64,7 +126,7 @@ export function getConversationHistoryBarStyles(): string {
    }

    .history-dropdown-button:hover {
-      opacity: 0.8;
+      background: var(--vscode-toolbar-hoverBackground);
    }

    .dropdown-label {
@ -163,7 +225,7 @@ export function getConversationHistoryBarStyles(): string {
      background: transparent;
      color: var(--vscode-foreground);
      border: none;
-      border-radius: 4px;
+      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
@ -173,11 +235,12 @@ export function getConversationHistoryBarStyles(): string {
    }

    .new-conversation-button:hover {
-      opacity: 0.7;
+      background: var(--vscode-toolbar-hoverBackground);
+      transform: scale(1.1);
    }

    .new-conversation-button:active {
-      opacity: 0.5;
+      transform: scale(0.95);
    }

    .new-conversation-button svg {
@ -210,6 +273,29 @@ export function getConversationHistoryBarStyles(): string {
 */
 export function getConversationHistoryBarScript(): string {
  return `
+    ${getUserInfoComponentScript()}
+
+    // 更新用户头像图标按钮显示
+    function updateUserAvatarIconButton(userInfo) {
+      const userAvatarIconButton = document.getElementById('userAvatarIconButton');
+
+      if (userInfo && userInfo.nickname) {
+        // 显示用户头像图标按钮
+        if (userAvatarIconButton) {
+          userAvatarIconButton.style.display = 'flex';
+        }
+        // 同时更新用户详情弹窗的数据
+        if (typeof updateUserInfoDisplay === 'function') {
+          updateUserInfoDisplay(userInfo);
+        }
+      } else {
+        // 隐藏用户头像图标按钮
+        if (userAvatarIconButton) {
+          userAvatarIconButton.style.display = 'none';
+        }
+      }
+    }
+
    // 会话历史相关变量
    let conversationHistory = [];
    let currentConversationId = null;
--- a/src/views/messageArea.ts
+++ b/src/views/messageArea.ts
@ -760,16 +760,39 @@ export function getMessageAreaScript(): string {
        return toolNameMap[toolName] || toolName;
      }

+      // 自动滚动控制标志
+      let shouldAutoScroll = true;
+      let lastScrollHeight = 0;
+
      // 检查用户是否在底部附近（允许50px的误差）
      function isUserNearBottom() {
        const threshold = 50;
        return messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight < threshold;
      }

-      // 智能滚动：只有用户在底部附近时才自动滚动
+      // 监听用户滚动行为
+      messagesEl.addEventListener('scroll', () => {
+        const isAtBottom = isUserNearBottom();
+
+        // 如果用户滚动到底部，恢复自动滚动
+        if (isAtBottom) {
+          shouldAutoScroll = true;
+        } else {
+          // 只有当内容高度没有变化时，才认为是用户主动滚动
+          // 如果内容高度变化了，说明是因为新内容导致的位置变化，不应该停止自动滚动
+          if (messagesEl.scrollHeight === lastScrollHeight) {
+            shouldAutoScroll = false;
+          }
+        }
+
+        lastScrollHeight = messagesEl.scrollHeight;
+      });
+
+      // 智能滚动：只有在允许自动滚动时才滚动到底部
      function smartScrollToBottom() {
-        if (isUserNearBottom()) {
+        if (shouldAutoScroll) {
          messagesEl.scrollTop = messagesEl.scrollHeight;
+          lastScrollHeight = messagesEl.scrollHeight;
        }
      }

--- a/src/views/progressBar.ts
+++ b/src/views/progressBar.ts
@ -25,7 +25,7 @@ export function getProgressBarContent(): string {
            <span class="step-number">1</span>
            <span class="step-check">✓</span>
          </div>
-          <div class="step-label">Spec设计文档</div>
+          <div class="step-label">Spec</div>
        </div>

        <div class="progress-line"></div>
@ -35,7 +35,7 @@ export function getProgressBarContent(): string {
            <span class="step-number">2</span>
            <span class="step-check">✓</span>
          </div>
-          <div class="step-label">Design代码编写</div>
+          <div class="step-label">Design</div>
        </div>

        <div class="progress-line"></div>
@ -45,7 +45,7 @@ export function getProgressBarContent(): string {
            <span class="step-number">3</span>
            <span class="step-check">✓</span>
          </div>
-          <div class="step-label">Sim仿真检查</div>
+          <div class="step-label">Simulation</div>
        </div>

        <div class="progress-line"></div>
@ -55,7 +55,7 @@ export function getProgressBarContent(): string {
            <span class="step-number">4</span>
            <span class="step-check">✓</span>
          </div>
-          <div class="step-label">Done完成</div>
+          <div class="step-label">Done</div>
        </div>
      </div>
    </div>
--- a/src/views/userInfoComponent.ts
+++ b/src/views/userInfoComponent.ts
@ -0,0 +1,287 @@
+/**
+ * 用户信息组件
+ * 包含用户头像、昵称、会员等级等信息
+ */
+
+/**
+ * 获取用户信息组件的 HTML 内容
+ * 只包含用户详情下拉面板,不包含触发按钮
+ */
+export function getUserInfoComponentContent(): string {
+  return `
+    <div class="user-info-wrapper">
+      <!-- 用户详情下拉面板 -->
+      <div class="user-detail-dropdown" id="userDetailDropdown">
+        <div class="user-detail-content">
+          <div class="user-detail-header">
+            <div class="user-avatar-small">
+              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
+              </svg>
+            </div>
+            <div class="user-name-tier">
+              <div class="user-detail-name" id="userDetailName">加载中...</div>
+              <img class="tier-icon-inline" id="tierIconInline" style="display: none;" />
+            </div>
+          </div>
+
+          <div class="user-detail-body">
+            <div class="user-detail-item">
+              <span class="detail-label">剩余 Credits</span>
+              <span class="detail-value" id="creditsDetail">-</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * 获取用户信息组件的 CSS 样式
+ */
+export function getUserInfoComponentStyles(): string {
+  return `
+    .user-info-wrapper {
+      position: relative;
+    }
+
+    /* 用户详情下拉面板 */
+    .user-detail-dropdown {
+      display: none;
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      z-index: 10000;
+      min-width: 250px;
+      max-width: 320px;
+    }
+
+    .user-detail-dropdown.active {
+      display: block;
+      animation: dropdownSlideIn 0.2s ease-out;
+    }
+
+    @keyframes dropdownSlideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .user-detail-content {
+      background: var(--vscode-sideBar-background);
+      border: 1px solid var(--vscode-widget-border);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      overflow: hidden;
+    }
+
+    .user-detail-header {
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: linear-gradient(135deg, rgba(0, 122, 204, 0.1) 0%, rgba(88, 166, 255, 0.05) 100%);
+      border-bottom: 1px solid var(--vscode-widget-border);
+    }
+
+    .user-avatar-small {
+      width: 26px;
+      height: 26px;
+      flex-shrink: 0;
+      background: linear-gradient(135deg, #007acc 0%, #58a6ff 100%);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
+    }
+
+    .user-avatar-small svg {
+      width: 18px;
+      height: 18px;
+      color: #ffffff;
+    }
+
+    .user-name-tier {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .user-detail-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vscode-foreground);
+    }
+
+    .tier-icon-inline {
+      height: 26px;
+      object-fit: contain;
+    }
+
+    .user-detail-body {
+      padding: 12px;
+      background: var(--vscode-sideBar-background);
+    }
+
+    .user-detail-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 12px;
+      margin-bottom: 6px;
+      background: var(--vscode-editor-background);
+      border-radius: 6px;
+      border: 1px solid var(--vscode-widget-border);
+      transition: all 0.2s ease;
+    }
+
+    .user-detail-item:hover {
+      background: var(--vscode-list-hoverBackground);
+      border-color: rgba(0, 122, 204, 0.3);
+    }
+
+    .user-detail-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .detail-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--vscode-descriptionForeground);
+      opacity: 0.8;
+    }
+
+    .detail-value {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--vscode-foreground);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .tier-icon-large {
+      height: 20px;
+      object-fit: contain;
+    }
+
+    .tier-icon {
+      width: 110px;
+      height: 35px;
+      flex-shrink: 0;
+      object-fit: contain;
+      border-radius: 4px;
+    }
+  `;
+}
+
+/**
+ * 获取用户信息组件的 JavaScript 脚本
+ */
+export function getUserInfoComponentScript(): string {
+  return `
+    // 用户信息数据
+    let currentUserInfo = null;
+
+    // 切换用户详情下拉面板
+    function openUserDetailModal() {
+      const dropdown = document.getElementById('userDetailDropdown');
+      const userButton = document.getElementById('userAvatarIconButton');
+
+      if (dropdown) {
+        const isActive = dropdown.classList.contains('active');
+        if (isActive) {
+          dropdown.classList.remove('active');
+          if (userButton) {
+            userButton.classList.remove('active');
+          }
+        } else {
+          dropdown.classList.add('active');
+          if (userButton) {
+            userButton.classList.add('active');
+          }
+          // 更新下拉面板中的用户信息
+          updateUserDetailModal();
+        }
+      }
+    }
+
+    // 关闭用户详情下拉面板
+    function closeUserDetailModal() {
+      const dropdown = document.getElementById('userDetailDropdown');
+      const userButton = document.getElementById('userAvatarIconButton');
+
+      if (dropdown) {
+        dropdown.classList.remove('active');
+      }
+      if (userButton) {
+        userButton.classList.remove('active');
+      }
+    }
+
+    // 更新用户详情下拉面板内容
+    function updateUserDetailModal() {
+      if (!currentUserInfo) {
+        return;
+      }
+
+      // 更新用户名
+      const userDetailName = document.getElementById('userDetailName');
+      if (userDetailName) {
+        userDetailName.textContent = currentUserInfo.nickname || '未知用户';
+      }
+
+      // 更新会员等级图标(显示在用户名旁边)
+      const tierIconInline = document.getElementById('tierIconInline');
+      if (tierIconInline && currentUserInfo.tierIconUrl) {
+        tierIconInline.src = currentUserInfo.tierIconUrl;
+        tierIconInline.style.display = 'block';
+      } else if (tierIconInline) {
+        tierIconInline.style.display = 'none';
+      }
+
+      // 更新剩余 Credits
+      const creditsDetail = document.getElementById('creditsDetail');
+      if (creditsDetail) {
+        creditsDetail.textContent = currentUserInfo.credits !== undefined ? currentUserInfo.credits.toString() : '-';
+      }
+    }
+
+    // 更新用户信息显示
+    function updateUserInfoDisplay(userInfo) {
+      currentUserInfo = userInfo;
+    }
+
+    // 绑定下拉面板事件
+    document.addEventListener('DOMContentLoaded', () => {
+      // 点击页面其他地方关闭下拉面板
+      document.addEventListener('click', (e) => {
+        const dropdown = document.getElementById('userDetailDropdown');
+        const userButton = document.getElementById('userAvatarIconButton');
+
+        if (dropdown && dropdown.classList.contains('active')) {
+          // 如果点击的不是用户按钮和下拉面板内容，则关闭
+          if (!userButton?.contains(e.target) && !dropdown.contains(e.target)) {
+            closeUserDetailModal();
+          }
+        }
+      });
+
+      // 阻止下拉面板内容点击事件冒泡
+      const dropdownContent = document.querySelector('.user-detail-content');
+      if (dropdownContent) {
+        dropdownContent.addEventListener('click', (e) => {
+          e.stopPropagation();
+        });
+      }
+    });
+  `;
+}
--- a/src/views/waveformPreviewContent.ts
+++ b/src/views/waveformPreviewContent.ts
@ -347,7 +347,7 @@ export function getWaveformPreviewScript(): string {
    }

    /**
-     * 打开完整波形查看器
+     * 打开完整波形查看器（在新列中）
     */
    function openFullWaveform(vcdFilePath) {
      vscode.postMessage({
--- a/src/views/webviewContent.ts
+++ b/src/views/webviewContent.ts
@ -585,6 +585,27 @@ export function getWebviewContent(
          }
          break;

+        case 'updateUserInfo':
+          // 更新用户信息
+          console.log('[WebView] 收到用户信息:', message.userInfo);
+          if (message.userInfo) {
+            const userInfoData = {
+              nickname: message.userInfo.nickname || message.userInfo.username || '用户',
+              userId: message.userInfo.userId || message.userInfo.id,
+              tierName: message.userInfo.tierName,
+              tierIconUrl: message.tierIconUrl,
+              registerTime: message.userInfo.registerTime || message.userInfo.createdAt
+            };
+
+            console.log('[WebView] 显示用户信息:', userInfoData);
+
+            // 调用更新用户头像图标按钮的函数
+            if (typeof updateUserAvatarIconButton === 'function') {
+              updateUserAvatarIconButton(userInfoData);
+            }
+          }
+          break;
+
        case 'resetSegmentedMessage':
          // 重置分段消息容器（停止对话时调用）
          console.log('[WebView] 重置分段消息容器');
@ -611,6 +632,21 @@ export function getWebviewContent(
          }
          break;

+        case 'checkPanelWidth':
+          // 检查面板宽度
+          const minWidth = message.minWidth || 200;
+          const currentWidth = document.body.clientWidth;
+          console.log('[WebView] 检查面板宽度:', currentWidth, '最小宽度:', minWidth);
+          if (currentWidth < minWidth) {
+            // 宽度不足，通知后端关闭面板
+            vscode.postMessage({
+              command: 'panelWidthInsufficient',
+              currentWidth: currentWidth,
+              minWidth: minWidth
+            });
+          }
+          break;
+
        case 'vcdInfo':
          // 渲染迷你波形预览信息
          try {
@ -721,6 +757,35 @@ export function getWebviewContent(
      }
    });

+    // 监听窗口大小变化，检查面板宽度
+    let resizeTimer;
+    const MIN_PANEL_WIDTH = 500;
+
+    function checkPanelWidth() {
+      const currentWidth = document.body.clientWidth;
+      if (currentWidth < MIN_PANEL_WIDTH) {
+        console.log('[WebView] 面板宽度不足:', currentWidth, 'px，最小要求:', MIN_PANEL_WIDTH, 'px');
+        vscode.postMessage({
+          command: 'panelWidthInsufficient',
+          currentWidth: currentWidth,
+          minWidth: MIN_PANEL_WIDTH
+        });
+      }
+    }
+
+    window.addEventListener('resize', () => {
+      // 使用防抖，避免频繁检查
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        checkPanelWidth();
+      }, 300);
+    });
+
+    // 初始加载时也检查一次
+    setTimeout(() => {
+      checkPanelWidth();
+    }, 500);
+
    ${getMessageAreaScript()}
    ${getAgentCardScript()}
    ${getWaveformPreviewScript()}