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 + 目录拼写)

frontend/web/src/components/chat/ChatContainer.tsx

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

frontend/web/src/components/chat/MessageBubble.tsx

@@ -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)}
+    />
+  );
+}

frontend/web/src/components/persona/CyreneAvatar.tsx

@@ -1,12 +1,39 @@
+import { useState } from 'react';
 import { usePersonaStore } from '@/store/personaStore';
-import type { CyreneForm } from '@/types/persona';
+import type { CyreneForm, Mood } from '@/types/persona';
 
 interface CyreneAvatarProps {
   size?: 'sm' | 'md' | 'lg';
   className?: string;
 }
 
-const FORM_AVATAR: Record<CyreneForm, string> = {
+/**
+ * 根据昔涟形态和心情获取对应的头像图片路径。
+ *
+ * 图片目录结构：
+ * - 1st_Form/ (空 — 尚未收集，回退到 2nd_Form)
+ * - 2nd_Form/: Cyrene-2F-N-Happy-1.png, Cyrene-2F-N-Tangle-1.png
+ * - 3rd_Form/: Cyrene-3F-Q-Happy-1.png, Cyrene-3F-Q-Happy-2.png
+ */
+function getAvatarPath(form: CyreneForm, _mood: Mood): string {
+  const base = '/images/Cyrene_Avatar';
+
+  // de_moi_ge 形态使用 3rd_Form，其余形态（mimi/default）使用 2nd_Form
+  // 注意：1st_Form 目录为空，mimi 也回退到 2nd_Form
+  if (form === 'de_moi_ge') {
+    return `${base}/3rd_Form/Cyrene-3F-Q-Happy-1.png`;
+  }
+
+  // mimi / default 形态：happy 用 Happy 图，thoughtful/worried 用 Tangle 图
+  if (_mood === 'thoughtful' || _mood === 'worried') {
+    return `${base}/2nd_Form/Cyrene-2F-N-Tangle-1.png`;
+  }
+
+  return `${base}/2nd_Form/Cyrene-2F-N-Happy-1.png`;
+}
+
+/** 图片加载失败时的回退 emoji */
+const FORM_FALLBACK_EMOJI: Record<CyreneForm, string> = {
   mimi: '🌸',
   default: '🌺',
   de_moi_ge: '🌌',
@@ -18,18 +45,35 @@ const SIZE_CLASS = {
   lg: 'w-20 h-20 text-4xl',
 };
 
+const FORM_LABEL: Record<CyreneForm, string> = {
+  mimi: '迷迷',
+  default: '小昔涟',
+  de_moi_ge: '德谬歌',
+};
+
 export function CyreneAvatar({ size = 'md', className = '' }: CyreneAvatarProps) {
-  const { currentForm } = usePersonaStore();
-  const emoji = FORM_AVATAR[currentForm] || '🌸';
+  const { currentForm, mood } = usePersonaStore();
+  const [imgError, setImgError] = useState(false);
+  const avatarSrc = getAvatarPath(currentForm, mood);
+  const fallbackEmoji = FORM_FALLBACK_EMOJI[currentForm] || '🌸';
 
   return (
     <div
-      className={`${SIZE_CLASS[size]} rounded-full bg-gradient-to-br from-pink-200 to-pink-400 dark:from-pink-800 dark:to-pink-600 flex items-center justify-center shadow-md ${className}`}
-      title={`昔涟 · ${currentForm === 'mimi' ? '迷迷' : currentForm === 'de_moi_ge' ? '德谬歌' : '小昔涟'}`}
+      className={`${SIZE_CLASS[size]} rounded-full bg-gradient-to-br from-pink-200 to-pink-400 dark:from-pink-800 dark:to-pink-600 flex items-center justify-center shadow-md overflow-hidden ${className}`}
+      title={`昔涟 · ${FORM_LABEL[currentForm]}`}
     >
-      <span role="img" aria-label="昔涟">
-        {emoji}
-      </span>
+      {imgError ? (
+        <span role="img" aria-label="昔涟">
+          {fallbackEmoji}
+        </span>
+      ) : (
+        <img
+          src={avatarSrc}
+          alt={`昔涟 · ${FORM_LABEL[currentForm]}`}
+          className="w-full h-full object-cover"
+          onError={() => setImgError(true)}
+        />
+      )}
     </div>
   );
 }