pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Roe-xin
2026-01-09 17:21:42 +08:00
parent c58e3603de
commit a85a044a9b
4 changed files with 381 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/conversationHistoryBar.ts
View File

@ -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;

287
src/views/userInfoComponent.ts Normal file
View File

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

27
src/views/webviewContent.ts
View File

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