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

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;
-      padding: 6px 10px;
-      background: var(--vscode-button-secondaryBackground);
-      border-radius: 4px;
-      font-size: 13px;
-      color: var(--vscode-button-secondaryForeground);
-    }
-
-    .user-icon {
-      width: 16px;
-      height: 16px;
+      justify-content: center;
+      transition: all 0.2s ease;
       flex-shrink: 0;
     }
 
-    .user-nickname {
-      white-space: nowrap;
-      max-width: 120px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .user-avatar-icon-button:hover {
+      background: var(--vscode-toolbar-hoverBackground);
+      transform: scale(1.1);
     }
 
-    .tier-icon {
-      width: 110px;
-      height: 35px;
-      flex-shrink: 0;
-      object-fit: contain;
-      border-radius: 4px;
+    .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;
@@ -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;