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

5
src/constants/toolIcons.ts
View File

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

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;