feat:用户信息和会员展示到页面上

src/constants/toolIcons.ts

@@ -175,3 +175,8 @@ export const stateTransitionIconSvg = `
  * 用户提问图标 SVG
  */
 export const userQuestionIconSvg = `<svg t="1767869230062" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" width="14" height="14"><path d="M563.645217 578.782609c2.537739-35.350261 6.322087-58.189913 11.397566-68.518957 7.568696-15.449043 24.175304-34.370783 49.775304-56.631652 35.172174-30.72 58.546087-53.960348 70.121739-69.810087 11.575652-15.805217 17.408-36.418783 17.408-61.885217 0-41.939478-15.805217-76.399304-47.37113-103.379479-31.610435-26.980174-73.638957-40.470261-126.130087-40.47026-56.765217 0-101.376 15.760696-133.921392 47.282086C372.424348 256.934957 356.173913 298.562783 356.173913 350.386087h71.145739c1.335652-31.165217 6.811826-55.02887 16.384-71.590957 17.051826-29.740522 47.86087-44.610783 92.338087-44.610782 35.973565 0 61.796174 8.637217 77.378783 25.911652 15.582609 17.274435 23.373913 37.665391 23.373913 61.128348 0 16.784696-5.342609 32.990609-16.027826 48.573217-5.787826 8.904348-13.534609 17.363478-23.151305 25.555478l-31.966608 28.40487c-30.675478 27.113739-50.487652 51.155478-59.570087 72.125217-6.054957 13.979826-10.551652 41.627826-13.579131 82.899479h71.145739z m15.137392 89.043478a44.521739 44.521739 0 1 0-89.043479 0 44.521739 44.521739 0 0 0 89.043479 0z" fill="#8a8a8a" p-id="4820"></path><path d="M934.912 0h-801.391304a133.565217 133.565217 0 0 0-133.565218 133.565217v623.304348l0.222609 7.835826A133.565217 133.565217 0 0 0 133.565217 890.434783h222.608696v89.043478a44.521739 44.521739 0 0 0 64.556522 39.713391L675.661913 890.434783h259.294609a133.565217 133.565217 0 0 0 133.565217-133.565218V133.565217a133.565217 133.565217 0 0 0-133.565217-133.565217z m-801.391304 89.043478h801.391304a44.521739 44.521739 0 0 1 44.521739 44.521739v623.304348a44.521739 44.521739 0 0 1-44.521739 44.521739h-269.801739a44.521739 44.521739 0 0 0-20.034783 4.763826l-199.902608 100.930783V845.913043a44.521739 44.521739 0 0 0-44.52174-44.521739h-267.130434a44.521739 44.521739 0 0 1-44.521739-44.521739V133.565217a44.521739 44.521739 0 0 1 44.521739-44.521739z" fill="#8a8a8a" p-id="4821"></path></svg>`;
