fix: 第三轮修复 — 前端Session切换、DevTools UI刷新保持、头像背景替换

1. 修复前端清空对话无反应 (clearMainSessionMessages 链路)
2. 修复清除所有对话后侧边栏残留 + 重复新增按钮
3. 修复侧边栏点击无法切换会话 (Zustand 竞态 + URL hash)
4. 修复 URL 不显示 session ID (hash 同步链)
5. DevTools 会话监看刷新保持展开/折叠状态
6. 首页性能仪表盘去重 + 资源使用卡片 60s sparkline
7. DevTools 全局刷新改为 DOM 局部增量更新
8. 替换前端昔涟头像、聊天背景、用户头像为实际图片
9. 修复图片文件名 (双.png + 目录拼写)
This commit is contained in:
2026-05-17 20:32:42 +08:00
parent e7b7eff0d8
commit d00a8313ad
18 changed files with 799 additions and 343 deletions
@@ -12,7 +12,7 @@ export function ChatContainer() {
const statusLabel = continuousMode ? '主对话 · 进行中' : '';
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="flex flex-col h-full overflow-hidden chat-background">
{/* 状态指示器栏 */}
<div className="flex items-center justify-between px-4 py-1.5 border-b border-pink-100 dark:border-pink-900 bg-pink-50/50 dark:bg-pink-950/20 flex-shrink-0">
<div className="flex items-center gap-2">
@@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from 'react';
import { CyreneAvatar } from '@/components/persona/CyreneAvatar';
import { useAuthStore } from '@/store/authStore';
interface MessageBubbleProps {
role: 'user' | 'assistant' | 'system';
@@ -120,12 +121,35 @@ export function MessageBubble({ role, content, timestamp, isStreaming }: Message
)}
</div>
{/* 用户头像占位 */}
{isUser && (
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-pink-300 to-pink-500 flex items-center justify-center flex-shrink-0 mt-1 shadow-sm">
<span className="text-white text-sm"></span>
</div>
)}
{/* 用户头像 */}
{isUser && <UserAvatar />}
</div>
);
}
/** 用户头像组件:管理员使用 Admin_Avatar.jpg,普通用户使用 Default_Avatar.png */
function UserAvatar() {
const [imgError, setImgError] = useState(false);
const userId = useAuthStore((s) => s.userId);
const isAdmin = userId?.startsWith('admin_') ?? false;
const avatarSrc = isAdmin
? '/images/User_Avatar/Admin_Avatar.jpg'
: '/images/User_Avatar/Default_Avatar.png';
if (imgError) {
return (
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-pink-300 to-pink-500 flex items-center justify-center flex-shrink-0 mt-1 shadow-sm">
<span className="text-white text-sm"></span>
</div>
);
}
return (
<img
src={avatarSrc}
alt={isAdmin ? '管理员' : '用户'}
className="w-8 h-8 rounded-full object-cover flex-shrink-0 mt-1 shadow-sm"
onError={() => setImgError(true)}
/>
);
}