+
+/**
+ * 用户头像图标 SVG
+ */
+export const userAvatarIconSvg = `<svg t="1767947405083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4661" width="16" height="16"><path d="M515.541449 7.082899c-280.359429 0-508.458551 228.120391-508.458551 508.458551s228.120391 508.458551 508.458551 508.458551 508.458551-228.120391 508.458551-508.458551S795.900879 7.082899 515.541449 7.082899zM515.541449 981.864196c-257.132626 0-466.301477-209.190121-466.301477-466.322747 0-257.132626 209.168851-466.322747 466.301477-466.322747s466.301477 209.190121 466.301477 466.322747S772.674075 981.864196 515.541449 981.864196zM614.574414 524.177056 614.574414 524.177056c47.751075-31.96876 79.230625-86.398604 79.230625-148.187857 0-98.437405-79.804915-178.24232-178.24232-178.24232-98.437405 0-178.24232 79.804915-178.24232 178.24232 0 61.810523 31.479551 116.219097 79.251895 148.187857-100.266622 39.519598-171.244501 137.170014-171.244501 251.453545 0 0.23397 0 0.446669 0.02127 0.659369 0 0.04254-0.02127 0.10635-0.02127 0.14889 0 15.612155 12.65563 28.246516 28.267786 28.246516 15.590885 0 21.886796-12.63436 21.886796-28.246516 0-0.340319-0.08508-0.659369-0.10635-1.020958 0.10635-118.005774 102.159649-219.995264 220.207964-219.995264 118.112124 0 220.207964 102.095839 220.207964 220.207964 0 0.14889-1.467628 29.054774 21.971875 29.054774 15.505806 0 28.076356-12.57055 28.076356-28.055086 0-0.06381-0.02127-0.12762-0.02127-0.2127 0-0.25524 0.02127-0.510479 0.02127-0.786989C785.797645 661.34707 714.798496 563.696654 614.574414 524.177056zM515.541449 510.734437c-74.402343 0-134.723968-60.321625-134.723968-134.723968 0-74.423613 60.321625-134.723968 134.723968-134.723968 74.423613 0 134.723968 60.321625 134.723968 134.723968S589.943792 510.734437 515.541449 510.734437z" fill="currentColor" p-id="4662"></path></svg>`;

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>
@@ -20,20 +27,18 @@ export function getConversationHistoryBarContent(): string {
       </div>
 
       <div class="right-actions">
-        <div class="user-info" id="userInfo" style="display: none;">
-          <svg class="user-icon" 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>
-          <span class="user-nickname" id="userNickname">加载中...</span>
-        </div>
-
-        <img class="tier-icon" id="tierIcon" style="display: none;" />
-
         <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>
   `;
@@ -63,48 +68,56 @@ export function getConversationHistoryBarStyles(): string {
     .right-actions {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 8px;
     }
 
-    .user-info {
+    .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;
-      gap: 6px;
+      justify-content: center;
-      padding: 6px 10px;
+      transition: all 0.2s ease;
-      background: var(--vscode-button-secondaryBackground);
-      border-radius: 4px;
-      font-size: 13px;
-      color: var(--vscode-button-secondaryForeground);
-    }
-
-    .user-icon {
-      width: 16px;
-      height: 16px;
       flex-shrink: 0;
     }
 
-    .user-nickname {
+    .user-avatar-icon-button:hover {
-      white-space: nowrap;
+      background: var(--vscode-toolbar-hoverBackground);
-      max-width: 120px;
+      transform: scale(1.1);
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
-    .tier-icon {
+    .user-avatar-icon-button:active {
-      width: 110px;
+      transform: scale(0.95);
-      height: 35px;
-      flex-shrink: 0;
-      object-fit: contain;
-      border-radius: 4px;
     }
 
+    .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;
@@ -113,7 +126,7 @@ export function getConversationHistoryBarStyles(): string {
     }
 
     .history-dropdown-button:hover {
-      opacity: 0.8;
+      background: var(--vscode-toolbar-hoverBackground);
     }
 
     .dropdown-label {
@@ -212,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;
@@ -222,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 {
@@ -259,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;

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();
+        });
+      }
+    });
+  `;
+}

src/views/webviewContent.ts

@@ -588,22 +588,21 @@ export function getWebviewContent(
         case 'updateUserInfo':
           // 更新用户信息
           console.log('[WebView] 收到用户信息:', message.userInfo);
-          const userInfo = document.getElementById('userInfo');
+          if (message.userInfo) {
-          const userNickname = document.getElementById('userNickname');
+            const userInfoData = {
-          const tierIcon = document.getElementById('tierIcon');
+              nickname: message.userInfo.nickname || message.userInfo.username || '用户',
-          if (userInfo && userNickname && message.userInfo) {
+              userId: message.userInfo.userId || message.userInfo.id,
-            const displayName = message.userInfo.nickname || message.userInfo.username || '用户';
+              tierName: message.userInfo.tierName,
-            console.log('[WebView] 显示用户名:', displayName);
+              tierIconUrl: message.tierIconUrl,
-            userNickname.textContent = displayName;
+              registerTime: message.userInfo.registerTime || message.userInfo.createdAt
+            };
 
-            // 显示会员等级图标
+            console.log('[WebView] 显示用户信息:', userInfoData);
-            if (tierIcon && message.tierIconUrl) {
+
-              tierIcon.src = message.tierIconUrl;
+            // 调用更新用户头像图标按钮的函数
-              tierIcon.style.display = 'block';
+            if (typeof updateUserAvatarIconButton === 'function') {
-              console.log('[WebView] 显示会员图标:', message.tierIconUrl);
+              updateUserAvatarIconButton(userInfoData);
             }
-
-            userInfo.style.display = 'flex';
           }
           break;